@zonos/elements 1.3.200 → 1.3.202

package/dist/collection/components/common/zonos-rest-state/zonos-rest-state.js

@@ -14,11 +14,11 @@ export class ZonosRestState {
     }
     render() {
         const imageUrl = this.getImageRestState();
-        return (h(Host, { key: 'a06221e04e00bf733a37d00fdff2643714208eca', class: classes(['zonos--elements zonos--restState']), style: {
+        return (h(Host, { key: '754bdcff113a9ec5351d1053ddaea5e542111bbc', class: classes(['zonos--elements zonos--restState']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'c889f042cb289876f3e6e002a5527a239ad69791', class: "zonos--restState-image" }, h("img", { key: '21b30e32ac86bd0f5e9f9dded3bcd4f3295c9637', alt: this.restStateType, onError: () => {
+            } }, h("div", { key: '3037acffd2d7da9bac11ada7cd4e06e2ae976f72', class: "zonos--restState-image" }, h("img", { key: 'd462d07f452caaaf87af20e1b2aad6ac45b43107', alt: this.restStateType, onError: () => {
                 this.isErrorImageLoad = true;
-            }, src: imageUrl })), h("div", { key: 'a28cfe4511fb4aa0f0c79b2e6cfaa78b6cbdb2a8', class: "content" }, h("zonos-text", { key: '20aa2a10a7617c96f99a6f653a5c1a8a0de85dbe', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '595b823c2e9c3270f510388b4ccbf544581453a9', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: '56a2514a6d170849ed87d1ab680e582a0f6e4b24', class: "action" }, h("slot", { key: 'b0e8f4dd2ff05929f4ffe7461e5dbe9aa4b5bfc5' }))));
+            }, src: imageUrl })), h("div", { key: '9acf78ef8358ad75df01bbbb1ed52b680f896255', class: "content" }, h("zonos-text", { key: '8310474f006a1fc1dcf96bac09c770572b20590a', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '623dc98d57eaae5fb1059c658391300aa41a13fb', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: 'f69613147698a147447a0aac330ad1c67739fed0', class: "action" }, h("slot", { key: '823ff6075ecac4598299c29ab2e44a6d5fb6a5d8' }))));
     }
     static get is() { return "zonos-rest-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-select-dialog-header/zonos-select-dialog-header.js

@@ -8,9 +8,9 @@ export class ZonosSelectDialogHeader {
         this.label = '';
     }
     render() {
-        return (h(Host, { key: '15035421483b079dde47eeb3ddcb4dcc6edffae4', class: "zonos--elements", style: {
+        return (h(Host, { key: '184508c2af24eedda1e4a59db89f787cd71a345f', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: 'bf1bbdb1bb8a62841616893d8e9005002772adc4', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'a2593795816ceb851489c386231a1b90e6dd6261', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'e91d4a54ac0deb073c30272c5e9626168fea52b7', type: "boldLabel" }, this.label), h("zonos-button", { key: 'e8fdf75686b33e9958f64925ddf95fb5c89d74bb', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: 'ede6d09a4f6900419bf16df0ca8a2b79882bf266' }))));
+            } }, h("zonos-v-stack", { key: '28bd290a2307c13e93036ee988f71bba87e76b19', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '49c2a1c0c44d9950907f47d90c9a34a83e5158da', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '244ef10f5ee38d4a056ad6c076185d42ca3cd174', type: "boldLabel" }, this.label), h("zonos-button", { key: 'dab99b609f1a3250f73e2f25b837c9300a964090', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: 'b2fdb25cdc7c6382ec8d171aa14f1f4b7f33a4e8' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,7 +50,7 @@ export class ZonosStripeInput {
         const secondaryColor = this.overrideSecondaryColor || zonosStore.appearance.colorSecondary;
         const isDark = primaryColor && isDarkColor(primaryColor);
         const fontSize = zonosStore.appearance.fontSizeInputValue || 16;
-        return (h(Host, { key: 'e6fbf3c60f08e70e9523f4d9fd38c757512af919', class: classes([
+        return (h(Host, { key: 'ce50e8c3f41abc7f7605a4423dc21c5fce755c9a', class: classes([
                 'zonos--input zonos--elements',
                 isDark && 'dark',
                 (this.isError || !!this.error) && 'has-error',
@@ -59,10 +59,10 @@ export class ZonosStripeInput {
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--font-size': `${fontSize}px`,
                 '--zonos--primary-color': secondaryColor,
-            } }, h("div", { key: '0c10d623ec27ac18a321e2675e18cbb98224fe54', class: classes([
+            } }, h("div", { key: '8953c4cf31d9de771ef8f6351476d5db9de5655a', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", Object.assign({ key: '8eb4653690896a81ee5436303b8555c07038a579' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
+            ]) }, h("input", Object.assign({ key: 'c66c0e5787191ab6bb804755da7477e222b3ff40' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.internalValue && 'has-content',
@@ -72,7 +72,7 @@ export class ZonosStripeInput {
                 this.inputChange.emit(input.value);
                 this.el.inputValue = input.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), h("div", { key: '7388dd7c3ca24bd1a40246215fa9b51c76ab519f', class: "zonos--floated-label" }, h("label", { key: 'c975933f597d145c8b9edbeb9ac417603922de9a', htmlFor: this.inputId }, this.inputLabel))), this.error && (h("zonos-text", { key: '5fc0639cba176f02152bf689caec623c821abdeb', textColor: "red-600", type: "caption" }, this.error))));
+            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), h("div", { key: '17c7fa7ef87bf765203cadb3ff24ead25ac45332', class: "zonos--floated-label" }, h("label", { key: '4d7c8e503bd0dc0081b13a36c2a1c5f976ee93e3', htmlFor: this.inputId }, this.inputLabel))), this.error && (h("zonos-text", { key: '1352d1d09b05a25ced56d31b16cf1f203b0eaaec', textColor: "red-600", type: "caption" }, this.error))));
     }
     static get is() { return "zonos-stripe-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -196,24 +196,24 @@ export class ZonosStripePhoneInput {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (h(Host, { key: 'c7ca4076eb70b166979d21074d068912af1496c5', class: classes([
+        return (h(Host, { key: '0d4501947787cbafe38acb60fb5ee7519b6d1c73', class: classes([
                 'zonos--phone-input zonos--elements',
                 isDark && 'dark',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: '5460d79c86d34daf94538f063274c45ae3be2239', class: classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: 'c3e0f9655a39a5bb3d838634754be2af60a24a10', class: classes([
                 'zonos--label-wrapper',
                 this.disabled && 'disabled',
                 this.isFocused && 'focused',
                 hasContent && 'has-content',
                 this.error && 'has-error',
                 this.inputLabel && 'has-label',
-            ]) }, h("select", { key: '290d89088b9a800b31ed19cfe3de6831322a3f5a', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, h("select", { key: '1a58471117f6748d511498e016814bd907e8775f', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
             var _a;
             return (h("option", { key: option.countryCode, selected: option.countryCode === ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.countryCode), value: option.countryCode }, option.displayName, " (+", option.phoneCode, ")"));
-        })), h("div", { key: 'b0271d3453869ed79a36d62f5f6bacb22a509b46', class: "zonos--input-group" }, h("div", { key: '49486c915fa2f65878a6f8ab73c48997e4ba1461', class: "zonos--select-wrapper" }, h("div", { key: '63412e8077e062efef5f42c3a77e583ade435b53', class: "zonos--country-select" }, h("div", { key: '5c073598dfeaa0c8de68f07b1a7789f4a56a24c8', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '8a32922d75343005fde7446736746cd531ff63f8', class: "zonos--country-select-selected" }, h("div", { key: '859cdbc4c1879c38f0c848ff42b38bc5492d3e96', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: '9167a7c586e2d693bfdcad7773df60a324600be7', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: 'b39dcadb22202d866fc8e1217bbe2e17704e2300', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: '4b0a4ce8c94e6e3125cfde55542b38efb6a8a787', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '25322152ca9550a8b2e667f8f993c38a972aa9ce', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))))), h("div", { key: 'c6a93ba0656e09a154c3d91327f3573e0288234b', class: classes([
+        })), h("div", { key: '9c785521e095aae0cfc8af3ea90e4924c97202ac', class: "zonos--input-group" }, h("div", { key: 'b7fdd9db255ce33f3b6d3a982162c8286963324c', class: "zonos--select-wrapper" }, h("div", { key: '5d378436580df53793b1508af5e34bd43ba33ddf', class: "zonos--country-select" }, h("div", { key: '94628459db88e355b1c62b74cfcb48ec03022d4e', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '96b332ed9c62413887f96f38ce26cb05b81a3132', class: "zonos--country-select-selected" }, h("div", { key: 'b9e5bda55328f57e15afd349789233e3c28d2bf9', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: 'fc595df21c09553dc8ffb7fe79c3043831e65298', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: '6c792c383acf3ccac02be6b954a7eb18bcdda817', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: '970b9f6e18152e04375a248669fd7314088bcd2e', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '1da5919014eee0e34b60d1df08e83d44ad20d5c2', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))))), h("div", { key: '7f0c215ddfb59c8e3c4413e44941a477a8adc6d6', class: classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, h("input", Object.assign({ key: '49246ff464685feaa9414d1e7b36f55b82fff564' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (h("div", { key: '653d278b7ffc634bc7892d54c8fcab7b7626f80e', class: "zonos--floated-label" }, h("label", { key: 'c637ddca7164396d57e8a5eaf98b0e523ee27258', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: 'dcc70c068fef73e804eba1f134673168a0bbaf90', textColor: "red-600" }, this.error))));
+            ]) }, h("input", Object.assign({ key: 'e3ce0b598baf78452eddaab38c80bb4f0c548a5a' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (h("div", { key: 'a108f2796571f9d8a4201d1906b2381b89d14bc2', class: "zonos--floated-label" }, h("label", { key: '50d308311270bbd8635bb7848495ee4aaa2a0cac', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: '27b0233f9241ce68348b2efd1c1b525d083363e5', textColor: "red-600" }, this.error))));
     }
     static get is() { return "zonos-stripe-phone-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -80,14 +80,14 @@ export class ZonosStripeSelect {
         const fontSize = zonosStore.appearance.fontSizeInputValue || 16;
         const hasContent = this.internalValue || this.selectPlaceholder;
         const showClearButton = this.isClearable && this.internalValue && !this.isDisabled;
-        return (h(Host, { key: 'f5b178d5cbd48e9aff8701764a1fde4de03a6569', class: classes([
+        return (h(Host, { key: '18d7ba03b9136af8614874b13b9ac3ce85f7c0d0', class: classes([
                 'zonos--select zonos--elements',
                 isDark && 'dark',
                 this.isError && 'has-error',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: 'd7b3b8148777aa61f15c1489f44871589aadf00f', class: classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: '88b8d885c11bc0776bd0c25b5f0a08f91cfb7c72', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("select", Object.assign({ key: '629f7437fa445634db0589f217acb59b59e558d3' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
+            ]) }, h("select", Object.assign({ key: 'd972a6a7b91bb51f2d5ed291a686d521c1bf82a3' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
                 'zonos--floated-select',
                 !!this.selectLabel && 'has-label',
                 hasContent && 'has-content',
@@ -97,9 +97,9 @@ export class ZonosStripeSelect {
                 this.selectChange.emit(select.value);
                 this.selectedValue = select.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, required: this.required }), h("option", { key: '9b50f769fc79f136b7b77916edd71acdcda199b7', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || translate('Select')), this.internalOptions.map(option => (h("option", { key: option.value, selected: this.internalValue === option.value ||
+            }, required: this.required }), h("option", { key: 'b67730b2c3e77ba60221320519f55e67d7d2b127', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || translate('Select')), this.internalOptions.map(option => (h("option", { key: option.value, selected: this.internalValue === option.value ||
                 // Sometimes google returns the label not the code for some countries
-                this.internalValue === option.label, value: option.value }, option.label)))), h("div", { key: '0ff44083dee7939d6f7bc2372990ccbef6066fed', class: "zonos--floated-label" }, h("label", { key: '8f9965fa3de61b705fa95e7ddc68013a3027464d', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '09aa1851295b86e30488ca69720d58d1246ad67c', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: '1db5be171f74849cedc3a8804bac23fdfa43aaa5', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: '2ca7e2da61eef16d6feb74c4d6a6198f1762ad16', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: 'c0050a27a619cb9b844282be841a320648f9d008', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: 'c0a3eb551533c4cb24f92ad6fd7a4b44cd24044c', textColor: "red-600" }, this.error))));
+                this.internalValue === option.label, value: option.value }, option.label)))), h("div", { key: '088c104006e983b5ec1680067af32c0479dde13b', class: "zonos--floated-label" }, h("label", { key: 'faf3bf337253d205265b181d65d8f8024ffd6124', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '7ce8d36b84b08df139877cd2e12a26b8157ce83b', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: 'b0a1af08afd9792ba4e7989361219c5cf7d5d8bc', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: '50ae86d5e9d9722b5546997f9fd52a997cac3add', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: '30034030f97f7ed6b3027cbc5220c73cde4bbbc2', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: 'cd02da8b1a1cb81581ac7285af84193000692eaa', textColor: "red-600" }, this.error))));
     }
     static get is() { return "zonos-stripe-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,9 +7,9 @@ export class ZonosToggle {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '8426e15a4596ecd6fc2cab945cdb2f0c4fe1ac79', class: classes(['zonos--elements zonos--toggle']), style: {
+        return (h(Host, { key: '9a526e8fee8e4c5af558442c82f7acbc634706c3', class: classes(['zonos--elements zonos--toggle']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'e26f354255febe40918b30100ed5d42410a30413', class: "wrapper" }, this.options.map(option => {
+            } }, h("div", { key: '97ca281e8e782c3b08231c6ba705325bbf16d402', class: "wrapper" }, this.options.map(option => {
             const selected = option.value === this.value;
             return (h("button", { class: classes(['zonos--option', selected && 'selected']), key: option.value, onClick: () => {
                     this.toggleChanged.emit(option.value);

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

@@ -7,10 +7,10 @@ export class ZonosTooltip {
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: 'fbd7f669ae886586c2512b00975fc5acf1e40eca', class: "zonos--elements" }, h("div", { key: '618d6ff79308540f5eeb3d8a23e7c520fb35a91a', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '303eaf31b4b3dc9fd35ed0db252be84274b7d46c' }), h("div", { key: '7429949912c8e3fb683ab4cbc4958d8fb6b2fd81', class: classes([
+        return (h(Host, { key: 'd984faacc8d79f2001c84fb69c30f3665dca44aa', class: "zonos--elements" }, h("div", { key: '327f9d077f2400f05ff3c4337b566c461a2d05cf', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '24315359176ca625f18a856d781624850d05de17' }), h("div", { key: '296041bbebddd0250c6d5d9649e6502571a08533', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '31704a564bb877fac16c1ab11a686e9ba72940ea', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '1e2cafbfaf769b30256c8d4609953961bcd10a06', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: '5a2828baf420acb666eb1f0029c8d0b9eadd55ce', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '1bd8bf5085edfdc3d42db03e460062bf744c174b', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
     static get is() { return "zonos-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,9 +7,9 @@ export class VStack {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: 'b591378d641a09bac2c4fab00c8c1977ae21a14c', style: {
+        return (h(Host, { key: '558218f6135d5fcc9f3649b76c568a9f514aa8e8', style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'c9f3b482ace4b36813fa5412dd497c0deea7e3c0', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '75cf9b483367945bc57279b76519205c8f0901eb' }))));
+            } }, h("div", { key: '86af63aa01214db20cc094ddcbfd05b3ee28f1ed', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '4786fb44cbf865a548c900b752f9b13709f1f935' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -56,12 +56,12 @@ export class ZonosVirtualScroll {
                 } }, this.renderItem(i)));
             accHeight += itemHeight;
         }
-        return (h(Host, { key: '294ce5251b10f4779b7113d16a98845153f50c72' }, h("div", { key: '4a8b0032df979568ebf1f20356cb0aa13e2a742a',
+        return (h(Host, { key: '6ccfd807912b51223f249543b66552e945859a1a' }, h("div", { key: '21f05d8e9082b54f484badc6e52c3006068df401',
             // to capture scroll action
             class: "scroller", style: {
                 height: `${this.totalHeight}px`,
                 width: `${W}px`,
-            } }), h("div", { key: 'c162402da38f659edf5d8de18229a7a6eeed89db',
+            } }), h("div", { key: '3935dc009877c002047f41de3caeeb16e2d7c08d',
             // to display items
             class: "item-container", ref: el => (this.container = el), style: {
                 height: `${this.totalHeight}px`,

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

@@ -10,7 +10,7 @@ export class ZonosComponent {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: 'c35d0331d2d3724792e82b1d0a22d096fbbcddb7' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '725c727348687e663e6225837a2a135d177b6d4a' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,9 +18,9 @@ export class ZonosHelloDialogFooter {
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
         // Only use gray-0 (white) when the background color is dark (apply inverted color if the element is using dark theme variable)
         const mainColor = primaryColor && isDarkColor(primaryColor) ? 'white' : 'black';
-        return (h(Host, { key: 'c346c1f0dff9e6f5b4399ae9a82216d3804f6df5', class: "zonos--elements" }, h("div", { key: '928406c88c458360530d20f6d0dd1e0563c27c99', class: "zonos--hello-dialog-footer", style: {
+        return (h(Host, { key: 'd763a9977f7d39c71c15ec1c2b99376f02eab260', class: "zonos--elements" }, h("div", { key: 'e468a11cd1cdcdbbb2dde4768acb80e72afde1f3', class: "zonos--hello-dialog-footer", style: {
                 '--zonos--primary-color': primaryColor,
-            } }, h("a", { key: '273303784ffec118ac20e280e91c575bb1c002ac', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '50ac525028c2b4081a47cbec44c45448d9b2c1d4', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: '96118c74b078d06065e5cef80962ffb3ad3c5f3e', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'd30aec7d60dc9b67f4a3babfda89b2620c667224', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'd64c7ae9af7d55057b580977750bf7f28c03710e', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
+            } }, h("a", { key: '3f7e809bdbc493a8e0fb7d325a317f403a8b0f69', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '96cf205bfa3ba0118d119aeb63eb942eded07ac4', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: '9c59e0f24e551260353b547c69615614de04a80b', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '65eec8c3f59e89c6e4ab2d0bebbfcb0b07ef51f4', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: '3c3bdccb4e8d588b6228e4e3c70711b352994c58', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
     }
     static get is() { return "zonos-hello-dialog-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -232,18 +232,18 @@ export class ZonosHelloDialog {
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: '0345651f8cf8b06b95b21e5ad2cc427339932229', class: "zonos--elements" }, h("div", { key: '4089308c6460f903130eb4d99b03a7e65937973d', class: classes([
+        return (h(Host, { key: '7b6752f327fdefb40d272d30d50a5fd208ff69a6', class: "zonos--elements" }, h("div", { key: 'b03b78ddfb3a0d6cedb156161fd82ebe45926773', class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '8f5dcc0f0bbd4e3f103105baab5b3d87636930f3' }, h("div", { key: '04b20f5394ddf48861ee97cde4d13000c5765348', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '176b0173785632b211affb603380f7fef9fa0027', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: 'b21f5ab0438f8f5ab922800047bae222d6738e0e', spacing: 24 }, h("zonos-country-flag", { key: 'd153054f02852e8c565997a118f2bea8e5834bc0', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: 'b6f6f630f44ed19eca3ee62baaca9b22867635d5', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '47b5d0a2dd74f39337b4d5a5a968a94ead40a45e', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '9038333f6574e110b6f860ffa0e3b6ebdad81dc0', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '8afaf9eb87813ace65475467d422f150b487fe30', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '367b5a0158679001cb3004d5d965a518cdc3b8ce' }, h("div", { key: '01dd9b2df5b20e61764274a6405118a7b42019f3', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: 'ed49fe9a95fd6ace11669ee194d90eaae951d938', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: '23d391b8f4a13a1b077333f7ac788306dbeb98d6', spacing: 24 }, h("zonos-country-flag", { key: '24c6682b66fe5aa5061bab0b260d6c6fed724f52', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: 'fcb2717fa3403337b507f64adb557bd300841a41', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '013fbda529816a2a1f22fc9d524d087fd69145c8', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '2134a015a6e22f6e02db8935150055b04620eed8', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '67030faaca46fea72230037b594eb3d0abb18acb', spacing: 8 }, this.restrictedItems.map(item => {
             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: '522ba22b8709a962fd7c39ae4e1386b2a696072c', spacing: "12px" }, h("zonos-v-stack", { key: '86fa97265982e6ca5bf9aa078b845c99056d55bf', 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: '7421346614aed925f25e3571cbe935045e392615', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '35560fe611d0424186e79aa1ff56f15c89d122b6' }, h("zonos-country-select", { key: 'c437335dcbcfcf74dab7baeddf663cc216f0b377', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '4692f2be013dc35e821cf1ee9c20d05cf0de9d8e' }, h("zonos-language-select", { key: '19337a5bb390beb9f7629e577f296f2c9f806c98', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), h("zonos-card", { key: '21d50e218fd560e137b68e6d2a16edf118d18148', spacing: "12px" }, h("zonos-v-stack", { key: '70c333afd352aee4a92b47b58c267ec5c6ff122c', 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: '7fa2a3e7646668c37ad2026dcfe0d59d6fd350b8', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '9a59a41f8ffbef2361ada0d5390708232c829026' }, h("zonos-country-select", { key: '3f10795b4eb5695e9848e2c69611f1a4953f5370', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: 'c4aa8b2d533e6735a587fc8c7eb217f52e1fc5c9' }, h("zonos-language-select", { key: 'eb75fbe3e7de95b0459d559ac7ee233b77873545', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h, Host, } from "@stencil/core";
-import { cartStore } from "../store/checkout/cart";
 import { stripeStore } from "../store/checkout/stripe";
 import { initLocalizationStore, localizationStoreUpdateSelectedCountryCode, } from "../store/hello/localization";
+import { storageStore } from "../store/storageStore";
 import { zonosStore, zonosStoreFontFamily, zonosStoreInitSetting, } from "../store/zonosStore";
 import { getZonosSettings } from "../utils/api/getZonosSettings";
 import { initCheckout } from "../utils/checkout/initCheckout";
@@ -241,7 +241,7 @@ export class ZonosController {
      * Reset the Checkout session id and client secret (required for dashboard store switching)
      */
     async reset() {
-        cartStore.checkoutSessionId = null;
+        storageStore.checkoutSessionId = null;
         stripeStore.clientSecret = '';
     }
     /**
@@ -274,7 +274,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '525180de311aea6ffaf2ecaa3fc35befd6bd9142', class: "zonos--elements" });
+        return h(Host, { key: '62c0b3079d64f05800da24daa19e0e1e3a890bca', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/paypal/zonos-paypal-payment.js

@@ -41,7 +41,7 @@ export class ZonosPaypalPayment {
         void this.loadPaypal();
     }
     render() {
-        return (h(Host, { key: '093fd3a8fb9cc021243ca5feff2737f1b1c10b7c', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: '686412f4de97c57a309e6134312641c481c5a9fe', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: 'e8c839cc9d0286f5ae4643243b14fa66f9584833', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: 'cac06948de1ccca97ba65eca10b3e5d9f3a9a362', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-paypal-payment"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,17 +1,18 @@
 import { createStore } from "@stencil/store";
 import { stripeStore, stripeStoreInitCheckoutSession, stripeStoreReset, stripeStoreUpdateCheckoutSession, } from "./stripe";
 import { localizationStore } from "../hello/localization";
+import { storageStore, storageStoreSetEnabledVariantTestKeys, } from "../storageStore";
 import { translate } from "../translationStore";
 import { zonosStore } from "../zonosStore";
 import { getIsStagingMode } from "../../utils/checkout/getIsStagingMode";
 import { allLogs, log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
 import { sendErrorLog } from "../../utils/logging/sendErrorLog";
-const { onChange, reset, state: cartStore, } = createStore(() => ({
+import { filterValidTests } from "../../utils/varianceTest/filterValidTests";
+const { reset, state: cartStore } = createStore(() => ({
     adjustmentTotal: 0,
     adjustments: [],
     checkoutSession: null,
-    checkoutSessionId: sessionStorage.getItem('zonos--checkout-session-id') || null,
     checkoutSessionTimeoutShow: false,
     checkoutTimeoutInterval: null,
     currency: 'USD',
@@ -31,9 +32,9 @@ const { onChange, reset, state: cartStore, } = createStore(() => ({
     landedCostData: null,
     landedCostMethod: 'DDP',
     partiesData: [],
-    promoCode: sessionStorage.getItem('promoCode') || '',
+    promoCode: sessionStorage.getItem('zonos--promo-code') || '',
     // 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'),
+    promoCodeApplied: !!sessionStorage.getItem('zonos--promo-code'),
     promoCodeError: false,
     restrictedItems: [],
     selectedLandedCost: null,
@@ -133,7 +134,7 @@ const cartStoreCheckItemRestrictions = (itemsWorkflow) => {
     };
 };
 const cartStoreReset = () => {
-    sessionStorage.removeItem('zonos--checkout-session-id');
+    storageStore.checkoutSessionId = null;
     // reset cart store
     reset();
 };
@@ -188,8 +189,11 @@ const cartStoreSetCheckoutSession = (checkoutSession) => {
     }
     // Only update checkout session id if it's not empty
     if (checkoutSession.id) {
-        cartStore.checkoutSessionId = checkoutSession.id;
+        storageStore.checkoutSessionId = checkoutSession.id;
     }
+    // Filter the response to only include test keys that we support and then save it to the session
+    const availableSelectedVariantTestKeys = filterValidTests(checkoutSession.varianceTestResults || []);
+    storageStoreSetEnabledVariantTestKeys(availableSelectedVariantTestKeys);
     // Check if there is a redirect URL in the metadata to override
     const externalConfirmationPageURL = ((_c = (_b = (_a = cartStore.checkoutSession) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.find(entry => (entry === null || entry === void 0 ? void 0 : entry.key) === 'externalConfirmationPageURL')) === null || _c === void 0 ? void 0 : _c.value) ||
         (
@@ -214,7 +218,7 @@ const cartStoreReCalculateTotal = async ({ adjustmentsAmount, cartId, currency,
         log('Exchange rate updated for cart items (landed cost subtotal)', 'info', cartStore.exchangeRate);
     }
     // update checkout session
-    if (!cartStore.checkoutSessionId) {
+    if (!storageStore.checkoutSessionId) {
         log('Could not update cart total without checkout session id', 'info');
         return false;
     }
@@ -222,10 +226,11 @@ const cartStoreReCalculateTotal = async ({ adjustmentsAmount, cartId, currency,
         adjustmentsAmount,
         cartId,
         currency,
-        id: cartStore.checkoutSessionId,
+        id: storageStore.checkoutSessionId,
         itemsAmount,
         landedCostId,
         presentmentCountryCode: localizationStore.selectedCountryCode,
+        varianceTestInput: storageStore.enabledVariantTestKeys || [],
     });
     if (errors.length > 0 || !json) {
         logError('Error occurs when updating checkout session.');
@@ -300,6 +305,7 @@ const cartStoreUpdateSelectedShippingOption = async (selectedShippingOption, lan
         cartId: window.Zonos.cartId,
         dutiesTaxesFeesEstimate: dutiesTaxesFeesEstimate,
         landedCostId: (_f = selectedLandedCost.landedCost) === null || _f === void 0 ? void 0 : _f.id,
+        varianceTestInput: storageStore.enabledVariantTestKeys || [],
     });
     // update conditionally render pay in USD button
     const firstItem = (_g = cartStore.items.find(Boolean)) === null || _g === void 0 ? void 0 : _g.currencyCode;
@@ -314,14 +320,6 @@ const cartStoreUpdateSelectedShippingOption = async (selectedShippingOption, lan
             !!((_l = (_k = zonosStore.genericSettings) === null || _k === void 0 ? void 0 : _k.usdSettlementCountryEnabled) === null || _l === void 0 ? void 0 : _l.includes(shipToCountry));
     return updateCalculateStatus;
 };
-onChange('checkoutSessionId', () => {
-    log('checkoutSessionId changed', 'info', cartStore.checkoutSessionId);
-    if (!cartStore.checkoutSessionId) {
-        sessionStorage.removeItem('zonos--checkout-session-id');
-        return;
-    }
-    sessionStorage.setItem('zonos--checkout-session-id', cartStore.checkoutSessionId);
-});
 const cartStoreStartCheckoutInterval = ({ isPreview, sessionTimeout, }) => {
     // do nothing if in preview mode
     if (isPreview) {
@@ -375,6 +373,7 @@ const cartStoreUpdateItems = async ({ adjustments, cartItems, }) => {
         itemsAmount: total,
         // attempt to init session on failure to update checkout session
         shouldInitSessionOnFailure: true,
+        varianceTestInput: storageStore.enabledVariantTestKeys || [],
     });
     stripeStore.isFetchingSession = false;
 };

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

@@ -2,6 +2,7 @@ import { loadScript, } from "@paypal/paypal-js";
 import { createStore } from "@stencil/store";
 import { cartStore, cartStoreClearCheckoutInterval, cartStoreNextStep, } from "./cart";
 import { stripeStore, stripeStoreHandleInventoryCheck, } from "./stripe";
+import { storageStore } from "../storageStore";
 import { translate } from "../translationStore";
 import { zonosStore } from "../zonosStore";
 import { paypalCaptureOrder } from "../../utils/api/paypalCaptureOrder";
@@ -213,7 +214,7 @@ const paypalStoreInitButtons = (props) => {
         log('Paypal is not available');
         return null;
     }
-    const checkoutSessionId = cartStore.checkoutSessionId;
+    const checkoutSessionId = storageStore.checkoutSessionId;
     if (!checkoutSessionId) {
         log('Paypal is not available due to checkoutSessionId is not available');
         return null;

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

@@ -1,6 +1,7 @@
 import { createStore } from "@stencil/store";
 import { cartStore, cartStoreApplySubtotals, cartStoreCheckItemRestrictions, cartStorePreviousStep, cartStoreResetCartItems, cartStoreSetCheckoutSession, cartStoreUpdateSelectedShippingOption, cartStoreUpdateToErrorState, } from "./cart";
 import { localizationStore } from "../hello/localization";
+import { storageStore } from "../storageStore";
 import { translate } from "../translationStore";
 import { zonosStore } from "../zonosStore";
 import { calculateLandedCostNormalized } from "../../utils/api/calculateLandedCostNormaliz";
@@ -16,7 +17,7 @@ import { sendErrorLog } from "../../utils/logging/sendErrorLog";
 import { validateCheckoutSession } from "../../utils/validateCheckoutSession";
 import { addressRuleStyle } from "../../../styles/stripe/addressRuleStyle";
 import { defaultVariable } from "../../../styles/stripe/defaultVariable";
-const { onChange, reset, state: stripeStore, } = createStore(() => ({
+const { onChange: stripeStoreOnChange, reset, state: stripeStore, } = createStore(() => ({
     checkoutSettlementCurrency: 'USD',
     clientSecret: sessionStorage.getItem('zonos--client-secret') || '',
     companyName: '',
@@ -238,7 +239,7 @@ const stripeCalculateLandedCost = async () => {
             return Object.assign(Object.assign({}, checkoutSession), { landedCost: foundLandedCost });
         }).filter(Boolean)) || [];
     // Send event when we get the quote back after the customer clicked "Continue to shipping"
-    const checkoutSessionId = cartStore.checkoutSessionId;
+    const checkoutSessionId = storageStore.checkoutSessionId;
     if (checkoutSessionWorkflow === null || checkoutSessionWorkflow === void 0 ? void 0 : checkoutSessionWorkflow.length) {
         void trackConversionEvent({
             checkoutSessionId,
@@ -255,7 +256,7 @@ const stripeCalculateLandedCost = async () => {
     cartStore.promoCodeError = isInvalidPromoCode;
     // When promocode is valid, set promoCode to session storage so if user close the modal, we can still reapply for them
     if (!isInvalidPromoCode) {
-        sessionStorage.setItem('promoCode', cartStore.promoCode);
+        sessionStorage.setItem('zonos--promo-code', cartStore.promoCode);
     }
 };
 const stripeStorePrefetchLandedCost = async (params) => {
@@ -368,7 +369,7 @@ const stripeStoreApplyPromoCode = async () => {
 };
 const stripeStoreResetPromoCode = () => {
     cartStore.promoCode = '';
-    sessionStorage.removeItem('promoCode');
+    sessionStorage.removeItem('zonos--promo-code');
     // reset promocode error state
     cartStore.promoCodeError = false;
     cartStore.promoCodeApplied = false;
@@ -465,8 +466,23 @@ const stripeStoreHandleInventoryCheck = async () => {
     if (typeof onInventoryCheck !== 'function') {
         return null;
     }
-    const message = await onInventoryCheck({ items: cartStore.items });
-    return message;
+    try {
+        const message = await onInventoryCheck({ items: cartStore.items });
+        return message;
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : 'Unknown error';
+        void sendErrorLog({
+            endpoint: 'onInventoryCheck',
+            errors: [`cartId: ${window.Zonos.cartId} - ${message}`],
+            metadata: {
+                cartId: window.Zonos.cartId,
+                href: window.location.href,
+                items: cartStore.items,
+            },
+        });
+        throw err;
+    }
 };
 /**
  * Handle inventory check and returns error message if the callback provided.
@@ -526,7 +542,7 @@ const stripeStoreConfirmPayment = async () => {
         stripeStore.customErrorMessage = checkoutSessionStatus.errorMessage;
         throw new Error(checkoutSessionStatus.errorMessage);
     }
-    const checkoutSessionId = cartStore.checkoutSessionId;
+    const checkoutSessionId = storageStore.checkoutSessionId;
     if (stripe &&
         stripeElements &&
         stripePaymentReady &&
@@ -572,6 +588,7 @@ const stripeStoreConfirmPayment = async () => {
 export const getCheckoutSessionBody = () => {
     var _a;
     const total = cartStore.items.reduce((amount, item) => amount + item.amount * item.quantity, 0);
+    const varianceTestInput = storageStore.enabledVariantTestKeys || [];
     const body = {
         adjustmentsAmount: cartStore.adjustments.reduce((prev, adj) => prev + adj.amount, 0),
         cartId: window.Zonos.cartId,
@@ -598,12 +615,13 @@ export const getCheckoutSessionBody = () => {
         ],
         presentmentCountryCode: localizationStore.selectedCountryCode,
         skipPaymentIntent: stripeStore.skipPaymentIntent,
+        varianceTestInput,
     };
     return body;
 };
 const stripeStoreGetPaymentIntent = async () => {
     var _a;
-    if (!cartStore.checkoutSessionId) {
+    if (!storageStore.checkoutSessionId) {
         // We want to log the error anytime we fail to create a checkout session
         void sendErrorLog({
             endpoint: 'Error creating payment intent',
@@ -623,7 +641,7 @@ const stripeStoreGetPaymentIntent = async () => {
     }
     const { errors, json } = await handleFetch('/api/zonos-elements/create-payment-intent', {
         body: {
-            checkoutSessionId: cartStore.checkoutSessionId,
+            checkoutSessionId: storageStore.checkoutSessionId,
         },
         method: 'POST',
     });
@@ -637,7 +655,7 @@ const stripeStoreGetPaymentIntent = async () => {
             metadata: {
                 allLogs,
                 cartId: window.Zonos.cartId,
-                checkoutSessionId: cartStore.checkoutSessionId,
+                checkoutSessionId: storageStore.checkoutSessionId,
                 clientSecret,
             },
         });
@@ -691,7 +709,7 @@ const stripeStoreInitCheckoutSession = async () => {
     return true;
 };
 const stripeStoreUpdateCheckoutSessionBaseCurrency = async () => {
-    const checkoutSessionId = cartStore.checkoutSessionId;
+    const checkoutSessionId = storageStore.checkoutSessionId;
     // Checkout session id should be available at this point
     if (!checkoutSessionId) {
         logError('Failed to update checkout session base currency');
@@ -723,6 +741,7 @@ const stripeStoreUpdateCheckoutSessionBaseCurrency = async () => {
  * Update checkout session. Use for updating amount with landed cost id, or update session when cart items change
  */
 const stripeStoreUpdateCheckoutSession = async ({ adjustmentsAmount, cartId, currency, id, itemsAmount, landedCostId, presentmentCountryCode, }) => {
+    const varianceTestInput = storageStore.enabledVariantTestKeys || [];
     // No need to set loading state here because this function will be called under the hood to update
     // landed cost id for the section.
     const { errors, json } = await handleFetch('/api/zonos-elements/update-checkout-session', {
@@ -754,6 +773,7 @@ const stripeStoreUpdateCheckoutSession = async ({ adjustmentsAmount, cartId, cur
             ],
             presentmentCountryCode,
             skipPaymentIntent: stripeStore.skipPaymentIntent,
+            varianceTestInput,
         },
         method: 'POST',
     });
@@ -882,7 +902,7 @@ const stripeStoreTranslateAddressToLatin = async ({ addressInvalidCharactersList
             : {},
     };
 };
-onChange('clientSecret', clientSecret => {
+stripeStoreOnChange('clientSecret', clientSecret => {
     // update stripe elements when client secret changes
     if (clientSecret && stripeStore.stripe) {
         sessionStorage.setItem('zonos--client-secret', clientSecret);
@@ -891,4 +911,4 @@ onChange('clientSecret', clientSecret => {
         sessionStorage.removeItem('zonos--client-secret');
     }
 });
-export { initStripeElements, stripeCalculateLandedCost, stripeStore, stripeStoreApplyPromoCode, stripeStoreCleanupDomesticShippingSession, stripeStoreConfirmPayment, stripeStoreGetDomesticShippingSession, stripeStoreGetPaymentIntent, stripeStoreHandleInventoryCheck, stripeStoreHandleInventoryRefund, stripeStoreInitCheckoutSession, stripeStoreMessageBasedOnStatus, stripeStorePrefetchLandedCost, stripeStoreRemovePromoCode, stripeStoreReset, stripeStoreResetPromoCode, stripeStoreRetrievePayment, stripeStoreSaveDomesticShippingSession, stripeStoreTranslateAddressToLatin, stripeStoreUpdateCheckoutSession, stripeStoreUpdateCheckoutSessionBaseCurrency, };
+export { initStripeElements, stripeCalculateLandedCost, stripeStore, stripeStoreApplyPromoCode, stripeStoreCleanupDomesticShippingSession, stripeStoreConfirmPayment, stripeStoreGetDomesticShippingSession, stripeStoreGetPaymentIntent, stripeStoreHandleInventoryCheck, stripeStoreHandleInventoryRefund, stripeStoreInitCheckoutSession, stripeStoreMessageBasedOnStatus, stripeStoreOnChange, stripeStorePrefetchLandedCost, stripeStoreRemovePromoCode, stripeStoreReset, stripeStoreResetPromoCode, stripeStoreRetrievePayment, stripeStoreSaveDomesticShippingSession, stripeStoreTranslateAddressToLatin, stripeStoreUpdateCheckoutSession, stripeStoreUpdateCheckoutSessionBaseCurrency, };