@zonos/elements 1.3.261 → 1.3.262

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

@@ -14,7 +14,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 { submitAnalytics } from "../../../utils/submitAnalytics";
 // 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 */
@@ -386,7 +386,7 @@ 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({
+                    submitAnalytics({
                         event: 'zonos-checkout-payment-fail',
                         metadata: {
                             checkoutSessionId: storageStore.checkoutSessionId,
@@ -407,14 +407,14 @@ export class ZonosCheckoutFinish {
                     // Save new order info in case the user reloads before we get order info
                     this.saveOrderIdForDuplicationIssue();
                     const checkoutSessionId = storageStore.checkoutSessionId;
-                    submitGtag({
+                    submitAnalytics({
                         event: 'zonos-checkout-success',
                         metadata: this.buildPurchaseMetadata({
                             checkoutSessionId: checkoutSessionId || '',
                             currency: currency === null || currency === void 0 ? void 0 : currency.toUpperCase(),
                         }),
                     });
-                    submitGtag({
+                    submitAnalytics({
                         event: 'purchase',
                         metadata: this.buildPurchaseMetadata({
                             checkoutSessionId: checkoutSessionId || '',
@@ -466,13 +466,13 @@ export class ZonosCheckoutFinish {
             // show success message right away when order id is already created
             this.isLoading = false;
             if (paypalStore.orderIdCreated) {
-                submitGtag({
+                submitAnalytics({
                     event: 'zonos-checkout-success',
                     metadata: this.buildPurchaseMetadata({
                         checkoutSessionId: storageStore.checkoutSessionId || '',
                     }),
                 });
-                submitGtag({
+                submitAnalytics({
                     event: 'purchase',
                     metadata: this.buildPurchaseMetadata({
                         checkoutSessionId: storageStore.checkoutSessionId || '',
@@ -503,13 +503,13 @@ export class ZonosCheckoutFinish {
             this.isLoading = false;
             if (storeCreditStore.orderIdCreated) {
                 const checkoutSessionId = storageStore.checkoutSessionId;
-                submitGtag({
+                submitAnalytics({
                     event: 'zonos-checkout-success',
                     metadata: this.buildPurchaseMetadata({
                         checkoutSessionId: checkoutSessionId || '',
                     }),
                 });
-                submitGtag({
+                submitAnalytics({
                     event: 'purchase',
                     metadata: this.buildPurchaseMetadata({
                         checkoutSessionId: checkoutSessionId || '',
@@ -583,11 +583,11 @@ export class ZonosCheckoutFinish {
     }
     render() {
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: '52582ef091037ac1fda75df03ae6b54ffaecb06b', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '97291e81aef62884ec0519d93dcc7ff184b2913d', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, this.isImmediateRedirecting && (h("div", { key: '3b0f1089e87e0a82539e9f3e25447b3b4f50cb8f', class: "loading-wrapper" }, h("zonos-spinner", { key: 'fa6f61d8b496b90af9c2a8feb1a89df0fb784827', size: 48 }))), !this.isLoading && !this.isImmediateRedirecting && (h("div", { key: '94cf155bd31b1806cc96f88ff504b870dfe4e661', class: "zonos--finish-details" }, h("div", { key: 'f103079e27fa441467e16fb0dc0ac2ba1a69ed64', 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: '8d85373cbaf7ab2e3372889f07e55e6546e13b72', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: 'cf120f43b009bfa2af326548b89d8139a2e0d954', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: '10c9b15539d63c502dc8a8d6ccbd6f927dd24cc1',
+            } }, this.isImmediateRedirecting && (h("div", { key: '40569271fb67acb22a4a0fa3c0fc8e1c0c641061', class: "loading-wrapper" }, h("zonos-spinner", { key: '8b431c7751e5e32fe97f4244151ece7de3c6d9bc', size: 48 }))), !this.isLoading && !this.isImmediateRedirecting && (h("div", { key: '0f5c89c285acf8c4f79e058c69cde9011df7e1a2', class: "zonos--finish-details" }, h("div", { key: '7491b15a90941476338ec6b1738312ffd4ebd2c0', 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: '87e0d022014596b02d813ee510917b7ec9b55e09', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '456bd678d5ba6f5b74da34f906bbe9f4bed870ac', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: 'ebde02a73e71ad88d7d68629f2cd8a34d961aa63',
             // Only show loading spinner if it's not an error notification
             loading: this.isWaitingToRedirect &&
                 this.notificationType !== 'error', onClick: () => {
@@ -599,9 +599,9 @@ export class ZonosCheckoutFinish {
                 }
                 this.closeClickHandler();
             }, size: "md", variant: "primary" }, translate('Close'))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: 'b2fc437d0bd21d38ad09cdcdf8b5907b7604ed31', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
+            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '2b86a3d9fb705ad080af532e645fd26aa844a14a', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
             cartStore.step === 'finish' &&
-            this.notificationType === 'success' && (h("div", { key: '6c1258c8d66d5127a14ae3ee5eb5477127a395aa', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: 'b3e0a8bf9eb0026595552563fd036a1894c726f8', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: 'c66ff9fb1998318eaa518c053998de662e53abff', onClick: () => {
+            this.notificationType === 'success' && (h("div", { key: '83a9dc9fb81baaf9e223dfa9fe0fc0fc4c106635', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: 'edf8057b0430e3e4bb8fd675554659781e1724ae', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '3c40eee58d8a2ad5951dfdfc7c8d485052b6ba73', 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.css

@@ -95,4 +95,11 @@
 :host .zonos--test-cards {
   margin-top: auto;
   padding-top: 16px;
+}
+
+:host(.mobile.mobile) {
+  overscroll-behavior: auto;
+}
+:host(.mobile.mobile) .zonos--group {
+  overscroll-behavior: auto;
 }

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

@@ -10,9 +10,10 @@ import { placeTestOrder } from "../../../utils/api/placeTestOrder";
 import { getIsStagingMode } from "../../../utils/checkout/getIsStagingMode";
 import { getIsTestMode } from "../../../utils/checkout/getIsTestMode";
 import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
+import { classes } from "../../../utils/classes";
 import { isDarkColor } from "../../../utils/isDarkColor";
 import { log } from "../../../utils/logging/log";
-import { submitGtag } from "../../../utils/submitGtag";
+import { submitAnalytics } from "../../../utils/submitAnalytics";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import CheckmarkLineIcon from "./assets/CheckmarkLineIcon.svg";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
@@ -68,7 +69,7 @@ export class ZonosCheckoutPayment {
             }
             stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            submitGtag({
+            submitAnalytics({
                 event: 'zonos-checkout-payment-info',
                 metadata: {
                     checkoutSessionId: storageStore.checkoutSessionId,
@@ -196,7 +197,10 @@ export class ZonosCheckoutPayment {
                     display: isPaypalTabSelected ? 'block' : 'none',
                 } }))), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null)))));
         };
-        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), renderPayment())));
+        return (h(Host, { class: classes([
+                'zonos--checkout-payment zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), renderPayment())));
     }
     static get is() { return "zonos-checkout-payment"; }
     static get encapsulation() { return "scoped"; }

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

@@ -41,7 +41,7 @@ import { sendLoadCheckoutFacadeLog } from "../../utils/logging/sendLoadCheckoutF
 import { sendLoadNativeCheckoutLog } from "../../utils/logging/sendLoadNativeCheckoutLog";
 import { mergeConfig } from "../../utils/mergeConfig";
 import { styles } from "../../utils/styles";
-import { submitGtag } from "../../utils/submitGtag";
+import { submitAnalytics } from "../../utils/submitAnalytics";
 import { validateCheckoutSession } from "../../utils/validateCheckoutSession";
 import { filterExpiredTests } from "../../utils/varianceTest/filterExpiredTests";
 import { getSelectedTestVariant } from "../../utils/varianceTest/getSelectedTestVariant";
@@ -504,7 +504,7 @@ export class ZonosCheckout {
         }
         // Close the confirm dialog
         this.confirmDialogOpen = false;
-        submitGtag({
+        submitAnalytics({
             event: 'zonos-checkout-close',
             metadata: {
                 checkoutSessionId: storageStore.checkoutSessionId,
@@ -831,7 +831,7 @@ export class ZonosCheckout {
                         isPreview: this.preview,
                         sessionTimeout: CHECKOUT_SESSION_TIMEOUT,
                     });
-                    submitGtag({
+                    submitAnalytics({
                         event: 'zonos-checkout-start',
                         metadata: {
                             checkoutSessionId: storageStore.checkoutSessionId,
@@ -1230,7 +1230,7 @@ export class ZonosCheckout {
     async handleCustomerInfoContinue() {
         var _a, _b, _c, _d;
         // submit google tag when the form is complete
-        submitGtag({
+        submitAnalytics({
             event: 'zonos-checkout-customer-info',
             metadata: {
                 checkoutSessionId: storageStore.checkoutSessionId,
@@ -1404,7 +1404,7 @@ export class ZonosCheckout {
             }
             catch (err) {
                 logError(err);
-                submitGtag({
+                submitAnalytics({
                     event: 'zonos-checkout-payment-fail',
                     metadata: {
                         checkoutSessionId: storageStore.checkoutSessionId,
@@ -1423,7 +1423,7 @@ export class ZonosCheckout {
         }
         catch (err) {
             logError(err);
-            submitGtag({
+            submitAnalytics({
                 event: 'zonos-checkout-payment-fail',
                 metadata: {
                     checkoutSessionId: storageStore.checkoutSessionId,

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.css

@@ -99,4 +99,11 @@
 }
 :host .zonos--group-btn zonos-button {
   width: 100%;
+}
+
+:host(.mobile.mobile) {
+  overscroll-behavior: auto;
+}
+:host(.mobile.mobile) .zonos--group {
+  overscroll-behavior: auto;
 }

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

@@ -6,6 +6,7 @@ import { storageStore } from "../../../store/storageStore";
 import { translate } from "../../../store/translationStore";
 import { getZonosStoreTheme, zonosStore, zonosStoreOnChange, } from "../../../store/zonosStore";
 import { updateCheckoutSessionAttributes } from "../../../utils/api/updateCheckoutSessionAttributes";
+import { classes } from "../../../utils/classes";
 import { containsNonLatinChars } from "../../../utils/containsNonLatinChars";
 import { extractName } from "../../../utils/extractName";
 import { log } from "../../../utils/logging/log";
@@ -503,7 +504,10 @@ export class ZonosCustomerInfo {
         const defaultEmail = ((_b = this.defaultAddress.find(Boolean)) === null || _b === void 0 ? void 0 : _b.email) ||
             ((_e = (_d = (_c = stripeStore.customerProfile) === null || _c === void 0 ? void 0 : _c.locations) === null || _d === void 0 ? void 0 : _d.find(Boolean)) === null || _e === void 0 ? void 0 : _e.email) ||
             ((_f = stripeStore.customerProfile) === null || _f === void 0 ? void 0 : _f.email);
-        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: defaultEmail, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: translate('Contact') }), this.renderAddressComponent('shipping'), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
+        return (h(Host, { class: classes([
+                'zonos--customer-info zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: defaultEmail, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: translate('Contact') }), this.renderAddressComponent('shipping'), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
                 stripeStore.stripeShippingSameAsBilling = e.detail;
             } }), h("zonos-collapse", { collapsed: !showBilling }, this.renderAddressComponent('billing')), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode

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

@@ -132,4 +132,11 @@
   display: flex;
   flex-direction: column;
   gap: 24px;
+}
+
+:host(.mobile.mobile) {
+  overscroll-behavior: auto;
+}
+:host(.mobile.mobile) .zonos--group {
+  overscroll-behavior: auto;
 }

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

@@ -8,7 +8,7 @@ import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
 import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
 import { sortServiceLevelOptionsByAmount } from "../../../utils/checkout/sortServiceLevelOptionsByAmount";
 import { classes } from "../../../utils/classes";
-import { submitGtag } from "../../../utils/submitGtag";
+import { submitAnalytics } from "../../../utils/submitAnalytics";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import ChevronUpIcon from "./assets/ChevronUpIcon.svg";
 export class ZonosShipping {
@@ -81,7 +81,7 @@ export class ZonosShipping {
                 return;
             }
             // submit google tag when the form is complete
-            submitGtag({
+            submitAnalytics({
                 event: 'zonos-checkout-shipping-info',
                 metadata: {
                     checkoutSessionId: storageStore.checkoutSessionId,
@@ -237,7 +237,10 @@ export class ZonosShipping {
                     this.collapsedDAPOptions = !this.collapsedDAPOptions;
                 } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { type: "label" }, `${translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), h("zonos-icon", { content: ChevronUpIcon })))), h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, h("div", { class: "zonos--dap-wrapper" }, h("zonos-banner", { bannerTitle: translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, translate('You may incur additional fees from the shipping carrier by not prepaying.')), h("zonos-shipping-rich-radio", { isMobile: this.isMobile, items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod })))));
         };
-        return (h(Host, { class: "zonos--shipping zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!this.serviceLevelsAll.length && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !this.serviceLevelsAll.length ? (h("zonos-banner", { bannerTitle: cartStore.customQuotingError
+        return (h(Host, { class: classes([
+                'zonos--shipping zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!this.serviceLevelsAll.length && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !this.serviceLevelsAll.length ? (h("zonos-banner", { bannerTitle: cartStore.customQuotingError
                 ? cartStore.customQuotingError
                 : translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), class: "zonos--shipping-method-error", intent: "error" })) : (h("div", { class: "zonos--shipping-options-wrapper" }, renderServiceLevels())), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode

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

@@ -12,7 +12,7 @@ import { getBorderRadius } from "../../../utils/getBorderRadius";
 import { handleFetch } from "../../../utils/handleFetch";
 import { allLogs, log } from "../../../utils/logging/log";
 import { sendErrorLog } from "../../../utils/logging/sendErrorLog";
-import { submitGtag } from "../../../utils/submitGtag";
+import { submitAnalytics } from "../../../utils/submitAnalytics";
 // 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 */
@@ -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({ event: 'zonos-checkout-payment-fail' });
+                    submitAnalytics({ event: 'zonos-checkout-payment-fail' });
                     void sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
@@ -159,7 +159,7 @@ export class ZonosCollectFinish {
                     });
                 }
                 else {
-                    submitGtag({ event: 'zonos-checkout-success' });
+                    submitAnalytics({ 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({ event: 'zonos-checkout-success' });
+                submitAnalytics({ 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: 'ece5aa1dae1e8e7bb99c0904adeaf6541fbf3ea6', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '89331d23e3b6b57ce708f091fb4c9cdaae84f838', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: 'd48c2384fb55b7b318143f933775c35e29abbe38', class: "zonos--finish-details" }, h("div", { key: '85e03a288ee29bc1f664d03b9c99a164acc51b92', 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: '7fcd228d5144d4f523d15870cdf18491278f0ee6', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: '219365d86b8aef904adffb1fab5e045db174a724', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: '4b2b41bdf35eb2d79b32fa5f7538798e3fd028f5', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: '52431496f81706a720406843309646b4fd9b2413', class: "zonos--button-container" }, h("zonos-button", { key: '4ccdbba8da9591c6207a472df29515fec8c0c56f', onClick: () => {
+            } }, !this.isLoading && (h("div", { key: '7539e73d3e88c6a486ded338d35ec55398a1f3f4', class: "zonos--finish-details" }, h("div", { key: '4a61f515eff3cf0ce77fc88526424c1e63e5d66a', 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: '6a44ceadf42398e95b3bef73888583cca2d4d076', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: 'aa83de37eaaa4e8a349d6752f11d933584d56c81', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: '26ff76617b31f1726bdc3b7d024a29841692f7b9', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: '721ce7b4561f9d82c2a251ac3f595e36567aaac7', class: "zonos--button-container" }, h("zonos-button", { key: '77db63afae505f5472f089e4e5ed9e9c52e48157', 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

@@ -10,7 +10,7 @@ import { getIsStagingMode } from "../../../utils/checkout/getIsStagingMode";
 import { getIsTestMode } from "../../../utils/checkout/getIsTestMode";
 import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
 import { log } from "../../../utils/logging/log";
-import { submitGtag } from "../../../utils/submitGtag";
+import { submitAnalytics } from "../../../utils/submitAnalytics";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import CheckmarkLineIcon from "./assets/CheckmarkLineIcon.svg";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
@@ -64,7 +64,7 @@ export class ZonosCollectPayment {
             }
             stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            submitGtag({ event: 'zonos-checkout-payment-info' });
+            submitAnalytics({ 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

@@ -12,7 +12,7 @@ import { getBorderRadius } from "../../../utils/getBorderRadius";
 import { handleFetch } from "../../../utils/handleFetch";
 import { allLogs, log } from "../../../utils/logging/log";
 import { sendErrorLog } from "../../../utils/logging/sendErrorLog";
-import { submitGtag } from "../../../utils/submitGtag";
+import { submitAnalytics } from "../../../utils/submitAnalytics";
 // 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 */
@@ -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({ event: 'zonos-checkout-payment-fail' });
+                    submitAnalytics({ event: 'zonos-checkout-payment-fail' });
                     void sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
@@ -159,7 +159,7 @@ export class ZonosInvoiceFinish {
                     });
                 }
                 else {
-                    submitGtag({ event: 'zonos-checkout-success' });
+                    submitAnalytics({ 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({ event: 'zonos-checkout-success' });
+                submitAnalytics({ 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: '4b4f83358419134c8455c4407f91adf8c1ff37ca', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '6c0363334a9e6602b93e83a0dfeb733285db7683', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: 'fab4606540bf759d9241432f58580b10f1c12b03', class: "zonos--finish-details" }, h("div", { key: 'b619eee9fda1e183b4d761f3576ae28cee2a9619', 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: '30fa51dba81331c9aa7ff4f64c274982d36d8a23', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: 'f10389b65e7910c7b3bd1e0d576afde74bc28e27', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: '5033c51a90cdbccb8b0a333f7b63f3383b70c264', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: '83350cb42d4165ec874a8b18dc29e851ca4ae4c8', class: "zonos--button-container" }, h("zonos-button", { key: 'fa05f016f520f65660270c906b7a5940b808cb4b', onClick: () => {
+            } }, !this.isLoading && (h("div", { key: '299a9afc37f5e1bbe828f2b68569a686b82baff1', class: "zonos--finish-details" }, h("div", { key: '24a827b96c4a74066b7701c70f6cdf980ff060f5', 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: '74bfa9e0126ea8b0a693fdc2e034cdd6ef352dcb', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: '5cc0089225fac166cfa13cc11e72efeb34ad8567', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: 'fb101b1058adeafe38a03d2a915b6b7f80c44061', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: '2ecc8d45967ccd720f0ec4d532aa266ac42acc14', class: "zonos--button-container" }, h("zonos-button", { key: '3f04711341f273a767d5109274f92eec424b1675', onClick: () => {
                 window.open(this.getReceiptUrl({ cartId }), '_blank');
             }, size: "lg", variant: "primary" }, translate('View receipt')))))))));
     }

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

@@ -10,7 +10,7 @@ import { getIsStagingMode } from "../../../utils/checkout/getIsStagingMode";
 import { getIsTestMode } from "../../../utils/checkout/getIsTestMode";
 import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
 import { log } from "../../../utils/logging/log";
-import { submitGtag } from "../../../utils/submitGtag";
+import { submitAnalytics } from "../../../utils/submitAnalytics";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import CheckmarkLineIcon from "./assets/CheckmarkLineIcon.svg";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
@@ -64,7 +64,7 @@ export class ZonosInvoicePayment {
             }
             stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            submitGtag({ event: 'zonos-checkout-payment-info' });
+            submitAnalytics({ event: 'zonos-checkout-payment-info' });
             this.continueClicked.emit();
         };
         this.copyCardToClipboard = async (cardNumber) => {

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

@@ -143,7 +143,7 @@ export class ZonosController {
             }
             document.body.appendChild(scriptToInject);
         });
-        // Custom HTML may set window.Zonos.googleAnalyticId; trigger relay ping so parent configures GA
+        // Custom HTML may set window.Zonos.googleAnalyticId / window.Zonos.facebookPixelId; trigger relay ping so parent configures GA / FB Pixel
         ensureAnalyticsRelayPing();
     }
     async initGooglePlacesService(settings) {
@@ -331,7 +331,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '4355afb5d8b739bf114a898803287d948fa4539e', class: "zonos--elements" });
+        return h(Host, { key: 'd500743a0ed7dc7615e696aaf958216374e7c33b', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/store/checkout/paypal.js

@@ -13,7 +13,7 @@ import { isContrastColor } from "../../utils/isContrastColor";
 import { jsonParse } from "../../utils/jsonParse";
 import { log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
-import { submitGtag } from "../../utils/submitGtag";
+import { submitAnalytics } from "../../utils/submitAnalytics";
 import { validateCheckoutSession } from "../../utils/validateCheckoutSession";
 const { onChange: paypalStoreOnChange, reset: paypalStoreReset, state: paypalStore, } = createStore(() => ({
     intent: 'capture',
@@ -95,7 +95,7 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset stripe error message
                 stripeStore.hasPaymentError = false;
                 stripeStore.customErrorMessage = null;
-                submitGtag({
+                submitAnalytics({
                     event: 'zonos-checkout-payment-fail',
                     metadata: {
                         checkoutSessionId,
@@ -160,7 +160,7 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset stripe error message
                 stripeStore.hasPaymentError = false;
                 stripeStore.customErrorMessage = null;
-                submitGtag({
+                submitAnalytics({
                     event: 'zonos-checkout-payment-fail',
                     metadata: {
                         checkoutSessionId,
@@ -176,7 +176,7 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset paypal error banner
                 paypalStore.paypalErrorMessage = null;
                 // submit google tag when the form is complete
-                submitGtag({
+                submitAnalytics({
                     event: 'zonos-checkout-payment-info',
                     metadata: {
                         checkoutSessionId,

package/dist/collection/components/utils/analytics/analyticsRelayState.js

@@ -0,0 +1,112 @@
+import { RELAY_PING_TYPE, RELAY_READY_TYPE, ZONOS_ANALYTIC_TYPE, } from "../../../types/analyticsRelay";
+const providerReady = {
+    fbq: false,
+    gtag: false,
+};
+const queue = [];
+let listenerAdded = false;
+const isInIframe = () => typeof window !== 'undefined' && window.parent !== window;
+const flushQueue = () => {
+    // Walk a copy and rebuild to keep events whose provider isn't ready yet
+    const remaining = [];
+    while (queue.length > 0) {
+        const event = queue.shift();
+        if (!providerReady[event.provider]) {
+            remaining.push(event);
+            continue;
+        }
+        try {
+            window.parent.postMessage({
+                event: event.event,
+                fbqMode: event.fbqMode,
+                metadata: event.payload,
+                provider: event.provider,
+                type: ZONOS_ANALYTIC_TYPE,
+            }, '*');
+        }
+        catch (_a) {
+            // Ignore postMessage failures
+        }
+    }
+    queue.push(...remaining);
+};
+const ensureListener = () => {
+    if (listenerAdded)
+        return;
+    listenerAdded = true;
+    window.addEventListener('message', (e) => {
+        var _a;
+        if (((_a = e.data) === null || _a === void 0 ? void 0 : _a.type) !== RELAY_READY_TYPE)
+            return;
+        // Older parent scripts may omit `provider`; treat as gtag for backward compatibility.
+        const provider = e.data.provider || 'gtag';
+        providerReady[provider] = true;
+        if (typeof window.Zonos !== 'undefined') {
+            if (provider === 'gtag') {
+                window.Zonos.googleAnalyticReady = true;
+            }
+            else {
+                window.Zonos.facebookPixelReady = true;
+            }
+        }
+        flushQueue();
+    });
+};
+/**
+ * Send a ping to the parent so it can inject/configure analytics relays for the providers we care about.
+ * Picks up `googleAnalyticId` and `facebookPixelId` from `window.Zonos`, both of which may be set by `customHTML`.
+ */
+export const sendRelayPing = () => {
+    if (!isInIframe())
+        return;
+    ensureListener();
+    try {
+        const z = typeof window.Zonos !== 'undefined' ? window.Zonos : undefined;
+        window.parent.postMessage({
+            facebookPixelId: z === null || z === void 0 ? void 0 : z.facebookPixelId,
+            googleAnalyticId: z === null || z === void 0 ? void 0 : z.googleAnalyticId,
+            type: RELAY_PING_TYPE,
+        }, '*');
+    }
+    catch (_a) {
+        // Ignore postMessage failures
+    }
+};
+/**
+ * Sends ping to parent so it can inject/configure analytics relays and respond with ready.
+ * Call after customHTML or custom script sets `window.Zonos.googleAnalyticId` / `window.Zonos.facebookPixelId`.
+ */
+export const ensureAnalyticsRelayPing = () => {
+    if (!isInIframe())
+        return;
+    // If both providers are already ready, no need to ping again
+    if (providerReady.gtag && providerReady.fbq)
+        return;
+    sendRelayPing();
+};
+/**
+ * Queue an analytic event for relay to parent. If the provider's relay is already ready,
+ * the event is forwarded immediately; otherwise it waits for the ready signal.
+ */
+export const enqueueRelayEvent = (event) => {
+    ensureListener();
+    if (providerReady[event.provider]) {
+        try {
+            window.parent.postMessage({
+                event: event.event,
+                fbqMode: event.fbqMode,
+                metadata: event.payload,
+                provider: event.provider,
+                type: ZONOS_ANALYTIC_TYPE,
+            }, '*');
+        }
+        catch (_a) {
+            // Ignore postMessage failures
+        }
+        return;
+    }
+    queue.push(event);
+    // Re-ping in case the parent hasn't received the ID yet (e.g. customHTML set it after init)
+    sendRelayPing();
+};
+export const isAnalyticsRelayInIframe = isInIframe;