@zonos/elements 1.3.247 → 1.3.249

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

@@ -64,7 +64,7 @@ export class ZonosInvoicePayment {
             }
             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/common/zonos-button/zonos-button.css

@@ -71,7 +71,6 @@
   padding: 8px 24px;
   color: var(--zonos--color, var(--zonos-elements-gray-1000));
   margin: 1px;
-  /** Button size */
 }
 :host button:not([disabled]):hover {
   background-image: var(--zonos-elements-button-standard-hover);
@@ -105,6 +104,9 @@
 :host button:active {
   transform: scale(0.99);
 }
+:host button {
+  /** Button size */
+}
 :host button.sm {
   height: var(--zonos-elements-size-sm);
   line-height: var(--zonos-elements-size-sm);

package/dist/collection/components/common/zonos-input/zonos-input.css

@@ -33,7 +33,6 @@
 
 :host {
   margin: 1px;
-  /**disabled state */
 }
 :host .zonos--label-wrapper {
   position: relative;
@@ -132,6 +131,9 @@
   bottom: 0;
   border-radius: var(--zonos--border-radius);
 }
+:host {
+  /**disabled state */
+}
 :host .disabled .zonos--floated-label {
   pointer-events: inherit;
 }

package/dist/collection/components/common/zonos-stripe-input/zonos-stripe-input.css

@@ -49,7 +49,6 @@
 
 :host {
   margin: 1px;
-  /**disabled state */
 }
 :host .zonos--label-wrapper {
   position: relative;
@@ -150,6 +149,9 @@
   bottom: 0;
   border-radius: var(--zonos--border-radius);
 }
+:host {
+  /**disabled state */
+}
 :host .disabled .zonos--floated-label {
   pointer-events: inherit;
 }

package/dist/collection/components/common/zonos-stripe-select/zonos-stripe-select.css

@@ -51,7 +51,6 @@
   margin: 1px;
   position: relative;
   min-width: var(--zonos--min-width, unset);
-  /**disabled state */
 }
 :host .zonos--label-wrapper {
   position: relative;
@@ -152,6 +151,9 @@
   color: var(--zonos-elements-gray-800);
   z-index: 1;
 }
+:host {
+  /**disabled state */
+}
 :host .disabled .zonos--floated-label {
   pointer-events: inherit;
 }

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

@@ -12,6 +12,7 @@ import { initHello } from "../utils/hello/initHello";
 import { CheckoutAddressService } from "../utils/iframe/CheckoutAddressService";
 import { iframeServices, injectPrivateIframe, } from "../utils/iframe/IframeHelpers";
 import { log } from "../utils/logging/log";
+import { ensureAnalyticsRelayPing } from "../utils/submitGtag";
 export class ZonosController {
     /**
      * Method to initialize checkout element
@@ -142,6 +143,8 @@ export class ZonosController {
             }
             document.body.appendChild(scriptToInject);
         });
+        // Custom HTML may set window.Zonos.googleAnalyticId; trigger relay ping so parent configures GA
+        ensureAnalyticsRelayPing();
     }
     async initGooglePlacesService(settings) {
         const genericSettings = settings === null || settings === void 0 ? void 0 : settings.genericSettings;
@@ -328,7 +331,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: 'fe248e1e38cd3d98c56f55d39b704f7337c74c29', class: "zonos--elements" });
+        return h(Host, { key: '92e1eae13d0b13f91098ea110203b6c7a7f67c3e', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }

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

@@ -94,6 +94,12 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset stripe error message
                 stripeStore.hasPaymentError = false;
                 stripeStore.customErrorMessage = null;
+                submitGtag({
+                    event: 'zonos-checkout-payment-fail',
+                    metadata: {
+                        checkoutSessionId,
+                    },
+                });
                 onPaypalFail === null || onPaypalFail === void 0 ? void 0 : onPaypalFail();
                 return '';
             }
@@ -126,6 +132,12 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset stripe error message
                 stripeStore.hasPaymentError = false;
                 stripeStore.customErrorMessage = null;
+                submitGtag({
+                    event: 'zonos-checkout-payment-fail',
+                    metadata: {
+                        checkoutSessionId,
+                    },
+                });
                 // trigger fail event
                 onPaypalFail === null || onPaypalFail === void 0 ? void 0 : onPaypalFail();
                 return '';
@@ -136,7 +148,13 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 // reset paypal error banner
                 paypalStore.paypalErrorMessage = null;
                 // submit google tag when the form is complete
-                submitGtag('zonos-checkout-payment-info');
+                submitGtag({
+                    event: 'zonos-checkout-payment-info',
+                    metadata: {
+                        checkoutSessionId,
+                        paymentMethod: 'paypal',
+                    },
+                });
                 const orderId = await paypalStoreCaptureOrder({
                     checkoutSessionId,
                     paypalMockResponse: window.Zonos._paypalMockResponse,

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

@@ -810,6 +810,8 @@ const stripeStoreRetrievePayment = async ({ clientSecret: _clientSecret, storybo
     const status = paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status;
     const { isError, messages } = stripeStoreMessageBasedOnStatus(status);
     return {
+        amount: paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.amount,
+        currency: paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.currency,
         error: isError,
         messages,
         paymentIntentId: paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.id,

package/dist/collection/components/utils/submitGtag.js

@@ -1,16 +1,104 @@
 import { zonosStore } from "../store/zonosStore";
+import { getIsTestMode } from "./checkout/getIsTestMode";
 import { log } from "./logging/log";
+import { RELAY_PING_TYPE, RELAY_READY_TYPE, ZONOS_ANALYTIC_TYPE, } from "../../types/analyticsRelay";
+let parentGtagReady = false;
+let relayListenerAdded = false;
+const queuedEvents = [];
+function flushQueuedEvents() {
+    while (queuedEvents.length > 0) {
+        const { event, payload } = queuedEvents.shift();
+        try {
+            window.parent.postMessage({
+                event,
+                metadata: payload,
+                type: ZONOS_ANALYTIC_TYPE,
+            }, '*');
+        }
+        catch (_a) {
+            // Ignore postMessage failures
+        }
+    }
+}
+function ensureRelayListener() {
+    if (relayListenerAdded)
+        return;
+    relayListenerAdded = true;
+    window.addEventListener('message', (e) => {
+        var _a;
+        if (((_a = e.data) === null || _a === void 0 ? void 0 : _a.type) === RELAY_READY_TYPE) {
+            parentGtagReady = true;
+            if (typeof window.Zonos !== 'undefined') {
+                window.Zonos.googleAnalyticReady = true;
+            }
+            flushQueuedEvents();
+        }
+    });
+}
+function sendPingToParent() {
+    try {
+        const googleAnalyticId = typeof window.Zonos !== 'undefined'
+            ? window.Zonos.googleAnalyticId
+            : undefined;
+        window.parent.postMessage({ googleAnalyticId, type: RELAY_PING_TYPE }, '*');
+    }
+    catch (_a) {
+        // Ignore postMessage failures
+    }
+}
+/**
+ * Sends ping to parent with googleAnalyticId so parent can inject/configure GA and respond with ready.
+ * Call after customHTML or custom script sets window.Zonos.googleAnalyticId.
+ */
+export function ensureAnalyticsRelayPing() {
+    if (typeof window === 'undefined' ||
+        window.parent === window ||
+        parentGtagReady) {
+        return;
+    }
+    ensureRelayListener();
+    sendPingToParent();
+}
 /**
  * Submit a gtag event if the gtag function is available.
+ * When running inside an iframe, only posts to parent after the parent has
+ * confirmed (via analyticsRelayOnInit) that gtag is available.
  */
-export const submitGtag = (event) => {
+export const submitGtag = ({ event, metadata }) => {
     const googleAnalyticSetting = zonosStore.checkoutSettings.analyticsProviders.find(item => item.type === 'GOOGLE_ANALYTICS');
     // only submit if googleAnalytic in checkout setting is on.
     if (!googleAnalyticSetting || (googleAnalyticSetting === null || googleAnalyticSetting === void 0 ? void 0 : googleAnalyticSetting.status) === 'DISABLED') {
         return;
     }
+    const isTestMode = getIsTestMode();
+    const payload = Object.assign(Object.assign({}, metadata), (isTestMode && { isTestMode: true }));
+    // filter null key
+    const filteredPayload = Object.fromEntries(Object.entries(payload).filter(([_, value]) => value !== null));
+    const isInIframe = typeof window !== 'undefined' && window.parent !== window;
+    if (isInIframe) {
+        // gtag does not work in iframe; must relay to parent via postMessage
+        ensureRelayListener();
+        if (parentGtagReady) {
+            try {
+                window.parent.postMessage({
+                    event,
+                    metadata: filteredPayload,
+                    type: ZONOS_ANALYTIC_TYPE,
+                }, '*');
+            }
+            catch (_a) {
+                // Ignore postMessage failures
+            }
+        }
+        else {
+            queuedEvents.push({ event, payload: filteredPayload });
+            sendPingToParent();
+        }
+        return;
+    }
+    // Not in iframe: call gtag directly
     if (typeof window.gtag === 'function') {
         log('Zonos submits gtag event', 'log', event);
-        window.gtag('event', event, {});
+        window.gtag('event', event, filteredPayload);
     }
 };

package/dist/collection/scripts/_zonosBase.js

@@ -51,6 +51,8 @@ Zonos.iframeLogType = typeof window !== 'undefined'
 Zonos.isBigCommerce = false;
 Zonos.releaseDate = process.env.NEXT_PUBLIC_RELEASE_DATE;
 Zonos.isLegacyCheckout = false;
+Zonos.googleAnalyticId = null;
+Zonos.googleAnalyticReady = false;
 Zonos.startLoadTime = startLoadTime;
 Zonos.domain = typeof window !== 'undefined'
     ? // domain that embeds the iframe
@@ -90,6 +92,10 @@ Zonos.init = async (params) => {
     log(`====== ZONOS DEBUG MODE: on (${_a.version}) ======`);
     _a.zonosApiKey = zonosApiKey;
     _a.storeId = storeId;
+    // When not in iframe, GA is ready (gtag works directly). When in iframe, relay will set this after parent configures.
+    if (typeof window !== 'undefined' && window.parent === window) {
+        _a.googleAnalyticReady = true;
+    }
     if (_a.isNpm) {
         log('====== ZONOS LOADING FROM NPM ======');
         const zonosQaUrl = getZonosQaUrl();
@@ -194,6 +200,7 @@ Zonos.injectCustomScriptForHostedCheckout = () => {
     const metadata = (cartData === null || cartData === void 0 ? void 0 : cartData.metadata) || [];
     const headerScript = metadata.find(meta => meta.key === 'customHeaderScript');
     const footerScript = metadata.find(meta => meta.key === 'customFooterScript');
+    // googleAnalyticId is set by customHTML in checkoutSettings (e.g. <script>window.Zonos.googleAnalyticId = "G-XXX";</script>), injected by zonos-controller
     // Only inject the script if checkout is on Zonos hosted checkout and custom script is available
     if (!window.Zonos.isLegacyCheckout || (!headerScript && !footerScript)) {
         log('Skip injecting custom script for hosted checkout', 'info', {

package/dist/collection/types/analyticsRelay.js

@@ -0,0 +1,6 @@
+/** Message type for zonos-analytic events sent from iframe to parent. */
+export const ZONOS_ANALYTIC_TYPE = 'zonos-analytic';
+/** Ping sent by iframe to configure parent's analytics relay (e.g. GA) and get ready signal. */
+export const RELAY_PING_TYPE = 'zonos-analytics-relay-ping';
+/** Response from parent when analytics relay (e.g. gtag) is ready. */
+export const RELAY_READY_TYPE = 'zonos-analytics-relay-ready';

package/dist/esm/{cart-99ec4a3d.js → cart-efb30253.js}

@@ -1,9 +1,9 @@
-import { z as zonosStore, c as createStore } from './zonosStore-b434e436.js';
-import { s as storageStore, l as localizationStore, e as getOverridenZCountry, t as translate, f as filterValidTests, b as storageStoreSetEnabledVariantTestKeys } from './localization-853b48a9.js';
+import { z as zonosStore, c as createStore } from './zonosStore-5242a58d.js';
+import { s as storageStore, l as localizationStore, e as getOverridenZCountry, t as translate, f as filterValidTests, b as storageStoreSetEnabledVariantTestKeys } from './localization-c1aff677.js';
 import { f as fallbackApiList, h as handleFetch, g as getIsTestMode, a as getIsStagingMode, s as sendErrorLog, l as logError, j as jsonParse } from './handleFetch-a844cac1.js';
 import { l as log, b as allLogs } from './VarianceTest-572cecf5.js';
-import { i as isDarkColor } from './isDarkColor-9ddd90cc.js';
-import { g as getBorderRadius } from './getBorderRadius-877f6389.js';
+import { i as isDarkColor } from './isDarkColor-3537021b.js';
+import { g as getBorderRadius } from './getBorderRadius-c21a42e5.js';
 
 /**
  * Extract first name and last name from the name string
@@ -1421,6 +1421,8 @@ const stripeStoreRetrievePayment = async ({ clientSecret: _clientSecret, storybo
     const status = paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status;
     const { isError, messages } = stripeStoreMessageBasedOnStatus(status);
     return {
+        amount: paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.amount,
+        currency: paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.currency,
         error: isError,
         messages,
         paymentIntentId: paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.id,

package/dist/esm/{cleanHtmlMarkdown-b5b18743.js → cleanHtmlMarkdown-5f7856f2.js}

@@ -23,6 +23,10 @@ function trimTrailingNewlines (string) {
   return string.substring(0, indexEnd)
 }
 
+function trimNewlines (string) {
+  return trimTrailingNewlines(trimLeadingNewlines(string))
+}
+
 var blockElements = [
   'ADDRESS', 'ARTICLE', 'ASIDE', 'AUDIO', 'BLOCKQUOTE', 'BODY', 'CANVAS',
   'CENTER', 'DD', 'DIR', 'DIV', 'DL', 'DT', 'FIELDSET', 'FIGCAPTION', 'FIGURE',
@@ -114,8 +118,7 @@ rules.blockquote = {
   filter: 'blockquote',
 
   replacement: function (content) {
-    content = content.replace(/^\n+|\n+$/g, '');
-    content = content.replace(/^/gm, '> ');
+    content = trimNewlines(content).replace(/^/gm, '> ');
     return '\n\n' + content + '\n\n'
   }
 };
@@ -137,10 +140,6 @@ rules.listItem = {
   filter: 'li',
 
   replacement: function (content, node, options) {
-    content = content
-      .replace(/^\n+/, '') // remove leading newlines
-      .replace(/\n+$/, '\n') // replace trailing newlines with just a single one
-      .replace(/\n/gm, '\n    '); // indent
     var prefix = options.bulletListMarker + '   ';
     var parent = node.parentNode;
     if (parent.nodeName === 'OL') {
@@ -148,8 +147,11 @@ rules.listItem = {
       var index = Array.prototype.indexOf.call(parent.children, node);
       prefix = (start ? Number(start) + index : index + 1) + '.  ';
     }
+    var isParagraph = /\n$/.test(content);
+    content = trimNewlines(content) + (isParagraph ? '\n' : '');
+    content = content.replace(/\n/gm, '\n' + ' '.repeat(prefix.length)); // indent
     return (
-      prefix + content + (node.nextSibling && !/\n$/.test(content) ? '\n' : '')
+      prefix + content + (node.nextSibling ? '\n' : '')
     )
   }
 };

package/dist/esm/{debounce-c4785346.js → debounce-efc0e473.js}

@@ -1,4 +1,4 @@
-import { _ as _root, b as _baseGetTag, i as isObjectLike_1, d as isObject_1 } from './zonosStore-b434e436.js';
+import { _ as _root, b as _baseGetTag, i as isObjectLike_1, d as isObject_1 } from './zonosStore-5242a58d.js';
 
 var root = _root;
 

package/dist/esm/{getBorderRadius-877f6389.js → getBorderRadius-c21a42e5.js}

@@ -1,4 +1,4 @@
-import { z as zonosStore } from './zonosStore-b434e436.js';
+import { z as zonosStore } from './zonosStore-5242a58d.js';
 
 /**
  * Get the border radius for the elements based on the style

package/dist/esm/{getContrastColor-28c18704.js → getContrastColor-98f0d1d5.js}

@@ -1,5 +1,5 @@
-import { i as isDarkColor, t as tinycolor } from './isDarkColor-9ddd90cc.js';
-import { i as isContrastColor } from './isContrastColor-69778cea.js';
+import { i as isDarkColor, t as tinycolor } from './isDarkColor-3537021b.js';
+import { i as isContrastColor } from './isContrastColor-c17e83c9.js';
 
 const getContrastColor = ({ backgroundColor, color, }) => {
     if (backgroundColor === color) {

package/dist/esm/{hasInclusivePrice-6fcc712f.js → hasInclusivePrice-565ddbe5.js}

@@ -1,4 +1,4 @@
-import { l as localizationStore } from './localization-853b48a9.js';
+import { l as localizationStore } from './localization-c1aff677.js';
 
 /**
  * Since the backend and the frontend are using the same keys,