@rebilly/instruments 4.5.0 → 4.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc +24 -26
- package/CHANGELOG.md +14 -0
- package/dist/index.js +8 -8
- package/dist/index.min.js +8 -8
- package/package.json +14 -3
- package/project.json +9 -0
- package/rollup.config.mjs +21 -26
- package/src/data/options-schema/index.js +94 -78
- package/src/data/options-schema/schemas/options-schema.js +419 -411
- package/src/events/base-event.js +34 -34
- package/src/events/events.spec.js +6 -6
- package/src/events/index.js +5 -5
- package/src/functions/destroy.js +19 -19
- package/src/functions/destroy.spec.js +41 -41
- package/src/functions/mount/fetch-data.js +200 -193
- package/src/functions/mount/fetch-data.spec.js +287 -285
- package/src/functions/mount/get-lead-source-data.js +31 -31
- package/src/functions/mount/get-lead-source-data.spec.js +19 -19
- package/src/functions/mount/index.js +73 -65
- package/src/functions/mount/mount.spec.js +77 -66
- package/src/functions/mount/setup-element.js +23 -23
- package/src/functions/mount/setup-framepay-theme.js +86 -68
- package/src/functions/mount/setup-framepay.js +9 -5
- package/src/functions/mount/setup-i18n.js +15 -15
- package/src/functions/mount/setup-options.js +74 -74
- package/src/functions/mount/setup-options.spec.js +323 -287
- package/src/functions/mount/setup-storefront.js +15 -20
- package/src/functions/mount/setup-styles-vars.js +19 -22
- package/src/functions/mount/setup-user-flow.js +51 -47
- package/src/functions/on.js +5 -5
- package/src/functions/on.spec.js +60 -51
- package/src/functions/purchase.js +151 -146
- package/src/functions/purchase.spec.js +59 -56
- package/src/functions/setup.js +53 -53
- package/src/functions/setup.spec.js +88 -75
- package/src/functions/show.js +13 -14
- package/src/functions/show.spec.js +53 -53
- package/src/functions/update.js +30 -28
- package/src/functions/update.spec.js +94 -93
- package/src/i18n/en.json +32 -32
- package/src/i18n/es.json +29 -29
- package/src/i18n/i18n.spec.js +18 -18
- package/src/i18n/index.js +48 -48
- package/src/instance.js +36 -36
- package/src/instance.spec.js +29 -27
- package/src/loader/index.js +95 -70
- package/src/loader/loader.spec.js +63 -63
- package/src/state/iframes.js +21 -21
- package/src/state/index.js +56 -54
- package/src/storefront/account-and-website.js +10 -8
- package/src/storefront/account-and-website.spec.js +55 -55
- package/src/storefront/deposit-requests.js +6 -6
- package/src/storefront/fetch-plans-from-addons-bumpOffer.js +21 -19
- package/src/storefront/fetch-products-from-plans.js +52 -51
- package/src/storefront/fetch-products-from-plans.spec.js +90 -87
- package/src/storefront/index.js +56 -49
- package/src/storefront/invoices.js +15 -15
- package/src/storefront/invoices.spec.js +69 -65
- package/src/storefront/models/account-model.js +29 -32
- package/src/storefront/models/base-model.js +6 -9
- package/src/storefront/models/deposit-request-model.js +22 -13
- package/src/storefront/models/invoice-model.js +16 -16
- package/src/storefront/models/payment-metadata.js +4 -4
- package/src/storefront/models/plan-model.js +73 -64
- package/src/storefront/models/ready-to-pay-model.js +59 -59
- package/src/storefront/models/summary-model.js +43 -46
- package/src/storefront/models/transaction-model.js +11 -14
- package/src/storefront/payment-instruments.js +38 -35
- package/src/storefront/payment-instruments.spec.js +81 -62
- package/src/storefront/purchase.js +50 -44
- package/src/storefront/purchase.spec.js +40 -40
- package/src/storefront/ready-to-pay.js +75 -77
- package/src/storefront/ready-to-pay.spec.js +59 -54
- package/src/storefront/storefront.spec.js +9 -9
- package/src/storefront/summary.js +93 -67
- package/src/storefront/summary.spec.js +108 -106
- package/src/storefront/transactions.js +6 -6
- package/src/style/base/default-theme.js +928 -923
- package/src/style/base/theme.js +21 -21
- package/src/style/base/theme.spec.js +13 -13
- package/src/style/index.js +3 -3
- package/src/style/utils/border.js +40 -27
- package/src/style/utils/color-values.js +18 -18
- package/src/style/utils/minifyCss.js +6 -6
- package/src/utils/add-dom-element.js +14 -14
- package/src/utils/format-currency.js +6 -5
- package/src/utils/has-valid-css-selector.js +2 -2
- package/src/utils/index.js +6 -6
- package/src/utils/is-dom-element.js +1 -1
- package/src/utils/process-property-as-dom-element.js +22 -22
- package/src/utils/quantity.js +26 -28
- package/src/utils/sleep.js +3 -1
- package/src/views/amount-selector.js +37 -36
- package/src/views/common/iframe/base-iframe.js +53 -52
- package/src/views/common/iframe/events/change-iframe-src-handler.js +5 -5
- package/src/views/common/iframe/events/dispatch-event-handler.js +4 -4
- package/src/views/common/iframe/events/resize-component-handler.js +8 -8
- package/src/views/common/iframe/events/show-error-handler.js +2 -2
- package/src/views/common/iframe/events/stop-loader-handler.js +8 -8
- package/src/views/common/iframe/events/update-addons-handler.js +20 -13
- package/src/views/common/iframe/events/update-coupons-handler.js +9 -9
- package/src/views/common/iframe/events/update-items-handler.js +26 -22
- package/src/views/common/iframe/modal-iframe.js +67 -56
- package/src/views/common/iframe/view-iframe.js +11 -11
- package/src/views/common/render-utilities.js +2 -2
- package/src/views/confirmation.js +33 -30
- package/src/views/errors.js +89 -79
- package/src/views/form.js +41 -37
- package/src/views/method-selector/express-methods.js +46 -46
- package/src/views/method-selector/generate-digital-wallet.js +46 -45
- package/src/views/method-selector/generate-digital-wallet.spec.js +104 -102
- package/src/views/method-selector/generate-framepay-config.js +53 -51
- package/src/views/method-selector/generate-framepay-config.spec.js +197 -173
- package/src/views/method-selector/get-method-data.js +5 -6
- package/src/views/method-selector/get-payment-methods.js +18 -16
- package/src/views/method-selector/get-payment-methods.spec.js +29 -27
- package/src/views/method-selector/index.js +154 -139
- package/src/views/method-selector/method-selector.spec.js +13 -13
- package/src/views/method-selector/mount-bump-offer.js +65 -49
- package/src/views/method-selector/mount-express-methods.js +89 -85
- package/src/views/modal.js +74 -67
- package/src/views/result.js +14 -14
- package/src/views/summary.js +25 -26
- package/tests/async-utilities.js +13 -13
- package/tests/mocks/framepay-mock.js +9 -8
- package/tests/mocks/rebilly-api-mock.js +5 -3
- package/tests/mocks/rebilly-instruments-mock.js +121 -117
- package/tests/mocks/storefront-api-mock.js +55 -48
- package/tests/mocks/storefront-mock.js +10 -14
- package/tests/msw/server.js +6 -6
- package/tests/setup-test.js +14 -16
- package/vitest.config.js +14 -14
- package/.eslintrc.js +0 -34
- package/.prettierrc.js +0 -11
package/src/loader/index.js
CHANGED
|
@@ -28,93 +28,118 @@ export const methodsLoaderHTML = `
|
|
|
28
28
|
|
|
29
29
|
const loaderContainer = (padding = '0px') => `
|
|
30
30
|
<div class="rebilly-instruments-loader is-active" style="padding: ${padding}"></div>
|
|
31
|
-
|
|
31
|
+
`;
|
|
32
32
|
|
|
33
33
|
export const basicLoaderHTML = `
|
|
34
34
|
<div class="rebilly-instruments-loader-spinner"></div>
|
|
35
35
|
`;
|
|
36
36
|
|
|
37
37
|
export class Loader {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
38
|
+
constructor() {
|
|
39
|
+
this.summary = [];
|
|
40
|
+
this.form = [];
|
|
41
|
+
this.modal = [];
|
|
42
|
+
this.DOM = {
|
|
43
|
+
loaderContainer,
|
|
44
|
+
summaryLoaderHTML,
|
|
45
|
+
methodsLoaderHTML,
|
|
46
|
+
basicLoaderHTML,
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
50
|
+
addDOMElement({ section = 'form', el = null } = {}) {
|
|
51
|
+
if (isDOMElement(el)) {
|
|
52
|
+
el.style.position = 'relative';
|
|
53
|
+
this.DOM[section] = el;
|
|
54
|
+
}
|
|
54
55
|
}
|
|
55
|
-
}
|
|
56
56
|
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
startLoading({ section = 'form', id = '' } = {}) {
|
|
58
|
+
this[section].push(id);
|
|
59
59
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
60
|
+
const rootEl = document.querySelector(':root');
|
|
61
|
+
const contentPadding = 2;
|
|
62
|
+
let minHeight = '240px';
|
|
63
63
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
64
|
+
if (this.DOM?.[section]) {
|
|
65
|
+
let loaderEl = this.DOM[section].querySelector(
|
|
66
|
+
'.rebilly-instruments-loader',
|
|
67
|
+
);
|
|
68
|
+
const { padding, paddingTop, paddingBottom } = getComputedStyle(
|
|
69
|
+
this.DOM?.[section],
|
|
70
|
+
);
|
|
71
|
+
if (!loaderEl) {
|
|
72
|
+
this.DOM[section].innerHTML = loaderContainer(
|
|
73
|
+
`${parseFloat(padding) + contentPadding}px`,
|
|
74
|
+
);
|
|
75
|
+
loaderEl = this.DOM[section].querySelector(
|
|
76
|
+
'.rebilly-instruments-loader',
|
|
77
|
+
);
|
|
78
|
+
if (section === 'form') {
|
|
79
|
+
loaderEl.insertAdjacentHTML(
|
|
80
|
+
'afterbegin',
|
|
81
|
+
this.DOM.methodsLoaderHTML,
|
|
82
|
+
);
|
|
83
|
+
minHeight = getComputedStyle(rootEl).getPropertyValue(
|
|
84
|
+
'--rebilly-methodLoaderMinHeight',
|
|
85
|
+
);
|
|
86
|
+
} else if (section === 'summary') {
|
|
87
|
+
loaderEl.insertAdjacentHTML(
|
|
88
|
+
'afterbegin',
|
|
89
|
+
this.DOM.summaryLoaderHTML,
|
|
90
|
+
);
|
|
91
|
+
minHeight = getComputedStyle(rootEl).getPropertyValue(
|
|
92
|
+
'--rebilly-summaryLoaderMinHeight',
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
} else {
|
|
96
|
+
if (
|
|
97
|
+
id.includes('confirmation') ||
|
|
98
|
+
id.includes('result') ||
|
|
99
|
+
id.includes('modal')
|
|
100
|
+
) {
|
|
101
|
+
loaderEl.innerHTML = this.DOM.basicLoaderHTML;
|
|
102
|
+
}
|
|
103
|
+
loaderEl.classList.add('is-active');
|
|
104
|
+
}
|
|
105
|
+
this.DOM[
|
|
106
|
+
section
|
|
107
|
+
].style.minHeight = `calc(${minHeight} + ${paddingTop} + ${paddingBottom} + ${
|
|
108
|
+
contentPadding * 2
|
|
109
|
+
}px)`;
|
|
80
110
|
}
|
|
81
|
-
loaderEl.classList.add('is-active');
|
|
82
|
-
}
|
|
83
|
-
this.DOM[section].style.minHeight = `calc(${minHeight} + ${paddingTop} + ${paddingBottom} + ${contentPadding * 2}px)`;
|
|
84
111
|
}
|
|
85
|
-
}
|
|
86
112
|
|
|
87
|
-
|
|
88
|
-
|
|
113
|
+
stopLoading({ section = 'form', id = '' } = {}) {
|
|
114
|
+
const idIndex = this[section].indexOf(id);
|
|
89
115
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
116
|
+
if (idIndex !== -1) {
|
|
117
|
+
this[section].splice(idIndex, 1);
|
|
118
|
+
}
|
|
93
119
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
120
|
+
if (
|
|
121
|
+
this.DOM[section] &&
|
|
122
|
+
!this[section].length &&
|
|
123
|
+
this.DOM[section].querySelector('.rebilly-instruments-loader')
|
|
124
|
+
) {
|
|
125
|
+
this.DOM[section]
|
|
126
|
+
.querySelector('.rebilly-instruments-loader')
|
|
127
|
+
.classList.remove('is-active');
|
|
128
|
+
this.DOM[section].style.minHeight = '';
|
|
129
|
+
}
|
|
104
130
|
}
|
|
105
|
-
}
|
|
106
131
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
132
|
+
clearAll() {
|
|
133
|
+
this.form.forEach((id) => {
|
|
134
|
+
this.stopLoading({ id });
|
|
135
|
+
});
|
|
136
|
+
if (this.summary) {
|
|
137
|
+
this.summary.forEach((id) => {
|
|
138
|
+
this.stopLoading({ section: 'summary', id });
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
this.modal.forEach((id) => {
|
|
142
|
+
this.stopLoading({ section: 'modal', id });
|
|
143
|
+
});
|
|
115
144
|
}
|
|
116
|
-
this.modal.forEach((id) => {
|
|
117
|
-
this.stopLoading({ section: 'modal', id });
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
145
|
}
|
|
@@ -1,74 +1,74 @@
|
|
|
1
1
|
import { Loader } from './index';
|
|
2
2
|
|
|
3
3
|
describe('Loader Class', () => {
|
|
4
|
-
|
|
4
|
+
let loader;
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
beforeEach(() => {
|
|
7
|
+
loader = new Loader();
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
document.body.innerHTML = `
|
|
10
10
|
<div class="form-selector"></div>
|
|
11
11
|
<div class="summary-selector"></div>
|
|
12
12
|
`;
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
loader.addDOMElement({ el: document.querySelector('.form-selector') });
|
|
15
|
+
loader.addDOMElement({
|
|
16
|
+
section: 'summary',
|
|
17
|
+
el: document.querySelector('.summary-selector'),
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
it('manage state of loading ids', () => {
|
|
22
|
+
loader.startLoading({ id: 'loadForm' });
|
|
23
|
+
loader.startLoading({ id: 'updateForm' });
|
|
24
|
+
|
|
25
|
+
// Start loading state
|
|
26
|
+
loader.startLoading({ section: 'summary', id: 'loadSummary' });
|
|
27
|
+
loader.startLoading({ section: 'summary', id: 'updateSummary' });
|
|
28
|
+
|
|
29
|
+
// Stop one loading state
|
|
30
|
+
loader.stopLoading({ id: 'loadForm' });
|
|
31
|
+
|
|
32
|
+
expect(loader.form.length).toEqual(1);
|
|
33
|
+
expect(loader.summary.length).toEqual(2);
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
it('adds the loader HTML on element and removes the active class when stoped', () => {
|
|
37
|
+
loader.startLoading({ id: 'loadForm' });
|
|
38
|
+
|
|
39
|
+
expect(loader.DOM.form.innerHTML).toMatch('rebilly-instruments-loader');
|
|
40
|
+
expect(
|
|
41
|
+
loader.DOM.form
|
|
42
|
+
.querySelector('.rebilly-instruments-loader')
|
|
43
|
+
.classList.contains('is-active'),
|
|
44
|
+
).toEqual(true);
|
|
45
|
+
|
|
46
|
+
loader.stopLoading({ id: 'loadForm' });
|
|
47
|
+
|
|
48
|
+
expect(
|
|
49
|
+
loader.DOM.form
|
|
50
|
+
.querySelector('.rebilly-instruments-loader')
|
|
51
|
+
.classList.contains('is-active'),
|
|
52
|
+
).toEqual(false);
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
it('keeps loading when there are Ids on the element array', () => {
|
|
56
|
+
loader.startLoading({ id: 'loadForm' });
|
|
57
|
+
loader.startLoading({ id: 'updateForm' });
|
|
58
|
+
|
|
59
|
+
expect(loader.DOM.form.innerHTML).toMatch('rebilly-instruments-loader');
|
|
60
|
+
expect(
|
|
61
|
+
loader.DOM.form
|
|
62
|
+
.querySelector('.rebilly-instruments-loader')
|
|
63
|
+
.classList.contains('is-active'),
|
|
64
|
+
).toEqual(true);
|
|
65
|
+
|
|
66
|
+
loader.stopLoading({ id: 'loadForm' });
|
|
67
|
+
|
|
68
|
+
expect(
|
|
69
|
+
loader.DOM.form
|
|
70
|
+
.querySelector('.rebilly-instruments-loader')
|
|
71
|
+
.classList.contains('is-active'),
|
|
72
|
+
).toEqual(true);
|
|
18
73
|
});
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
it('manage state of loading ids', () => {
|
|
22
|
-
loader.startLoading({ id: 'loadForm' });
|
|
23
|
-
loader.startLoading({ id: 'updateForm' });
|
|
24
|
-
|
|
25
|
-
// Start loading state
|
|
26
|
-
loader.startLoading({ section: 'summary', id: 'loadSummary' });
|
|
27
|
-
loader.startLoading({ section: 'summary', id: 'updateSummary' });
|
|
28
|
-
|
|
29
|
-
// Stop one loading state
|
|
30
|
-
loader.stopLoading({ id: 'loadForm' });
|
|
31
|
-
|
|
32
|
-
expect(loader.form.length).toEqual(1);
|
|
33
|
-
expect(loader.summary.length).toEqual(2);
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
it('adds the loader HTML on element and removes the active class when stoped', () => {
|
|
37
|
-
loader.startLoading({ id: 'loadForm' });
|
|
38
|
-
|
|
39
|
-
expect(loader.DOM.form.innerHTML).toMatch('rebilly-instruments-loader');
|
|
40
|
-
expect(
|
|
41
|
-
loader.DOM.form
|
|
42
|
-
.querySelector('.rebilly-instruments-loader')
|
|
43
|
-
.classList.contains('is-active')
|
|
44
|
-
).toEqual(true);
|
|
45
|
-
|
|
46
|
-
loader.stopLoading({ id: 'loadForm' });
|
|
47
|
-
|
|
48
|
-
expect(
|
|
49
|
-
loader.DOM.form
|
|
50
|
-
.querySelector('.rebilly-instruments-loader')
|
|
51
|
-
.classList.contains('is-active')
|
|
52
|
-
).toEqual(false);
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
it('keeps loading when there are Ids on the element array', () => {
|
|
56
|
-
loader.startLoading({ id: 'loadForm' });
|
|
57
|
-
loader.startLoading({ id: 'updateForm' });
|
|
58
|
-
|
|
59
|
-
expect(loader.DOM.form.innerHTML).toMatch('rebilly-instruments-loader');
|
|
60
|
-
expect(
|
|
61
|
-
loader.DOM.form
|
|
62
|
-
.querySelector('.rebilly-instruments-loader')
|
|
63
|
-
.classList.contains('is-active')
|
|
64
|
-
).toEqual(true);
|
|
65
|
-
|
|
66
|
-
loader.stopLoading({ id: 'loadForm' });
|
|
67
|
-
|
|
68
|
-
expect(
|
|
69
|
-
loader.DOM.form
|
|
70
|
-
.querySelector('.rebilly-instruments-loader')
|
|
71
|
-
.classList.contains('is-active')
|
|
72
|
-
).toEqual(true);
|
|
73
|
-
});
|
|
74
74
|
});
|
package/src/state/iframes.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
export default (() => {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
let state = null;
|
|
3
|
+
return {
|
|
4
|
+
getInstance() {
|
|
5
|
+
if (state === null) {
|
|
6
|
+
state = {
|
|
7
|
+
form: null,
|
|
8
|
+
summary: null,
|
|
9
|
+
hasFrame(name) {
|
|
10
|
+
if (state[name] && !name.match(/^has.*/)) {
|
|
11
|
+
return !!state[name];
|
|
12
|
+
}
|
|
13
|
+
return false;
|
|
14
|
+
},
|
|
15
|
+
hasComponent(name) {
|
|
16
|
+
return !!state[name]?.component;
|
|
17
|
+
},
|
|
18
|
+
};
|
|
12
19
|
}
|
|
13
|
-
return
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
return state;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
})().getInstance();
|
|
20
|
+
return state;
|
|
21
|
+
},
|
|
22
|
+
};
|
|
23
|
+
})().getInstance();
|
package/src/state/index.js
CHANGED
|
@@ -1,62 +1,64 @@
|
|
|
1
|
-
import { reactive } from '
|
|
1
|
+
import { reactive } from 'vue';
|
|
2
2
|
import { Loader } from '../loader';
|
|
3
3
|
import { Translate } from '../i18n';
|
|
4
4
|
import iframes from './iframes';
|
|
5
5
|
|
|
6
6
|
export default (() => {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
delete model.toModel;
|
|
26
|
-
delete model.updateModel;
|
|
27
|
-
delete model.reset;
|
|
7
|
+
let state = null;
|
|
8
|
+
const defaultState = {
|
|
9
|
+
options: null,
|
|
10
|
+
data: {},
|
|
11
|
+
mountingPoints: null,
|
|
12
|
+
storefront: null,
|
|
13
|
+
form: null,
|
|
14
|
+
summary: null,
|
|
15
|
+
loader: new Loader(),
|
|
16
|
+
translate: new Translate(),
|
|
17
|
+
hasMounted: false,
|
|
18
|
+
toModel() {
|
|
19
|
+
const model = {
|
|
20
|
+
...state,
|
|
21
|
+
data: state.data.toPostmatesModel
|
|
22
|
+
? state.data.toPostmatesModel()
|
|
23
|
+
: {},
|
|
24
|
+
};
|
|
28
25
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
if (modelSafeState) {
|
|
34
|
-
const updateModel = {
|
|
35
|
-
data: modelSafeState.data,
|
|
36
|
-
options: modelSafeState.options
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
if (iframes.hasComponent('summary')) {
|
|
40
|
-
iframes.summary.component.call('update', updateModel);
|
|
41
|
-
}
|
|
42
|
-
if (iframes.hasComponent('form')) {
|
|
43
|
-
iframes.form.component.call('update', updateModel)
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
reset() {
|
|
48
|
-
if (state !== null) {
|
|
49
|
-
state = reactive({...defaultState});
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
};
|
|
26
|
+
// remove functions from model
|
|
27
|
+
delete model.toModel;
|
|
28
|
+
delete model.updateModel;
|
|
29
|
+
delete model.reset;
|
|
53
30
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
31
|
+
return JSON.parse(JSON.stringify(model));
|
|
32
|
+
},
|
|
33
|
+
updateModel() {
|
|
34
|
+
const modelSafeState = state?.toModel();
|
|
35
|
+
if (modelSafeState) {
|
|
36
|
+
const updateModel = {
|
|
37
|
+
data: modelSafeState.data,
|
|
38
|
+
options: modelSafeState.options,
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
if (iframes.hasComponent('summary')) {
|
|
42
|
+
iframes.summary.component.call('update', updateModel);
|
|
43
|
+
}
|
|
44
|
+
if (iframes.hasComponent('form')) {
|
|
45
|
+
iframes.form.component.call('update', updateModel);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
reset() {
|
|
50
|
+
if (state !== null) {
|
|
51
|
+
state = reactive({ ...defaultState });
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
return {
|
|
57
|
+
getInstance() {
|
|
58
|
+
if (state === null) {
|
|
59
|
+
state = reactive({ ...defaultState });
|
|
60
|
+
}
|
|
61
|
+
return state;
|
|
62
|
+
},
|
|
63
|
+
};
|
|
62
64
|
})().getInstance();
|
|
@@ -4,13 +4,15 @@ import { Endpoint } from './index';
|
|
|
4
4
|
import state from '../state';
|
|
5
5
|
|
|
6
6
|
export async function fetchAccountAndWebsite() {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
return Endpoint(async () => {
|
|
8
|
+
state.storefront.setSessionToken(state.options.jwt);
|
|
9
|
+
const { fields } = await state.storefront.account.get({
|
|
10
|
+
expand: 'website',
|
|
11
|
+
});
|
|
10
12
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
return {
|
|
14
|
+
website: new WebsiteModel(fields._embedded?.website),
|
|
15
|
+
account: new AccountModel(fields),
|
|
16
|
+
};
|
|
17
|
+
});
|
|
16
18
|
}
|
|
@@ -7,67 +7,67 @@ import AccountModel, { AddressModel } from './models/account-model';
|
|
|
7
7
|
import WebsiteModel from './models/website-model';
|
|
8
8
|
|
|
9
9
|
describe('Storefront API Account', () => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
10
|
+
it('should handle fetch a customer with a null primary address', async () => {
|
|
11
|
+
const options = {
|
|
12
|
+
jwt: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzYjBkNTRkOS0xNmM4LTRlZDAtYjljMy01ODAyZmQ4YzE2ZTIiLCJleHAiOjE2ODY2OTc0MTQuODQxMjUsImlhdCI6MTY1NTE2MTQxNC44Nzk4OTEsImFjbCI6W3sic2NvcGUiOnsib3JnYW5pemF0aW9uSWQiOlsiMzY0NEFGTEFKMUciXSwicGF5bWVudE1ldGhvZHMiOlsicGF5bWVudC1jYXJkIl19LCJwZXJtaXNzaW9ucyI6WzI4NCwyODYsNDE0LDQxNSw0MzQsNDExLDQxMiw0MTMsNDI0LDQyNSw0MjYsNDI3LDQyOCw0MjksNDA5LDQxMCw0MDEsNDAyLDQzMyw0ODgsNDg3XX1dLCJjbGFpbXMiOnsid2Vic2l0ZUlkIjoiZGVtby13ZWJzaXRlIiwidHJhbnNhY3Rpb25JZCI6IjRiZDE3N2NmLTFlY2EtNDA2Yy04OWI0LTEzYzMzODk5NzlmMCIsInBheW1lbnRNZXRob2RzIjpbInBheW1lbnQtY2FyZCJdfSwibWVyY2hhbnQiOiIzNjQ0QUZMQUoxRyIsImN1c3RvbWVyIjp7ImlkIjoidGVzdC1jdXN0b21lci1pZCIsIm5hbWUiOiJUZXN0IEN1c3RvbWVyIE5hbWUiLCJjcmVhdGVkVGltZSI6IjIwMjItMDctMTRUMDA6MDA6MDArMDA6MDAifX0.VPue9QBhRGe3vvncaD47w84N8Bv2hEeShUl6SlNqoOQ',
|
|
13
|
+
items: [
|
|
14
|
+
{
|
|
15
|
+
planId: 'test-plan-id',
|
|
16
|
+
quantity: 1,
|
|
17
|
+
},
|
|
18
|
+
],
|
|
19
|
+
};
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
21
|
+
when(get(`${storefrontURL}/acount`)).thenReturn(
|
|
22
|
+
ok({
|
|
23
|
+
defaultPaymentInstrument: null,
|
|
24
|
+
id: 'test-customer-id',
|
|
25
|
+
primaryAddress: null,
|
|
26
|
+
websiteId: 'test-website-id',
|
|
27
|
+
}),
|
|
28
|
+
);
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
const instance = StorefontTestingInstance({
|
|
31
|
+
options,
|
|
32
|
+
});
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
vi.spyOn(instance.storefront.account, 'get');
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
const response = await fetchAccountAndWebsite({ state: instance });
|
|
37
|
+
expect(response.account.address).toEqual(new AddressModel({}));
|
|
38
|
+
});
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
40
|
+
it('should return an object with account and website', async () => {
|
|
41
|
+
const options = {
|
|
42
|
+
jwt: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzYjBkNTRkOS0xNmM4LTRlZDAtYjljMy01ODAyZmQ4YzE2ZTIiLCJleHAiOjE2ODY2OTc0MTQuODQxMjUsImlhdCI6MTY1NTE2MTQxNC44Nzk4OTEsImFjbCI6W3sic2NvcGUiOnsib3JnYW5pemF0aW9uSWQiOlsiMzY0NEFGTEFKMUciXSwicGF5bWVudE1ldGhvZHMiOlsicGF5bWVudC1jYXJkIl19LCJwZXJtaXNzaW9ucyI6WzI4NCwyODYsNDE0LDQxNSw0MzQsNDExLDQxMiw0MTMsNDI0LDQyNSw0MjYsNDI3LDQyOCw0MjksNDA5LDQxMCw0MDEsNDAyLDQzMyw0ODgsNDg3XX1dLCJjbGFpbXMiOnsid2Vic2l0ZUlkIjoiZGVtby13ZWJzaXRlIiwidHJhbnNhY3Rpb25JZCI6IjRiZDE3N2NmLTFlY2EtNDA2Yy04OWI0LTEzYzMzODk5NzlmMCIsInBheW1lbnRNZXRob2RzIjpbInBheW1lbnQtY2FyZCJdfSwibWVyY2hhbnQiOiIzNjQ0QUZMQUoxRyIsImN1c3RvbWVyIjp7ImlkIjoidGVzdC1jdXN0b21lci1pZCIsIm5hbWUiOiJUZXN0IEN1c3RvbWVyIE5hbWUiLCJjcmVhdGVkVGltZSI6IjIwMjItMDctMTRUMDA6MDA6MDArMDA6MDAifX0.VPue9QBhRGe3vvncaD47w84N8Bv2hEeShUl6SlNqoOQ',
|
|
43
|
+
items: [
|
|
44
|
+
{
|
|
45
|
+
planId: 'test-plan-id',
|
|
46
|
+
quantity: 1,
|
|
47
|
+
},
|
|
48
|
+
],
|
|
49
|
+
};
|
|
50
50
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
51
|
+
when(get(`${storefrontURL}/acount`)).thenReturn(
|
|
52
|
+
ok({
|
|
53
|
+
defaultPaymentInstrument: null,
|
|
54
|
+
id: 'test-customer-id',
|
|
55
|
+
primaryAddress: null,
|
|
56
|
+
websiteId: 'test-website-id',
|
|
57
|
+
_embedded: {
|
|
58
|
+
website: {},
|
|
59
|
+
},
|
|
60
|
+
}),
|
|
61
|
+
);
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
const instance = StorefontTestingInstance({
|
|
64
|
+
options,
|
|
65
|
+
});
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
vi.spyOn(instance.storefront.account, 'get');
|
|
68
68
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
});
|
|
69
|
+
const response = await fetchAccountAndWebsite({ state: instance });
|
|
70
|
+
expect(response.account instanceof AccountModel).toBe(true);
|
|
71
|
+
expect(response.website instanceof WebsiteModel).toBe(true);
|
|
72
|
+
});
|
|
73
|
+
});
|
|
@@ -2,11 +2,11 @@ import { Endpoint } from './index';
|
|
|
2
2
|
import state from '../state';
|
|
3
3
|
import DepositRequestModel from './models/deposit-request-model';
|
|
4
4
|
|
|
5
|
-
export async function fetchDepositRequest({data = null}) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
export async function fetchDepositRequest({ data = null }) {
|
|
6
|
+
return Endpoint(async () => {
|
|
7
|
+
state.storefront.setSessionToken(state.options.jwt);
|
|
8
|
+
const { fields } = await state.storefront.cashierRequests.get(data);
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
return new DepositRequestModel(fields);
|
|
11
|
+
});
|
|
12
12
|
}
|