@zonos/elements 1.3.109 → 1.3.111

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.js

@@ -10,6 +10,7 @@ import { createCustomEvent } from "../../../utils/createCustomEvent";
 import { getBorderRadius } from "../../../utils/getBorderRadius";
 import { handleFetch } from "../../../utils/handleFetch";
 import { jsonParse } from "../../../utils/jsonParse";
+import { allLogs, log } from "../../../utils/logging/log";
 import { sendErrorLog } from "../../../utils/logging/sendErrorLog";
 import { submitGtag } from "../../../utils/submitGtag";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
@@ -17,6 +18,10 @@ import RemoveIcon from "./assets/RemoveIcon.svg";
 /* Need to use relative import because inline-svg-stencil couldn't resolve absolute path */
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import SuccessIcon from "./assets/SuccessIcon.svg";
+/**
+ * Maximum number of retries to pull order info (gap between each retry is 1 second)
+ */
+const MAX_RETRIES = 30;
 export class ZonosCheckoutFinish {
     constructor() {
         this.pullOrder = async () => {
@@ -51,57 +56,57 @@ export class ZonosCheckoutFinish {
             }
             window.location.href = url;
         };
-        this.handleSuccessBehavior = () => {
-            var _a, _b, _c, _d, _e;
+        this.handleSuccessBehavior = async () => {
+            var _a, _b;
             /**
              * Save placed order info so we can show order info if they try to place the order again
              */
             this.saveOrderIdForDuplicationIssue();
             const { successBehavior } = zonosStore.checkoutSettings;
-            const legacyOrderNumber = ((_c = (_b = (_a = this.order) === null || _a === void 0 ? void 0 : _a.references) === null || _b === void 0 ? void 0 : _b.find(entry => (entry === null || entry === void 0 ? void 0 : entry.key) === 'zonosOrderNumber')) === null || _c === void 0 ? void 0 : _c.value) || null;
-            if (cartStore.externalConfirmationPageURL) {
-                const redirectUrl = cartStore.externalConfirmationPageURL;
-                const queryParams = new URLSearchParams();
-                if ((_d = this.order) === null || _d === void 0 ? void 0 : _d.id) {
-                    queryParams.set('zOrderNumber', this.order.id);
-                }
-                if (legacyOrderNumber) {
-                    queryParams.set('orderId', legacyOrderNumber);
-                }
-                const queryString = queryParams.toString();
-                const hasQueryString = redirectUrl.includes('?');
-                this.redirectToUrl(queryString
-                    ? // Some url already has query string, so we need to append the query string with '&' instead of '?'
-                        `${redirectUrl}${hasQueryString ? '&' : '?'}${queryString}`
-                    : redirectUrl);
-            }
-            switch (successBehavior) {
-                case 'REDIRECT_TO_SUCCESS_PAGE': {
-                    const settingsRedirectUrl = zonosStore.checkoutSettings.successRedirectUrl;
+            switch (true) {
+                // If the merchant wants to redirect to a different page
+                case successBehavior === 'REDIRECT_TO_SUCCESS_PAGE':
+                case !!cartStore.externalConfirmationPageURL: {
+                    const settingsRedirectUrl = cartStore.externalConfirmationPageURL ||
+                        zonosStore.checkoutSettings.successRedirectUrl;
                     const redirectUrl = settingsRedirectUrl;
+                    // use different default notification message if we are redirecting to a different page
+                    this.notificationTitle = translate('Order complete!');
+                    this.notificationMessages = [
+                        translate('Your order has been successfully placed.'),
+                        translate("You will be redirected back to the merchant's site in a few seconds."),
+                    ];
+                    // stop loading spinner to show the redirecting notification
+                    this.isLoading = false;
+                    // override title if notification type is success
+                    this.useOverrideSuccessNotification();
+                    // attempt to pull order info before redirecting
+                    await this.getPullOrder();
+                    // If order is still not ready, should not redirect with no order id as merchant would show an error page and customer may think the order was not placed and retry
+                    if (!this.order) {
+                        return;
+                    }
+                    const legacyOrderNumber = ((_b = (_a = this.order.references) === null || _a === void 0 ? void 0 : _a.find(entry => (entry === null || entry === void 0 ? void 0 : entry.key) === 'zonosOrderNumber')) === null || _b === void 0 ? void 0 : _b.value) || null;
                     const queryParams = new URLSearchParams();
-                    if ((_e = this.order) === null || _e === void 0 ? void 0 : _e.id) {
+                    if (this.order.id) {
                         queryParams.set('zOrderNumber', this.order.id);
                     }
                     if (legacyOrderNumber) {
                         queryParams.set('orderId', legacyOrderNumber);
                     }
-                    if (redirectUrl) {
-                        const queryString = queryParams.toString();
-                        const hasQueryString = redirectUrl.includes('?');
-                        this.redirectToUrl(queryString
-                            ? // Some url already has query string, so we need to append the query string with '&' instead of '?'
-                                `${redirectUrl}${hasQueryString ? '&' : '?'}${queryString}`
-                            : redirectUrl);
-                    }
-                    // If no redirect URL, break and display Zonos success page
+                    const queryString = queryParams.toString();
+                    const hasQueryString = redirectUrl.includes('?');
+                    this.redirectToUrl(queryString
+                        ? // Some url already has query string, so we need to append the query string with '&' instead of '?'
+                            `${redirectUrl}${hasQueryString ? '&' : '?'}${queryString}`
+                        : redirectUrl);
                     break;
                 }
-                case 'CLOSE_MODAL':
-                    this.closeClickHandler();
-                    break;
-                case 'ZONOS_SUCCESS_PAGE':
+                case successBehavior === 'CLOSE_MODAL':
+                case successBehavior === 'ZONOS_SUCCESS_PAGE':
                 default:
+                    // override title if notification type is success
+                    this.useOverrideSuccessNotification();
                     // Do nothing, display Zonos success page
                     this.isLoading = false;
                     break;
@@ -110,44 +115,67 @@ export class ZonosCheckoutFinish {
         // TODO: This method of pulling orders is temporary. Once we have a working event registry system, we will rely on that to tell us when the order is ready to trigger onOrderSuccess
         this.getPullOrder = async (attempts = 0) => {
             var _a, _b;
+            if (attempts === 0) {
+                log('=== Start to poll for order info', 'info');
+            }
             const { baseUrl, order } = await this.pullOrder();
             const { isLegacyCheckout } = window.Zonos;
             const foundLegacyOrderNumber = !!((_b = (_a = order === null || order === void 0 ? void 0 : order.references) === null || _a === void 0 ? void 0 : _a.find(entry => (entry === null || entry === void 0 ? void 0 : entry.key) === 'zonosOrderNumber')) === null || _b === void 0 ? void 0 : _b.value);
-            if ((order && !isLegacyCheckout) ||
-                (!order && attempts >= 5) ||
+            const checkoutSessionId = cartStore.checkoutSessionId;
+            const maxRetries = parseFloat(new URLSearchParams(window.location.search).get('maxPollingRetries') ||
+                '0') || MAX_RETRIES;
+            if (
+            // Order found and was regular checkout user
+            (order && !isLegacyCheckout) ||
+                // Order found, in legacy checkout facade and still haven't found the legacy order number
+                (order && attempts >= maxRetries) ||
+                // Legacy order number is ready in the order
                 foundLegacyOrderNumber) {
-                if (isLegacyCheckout && !foundLegacyOrderNumber) {
+                log('=== Order info found', 'info');
+                if (isLegacyCheckout && order && !foundLegacyOrderNumber) {
                     // We pushed this one through without the legacy order number, so we should log this
-                    const checkoutSessionId = cartStore.checkoutSessionId;
                     void sendErrorLog({
-                        endpoint: `${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}&orderId=${order === null || order === void 0 ? void 0 : order.id}`,
-                        errors: [`Order found but legacy order number doesn’t exist`],
+                        endpoint: `${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}&orderId=${order.id}`,
+                        errors: [
+                            `Order found but legacy order number doesn’t exist after ${maxRetries} attempts`,
+                        ],
+                        metadata: {
+                            allLogs,
+                            checkoutSessionId: cartStore.checkoutSessionId || '',
+                            domain: window.location.hostname,
+                            orderId: order.id,
+                            storeId: zonosStore.storeId,
+                        },
+                    });
+                    return;
+                }
+                else if (attempts > 10) {
+                    // Log out all the logs if we have tried more than 10 times
+                    void sendErrorLog({
+                        endpoint: `${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}&orderId=${order.id}`,
+                        errors: [`Order found after ${attempts} attempts`],
                         metadata: {
+                            allLogs,
                             checkoutSessionId: cartStore.checkoutSessionId || '',
                             domain: window.location.hostname,
-                            orderId: (order === null || order === void 0 ? void 0 : order.id) || '',
+                            orderId: order.id,
                             storeId: zonosStore.storeId,
                         },
                     });
                 }
-                void trackConversionEvent('checkout_orderCompleted');
                 this.order = order;
-                this.handleSuccessBehavior();
             }
-            else if ((!order || !foundLegacyOrderNumber) && attempts < 5) {
+            else if ((!order || !foundLegacyOrderNumber) && attempts < maxRetries) {
                 // Wait for 1 second before the next attempt
                 await new Promise(resolve => setTimeout(resolve, 1000));
                 await this.getPullOrder(attempts + 1);
             }
             else {
-                // Set loading to false to display generic success page and log error
-                this.isLoading = false;
-                void trackConversionEvent('checkout_orderCompleted');
-                const checkoutSessionId = cartStore.checkoutSessionId;
                 void sendErrorLog({
                     endpoint: `${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}`,
-                    errors: ['Order not found after multiple attempts'],
+                    errors: [`Order not found after ${maxRetries} attempts`],
                     metadata: {
+                        allLogs,
                         checkoutSessionId: cartStore.checkoutSessionId || '',
                         domain: window.location.hostname,
                         storeId: zonosStore.storeId,
@@ -157,22 +185,18 @@ export class ZonosCheckoutFinish {
         };
         // If user provide override notification text, use it
         this.useOverrideSuccessNotification = () => {
-            const { successPageActionText, successPageSubtitleText, successPageTitleText, } = zonosStore.checkoutSettings;
+            const { successPageSubtitleText, successPageTitleText } = zonosStore.checkoutSettings;
             if (successPageTitleText) {
                 this.notificationTitle = successPageTitleText;
             }
             if (successPageSubtitleText) {
                 this.notificationMessages = successPageSubtitleText;
             }
-            if (successPageActionText) {
-                this.notificationActionText = successPageActionText;
-            }
         };
         this.checkStripePaymentStatus = async () => {
-            this.isLoading = true;
             const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
             if (clientSecret || this.storybookForceStatus) {
-                const { error, messages, paymentMethod } = await stripeStoreRetrievePayment({
+                const { error, messages, paymentIntentId, status } = await stripeStoreRetrievePayment({
                     clientSecret,
                     storybookForceStatus: this.storybookForceStatus,
                 });
@@ -181,38 +205,41 @@ export class ZonosCheckoutFinish {
                 this.notificationTitle = error
                     ? translate('Payment failed')
                     : translate("You're all set!");
-                if (error) {
+                // Payment doesn't go through
+                if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
                     submitGtag('zonos-checkout-payment-fail');
+                    void sendErrorLog({
+                        endpoint: 'Stripe payment failed',
+                        errors: [
+                            `Payment intent "${paymentIntentId}" status: ${status} - checkout session: ${cartStore.checkoutSessionId}`,
+                        ],
+                        metadata: {
+                            allLogs,
+                            credentialToken: window.Zonos.zonosApiKey,
+                        },
+                    });
                 }
                 else {
+                    // Save new order info in case the user reloads before we get order info
+                    this.saveOrderIdForDuplicationIssue();
                     submitGtag('zonos-checkout-success');
-                    void trackConversionEvent('checkout_paymentInfoCompleted', {
-                        paymentMethod,
-                    });
+                    void trackConversionEvent('checkout_orderCompleted');
                     const successEvent = createCustomEvent('zonos-checkout-success', {
                         message: 'Zonos Checkout successfully processed order',
                     });
                     document.dispatchEvent(successEvent);
-                }
-                // Attempt to pull the order details from the graph every second on 5 attempts. Only pull if checkoutSessionId is available
-                if (this.notificationType === 'success' && cartStore.checkoutSessionId) {
-                    // override title if notification type is success
-                    this.useOverrideSuccessNotification();
                     // wait this to finish before resetting store and checkout session id
-                    await this.getPullOrder();
+                    await this.handleSuccessBehavior();
                 }
-                else {
-                    this.isLoading = false;
-                }
-            }
-            else {
-                this.isLoading = false;
             }
+            // Make sure to stop the loading spinner even when there's an error
+            this.isLoading = false;
+            // reset promo when checkout is finished
+            stripeStoreResetPromoCode();
             stripeStoreReset();
             cartStore.checkoutSessionId = null;
         };
         this.checkPaypalPaymentStatus = async () => {
-            this.isLoading = true;
             // render error message if there's an error
             if (paypalStore.paypalErrorMessage) {
                 this.notificationType = 'error';
@@ -221,6 +248,8 @@ export class ZonosCheckoutFinish {
                 this.isLoading = false;
                 return;
             }
+            // show success message right away when order id is already created
+            this.isLoading = false;
             if (paypalStore.orderIdCreated) {
                 this.notificationType = 'success';
                 this.notificationTitle = translate("You're all set!");
@@ -229,11 +258,10 @@ export class ZonosCheckoutFinish {
                 // override title if notification type is success
                 this.useOverrideSuccessNotification();
                 // wait this to finish before resetting store and checkout session id
-                await this.getPullOrder();
+                await this.handleSuccessBehavior();
             }
             // reset promo when checkout is finished
             stripeStoreResetPromoCode();
-            this.isLoading = false;
             stripeStoreReset();
             paypalStoreReset();
             cartStore.checkoutSessionId = null;
@@ -262,10 +290,11 @@ export class ZonosCheckoutFinish {
         this.notificationType = 'success';
         this.notificationTitle = '';
         this.notificationMessages = [];
-        this.notificationActionText = translate('Keep shopping');
         this.order = null;
     }
     componentDidLoad() {
+        // Reset local storage for placed order info
+        localStorage.removeItem('zonos--placed-order-info');
         if (this.overrideNotification) {
             // just show the notification and don't check any of the payment status
             this.notificationType = this.overrideNotification.type;
@@ -274,8 +303,6 @@ export class ZonosCheckoutFinish {
             this.isLoading = false;
             return;
         }
-        // Save order info in case the user reloads before we get order info
-        this.saveOrderIdForDuplicationIssue();
         if (paypalStore.orderIdCreated) {
             void this.checkPaypalPaymentStatus();
         }
@@ -284,16 +311,12 @@ export class ZonosCheckoutFinish {
         }
     }
     render() {
-        var _a, _b, _c, _d;
-        const orderId = ((_a = this.order) === null || _a === void 0 ? void 0 : _a.accountOrderNumber) ||
-            ((_d = (_c = (_b = this.order) === null || _b === void 0 ? void 0 : _b.references) === null || _c === void 0 ? void 0 : _c.find(ref => ref.key === 'zonosOrderNumber')) === null || _d === void 0 ? void 0 : _d.value) ||
-            null;
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: '60abe11ec6d33ac9f390735b2343dc73ba323e0e', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: 'a255ef40504c8e569b44dcdde6a8026745f38c9f', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, this.isLoading && (h("div", { key: 'f3ca53a787f738a34d376fd48cb880ecd3344073', class: "loading-wrapper" }, h("zonos-spinner", { key: 'bc2ad04b786a98a8a87c4b5317aa88acc9770580' }))), !this.isLoading && (h("div", { key: '6578b0007e35062b11d71a498f78fee56b1175e6', class: "zonos--finish-details" }, h("div", { key: 'f1fc14ffeff3628fa8066e0386c37c66bd3fb8e1', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: 'a59f4022483e49b6ee9a4f3c0676e2f3d043ccae', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), orderId && (h("div", { key: '2032bc6031c42463a5896d43f49517489cf38734', class: "zonos--order-number" }, "Order #", orderId)), h("zonos-text", { key: 'da9f7af5b3db16551bd6389c1c92322be8d57aa0', textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '6a8503a7231cb66196919aeb6c6d1f84576e2577', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText)), isTestMode && cartStore.step === 'finish' && (h("div", { key: '80631312aa8ef98dd36cfda1e62f0274afc48002', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: 'e1fa412928b1292f09956613f9464e5fc32528e1', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '8d1708a411f334b9cf5a07d142d2d8aa9bddf29b', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
+            } }, !this.isLoading && (h("div", { key: 'a14c5a6476b6d77c8b070239b3dbf3b1248d91a1', class: "zonos--finish-details" }, h("div", { key: '7d1d11bc6d1648f6e05fa08c8afa38df2db4f773', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '6e2b00afd313f4724cbd0e3c0ff6d099a4eb0423', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '89ddff1e318401adcc01a1883628651688a39338', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null)))))), isTestMode && cartStore.step === 'finish' && (h("div", { key: '078de76fc1c106538d8ac586edc831639b94e2e1', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '30b68c106ad0eada43b8fadd0b20738d63af0f24', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: 'a8d092e0a2084ed2c1e2342a7aaf06bf309b559b', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
     }
     static get is() { return "zonos-checkout-finish"; }
     static get encapsulation() { return "shadow"; }
@@ -380,7 +403,6 @@ export class ZonosCheckoutFinish {
             "notificationType": {},
             "notificationTitle": {},
             "notificationMessages": {},
-            "notificationActionText": {},
             "order": {}
         };
     }

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-footer/zonos-checkout-footer.js

@@ -33,10 +33,10 @@ export class ZonosCheckoutFooter {
         const languageLabel = (_a = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
         // reverse color when on desktop. With the coversheet backdrop, the color should be white
         const colorDesktop = this.dataTheme === 'LIGHT' && !this.mobile ? 'gray-0' : 'gray-1000';
-        return (h(Host, { key: '23b8596ab642089e7109ef9f33e5c8f2f864fc04', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: '38a8d22389df15c429101560758e4aedabf67bfd', class: "zonos--checkout-footer" }, h("div", { key: '9767bbecf5daad5163372382504c4846a6f547c0', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: '1d66d656e6f305fbef4b2a5a360fdb7ac458f989', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: 'daa1cdff45356cb0b6f78b2ae37f009ef313d174', class: classes([
+        return (h(Host, { key: 'c84407b445b03673c739e526407d5daece2465c1', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: 'de44554ef9af66b36e957ffc7c03c3102eb54289', class: "zonos--checkout-footer" }, h("div", { key: 'c045ebefdfe7e0c78f003ba25478297713726adc', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: 'f9028e5d572a8563f4b223edf28554ecc6bc79a2', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: 'efa7bd0f7ff692d10eddacdcd922eefd8734dcde', class: classes([
                 'zonos--checkout-footer-dialog',
                 this.showLanguageDialog && 'zonos--checkout-footer-dialog-open',
-            ]) }, h("zonos-language-select", { key: '243ea828fbda5c8a046faa98783683b31e4a3780', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: 'c159a511f58d07c378f4d95edbcdc09782a95961', class: "zonos--checkout-footer-icon-wrapper" }, h("a", { key: '3ea84395f0dd0264a83a46f1aa1e7ab6a348caef', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: 'a59a40f9753cb520352e6c1f838291adaf9192f8', textColor: colorDesktop }, "Privacy policy")), h("div", { key: '26c23f55dd4033d98127bff82807a1512f84854e', class: "zonos--checkout-footer-logo" }, h("zonos-text", { key: 'af7d46c29c4f3fd800e66b06ad93869151cd115b', textColor: colorDesktop }, "Powered by"), h("a", { key: 'e1d393aed20e5c923a9b2ab4b0c136cd64a9f0fe', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '7e4119c1f187585321b821a394c82038dfaac838', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 })))))));
+            ]) }, h("zonos-language-select", { key: '4086571d445ad29f824975a6ad107d1351302d78', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: 'f16a9caea53befe23f6fc6f5690635d9cd6e196b', class: "zonos--checkout-footer-icon-wrapper" }, h("a", { key: '5ca1a5aadf50bb038209a505b8bece798c92efc5', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: 'c60d81728e5ebdddea08429eae156e312e407d35', textColor: colorDesktop }, "Privacy policy")), h("div", { key: 'e50935aea98312ab3ffd3c04e8155843e802791a', class: "zonos--checkout-footer-logo" }, h("zonos-text", { key: 'b8e10c2d63cf5bade264213ae2e37639b10347ae', textColor: colorDesktop }, "Powered by"), h("a", { key: '5f4ad624ac59e6e59d0bc73f70eb98399009cf1a', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'db358784c050fedfb7b0e4e02ca54c9926691963', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 })))))));
     }
     static get is() { return "zonos-checkout-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,8 +34,8 @@ import MessageIcon from "./assets/MessageIcon.svg";
 import RemoveIcon from "./assets/RemoveIcon.svg";
 // 90 minutes
 const CHECKOUT_SESSION_TIMEOUT = 90 * 60 * 1000;
-// 10 minutes
-const ORDER_DUPLICATION_NOTIFICATION_EXPIRATION = 10 * 60 * 1000;
+// 6 hours
+const ORDER_DUPLICATION_NOTIFICATION_EXPIRATION = 6 * 60 * 60 * 1000;
 export class ZonosCheckout {
     constructor() {
         /**

package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.js

@@ -172,13 +172,13 @@ export class ZonosShipping {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { key: '186cd73af5a86fdeafd0213f8923907d43167a66', class: "zonos--shipping zonos--elements" }, h("div", { key: '88681a6f08bdde1788a546cb1311ace4f065d408', class: "zonos--group" }, h("zonos-text", { key: '75deb5b42546d7b8d615d5613f687f9b0778377d', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!this.serviceLevelsAll.length && (h("zonos-banner", { key: '07669e8782f210132e8d170729a430035c7d6d7c', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: '869c3df8762f6c704bfac40c0b9a7a16e845045e', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !this.serviceLevelsAll.length ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), class: "zonos--shipping-method-error", intent: "error" })) : (h("div", { class: "zonos--shipping-options-wrapper" }, h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !!defaultShownServiceLevels.length &&
+        return (h(Host, { key: '7b16a998c47d1e834c1de3aaac030461e38e43d5', class: "zonos--shipping zonos--elements" }, h("div", { key: '796d1d43d1a409b6b94a8faa3a41bcfb8d26aeb2', class: "zonos--group" }, h("zonos-text", { key: '78629e22a49733794d6ac3bd56bd48c5c7a2ff5a', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!this.serviceLevelsAll.length && (h("zonos-banner", { key: 'fc0367bfad972e86f0f78fd7ac279c69aa51aeb8', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: 'e79faacea340e54ee6fcde62073d87960dfbfbcf', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !this.serviceLevelsAll.length ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), class: "zonos--shipping-method-error", intent: "error" })) : (h("div", { class: "zonos--shipping-options-wrapper" }, h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !!defaultShownServiceLevels.length &&
             !!this.serviceLevelsDAP.length && (h("button", { class: classes([
                 'zonos--shipping-options-collapse-trigger',
                 this.collapsedDAPOptions && 'collapsed',
             ]), onClick: () => {
                 this.collapsedDAPOptions = !this.collapsedDAPOptions;
-            } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { type: "label" }, `${translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), h("zonos-icon", { content: ChevronUpIcon })))), h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, h("div", { class: "zonos--dap-wrapper" }, h("zonos-banner", { bannerTitle: translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, translate('You may incur additional fees from the shipping carrier by not prepaying.')), h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }))))), h("div", { key: '571b9856c2dc767b082adb154c3f75f49366199d', class: "zonos--group-btn" }, h("zonos-button", { key: '4153a317ffa612867cf55763f586a58abda0473b', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+            } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { type: "label" }, `${translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), h("zonos-icon", { content: ChevronUpIcon })))), h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, h("div", { class: "zonos--dap-wrapper" }, h("zonos-banner", { bannerTitle: translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, translate('You may incur additional fees from the shipping carrier by not prepaying.')), h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }))))), h("div", { key: '03c7dc8d310db7dc161b064a1f384034e8b5a067', class: "zonos--group-btn" }, h("zonos-button", { key: '33d4afb9f86b8f8e5a8843c2ccfefac3e9ec1d76', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Go to payment'))))));
     }

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

@@ -15,16 +15,16 @@ export class ZonosBadge {
         this.dismissHandler = undefined;
     }
     render() {
-        return (h(Host, { key: '9704ae6d10af4b720e1edf9ccc0263d4463e64f2', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: '0d5b32ba989420e4f68519f519db3227568a3cd9', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'e395b7477591edff91059aefc4d3858f45d61098', class: classes([
+            } }, h("div", { key: '43ea955a3005bed1bf30736b9515dc59fc5d9166', class: classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", { key: '92eeb162849c9036bb102012e14fb6476b34b411', textColor: `${this.badgeColor}-800` }, h("slot", { key: '3a52067262d1ba34eb5952dc2f2eaeeb1daa624c' })), this.dismissHandler && (h("zonos-icon", { key: '0f942d51c02d0b830c5d60c0bc9f4f9c64a67a8a', "aria-label": "Remove action", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
+            ]) }, this.icon, h("zonos-text", { key: '4ba9b812daf3f977eb7558717d1ccdb6337dab81', textColor: `${this.badgeColor}-800` }, h("slot", { key: 'e55243d80edfd4d2ac855b72c3d10f23a2145a6d' })), this.dismissHandler && (h("zonos-icon", { key: 'dcce519c1a2d75021922adabdd640995994a971e', "aria-label": "Remove action", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,12 +121,12 @@ export class ZonosButton {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'c8e781921a30afccbbe3dd187632aa06135420df', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: '3bb9845e23e10deb5988e6b2c0904b0ea1afeeea', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: '1783400cd4ae43832789ba63649b7962d7e08d6c', class: classes([
+            }) }, h("button", { key: 'd2237dc9995cd537d77c169880937a83350ae683', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -141,7 +141,7 @@ export class ZonosButton {
                 backgroundColor && variant === 'standard' && 'override-background',
             ]), disabled: disabled, style: {
                 justifyContent: this.justifyContent,
-            } }, this.loading && (h("div", { key: '7f1c3907f9dbbc42613db7b976d358d477caaac4', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'be0002a169ebf26eb4bbf65f5a057840a90fe937', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '4204bc86e934884015fcd09be7ffe79931f5c112', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            } }, this.loading && (h("div", { key: '4756ec69aa3bcd84406f4039567191fdf831f23f', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '0bcaad4c29bd28f14ecac8fe11a4ae9a16cee543', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'bdfdb5ebc08371dbe4e680cc252c4e9841756ec8', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,16 +22,16 @@ export class ZonosCard {
             customRoundRadius: `${this.borderRadius}px`,
             overrideBorderStyle: 'ROUNDED',
         });
-        return (h(Host, { key: 'eb938f526afeb2d8c70b3ce6d5e219fb82dccd4b', style: {
+        return (h(Host, { key: '632905e207d9dd9f8392759cad2885291ce66aea', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'd1c94fc6d2f2bc4fa157901116209a0ec2b2c6bc', class: classes(['styled-card']), style: {
+            } }, h("div", { key: '3eff8df6e47265977e82180ee7d6ac2b32861000', class: classes(['styled-card']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderRadius,
                 padding: this.spacing,
-            } }, this.label && (h("header", { key: 'c91e1e4620f6c16a51cb0240528cf17de5f65192', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: 'c0516125052b5369f49fa90696f0f1ff9707cd76', type: "subheader" }, this.label), h("h-stack", { key: '025ee9b66a9f0d354efe41e16cbe7f78ea74cdf5', spacing: 8 }, this.actions))), h("slot", { key: '27805390a0d386f68f65cd23f86e04c5489eb291' }), (this.footerActions || this.footerContent) && (h("footer", { key: '7a6d615316e46f32f2dd70988c425edb99089fd9', class: "card-footer", style: {
+            } }, this.label && (h("header", { key: '1eb39042c68381efa46e762e48096366975a1b61', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: '573de073bc15576ad3af98af703aa03a3135aebb', type: "subheader" }, this.label), h("h-stack", { key: '03f11b944d438db45a93ff7448e89b44f82e14fe', spacing: 8 }, this.actions))), h("slot", { key: '582071d03c2866271320aea7f30a4b5d9d63ff41' }), (this.footerActions || this.footerContent) && (h("footer", { key: '6909cb6983ce84f517deef48758271c8797b6ac4', class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
-            } }, h("div", { key: '72c6cba3976cfcaf693af897db891c015bba7cd6' }, this.footerContent), h("h-stack", { key: 'c52f116dae77617934090a33a89602f0f4bd5c5a', spacing: 8 }, this.footerActions))))));
+            } }, h("div", { key: '6ff0f9ba56df40829dfd01663cc6ce528b880fda' }, this.footerContent), h("h-stack", { key: '8270f150b0c1b82dc37cb04a112998e23c110ed2', spacing: 8 }, this.footerActions))))));
     }
     static get is() { return "zonos-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,14 +36,14 @@ export class ZonosCheckbox {
             customRoundRadius: '4px',
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '8613d885c639d01671743dbdb0583c390718c732', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: '5309db6094793a992d4a605a6d1e3c83ced3c9d0', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--size': `${this.size}px`,
-            } }, h("label", { key: '803434d7a63e1735bf0ef15a9e4c7fb515bfff41', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'a19a46a896597f4c47d4ec790a21b5133c13b952', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: '06e34043130ada8ca8abd0d0930ba60c7e0b9371', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'fe09f13ccd0b15c6d71cb21fc1742c1243c04b66', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '7f4b933f9626bc05f052d79fa25a0c46ee16f492', class: "checkmark-container" }, h("svg", { key: '775d0b011a1430f712e8f633e2850d6f6e193f36', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'eef97178731ac1bf9885d5cfd57afa514c20df5f', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '0f72347f0b21817cd176393219374008a056b590', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: 'c523e7e7919e8d26cb4a62790af04915d2f939d8', class: "checkmark-container" }, h("svg", { key: '95b0359976b4796a9186069a04c5568a13132b8e', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '68ecd2567b9c8922bd6919290f0f8affcaca0c2c', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '52b38dcd04947a0a0106f565a124cd4a0f9d17db', size: this.fontSize }, this.label)))));
     }
     static get is() { return "zonos-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.js

@@ -64,17 +64,17 @@ export class ZonosCheckoutProgressTabs {
                 color: labelSelectedColor,
             })
             : labelSelectedColor;
-        return (h(Host, { key: 'f7310a3631e3a1061d8f08af0fc7337fb0a6be26', class: "zonos--elements", style: {
+        return (h(Host, { key: 'cb720c17828585b4e5235c0695d1887efacfc232', class: "zonos--elements", style: {
                 '--color': contrastLabelColor,
                 '--progress-percent': this.getTotalSuccessStep(),
-            } }, h("div", { key: 'fafce1662609cf7c966d9062ef55594d43e58643', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
+            } }, h("div", { key: '3249121ebbb26b8a377f0fdf39700e5098374bae', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
             const isSelected = tab.value === selectedStep;
             return (h("button", { class: classes([
                     'zonos--tab-item',
                     tab.value === selectedStep && 'selected',
                     tab.isDone && 'done',
                 ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => (cartStore.step = tab.value) }, h("div", { class: "zonos--tab-index" }, h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1000', type: "label" }, index + 1), h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1000' })), h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1000', type: "label" }, translate(tab.label))));
-        })), h("div", { key: '3d2a5c5289a694bf6ec8e93ba15ee4f79123d149', class: "zonos--tab-progress" }, h("div", { key: '7d6ea3e0c81cdb354ccf31748bf88d1937037c52', class: "zonos--progress-bar-fill" }))));
+        })), h("div", { key: 'da31d2d0a835182509a8199dc4fa9f1278be23e1', class: "zonos--tab-progress" }, h("div", { key: '6523c3e32b0926915b7d06f9cb19f6fc427c0e84', class: "zonos--progress-bar-fill" }))));
     }
     static get is() { return "zonos-checkout-progress-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,10 +42,10 @@ export class ZonosCollapse {
             // set overflow to hidden to prevent content from showing when collapsed
             this.el.style.overflow = 'hidden';
         }
-        return (h(Host, { key: 'ee7ff46100d39b9baaf4eec60f9ae0a170ed793e', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: '22d1cfa07362c868ff1b58315789d3d65bcce556', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: '8d59ba91560d35c13ce202370119c02f4af08431' }, h("iframe", { key: '4a7acd6d26f8ed38a405b03e987f3a011c52b94a', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'dca0ec42b16a23f36724b6b8f2a730999a9b1367' }))));
+            } }, h("div", { key: 'fa8c388a6497311d4dd4989e3f9ad2f7f3b8ee82' }, h("iframe", { key: 'b93e841bc726709fdca538d7fed38e09470c3ff5', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'aac6f96a0d928d372248f3fa1a906cd764f6e0d3' }))));
     }
     static get is() { return "zonos-collapse"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,13 +83,13 @@ 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: '3ce72ff0cc986ba772ccd376d5619587f14fd3ea', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
+        return (h(Host, { key: '2ae28cccbc55249c415bdeb1f3b6ebfcd16705fd', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
                 '--border-radius': borderStyle,
                 '--dialog-width': `${this.dialogWidth}px`,
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '2963b8604b543e3c36c1079db78fe77dceaed215', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '3a5b515ca3d88b7ae78f0d81ad7127c610ab786e', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: 'b6070c25fefc396e5303240d58ae809dee4f8548', class: "zonos--confirm-dialog", onBlur: () => {
+            } }, h("div", { key: '6887502fc45f8726e00875c1533853f170d61b69', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '9e303d17187cf0c8d281e4faa9ad65704b7b5f56', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '2a7a8633c62e14bb134ebb6cd08050a558498afc', class: "zonos--confirm-dialog", onBlur: () => {
                 this.focusDialog();
-            } }, h("div", { key: 'cd67ad63f17ba734a417ffed3899044c70cfa16c', class: "wrapper" }, h("div", { key: '2801b0ab1e0931c00a103cc9fc2e983a7cb73452', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '9ab775b2c8fc9e042d92cddbee72cab31ebde7a3', class: "content" }, h("div", { key: '4a884d0d55bc4dde0d24d5d51328c0f27d221dae', class: "title" }, h("zonos-text", { key: '465ccc7a97b7192f1b1c4810627db583c95cd9c0', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '4ef4d0544128c4a3c87521aa509b28d42e6f2a25', class: "subtitle" }, h("zonos-text", { key: '484e097b9fa41ddabcbb2c8e350c0cdbb232887b', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: '364b576633445f8b58e3824a817ff157950e8505', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: 'f483efb2564f687ad664aed0e7f578b7187f9c15', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: 'c0329025de32980a7a3478ad32153f9b5e90c16c', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+            } }, h("div", { key: '738395a26d051c099893c9d186e711742b87fd0d', class: "wrapper" }, h("div", { key: '6037c59790568e095c42fabd6bc2c02d026e36de', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '0db72c9e8702e642e6eba5d81d2560f69491742e', class: "content" }, h("div", { key: 'a6e25a16aba531ed8e4f0400c44df1ef5f3bd968', class: "title" }, h("zonos-text", { key: '8d572ed39778bb406bf69791fe8c8685c03a884f', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: 'c4a57430c8fc7003be681857f4a5a5c9588c4a38', class: "subtitle" }, h("zonos-text", { key: '73d8b2ca508ab2e022b92f12a0f6bbc0d4c6abe2', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: 'f7c52a24a3ed7ca4ac63b57dc38dc67b6272d9f3', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: '50906e6744254cb190e0e13e51c7509f3560623e', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '9b25a61bca74e9ee10e5f9057232faf3507acbe8', 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"; }

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

@@ -44,9 +44,9 @@ export class ZonosCountrySelect {
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
         const isEmpty = !filteredCountries.length;
-        return (h(Host, { key: 'f3257748b306e07d0a644fc8d87870e9d5d462b4', class: "zonos--elements", style: {
+        return (h(Host, { key: 'ca2d15b7e1b015647a56469047fcde2076eb53f7', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '1704b9f79ccc13556c23f31354b7095786f21a2a', class: "zonos--country-select" }, h("zonos-v-stack", { key: '5b299d1a7dd781c3f7a09608c91941ec441018b8', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '10505e722658eee0cbb732fb4ee3fc2962b406df', handleOnClose: () => this.handleOnClose(), label: translate('Select a country') }, h("input", { key: 'e50fc2f2e33deb4d9147518867cc095e380df707', autocomplete: "off", autofocus: "autofocus", class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: translate('Search countries'), value: this.inputValue }))), h("div", { key: 'dba1d15adead635c53d45575d6b7bb4e10675e70', class: "zonos--country-select-content" }, isEmpty && (h("zonos-text", { key: 'cec5fcc95a1ff33f96c219afe121a4f3f92ee713', class: "no-country", textColor: "gray-800" }, translate('No countries found'))), h("zonos-virtual-scroll", { key: '6fe6e1e53327179664c1e2643a10a37edc27e1cd', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index => {
+            } }, h("div", { key: '7b17008dc0e05f2c0bd7e5d2b8e11f7bbc179f13', class: "zonos--country-select" }, h("zonos-v-stack", { key: '34d80924f011f447c8a1fbd0c70317a7e719afab', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '87b671b9f67ab69f19ead665c28cff0727838f4c', handleOnClose: () => this.handleOnClose(), label: translate('Select a country') }, h("input", { key: '57137401c8dca3d88eb59192e85dc81ae0892c67', autocomplete: "off", autofocus: "autofocus", class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: translate('Search countries'), value: this.inputValue }))), h("div", { key: '99d772c8e074bdd66cc3166388e79bd9cd5b22b7', class: "zonos--country-select-content" }, isEmpty && (h("zonos-text", { key: '7b5958e70d457310fb13704f9681d4002a48cd4d', class: "no-country", textColor: "gray-800" }, translate('No countries found'))), h("zonos-virtual-scroll", { key: 'ae7eb7938141016c5442553fd5b745083e23f44a', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index => {
                 const country = filteredCountries[index];
                 if (!country) {
                     return null;

package/dist/collection/components/common/zonos-custom-message/zonos-custom-message.js

@@ -8,9 +8,9 @@ export class ZonosCustomMessage {
     }
     render() {
         const messageWithLinks = formatStringWithLinks(this.message);
-        return (h(Host, { key: 'f2542efde5b2180f518eb0f1a0be8ec2f3deb63d', class: "zonos--elements", style: {
+        return (h(Host, { key: '096cea7d57ab1c8fca1fadf4b68f0285e0e1d3c6', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { key: '8697b4134a09c6ed259f2570d46789833039ba0f', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: 'ef707a0a88d04dd75c81eac9a27db9ac7218925a', class: "zonos--flex-message" }, h("zonos-icon", { key: 'f6e16706c1da3c01948908c24d1115d5f4ced0fa', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'd9c3c382cce91a122bf4bd0439960fa492ac03e7', innerHTML: messageWithLinks }))))));
+            } }, this.message && (h("zonos-card", { key: '2718d07d60779749b70045d9554c58d9fd88dd35', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: 'd0cf15bf81ced064b50756bb950e8fa32d8afb1c', class: "zonos--flex-message" }, h("zonos-icon", { key: 'b92ab3807d532f4a267f2d3b176062221f9ea86d', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: '4760b0c6c6a72457b5a8c742b091d2fc5c62b15b', innerHTML: messageWithLinks }))))));
     }
     static get is() { return "zonos-custom-message"; }
     static get encapsulation() { return "shadow"; }