@zonos/elements 1.3.247 → 1.3.249

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-69fa8852.js');
-const zonosStore = require('./zonosStore-37a4b4f4.js');
+const index = require('./index-b1f95d96.js');
+const zonosStore = require('./zonosStore-f5a61112.js');
 const classes = require('./classes-b7918f56.js');
 require('./VarianceTest-bec00ea8.js');
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-69fa8852.js');
+const index = require('./index-b1f95d96.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosTooltipCss = ":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--tooltip{position:relative}:host .zonos--tooltip .zonos--tooltip-content{position:absolute;bottom:100%;left:0;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:12px;background-color:var(--zonos-elements-gray-1000);opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:var(--zonos-elements-radius-4);z-index:100;-webkit-box-shadow:var(--zonos-elements-v3-shadow-large);box-shadow:var(--zonos-elements-v3-shadow-large)}:host .zonos--tooltip .zonos--tooltip-content.zonos--show-tooltip{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";

package/dist/cjs/zonos-v-stack.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-69fa8852.js');
-const zonosStore = require('./zonosStore-37a4b4f4.js');
+const index = require('./index-b1f95d96.js');
+const zonosStore = require('./zonosStore-f5a61112.js');
 const classes = require('./classes-b7918f56.js');
 require('./VarianceTest-bec00ea8.js');
 

package/dist/cjs/{zonosStore-37a4b4f4.js → zonosStore-f5a61112.js}

@@ -1,15 +1,16 @@
 'use strict';
 
-const index = require('./index-69fa8852.js');
+const index = require('./index-b1f95d96.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 
 const appendToMap = (map, propName, value) => {
-    const items = map.get(propName);
-    if (!items) {
-        map.set(propName, [value]);
+    let refs = map.get(propName);
+    if (!refs) {
+        refs = [];
+        map.set(propName, refs);
     }
-    else if (!items.includes(value)) {
-        items.push(value);
+    if (!refs.some((ref) => ref.deref() === value)) {
+        refs.push(new WeakRef(value));
     }
 };
 const debounce = (fn, ms) => {
@@ -37,33 +38,54 @@ const debounce = (fn, ms) => {
 const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
 const cleanupElements = debounce((map) => {
     for (let key of map.keys()) {
-        map.set(key, map.get(key).filter(isConnected));
+        const refs = map.get(key).filter((ref) => {
+            const elm = ref.deref();
+            return elm && isConnected(elm);
+        });
+        map.set(key, refs);
     }
 }, 2_000);
+const core = index.StencilCore;
+const forceUpdate = core.forceUpdate;
+const getRenderingRef = core.getRenderingRef;
 const stencilSubscription = () => {
-    if (typeof index.getRenderingRef !== 'function') {
+    if (typeof getRenderingRef !== 'function' || typeof forceUpdate !== 'function') {
         // If we are not in a stencil project, we do nothing.
         // This function is not really exported by @stencil/core.
         return {};
     }
+    const ensureForceUpdate = forceUpdate;
+    const ensureGetRenderingRef = getRenderingRef;
     const elmsToUpdate = new Map();
     return {
         dispose: () => elmsToUpdate.clear(),
         get: (propName) => {
-            const elm = index.getRenderingRef();
+            const elm = ensureGetRenderingRef();
             if (elm) {
                 appendToMap(elmsToUpdate, propName, elm);
             }
         },
         set: (propName) => {
-            const elements = elmsToUpdate.get(propName);
-            if (elements) {
-                elmsToUpdate.set(propName, elements.filter(index.forceUpdate));
+            const refs = elmsToUpdate.get(propName);
+            if (refs) {
+                const nextRefs = refs.filter((ref) => {
+                    const elm = ref.deref();
+                    if (!elm)
+                        return false;
+                    return ensureForceUpdate(elm);
+                });
+                elmsToUpdate.set(propName, nextRefs);
             }
             cleanupElements(elmsToUpdate);
         },
         reset: () => {
-            elmsToUpdate.forEach((elms) => elms.forEach(index.forceUpdate));
+            elmsToUpdate.forEach((refs) => {
+                refs.forEach((ref) => {
+                    const elm = ref.deref();
+                    if (elm)
+                        ensureForceUpdate(elm);
+                });
+            });
             cleanupElements(elmsToUpdate);
         },
     };
@@ -71,18 +93,26 @@ const stencilSubscription = () => {
 
 const unwrap = (val) => (typeof val === 'function' ? val() : val);
 const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    const unwrappedState = unwrap(defaultState);
-    let states = new Map(Object.entries(unwrappedState ?? {}));
+    const resolveDefaultState = () => (unwrap(defaultState) ?? {});
+    const initialState = resolveDefaultState();
+    let states = new Map(Object.entries(initialState));
+    const proxyAvailable = typeof Proxy !== 'undefined';
+    const plainState = proxyAvailable ? null : {};
     const handlers = {
         dispose: [],
         get: [],
         set: [],
         reset: [],
     };
+    // Track onChange listeners to enable removeListener functionality
+    const changeListeners = new Map();
     const reset = () => {
         // When resetting the state, the default state may be a function - unwrap it to invoke it.
         // otherwise, the state won't be properly reset
-        states = new Map(Object.entries(unwrap(defaultState) ?? {}));
+        states = new Map(Object.entries(resolveDefaultState()));
+        if (!proxyAvailable) {
+            syncPlainStateKeys();
+        }
         handlers.reset.forEach((cb) => cb());
     };
     const dispose = () => {
@@ -99,12 +129,14 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         const oldValue = states.get(propName);
         if (shouldUpdate(value, oldValue, propName)) {
             states.set(propName, value);
+            if (!proxyAvailable) {
+                ensurePlainProperty(propName);
+            }
             handlers.set.forEach((cb) => cb(propName, value, oldValue));
         }
     };
-    const state = (typeof Proxy === 'undefined'
-        ? {}
-        : new Proxy(unwrappedState, {
+    const state = (proxyAvailable
+        ? new Proxy(initialState, {
             get(_, propName) {
                 return get(propName);
             },
@@ -124,7 +156,11 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
                 set(propName, value);
                 return true;
             },
-        }));
+        })
+        : (() => {
+            syncPlainStateKeys();
+            return plainState;
+        })());
     const on = (eventName, callback) => {
         handlers[eventName].push(callback);
         return () => {
@@ -132,17 +168,24 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         };
     };
     const onChange = (propName, cb) => {
-        const unSet = on('set', (key, newValue) => {
+        const setHandler = (key, newValue) => {
             if (key === propName) {
                 cb(newValue);
             }
-        });
-        // We need to unwrap the defaultState because it might be a function.
-        // Otherwise we might not be sending the right reset value.
-        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        };
+        const resetHandler = () => {
+            const snapshot = resolveDefaultState();
+            cb(snapshot[propName]);
+        };
+        // Register the handlers
+        const unSet = on('set', setHandler);
+        const unReset = on('reset', resetHandler);
+        // Track the relationship between the user callback and internal handlers
+        changeListeners.set(cb, { setHandler, resetHandler, propName });
         return () => {
             unSet();
             unReset();
+            changeListeners.delete(cb);
         };
     };
     const use = (...subscriptions) => {
@@ -167,6 +210,47 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         const oldValue = states.get(key);
         handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
     };
+    const removeListener = (propName, listener) => {
+        const listenerInfo = changeListeners.get(listener);
+        if (listenerInfo && listenerInfo.propName === propName) {
+            // Remove the specific handlers that were created for this listener
+            removeFromArray(handlers.set, listenerInfo.setHandler);
+            removeFromArray(handlers.reset, listenerInfo.resetHandler);
+            changeListeners.delete(listener);
+        }
+    };
+    function ensurePlainProperty(key) {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        if (Object.prototype.hasOwnProperty.call(plainState, key)) {
+            return;
+        }
+        Object.defineProperty(plainState, key, {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return get(key);
+            },
+            set(value) {
+                set(key, value);
+            },
+        });
+    }
+    function syncPlainStateKeys() {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        const knownKeys = new Set(states.keys());
+        for (const key of Object.keys(plainState)) {
+            if (!knownKeys.has(key)) {
+                delete plainState[key];
+            }
+        }
+        for (const key of knownKeys) {
+            ensurePlainProperty(key);
+        }
+    }
     return {
         state,
         get,
@@ -177,6 +261,7 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         dispose,
         reset,
         forceUpdate,
+        removeListener,
     };
 };
 const removeFromArray = (array, item) => {

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

@@ -13,7 +13,7 @@ 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";
+import { submitGtag, } from "../../../utils/submitGtag";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import RemoveIcon from "./assets/RemoveIcon.svg";
 /* Need to use relative import because inline-svg-stencil couldn't resolve absolute path */
@@ -61,6 +61,56 @@ export class ZonosCheckoutFinish {
                 order: json,
             };
         };
+        /**
+         * Metadata for purchase event in GA4
+         */
+        this.buildPurchaseMetadata = ({ checkoutSessionId, currency, }) => {
+            var _a, _b, _c, _d, _e, _f;
+            const items = 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 = 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 = 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 = 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
             stripeStoreReset();
@@ -243,7 +293,7 @@ export class ZonosCheckoutFinish {
         this.checkStripePaymentStatus = async () => {
             const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
             if (clientSecret || this.storybookForceStatus) {
-                const { error, messages, status } = await stripeStoreRetrievePayment({
+                const { currency, error, messages, status } = await stripeStoreRetrievePayment({
                     clientSecret,
                     storybookForceStatus: this.storybookForceStatus,
                 });
@@ -269,7 +319,12 @@ export class ZonosCheckoutFinish {
                 window.history.replaceState({}, '', url.toString());
                 // Payment doesn't go through
                 if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
-                    submitGtag('zonos-checkout-payment-fail');
+                    submitGtag({
+                        event: 'zonos-checkout-payment-fail',
+                        metadata: {
+                            checkoutSessionId: storageStore.checkoutSessionId,
+                        },
+                    });
                     void sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
@@ -284,8 +339,21 @@ export class ZonosCheckoutFinish {
                 else {
                     // Save new order info in case the user reloads before we get order info
                     this.saveOrderIdForDuplicationIssue();
-                    submitGtag('zonos-checkout-success');
                     const checkoutSessionId = storageStore.checkoutSessionId;
+                    submitGtag({
+                        event: 'zonos-checkout-success',
+                        metadata: this.buildPurchaseMetadata({
+                            checkoutSessionId: checkoutSessionId || '',
+                            currency: currency === null || currency === void 0 ? void 0 : currency.toUpperCase(),
+                        }),
+                    });
+                    submitGtag({
+                        event: 'purchase',
+                        metadata: this.buildPurchaseMetadata({
+                            checkoutSessionId: checkoutSessionId || '',
+                            currency: currency === null || currency === void 0 ? void 0 : currency.toUpperCase(),
+                        }),
+                    });
                     void trackConversionEvent({
                         checkoutSessionId,
                         eventName: 'checkout_orderCompleted',
@@ -331,7 +399,18 @@ export class ZonosCheckoutFinish {
             // show success message right away when order id is already created
             this.isLoading = false;
             if (paypalStore.orderIdCreated) {
-                submitGtag('zonos-checkout-success');
+                submitGtag({
+                    event: 'zonos-checkout-success',
+                    metadata: this.buildPurchaseMetadata({
+                        checkoutSessionId: storageStore.checkoutSessionId || '',
+                    }),
+                });
+                submitGtag({
+                    event: 'purchase',
+                    metadata: this.buildPurchaseMetadata({
+                        checkoutSessionId: storageStore.checkoutSessionId || '',
+                    }),
+                });
                 const checkoutSessionId = storageStore.checkoutSessionId;
                 void trackConversionEvent({
                     checkoutSessionId,
@@ -393,11 +472,11 @@ export class ZonosCheckoutFinish {
     }
     render() {
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: '7b18913d8ebe7be5cbe9ee7d520b643c342c409d', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '80a543fca5dbc63dde41806702b2f6dd4fa849ab', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: 'afb522b8b3b769817c00312fc9c14b4c032873ca', class: "zonos--finish-details" }, h("div", { key: 'c8cd43bc5269f7f252abaeb25dc98929f52b89bb', 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: '1a7ead411d64fc8edf2de0383049bfd60660a315', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '0c63714bbefc4e9beb1d2cf7414e5774bab4eabe', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: '06304d9815e2199108dfcb3dade1494f17b76137',
+            } }, !this.isLoading && (h("div", { key: '6cab293041902e156563f37db6f0e77caaeeaaf9', class: "zonos--finish-details" }, h("div", { key: '6bf32844fa9d38eae6e9f337e56b7918e49bf793', 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: 'bf13e59b7bc2380609ffba879fa2b1d8c5d9a9e0', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: 'c246affb94a9799e0c556affb73b2ebfb69a9c7f', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: '61fa4fa0e09c0ce2905281b2696f42172c7a2bcd',
             // Only show loading spinner if it's not an error notification
             loading: this.isWaitingToRedirect &&
                 this.notificationType !== 'error', onClick: () => {
@@ -409,9 +488,9 @@ export class ZonosCheckoutFinish {
                 }
                 this.closeClickHandler();
             }, size: "md", variant: "primary" }, translate('Close'))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '9b809e21052fddb2149a2a1d0c22db4b10808403', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
+            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '9227d7832ed477be556cb6d59c644a74c293c740', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
             cartStore.step === 'finish' &&
-            this.notificationType === 'success' && (h("div", { key: '4a278c7c4270d265c61b6b36d20864c55e1b42f1', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: 'fd8a876a0c5b76edd3be2d9b28da9c3963aee714', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '7882981c1fe01ab6f78d8f84bcfc9aab94bffb74', onClick: () => {
+            this.notificationType === 'success' && (h("div", { key: '9107be1ef7895b0a5e3fe0a985036a11de7011d3', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: 'b0de8743bea8dd9ac7099bd5b77811f80d80a380', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: 'f90749b9af4c17eac554efb6d3d12cc41ac6e3c8', onClick: () => {
                 const isZonosDashboard = window.location.hostname.includes('dashboard.zonos.com');
                 this.redirectToUrl(isZonosDashboard
                     ? '/orders/all'

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

@@ -2,6 +2,7 @@ import { Fragment, h, Host, } from "@stencil/core";
 import { cartStore, cartStoreNextStep, } from "../../../store/checkout/cart";
 import { paypalStore } from "../../../store/checkout/paypal";
 import { stripeStore } from "../../../store/checkout/stripe";
+import { storageStore } from "../../../store/storageStore";
 import { translate } from "../../../store/translationStore";
 import { zonosStore } from "../../../store/zonosStore";
 import { placeTestOrder } from "../../../utils/api/placeTestOrder";
@@ -50,7 +51,7 @@ export class ZonosCheckoutPayment {
          * 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
@@ -65,7 +66,13 @@ export class ZonosCheckoutPayment {
             }
             stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            submitGtag('zonos-checkout-payment-info');
+            submitGtag({
+                event: 'zonos-checkout-payment-info',
+                metadata: {
+                    checkoutSessionId: storageStore.checkoutSessionId,
+                    paymentMethod: (_b = stripeStore.stripePaymentEventData) === null || _b === void 0 ? void 0 : _b.value.type,
+                },
+            });
             this.continueClicked.emit();
         };
         this.copyCardToClipboard = async (cardNumber) => {

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

@@ -479,7 +479,12 @@ export class ZonosCheckout {
         }
         // Close the confirm dialog
         this.confirmDialogOpen = false;
-        submitGtag('zonos-checkout-close');
+        submitGtag({
+            event: 'zonos-checkout-close',
+            metadata: {
+                checkoutSessionId: storageStore.checkoutSessionId,
+            },
+        });
         this.open = this.forceDialogOpen || false;
         if (!this.preview && cartStore.step === 'finish') {
             // reset cart store if it's not preview mode and only when checkout is in the finish step.
@@ -765,7 +770,12 @@ export class ZonosCheckout {
                         isPreview: this.preview,
                         sessionTimeout: CHECKOUT_SESSION_TIMEOUT,
                     });
-                    submitGtag('zonos-checkout-start');
+                    submitGtag({
+                        event: 'zonos-checkout-start',
+                        metadata: {
+                            checkoutSessionId: storageStore.checkoutSessionId,
+                        },
+                    });
                     const checkoutSessionId = storageStore.checkoutSessionId;
                     void trackConversionEvent({
                         checkoutSessionId,
@@ -1086,7 +1096,12 @@ export class ZonosCheckout {
     async handleCustomerInfoContinue() {
         var _a, _b, _c, _d;
         // submit google tag when the form is complete
-        submitGtag('zonos-checkout-customer-info');
+        submitGtag({
+            event: 'zonos-checkout-customer-info',
+            metadata: {
+                checkoutSessionId: storageStore.checkoutSessionId,
+            },
+        });
         const checkoutSessionId = storageStore.checkoutSessionId;
         void trackConversionEvent({
             checkoutSessionId,
@@ -1225,7 +1240,12 @@ export class ZonosCheckout {
         }
         catch (err) {
             logError(err);
-            submitGtag('zonos-checkout-payment-fail');
+            submitGtag({
+                event: 'zonos-checkout-payment-fail',
+                metadata: {
+                    checkoutSessionId: storageStore.checkoutSessionId,
+                },
+            });
             stripeStore.hasPaymentError = true;
             // should request inventory refund if there's an error during payment
             if (stripeStore.shouldInventoryRefund) {

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

@@ -74,20 +74,26 @@ export class ZonosShipping {
          * 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
-            submitGtag('zonos-checkout-shipping-info');
+            submitGtag({
+                event: 'zonos-checkout-shipping-info',
+                metadata: {
+                    checkoutSessionId: storageStore.checkoutSessionId,
+                    serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
+                },
+            });
             const checkoutSessionId = storageStore.checkoutSessionId;
             void 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;

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

@@ -146,7 +146,7 @@ export class ZonosCollectFinish {
                 window.history.replaceState({}, '', url.toString());
                 // Payment doesn't go through
                 if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
-                    submitGtag('zonos-checkout-payment-fail');
+                    submitGtag({ event: 'zonos-checkout-payment-fail' });
                     void sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
@@ -159,7 +159,7 @@ export class ZonosCollectFinish {
                     });
                 }
                 else {
-                    submitGtag('zonos-checkout-success');
+                    submitGtag({ event: 'zonos-checkout-success' });
                     const checkoutSessionId = storageStore.checkoutSessionId;
                     void trackConversionEvent({
                         checkoutSessionId,
@@ -204,7 +204,7 @@ export class ZonosCollectFinish {
             // show success message right away when order id is already created
             this.isLoading = false;
             if (paypalStore.orderIdCreated) {
-                submitGtag('zonos-checkout-success');
+                submitGtag({ event: 'zonos-checkout-success' });
                 const checkoutSessionId = storageStore.checkoutSessionId;
                 void trackConversionEvent({
                     checkoutSessionId,
@@ -260,11 +260,11 @@ export class ZonosCollectFinish {
     }
     render() {
         const cartId = window.Zonos.cartId;
-        return (h(Host, { key: 'e145b7396302157ccb515c54f99e50faa8ba45e6', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: 'c085862ecf1f50752634fb44f99b5cb5d82a9e24', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: 'b9df4788f27c935ba7fc47e7c930cd162c8fbebe', class: "zonos--finish-details" }, h("div", { key: 'a510c995880c8698dc98390d0504b70333551c86', 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: '8f84f87bf2365b85acffefe16e8b10cd9227a6e6', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: '0e3f3f71cae6262d6394ad2c5a6d656509b484d5', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: 'c769f2ada1e6b421e373aeb4393560a21d6fcffc', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: '9972858fadd4d2d9c4f00e54921002ea04a5cc51', class: "zonos--button-container" }, h("zonos-button", { key: 'fe931a552fc1c43b29a1966736379c3c1d0536f6', onClick: () => {
+            } }, !this.isLoading && (h("div", { key: '9b30b12c817c3422b355a2f544bbf2908f736c80', class: "zonos--finish-details" }, h("div", { key: '697fff3258a6e74d99500ec25f5d3923f8c7cfc2', 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: '8457c0c9b22c2fb6374b60e492099981026d2690', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: '21ab18878abb37a2c37d873c494d71aee3d4ed71', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: '389918dd57e6ce5744b7192baa3c06c6db3f70cd', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: 'cca6b625a6bea62b788cf8dd6bb9e03e6505d81c', class: "zonos--button-container" }, h("zonos-button", { key: '0f45987515ae99045e5b449b5b1aaae11d70d9fb', onClick: () => {
                 window.open(this.getReceiptUrl({ cartId }), '_blank');
             }, size: "lg", variant: "primary" }, translate('View receipt')))))))));
     }

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

@@ -64,7 +64,7 @@ export class ZonosCollectPayment {
             }
             stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            submitGtag('zonos-checkout-payment-info');
+            submitGtag({ event: 'zonos-checkout-payment-info' });
             this.continueClicked.emit();
         };
         this.copyCardToClipboard = async (cardNumber) => {

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

@@ -146,7 +146,7 @@ export class ZonosInvoiceFinish {
                 window.history.replaceState({}, '', url.toString());
                 // Payment doesn't go through
                 if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
-                    submitGtag('zonos-checkout-payment-fail');
+                    submitGtag({ event: 'zonos-checkout-payment-fail' });
                     void sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
@@ -159,7 +159,7 @@ export class ZonosInvoiceFinish {
                     });
                 }
                 else {
-                    submitGtag('zonos-checkout-success');
+                    submitGtag({ event: 'zonos-checkout-success' });
                     const checkoutSessionId = storageStore.checkoutSessionId;
                     void trackConversionEvent({
                         checkoutSessionId,
@@ -204,7 +204,7 @@ export class ZonosInvoiceFinish {
             // show success message right away when order id is already created
             this.isLoading = false;
             if (paypalStore.orderIdCreated) {
-                submitGtag('zonos-checkout-success');
+                submitGtag({ event: 'zonos-checkout-success' });
                 const checkoutSessionId = storageStore.checkoutSessionId;
                 void trackConversionEvent({
                     checkoutSessionId,
@@ -260,11 +260,11 @@ export class ZonosInvoiceFinish {
     }
     render() {
         const cartId = window.Zonos.cartId;
-        return (h(Host, { key: '2d8d736241298daa30fdf8935cef67bfa748e2df', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '5d2fc87bc549fa2cb6d622e664043bbfe55f8b0e', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: '30e1eae6e9ac7289af88f8fe2048d40796dfdf0e', class: "zonos--finish-details" }, h("div", { key: '0324e34b72e58d0862ed319576018bd45bd18b18', 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: '227f3cdda8e9cb0ed15ea91acb88c88d15d3d21c', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: '1458ad439dc56e9ca7641a9ca95f3dfb2fd6b28f', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: '8b0ab258c7beab09b0bc12999198f38813a144b3', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: 'ea6b4f8c1f8cce779fadf358966fece018d9869b', class: "zonos--button-container" }, h("zonos-button", { key: 'e5140fa1fab1e3150a2b15915c29d988f54468b2', onClick: () => {
+            } }, !this.isLoading && (h("div", { key: '1268de9e5be1edc4cbe2e7e2f1d2590b168d8c7b', class: "zonos--finish-details" }, h("div", { key: 'ce63ee565c176ea5687fc1c0f721932e26b93ebd', 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: 'a073858eac699426dc5947b85d3b3665868f164e', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: 'a96c40f5cc977de82585f7827d6bc6aef55ba873', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: 'd97bc54085b9fe69eb05b44042deae25c379ee3a', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: '488c3442e40fedf65caedbd3e098bd8b95976aab', class: "zonos--button-container" }, h("zonos-button", { key: '9a01b9cca0e3747548d386345015ecea80dc29d3', onClick: () => {
                 window.open(this.getReceiptUrl({ cartId }), '_blank');
             }, size: "lg", variant: "primary" }, translate('View receipt')))))))));
     }