@zonos/elements 1.3.22 → 1.3.24

package/dist/collection/components/common/zonos-confirm-dialog/zonos-confirm-dialog.js

@@ -22,8 +22,9 @@ export class ZonosConfirmDialog {
         this.submitBtnColor = undefined;
         this.dialogConfirmBtnText = undefined;
         this.dialogCancelBtnText = undefined;
+        this.dialogType = 'confirm';
         this.isMobile = false;
-        this.dialogOpen = false;
+        this.dialogOpen = undefined;
         this.noClickOutside = false;
     }
     handleKeyDown(ev) {
@@ -81,12 +82,12 @@ export class ZonosConfirmDialog {
         const borderStyle = getBorderRadius();
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = getZonosStoreTheme(zonosStore.appearance.theme);
-        return (h(Host, { key: 'e52030ffc052c699daa87c5b62ee8b44ddad7f7f', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-theme": theme, style: {
+        return (h(Host, { key: '0adbea273e5504ac29ef8040fd968ded3f731f4b', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'a34d31946f198b2593f142b582aec18f69fe74c5', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '2f3dfa27dfbfbc4080eb710dd3db530521b63d36', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '8f61424a8899c81f9510deda0adc3ff3e2da102b', class: "zonos--confirm-dialog", onBlur: () => {
+            } }, h("div", { key: '4dbb78a0d1fc37dbd573c23aee53838a4578e18e', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '106e28d9bea08a332063cf8fe07f7e1db7ef3f0b', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: 'b296e7d2c30815147396b6e5c50207b40722d6f5', class: "zonos--confirm-dialog", onBlur: () => {
                 this.focusDialog();
-            } }, h("div", { key: '2fca3f071d7f9d2af628d909770bb12a3acabfe2', class: "wrapper" }, h("div", { key: 'fed312e492a9fcac175a9cac7501255aeb975c10', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '131651e201a8d6b2ee9e0c82bd1990bc9a8dc702', class: "content" }, h("div", { key: 'a42e1a9271bdfb9fba133e9af330bdb8b16be230', class: "title" }, h("zonos-text", { key: '91461b9e572e3eb0e6e8616612cce56cf723678f', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: 'fde989f7ef37692173c1476b5cfd98f6cc71bb6e', class: "subtitle" }, h("zonos-text", { key: '2e273099ff036b1aa62bba923fff696d1d291867', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: '3b7f50adf490388feb759f2e09a626ece5f29c20', class: "footer" }, h("zonos-button", { key: '9686f10d831470273543cf3b5217a8e59bb5160a', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText), h("zonos-button", { key: '3781a86d62efe11e8dc08886e3b4ad885c64776a', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+            } }, h("div", { key: 'ba8c7aa3f0a6c3753f2275b2fd9daac8181d8e05', class: "wrapper" }, h("div", { key: '60490f9e714881bd75c6fcad07aebf3ae9d9947b', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: 'd735c7e03bff1d41fdbc003c9628a4abaa4f9313', class: "content" }, h("div", { key: 'e085cea22f8036b3deec9fa9f51c977629e6cc74', class: "title" }, h("zonos-text", { key: '4e41e3b2fe012a8c28daa7ceab614b19299c7cdf', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '5cc1fefbe7a551bf5ad7ff3744d7ecc6ecf5e73a', class: "subtitle" }, h("zonos-text", { key: '07afaf41a189f491db17d135cf074d4c6152e3cb', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: 'fbcfeb7f1a195ad928dea606f5085d8d2c1f2df6', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: 'eab37a4bf872bcde807ea50f33f2f082889a47c1', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '21e66354e0eaa951fd68f86beda36c4a89f06e44', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
     }
     static get is() { return "zonos-confirm-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -205,11 +206,11 @@ export class ZonosConfirmDialog {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Cancel button text"
@@ -217,6 +218,27 @@ export class ZonosConfirmDialog {
                 "attribute": "dialog-cancel-btn-text",
                 "reflect": false
             },
+            "dialogType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'alert' | 'confirm'",
+                    "resolved": "\"alert\" | \"confirm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"confirm\""
+                        }],
+                    "text": "Type of dialog\n- \"alert\" - Only confirm button\n- \"confirm\" - Both Confirm and cancel buttons"
+                },
+                "attribute": "dialog-type",
+                "reflect": false,
+                "defaultValue": "'confirm'"
+            },
             "isMobile": {
                 "type": "boolean",
                 "mutable": false,
@@ -243,15 +265,14 @@ export class ZonosConfirmDialog {
                     "resolved": "boolean",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Whether or not the dialog is open"
                 },
                 "attribute": "dialog-open",
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             },
             "noClickOutside": {
                 "type": "boolean",

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

@@ -55,7 +55,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 10002;
+  z-index: 2147483009;
   background: var(--zonos-elements-gray-0);
   border-radius: var(--border-radius, var(--zonos-elements-radius-10));
 }
@@ -73,7 +73,7 @@
 }
 :host .zonos--dialog {
   position: relative;
-  z-index: 10001;
+  z-index: 2147483008;
   background: var(--zonos-elements-gray-0);
   max-width: 90vw;
   max-height: 90vh;
@@ -127,12 +127,12 @@
   visibility: visible;
 }
 :host(.open) .zonos--backdrop {
-  z-index: 10001;
+  z-index: 2147483008;
   opacity: 0.65;
 }
 :host(.open) .zonos--dialog-layout {
   opacity: 1;
-  z-index: 10002;
+  z-index: 2147483009;
   transform: scale(1);
 }
 

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

@@ -0,0 +1,53 @@
+: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 {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 20px;
+}
+:host .zonos--restState-image {
+  width: 124px;
+  height: 124px;
+  margin-bottom: 15px;
+}
+:host .content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}

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

@@ -0,0 +1,102 @@
+import { getAssetPath, h, Host } from "@stencil/core";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
+import { classes } from "../../utils/classes";
+export class ZonosRestState {
+    constructor() {
+        this.getImageRestState = () => {
+            const imageSrc = getAssetPath(`./assets/${this.restStateType}.png`);
+            return imageSrc;
+        };
+        this.restStateSubtitle = undefined;
+        this.restStateTitle = undefined;
+        this.restStateType = undefined;
+        this.isErrorImageLoad = false;
+    }
+    render() {
+        const imageUrl = this.getImageRestState();
+        return (h(Host, { key: '1bfff1095ec5c517b04106972431ac2e7f6355d9', class: classes(['zonos--elements zonos--restState']), style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: 'e4c9b3b63f73c8c9ed04e196369a888fdbece30a', class: "zonos--restState-image" }, h("img", { key: 'e7444fae5141035f415ae0255ce5ff1446910fa4', alt: this.restStateType, onError: () => {
+                this.isErrorImageLoad = true;
+            }, src: imageUrl })), h("div", { key: '2f1d1ac03dcf47d7fd7bc7014a8c4af0486d3a80', class: "content" }, h("zonos-text", { key: 'bf9fe66af7349c07c6fba5dd4e749a808b051fcc', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '2b9fc699b05557487ad8534f34857febb0defda8', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: 'fe7c44da5367b5b52abbbee2631a955544f41042', class: "action" }, h("slot", { key: '395e78af0e2dff6f0a98e7ac005509c3abb965fd' }))));
+    }
+    static get is() { return "zonos-rest-state"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-rest-state.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-rest-state.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "restStateSubtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The subtitle of the rest state"
+                },
+                "attribute": "rest-state-subtitle",
+                "reflect": false
+            },
+            "restStateTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the rest state"
+                },
+                "attribute": "rest-state-title",
+                "reflect": false
+            },
+            "restStateType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RestStateType",
+                    "resolved": "\"Boxes\" | \"Earth\" | \"EmptyBox\" | \"Lock\" | \"PigBank\" | \"Scribble\" | \"Search\" | \"Settings\" | \"ShoppingCart\" | \"SpilledCup\" | \"Switch\" | \"TaxId\" | \"Truck\" | \"Warning\"",
+                    "references": {
+                        "RestStateType": {
+                            "location": "import",
+                            "path": "src/components/utils/restStateType",
+                            "id": "src/components/utils/restStateType.ts::RestStateType"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of rest state"
+                },
+                "attribute": "rest-state-type",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isErrorImageLoad": {}
+        };
+    }
+}

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: '6bbc81e8045153c49da17c4b999bc1992aa9f01d', class: "zonos--elements", style: {
+        return (h(Host, { key: 'aee08db0e889bd5a5b9084180f6ee038c120a3b2', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: 'c0184343c6cefd3c996695964800d242d1673ee1', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'ae13d39c8a0917df33aec34a10853892d9470a9c', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '32e9af076b72f63cb1ec0c92b7e77d3196572106', type: "boldLabel" }, this.label), h("zonos-button", { key: 'eb4d2f0cef4a2b0eafe628c19d0fcbac4f3493e6', 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: '98a6f0e4f44e74208b5e446ad8066b74b1f7beaa' }))));
+            } }, h("zonos-v-stack", { key: '565a273f0037418387c0868c74943c3325ab6c35', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '0d994f27c948e49c092d016a0f1d6e453f80f00a', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'ee7bb796e921b2a14fa6201c8f17d0dfd9f3a3c2', type: "boldLabel" }, this.label), h("zonos-button", { key: '0e3a6c9c2cc4b67a51015b2fb7345c47a0e5ef23', 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: 'ad9fb089fa4a571a5443431c0d686b4804d25b0a' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }

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: 'dd98e35a2295dd72209775ce1e63d6f653913466', class: "zonos--elements" }, h("div", { key: '4bee5ca82e3a493826b723f620baa6d7cf7af63a', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '1320496e6caed5f16d940f0e5119d5f19186f565' }), h("div", { key: '2a9b891c672d03cdbe8babf59312942e101704a7', class: classes([
+        return (h(Host, { key: '62f307eee14511a4d37aecd927a25f797e206d8f', class: "zonos--elements" }, h("div", { key: '8bcdbbbd4d9fffe487c975d2f42bc0e7ecc0d7a5', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '53413e70a522d44f044bf08154c933e8d2b6863e' }), h("div", { key: 'b3ff18f30520346abe71df2987763d08ccc21c3c', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '0146fad3f70fa07e9eb644b26d6dd65963a70c3d', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '36e76d4624927255679107ee47022b7314479441', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: '72567e2ace426b1d45e46a7bb68aa17076fcf7d3', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '183b70f17a065b3eb3eef65df38bee2092c91582', 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: '3d0753111d525b29e1f36684c89b7216ee0b323f', style: {
+        return (h(Host, { key: '9b7115624d2e27b1c6da58ac16f6059d5cad71a9', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '95b732681743abc1b08b1b8bc722855c3c8e967a', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'b93347c5fb986a70f9f1d67ce2216bba84db7ba4' }))));
+            } }, h("div", { key: 'bd3ccd8700897292fd1a9ad40825c851a484fcf2', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '1c6fe3e6dc8eda9461eb90180535c9bd563a1840' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

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: 'b51f2edddb50f8f6a868da28c73218fe6955d2e5' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: 'b2d57ce9356cd0d1454c7ef195fe0ac21f694b7b' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,7 +37,9 @@ export class ZonosHello {
                 case 'productDetail':
                     return translate(`See duty and tax thresholds`);
                 default:
-                    return `${translate('Welcome to')} ${organizationName}`;
+                    return translate('Welcome to [storeName]!', {
+                        storeName: organizationName,
+                    });
             }
         };
         this.enableShowPeekMessage = () => {

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

@@ -1,7 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { localizationStore } from "../../../store/hello/localization";
 import { isDarkColor } from "../../../utils/isDarkColor";
-// import { isElementUsingDarkTheme } from 'src/components/utils/isElementUsingDarkTheme';
 import { languages } from "../../../../types/ILanguage";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import Globe from "./assets/globe.svg";
@@ -19,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: '056e6cead0dd21acc085689ea850ba4a53f67bf9', class: "zonos--elements" }, h("div", { key: '00f61e795abc81d6e2f0be7e64eeae298248b34e', class: "zonos--hello-dialog-footer", style: {
+        return (h(Host, { key: 'f84d021e99271bd6a00da32edd35fdc5e0520c5a', class: "zonos--elements" }, h("div", { key: '96eeeb3df6698a18ae1439c3c35bc2337fe3e83c', class: "zonos--hello-dialog-footer", style: {
                 '--primary-color': primaryColor,
-            } }, h("a", { key: '79235722e7f4caaeac2d2a400665603e07b14614', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '7a92af7024dfc3e21de1a0789623b1c1fdb8a33e', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: '04d44adc9941688bc7ae7bef0ea8c9d26a33a401', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'b9f3debc0c965f1ebd8745cb020c10f6e8c17285', 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: 'cc3ec6a8ece0ed8e94a85ec3a7a38c3c87fbf95e', 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: 'bb17cee42a3cb6d88e1b064649184c686ef41201', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '9183c662eb9d2dbb63b5149c338d013439767634', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: 'dd5bed89a4a2ae9386fa39fe15362c42fa7535ee', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'cbe6cb613fb2ca39f772363f8276cbc8c9e28b70', 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: 'e05876aa9b1e56f945f810b82163335cd14202d1', 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

@@ -71,19 +71,19 @@ export class ZonosHelloDialog {
                 return null;
             }
             const dutyDeminimis = landedCost.dutyDeminimus;
-            return translate('Orders to ${countryName} must be over ${threshold} to ship.', {
+            return translate('Orders to [countryName] must be over [threshold] to ship.', {
                 countryName: 'United Kingdom',
                 threshold: currencyFormat({ amount: dutyDeminimis }),
             });
         };
         this.getAustraliaDutyTaxMessage = (landedCost) => {
-            return translate('${percentage} GST due on any order above ${threshold}.', {
+            return translate('[percentage] GST due on any order above [threshold].', {
                 percentage: `${landedCost.vatTaxRate * 100}%`,
                 threshold: currencyFormat({ amount: landedCost.vatTaxDeminimus }),
             });
         };
         this.getNewZealandDutyTaxMessge = (landedCost) => {
-            return translate('${percentage} GST due on any order above ${threshold} along with an import entry transaction fee and MPI levy.', {
+            return translate('[percentage] GST due on any order above [threshold] along with an import entry transaction fee and MPI levy.', {
                 percentage: `${landedCost.vatTaxRate * 100}%`,
                 threshold: currencyFormat({ amount: landedCost.vatTaxDeminimus }),
             });
@@ -143,23 +143,25 @@ export class ZonosHelloDialog {
             (this.dialogRef && getHasMoreSpaceOnRight(this.dialogRef));
         const animateFromBottom = this.dialogRef && getHasMoreSpaceAbove(this.dialogRef);
         const { customMessages } = localizationStore;
-        const welcomeMessage = `${translate('Welcome to')} ${zonosStore.organizationName}!`;
+        const welcomeMessage = translate('Welcome to [storeName]!', {
+            storeName: zonosStore.organizationName,
+        });
         const defaultMessageStr = ((_a = customMessages.find(x => x.pageName === 'hello_default')) === null || _a === void 0 ? void 0 : _a.message) ||
             translate('Know about duties and taxes before you buy. Shop with confidence!');
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: 'ec64ed364328acba99227ccb40371ff6b7e0c1e2', class: "zonos--elements" }, h("div", { key: '441d4a9ae4274b0fffbd22771b8f1ffe3839230a', "aria-hidden": "true", class: classes([
+        return (h(Host, { key: '354758888accf5c5f44e321cc36f3126fe161596', class: "zonos--elements" }, h("div", { key: 'b6e9ef3ac53035b578f1ccb6940e04561a6c7362', "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) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '9d53c5dd06b5f1b1a0800bfdaee9615e851b3338' }, h("div", { key: '43b424d7d115ead896f0ce743d60db1775468ada', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '2dacf61dfd6976de8a37f63697a927b00c70500c', 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: '75d1b83b6e7bcefe592bd90e1fbcfd97154f0b4c', spacing: 24 }, h("zonos-country-flag", { key: '051019e1d01cc12d38d82c5c1d2765b280cf87e4', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '4dd4f2bb7b8f88fcdb8c27ebaca86bbaa4f8459a', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '33a2430d344b0613fda2597e5e8d52e852398a3c', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '5e0785c9e190be41d5c1b22736a73031de0f0a8b', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '460c1914c7f91ad7d3495e77f2f0de412e0d2f78', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: 'cba389a7107bf0505743237a7e61e27988955a44' }, h("div", { key: '3cef5f247dca70671ad0c304f29980f7147cf21c', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '013764140f25f64ab52f4588a50b5148f4b170d0', 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: '099dc23581474e5167cfa8bd90be9987b3caa47f', spacing: 24 }, h("zonos-country-flag", { key: 'c545313157e3a488433619292306419588e20e50', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: 'f8be1b95571b28be7ed4fc3caee5d13177845150', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '9ac86d0f247cecd0bfa19ffc041eee89bd19b168', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '3234c9640aa1d484c6dcb78e7e3bf43e3545d67e', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '2f090b934ede76c8400b7891b6caa391e1f039b0', 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: '290e82532fc85421c08c0049755f2d03de5f4848', spacing: "12px" }, h("zonos-v-stack", { key: 'de37e3b7c156a952ff4906463f4e57c0e384af18', spacing: 12 }, h("div", { key: '3ce588bffccb7c41d5043d813fb6b9b0043d4fab', class: "zonos--flex-message" }, h("zonos-icon", { key: '3c955c3aa1a27566e503188a4a4f495c2daed5b1', "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", { key: '8b283197b31e82a8c15eff248e1ab55b28eba3d2' }, dutyDeMinimisMessage)), h("div", { key: '720af84433106750661c5d2e847c58ba673ee71c', class: "zonos--flex-message" }, h("zonos-icon", { key: '036e93ccbdafd6c6e911cc978f331c84ee542c73', "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", { key: 'ca33772a3fce849a35536502d95ca81d3e9b29cb' }, taxDeMinimisMessage)), additionalInformation && (h("div", { key: '254ac11735d2e3f5b3804d58c22847414df19753', class: "zonos--flex-message" }, h("zonos-icon", { key: '28d85fa72b8d0754ba5f1633f17bd0caf78abe36', "aria-label": "Low value order shipping restriction", content: BagIcon }), h("zonos-text", { key: '6ff2d5231f7fd942c0ff7b3391589984f5d0e7d2' }, additionalInformation))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '4d6593ce36f883bb538970008aa75ba3338654e5', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '66362e6aac0c8d9b5fe922c3af4d74642ff6fe8a' }, h("zonos-country-select", { key: '53fc96743eb427f76e6c658b1b3541f43afab25a', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: 'e4cc485d4574d11b5759e485be18e3e2cb0af966' }, h("zonos-language-select", { key: '579c3018f84fedf257253b6db0b0c172908662e2', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), h("zonos-card", { key: 'e7ec890c1673b4025e650ed737ee4ba0e37ceb5d', spacing: "12px" }, h("zonos-v-stack", { key: 'a09bc2634da2795a4f0e2ef8b66680db9b0e403d', spacing: 12 }, h("div", { key: '2182aac10dc9b654b81234188cf0ef4decb2328a', class: "zonos--flex-message" }, h("zonos-icon", { key: '362807633b9a55a4438e95a9150c4c80f5bd836b', "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", { key: '10bbbd399a255ad3a593b246d4b8b475e1c089e1' }, dutyDeMinimisMessage)), h("div", { key: '451c58a91d38413cc295a377e08ffa9947411112', class: "zonos--flex-message" }, h("zonos-icon", { key: '2eceeced9d2b0ab482c94b8edd768134ba936d2d', "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", { key: 'f4284b8e56522de93d5ca1160103ca2fac85250e' }, taxDeMinimisMessage)), additionalInformation && (h("div", { key: 'f9f0a09a1a7bfa85b2a70f843aabea7961250141', class: "zonos--flex-message" }, h("zonos-icon", { key: '147ee865b2708d662c185e4fe5d4dba7f099c310', "aria-label": "Low value order shipping restriction", content: BagIcon }), h("zonos-text", { key: 'ccb671b31672ebfd41369a9b0fda8e49ed3739cc' }, additionalInformation))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '16b584281762c987d375b15e5cd3b5784fce5cd4', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '1122d535ce9bf451aa823726764a1a662c0378df' }, h("zonos-country-select", { key: '73c417e435dcbb15be72879ecde8271cb5cc01a1', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '4555dcf5260fa976458f6d612efce72a39564abf' }, h("zonos-language-select", { key: 'c19ca73913d2b026976acc36c1d9eb68bf90f07c', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -55,6 +55,7 @@ const startExchangeRateTimeout = ({ isGuaranteed, maxAge, }) => {
 const getNewLocalization = async () => {
     log('get new localization store');
     const { isShippableCountry, selectedCountryCode } = localizationStore;
+    localizationStore.countryLandedCost = await getCountryLandedCost(localizationStore.selectedCountryCode);
     if (zonosStore.helloSettings.currencyBehavior === 'DISABLED' ||
         !isShippableCountry ||
         !selectedCountryCode) {
@@ -63,7 +64,6 @@ const getNewLocalization = async () => {
     const isGuaranteed = zonosStore.checkoutSettings.visibilityStatus === 'ENABLED';
     const { maxAge } = await triggerGetExchangeRate(isGuaranteed);
     startExchangeRateTimeout({ isGuaranteed, maxAge });
-    localizationStore.countryLandedCost = await getCountryLandedCost(localizationStore.selectedCountryCode);
 };
 const getCustomMessages = async () => {
     if (!localizationStore.selectedCountryCode || !zonosStore.storeId) {

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

@@ -1,10 +1,4 @@
 export const stringsArabic = {
-    '${percentage} GST due on any order above ${threshold} along with an import entry transaction fee and MPI levy.': {
-        value: '${percentage} ضريبة القيمة المضافة مستحقة على أي طلب يتجاوز ${threshold} بالإضافة إلى رسوم معاملة إدخال الاستيراد ورسوم MPI.',
-    },
-    '${percentage} GST due on any order above ${threshold}.': {
-        value: '${percentage} ضريبة القيمة المضافة مستحقة على أي طلب يتجاوز ${threshold}.',
-    },
     'Above de minimis threshold for': {
         value: 'أعلى من الحد الأدنى لـ',
     },
@@ -131,8 +125,8 @@ export const stringsArabic = {
     'Order total': {
         value: 'إجمالي الطلبية',
     },
-    'Orders to ${countryName} must be over ${threshold} to ship.': {
-        value: 'يجب أن تتجاوز الطلبيات إلى ${countryName} ${threshold} ليتم شحنها.',
+    'Orders to [countryName] must be over [threshold] to ship.': {
+        value: 'يجب أن تتجاوز الطلبيات إلى [countryName] [threshold] ليتم شحنها.',
     },
     Pay: {
         value: 'دفع',
@@ -167,6 +161,9 @@ export const stringsArabic = {
     'Prepay duties and taxes at checkout': {
         value: 'دفع الرسوم والضرائب مقدمًا عند الدفع',
     },
+    Reload: {
+        value: 'إعادة تحميل',
+    },
     'Restricted item': {
         value: 'عنصر مقيد',
     },
@@ -185,6 +182,9 @@ export const stringsArabic = {
     'Select a language': {
         value: 'اختر لغة',
     },
+    'Session timed out': {
+        value: 'انتهت الجلسة',
+    },
     Shipping: {
         value: 'الشحن',
     },
@@ -239,8 +239,8 @@ export const stringsArabic = {
     "We've sent an email confirmation of the order details for your review. And our team is carefully preparing your order so it arrives on time.": {
         value: 'لقد أرسلنا إليك تأكيدًا بالبريد الإلكتروني لتفاصيل الطلبية لمراجعتك. ويقوم فريقنا بإعداد طلبيتك بعناية حتى تصل في الوقت المحدد.',
     },
-    'Welcome to': {
-        value: 'مرحبا بكم في',
+    'Welcome to [storeName]!': {
+        value: 'مرحبًا بك في [storeName]!',
     },
     'Welcome!': {
         value: 'أهلا بك!',
@@ -254,9 +254,18 @@ export const stringsArabic = {
     "You're all set!": {
         value: 'أنت جاهز!',
     },
+    'Your checkout session has expired. Please reload the page to continue.': {
+        value: 'انتهت جلستك الدفعية. يرجى إعادة تحميل الصفحة للمتابعة.',
+    },
     'Your payment went through successfully! Thank you for shopping with us! We hope you had an enjoyable experience and your support means the world to us.': {
         value: 'تمت عملية الدفع بنجاح! شكرا لتسوقك معنا! نأمل أن تكون قد استمتعت بتجربة رائعة ودعمك يعني لنا الكثير.',
     },
+    '[percentage] GST due on any order above [threshold] along with an import entry transaction fee and MPI levy.': {
+        value: '[percentage] ضريبة القيمة المضافة مستحقة على أي طلب يتجاوز [threshold] بالإضافة إلى رسوم معاملة إدخال الاستيراد ورسوم MPI.',
+    },
+    '[percentage] GST due on any order above [threshold].': {
+        value: '[percentage] ضريبة القيمة المضافة مستحقة على أي طلب يتجاوز [threshold].',
+    },
     'business days': {
         value: 'أيام العمل',
     },