@zonos/elements 1.3.247 → 1.3.248

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-97a2d20a.js');
-const paypal = require('./paypal-0b4b352b.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');
@@ -17,6 +17,7 @@ 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');
@@ -913,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.
@@ -1199,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,
@@ -1520,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,
@@ -1659,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) {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-97a2d20a.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');

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

@@ -3,19 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-97a2d20a.js');
-const paypal = require('./paypal-0b4b352b.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-edd4804c.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-dd3b0609.js');
-const placeTestOrder = require('./placeTestOrder-07b46688.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');
@@ -157,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: [
@@ -170,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,
@@ -215,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,
@@ -271,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')))))))));
     }
@@ -497,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,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-97a2d20a.js');
-const isCollectMobileTablet = require('./isCollectMobileTablet-edd4804c.js');
-const paypal = require('./paypal-0b4b352b.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');
@@ -17,6 +17,7 @@ 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>`;
 

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

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-97a2d20a.js');
+const cart = require('./cart-28310848.js');
 const localization = require('./localization-00e73920.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const getGenericSettingsOverride = require('./getGenericSettingsOverride-c0ca32b9.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
+const submitGtag = require('./submitGtag-a50ab32e.js');
 require('./isDarkColor-878e600e.js');
 require('./getBorderRadius-2ef1170d.js');
 
@@ -541,6 +542,8 @@ const ZonosController = class {
             }
             document.body.appendChild(scriptToInject);
         });
+        // Custom HTML may set window.Zonos.googleAnalyticId; trigger relay ping so parent configures GA
+        submitGtag.ensureAnalyticsRelayPing();
     }
     async initGooglePlacesService(settings) {
         const genericSettings = settings === null || settings === void 0 ? void 0 : settings.genericSettings;
@@ -727,7 +730,7 @@ const ZonosController = class {
         zonosStore.zonosStore.organizationName = organizationName;
     }
     render() {
-        return index.h(index.Host, { key: 'fe248e1e38cd3d98c56f55d39b704f7337c74c29', class: "zonos--elements" });
+        return index.h(index.Host, { key: '92e1eae13d0b13f91098ea110203b6c7a7f67c3e', class: "zonos--elements" });
     }
 };
 ZonosController.style = ZonosControllerStyle0;

package/dist/cjs/zonos-invoice-cart-items_2.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-97a2d20a.js');
+const cart = require('./cart-28310848.js');
 const localization = require('./localization-00e73920.js');
-const renderCheckoutCurrency = require('./renderCheckoutCurrency-dd3b0609.js');
+const renderCheckoutCurrency = require('./renderCheckoutCurrency-9e919b9f.js');
 const classes = require('./classes-b7918f56.js');
-const invoice = require('./invoice-05a10ee1.js');
+const invoice = require('./invoice-2e8e5879.js');
 const renderFallback = require('./renderFallback-78b54537.js');
 require('./zonosStore-37a4b4f4.js');
 require('./VarianceTest-bec00ea8.js');

package/dist/cjs/zonos-invoice-finish_5.cjs.entry.js

@@ -3,20 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-97a2d20a.js');
-const paypal = require('./paypal-0b4b352b.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 submitGtag = require('./submitGtag-a50ab32e.js');
 const isInvoiceMobileTablet = require('./isInvoiceMobileTablet-dde41e4e.js');
 const classes = require('./classes-b7918f56.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-const invoice = require('./invoice-05a10ee1.js');
-const renderCheckoutCurrency = require('./renderCheckoutCurrency-dd3b0609.js');
-const placeTestOrder = require('./placeTestOrder-07b46688.js');
+const invoice = require('./invoice-2e8e5879.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');
@@ -158,7 +159,7 @@ const ZonosInvoiceFinish = 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: [
@@ -171,7 +172,7 @@ const ZonosInvoiceFinish = class {
                     });
                 }
                 else {
-                    paypal.submitGtag('zonos-checkout-success');
+                    submitGtag.submitGtag({ event: 'zonos-checkout-success' });
                     const checkoutSessionId = localization.storageStore.checkoutSessionId;
                     void cart.trackConversionEvent({
                         checkoutSessionId,
@@ -216,7 +217,7 @@ const ZonosInvoiceFinish = 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,
@@ -272,11 +273,11 @@ const ZonosInvoiceFinish = class {
     }
     render() {
         const cartId = window.Zonos.cartId;
-        return (index.h(index.Host, { key: '2d8d736241298daa30fdf8935cef67bfa748e2df', class: "zonos--checkout-finish zonos--elements", style: {
+        return (index.h(index.Host, { key: '5d2fc87bc549fa2cb6d622e664043bbfe55f8b0e', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (index.h("div", { key: '30e1eae6e9ac7289af88f8fe2048d40796dfdf0e', class: "zonos--finish-details" }, index.h("div", { key: '0324e34b72e58d0862ed319576018bd45bd18b18', 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: '227f3cdda8e9cb0ed15ea91acb88c88d15d3d21c', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (index.h("zonos-badge", { key: '1458ad439dc56e9ca7641a9ca95f3dfb2fd6b28f', badgeColor: "gray" }, this.confirmationId)), index.h("zonos-text", { key: '8b0ab258c7beab09b0bc12999198f38813a144b3', 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: 'ea6b4f8c1f8cce779fadf358966fece018d9869b', class: "zonos--button-container" }, index.h("zonos-button", { key: 'e5140fa1fab1e3150a2b15915c29d988f54468b2', onClick: () => {
+            } }, !this.isLoading && (index.h("div", { key: '1268de9e5be1edc4cbe2e7e2f1d2590b168d8c7b', class: "zonos--finish-details" }, index.h("div", { key: 'ce63ee565c176ea5687fc1c0f721932e26b93ebd', 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: 'a073858eac699426dc5947b85d3b3665868f164e', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (index.h("zonos-badge", { key: 'a96c40f5cc977de82585f7827d6bc6aef55ba873', badgeColor: "gray" }, this.confirmationId)), index.h("zonos-text", { key: 'd97bc54085b9fe69eb05b44042deae25c379ee3a', 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: '488c3442e40fedf65caedbd3e098bd8b95976aab', class: "zonos--button-container" }, index.h("zonos-button", { key: '9a01b9cca0e3747548d386345015ecea80dc29d3', onClick: () => {
                 window.open(this.getReceiptUrl({ cartId }), '_blank');
             }, size: "lg", variant: "primary" }, localization.translate('View receipt')))))))));
     }
@@ -478,7 +479,7 @@ const ZonosInvoicePayment = 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-invoice.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-97a2d20a.js');
-const invoice = require('./invoice-05a10ee1.js');
-const paypal = require('./paypal-0b4b352b.js');
+const cart = require('./cart-28310848.js');
+const invoice = require('./invoice-2e8e5879.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');
@@ -17,6 +17,7 @@ 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>`;
 

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;