@zonos/elements 1.3.4 → 1.3.5
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/dist/cjs/{cart-f31374d4.js → cart-c1b0915c.js} +15 -4
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/isCheckoutMobile-f491ca7c.js +8 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{submitGtag-42f29b3a.js → submitGtag-bd6e9b42.js} +0 -6
- package/dist/cjs/zonos-address_2.cjs.entry.js +57 -27
- package/dist/cjs/zonos-button_2.cjs.entry.js +15 -11
- package/dist/cjs/zonos-card_2.cjs.entry.js +2 -2
- package/dist/cjs/zonos-cart-items_10.cjs.entry.js +20 -19
- package/dist/cjs/zonos-checkout.cjs.entry.js +16 -18
- package/dist/cjs/zonos-component.cjs.entry.js +1 -1
- package/dist/cjs/zonos-controller.cjs.entry.js +2 -2
- package/dist/cjs/zonos-country-flag_4.cjs.entry.js +3 -3
- package/dist/cjs/zonos-elements.cjs.js +1 -1
- package/dist/cjs/zonos-hello-dialog.cjs.entry.js +2 -2
- package/dist/cjs/zonos-payment.cjs.entry.js +2 -2
- package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.css +5 -1
- package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.js +2 -2
- package/dist/collection/components/checkout/zonos-checkout/zonos-checkout.css +6 -2
- package/dist/collection/components/checkout/zonos-checkout/zonos-checkout.js +9 -12
- package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.css +5 -1
- package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.js +2 -2
- package/dist/collection/components/checkout/zonos-checkout/zonos-review/zonos-review.css +7 -0
- package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.css +5 -1
- package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.js +2 -2
- package/dist/collection/components/common/zonos-button/zonos-button.css +2 -2
- package/dist/collection/components/common/zonos-button/zonos-button.js +13 -9
- package/dist/collection/components/common/zonos-custom-message/zonos-custom-message.js +1 -1
- package/dist/collection/components/common/zonos-dialog/zonos-dialog.js +3 -3
- package/dist/collection/components/common/zonos-logo/zonos-logo.js +2 -2
- package/dist/collection/components/common/zonos-spinner/zonos-spinner.css +41 -35
- package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.js +2 -2
- package/dist/collection/components/component-template/zonos-component/zonos-component.js +1 -1
- package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.js +2 -2
- package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.js +2 -2
- package/dist/collection/components/main/zonos-controller.js +1 -1
- package/dist/collection/components/store/checkout/cart.js +3 -1
- package/dist/collection/components/store/checkout/stripe.js +8 -3
- package/dist/collection/components/stripe/zonos-address/zonos-address.js +57 -26
- package/dist/collection/components/stripe/zonos-link-authentication/zonos-link-authentication.js +1 -1
- package/dist/collection/components/stripe/zonos-payment/zonos-payment.js +1 -1
- package/dist/collection/components/utils/api/calculateLandedCost.js +6 -1
- package/dist/components/cart.js +15 -4
- package/dist/components/isCheckoutMobile.js +6 -0
- package/dist/components/zonos-address2.js +57 -26
- package/dist/components/zonos-button2.js +14 -10
- package/dist/components/zonos-checkout-payment2.js +3 -3
- package/dist/components/zonos-checkout.js +12 -14
- package/dist/components/zonos-component.js +1 -1
- package/dist/components/zonos-controller.js +1 -1
- package/dist/components/zonos-custom-message2.js +1 -1
- package/dist/components/zonos-customer-info2.js +3 -3
- package/dist/components/zonos-dialog2.js +3 -3
- package/dist/components/zonos-hello-dialog-footer2.js +2 -2
- package/dist/components/zonos-hello-dialog2.js +2 -2
- package/dist/components/zonos-link-authentication2.js +1 -1
- package/dist/components/zonos-logo2.js +2 -2
- package/dist/components/zonos-payment2.js +1 -1
- package/dist/components/zonos-review2.js +3 -7
- package/dist/components/zonos-shipping2.js +3 -3
- package/dist/components/zonos-spinner2.js +1 -1
- package/dist/components/zonos-v-stack2.js +2 -2
- package/dist/esm/{cart-c9124cc3.js → cart-7e7c7585.js} +15 -4
- package/dist/esm/index.js +1 -1
- package/dist/esm/isCheckoutMobile-8846dccb.js +6 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{submitGtag-a7d07aec.js → submitGtag-776c5e10.js} +1 -6
- package/dist/esm/zonos-address_2.entry.js +57 -27
- package/dist/esm/zonos-button_2.entry.js +15 -11
- package/dist/esm/zonos-card_2.entry.js +2 -2
- package/dist/esm/zonos-cart-items_10.entry.js +18 -17
- package/dist/esm/zonos-checkout.entry.js +13 -15
- package/dist/esm/zonos-component.entry.js +1 -1
- package/dist/esm/zonos-controller.entry.js +2 -2
- package/dist/esm/zonos-country-flag_4.entry.js +3 -3
- package/dist/esm/zonos-elements.js +1 -1
- package/dist/esm/zonos-hello-dialog.entry.js +2 -2
- package/dist/esm/zonos-payment.entry.js +2 -2
- package/dist/esm-es5/cart-7e7c7585.js +1 -0
- package/dist/esm-es5/index.js +1 -1
- package/dist/esm-es5/isCheckoutMobile-8846dccb.js +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/submitGtag-776c5e10.js +1 -0
- package/dist/esm-es5/zonos-address_2.entry.js +1 -1
- package/dist/esm-es5/zonos-button_2.entry.js +1 -1
- package/dist/esm-es5/zonos-card_2.entry.js +1 -1
- package/dist/esm-es5/zonos-cart-items_10.entry.js +1 -1
- package/dist/esm-es5/zonos-checkout.entry.js +1 -1
- package/dist/esm-es5/zonos-component.entry.js +1 -1
- package/dist/esm-es5/zonos-controller.entry.js +1 -1
- package/dist/esm-es5/zonos-country-flag_4.entry.js +1 -1
- package/dist/esm-es5/zonos-elements.js +1 -1
- package/dist/esm-es5/zonos-hello-dialog.entry.js +1 -1
- package/dist/esm-es5/zonos-payment.entry.js +1 -1
- package/dist/scripts/loadZonos.js +1 -1
- package/dist/scripts/zonos.js +1 -1
- package/dist/scripts/zonosBase.js +1 -1
- package/dist/types/components/store/checkout/stripe.d.ts +1 -0
- package/dist/types/components/stripe/zonos-address/zonos-address.d.ts +5 -0
- package/dist/types/components/utils/checkout/isCheckoutMobile.d.ts +1 -1
- package/dist/zonos-elements/index.esm.js +1 -1
- package/dist/zonos-elements/p-09c5dc1b.system.entry.js +1 -0
- package/dist/zonos-elements/p-1156ae5d.system.entry.js +1 -0
- package/dist/zonos-elements/{p-7cae86a0.system.entry.js → p-120df5be.system.entry.js} +1 -1
- package/dist/zonos-elements/p-174239da.system.js +1 -0
- package/dist/zonos-elements/{p-f7b1dfd0.system.entry.js → p-18e09138.system.entry.js} +1 -1
- package/dist/zonos-elements/p-2589a038.system.entry.js +1 -0
- package/dist/zonos-elements/{p-ffc91e42.entry.js → p-31fa76da.entry.js} +1 -1
- package/dist/zonos-elements/{p-afed9236.entry.js → p-3319e4db.entry.js} +1 -1
- package/dist/zonos-elements/{p-9f3cad08.entry.js → p-357f0c61.entry.js} +1 -1
- package/dist/zonos-elements/{p-c134eecd.system.js → p-4d0861e9.system.js} +1 -1
- package/dist/zonos-elements/p-54ef8ff3.entry.js +1 -0
- package/dist/zonos-elements/{p-eb96f893.system.entry.js → p-626b5a52.system.entry.js} +1 -1
- package/dist/zonos-elements/p-6444a4b9.entry.js +1 -0
- package/dist/zonos-elements/{p-26edde4d.system.entry.js → p-65f4af1a.system.entry.js} +1 -1
- package/dist/zonos-elements/p-661bc488.entry.js +1 -0
- package/dist/zonos-elements/p-6c47083f.entry.js +1 -0
- package/dist/zonos-elements/p-6d454281.entry.js +1 -0
- package/dist/zonos-elements/p-78886ed6.system.entry.js +1 -0
- package/dist/zonos-elements/p-81a54668.js +1 -0
- package/dist/zonos-elements/{p-5d91e45c.entry.js → p-aca66e4b.entry.js} +1 -1
- package/dist/zonos-elements/p-aed0098c.system.js +1 -0
- package/dist/zonos-elements/p-af910392.js +1 -0
- package/dist/zonos-elements/p-b035f9e5.system.js +1 -1
- package/dist/zonos-elements/{p-43220d68.entry.js → p-b58d2231.entry.js} +1 -1
- package/dist/zonos-elements/p-cfe4a318.js +1 -0
- package/dist/zonos-elements/p-e4a2a1b0.system.entry.js +1 -0
- package/dist/zonos-elements/p-ead79548.system.js +1 -0
- package/dist/zonos-elements/{p-62851827.system.entry.js → p-eb631432.system.entry.js} +1 -1
- package/dist/zonos-elements/zonos-elements.esm.js +1 -1
- package/package.json +1 -1
- package/dist/esm-es5/cart-c9124cc3.js +0 -1
- package/dist/esm-es5/submitGtag-a7d07aec.js +0 -1
- package/dist/zonos-elements/p-139fc767.entry.js +0 -1
- package/dist/zonos-elements/p-2ac66cea.system.entry.js +0 -1
- package/dist/zonos-elements/p-39d12bf0.entry.js +0 -1
- package/dist/zonos-elements/p-3d965e88.entry.js +0 -1
- package/dist/zonos-elements/p-51a40ddf.system.js +0 -1
- package/dist/zonos-elements/p-741a1402.system.entry.js +0 -1
- package/dist/zonos-elements/p-83bb8727.system.entry.js +0 -1
- package/dist/zonos-elements/p-97e659b7.entry.js +0 -1
- package/dist/zonos-elements/p-b494d540.entry.js +0 -1
- package/dist/zonos-elements/p-b87fa3a1.js +0 -1
- package/dist/zonos-elements/p-d170748c.system.entry.js +0 -1
- package/dist/zonos-elements/p-e59b6648.js +0 -1
- package/dist/zonos-elements/p-ee8b44c0.system.js +0 -1
- package/dist/zonos-elements/p-efd1544b.system.entry.js +0 -1
|
@@ -3,13 +3,14 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-3ead02fe.js');
|
|
6
|
-
const cart = require('./cart-
|
|
6
|
+
const cart = require('./cart-c1b0915c.js');
|
|
7
7
|
const localization = require('./localization-d43e1540.js');
|
|
8
8
|
const zonosStore = require('./zonosStore-b88b5671.js');
|
|
9
|
-
const
|
|
9
|
+
const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
|
|
10
10
|
const classes = require('./classes-b7918f56.js');
|
|
11
11
|
const getBorderRadius = require('./getBorderRadius-cd7ef574.js');
|
|
12
12
|
const isDarkColor = require('./isDarkColor-5eda1323.js');
|
|
13
|
+
const submitGtag = require('./submitGtag-bd6e9b42.js');
|
|
13
14
|
|
|
14
15
|
const LeftArrow = `<svg color="var(--amino-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M9.707 16.707a1 1 0 0 1-1.414 0l-3.647-3.646a1.5 1.5 0 0 1 0-2.122l3.647-3.646a1 1 0 0 1 1.414 1.414L7.414 11H19a1 1 0 1 1 0 2H7.414l2.293 2.293a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
|
|
15
16
|
|
|
@@ -20,18 +21,19 @@ const MessageIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none"
|
|
|
20
21
|
|
|
21
22
|
const RemoveIcon = `<svg color="var(--amino-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--amino-gray-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
|
|
22
23
|
|
|
23
|
-
const zonosCheckoutCss = ".sc-zonos-checkout-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-h *.sc-zonos-checkout{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--border-radius, var(--amino-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:var(--amino-space-48) var(--amino-space-56)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--amino-gray-0));border-right:1px solid var(--amino-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--amino-gray-0);padding-bottom:var(--amino-space-80)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--amino-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--amino-space-24);padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout img.sc-zonos-checkout{width:150px;min-width:150px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--back-button.sc-zonos-checkout{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 var(--amino-space-8) var(--amino-space-8)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--close-button.sc-zonos-checkout{position:absolute;right:var(--amino-space-24);top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--footer.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;position:absolute;bottom:var(--amino-space-32);right:var(--amino-space-56);gap:var(--amino-space-8)}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:var(--amino-space-76);margin-bottom:var(--amino-space-8)}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--amino-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:var(--amino-space-32)}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:var(--amino-space-12)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:var(--amino-space-16)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;
|
|
24
|
+
const zonosCheckoutCss = ".sc-zonos-checkout-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-h *.sc-zonos-checkout{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--border-radius, var(--amino-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:var(--amino-space-48) var(--amino-space-56)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--amino-gray-0));border-right:1px solid var(--amino-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--amino-gray-0);padding-bottom:var(--amino-space-80)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--amino-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--amino-space-24);padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout img.sc-zonos-checkout{width:150px;min-width:150px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--back-button.sc-zonos-checkout{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 var(--amino-space-8) var(--amino-space-8)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--close-button.sc-zonos-checkout{position:absolute;right:var(--amino-space-24);top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--footer.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;position:absolute;bottom:var(--amino-space-32);right:var(--amino-space-56);gap:var(--amino-space-8)}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:var(--amino-space-76);margin-bottom:var(--amino-space-8)}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--amino-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:var(--amino-space-32)}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:var(--amino-space-12)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:var(--amino-space-16)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border:var(--amino-border);border-radius:var(--border-radius, var(--amino-radius-10));background-color:var(--amino-gray-50);padding:var(--amino-space-12);margin-top:var(--amino-space-32)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--review.sc-zonos-checkout{margin-bottom:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--cart-items.sc-zonos-checkout{margin-top:var(--amino-space-8)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{max-height:100%}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:auto}.mobile.sc-zonos-checkout-h .zonos--cart-subtotal.sc-zonos-checkout{margin:0}.mobile.sc-zonos-checkout-h .zonos--footer.sc-zonos-checkout{bottom:0;left:0;padding:var(--amino-space-12);position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-gray-0)}";
|
|
24
25
|
const ZonosCheckoutStyle0 = zonosCheckoutCss;
|
|
25
26
|
|
|
26
27
|
const ZonosCheckout = class {
|
|
27
28
|
constructor(hostRef) {
|
|
28
29
|
index.registerInstance(this, hostRef);
|
|
29
30
|
this.applyStripeTheme = async () => {
|
|
30
|
-
var _a, _b, _c;
|
|
31
|
+
var _a, _b, _c, _d;
|
|
31
32
|
const theme = ((_a = this.appearanceSettingsOverride) === null || _a === void 0 ? void 0 : _a.theme) || zonosStore.zonosStore.appearance.theme;
|
|
32
33
|
await cart.initStripeElements({
|
|
33
34
|
overrideBorderRaidus: (_b = this.appearanceSettingsOverride) === null || _b === void 0 ? void 0 : _b.style,
|
|
34
35
|
overridePrimaryColor: (_c = this.appearanceSettingsOverride) === null || _c === void 0 ? void 0 : _c.colorPrimary,
|
|
36
|
+
overrideSecondaryColor: (_d = this.appearanceSettingsOverride) === null || _d === void 0 ? void 0 : _d.colorSecondary,
|
|
35
37
|
// only override theme or theme from appearance if it's mobile
|
|
36
38
|
overrideTheme: this.isMobile ? theme : undefined,
|
|
37
39
|
});
|
|
@@ -313,20 +315,20 @@ const ZonosCheckout = class {
|
|
|
313
315
|
cart.cartStorePreviousStep();
|
|
314
316
|
}
|
|
315
317
|
handleWindowResize() {
|
|
316
|
-
this.isMobile =
|
|
318
|
+
this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
|
|
317
319
|
// apply theme to stripe elements
|
|
318
320
|
void this.applyStripeTheme();
|
|
319
321
|
localization.log(`mobile: ${this.isMobile}`);
|
|
320
322
|
}
|
|
321
323
|
handleMobileChange() {
|
|
322
|
-
this.isMobile =
|
|
324
|
+
this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
|
|
323
325
|
// apply theme to stripe elements
|
|
324
326
|
void this.applyStripeTheme();
|
|
325
327
|
localization.log(`mobile: ${this.isMobile}`);
|
|
326
328
|
}
|
|
327
329
|
componentWillLoad() {
|
|
328
330
|
void this.init();
|
|
329
|
-
this.isMobile =
|
|
331
|
+
this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
|
|
330
332
|
localization.log(`mobile: ${this.isMobile}`);
|
|
331
333
|
}
|
|
332
334
|
// do clean up when component is unmounted
|
|
@@ -355,31 +357,27 @@ const ZonosCheckout = class {
|
|
|
355
357
|
// only use submit button color if it's on desktop
|
|
356
358
|
const submitButtonColor = !this.isMobile ? colorSecondary : undefined;
|
|
357
359
|
const { customMessages } = localization.localizationStore;
|
|
358
|
-
const defaultMessage = (
|
|
359
|
-
'Know about duties and taxes before you buy. Shop with confidence!';
|
|
360
|
+
const defaultMessage = (_a = customMessages.find(x => x.pageName === 'checkout_default')) === null || _a === void 0 ? void 0 : _a.message;
|
|
360
361
|
const localePageEnum = this.getCurrentLocalePageEnum();
|
|
361
362
|
const filteredMessages = customMessages.filter(x => x.pageName === localePageEnum);
|
|
362
363
|
const renderLogo = () => (index.h("div", { class: "zonos--logo" }, logoUrl && (index.h("img", { alt: `${zonosStore.zonosStore.organizationName} logo`, src: logoUrl, width: 100 }))));
|
|
363
364
|
const renderTopHeader = () => (index.h("zonos-v-stack", null, renderLogo(), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message }))), index.h("div", null, index.h("zonos-button", { class: "zonos--back-button", icon: index.h("zonos-icon", { content: LeftArrow }), noBackground: true, noPaddingLeft: true, noPaddingRight: true, onClick: () => this.handleBackClick(), theme: leftSideTheme }, localization.translate('Back')))));
|
|
364
365
|
const renderFooter = () => hasFooter && (index.h("div", { class: "zonos--footer", "data-theme": rightSideTheme }, index.h("zonos-text", { type: "hintText" }, localization.translate('Powered by')), index.h("zonos-logo", { theme: rightSideTheme, width: "100px" })));
|
|
365
366
|
const renderContent = () => {
|
|
366
|
-
var _a;
|
|
367
|
-
const submitBtnType = this.isMobile ? 'primary' : undefined;
|
|
368
|
-
const reviewElementSize = (_a = this.zonosReviewRef) === null || _a === void 0 ? void 0 : _a.scrollHeight;
|
|
369
367
|
return (index.h("div", { class: 'zonos--content', style: {
|
|
370
368
|
'--border-radius': getBorderRadius.getBorderRadius(style),
|
|
371
369
|
} }, cart.cartStore.step !== 'finish' && cart.cartStore.step !== 'error' && (index.h(index.Fragment, null, index.h("div", { class: "zonos--left", "data-theme": leftSideTheme, style: {
|
|
372
370
|
'--primary-color': !this.isMobile ? colorPrimary : '',
|
|
373
|
-
} }, !this.isMobile && renderTopHeader(), cart.cartStore.step === 'customer-info' && (index.h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor
|
|
374
|
-
// only collapse on mobile
|
|
375
|
-
collapsed: this.collapseReviewMobile && this.isMobile }, index.h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
|
|
371
|
+
} }, !this.isMobile && renderTopHeader(), cart.cartStore.step === 'customer-info' && (index.h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'shipping' && (index.h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'payment' && (index.h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor }))), index.h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isMobile && (index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), index.h("div", { class: "flex--wrapper" }, index.h("div", { class: "zonos--wrapper" }, index.h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
|
|
376
372
|
// do nothing if it's not mobile
|
|
377
373
|
if (!this.isMobile) {
|
|
378
374
|
return;
|
|
379
375
|
}
|
|
380
|
-
this.collapseReviewMobile =
|
|
381
|
-
|
|
382
|
-
|
|
376
|
+
this.collapseReviewMobile = !this.collapseReviewMobile;
|
|
377
|
+
} }), index.h("zonos-collapse", {
|
|
378
|
+
// only collapse on mobile
|
|
379
|
+
collapsed: this.collapseReviewMobile && this.isMobile
|
|
380
|
+
}, index.h("zonos-cart-items", null))), index.h("zonos-v-stack", { spacing: 16 }, index.h("zonos-cart-subtotal", null), index.h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))), !this.isMobile && renderFooter()), this.isMobile && renderFooter())), (cart.cartStore.step === 'finish' || cart.cartStore.step === 'error') && (index.h("div", { class: "zonos--done", "data-theme": rightSideTheme }, index.h("div", { class: "zonos--header" }, renderLogo(), index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), index.h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cart.cartStore.step === 'error' && !!cart.cartStore.error
|
|
383
381
|
? Object.assign(Object.assign({}, cart.cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride })))));
|
|
384
382
|
};
|
|
385
383
|
return (index.h(index.Host, { class: classes.classes([
|
|
@@ -22,7 +22,7 @@ const ZonosComponent = class {
|
|
|
22
22
|
return format(this.first, this.middle, this.last);
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
|
-
return index.h("div", { key: '
|
|
25
|
+
return index.h("div", { key: 'a61bec010f8c7a8b9979d4c5ec4a84153b780a7e' }, "Hello, World! I'm ", this.getText());
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
28
|
ZonosComponent.style = ZonosComponentStyle0;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-3ead02fe.js');
|
|
6
|
-
const cart = require('./cart-
|
|
6
|
+
const cart = require('./cart-c1b0915c.js');
|
|
7
7
|
const localization = require('./localization-d43e1540.js');
|
|
8
8
|
const zonosStore = require('./zonosStore-b88b5671.js');
|
|
9
9
|
require('./isDarkColor-5eda1323.js');
|
|
@@ -211,7 +211,7 @@ const ZonosController = class {
|
|
|
211
211
|
zonosStore.zonosStore.organizationName = organizationName;
|
|
212
212
|
}
|
|
213
213
|
render() {
|
|
214
|
-
return index.h(index.Host, { key: '
|
|
214
|
+
return index.h(index.Host, { key: 'ff6eb2466864a217c485484d381e6f2531631e49', class: "zonos--elements" });
|
|
215
215
|
}
|
|
216
216
|
};
|
|
217
217
|
ZonosController.style = ZonosControllerStyle0;
|
|
@@ -1872,7 +1872,7 @@ const ZonosCustomMessage = class {
|
|
|
1872
1872
|
render() {
|
|
1873
1873
|
return (index.h(index.Host, { key: 'eb6b2a907ef77d5e2da0d9cb1bee4b77f814e5cb', class: "zonos--elements", style: {
|
|
1874
1874
|
'--font-family': zonosStore.zonosStoreFontFamily(),
|
|
1875
|
-
} }, index.h("zonos-card", {
|
|
1875
|
+
} }, this.message && (index.h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { content: this.icon }), index.h("zonos-text", null, this.message))))));
|
|
1876
1876
|
}
|
|
1877
1877
|
};
|
|
1878
1878
|
ZonosCustomMessage.style = ZonosCustomMessageStyle0;
|
|
@@ -1899,9 +1899,9 @@ const ZonosHelloDialogFooter = class {
|
|
|
1899
1899
|
var _a, _b;
|
|
1900
1900
|
const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
|
|
1901
1901
|
const footerTheme = primaryColor && isDarkColor.isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
|
|
1902
|
-
return (index.h(index.Host, { key: '
|
|
1902
|
+
return (index.h(index.Host, { key: '724259a8adaa1cb5c760f36b14be99c55d6c29e2', class: "zonos--elements" }, index.h("div", { key: 'cb27d219f7a0f948a939b221143c3f0f252b0eeb', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
|
|
1903
1903
|
'--primary-color': (_b = this.appearanceSettings) === null || _b === void 0 ? void 0 : _b.colorPrimary,
|
|
1904
|
-
} }, index.h("a", { key: '
|
|
1904
|
+
} }, index.h("a", { key: 'd04f060e7db6e2c964dc2c4252dbbc7b69fba7db', href: "https://zonos.com", target: "_blank" }, index.h("zonos-icon", { key: 'ed138c417f139f84a5466a4228925e2aa908cd12', autoHeight: true, color: "gray-1200", content: ZonosIcon, size: 108 })), index.h("zonos-button", { key: '07b300a1950adfaf154c173a49cec722df74172c', icon: index.h("zonos-icon", { color: "gray-700", content: ChevronDownIcon }), iconRight: true, onClick: () => this.setShowCountrySelect(true), variant: "outline" }, localization.localizationStore.selectedCountryCode))));
|
|
1905
1905
|
}
|
|
1906
1906
|
};
|
|
1907
1907
|
ZonosHelloDialogFooter.style = ZonosHelloDialogFooterStyle0;
|
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return index.bootstrapLazy([["zonos-text.cjs",[[1,"zonos-text",{"class":[1],"color":[1],"size":[1],"type":[1],"weight":[2],"content":[1],"ready":[32]}]]],["zonos-checkout.cjs",[[2,"zonos-checkout",{"appearanceSettingsOverride":[16],"preview":[4],"mobile":[4],"defaultAddress":[16],"forceDialogOpen":[4,"force-dialog-open"],"open":[32],"stripe":[32],"submitLoading":[32],"paymentError":[32],"collapseReviewMobile":[32],"isAttachError":[32],"isMobile":[32],"zonosReviewRef":[32],"storybookPaymentStatusOverride":[32],"closeDialogHandler":[64],"init":[64],"setToFinishStep":[64]},[[16,"zonos--init-cart-info","initCartInfoHandler"],[9,"resize","handleWindowResize"]],{"appearanceSettingsOverride":["appearanceSettingsOverrideChanged"],"mobile":["handleMobileChange"]}]]],["zonos-hello.cjs",[[1,"zonos-hello",{"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettingsOverride":[16],"showPeekMessage":[32],"zonosStoreHelloSettings":[32],"showDialog":[32],"peekMessage":[32],"initialUrl":[32],"allRestrictedItems":[32],"allFoundProducts":[32],"productsOnPage":[32],"displayCurrency":[64],"convertAndFormat":[64],"convert":[64],"format":[64]},[[9,"resize","handleResize"]]]]],["zonos-controller.cjs",[[1,"zonos-controller",{"config":[16],"zonosApiKey":[1,"zonos-api-key"],"initCheckoutElement":[64],"setupGoogleFont":[64],"showNotification":[64],"overrideConfig":[64],"overrideCountry":[64],"getAppearanceSetting":[64],"updateOrganizationName":[64]}]]],["zonos-component.cjs",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-country-flag_4.cjs",[[1,"zonos-country-select",{"closeCountrySelect":[16],"inputValue":[32]}],[1,"zonos-hello-dialog-footer",{"appearanceSettings":[16],"setShowCountrySelect":[16]}],[1,"zonos-custom-message",{"icon":[1],"message":[1]}],[1,"zonos-country-flag",{"class":[1],"countryCode":[1,"country-code"],"size":[2]}]]],["zonos-hello-dialog.cjs",[[1,"zonos-hello-dialog",{"isOpen":[4,"is-open"],"setIsOpen":[16],"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettings":[16],"restrictedItems":[16],"welcomeMessage":[32],"showCountrySelect":[32]},[[4,"click","globalClickHandler"]],{"isOpen":["isOpenHandler"]}]]],["zonos-notification.cjs",[[1,"zonos-notification",{"class":[1],"notificationArray":[32],"showNotification":[64]}]]],["zonos-badge.cjs",[[1,"zonos-badge",{"bold":[4],"color":[1],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"rounded":[4],"class":[1]}]]],["zonos-payment.cjs",[[2,"zonos-payment",{"titleText":[1,"title-text"],"stripe":[32],"stripeElements":[32]},null,{"stripeElements":["watchInitStripe"],"stripe":["watchInitStripe"]}]]],["zonos-shipping-rich-radio.cjs",[[1,"zonos-shipping-rich-radio",{"items":[16],"borderColor":[1,"border-color"],"borderStyle":[1,"border-style"],"theme":[1],"selectedItem":[32]}]]],["zonos-address_2.cjs",[[2,"zonos-address",{"type":[1],"titleText":[1,"title-text"],"defaultAddress":[16],"stripe":[32]},null,{"stripe":["watchInitStripe"]}],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}]]],["zonos-banner.cjs",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"class":[1],"hasContent":[32]}]]],["zonos-card_2.cjs",[[1,"zonos-card",{"actions":[16],"class":[1],"footerActions":[16],"footerContent":[16],"footerHeight":[2,"footer-height"],"label":[16],"spacing":[1]}],[1,"zonos-v-stack",{"spacing":[2],"class":[1]}]]],["zonos-icon.cjs",[[1,"zonos-icon",{"autoHeight":[4,"auto-height"],"color":[1],"content":[1],"size":[2]}]]],["zonos-button_2.cjs",[[1,"zonos-button",{"class":[1],"color":[1],"backgroundColor":[1,"background-color"],"borderStyle":[1,"border-style"],"isDisabled":[4,"is-disabled"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"variant":[1],"noBackground":[4,"no-background"],"noPaddingLeft":[4,"no-padding-left"],"noPaddingRight":[4,"no-padding-right"],"loading":[4],"theme":[1],"hasIcon":[32],"hasContent":[32]},[[2,"click","clickHandler"]],{"icon":["iconChangeHandler"]}],[1,"zonos-spinner",{"size":[2],"color":[1]}]]],["zonos-cart-items_10.cjs",[[2,"zonos-checkout-payment",{"paymentError":[4,"payment-error"],"submitBtnType":[1,"submit-btn-type"],"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"defaultAddress":[16],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-shipping",{"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"submitBtnType":[1,"submit-btn-type"],"selectedShippingMethod":[32],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[1,"zonos-checkout-finish",{"borderRadius":[1,"border-radius"],"storybookForceStatus":[1,"storybook-force-status"],"overrideNotification":[16],"isLoading":[32],"notificationType":[32],"notificationTitle":[32],"notificationMessages":[32],"order":[32]}],[1,"zonos-cart-subtotal"],[1,"zonos-dialog",{"open":[4],"headerText":[1,"header-text"],"width":[1],"height":[1],"noHeader":[4,"no-header"],"noBodyPadding":[4,"no-body-padding"],"noBorder":[4,"no-border"],"footerRightAction":[16],"borderStyle":[1,"border-style"],"noCloseButton":[4,"no-close-button"],"noClickOutside":[4,"no-click-outside"],"mobile":[4],"isLoading":[4,"is-loading"],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-review",{"mobile":[4],"collapsed":[4],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-cart-items",{"errorImages":[32]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32]}],[1,"zonos-logo",{"theme":[1],"width":[1],"class":[1]}]]]], options);
|
|
20
|
+
return index.bootstrapLazy([["zonos-text.cjs",[[1,"zonos-text",{"class":[1],"color":[1],"size":[1],"type":[1],"weight":[2],"content":[1],"ready":[32]}]]],["zonos-checkout.cjs",[[2,"zonos-checkout",{"appearanceSettingsOverride":[16],"preview":[4],"mobile":[4],"defaultAddress":[16],"forceDialogOpen":[4,"force-dialog-open"],"open":[32],"stripe":[32],"submitLoading":[32],"paymentError":[32],"collapseReviewMobile":[32],"isAttachError":[32],"isMobile":[32],"zonosReviewRef":[32],"storybookPaymentStatusOverride":[32],"closeDialogHandler":[64],"init":[64],"setToFinishStep":[64]},[[16,"zonos--init-cart-info","initCartInfoHandler"],[9,"resize","handleWindowResize"]],{"appearanceSettingsOverride":["appearanceSettingsOverrideChanged"],"mobile":["handleMobileChange"]}]]],["zonos-hello.cjs",[[1,"zonos-hello",{"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettingsOverride":[16],"showPeekMessage":[32],"zonosStoreHelloSettings":[32],"showDialog":[32],"peekMessage":[32],"initialUrl":[32],"allRestrictedItems":[32],"allFoundProducts":[32],"productsOnPage":[32],"displayCurrency":[64],"convertAndFormat":[64],"convert":[64],"format":[64]},[[9,"resize","handleResize"]]]]],["zonos-controller.cjs",[[1,"zonos-controller",{"config":[16],"zonosApiKey":[1,"zonos-api-key"],"initCheckoutElement":[64],"setupGoogleFont":[64],"showNotification":[64],"overrideConfig":[64],"overrideCountry":[64],"getAppearanceSetting":[64],"updateOrganizationName":[64]}]]],["zonos-component.cjs",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-country-flag_4.cjs",[[1,"zonos-country-select",{"closeCountrySelect":[16],"inputValue":[32]}],[1,"zonos-hello-dialog-footer",{"appearanceSettings":[16],"setShowCountrySelect":[16]}],[1,"zonos-custom-message",{"icon":[1],"message":[1]}],[1,"zonos-country-flag",{"class":[1],"countryCode":[1,"country-code"],"size":[2]}]]],["zonos-hello-dialog.cjs",[[1,"zonos-hello-dialog",{"isOpen":[4,"is-open"],"setIsOpen":[16],"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettings":[16],"restrictedItems":[16],"welcomeMessage":[32],"showCountrySelect":[32]},[[4,"click","globalClickHandler"]],{"isOpen":["isOpenHandler"]}]]],["zonos-notification.cjs",[[1,"zonos-notification",{"class":[1],"notificationArray":[32],"showNotification":[64]}]]],["zonos-badge.cjs",[[1,"zonos-badge",{"bold":[4],"color":[1],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"rounded":[4],"class":[1]}]]],["zonos-payment.cjs",[[2,"zonos-payment",{"titleText":[1,"title-text"],"stripe":[32],"stripeElements":[32]},null,{"stripeElements":["watchInitStripe"],"stripe":["watchInitStripe"]}]]],["zonos-shipping-rich-radio.cjs",[[1,"zonos-shipping-rich-radio",{"items":[16],"borderColor":[1,"border-color"],"borderStyle":[1,"border-style"],"theme":[1],"selectedItem":[32]}]]],["zonos-address_2.cjs",[[2,"zonos-address",{"type":[1],"titleText":[1,"title-text"],"defaultAddress":[16],"stripe":[32],"isDirtyAddress":[32]},null,{"stripe":["watchInitStripe"]}],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}]]],["zonos-banner.cjs",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"class":[1],"hasContent":[32]}]]],["zonos-card_2.cjs",[[1,"zonos-card",{"actions":[16],"class":[1],"footerActions":[16],"footerContent":[16],"footerHeight":[2,"footer-height"],"label":[16],"spacing":[1]}],[1,"zonos-v-stack",{"spacing":[2],"class":[1]}]]],["zonos-icon.cjs",[[1,"zonos-icon",{"autoHeight":[4,"auto-height"],"color":[1],"content":[1],"size":[2]}]]],["zonos-button_2.cjs",[[1,"zonos-button",{"class":[1],"color":[1],"backgroundColor":[1,"background-color"],"borderStyle":[1,"border-style"],"isDisabled":[4,"is-disabled"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"variant":[1],"noBackground":[4,"no-background"],"noPaddingLeft":[4,"no-padding-left"],"noPaddingRight":[4,"no-padding-right"],"loading":[4],"theme":[1],"hasIcon":[32],"hasContent":[32]},[[2,"click","clickHandler"]],{"icon":["iconChangeHandler"]}],[1,"zonos-spinner",{"size":[2],"color":[1]}]]],["zonos-cart-items_10.cjs",[[2,"zonos-checkout-payment",{"paymentError":[4,"payment-error"],"submitBtnType":[1,"submit-btn-type"],"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"defaultAddress":[16],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-shipping",{"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"submitBtnType":[1,"submit-btn-type"],"selectedShippingMethod":[32],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[1,"zonos-checkout-finish",{"borderRadius":[1,"border-radius"],"storybookForceStatus":[1,"storybook-force-status"],"overrideNotification":[16],"isLoading":[32],"notificationType":[32],"notificationTitle":[32],"notificationMessages":[32],"order":[32]}],[1,"zonos-cart-subtotal"],[1,"zonos-dialog",{"open":[4],"headerText":[1,"header-text"],"width":[1],"height":[1],"noHeader":[4,"no-header"],"noBodyPadding":[4,"no-body-padding"],"noBorder":[4,"no-border"],"footerRightAction":[16],"borderStyle":[1,"border-style"],"noCloseButton":[4,"no-close-button"],"noClickOutside":[4,"no-click-outside"],"mobile":[4],"isLoading":[4,"is-loading"],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-review",{"mobile":[4],"collapsed":[4],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-cart-items",{"errorImages":[32]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32]}],[1,"zonos-logo",{"theme":[1],"width":[1],"class":[1]}]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.setNonce = index.setNonce;
|
|
@@ -113,14 +113,14 @@ const ZonosHelloDialog = class {
|
|
|
113
113
|
localization.translate('Know about duties and taxes before you buy. Shop with confidence!');
|
|
114
114
|
const currentPage = this.getCurrentPageEnum();
|
|
115
115
|
const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
|
|
116
|
-
return (index.h(index.Host, { key: '
|
|
116
|
+
return (index.h(index.Host, { key: '56fcc25e2fabf8c2f1edf727a64d213f18729c00', class: "zonos--elements" }, index.h("div", { key: 'c83e357cd266c605015e136eb23906bd4385e7f5', "aria-hidden": "true", class: classes.classes([
|
|
117
117
|
'zonos--hello-dialog',
|
|
118
118
|
animateLeft && 'zonos--hello-dialog-animate-from-left',
|
|
119
119
|
animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
|
|
120
120
|
!!this.mobileLocationOverride &&
|
|
121
121
|
'zonos--hello-dialog-mobile-override',
|
|
122
122
|
this.isOpen && 'zonos--hello-dialog-open',
|
|
123
|
-
]), ref: el => el && (this.dialogRef = el) }, index.h("div", { key: '
|
|
123
|
+
]), ref: el => el && (this.dialogRef = el) }, index.h("div", { key: '8d5811f45f2cfe8bd1c0ca3131d99ebc69b7b00d', class: "zonos--hello-dialog-content" }, index.h("zonos-button", { key: '137ea59ae312bee3817292dde42e2e718e70001b', class: "zonos--close-button", icon: index.h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), this.showCountrySelect ? (index.h("div", null, index.h("zonos-country-select", { closeCountrySelect: () => this.setShowCountrySelect(false) }))) : (index.h("div", null, index.h("zonos-v-stack", { spacing: 24 }, index.h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), index.h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, index.h("zonos-text", { type: "boldSubheader" }, welcomeMessage), index.h("zonos-text", { color: "gray-800" }, defaultMessage)), index.h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
|
|
124
124
|
var _a;
|
|
125
125
|
return item && (index.h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (index.h("zonos-text", { color: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
|
|
126
126
|
}), index.h("zonos-card", { spacing: "12px" }, index.h("zonos-v-stack", { spacing: 12 }, index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { content: BagIcon }), index.h("zonos-text", null, dutyDeMinimisMessage)), index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { content: MoneyIcon }), index.h("zonos-text", null, taxDeMinimisMessage)))), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))))), !this.showCountrySelect && (index.h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value) })))));
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-3ead02fe.js');
|
|
6
|
-
const cart = require('./cart-
|
|
6
|
+
const cart = require('./cart-c1b0915c.js');
|
|
7
7
|
require('./zonosStore-b88b5671.js');
|
|
8
8
|
require('./localization-d43e1540.js');
|
|
9
9
|
require('./isDarkColor-5eda1323.js');
|
|
@@ -46,7 +46,7 @@ const ZonosPayment = class {
|
|
|
46
46
|
}
|
|
47
47
|
render() {
|
|
48
48
|
// this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
|
|
49
|
-
return (index.h(index.Host, { key: '
|
|
49
|
+
return (index.h(index.Host, { key: '365e346a6cda504bdbc825ff8e25b7492bf1d19b', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: 'f76c3b4ef941ecc8cb99ac3593b9d902eda5b1e7', class: "zonos--payment-component" })));
|
|
50
50
|
}
|
|
51
51
|
get el() { return index.getElement(this); }
|
|
52
52
|
static get watchers() { return {
|
|
@@ -63,9 +63,13 @@
|
|
|
63
63
|
margin-bottom: var(--amino-space-8);
|
|
64
64
|
}
|
|
65
65
|
:host .zonos--group-btn {
|
|
66
|
+
position: sticky;
|
|
66
67
|
display: flex;
|
|
67
68
|
justify-content: center;
|
|
69
|
+
bottom: 0;
|
|
70
|
+
margin-top: var(--amino-space-12);
|
|
71
|
+
background: var(--primary-color, var(--amino-gray-0));
|
|
68
72
|
}
|
|
69
73
|
:host .zonos--group-btn zonos-button {
|
|
70
|
-
width:
|
|
74
|
+
width: 100%;
|
|
71
75
|
}
|
|
@@ -30,12 +30,12 @@ export class ZonosCheckoutPayment {
|
|
|
30
30
|
return null;
|
|
31
31
|
}
|
|
32
32
|
this.disabled = !((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
|
|
33
|
-
return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null)
|
|
33
|
+
return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
|
|
34
34
|
// use primary type when on mobile mode
|
|
35
35
|
variant: this.submitBtnType }, "Pay", ' ', formatCurrency({
|
|
36
36
|
amount: cartStore.total,
|
|
37
37
|
currency: cartStore.currency,
|
|
38
|
-
})))));
|
|
38
|
+
}))))));
|
|
39
39
|
}
|
|
40
40
|
static get is() { return "zonos-checkout-payment"; }
|
|
41
41
|
static get encapsulation() { return "scoped"; }
|
|
@@ -179,14 +179,18 @@
|
|
|
179
179
|
:host(.mobile) .zonos--content .zonos--right .zonos--wrapper {
|
|
180
180
|
display: flex;
|
|
181
181
|
flex-direction: column;
|
|
182
|
-
gap: var(--amino-space-16);
|
|
183
|
-
margin-top: var(--amino-space-24);
|
|
184
182
|
border: var(--amino-border);
|
|
185
183
|
border-radius: var(--border-radius, var(--amino-radius-10));
|
|
186
184
|
background-color: var(--amino-gray-50);
|
|
187
185
|
padding: var(--amino-space-12);
|
|
188
186
|
margin-top: var(--amino-space-32);
|
|
189
187
|
}
|
|
188
|
+
:host(.mobile) .zonos--content .zonos--right .zonos--review {
|
|
189
|
+
margin-bottom: 0;
|
|
190
|
+
}
|
|
191
|
+
:host(.mobile) .zonos--content .zonos--right .zonos--cart-items {
|
|
192
|
+
margin-top: var(--amino-space-8);
|
|
193
|
+
}
|
|
190
194
|
:host(.mobile) .zonos--content .zonos--wrapper {
|
|
191
195
|
max-height: 100%;
|
|
192
196
|
}
|
|
@@ -21,11 +21,12 @@ import RemoveIcon from "./assets/RemoveIcon.svg";
|
|
|
21
21
|
export class ZonosCheckout {
|
|
22
22
|
constructor() {
|
|
23
23
|
this.applyStripeTheme = async () => {
|
|
24
|
-
var _a, _b, _c;
|
|
24
|
+
var _a, _b, _c, _d;
|
|
25
25
|
const theme = ((_a = this.appearanceSettingsOverride) === null || _a === void 0 ? void 0 : _a.theme) || zonosStore.appearance.theme;
|
|
26
26
|
await initStripeElements({
|
|
27
27
|
overrideBorderRaidus: (_b = this.appearanceSettingsOverride) === null || _b === void 0 ? void 0 : _b.style,
|
|
28
28
|
overridePrimaryColor: (_c = this.appearanceSettingsOverride) === null || _c === void 0 ? void 0 : _c.colorPrimary,
|
|
29
|
+
overrideSecondaryColor: (_d = this.appearanceSettingsOverride) === null || _d === void 0 ? void 0 : _d.colorSecondary,
|
|
29
30
|
// only override theme or theme from appearance if it's mobile
|
|
30
31
|
overrideTheme: this.isMobile ? theme : undefined,
|
|
31
32
|
});
|
|
@@ -349,31 +350,27 @@ export class ZonosCheckout {
|
|
|
349
350
|
// only use submit button color if it's on desktop
|
|
350
351
|
const submitButtonColor = !this.isMobile ? colorSecondary : undefined;
|
|
351
352
|
const { customMessages } = localizationStore;
|
|
352
|
-
const defaultMessage = (
|
|
353
|
-
'Know about duties and taxes before you buy. Shop with confidence!';
|
|
353
|
+
const defaultMessage = (_a = customMessages.find(x => x.pageName === 'checkout_default')) === null || _a === void 0 ? void 0 : _a.message;
|
|
354
354
|
const localePageEnum = this.getCurrentLocalePageEnum();
|
|
355
355
|
const filteredMessages = customMessages.filter(x => x.pageName === localePageEnum);
|
|
356
356
|
const renderLogo = () => (h("div", { class: "zonos--logo" }, logoUrl && (h("img", { alt: `${zonosStore.organizationName} logo`, src: logoUrl, width: 100 }))));
|
|
357
357
|
const renderTopHeader = () => (h("zonos-v-stack", null, renderLogo(), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message }))), h("div", null, h("zonos-button", { class: "zonos--back-button", icon: h("zonos-icon", { content: LeftArrow }), noBackground: true, noPaddingLeft: true, noPaddingRight: true, onClick: () => this.handleBackClick(), theme: leftSideTheme }, translate('Back')))));
|
|
358
358
|
const renderFooter = () => hasFooter && (h("div", { class: "zonos--footer", "data-theme": rightSideTheme }, h("zonos-text", { type: "hintText" }, translate('Powered by')), h("zonos-logo", { theme: rightSideTheme, width: "100px" })));
|
|
359
359
|
const renderContent = () => {
|
|
360
|
-
var _a;
|
|
361
|
-
const submitBtnType = this.isMobile ? 'primary' : undefined;
|
|
362
|
-
const reviewElementSize = (_a = this.zonosReviewRef) === null || _a === void 0 ? void 0 : _a.scrollHeight;
|
|
363
360
|
return (h("div", { class: 'zonos--content', style: {
|
|
364
361
|
'--border-radius': getBorderRadius(style),
|
|
365
362
|
} }, cartStore.step !== 'finish' && cartStore.step !== 'error' && (h(Fragment, null, h("div", { class: "zonos--left", "data-theme": leftSideTheme, style: {
|
|
366
363
|
'--primary-color': !this.isMobile ? colorPrimary : '',
|
|
367
|
-
} }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor
|
|
368
|
-
// only collapse on mobile
|
|
369
|
-
collapsed: this.collapseReviewMobile && this.isMobile }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
|
|
364
|
+
} }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isMobile && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
|
|
370
365
|
// do nothing if it's not mobile
|
|
371
366
|
if (!this.isMobile) {
|
|
372
367
|
return;
|
|
373
368
|
}
|
|
374
|
-
this.collapseReviewMobile =
|
|
375
|
-
|
|
376
|
-
|
|
369
|
+
this.collapseReviewMobile = !this.collapseReviewMobile;
|
|
370
|
+
} }), h("zonos-collapse", {
|
|
371
|
+
// only collapse on mobile
|
|
372
|
+
collapsed: this.collapseReviewMobile && this.isMobile
|
|
373
|
+
}, h("zonos-cart-items", null))), h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))), !this.isMobile && renderFooter()), this.isMobile && renderFooter())), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
|
|
377
374
|
? Object.assign(Object.assign({}, cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride })))));
|
|
378
375
|
};
|
|
379
376
|
return (h(Host, { class: classes([
|
|
@@ -63,9 +63,13 @@
|
|
|
63
63
|
background: #d6d6d6;
|
|
64
64
|
}
|
|
65
65
|
:host .zonos--group-btn {
|
|
66
|
+
position: sticky;
|
|
66
67
|
display: flex;
|
|
67
68
|
justify-content: center;
|
|
69
|
+
bottom: 0;
|
|
70
|
+
margin-top: var(--amino-space-12);
|
|
71
|
+
background: var(--primary-color, var(--amino-gray-0));
|
|
68
72
|
}
|
|
69
73
|
:host .zonos--group-btn zonos-button {
|
|
70
|
-
width:
|
|
74
|
+
width: 100%;
|
|
71
75
|
}
|
|
@@ -31,9 +31,9 @@ export class ZonosCustomerInfo {
|
|
|
31
31
|
this.disabled =
|
|
32
32
|
!((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) ||
|
|
33
33
|
!((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.complete);
|
|
34
|
-
return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), h("zonos-link-authentication", { titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" })
|
|
34
|
+
return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), h("zonos-link-authentication", { titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
|
|
35
35
|
// use primary type when on mobile mode
|
|
36
|
-
variant: this.submitBtnType }, translate('Continue to shipping')))));
|
|
36
|
+
variant: this.submitBtnType }, translate('Continue to shipping'))))));
|
|
37
37
|
}
|
|
38
38
|
static get is() { return "zonos-customer-info"; }
|
|
39
39
|
static get encapsulation() { return "scoped"; }
|
|
@@ -31,6 +31,12 @@
|
|
|
31
31
|
-webkit-font-smoothing: antialiased;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
+
:host {
|
|
35
|
+
position: sticky;
|
|
36
|
+
top: 0;
|
|
37
|
+
background-color: var(--amino-gray-0);
|
|
38
|
+
z-index: 1;
|
|
39
|
+
}
|
|
34
40
|
:host .zonos--total-pay {
|
|
35
41
|
margin: var(--amino-space-16) 0 var(--amino-space-32);
|
|
36
42
|
}
|
|
@@ -42,6 +48,7 @@
|
|
|
42
48
|
justify-content: space-between;
|
|
43
49
|
padding: var(--amino-space-4) 0;
|
|
44
50
|
margin-bottom: var(--amino-space-8);
|
|
51
|
+
background-color: transparent;
|
|
45
52
|
}
|
|
46
53
|
:host(.mobile) .zonos--title {
|
|
47
54
|
display: flex;
|
package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.css
CHANGED
|
@@ -66,11 +66,15 @@
|
|
|
66
66
|
background: #d6d6d6;
|
|
67
67
|
}
|
|
68
68
|
:host .zonos--group-btn {
|
|
69
|
+
position: sticky;
|
|
69
70
|
display: flex;
|
|
70
71
|
justify-content: center;
|
|
72
|
+
bottom: 0;
|
|
73
|
+
margin-top: var(--amino-space-12);
|
|
74
|
+
background: var(--primary-color, var(--amino-gray-0));
|
|
71
75
|
}
|
|
72
76
|
:host .zonos--group-btn zonos-button {
|
|
73
|
-
width:
|
|
77
|
+
width: 100%;
|
|
74
78
|
}
|
|
75
79
|
:host zonos-banner {
|
|
76
80
|
margin-top: var(--amino-space-24);
|
|
@@ -63,9 +63,9 @@ export class ZonosShipping {
|
|
|
63
63
|
value: item.id,
|
|
64
64
|
};
|
|
65
65
|
});
|
|
66
|
-
return (h(Host, { class: "zonos--shipping zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) }))
|
|
66
|
+
return (h(Host, { class: "zonos--shipping zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
|
|
67
67
|
// use primary type when on mobile mode
|
|
68
|
-
variant: this.submitBtnType }, translate('Go to payment'))));
|
|
68
|
+
variant: this.submitBtnType }, translate('Go to payment'))))));
|
|
69
69
|
}
|
|
70
70
|
static get is() { return "zonos-shipping"; }
|
|
71
71
|
static get encapsulation() { return "scoped"; }
|
|
@@ -83,10 +83,10 @@
|
|
|
83
83
|
}
|
|
84
84
|
:host button[disabled] {
|
|
85
85
|
cursor: not-allowed;
|
|
86
|
-
background-color: var(--amino-gray-200);
|
|
86
|
+
background-color: var(--background-color, var(--amino-gray-200));
|
|
87
87
|
}
|
|
88
88
|
:host button[disabled] .zonos--spinner-wrapper {
|
|
89
|
-
background-color: var(--amino-gray-200);
|
|
89
|
+
background-color: var(--background-color, var(--amino-gray-200));
|
|
90
90
|
}
|
|
91
91
|
:host button:active {
|
|
92
92
|
transform: scale(0.99);
|
|
@@ -46,35 +46,39 @@ export class ZonosButton {
|
|
|
46
46
|
}
|
|
47
47
|
render() {
|
|
48
48
|
const disabled = this.loading || this.isDisabled;
|
|
49
|
+
/**
|
|
50
|
+
* If the parent component pass in the variant prop with `undefined` value, it would not re-assign the `undefined` value with the default value.
|
|
51
|
+
* So need to re-assign the variant prop with the default value if the value is `undefined` here.
|
|
52
|
+
*/
|
|
53
|
+
const variant = this.variant || 'standard';
|
|
49
54
|
const color = this.color && isColorVariable(this.color)
|
|
50
55
|
? `var(--amino-${this.color})`
|
|
51
56
|
: this.color;
|
|
52
57
|
// use override background if it exists, otherwise use color from setting
|
|
53
58
|
const overrideBackground = this.backgroundColor || zonosStore.appearance.colorSecondary;
|
|
54
59
|
// only set theme for button to change text color if variant is standard and override background is set
|
|
55
|
-
const buttonTheme =
|
|
56
|
-
? getButtonTheme(overrideBackground)
|
|
57
|
-
: undefined;
|
|
60
|
+
const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
|
|
58
61
|
const borderStyle = getBorderRadius(this.borderStyle);
|
|
59
|
-
|
|
62
|
+
const spinnerColor = buttonTheme === 'LIGHT' ? 'white' : 'black';
|
|
63
|
+
return (h(Host, { key: 'e1ad2eb31ad09c8671debc2e32d83af21085b912', class: classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
|
|
60
64
|
'--background-color': overrideBackground,
|
|
61
65
|
'--border-radius': borderStyle,
|
|
62
66
|
'--color': color,
|
|
63
67
|
'--font-family': zonosStoreFontFamily(),
|
|
64
|
-
} }, h("button", { key: '
|
|
68
|
+
} }, h("button", { key: '0a087bf98251899711a71d69a89473479fc78c4f', class: classes([
|
|
65
69
|
this.hasIcon && 'has-icon',
|
|
66
70
|
this.hasContent && 'has-content',
|
|
67
71
|
this.noBackground && 'no-background',
|
|
68
72
|
this.noPaddingLeft && 'no-padding-left',
|
|
69
73
|
this.noPaddingRight && 'no-padding-right',
|
|
70
74
|
this.iconRight && 'icon-right',
|
|
71
|
-
|
|
75
|
+
variant,
|
|
72
76
|
this.size,
|
|
73
77
|
// only override background if variant is set to standard
|
|
74
|
-
|
|
75
|
-
|
|
78
|
+
overrideBackground &&
|
|
79
|
+
variant === 'standard' &&
|
|
76
80
|
'override-background',
|
|
77
|
-
]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16 }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '
|
|
81
|
+
]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { color: spinnerColor, size: 16 }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'd80e58786f16bff52592a759679290a3a5ed0954', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
|
|
78
82
|
}
|
|
79
83
|
static get is() { return "zonos-button"; }
|
|
80
84
|
static get encapsulation() { return "shadow"; }
|
|
@@ -8,7 +8,7 @@ export class ZonosCustomMessage {
|
|
|
8
8
|
render() {
|
|
9
9
|
return (h(Host, { key: 'eb6b2a907ef77d5e2da0d9cb1bee4b77f814e5cb', class: "zonos--elements", style: {
|
|
10
10
|
'--font-family': zonosStoreFontFamily(),
|
|
11
|
-
} }, h("zonos-card", {
|
|
11
|
+
} }, this.message && (h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: this.icon }), h("zonos-text", null, this.message))))));
|
|
12
12
|
}
|
|
13
13
|
static get is() { return "zonos-custom-message"; }
|
|
14
14
|
static get encapsulation() { return "shadow"; }
|
|
@@ -48,7 +48,7 @@ export class ZonosDialog {
|
|
|
48
48
|
document.body.style.overflow = 'auto';
|
|
49
49
|
}
|
|
50
50
|
const borderStyle = getBorderRadius(this.borderStyle);
|
|
51
|
-
return (h(Host, { key: '
|
|
51
|
+
return (h(Host, { key: 'deb6bd5cdd044f1ca4e2b04484b0b54a40574b4f', class: classes([
|
|
52
52
|
'zonos--elements',
|
|
53
53
|
this.open && 'open',
|
|
54
54
|
this.isLoading && 'is-loading',
|
|
@@ -59,10 +59,10 @@ export class ZonosDialog {
|
|
|
59
59
|
'--font-family': zonosStoreFontFamily(),
|
|
60
60
|
'--height': this.height || 'initial',
|
|
61
61
|
'--width': this.width,
|
|
62
|
-
} }, h("div", { key: '
|
|
62
|
+
} }, h("div", { key: '10ed0a3736547ef162a2b439bb81ddffc0bc920d', class: "zonos--backdrop" }), h("div", { key: '895ed2094a0b0863ba13fdbc46a8d9071f1330b8', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: '8d83b4cc34a360f7e943776869fc5388576fb0f7', class: "zonos--dialog" }, this.isLoading && (h("div", { class: "zonos--loading" }, h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { class: "zonos--header" }, this.headerText && (h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: '4c04cafeda45b8e4b6abc622e140c71507449f57', class: classes([
|
|
63
63
|
'zonos--body',
|
|
64
64
|
this.noBodyPadding && 'zonos--no-body-padding',
|
|
65
|
-
]) }, h("slot", { key: '
|
|
65
|
+
]) }, h("slot", { key: '524448bf4beb9024750c94d280c874f032de7902' })), this.footerRightAction && (h("div", { class: "zonos--footer" }, h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
|
|
66
66
|
}
|
|
67
67
|
static get is() { return "zonos-dialog"; }
|
|
68
68
|
static get encapsulation() { return "shadow"; }
|