@zonos/elements 1.3.246 → 1.3.248

package/dist/cjs/submitGtag-a50ab32e.js

@@ -0,0 +1,116 @@
+'use strict';
+
+const zonosStore = require('./zonosStore-37a4b4f4.js');
+const handleFetch = require('./handleFetch-954f30e1.js');
+const VarianceTest = require('./VarianceTest-bec00ea8.js');
+
+/** Message type for zonos-analytic events sent from iframe to parent. */
+const ZONOS_ANALYTIC_TYPE = 'zonos-analytic';
+/** Ping sent by iframe to configure parent's analytics relay (e.g. GA) and get ready signal. */
+const RELAY_PING_TYPE = 'zonos-analytics-relay-ping';
+/** Response from parent when analytics relay (e.g. gtag) is ready. */
+const RELAY_READY_TYPE = 'zonos-analytics-relay-ready';
+
+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.
+ */
+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.
+ */
+const submitGtag = ({ event, metadata }) => {
+    const googleAnalyticSetting = zonosStore.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 = handleFetch.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') {
+        VarianceTest.log('Zonos submits gtag event', 'log', event);
+        window.gtag('event', event, filteredPayload);
+    }
+};
+
+exports.ensureAnalyticsRelayPing = ensureAnalyticsRelayPing;
+exports.submitGtag = submitGtag;

package/dist/cjs/zonos-address-display_9.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const localization = require('./localization-b1075a8c.js');
+const localization = require('./localization-00e73920.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');
-const cart = require('./cart-52cf3366.js');
+const cart = require('./cart-28310848.js');
 const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
@@ -13,11 +13,12 @@ const RemoveIcon$2 = require('./RemoveIcon-081ac073.js');
 const isDarkColor = require('./isDarkColor-878e600e.js');
 const throttle = require('./throttle-7dd64984.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
-const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-eda13ef8.js');
+const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-b8abf6de.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const TaxId = require('./TaxId-12acedde.js');
 const helpers = require('./helpers-5bdbb68c.js');
 require('./debounce-815d1517.js');
+require('./ShortAddressCode-bec338b0.js');
 
 const zonosAddressDisplayCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--title{margin-bottom:12px}:host .zonos--address-group{display:-ms-flexbox;display:flex;gap:4px;-ms-flex-direction:column;flex-direction:column}:host .zonos--address-line{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .zonos--address-line zonos-text+zonos-text::before{content:\", \";color:var(--zonos-elements-gray-1000);margin-right:4px}:host .zonos--country-flag{width:20px;height:14px;border-radius:2px;margin:1px;position:relative;overflow:hidden;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);margin-right:8px;z-index:10;justify-self:center}";
 const ZonosAddressDisplayStyle0 = zonosAddressDisplayCss;
@@ -507,6 +508,10 @@ const ZonosAddress = class {
          * Error message for tax id input
          */
         this.taxIdErrorMessage = '';
+        /**
+         * Error message for short address code input
+         */
+        this.shortAddressCodeErrorMessage = '';
         this.stripe = window.Zonos.stripe;
         /**
          * Check if the address is dirty or not to scroll into view. When the component is mounted, if the data is filled with address line 1, it's considered dirty
@@ -837,6 +842,31 @@ const ZonosAddress = class {
                 cart.stripeStore.taxId = event.detail;
             } })));
     }
+    /**
+     * Render short address code input based on ship to country code
+     */
+    renderShortAddressCodeInput() {
+        var _a;
+        // No need to render short address code input for billing address
+        if (this.type === 'billing') {
+            return null;
+        }
+        const countryCode = (_a = cart.stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country;
+        // Don't render short address code input if the country is not provided
+        if (!countryCode) {
+            return null;
+        }
+        const shortAddressCodeInputRendered = shouldRenderTaxIdInput.shouldRenderShortAddressCodeInput({
+            countryCode,
+        });
+        // Don't render short address code input if the country doesn't require short address code
+        if (!shortAddressCodeInputRendered) {
+            return null;
+        }
+        return (index.h("div", { class: "zonos--short-address-code-input" }, index.h("zonos-stripe-input", { inputLabel: localization.translate('Short address code'), inputPlaceholder: "RRRD2929", inputValue: cart.stripeStore.shortAddressCode || '', isError: !!this.shortAddressCodeErrorMessage, onInputChange: (event) => {
+                cart.stripeStore.shortAddressCode = event.detail;
+            } }), this.shortAddressCodeErrorMessage && (index.h("zonos-text", { textColor: "red-600", type: "caption" }, this.shortAddressCodeErrorMessage))));
+    }
     renderCompanyNameInput() {
         // No need to render company name for billing address
         if (this.type === 'billing') {
@@ -1361,10 +1391,10 @@ const ZonosAddress = class {
             this.country = localization.localizationStore.selectedCountryCode;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: '7214ab1c348c1236dfa65f3bb20866fb3262c35d', class: classes.classes([
+        return (index.h(index.Host, { key: '4a2a2bb06e16eb0470b827efd104c1a7a373e2b5', class: classes.classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, index.h("zonos-text", { key: '3ce287d8ffd3f5fdb4745311d17992c0b9ee9678', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("slot", { key: '0e33486852d6512b054bb480d0295ce97d2667eb', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
+            ]) }, index.h("zonos-text", { key: '74fd51761c8672e23ada3c5f1bac121cdf559ca6', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("slot", { key: 'e21b18b079f013e1bdaf2ab526c1c7826f2376f0', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -4,19 +4,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
 const throttle = require('./throttle-7dd64984.js');
-const cart = require('./cart-52cf3366.js');
-const localization = require('./localization-b1075a8c.js');
+const cart = require('./cart-28310848.js');
+const localization = require('./localization-00e73920.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
-const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-eda13ef8.js');
+const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-b8abf6de.js');
 const classes = require('./classes-b7918f56.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const TaxId = require('./TaxId-12acedde.js');
 const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
 require('./debounce-815d1517.js');
 require('./isDarkColor-878e600e.js');
+require('./ShortAddressCode-bec338b0.js');
 
-const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h .zonos--company-name-input.sc-zonos-address,.sc-zonos-address-h .zonos--tax-id-input.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:8px}";
+const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h .zonos--company-name-input.sc-zonos-address,.sc-zonos-address-h .zonos--tax-id-input.sc-zonos-address,.sc-zonos-address-h .zonos--short-address-code-input.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:8px}";
 const ZonosAddressStyle0 = zonosAddressCss;
 
 const ZonosAddress = class {
@@ -37,6 +38,10 @@ const ZonosAddress = class {
          * Error message for tax id input
          */
         this.taxIdErrorMessage = '';
+        /**
+         * Error message for short address code input
+         */
+        this.shortAddressCodeErrorMessage = '';
         this.stripe = window.Zonos.stripe;
         /**
          * Check if the address is dirty or not to scroll into view. When the component is mounted, if the data is filled with address line 1, it's considered dirty
@@ -266,7 +271,32 @@ const ZonosAddress = class {
         return (index.h("div", { class: "zonos--tax-id-input" }, index.h("zonos-stripe-input", { inputLabel: localization.translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: cart.stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
                 cart.stripeStore.taxId = event.detail;
                 this.taxIdChanged.emit(event.detail);
-            } }), this.taxIdErrorMessage && (index.h("zonos-text", { textColor: 'red-600', type: "caption" }, this.taxIdErrorMessage))));
+            } }), this.taxIdErrorMessage && (index.h("zonos-text", { textColor: "red-600", type: "caption" }, this.taxIdErrorMessage))));
+    }
+    /**
+     * Render short address code input based on ship to country code
+     */
+    renderShortAddressCodeInput() {
+        var _a;
+        // No need to render short address code input for billing address
+        if (this.type === 'billing') {
+            return null;
+        }
+        const countryCode = (_a = cart.stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country;
+        // Don't render short address code input if the country is not provided
+        if (!countryCode) {
+            return null;
+        }
+        const shortAddressCodeInputRendered = shouldRenderTaxIdInput.shouldRenderShortAddressCodeInput({
+            countryCode,
+        });
+        // Don't render short address code input if the country doesn't require short address code
+        if (!shortAddressCodeInputRendered) {
+            return null;
+        }
+        return (index.h("div", { class: "zonos--short-address-code-input" }, index.h("zonos-stripe-input", { inputLabel: localization.translate('Short address code'), inputPlaceholder: "RRRD2929", inputValue: cart.stripeStore.shortAddressCode || '', isError: !!this.shortAddressCodeErrorMessage, onInputChange: (event) => {
+                cart.stripeStore.shortAddressCode = event.detail;
+            } }), this.shortAddressCodeErrorMessage && (index.h("zonos-text", { textColor: "red-600", type: "caption" }, this.shortAddressCodeErrorMessage))));
     }
     renderCompanyNameInput() {
         // No need to render company name for billing address (only allow for Collect and Invoice)
@@ -328,11 +358,11 @@ const ZonosAddress = class {
             this.isAddressFilled = true;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: 'b02889c4677a27a8c54a411d66fb31e15af78e1a', class: classes.classes([
+        return (index.h(index.Host, { key: '5dc571d7c5e706ae9cb90de70deee22847e5ba7e', class: classes.classes([
                 'zonos--address',
                 'zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, this.titleText && (index.h("zonos-text", { key: 'f52beb7ed6699ec1c73ee35a3436798a1fea38c7', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("slot", { key: '7c9602892de932e8a3f90a37b53a936f39082916', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), index.h("div", { key: '8ea6698f5b9d3bb525942c146e2cf67fefad6ad8', class: "zonos--address-component" })));
+            ]) }, this.titleText && (index.h("zonos-text", { key: 'a7c9f730bc9b64aa2c6e8cc24701e638481eac19', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("slot", { key: '3078529c201c7947ffc833485d46184bc79ab1d1', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), index.h("div", { key: 'b4a9850ac30ad9c483e05743ff41b7de9756d826', class: "zonos--address-component" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -6,12 +6,14 @@ const index = require('./index-69fa8852.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
-const cart = require('./cart-52cf3366.js');
-const localization = require('./localization-b1075a8c.js');
+const cart = require('./cart-28310848.js');
+const localization = require('./localization-00e73920.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
-const paypal = require('./paypal-e339cc8c.js');
+const paypal = require('./paypal-3019ae94.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 require('./isDarkColor-878e600e.js');
+require('./isContrastColor-09f5924a.js');
+require('./submitGtag-a50ab32e.js');
 
 const zonosCardCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .styled-card{border:var(--zonos-elements-border);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-6));padding:var(--spacing, 24px);text-align:left;background-color:var(--zonos--background-color);overflow:hidden}:host .styled-card hr{margin-left:calc(var(--spacing, 24px) * -1);margin-right:calc(var(--spacing, 24px) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, 24px);border-bottom:var(--zonos-elements-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);border-top:var(--zonos-elements-border);background:var(--zonos-elements-surface-color-secondary);margin-top:var(--spacing, 24px);border-bottom-left-radius:var(--zonos-elements-radius-8);border-bottom-right-radius:var(--zonos-elements-radius-8);height:var(--footerHeight)}";
 const ZonosCardStyle0 = zonosCardCss;