@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.
Files changed (134) hide show
  1. package/.babelrc +24 -26
  2. package/CHANGELOG.md +14 -0
  3. package/dist/index.js +8 -8
  4. package/dist/index.min.js +8 -8
  5. package/package.json +14 -3
  6. package/project.json +9 -0
  7. package/rollup.config.mjs +21 -26
  8. package/src/data/options-schema/index.js +94 -78
  9. package/src/data/options-schema/schemas/options-schema.js +419 -411
  10. package/src/events/base-event.js +34 -34
  11. package/src/events/events.spec.js +6 -6
  12. package/src/events/index.js +5 -5
  13. package/src/functions/destroy.js +19 -19
  14. package/src/functions/destroy.spec.js +41 -41
  15. package/src/functions/mount/fetch-data.js +200 -193
  16. package/src/functions/mount/fetch-data.spec.js +287 -285
  17. package/src/functions/mount/get-lead-source-data.js +31 -31
  18. package/src/functions/mount/get-lead-source-data.spec.js +19 -19
  19. package/src/functions/mount/index.js +73 -65
  20. package/src/functions/mount/mount.spec.js +77 -66
  21. package/src/functions/mount/setup-element.js +23 -23
  22. package/src/functions/mount/setup-framepay-theme.js +86 -68
  23. package/src/functions/mount/setup-framepay.js +9 -5
  24. package/src/functions/mount/setup-i18n.js +15 -15
  25. package/src/functions/mount/setup-options.js +74 -74
  26. package/src/functions/mount/setup-options.spec.js +323 -287
  27. package/src/functions/mount/setup-storefront.js +15 -20
  28. package/src/functions/mount/setup-styles-vars.js +19 -22
  29. package/src/functions/mount/setup-user-flow.js +51 -47
  30. package/src/functions/on.js +5 -5
  31. package/src/functions/on.spec.js +60 -51
  32. package/src/functions/purchase.js +151 -146
  33. package/src/functions/purchase.spec.js +59 -56
  34. package/src/functions/setup.js +53 -53
  35. package/src/functions/setup.spec.js +88 -75
  36. package/src/functions/show.js +13 -14
  37. package/src/functions/show.spec.js +53 -53
  38. package/src/functions/update.js +30 -28
  39. package/src/functions/update.spec.js +94 -93
  40. package/src/i18n/en.json +32 -32
  41. package/src/i18n/es.json +29 -29
  42. package/src/i18n/i18n.spec.js +18 -18
  43. package/src/i18n/index.js +48 -48
  44. package/src/instance.js +36 -36
  45. package/src/instance.spec.js +29 -27
  46. package/src/loader/index.js +95 -70
  47. package/src/loader/loader.spec.js +63 -63
  48. package/src/state/iframes.js +21 -21
  49. package/src/state/index.js +56 -54
  50. package/src/storefront/account-and-website.js +10 -8
  51. package/src/storefront/account-and-website.spec.js +55 -55
  52. package/src/storefront/deposit-requests.js +6 -6
  53. package/src/storefront/fetch-plans-from-addons-bumpOffer.js +21 -19
  54. package/src/storefront/fetch-products-from-plans.js +52 -51
  55. package/src/storefront/fetch-products-from-plans.spec.js +90 -87
  56. package/src/storefront/index.js +56 -49
  57. package/src/storefront/invoices.js +15 -15
  58. package/src/storefront/invoices.spec.js +69 -65
  59. package/src/storefront/models/account-model.js +29 -32
  60. package/src/storefront/models/base-model.js +6 -9
  61. package/src/storefront/models/deposit-request-model.js +22 -13
  62. package/src/storefront/models/invoice-model.js +16 -16
  63. package/src/storefront/models/payment-metadata.js +4 -4
  64. package/src/storefront/models/plan-model.js +73 -64
  65. package/src/storefront/models/ready-to-pay-model.js +59 -59
  66. package/src/storefront/models/summary-model.js +43 -46
  67. package/src/storefront/models/transaction-model.js +11 -14
  68. package/src/storefront/payment-instruments.js +38 -35
  69. package/src/storefront/payment-instruments.spec.js +81 -62
  70. package/src/storefront/purchase.js +50 -44
  71. package/src/storefront/purchase.spec.js +40 -40
  72. package/src/storefront/ready-to-pay.js +75 -77
  73. package/src/storefront/ready-to-pay.spec.js +59 -54
  74. package/src/storefront/storefront.spec.js +9 -9
  75. package/src/storefront/summary.js +93 -67
  76. package/src/storefront/summary.spec.js +108 -106
  77. package/src/storefront/transactions.js +6 -6
  78. package/src/style/base/default-theme.js +928 -923
  79. package/src/style/base/theme.js +21 -21
  80. package/src/style/base/theme.spec.js +13 -13
  81. package/src/style/index.js +3 -3
  82. package/src/style/utils/border.js +40 -27
  83. package/src/style/utils/color-values.js +18 -18
  84. package/src/style/utils/minifyCss.js +6 -6
  85. package/src/utils/add-dom-element.js +14 -14
  86. package/src/utils/format-currency.js +6 -5
  87. package/src/utils/has-valid-css-selector.js +2 -2
  88. package/src/utils/index.js +6 -6
  89. package/src/utils/is-dom-element.js +1 -1
  90. package/src/utils/process-property-as-dom-element.js +22 -22
  91. package/src/utils/quantity.js +26 -28
  92. package/src/utils/sleep.js +3 -1
  93. package/src/views/amount-selector.js +37 -36
  94. package/src/views/common/iframe/base-iframe.js +53 -52
  95. package/src/views/common/iframe/events/change-iframe-src-handler.js +5 -5
  96. package/src/views/common/iframe/events/dispatch-event-handler.js +4 -4
  97. package/src/views/common/iframe/events/resize-component-handler.js +8 -8
  98. package/src/views/common/iframe/events/show-error-handler.js +2 -2
  99. package/src/views/common/iframe/events/stop-loader-handler.js +8 -8
  100. package/src/views/common/iframe/events/update-addons-handler.js +20 -13
  101. package/src/views/common/iframe/events/update-coupons-handler.js +9 -9
  102. package/src/views/common/iframe/events/update-items-handler.js +26 -22
  103. package/src/views/common/iframe/modal-iframe.js +67 -56
  104. package/src/views/common/iframe/view-iframe.js +11 -11
  105. package/src/views/common/render-utilities.js +2 -2
  106. package/src/views/confirmation.js +33 -30
  107. package/src/views/errors.js +89 -79
  108. package/src/views/form.js +41 -37
  109. package/src/views/method-selector/express-methods.js +46 -46
  110. package/src/views/method-selector/generate-digital-wallet.js +46 -45
  111. package/src/views/method-selector/generate-digital-wallet.spec.js +104 -102
  112. package/src/views/method-selector/generate-framepay-config.js +53 -51
  113. package/src/views/method-selector/generate-framepay-config.spec.js +197 -173
  114. package/src/views/method-selector/get-method-data.js +5 -6
  115. package/src/views/method-selector/get-payment-methods.js +18 -16
  116. package/src/views/method-selector/get-payment-methods.spec.js +29 -27
  117. package/src/views/method-selector/index.js +154 -139
  118. package/src/views/method-selector/method-selector.spec.js +13 -13
  119. package/src/views/method-selector/mount-bump-offer.js +65 -49
  120. package/src/views/method-selector/mount-express-methods.js +89 -85
  121. package/src/views/modal.js +74 -67
  122. package/src/views/result.js +14 -14
  123. package/src/views/summary.js +25 -26
  124. package/tests/async-utilities.js +13 -13
  125. package/tests/mocks/framepay-mock.js +9 -8
  126. package/tests/mocks/rebilly-api-mock.js +5 -3
  127. package/tests/mocks/rebilly-instruments-mock.js +121 -117
  128. package/tests/mocks/storefront-api-mock.js +55 -48
  129. package/tests/mocks/storefront-mock.js +10 -14
  130. package/tests/msw/server.js +6 -6
  131. package/tests/setup-test.js +14 -16
  132. package/vitest.config.js +14 -14
  133. package/.eslintrc.js +0 -34
  134. package/.prettierrc.js +0 -11
@@ -5,115 +5,117 @@ import { DataInstance } from '@/functions/mount/fetch-data';
5
5
  import state from '@/state';
6
6
 
7
7
  describe('generateDigitalWallet', () => {
8
- function setupState() {
9
- state.options = {
10
- websiteId: 'test-website-id',
11
- countryCode: 'US',
12
- paymentInstruments: {
13
- googlePay: {
14
- displayOptions: {
15
- buttonColor: 'black',
16
- buttonType: 'plain',
17
- buttonHeight: '48px'
18
- }
19
- },
20
- applePay: {
21
- displayOptions: {
22
- buttonColor: 'black',
23
- buttonType: 'buy',
24
- buttonHeight: '48px'
25
- },
26
- merchantConfig: {
27
- merchantName: 'Test Store Name',
28
- },
29
- }
30
- }
31
- };
8
+ function setupState() {
9
+ state.options = {
10
+ websiteId: 'test-website-id',
11
+ countryCode: 'US',
12
+ paymentInstruments: {
13
+ googlePay: {
14
+ displayOptions: {
15
+ buttonColor: 'black',
16
+ buttonType: 'plain',
17
+ buttonHeight: '48px',
18
+ },
19
+ },
20
+ applePay: {
21
+ displayOptions: {
22
+ buttonColor: 'black',
23
+ buttonType: 'buy',
24
+ buttonHeight: '48px',
25
+ },
26
+ merchantConfig: {
27
+ merchantName: 'Test Store Name',
28
+ },
29
+ },
30
+ },
31
+ };
32
32
 
33
- state.data = new DataInstance({
34
- previewPurchase: {
35
- total: 1,
36
- currency: 'USD'
37
- }
38
- });
39
- }
33
+ state.data = new DataInstance({
34
+ previewPurchase: {
35
+ total: 1,
36
+ currency: 'USD',
37
+ },
38
+ });
39
+ }
40
40
 
41
- it('should generate the correct digital wallet config for Google pay', () => {
42
- const expressMethods = [
43
- new ReadyToPayModel({
44
- method: 'payment-card',
45
- feature: {
46
- name: 'Google Pay',
47
- merchantName: 'google-pay-merchant-name',
48
- merchantOrigin: 'google-pay-merchant-origin'
49
- },
50
- brands: ['Visa']
51
- })
52
- ];
53
- setupState();
41
+ it('should generate the correct digital wallet config for Google pay', () => {
42
+ const expressMethods = [
43
+ new ReadyToPayModel({
44
+ method: 'payment-card',
45
+ feature: {
46
+ name: 'Google Pay',
47
+ merchantName: 'google-pay-merchant-name',
48
+ merchantOrigin: 'google-pay-merchant-origin',
49
+ },
50
+ brands: ['Visa'],
51
+ }),
52
+ ];
53
+ setupState();
54
54
 
55
- const output = generateDigitalWallet({expressMethods});
55
+ const output = generateDigitalWallet({ expressMethods });
56
56
 
57
- const expectedOutput ={
58
- googlePay: {
59
- transactionData: {
60
- amount: 1,
61
- currency: 'USD',
62
- countryCode: 'US',
63
- label: 'test-website-id'
64
- },
65
- merchantConfig: {
66
- merchantName: 'google-pay-merchant-name',
67
- merchantOrigin: 'google-pay-merchant-origin'
68
- },
69
- googlePayDisplayOptions: {
70
- buttonColor: 'black',
71
- buttonType: 'plain',
72
- buttonHeight: '48px'
73
- }
74
- }
75
- }
57
+ const expectedOutput = {
58
+ googlePay: {
59
+ transactionData: {
60
+ amount: 1,
61
+ currency: 'USD',
62
+ countryCode: 'US',
63
+ label: 'test-website-id',
64
+ },
65
+ merchantConfig: {
66
+ merchantName: 'google-pay-merchant-name',
67
+ merchantOrigin: 'google-pay-merchant-origin',
68
+ },
69
+ googlePayDisplayOptions: {
70
+ buttonColor: 'black',
71
+ buttonType: 'plain',
72
+ buttonHeight: '48px',
73
+ },
74
+ },
75
+ };
76
76
 
77
- expect(output).toMatchObject(expectedOutput);
78
- });
77
+ expect(output).toMatchObject(expectedOutput);
78
+ });
79
79
 
80
- it('should generate the correct digital wallet config for Apple pay', () => {
81
- delete window.location
82
- window.location = new URL('https://rebilly-apple-pay-test-tunnel.ngrok.io/');
80
+ it('should generate the correct digital wallet config for Apple pay', () => {
81
+ delete window.location;
82
+ window.location = new URL(
83
+ 'https://rebilly-apple-pay-test-tunnel.ngrok.io/',
84
+ );
83
85
 
84
- const expressMethods = [
85
- new ReadyToPayModel({
86
- method: 'payment-card',
87
- feature: {
88
- name: 'Apple Pay',
89
- },
90
- brands: ['Visa']
91
- })
92
- ];
93
- setupState();
86
+ const expressMethods = [
87
+ new ReadyToPayModel({
88
+ method: 'payment-card',
89
+ feature: {
90
+ name: 'Apple Pay',
91
+ },
92
+ brands: ['Visa'],
93
+ }),
94
+ ];
95
+ setupState();
94
96
 
95
- const output = generateDigitalWallet({expressMethods});
97
+ const output = generateDigitalWallet({ expressMethods });
96
98
 
97
- const expectedOutput = {
98
- applePay: {
99
- transactionData: {
100
- amount: 1,
101
- currency: 'USD',
102
- countryCode: 'US',
103
- label: 'test-website-id'
104
- },
105
- merchantConfig: {
106
- merchantName: 'Test Store Name',
107
- merchantOrigin: 'rebilly-apple-pay-test-tunnel.ngrok.io'
108
- },
109
- applePayDisplayOptions: {
110
- buttonColor: 'black',
111
- buttonType: 'buy',
112
- buttonHeight: '48px'
113
- }
114
- }
115
- }
99
+ const expectedOutput = {
100
+ applePay: {
101
+ transactionData: {
102
+ amount: 1,
103
+ currency: 'USD',
104
+ countryCode: 'US',
105
+ label: 'test-website-id',
106
+ },
107
+ merchantConfig: {
108
+ merchantName: 'Test Store Name',
109
+ merchantOrigin: 'rebilly-apple-pay-test-tunnel.ngrok.io',
110
+ },
111
+ applePayDisplayOptions: {
112
+ buttonColor: 'black',
113
+ buttonType: 'buy',
114
+ buttonHeight: '48px',
115
+ },
116
+ },
117
+ };
116
118
 
117
- expect(output).toMatchObject(expectedOutput);
118
- });
119
- });
119
+ expect(output).toMatchObject(expectedOutput);
120
+ });
121
+ });
@@ -1,54 +1,56 @@
1
1
  import merge from 'lodash.merge';
2
2
  import state from '../../state';
3
3
 
4
- export function generateFramepayConfig ({
5
- methodIds
6
- } = {}) {
7
- const {
8
- options,
9
- data
10
- } = state;
11
-
12
- const config = {
13
- style: options.themeFramepay,
14
- locale: options?.locale || 'auto',
15
- organizationId: options.organizationId,
16
- websiteId: options.websiteId,
17
- methods: data.readyToPay,
18
- };
19
-
20
- if (methodIds.includes('pay-pal-billing-agreement')) {
21
- config.transactionData = merge(
22
- typeof config.transactionData === 'object' ? config.transactionData : {},
23
- data.amountAndCurrency
24
- );
25
- config.paypal = options.paymentInstruments.paypal;
26
- }
27
-
28
- if (methodIds.includes('google-pay')) {
29
- config.transactionData = merge(
30
- typeof config.transactionData === 'object' ? config.transactionData : {},
31
- options.digitalWallet.googlePay?.transactionData
32
- );
33
- config.googlePay = options.digitalWallet.googlePay.googlePayDisplayOptions;
34
- }
35
-
36
- if (methodIds.includes('apple-pay')) {
37
- config.transactionData = merge(
38
- typeof config.transactionData === 'object' ? config.transactionData : {},
39
- options.digitalWallet.applePay?.transactionData
40
- );
41
- config.applePay = options.digitalWallet.applePay.applePayDisplayOptions;
42
- }
43
-
44
- if (options.publishableKey) {
45
- config.publishableKey = options.publishableKey;
46
- }
47
-
48
- if (options.jwt) {
49
- config.jwt = options.jwt;
50
- config.sandbox = options.apiMode === 'sandbox';
51
- }
52
-
53
- return config;
54
- }
4
+ export function generateFramepayConfig({ methodIds } = {}) {
5
+ const { options, data } = state;
6
+
7
+ const config = {
8
+ style: options.themeFramepay,
9
+ locale: options?.locale || 'auto',
10
+ organizationId: options.organizationId,
11
+ websiteId: options.websiteId,
12
+ methods: data.readyToPay,
13
+ };
14
+
15
+ if (methodIds.includes('pay-pal-billing-agreement')) {
16
+ config.transactionData = merge(
17
+ typeof config.transactionData === 'object'
18
+ ? config.transactionData
19
+ : {},
20
+ data.amountAndCurrency,
21
+ );
22
+ config.paypal = options.paymentInstruments.paypal;
23
+ }
24
+
25
+ if (methodIds.includes('google-pay')) {
26
+ config.transactionData = merge(
27
+ typeof config.transactionData === 'object'
28
+ ? config.transactionData
29
+ : {},
30
+ options.digitalWallet.googlePay?.transactionData,
31
+ );
32
+ config.googlePay =
33
+ options.digitalWallet.googlePay.googlePayDisplayOptions;
34
+ }
35
+
36
+ if (methodIds.includes('apple-pay')) {
37
+ config.transactionData = merge(
38
+ typeof config.transactionData === 'object'
39
+ ? config.transactionData
40
+ : {},
41
+ options.digitalWallet.applePay?.transactionData,
42
+ );
43
+ config.applePay = options.digitalWallet.applePay.applePayDisplayOptions;
44
+ }
45
+
46
+ if (options.publishableKey) {
47
+ config.publishableKey = options.publishableKey;
48
+ }
49
+
50
+ if (options.jwt) {
51
+ config.jwt = options.jwt;
52
+ config.sandbox = options.apiMode === 'sandbox';
53
+ }
54
+
55
+ return config;
56
+ }