-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
97 lines (89 loc) · 2.42 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
const state = {
page: null,
ready: false,
products: []
};
const setState = (attributes) => {
Object.assign(state, attributes);
render();
};
const render = () => {
const html = pages[state.page]();
const body = document.getElementsByTagName('body')[0];
body.innerHTML = html;
};
const layout = (title, content) => {
return `
<div class="container" style="padding-top: 30px">
<div class="row"><h1>${title}</h1></div>
<div class="row">${content}</div>
</div>`;
};
const button = (label, onclick) => `
<button class="button" onclick="${onclick}">${label}</button>
`;
const pages = {
home: () => {
return layout('Home', `
${button('Account', "openPage('account')")}
<br/>
${button('Store', "openPage('store')")}
`);
},
account: () => {
return layout('Account', button('Back to Home', "openPage('home')"));
},
store: () => {
const content = () => {
if (!state.ready) {
return '<p>Please wait...<p>';
}
const html = state.products.map(({ id }) => {
const product = window.store.get(id);
if (!product) {
return '<div class="row">...</div>';
}
const tags = () => {
if (product.owned) return '<p>OWNED</p>';
return '';
};
const purchaseButton = () => {
if (!product.canPurchase) return '';
return button(product.price, `order('${product.id}')`);
};
return `
<div class="row">
<h3>${product.title}</h3>
${tags()}
<p>${product.description}</p>
<p>${purchaseButton()}</p>
</div>
`;
}).join('');
return `<div class="container">${html}</div>`;
};
return layout('Store', content() + button('Back to Home', "openPage('home')"));
}
};
const openPage = (page) => setState({ page });
openPage('home');
document.addEventListener('deviceready', () => {
const store = window.store;
const products = [{
id: 'cc.fovea.purchase.subscription1',
type: store.PAID_SUBSCRIPTION
}, {
id: 'cc.fovea.purchase.subscription2',
type: store.PAID_SUBSCRIPTION
}];
setState({ products });
store.verbosity = store.DEBUG;
store.register(products);
store.when().updated(render);
store.when().approved(p => p.finish());
store.ready(() => setState({ ready: true }));
store.refresh();
window.order = (productId) => {
store.order(productId);
};
});