@zonos/elements 1.3.246 → 1.3.248

package/dist/cjs/zonos-cart-items_12.cjs.entry.js

@@ -3,27 +3,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-52cf3366.js');
-const localization = require('./localization-b1075a8c.js');
-const renderCheckoutCurrency = require('./renderCheckoutCurrency-55056c97.js');
+const cart = require('./cart-28310848.js');
+const localization = require('./localization-00e73920.js');
+const renderCheckoutCurrency = require('./renderCheckoutCurrency-9e919b9f.js');
 const cleanHtmlMarkdown = require('./cleanHtmlMarkdown-577d0a77.js');
 const classes = require('./classes-b7918f56.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
-const hasInclusivePrice = require('./hasInclusivePrice-dbb82df8.js');
-const paypal = require('./paypal-e339cc8c.js');
+const hasInclusivePrice = require('./hasInclusivePrice-134b0250.js');
+const paypal = require('./paypal-3019ae94.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
 const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
+const submitGtag = require('./submitGtag-a50ab32e.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-const placeTestOrder = require('./placeTestOrder-3dfbe3d6.js');
+const placeTestOrder = require('./placeTestOrder-b0369cfd.js');
 const isDarkColor = require('./isDarkColor-878e600e.js');
+const getContrastColor = require('./getContrastColor-30848800.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
 const updateCheckoutSessionAttributes = require('./updateCheckoutSessionAttributes-3a1db9de.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');
-const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-eda13ef8.js');
+const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-b8abf6de.js');
 const TaxId = require('./TaxId-12acedde.js');
+require('./isContrastColor-09f5924a.js');
 require('./debounce-815d1517.js');
+require('./ShortAddressCode-bec338b0.js');
 
 const zonosCartItemsCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column{padding:8px;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--cart-table td{vertical-align:top}:host .zonos--cart-item-name{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:12px}:host .zonos--cart-item-name .zonos--cart-item-quantity>*{display:inline-block}:host .zonos--cart-item-price zonos-text{white-space:nowrap}:host img{min-width:40px;margin-top:6px}";
 const ZonosCartItemsStyle0 = zonosCartItemsCss;
@@ -356,6 +360,56 @@ const ZonosCheckoutFinish = class {
                 order: json,
             };
         };
+        /**
+         * Metadata for purchase event in GA4
+         */
+        this.buildPurchaseMetadata = ({ checkoutSessionId, currency, }) => {
+            var _a, _b, _c, _d, _e, _f;
+            const items = cart.cartStore.items
+                .filter(item => item.amount >= 0)
+                .map(item => ({
+                item_id: item.sku || item.productId || item.name,
+                item_name: item.name,
+                price: item.amount,
+                quantity: item.quantity,
+            }));
+            /**
+             * The value of this parameter should be the sum of all item amounts in the transaction (without shipping and tax).
+             * @ref https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtag#parameters_22
+             */
+            const subtotal = ((_a = cart.cartStore.checkoutSession) === null || _a === void 0 ? void 0 : _a.subtotals.items) ||
+                ((_b = this.order) === null || _b === void 0 ? void 0 : _b.amountSubtotals.items);
+            const currencyCode = ((_c = cart.cartStore.checkoutSession) === null || _c === void 0 ? void 0 : _c.subtotals.presentmentCurrencyCode) ||
+                ((_d = this.order) === null || _d === void 0 ? void 0 : _d.currencyCode) ||
+                (currency === null || currency === void 0 ? void 0 : currency.toUpperCase());
+            // Cart subtotal amount, can be different on the final checkout session/payment intent, therefore only use it if the order/checkout session can not be found.
+            const cartSubtotal = items.reduce((acc, item) => acc + item.price * item.quantity, 0);
+            const cartCurrency = (_e = cart.cartStore.items.find(Boolean)) === null || _e === void 0 ? void 0 : _e.currencyCode;
+            const transactionId = ((_f = this.order) === null || _f === void 0 ? void 0 : _f.id) || checkoutSessionId || new Date().getTime().toString();
+            if (currencyCode && subtotal) {
+                return {
+                    currency: currencyCode,
+                    items,
+                    transaction_id: transactionId,
+                    value: subtotal,
+                };
+            }
+            // Use cart currency and subtotal if the order/checkout session can not be found
+            if (cartCurrency && cartSubtotal) {
+                return {
+                    currency: cartCurrency,
+                    items,
+                    transaction_id: transactionId,
+                    value: cartSubtotal,
+                };
+            }
+            return {
+                currency: undefined,
+                items,
+                transaction_id: transactionId,
+                value: undefined,
+            };
+        };
         this.redirectToUrl = (url) => {
             // reset store and checkout session id before redirecting
             cart.stripeStoreReset();
@@ -538,7 +592,7 @@ const ZonosCheckoutFinish = class {
         this.checkStripePaymentStatus = async () => {
             const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || cart.stripeStore.clientSecret;
             if (clientSecret || this.storybookForceStatus) {
-                const { error, messages, status } = await cart.stripeStoreRetrievePayment({
+                const { currency, error, messages, status } = await cart.stripeStoreRetrievePayment({
                     clientSecret,
                     storybookForceStatus: this.storybookForceStatus,
                 });
@@ -564,7 +618,12 @@ const ZonosCheckoutFinish = class {
                 window.history.replaceState({}, '', url.toString());
                 // Payment doesn't go through
                 if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
-                    paypal.submitGtag('zonos-checkout-payment-fail');
+                    submitGtag.submitGtag({
+                        event: 'zonos-checkout-payment-fail',
+                        metadata: {
+                            checkoutSessionId: localization.storageStore.checkoutSessionId,
+                        },
+                    });
                     void handleFetch.sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
@@ -579,8 +638,21 @@ const ZonosCheckoutFinish = class {
                 else {
                     // Save new order info in case the user reloads before we get order info
                     this.saveOrderIdForDuplicationIssue();
-                    paypal.submitGtag('zonos-checkout-success');
                     const checkoutSessionId = localization.storageStore.checkoutSessionId;
+                    submitGtag.submitGtag({
+                        event: 'zonos-checkout-success',
+                        metadata: this.buildPurchaseMetadata({
+                            checkoutSessionId: checkoutSessionId || '',
+                            currency: currency === null || currency === void 0 ? void 0 : currency.toUpperCase(),
+                        }),
+                    });
+                    submitGtag.submitGtag({
+                        event: 'purchase',
+                        metadata: this.buildPurchaseMetadata({
+                            checkoutSessionId: checkoutSessionId || '',
+                            currency: currency === null || currency === void 0 ? void 0 : currency.toUpperCase(),
+                        }),
+                    });
                     void cart.trackConversionEvent({
                         checkoutSessionId,
                         eventName: 'checkout_orderCompleted',
@@ -626,7 +698,18 @@ const ZonosCheckoutFinish = class {
             // show success message right away when order id is already created
             this.isLoading = false;
             if (paypal.paypalStore.orderIdCreated) {
-                paypal.submitGtag('zonos-checkout-success');
+                submitGtag.submitGtag({
+                    event: 'zonos-checkout-success',
+                    metadata: this.buildPurchaseMetadata({
+                        checkoutSessionId: localization.storageStore.checkoutSessionId || '',
+                    }),
+                });
+                submitGtag.submitGtag({
+                    event: 'purchase',
+                    metadata: this.buildPurchaseMetadata({
+                        checkoutSessionId: localization.storageStore.checkoutSessionId || '',
+                    }),
+                });
                 const checkoutSessionId = localization.storageStore.checkoutSessionId;
                 void cart.trackConversionEvent({
                     checkoutSessionId,
@@ -688,11 +771,11 @@ const ZonosCheckoutFinish = class {
     }
     render() {
         const isTestMode = handleFetch.getIsTestMode();
-        return (index.h(index.Host, { key: '7b18913d8ebe7be5cbe9ee7d520b643c342c409d', class: "zonos--checkout-finish zonos--elements", style: {
+        return (index.h(index.Host, { key: '80a543fca5dbc63dde41806702b2f6dd4fa849ab', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (index.h("div", { key: 'afb522b8b3b769817c00312fc9c14b4c032873ca', class: "zonos--finish-details" }, index.h("div", { key: 'c8cd43bc5269f7f252abaeb25dc98929f52b89bb', class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { key: '1a7ead411d64fc8edf2de0383049bfd60660a315', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", { key: '0c63714bbefc4e9beb1d2cf7414e5774bab4eabe', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (index.h("zonos-button", { key: '06304d9815e2199108dfcb3dade1494f17b76137',
+            } }, !this.isLoading && (index.h("div", { key: '6cab293041902e156563f37db6f0e77caaeeaaf9', class: "zonos--finish-details" }, index.h("div", { key: '6bf32844fa9d38eae6e9f337e56b7918e49bf793', class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { key: 'bf13e59b7bc2380609ffba879fa2b1d8c5d9a9e0', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", { key: 'c246affb94a9799e0c556affb73b2ebfb69a9c7f', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (index.h("zonos-button", { key: '61fa4fa0e09c0ce2905281b2696f42172c7a2bcd',
             // Only show loading spinner if it's not an error notification
             loading: this.isWaitingToRedirect &&
                 this.notificationType !== 'error', onClick: () => {
@@ -704,9 +787,9 @@ const ZonosCheckoutFinish = class {
                 }
                 this.closeClickHandler();
             }, size: "md", variant: "primary" }, localization.translate('Close'))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (index.h("zonos-button", { key: '9b809e21052fddb2149a2a1d0c22db4b10808403', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
+            this.shouldRenderKeepShoppingButton() && (index.h("zonos-button", { key: '9227d7832ed477be556cb6d59c644a74c293c740', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
             cart.cartStore.step === 'finish' &&
-            this.notificationType === 'success' && (index.h("div", { key: '4a278c7c4270d265c61b6b36d20864c55e1b42f1', class: "zonos--finish-button-wrapper" }, index.h("zonos-button", { key: 'fd8a876a0c5b76edd3be2d9b28da9c3963aee714', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), index.h("zonos-button", { key: '7882981c1fe01ab6f78d8f84bcfc9aab94bffb74', onClick: () => {
+            this.notificationType === 'success' && (index.h("div", { key: '9107be1ef7895b0a5e3fe0a985036a11de7011d3', class: "zonos--finish-button-wrapper" }, index.h("zonos-button", { key: 'b0de8743bea8dd9ac7099bd5b77811f80d80a380', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), index.h("zonos-button", { key: 'f90749b9af4c17eac554efb6d3d12cc41ac6e3c8', onClick: () => {
                 const isZonosDashboard = window.location.hostname.includes('dashboard.zonos.com');
                 this.redirectToUrl(isZonosDashboard
                     ? '/orders/all'
@@ -824,7 +907,7 @@ const ZonosCheckoutPayment = class {
          * handler for continue button click
          */
         this.continueClickHandler = async ({ currencyCode, }) => {
-            var _a;
+            var _a, _b;
             if (!this.handleValidate()) {
                 this.showErrorBanner = true;
                 // Attempt to submit the form so the missing input error will be shown in Stripe
@@ -839,7 +922,13 @@ const ZonosCheckoutPayment = class {
             }
             cart.stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            paypal.submitGtag('zonos-checkout-payment-info');
+            submitGtag.submitGtag({
+                event: 'zonos-checkout-payment-info',
+                metadata: {
+                    checkoutSessionId: localization.storageStore.checkoutSessionId,
+                    paymentMethod: (_b = cart.stripeStore.stripePaymentEventData) === null || _b === void 0 ? void 0 : _b.value.type,
+                },
+            });
             this.continueClicked.emit();
         };
         this.copyCardToClipboard = async (cardNumber) => {
@@ -965,37 +1054,6 @@ const ZonosCheckoutPayment = class {
 };
 ZonosCheckoutPayment.style = ZonosCheckoutPaymentStyle0;
 
-const getContrastColor = ({ backgroundColor, color, }) => {
-    if (backgroundColor === color) {
-        if (isDarkColor.isDarkColor(color)) {
-            const ligherColor = isDarkColor.tinycolor(color).lighten(40).toHexString();
-            return ligherColor;
-        }
-        const darkerColor = isDarkColor.tinycolor(color).darken(40).toHexString();
-        return darkerColor;
-    }
-    // get readibility of the color
-    const isContrastEnough = paypal.isContrastColor({
-        backgroundColor1: backgroundColor,
-        backgroundColor2: color,
-    });
-    if (isContrastEnough) {
-        // no need to change the color if it's already contrast enough
-        return color;
-    }
-    if (isDarkColor.isDarkColor(color)) {
-        return '#ffffff';
-    }
-    const newDarkerColor = isDarkColor.tinycolor(color).darken(25).toHexString();
-    const newLigherColor = isDarkColor.tinycolor(color).lighten(25).toHexString();
-    // get readibility of the color
-    const isNewColorContrastEnough = paypal.isContrastColor({
-        backgroundColor1: backgroundColor,
-        backgroundColor2: newDarkerColor,
-    });
-    return isNewColorContrastEnough ? newDarkerColor : newLigherColor;
-};
-
 /**
  * Reset any done tabs after selected tab to undone. This is to force user to go through all tabs again
  */
@@ -1083,7 +1141,7 @@ const ZonosCheckoutProgressTabs = class {
         const backgroundColor = this.backgroundColor || zonosStore.zonosStore.appearance.colorPrimary || '';
         // If the background color and the tab color are not contrat enough, increase the contrast of the label color
         const contrastLabelColor = backgroundColor && labelSelectedColor
-            ? getContrastColor({
+            ? getContrastColor.getContrastColor({
                 backgroundColor: isColorVariable.isColorVariable(backgroundColor)
                     ? window
                         .getComputedStyle(this.ele)
@@ -1143,6 +1201,43 @@ const ZonosCurrencyToggle = class {
     static get assetsDirs() { return ["assets"]; }
 };
 
+const shortAddressCodeValidationResult = ({ shippingCountry, shortAddressCode, }) => {
+    // Check to see if we are required to collect short address code for the shipping country or not
+    const isShortAddressCodeInputRendered = shouldRenderTaxIdInput.shouldRenderShortAddressCodeInput({
+        countryCode: shippingCountry,
+    });
+    // If the short address code input is not even rendered, no need to validate anything and allow to proceed. Validate when short address code input is not even rendered would prevent the user from checking out
+    if (!isShortAddressCodeInputRendered) {
+        return {
+            error: null,
+            valid: true,
+        };
+    }
+    /**
+     * If the short address code input is rendered, the input should be filled
+     */
+    if (!shortAddressCode) {
+        return {
+            error: 'Short address code is required.',
+            valid: false,
+        };
+    }
+    if (shippingCountry === 'SA') {
+        const isValid = /^[A-Za-z]{4}\s*[0-9]{4}$/.test(shortAddressCode);
+        if (!isValid) {
+            return {
+                error: 'Invalid short address code format. Must be 4 letters and 4 numbers.',
+                valid: false,
+            };
+        }
+    }
+    //  Other countries doesn't need to validate short address code in the right format
+    return {
+        error: null,
+        valid: true,
+    };
+};
+
 const isTaxIdRequired = (shippingCountry) => {
     const requireTaxIdCountry = [
         'MX',
@@ -1275,6 +1370,10 @@ const ZonosCustomerInfo = class {
          * Whether or not the tax id input is invalid
          */
         this.taxIdErrorMessage = '';
+        /**
+         * Whether or not the short address code input is invalid
+         */
+        this.shortAddressCodeErrorMessage = '';
         /**
          * Whether or not the shipping address contains invalid characters
          */
@@ -1526,7 +1625,14 @@ const ZonosCustomerInfo = class {
                 shippingCountry: this.shippingCountry,
                 taxId: cart.stripeStore.taxId,
             });
+            const { error: shortAddressCodeError, valid: validShortAddressCode } = shortAddressCodeValidationResult({
+                shippingCountry: this.shippingCountry,
+                shortAddressCode: cart.stripeStore.shortAddressCode,
+            });
             this.taxIdErrorMessage = !validTaxId ? localization.translate(error) : '';
+            this.shortAddressCodeErrorMessage = !validShortAddressCode
+                ? localization.translate(shortAddressCodeError)
+                : '';
             const addressLengthErrorList = this.validateAddressLength({
                 address: cart.stripeStore.stripeAddressEventData,
                 type: 'shipping',
@@ -1543,6 +1649,7 @@ const ZonosCustomerInfo = class {
                 !isValidShipping ||
                 !isValidLink ||
                 !validTaxId ||
+                !validShortAddressCode ||
                 this.exceededCharacterLimitErrorFieldList.length > 0) {
                 return false;
             }
@@ -1623,10 +1730,10 @@ const ZonosCustomerInfo = class {
             }
             // Render custom address component if the custom address form is enabled
             if (this.addressFormRenderType === 'zonos') {
-                return (index.h("zonos-custom-address", { defaultAddress: defaultAddress, taxIdErrorMessage: this.taxIdErrorMessage, titleText: localization.translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }, this.renderExceededCharacterLimitError(type)));
+                return (index.h("zonos-custom-address", { defaultAddress: defaultAddress, shortAddressCodeErrorMessage: this.shortAddressCodeErrorMessage, taxIdErrorMessage: this.taxIdErrorMessage, titleText: localization.translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }, this.renderExceededCharacterLimitError(type)));
             }
             // Render Stripe address component by default
-            return (index.h("zonos-address", { defaultAddress: defaultAddress, taxIdErrorMessage: this.taxIdErrorMessage, titleText: localization.translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }, this.renderExceededCharacterLimitError(type)));
+            return (index.h("zonos-address", { defaultAddress: defaultAddress, shortAddressCodeErrorMessage: this.shortAddressCodeErrorMessage, taxIdErrorMessage: this.taxIdErrorMessage, titleText: localization.translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }, this.renderExceededCharacterLimitError(type)));
         };
     }
     watchShowErrorBanner() {
@@ -1928,20 +2035,26 @@ const ZonosShipping = class {
          * handler for continue button click
          */
         this.continueClickHandler = () => {
-            var _a;
+            var _a, _b;
             // show error banner if the form is not complete
             if (!this.handleValidate()) {
                 this.showErrorBanner = true;
                 return;
             }
             // submit google tag when the form is complete
-            paypal.submitGtag('zonos-checkout-shipping-info');
+            submitGtag.submitGtag({
+                event: 'zonos-checkout-shipping-info',
+                metadata: {
+                    checkoutSessionId: localization.storageStore.checkoutSessionId,
+                    serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
+                },
+            });
             const checkoutSessionId = localization.storageStore.checkoutSessionId;
             void cart.trackConversionEvent({
                 checkoutSessionId,
                 eventName: 'checkout_shippingInfoCompleted',
                 metadata: {
-                    serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
+                    serviceLevelId: (_b = this.selectedShippingMethod) === null || _b === void 0 ? void 0 : _b.value,
                 },
             });
             this.showErrorBanner = false;
@@ -2075,15 +2188,15 @@ const ZonosShipping = class {
             var _a;
             // Render all service levels for US since domestic shipping doesn't have DDP/DAP
             if (((_a = cart.stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country) === 'US') {
-                return (index.h("zonos-shipping-rich-radio", { items: this.serviceLevelsAll, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }));
+                return (index.h("zonos-shipping-rich-radio", { isMobile: this.isMobile, items: this.serviceLevelsAll, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }));
             }
-            return (index.h(index.Fragment, null, index.h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !!defaultShownServiceLevels.length &&
+            return (index.h(index.Fragment, null, index.h("zonos-shipping-rich-radio", { isMobile: this.isMobile, items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !!defaultShownServiceLevels.length &&
                 !!this.serviceLevelsDAP.length && (index.h("button", { class: classes.classes([
                     'zonos--shipping-options-collapse-trigger',
                     this.collapsedDAPOptions && 'collapsed',
                 ]), onClick: () => {
                     this.collapsedDAPOptions = !this.collapsedDAPOptions;
-                } }, index.h("div", { class: "zonos--title-wrapper" }, index.h("zonos-text", { type: "label" }, `${localization.translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), index.h("zonos-icon", { content: ChevronUpIcon })))), index.h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, index.h("div", { class: "zonos--dap-wrapper" }, index.h("zonos-banner", { bannerTitle: localization.translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, localization.translate('You may incur additional fees from the shipping carrier by not prepaying.')), index.h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod })))));
+                } }, index.h("div", { class: "zonos--title-wrapper" }, index.h("zonos-text", { type: "label" }, `${localization.translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), index.h("zonos-icon", { content: ChevronUpIcon })))), index.h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, index.h("div", { class: "zonos--dap-wrapper" }, index.h("zonos-banner", { bannerTitle: localization.translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, localization.translate('You may incur additional fees from the shipping carrier by not prepaying.')), index.h("zonos-shipping-rich-radio", { isMobile: this.isMobile, items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod })))));
         };
         return (index.h(index.Host, { class: "zonos--shipping zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Delivery options')), this.showErrorBanner && !!this.serviceLevelsAll.length && (index.h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, localization.translate('No shipping method selected'))), index.h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, localization.translate('Shipping method')), !this.serviceLevelsAll.length ? (index.h("zonos-banner", { bannerTitle: cart.cartStore.customQuotingError
                 ? cart.cartStore.customQuotingError

package/dist/cjs/zonos-checkout.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-52cf3366.js');
-const paypal = require('./paypal-e339cc8c.js');
-const localization = require('./localization-b1075a8c.js');
+const cart = require('./cart-28310848.js');
+const paypal = require('./paypal-3019ae94.js');
+const localization = require('./localization-00e73920.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const buildCartItemsByTempCart = require('./buildCartItemsByTempCart-edddbf4b.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
@@ -17,7 +17,9 @@ const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
 const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
 const isDarkColor = require('./isDarkColor-878e600e.js');
 const styles = require('./styles-d1e64fb9.js');
+const submitGtag = require('./submitGtag-a50ab32e.js');
 const RemoveIcon = require('./RemoveIcon-081ac073.js');
+require('./isContrastColor-09f5924a.js');
 require('./debounce-815d1517.js');
 
 /**
@@ -912,7 +914,12 @@ const ZonosCheckout = class {
         }
         // Close the confirm dialog
         this.confirmDialogOpen = false;
-        paypal.submitGtag('zonos-checkout-close');
+        submitGtag.submitGtag({
+            event: 'zonos-checkout-close',
+            metadata: {
+                checkoutSessionId: localization.storageStore.checkoutSessionId,
+            },
+        });
         this.open = this.forceDialogOpen || false;
         if (!this.preview && cart.cartStore.step === 'finish') {
             // reset cart store if it's not preview mode and only when checkout is in the finish step.
@@ -1198,7 +1205,12 @@ const ZonosCheckout = class {
                         isPreview: this.preview,
                         sessionTimeout: CHECKOUT_SESSION_TIMEOUT,
                     });
-                    paypal.submitGtag('zonos-checkout-start');
+                    submitGtag.submitGtag({
+                        event: 'zonos-checkout-start',
+                        metadata: {
+                            checkoutSessionId: localization.storageStore.checkoutSessionId,
+                        },
+                    });
                     const checkoutSessionId = localization.storageStore.checkoutSessionId;
                     void cart.trackConversionEvent({
                         checkoutSessionId,
@@ -1519,7 +1531,12 @@ const ZonosCheckout = class {
     async handleCustomerInfoContinue() {
         var _a, _b, _c, _d;
         // submit google tag when the form is complete
-        paypal.submitGtag('zonos-checkout-customer-info');
+        submitGtag.submitGtag({
+            event: 'zonos-checkout-customer-info',
+            metadata: {
+                checkoutSessionId: localization.storageStore.checkoutSessionId,
+            },
+        });
         const checkoutSessionId = localization.storageStore.checkoutSessionId;
         void cart.trackConversionEvent({
             checkoutSessionId,
@@ -1658,7 +1675,12 @@ const ZonosCheckout = class {
         }
         catch (err) {
             handleFetch.logError(err);
-            paypal.submitGtag('zonos-checkout-payment-fail');
+            submitGtag.submitGtag({
+                event: 'zonos-checkout-payment-fail',
+                metadata: {
+                    checkoutSessionId: localization.storageStore.checkoutSessionId,
+                },
+            });
             cart.stripeStore.hasPaymentError = true;
             // should request inventory refund if there's an error during payment
             if (cart.stripeStore.shouldInventoryRefund) {
@@ -1915,7 +1937,7 @@ const ZonosCheckout = class {
                     '--zonos--primary-color': !this.isMobile
                         ? colorPrimary
                         : undefined,
-                }) }, !this.isMobile && renderTopHeader(), cart.cartStore.step === 'customer-info' && (index.h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.getDefaultAddress(), isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'shipping' && (index.h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'payment' && (index.h("zonos-checkout-payment", { continueLoading: this.submitLoading, isMobile: this.isMobile, onContinueClicked: async () => {
+                }) }, !this.isMobile && renderTopHeader(), cart.cartStore.step === 'customer-info' && (index.h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.getDefaultAddress(), isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'shipping' && (index.h("zonos-shipping", { continueLoading: this.submitLoading, isMobile: this.isMobile, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'payment' && (index.h("zonos-checkout-payment", { continueLoading: this.submitLoading, isMobile: this.isMobile, onContinueClicked: async () => {
                     await this.handleStripePaymentContinue();
                 }, submitBtnColor: submitButtonColor }))), index.h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), index.h("div", { class: "zonos--right-actions" }, window.Zonos.showBaseForeign && (index.h("zonos-currency-toggle", null)), !this.isLegacyCheckout && (index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon.RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() }))), index.h("div", { class: "flex--wrapper" }, index.h("div", { class: "zonos--wrapper" }, index.h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
                     // do nothing if it's not mobile
@@ -1943,7 +1965,7 @@ const ZonosCheckout = class {
                 this.isMobile && 'mobile',
                 this.isIframed && 'iframed',
                 this.hiddenMode && 'hidden-mode',
-            ]) }, this.preview ? (renderContent()) : (index.h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), index.h("zonos-dialog", { isLoading: true, loadingText: localization.translate('You will be redirected to international checkout shortly.'), loadingTitle: localization.translate('We detected that you are shipping to an international address.'), noClickOutside: true, noCloseButton: true, open: this.detectedDomesticCheckoutDialogOpen, width: "450px" }), index.h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: localization.translate("Don't close"), dialogConfirmBtnText: localization.translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: localization.translate('Would you like to close checkout and return to the site?'), dialogTitle: localization.translate('Are you sure?'), onCancelClicked: () => {
+            ]) }, this.preview ? (renderContent()) : (index.h("zonos-dialog", { borderStyle: style, class: "zonos--checkout-dialog", "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), index.h("zonos-dialog", { isLoading: true, loadingText: localization.translate('You will be redirected to international checkout shortly.'), loadingTitle: localization.translate('We detected that you are shipping to an international address.'), noClickOutside: true, noCloseButton: true, open: this.detectedDomesticCheckoutDialogOpen, width: "450px" }), index.h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: localization.translate("Don't close"), dialogConfirmBtnText: localization.translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: localization.translate('Would you like to close checkout and return to the site?'), dialogTitle: localization.translate('Are you sure?'), onCancelClicked: () => {
                 this.confirmDialogOpen = false;
             },
             // Mark user selected confirm to close the dialog

package/dist/cjs/zonos-collect-cart-items_3.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-52cf3366.js');
+const cart = require('./cart-28310848.js');
 const cleanHtmlMarkdown = require('./cleanHtmlMarkdown-577d0a77.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const classes = require('./classes-b7918f56.js');
 const styles = require('./styles-d1e64fb9.js');
-require('./localization-b1075a8c.js');
+require('./localization-00e73920.js');
 require('./handleFetch-954f30e1.js');
 require('./VarianceTest-bec00ea8.js');
 require('./isDarkColor-878e600e.js');

package/dist/cjs/zonos-collect-finish_6.cjs.entry.js

@@ -3,21 +3,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-52cf3366.js');
-const paypal = require('./paypal-e339cc8c.js');
-const localization = require('./localization-b1075a8c.js');
+const cart = require('./cart-28310848.js');
+const paypal = require('./paypal-3019ae94.js');
+const localization = require('./localization-00e73920.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
 const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
-const isCollectMobileTablet = require('./isCollectMobileTablet-fd11246c.js');
+const submitGtag = require('./submitGtag-a50ab32e.js');
+const isCollectMobileTablet = require('./isCollectMobileTablet-bd0f4556.js');
 const classes = require('./classes-b7918f56.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-const renderCheckoutCurrency = require('./renderCheckoutCurrency-55056c97.js');
-const placeTestOrder = require('./placeTestOrder-3dfbe3d6.js');
+const renderCheckoutCurrency = require('./renderCheckoutCurrency-9e919b9f.js');
+const placeTestOrder = require('./placeTestOrder-b0369cfd.js');
 const renderFallback = require('./renderFallback-78b54537.js');
 require('./isDarkColor-878e600e.js');
+require('./isContrastColor-09f5924a.js');
 
 const RemoveIcon = `<svg color="var(--zonos-elements-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--zonos-elements-red-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
@@ -156,7 +158,7 @@ const ZonosCollectFinish = class {
                 window.history.replaceState({}, '', url.toString());
                 // Payment doesn't go through
                 if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
-                    paypal.submitGtag('zonos-checkout-payment-fail');
+                    submitGtag.submitGtag({ event: 'zonos-checkout-payment-fail' });
                     void handleFetch.sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
@@ -169,7 +171,7 @@ const ZonosCollectFinish = class {
                     });
                 }
                 else {
-                    paypal.submitGtag('zonos-checkout-success');
+                    submitGtag.submitGtag({ event: 'zonos-checkout-success' });
                     const checkoutSessionId = localization.storageStore.checkoutSessionId;
                     void cart.trackConversionEvent({
                         checkoutSessionId,
@@ -214,7 +216,7 @@ const ZonosCollectFinish = class {
             // show success message right away when order id is already created
             this.isLoading = false;
             if (paypal.paypalStore.orderIdCreated) {
-                paypal.submitGtag('zonos-checkout-success');
+                submitGtag.submitGtag({ event: 'zonos-checkout-success' });
                 const checkoutSessionId = localization.storageStore.checkoutSessionId;
                 void cart.trackConversionEvent({
                     checkoutSessionId,
@@ -270,11 +272,11 @@ const ZonosCollectFinish = class {
     }
     render() {
         const cartId = window.Zonos.cartId;
-        return (index.h(index.Host, { key: 'e145b7396302157ccb515c54f99e50faa8ba45e6', class: "zonos--checkout-finish zonos--elements", style: {
+        return (index.h(index.Host, { key: 'c085862ecf1f50752634fb44f99b5cb5d82a9e24', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (index.h("div", { key: 'b9df4788f27c935ba7fc47e7c930cd162c8fbebe', class: "zonos--finish-details" }, index.h("div", { key: 'a510c995880c8698dc98390d0504b70333551c86', class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { key: '8f84f87bf2365b85acffefe16e8b10cd9227a6e6', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (index.h("zonos-badge", { key: '0e3f3f71cae6262d6394ad2c5a6d656509b484d5', badgeColor: "gray" }, this.confirmationId)), index.h("zonos-text", { key: 'c769f2ada1e6b421e373aeb4393560a21d6fcffc', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), this.order && cartId && (index.h("div", { key: '9972858fadd4d2d9c4f00e54921002ea04a5cc51', class: "zonos--button-container" }, index.h("zonos-button", { key: 'fe931a552fc1c43b29a1966736379c3c1d0536f6', onClick: () => {
+            } }, !this.isLoading && (index.h("div", { key: '9b30b12c817c3422b355a2f544bbf2908f736c80', class: "zonos--finish-details" }, index.h("div", { key: '697fff3258a6e74d99500ec25f5d3923f8c7cfc2', class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { key: '8457c0c9b22c2fb6374b60e492099981026d2690', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (index.h("zonos-badge", { key: '21ab18878abb37a2c37d873c494d71aee3d4ed71', badgeColor: "gray" }, this.confirmationId)), index.h("zonos-text", { key: '389918dd57e6ce5744b7192baa3c06c6db3f70cd', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), this.order && cartId && (index.h("div", { key: 'cca6b625a6bea62b788cf8dd6bb9e03e6505d81c', class: "zonos--button-container" }, index.h("zonos-button", { key: '0f45987515ae99045e5b449b5b1aaae11d70d9fb', onClick: () => {
                 window.open(this.getReceiptUrl({ cartId }), '_blank');
             }, size: "lg", variant: "primary" }, localization.translate('View receipt')))))))));
     }
@@ -496,7 +498,7 @@ const ZonosCollectPayment = class {
             }
             cart.stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            paypal.submitGtag('zonos-checkout-payment-info');
+            submitGtag.submitGtag({ event: 'zonos-checkout-payment-info' });
             this.continueClicked.emit();
         };
         this.copyCardToClipboard = async (cardNumber) => {

package/dist/cjs/zonos-collect.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-52cf3366.js');
-const isCollectMobileTablet = require('./isCollectMobileTablet-fd11246c.js');
-const paypal = require('./paypal-e339cc8c.js');
-const localization = require('./localization-b1075a8c.js');
+const cart = require('./cart-28310848.js');
+const isCollectMobileTablet = require('./isCollectMobileTablet-bd0f4556.js');
+const paypal = require('./paypal-3019ae94.js');
+const localization = require('./localization-00e73920.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const buildCartItemsByTempCart = require('./buildCartItemsByTempCart-edddbf4b.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
@@ -16,6 +16,8 @@ const renderFallback = require('./renderFallback-78b54537.js');
 const ILanguage = require('./ILanguage-98b04442.js');
 require('./isDarkColor-878e600e.js');
 require('./getBorderRadius-2ef1170d.js');
+require('./isContrastColor-09f5924a.js');
+require('./submitGtag-a50ab32e.js');
 
 const ChevronDownIcon = `<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;