@zonos/elements 1.3.5 → 1.3.6

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

@@ -0,0 +1,55 @@
+:host {
+  font-family: var(--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host .zonos--tooltip {
+  position: relative;
+}
+:host .zonos--tooltip .zonos--tooltip-content {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  width: max-content;
+  padding: var(--amino-space-12);
+  background-color: var(--amino-gray-1200);
+  opacity: 0;
+  transform: scale(0);
+  transition: all 0.2s ease-in-out;
+  transform-origin: bottom left;
+  border-radius: var(--amino-radius-4);
+  z-index: 100;
+  box-shadow: var(--amino-v3-shadow-large);
+}
+:host .zonos--tooltip .zonos--tooltip-content.zonos--show-tooltip {
+  opacity: 1;
+  transform: scale(1);
+}

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

@@ -0,0 +1,72 @@
+import { h, Host } from "@stencil/core";
+import { classes } from "../../utils/classes";
+export class ZonosTooltip {
+    constructor() {
+        this.label = '';
+        this.subtitle = '';
+        this.showTooltip = false;
+    }
+    render() {
+        return (h(Host, { key: '684561bebf9385c7e6bcca7de37e7ee5084c9692', class: "zonos--elements" }, h("div", { key: 'c116738f39d25b856b268ece410a33f91046c739', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '4073ed0766b4efaa0c25fa7febdbad4c42714dca' }), h("div", { key: '8c6b180577830aaaceb629819535dd930fc49e02', class: classes([
+                this.showTooltip && 'zonos--show-tooltip',
+                'zonos--tooltip-content',
+            ]) }, h("zonos-text", { key: '7c018a9d5a7db939b59624dcc77029a5a8d621af', color: "gray-0", size: "s", type: "boldLabel" }, this.label), h("zonos-text", { key: 'c1f09eaf9cb1084ecf47334903b9ca8b944502b7', color: "gray-0", size: "xs" }, this.subtitle)))));
+    }
+    static get is() { return "zonos-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the tooltip"
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The subtitle of the tooltip"
+                },
+                "attribute": "subtitle",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showTooltip": {}
+        };
+    }
+}

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

@@ -5,12 +5,11 @@ import { classes } from "../../utils/classes";
 export class VStack {
     constructor() {
         this.spacing = 24;
-        this.class = '';
     }
     render() {
-        return (h(Host, { key: '2bd82aba32704cc02da767522c39853c6e223297', style: {
+        return (h(Host, { key: 'a26c7c4898b81deb569731adb63505ded3155fdf', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '22afa237aa1ac8a5ab61adcfa7a0ccabad316b28', class: classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '5f2645af6b1f4178cb87248e03e9bb3d1c8201ee' }))));
+            } }, h("div", { key: 'd4af21dc024bbd12b5240dff4f2689416ad4d808', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '298de42d875520fad5a720eedcf2b8664b39ae85' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }
@@ -52,24 +51,6 @@ export class VStack {
                 "attribute": "spacing",
                 "reflect": false,
                 "defaultValue": "24"
-            },
-            "class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The CSS class to apply to the stack element"
-                },
-                "attribute": "class",
-                "reflect": false,
-                "defaultValue": "''"
             }
         };
     }

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: 'a61bec010f8c7a8b9979d4c5ec4a84153b780a7e' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: 'cf376a9b1970bd04cdadf820112c081666c8bef2' }, "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/assets/globe.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" color="var(--amino-gray-1200)" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12ZM11.4709 5.80634C11.7686 5.53723 11.9541 5.5 12 5.5C12.0459 5.5 12.2314 5.53723 12.5291 5.80634C12.8115 6.06164 13.1289 6.46913 13.4271 7.03651C13.9505 8.03191 14.3838 9.46098 14.48 11.25H9.51996C9.61624 9.46098 10.0495 8.03191 10.5729 7.03651C10.8711 6.46913 11.1885 6.06164 11.4709 5.80634ZM8.01802 11.25C8.11591 9.23031 8.60319 7.55958 9.24516 6.33849C9.29983 6.23451 9.35585 6.13335 9.41312 6.03514C7.32916 6.94017 5.81218 8.90533 5.5428 11.25H8.01802ZM5.5428 12.75H8.01802C8.11591 14.7697 8.60319 16.4404 9.24516 17.6615C9.29983 17.7655 9.35585 17.8666 9.41312 17.9649C7.32916 17.0598 5.81218 15.0947 5.5428 12.75ZM9.51996 12.75H14.48C14.3838 14.539 13.9505 15.9681 13.4271 16.9635C13.1289 17.5309 12.8115 17.9384 12.5291 18.1937C12.2314 18.4628 12.0459 18.5 12 18.5C11.9541 18.5 11.7686 18.4628 11.4709 18.1937C11.1885 17.9384 10.8711 17.5309 10.5729 16.9635C10.0495 15.9681 9.61624 14.539 9.51996 12.75ZM15.982 12.75C15.8841 14.7697 15.3968 16.4404 14.7548 17.6615C14.7002 17.7655 14.6441 17.8666 14.5869 17.9649C16.6708 17.0598 18.1878 15.0947 18.4572 12.75H15.982ZM18.4572 11.25C18.1878 8.90533 16.6708 6.94017 14.5869 6.03514C14.6441 6.13335 14.7002 6.23451 14.7548 6.33849C15.3968 7.55958 15.8841 9.23031 15.982 11.25H18.4572Z" fill="currentColor"/>
+</svg>

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

@@ -523,4 +523,14 @@
 }
 :host .zonos--hello-dialog-footer zonos-button button.outline {
   outline: 1px solid var(--amino-gray-800);
+}
+:host .zonos--hello-dialog-footer .zonos--hello-locale-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--amino-space-8);
+}
+@media (max-width: 400px) {
+  :host .zonos--hello-dialog-footer .zonos--hello-locale-wrapper {
+    gap: var(--amino-space-4);
+  }
 }

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

@@ -1,22 +1,25 @@
 import { h, Host } from "@stencil/core";
 import { localizationStore } from "../../../store/hello/localization";
 import { isDarkColor } from "../../../utils/isDarkColor";
+import { languages } from "../../../../types/ILanguage";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
-import ChevronDownIcon from "./assets/chevronDownIcon.svg";
+import Globe from "./assets/globe.svg";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import ZonosIcon from "./assets/zonosIcon.svg";
 export class ZonosHelloDialogFooter {
     constructor() {
         this.appearanceSettings = undefined;
         this.setShowCountrySelect = () => { };
+        this.setShowLanguageSelect = () => { };
     }
     render() {
-        var _a, _b;
+        var _a, _b, _c;
         const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
         const footerTheme = primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
-        return (h(Host, { key: '724259a8adaa1cb5c760f36b14be99c55d6c29e2', class: "zonos--elements" }, h("div", { key: 'cb27d219f7a0f948a939b221143c3f0f252b0eeb', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
-                '--primary-color': (_b = this.appearanceSettings) === null || _b === void 0 ? void 0 : _b.colorPrimary,
-            } }, h("a", { key: 'd04f060e7db6e2c964dc2c4252dbbc7b69fba7db', href: "https://zonos.com", target: "_blank" }, h("zonos-icon", { key: 'ed138c417f139f84a5466a4228925e2aa908cd12', autoHeight: true, color: "gray-1200", content: ZonosIcon, size: 108 })), h("zonos-button", { key: '07b300a1950adfaf154c173a49cec722df74172c', icon: h("zonos-icon", { color: "gray-700", content: ChevronDownIcon }), iconRight: true, onClick: () => this.setShowCountrySelect(true), variant: "outline" }, localizationStore.selectedCountryCode))));
+        const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
+        return (h(Host, { key: 'a3a6ab0e4af4981cc83802be1433c3c41da58c19', class: "zonos--elements" }, h("div", { key: 'fdea45d1b4d83055a3d17918a5ae78f43a7e0042', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
+                '--primary-color': (_c = this.appearanceSettings) === null || _c === void 0 ? void 0 : _c.colorPrimary,
+            } }, h("a", { key: '4d4e995052049238d4c522ff8501dddbe25e29d5', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '4ca16c024473660f74cfc7a3d506b8ba4ebf7362', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: 'dd1da686f8345431c3805898f374e5fb22e27289', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'd5c34c75c5006710ff6d0426d43f07a5ade41827', buttonColor: "gray-1200", icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: '43759ce87473b10e078f14dce529db502a5edd4d', buttonColor: "gray-1200", 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"; }
@@ -75,6 +78,25 @@ export class ZonosHelloDialogFooter {
                     "text": "Whether or not the country select dialog is open"
                 },
                 "defaultValue": "() => {}"
+            },
+            "setShowLanguageSelect": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(value: boolean) => void",
+                    "resolved": "(value: boolean) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether or not the language select dialog is open"
+                },
+                "defaultValue": "() => {}"
             }
         };
     }

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

@@ -144,12 +144,17 @@
   bottom: 0;
   width: 100vw;
   max-width: 100vw;
-  max-height: unset;
+  max-height: 500px;
   height: fit-content;
   transform: scaleY(0);
   border-radius: 0;
   transform-origin: bottom;
 }
+@media (max-height: 600px) {
+  :host .zonos--hello-dialog.zonos--hello-dialog-mobile-override {
+    max-height: 80vh;
+  }
+}
 :host .zonos--hello-dialog.zonos--hello-dialog-mobile-override.zonos--hello-dialog-animate-from-left {
   transform-origin: bottom;
 }
@@ -166,15 +171,24 @@
     bottom: 0;
     width: 100vw;
     max-width: 100vw;
-    max-height: unset;
+    max-height: 500px;
     height: fit-content;
     transform: scaleY(0);
     border-radius: 0;
     transform-origin: bottom;
   }
+}
+@media (max-width: 768px) and (max-height: 600px) {
+  :host .zonos--hello-dialog {
+    max-height: 80vh;
+  }
+}
+@media (max-width: 768px) {
   :host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left {
     transform-origin: bottom;
   }
+}
+@media (max-width: 768px) {
   :host .zonos--hello-dialog.zonos--hello-dialog-open {
     opacity: 1;
     transform: scaleY(1);

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

@@ -38,6 +38,9 @@ export class ZonosHelloDialog {
         this.setShowCountrySelect = async (value) => {
             this.showCountrySelect = value;
         };
+        this.setShowLanguageSelect = async (value) => {
+            this.showLanguageSelect = value;
+        };
         this.isOpen = false;
         this.setIsOpen = () => { };
         this.mobileLocationOverride = undefined;
@@ -46,6 +49,7 @@ export class ZonosHelloDialog {
         this.restrictedItems = [];
         this.welcomeMessage = 'Welcome to our Demo App!';
         this.showCountrySelect = false;
+        this.showLanguageSelect = false;
     }
     globalClickHandler(e) {
         this.clickOutsideDialogHandler(e);
@@ -53,6 +57,7 @@ export class ZonosHelloDialog {
     isOpenHandler(isOpen) {
         if (!isOpen) {
             void this.setShowCountrySelect(false);
+            void this.setShowLanguageSelect(false);
         }
     }
     render() {
@@ -90,17 +95,17 @@ export class ZonosHelloDialog {
             translate('Know about duties and taxes before you buy. Shop with confidence!');
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: '56fcc25e2fabf8c2f1edf727a64d213f18729c00', class: "zonos--elements" }, h("div", { key: 'c83e357cd266c605015e136eb23906bd4385e7f5', "aria-hidden": "true", class: classes([
+        return (h(Host, { key: '303f914b4511500edcd8d041ccfd52f0c48a7a85', class: "zonos--elements" }, h("div", { key: 'f52025ee53c0cdbbf20ecbb874e5639194b6507b', "aria-hidden": "true", 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',
-            ]), ref: el => el && (this.dialogRef = el) }, h("div", { key: '8d5811f45f2cfe8bd1c0ca3131d99ebc69b7b00d', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '137ea59ae312bee3817292dde42e2e718e70001b', class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), this.showCountrySelect ? (h("div", null, h("zonos-country-select", { closeCountrySelect: () => this.setShowCountrySelect(false) }))) : (h("div", null, h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { color: "gray-800" }, defaultMessage)), h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
+            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", null, h("div", { class: "zonos--hello-dialog-content" }, h("zonos-button", { 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", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { textColor: "gray-800" }, defaultMessage)), h("zonos-v-stack", { 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", { color: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
-        }), h("zonos-card", { spacing: "12px" }, h("zonos-v-stack", { spacing: 12 }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: BagIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))))), !this.showCountrySelect && (h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value) })))));
+            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", { spacing: "12px" }, h("zonos-v-stack", { spacing: 12 }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: BagIcon }), 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)))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", null, h("zonos-country-select", { handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", null, h("zonos-language-select", { handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -255,7 +260,8 @@ export class ZonosHelloDialog {
     static get states() {
         return {
             "welcomeMessage": {},
-            "showCountrySelect": {}
+            "showCountrySelect": {},
+            "showLanguageSelect": {}
         };
     }
     static get events() {

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

@@ -153,7 +153,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: 'ff6eb2466864a217c485484d381e6f2531631e49', class: "zonos--elements" });
+        return h(Host, { key: '5650218b8eef4246ff1b131fcd1a06319800c2e3', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,13 +20,17 @@ const { onChange, reset, state: stripeStore, } = createStore(() => ({
     stripeAddressEventData: null,
     stripeAddressUsedWhenFetchingLC: null,
     stripeBillingAddressElement: null,
+    stripeBillingAddressEventData: null,
+    stripeBillingAddressUsedWhenFetchingLC: null,
     stripeElements: null,
+    stripeElementsForBillingAddress: null,
     stripeElementsOptions: null,
     stripeLinkElement: null,
     stripeLinkEventData: null,
     stripeLinkUsedWhenFetchingLC: null,
     stripePaymentElement: null,
     stripePaymentEventData: null,
+    stripeShippingSameAsBilling: true,
 }));
 const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryColor, overrideSecondaryColor, overrideTheme, }) => {
     const primaryColor = overridePrimaryColor || zonosStore.appearance.colorPrimary;
@@ -53,7 +57,7 @@ const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryC
     };
 };
 const initStripeElements = async (props) => {
-    var _a;
+    var _a, _b;
     const clientSecret = stripeStore.clientSecret;
     if (!stripeStore.stripe) {
         log('Skip. Stripe is not initialized');
@@ -70,17 +74,24 @@ const initStripeElements = async (props) => {
         // compare with the previous options to see if we need to update
         const isSameOptions = JSON.stringify(stripeOptions) ===
             JSON.stringify(stripeStore.stripeElementsOptions);
-        if (!stripeStore.stripeElements) {
+        if (!stripeStore.stripeElements ||
+            !stripeStore.stripeElementsForBillingAddress) {
             // init stripe elements if it doesn't exist
             stripeStore.stripeElements = (_a = stripeStore.stripe) === null || _a === void 0 ? void 0 : _a.elements(stripeOptions);
             // save stripe elements options for later comparison
             stripeStore.stripeElementsOptions = stripeOptions;
             log('Stripe elements initialized');
+            // init stripe elements for billing address
+            stripeStore.stripeElementsForBillingAddress =
+                (_b = stripeStore.stripe) === null || _b === void 0 ? void 0 : _b.elements(stripeOptions);
+            log('Stripe elements for billing address initialized');
             return;
         }
         if (!isSameOptions) {
             // update elements with new option if it already exists
             stripeStore.stripeElements.update(stripeOptions);
+            // update elements for stripe billing address
+            stripeStore.stripeElementsForBillingAddress.update(stripeOptions);
             // save stripe elements options for later comparison
             stripeStore.stripeElementsOptions = stripeOptions;
         }
@@ -100,7 +111,7 @@ const stripeStoreReset = () => {
  * Purpose is to resend the request if the info used when fetching landed cost is different from the current info
  */
 const isPrefetchInfoOutdated = () => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const hasAbortController = stripeStore.fetchingLandedCostAbordController;
     if (!hasAbortController) {
         // if there is no abort controller, this is a new request
@@ -110,26 +121,36 @@ const isPrefetchInfoOutdated = () => {
         JSON.stringify((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.value);
     const isAddressDataDirty = JSON.stringify((_c = stripeStore.stripeAddressUsedWhenFetchingLC) === null || _c === void 0 ? void 0 : _c.value) !==
         JSON.stringify((_d = stripeStore.stripeAddressEventData) === null || _d === void 0 ? void 0 : _d.value);
-    return isLinkDataDirty || isAddressDataDirty;
+    const isBillingAddressDataDirty = !stripeStore.stripeShippingSameAsBilling &&
+        JSON.stringify((_e = stripeStore.stripeBillingAddressEventData) === null || _e === void 0 ? void 0 : _e.value) !==
+            JSON.stringify((_f = stripeStore.stripeBillingAddressUsedWhenFetchingLC) === null || _f === void 0 ? void 0 : _f.value);
+    return isLinkDataDirty || isAddressDataDirty || isBillingAddressDataDirty;
 };
 const stripeStorePrefetchLandedCost = async () => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const stripeAddressReady = !!((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete);
     const stripeLinkReady = !!((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.complete);
+    const stripeBillingAddressReady = stripeStore.stripeShippingSameAsBilling
+        ? !!((_c = stripeStore.stripeLinkEventData) === null || _c === void 0 ? void 0 : _c.complete)
+        : !!((_d = stripeStore.stripeBillingAddressEventData) === null || _d === void 0 ? void 0 : _d.complete);
     const shouldRefetch = isPrefetchInfoOutdated();
     if (shouldRefetch) {
         // if the info used when fetching landed cost is different from the current info, abort the previous request
-        (_c = stripeStore.fetchingLandedCostAbordController) === null || _c === void 0 ? void 0 : _c.abort();
+        (_e = stripeStore.fetchingLandedCostAbordController) === null || _e === void 0 ? void 0 : _e.abort();
         stripeStore.fetchingLandedCostAbordController = null;
     }
     // only fetch if we are not fetching or we need to refetch
     if (stripeAddressReady &&
         stripeLinkReady &&
+        stripeBillingAddressReady &&
         (shouldRefetch || !stripeStore.isFetchingLandedCost)) {
         stripeStore.isFetchingLandedCost = true;
         if (stripeStore.stripeAddressEventData) {
             stripeStore.stripeAddressUsedWhenFetchingLC = Object.assign({}, stripeStore.stripeAddressEventData);
         }
+        if (stripeStore.stripeBillingAddressEventData) {
+            stripeStore.stripeBillingAddressUsedWhenFetchingLC = Object.assign({}, stripeStore.stripeBillingAddressEventData);
+        }
         if (stripeStore.stripeLinkEventData) {
             stripeStore.stripeLinkUsedWhenFetchingLC = Object.assign({}, stripeStore.stripeLinkEventData);
         }
@@ -145,7 +166,7 @@ const stripeStorePrefetchLandedCost = async () => {
             cartStore.shippingData =
                 (shipmentRatingCalculateWorkflow === null || shipmentRatingCalculateWorkflow === void 0 ? void 0 : shipmentRatingCalculateWorkflow.filter(Boolean)) || null;
             // apply new subtotal and total, this is mainly to show items in the presentment currency
-            const firstLandedCostData = (_d = cartStore.landedCostData) === null || _d === void 0 ? void 0 : _d.find(Boolean);
+            const firstLandedCostData = (_f = cartStore.landedCostData) === null || _f === void 0 ? void 0 : _f.find(Boolean);
             const subtotals = !!firstLandedCostData
                 ? firstLandedCostData.subtotals
                 : null;

package/dist/collection/components/store/hello/localization.js

@@ -140,4 +140,8 @@ const initLocalizationStore = async () => {
     localizationStore.localizationLoaded = true;
     void getCustomMessages();
 };
-export { initLocalizationStore, localizationStore, localizationStoreUpdateSelectedCountryCode, };
+const localizationStoreUpdateSelectedLocale = (newSelectedLocale) => {
+    localizationStore.selectedLocale = newSelectedLocale;
+    translationStoreUpdateLanguage(newSelectedLocale);
+};
+export { initLocalizationStore, localizationStore, localizationStoreUpdateSelectedCountryCode, localizationStoreUpdateSelectedLocale, };

package/dist/collection/components/store/translationStore/strings.arabic.js

@@ -8,6 +8,9 @@ export const stringsArabic = {
     Back: {
         value: 'رجوع',
     },
+    'Billing address': {
+        value: 'عنوان الفوترة',
+    },
     'Cart subtotal': {
         value: 'المجموع الفرعي للسلة',
     },
@@ -56,6 +59,9 @@ export const stringsArabic = {
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: 'لم يتم العثور على طرق شحن - جرب تحرير عنوانك أو الاتصال بالدعم إذا استمر الخطأ',
     },
+    'Nothing due at the door': {
+        value: 'لا شيء مستحق عند الباب',
+    },
     'Order is over the de minimis threshold for both duty and tax': {
         value: 'الطلبية أعلى من الحد الأدنى لكل من الرسوم والضرائب',
     },
@@ -89,12 +95,24 @@ export const stringsArabic = {
     'Restricted items found': {
         value: 'تم العثور على عناصر مقيدة',
     },
+    'Search countries': {
+        value: 'ابحث عن الدول',
+    },
     'See duty and tax thresholds': {
         value: 'انظر عتبات الرسوم والضرائب',
     },
+    'Select a country': {
+        value: 'اختر دولة',
+    },
+    'Select a language': {
+        value: 'اختر لغة',
+    },
     Shipping: {
         value: 'الشحن',
     },
+    'Shipping address same as billing': {
+        value: 'عنوان الشحن مطابق لعنوان الفوترة',
+    },
     'Shipping information': {
         value: 'معلومات الشحن',
     },

package/dist/collection/components/store/translationStore/strings.base.js

@@ -8,6 +8,9 @@ export const stringsBase = {
     Back: {
         value: 'Back',
     },
+    'Billing address': {
+        value: 'Billing address',
+    },
     'Cart subtotal': {
         value: 'Cart subtotal',
     },
@@ -56,6 +59,9 @@ export const stringsBase = {
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: 'No shipping methods found - try editing your address or contacting support if the error persists',
     },
+    'Nothing due at the door': {
+        value: 'Nothing due at the door',
+    },
     'Order is over the de minimis threshold for both duty and tax': {
         value: 'Order is over the de minimis threshold for both duty and tax',
     },
@@ -89,12 +95,24 @@ export const stringsBase = {
     'Restricted items found': {
         value: 'Restricted items found',
     },
+    'Search countries': {
+        value: 'Search countries',
+    },
     'See duty and tax thresholds': {
         value: 'See duty and tax thresholds',
     },
+    'Select a country': {
+        value: 'Select a country',
+    },
+    'Select a language': {
+        value: 'Select a language',
+    },
     Shipping: {
         value: 'Shipping',
     },
+    'Shipping address same as billing': {
+        value: 'Shipping address same as billing',
+    },
     'Shipping information': {
         value: 'Shipping information',
     },

package/dist/collection/components/store/translationStore/strings.chinese.js

@@ -8,6 +8,9 @@ export const stringsChinese = {
     Back: {
         value: '返回',
     },
+    'Billing address': {
+        value: '账单地址',
+    },
     'Cart subtotal': {
         value: '购物车小计',
     },
@@ -56,6 +59,9 @@ export const stringsChinese = {
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: '未找到运输方法 - 如果错误仍然存在，请尝试编辑您的地址或联系支持',
     },
+    'Nothing due at the door': {
+        value: '门口无需付款',
+    },
     'Order is over the de minimis threshold for both duty and tax': {
         value: '订单超过关税和税款的最低征税门槛',
     },
@@ -89,12 +95,24 @@ export const stringsChinese = {
     'Restricted items found': {
         value: '发现受限制的商品',
     },
+    'Search countries': {
+        value: '搜索国家',
+    },
     'See duty and tax thresholds': {
         value: '查看关税和税款门槛',
     },
+    'Select a country': {
+        value: '选择一个国家',
+    },
+    'Select a language': {
+        value: '选择一种语言',
+    },
     Shipping: {
         value: '运输',
     },
+    'Shipping address same as billing': {
+        value: '送货地址与账单地址相同',
+    },
     'Shipping information': {
         value: '运输信息',
     },