@zonos/elements 1.3.143 → 1.3.145

package/dist/collection/components/common/zonos-stripe-input/zonos-stripe-input.js

@@ -15,18 +15,23 @@ export class ZonosStripeInput {
         this.isDisabled = false;
         this.isError = false;
         this.inputPlaceholder = '';
-        this.value = this.inputValue;
+        this.value = '';
+        this.internalValue = this.inputValue;
     }
     onInputValueChange(newValue) {
-        this.value = newValue;
+        this.internalValue = newValue;
         this.inputChange.emit(newValue);
+        this.value = newValue;
+    }
+    onValueChange(newValue) {
+        this.internalValue = newValue;
     }
     render() {
         const primaryColor = this.overridePrimaryColor || zonosStore.appearance.colorPrimary;
         const secondaryColor = this.overrideSecondaryColor || zonosStore.appearance.colorSecondary;
         const isDark = primaryColor && isDarkColor(primaryColor);
         const fontSize = zonosStore.appearance.fontSizeInputValue || 16;
-        return (h(Host, { key: 'cc1e63bf6a09749b4310fd55bb6f728879e3c160', class: classes([
+        return (h(Host, { key: 'd78f2aee99ac4e6d95cf1628e058e6d3bb70e309', class: classes([
                 'zonos--input zonos--elements',
                 isDark && 'dark',
                 this.isError && 'has-error',
@@ -35,18 +40,20 @@ export class ZonosStripeInput {
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--font-size': `${fontSize}px`,
                 '--zonos--primary-color': secondaryColor,
-            } }, h("div", { key: '62294a559ba63fbf80cedbe16e3dca97540c8d4a', class: classes([
+            } }, h("div", { key: 'a3e7f765b0081a564c5955e387ff4b521a28d1a5', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: '7e7d2a9d16b34240945119356f1b801ff0e0d4ae', class: classes([
+            ]) }, h("input", { key: '999a54381e24e5da6f2a5fd9cde56c4fa87d37b1', class: classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
-                this.value && 'has-content',
+                this.internalValue && 'has-content',
                 this.isError && 'has-error',
             ]), disabled: this.isDisabled, id: "zonos--input", onInput: e => {
                 const input = e.target;
                 this.inputChange.emit(input.value);
-            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("div", { key: 'e8340ce1583c0ce2d3659631a3400c2b72c81258', class: "zonos--floated-label" }, h("label", { key: 'daa8f068ebabfa9d77ed85d0e8070b45f7803f92', htmlFor: "zonos--input" }, this.inputLabel)))));
+                this.el.inputValue = input.value;
+                this.el.dispatchEvent(new Event('change'));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.internalValue }), h("div", { key: '251f9bfc2399e47f2a4dad359d2511400ec10b41', class: "zonos--floated-label" }, h("label", { key: 'eb23eea3a74af98c7439294621a4caf282fdbbb1', htmlFor: "zonos--input" }, this.inputLabel)))));
     }
     static get is() { return "zonos-stripe-input"; }
     static get encapsulation() { return "shadow"; }
@@ -76,6 +83,8 @@ export class ZonosStripeInput {
                     "tags": [],
                     "text": "Value of the stripeInput"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "input-value",
                 "reflect": false,
                 "defaultValue": "''"
@@ -94,6 +103,8 @@ export class ZonosStripeInput {
                     "tags": [],
                     "text": "Input label"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "input-label",
                 "reflect": false
             },
@@ -111,6 +122,8 @@ export class ZonosStripeInput {
                     "tags": [],
                     "text": "Primary color to override primary color from appearance primary color in setting."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "override-primary-color",
                 "reflect": false
             },
@@ -128,6 +141,8 @@ export class ZonosStripeInput {
                     "tags": [],
                     "text": "Secondary color to override secondary color from appearance secondary color in setting"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "override-secondary-color",
                 "reflect": false
             },
@@ -145,6 +160,8 @@ export class ZonosStripeInput {
                     "tags": [],
                     "text": "Disables the input"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -163,6 +180,8 @@ export class ZonosStripeInput {
                     "tags": [],
                     "text": "Error state of the input"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-error",
                 "reflect": false,
                 "defaultValue": "false"
@@ -181,15 +200,37 @@ export class ZonosStripeInput {
                     "tags": [],
                     "text": "Placeholder for the input"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "input-placeholder",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the input."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }
     static get states() {
         return {
-            "value": {}
+            "internalValue": {}
         };
     }
     static get events() {
@@ -215,6 +256,9 @@ export class ZonosStripeInput {
         return [{
                 "propName": "inputValue",
                 "methodName": "onInputValueChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
             }];
     }
 }

package/dist/collection/components/common/zonos-text/zonos-text.js

@@ -105,6 +105,8 @@ export class ZonosText {
                     "tags": [],
                     "text": "The icon element to display"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "text-color",
                 "reflect": false,
                 "defaultValue": "'gray-1000'"
@@ -129,6 +131,8 @@ export class ZonosText {
                     "tags": [],
                     "text": "The size of the text"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false
             },
@@ -152,6 +156,8 @@ export class ZonosText {
                     "tags": [],
                     "text": "Type of the text to display"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'body'"
@@ -176,6 +182,8 @@ export class ZonosText {
                     "tags": [],
                     "text": "The weight of the text"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "weight",
                 "reflect": false
             }

package/dist/collection/components/common/zonos-toggle/zonos-toggle.js

@@ -50,6 +50,8 @@ export class ZonosToggle {
                     "tags": [],
                     "text": "Options for the toggle"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[]"
             },
             "value": {
@@ -66,6 +68,8 @@ export class ZonosToggle {
                     "tags": [],
                     "text": "The selected option"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             }

package/dist/collection/components/common/zonos-tooltip/zonos-tooltip.js

@@ -40,6 +40,8 @@ export class ZonosTooltip {
                     "tags": [],
                     "text": "The title of the tooltip"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
@@ -58,6 +60,8 @@ export class ZonosTooltip {
                     "tags": [],
                     "text": "The subtitle of the tooltip"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "subtitle",
                 "reflect": false,
                 "defaultValue": "''"

package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.js

@@ -48,6 +48,8 @@ export class VStack {
                         }],
                     "text": "The spacing between elements in the stack"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "spacing",
                 "reflect": false,
                 "defaultValue": "24"

package/dist/collection/components/common/zonos-virtual-scroll/zonos-virtual-scroll.js

@@ -104,7 +104,9 @@ export class ZonosVirtualScroll {
                 "docs": {
                     "tags": [],
                     "text": "Render item"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "itemWidth": {
                 "type": "number",
@@ -120,6 +122,8 @@ export class ZonosVirtualScroll {
                     "tags": [],
                     "text": "Width of each item"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "item-width",
                 "reflect": false
             },
@@ -137,6 +141,8 @@ export class ZonosVirtualScroll {
                     "tags": [],
                     "text": "Height that is used as a fallback if height is not provided"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "fallback-item-height",
                 "reflect": false
             },
@@ -153,7 +159,9 @@ export class ZonosVirtualScroll {
                 "docs": {
                     "tags": [],
                     "text": "Heights list of each item"
-                }
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }

package/dist/collection/components/component-template/zonos-component/zonos-component.js

@@ -40,6 +40,8 @@ export class ZonosComponent {
                     "tags": [],
                     "text": "The first name"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "first",
                 "reflect": false,
                 "defaultValue": "''"
@@ -58,6 +60,8 @@ export class ZonosComponent {
                     "tags": [],
                     "text": "The middle name"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "middle",
                 "reflect": false,
                 "defaultValue": "''"
@@ -76,6 +80,8 @@ export class ZonosComponent {
                     "tags": [],
                     "text": "The last name"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "last",
                 "reflect": false,
                 "defaultValue": "''"

package/dist/collection/components/hello/zonos-hello/zonos-hello.js

@@ -423,6 +423,8 @@ export class ZonosHello {
                         }],
                     "text": "Force mobile styling instead of media query and use the passed location value"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "mobile-location-override",
                 "reflect": false
             },
@@ -443,6 +445,8 @@ export class ZonosHello {
                         }],
                     "text": "Force left animation instead of detecting which side has more space"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "animate-from-left-override",
                 "reflect": false
             },
@@ -469,7 +473,9 @@ export class ZonosHello {
                 "docs": {
                     "tags": [],
                     "text": "Override the appearance settings"
-                }
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.js

@@ -59,7 +59,9 @@ export class ZonosHelloDialogFooter {
                 "docs": {
                     "tags": [],
                     "text": "Appearance settings"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "setShowCountrySelect": {
                 "type": "unknown",
@@ -78,6 +80,8 @@ export class ZonosHelloDialogFooter {
                         }],
                     "text": "Whether or not the country select dialog is open"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "() => {}"
             },
             "setShowLanguageSelect": {
@@ -97,6 +101,8 @@ export class ZonosHelloDialogFooter {
                         }],
                     "text": "Whether or not the language select dialog is open"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "() => {}"
             }
         };

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.js

@@ -243,7 +243,7 @@ export class ZonosHelloDialog {
             var _a;
             return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
         }), h("zonos-card", { key: 'fbd14cc231da833e4930a52483f40c32b1e24e2d', spacing: "12px" }, h("zonos-v-stack", { key: '75da2be8ba28555258e8ff50e78c5b1ffa2403ac', spacing: 12 }, hasInclusivePrices ? (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: InclusivePricingIcon }), h("zonos-text", null, inclusivePriceMessage))) : (h(Fragment, null, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), additionalInformation === null || additionalInformation === void 0 ? void 0 :
-            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: 'd64c5d36959ba4e9c7fc5e0b6bad47f70bc3ffd1', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: 'e06c3c075fee8b77be0bdc69f9f51d918705e819' }, h("zonos-country-select", { key: 'ee0dd837b537bf500e89f50a8bbcfee75cbb0dfd', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '10fadfe2b095dfb3b1b25d6a5d6fea03cb6d8776' }, h("zonos-language-select", { key: 'aa25dea53fce8460953f8abf3889d51da3023034', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '6c15ad7d36590e1b93007e3786c0e0db191b4b8d', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: 'fae16c45b01ed1345d439c77267d1c80ce908598' }, h("zonos-country-select", { key: 'a6abe0661ee91ad227877ebbb5ee21253b110ea0', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '7550bec8646301a4bd5afb94b79b18b62698891b' }, h("zonos-language-select", { key: 'da2e8007ebf7e33723baaf3bdd2818334090c81c', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -274,6 +274,8 @@ export class ZonosHelloDialog {
                     "tags": [],
                     "text": "Whether or not the dialog is open"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-open",
                 "reflect": false,
                 "defaultValue": "false"
@@ -295,6 +297,8 @@ export class ZonosHelloDialog {
                         }],
                     "text": "The function to set the open state"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "() => {}"
             },
             "mobileLocationOverride": {
@@ -320,6 +324,8 @@ export class ZonosHelloDialog {
                         }],
                     "text": "Force mobile styling instead of media query and use the passed location value"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "mobile-location-override",
                 "reflect": false
             },
@@ -340,6 +346,8 @@ export class ZonosHelloDialog {
                         }],
                     "text": "Force left animation instead of detecting which side has more space"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "animate-from-left-override",
                 "reflect": false
             },
@@ -366,7 +374,9 @@ export class ZonosHelloDialog {
                 "docs": {
                     "tags": [],
                     "text": "Override the appearance settings"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "restrictedItems": {
                 "type": "unknown",
@@ -391,6 +401,8 @@ export class ZonosHelloDialog {
                         }],
                     "text": "Item restrictions array if any"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[]"
             }
         };

package/dist/collection/components/main/zonos-controller.js

@@ -92,17 +92,38 @@ export class ZonosController {
             return oldReplaceState.apply(this, arguments);
         };
     }
+    injectCustomHTML(htmlString) {
+        if (!htmlString) {
+            return;
+        }
+        // Skip injecting custom HTML for legacy checkout
+        if (!window.Zonos.isLegacyCheckout) {
+            log('=== Skip injecting custom HTML for hosted checkout', 'info');
+            return;
+        }
+        log('=== Injecting custom HTML for hosted checkout');
+        const template = document.createElement('template');
+        template.innerHTML = htmlString;
+        const scripts = template.content.querySelectorAll('script');
+        scripts.forEach(script => {
+            const scriptToInject = document.createElement('script');
+            scriptToInject.textContent = script.innerHTML;
+            document.body.appendChild(scriptToInject);
+        });
+    }
     async componentWillLoad() {
         this.initHistoryListener();
         zonosStore.zonosApiKey = this.zonosApiKey;
         // running with scope async function to avoid blocking the main thread
         (async () => {
-            var _a, _b;
+            var _a, _b, _c;
             const { errors, json, zonosMode } = await getZonosSettings();
             if (((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.type.toString()) === '403') {
                 log('Failed to load zonos settings. This domain may not have access', 'warn');
                 return;
             }
+            const customHTML = ((_b = json === null || json === void 0 ? void 0 : json.checkoutSettings) === null || _b === void 0 ? void 0 : _b.customHTML) || '';
+            this.injectCustomHTML(customHTML);
             // init zonos notification
             this.initZonosNotification();
             const getLogoUrl = () => {
@@ -137,7 +158,7 @@ export class ZonosController {
             // init localization store
             await initLocalizationStore();
             // checkout init
-            const publishableKey = ((_b = json === null || json === void 0 ? void 0 : json.checkoutSettings) === null || _b === void 0 ? void 0 : _b.externalServiceTokens.find(item => item.type === 'STRIPE_PUBLISHABLE_TOKEN')) || null;
+            const publishableKey = ((_c = json === null || json === void 0 ? void 0 : json.checkoutSettings) === null || _c === void 0 ? void 0 : _c.externalServiceTokens.find(item => item.type === 'STRIPE_PUBLISHABLE_TOKEN')) || null;
             if (!publishableKey || !this.stripeInitEvent) {
                 log('Checkout failed to load -- missing publishable key', 'warn');
                 return;
@@ -174,7 +195,7 @@ export class ZonosController {
      */
     async reset() {
         cartStore.checkoutSessionId = null;
-        stripeStore.clientSecret = null;
+        stripeStore.clientSecret = '';
     }
     /**
      * Override the setting
@@ -206,7 +227,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '816d389c90fab1125a041db4b125557afa5e9372', class: "zonos--elements" });
+        return h(Host, { key: 'f59eff8c088135e8fc791d03f668e787ec0d0912', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }
@@ -241,7 +262,9 @@ export class ZonosController {
                 "docs": {
                     "tags": [],
                     "text": "The zonos config object"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "zonosApiKey": {
                 "type": "string",
@@ -257,6 +280,8 @@ export class ZonosController {
                     "tags": [],
                     "text": "The zonos api key"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "zonos-api-key",
                 "reflect": false
             }

package/dist/collection/components/store/checkout/cart.js

@@ -2,6 +2,7 @@ import { createStore } from "@stencil/store";
 import { stripeStore, stripeStoreInitCheckoutSession, stripeStoreReset, stripeStoreUpdateCheckoutSession, } from "./stripe";
 import { localizationStore } from "../hello/localization";
 import { translate } from "../translationStore";
+import { getIsStagingMode } from "../../utils/checkout/getIsStagingMode";
 import { log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
 const { onChange, reset, state: cartStore, } = createStore(() => ({
@@ -22,9 +23,11 @@ const { onChange, reset, state: cartStore, } = createStore(() => ({
     inventoryCheckErrorMessage: null,
     isSelectedShippingAboveDeminimis: false,
     isSelectedShippingGuarantee: false,
+    isStagingMode: getIsStagingMode(),
     items: [],
     landedCostData: null,
     landedCostMethod: 'DDP',
+    partiesData: [],
     promoCode: sessionStorage.getItem('promoCode') || '',
     // When user clicked applied button, save promocode into session storage for later use. So if session has promocode, applied button is clicked
     promoCodeApplied: !!sessionStorage.getItem('promoCode'),