@zonos/elements 1.3.183 → 1.3.185

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

@@ -58,7 +58,7 @@ export class ZonosPayment {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '1b5147acd9da752ef77ece211e645b020766a90e', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'c4580453c1fc730efb119f514333ccf47dd29787', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'aed7ef3a604bf37319a9574ad46fc0dc06bbe35b', class: "zonos--payment-component" }), h("div", { key: '95809b939837a929497394602981bf2bb16908a6', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: 'c97f9b800febc678b67643b2020289dc4d382767', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'fe8ca21af5fc997831fa5839e26e4de7adb04766', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '863719d3e20a4b63ae2f7dbfe54482c57f3fa393', class: "zonos--payment-component" }), h("div", { key: 'd7c5edc24348ac4c3da4e3b437bd47aaabf45287', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/utils/api/getGenericSettingsOverride.js

@@ -0,0 +1,10 @@
+export const getGenericSettingsOverride = () => {
+    const params = new URLSearchParams(window.location.search);
+    const overrideShouldEnabledCustomAddress = !!window.Zonos
+        .overrideUseCustomAddressForm
+        ? '1'
+        : params.get('overrideShouldEnabledCustomAddress');
+    return {
+        overrideShouldEnabledCustomAddress,
+    };
+};

package/dist/collection/components/utils/api/getZonosSettings.js

@@ -1,3 +1,4 @@
+import { getGenericSettingsOverride } from "./getGenericSettingsOverride";
 import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
 export const getZonosSettings = async () => {
@@ -8,7 +9,12 @@ export const getZonosSettings = async () => {
             zonosMode: window.Zonos.zonosMode,
         };
     }
-    const { errors, json, zonosMode } = await handleFetch('/api/zonos-elements/zonos-settings');
+    const overrideSettings = getGenericSettingsOverride();
+    const params = new URLSearchParams();
+    if (overrideSettings.overrideShouldEnabledCustomAddress) {
+        params.set('overrideShouldEnabledCustomAddress', overrideSettings.overrideShouldEnabledCustomAddress);
+    }
+    const { errors, json, zonosMode } = await handleFetch(`/api/zonos-elements/zonos-settings?${params.toString()}`);
     if (errors.length) {
         logError(`Error occurred when getting zonos settings. If this is not an unauthorized error, it will use user settings or default settings`);
         return { errors, json: null, zonosMode };

package/dist/collection/components/utils/checkout/form/helpers.js

@@ -0,0 +1,95 @@
+/**
+ * Elements inside of web components sometimes need to inherit global attributes
+ * set on the host. For example, the inner input in `ion-input` should inherit
+ * the `title` attribute that developers set directly on `ion-input`. This
+ * helper function should be called in componentWillLoad and assigned to a variable
+ * that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+export const inheritAttributes = (el, attributes = []) => {
+    const attributeObject = {};
+    attributes.forEach(attr => {
+        if (el.hasAttribute(attr)) {
+            const value = el.getAttribute(attr);
+            if (value !== null) {
+                attributeObject[attr] = value;
+            }
+            el.removeAttribute(attr);
+        }
+    });
+    return attributeObject;
+};
+/**
+ * List of available ARIA attributes + `role`.
+ * Removed deprecated attributes.
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
+ */
+const ariaAttributes = [
+    'role',
+    'aria-activedescendant',
+    'aria-atomic',
+    'aria-autocomplete',
+    'aria-braillelabel',
+    'aria-brailleroledescription',
+    'aria-busy',
+    'aria-checked',
+    'aria-colcount',
+    'aria-colindex',
+    'aria-colindextext',
+    'aria-colspan',
+    'aria-controls',
+    'aria-current',
+    'aria-describedby',
+    'aria-description',
+    'aria-details',
+    'aria-disabled',
+    'aria-errormessage',
+    'aria-expanded',
+    'aria-flowto',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label',
+    'aria-labelledby',
+    'aria-level',
+    'aria-live',
+    'aria-multiline',
+    'aria-multiselectable',
+    'aria-orientation',
+    'aria-owns',
+    'aria-placeholder',
+    'aria-posinset',
+    'aria-pressed',
+    'aria-readonly',
+    'aria-relevant',
+    'aria-required',
+    'aria-roledescription',
+    'aria-rowcount',
+    'aria-rowindex',
+    'aria-rowindextext',
+    'aria-rowspan',
+    'aria-selected',
+    'aria-setsize',
+    'aria-sort',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext',
+];
+/**
+ * Returns an array of aria attributes that should be copied from
+ * the shadow host element to a target within the light DOM.
+ * @param el The element that the attributes should be copied from.
+ * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
+ * Use this in instances where we manually specify aria attributes on the `<Host>` element.
+ */
+export const inheritAriaAttributes = (el, ignoreList) => {
+    let attributesToInherit = ariaAttributes;
+    if (ignoreList && ignoreList.length > 0) {
+        attributesToInherit = attributesToInherit.filter(attr => !ignoreList.includes(attr));
+    }
+    return inheritAttributes(el, attributesToInherit);
+};

package/dist/collection/components/utils/checkout/form/isValidZip.js

@@ -0,0 +1,18 @@
+export const isValidZip = ({ countryFields, zip, }) => {
+    if (!countryFields) {
+        return true;
+    }
+    if (!countryFields.zipShow) {
+        return true;
+    }
+    // If zip is not required, zip value can be empty
+    if (!countryFields.zipRequired) {
+        return true;
+    }
+    // If zip regex is set, it's always required and must be validated
+    if (countryFields.zipRegex) {
+        return new RegExp(countryFields.zipRegex).test(zip);
+    }
+    // If zip is required, zip value must be non-empty
+    return countryFields.zipRequired && !!zip;
+};

package/dist/collection/components/utils/checkout/initCheckout.js

@@ -10,7 +10,9 @@ const injectCheckoutElement = () => {
 };
 export const initCheckout = (config) => {
     // allow to load checkout if cartData is ready (Checkout can be loaded right awaiy if tempCartUUID is in the URL)
-    if (!config.placeOrderButtonSelector && !window.Zonos.cartData) {
+    if (!config.placeOrderButtonSelector &&
+        !config.alwaysTriggerInternationalCheckoutSelector &&
+        !window.Zonos.cartData) {
         // do nothing if checkout button anchor is not set
         return;
     }
@@ -20,5 +22,10 @@ export const initCheckout = (config) => {
         logError(`Selector checkoutButtonAnchor "${config.placeOrderButtonSelector}" is not a valid selector`);
         return;
     }
+    if (config.alwaysTriggerInternationalCheckoutSelector &&
+        !isValidSelector(config.alwaysTriggerInternationalCheckoutSelector)) {
+        logError(`Selector alwaysTriggerInternationalCheckoutSelector "${config.alwaysTriggerInternationalCheckoutSelector}" is not a valid selector`);
+        return;
+    }
     injectCheckoutElement();
 };

package/dist/collection/components/utils/iframe/CheckoutAddressService.js

@@ -0,0 +1,193 @@
+import { iframeServices, } from "./IframeHelpers";
+import { log } from "../logging/log";
+import { logError } from "../logging/logError";
+/**
+ * Base class for iframe communication
+ */
+class IframeCommunicator {
+    constructor(targetId, allowedEvents) {
+        this.targetId = targetId;
+        this.allowedEvents = allowedEvents;
+        this.listeners = new Map();
+        this.handleMessage = (event) => {
+            var _a, _b, _c;
+            const data = event.data;
+            const window = ((_a = this.iframe) === null || _a === void 0 ? void 0 : _a.contentWindow) || ((_c = (_b = this.iframe) === null || _b === void 0 ? void 0 : _b.contentDocument) === null || _c === void 0 ? void 0 : _c.defaultView);
+            // check if the message is from the same src
+            if (event.source !== window) {
+                return;
+            }
+            if (!this.isValidMessage(data)) {
+                return;
+            }
+            const listeners = this.listeners.get(data.type);
+            listeners === null || listeners === void 0 ? void 0 : listeners.forEach(listener => {
+                try {
+                    listener(data.payload);
+                }
+                catch (error) {
+                    logError('Error in event listener:', error);
+                }
+            });
+        };
+        this.initializeEventListeners();
+        // get the iframe element
+        this.iframe = document.getElementById(this.targetId);
+    }
+    initializeEventListeners() {
+        window.addEventListener('message', this.handleMessage);
+    }
+    isValidMessage(message) {
+        if (!message || typeof message !== 'object')
+            return false;
+        const msg = message;
+        return (msg.id === this.targetId &&
+            typeof msg.type === 'string' &&
+            this.allowedEvents.includes(msg.type) &&
+            msg.payload !== undefined);
+    }
+    on(type, callback) {
+        if (!this.listeners.has(type)) {
+            this.listeners.set(type, new Set());
+        }
+        log(`[CheckoutAddressService] listening to ${type}`, 'info');
+        const _callback = callback;
+        const listeners = this.listeners.get(type);
+        if (listeners) {
+            listeners.add(_callback);
+        }
+        return () => {
+            const currentListeners = this.listeners.get(type);
+            if (currentListeners) {
+                currentListeners.delete(_callback);
+            }
+        };
+    }
+    destroy() {
+        window.removeEventListener('message', this.handleMessage);
+        this.listeners.clear();
+    }
+}
+/**
+ * Service for communicating with the Google Places iframe
+ */
+class GooglePlacesService extends IframeCommunicator {
+    constructor() {
+        log('=== [Google Places Service] Initializing', 'info');
+        super(iframeServices.GOOGLE_PLACES, [
+            'fetchAutocompleteSuggestions',
+            'initializeGooglePlacesService',
+            'placeSelected',
+            'onFetchAutocompleteSuggestions',
+            'onInitializeGooglePlacesService',
+            'onPlaceSelected',
+        ]);
+    }
+    sendMessage(type, payload) {
+        var _a;
+        if (!((_a = this.iframe) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
+            return;
+        }
+        const message = {
+            id: this.targetId,
+            logType: window.Zonos.iframeLogType,
+            payload,
+            type,
+        };
+        log(`GooglePlacesService] parent --> ${type}`, 'info', payload);
+        this.iframe.contentWindow.postMessage(message, '*');
+    }
+    initialize() {
+        this.sendMessage('initializeGooglePlacesService', {});
+    }
+    fetchSuggestions({ country, query, type, }) {
+        if (!country) {
+            return;
+        }
+        this.sendMessage('fetchAutocompleteSuggestions', {
+            request: {
+                includedRegionCodes: [country],
+                input: query,
+            },
+            type,
+        });
+    }
+    selectPlace({ placeId, type, }) {
+        this.sendMessage('placeSelected', { placeId, type });
+    }
+}
+/**
+ * Checkout service for managing address selection and validation
+ */
+export class CheckoutAddressService {
+    constructor() {
+        this.googlePlaceInitialized = false;
+        log('=== [CheckoutAddressService] Initializing', 'info');
+        this.googlePlaces = new GooglePlacesService();
+        this.googlePlaces.on('onInitializeGooglePlacesService', () => {
+            log('=== [CheckoutAddressService] parent <-- onInitializeGooglePlacesService', 'info');
+            this.googlePlaceInitialized = true;
+        });
+        this.initialize();
+    }
+    initialize() {
+        this.googlePlaces.initialize();
+    }
+    onInitializeGooglePlacesService(callback) {
+        return this.googlePlaces.on('onInitializeGooglePlacesService', () => {
+            log('[CheckoutAddressService] parent <-- onInitializeGooglePlacesService');
+            callback();
+        });
+    }
+    isGooglePlaceInitialized() {
+        return this.googlePlaceInitialized;
+    }
+    /**
+     * Set up event listeners for address suggestions
+     */
+    onAddressSuggestions(callback) {
+        this.suggestionsCallback = callback;
+        return this.googlePlaces.on('onFetchAutocompleteSuggestions', (...args) => {
+            log(`[CheckoutAddressService] parent <-- onFetchAutocompleteSuggestions ${args[0].type}`, 'info', ...args);
+            callback(...args);
+        });
+    }
+    /**
+     * Set up event listeners for selected address
+     */
+    onAddressSelected(callback) {
+        this.placeSelectedCallback = callback;
+        return this.googlePlaces.on('onPlaceSelected', (...args) => {
+            log(`[CheckoutAddressService] parent <-- onPlaceSelected ${args[0].type}`, 'info', ...args);
+            callback(...args);
+        });
+    }
+    /**
+     * Request address suggestions based on user input
+     */
+    getAddressSuggestions({ country, query, type, }) {
+        if (!this.googlePlaceInitialized) {
+            return;
+        }
+        this.googlePlaces.fetchSuggestions({
+            country,
+            query,
+            type,
+        });
+    }
+    /**
+     * Select an address from suggestions
+     */
+    selectAddress({ placeId, type, }) {
+        this.googlePlaces.selectPlace({ placeId, type });
+    }
+    destroy() {
+        this.googlePlaces.destroy();
+        if (this.suggestionsCallback) {
+            this.suggestionsCallback = undefined;
+        }
+        if (this.placeSelectedCallback) {
+            this.placeSelectedCallback = undefined;
+        }
+    }
+}

package/dist/collection/components/utils/iframe/IframeHelpers.js

@@ -0,0 +1,86 @@
+export const iframeServices = {
+    GOOGLE_PLACES: 'zonos--private-iframe-google-places-service-m9bmuh7g',
+};
+const postMessage = ({ id, payload, target, type, }) => {
+    var _a;
+    if (target instanceof HTMLIFrameElement) {
+        (_a = target.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
+            id,
+            payload,
+            type,
+        }, '*');
+    }
+    else {
+        target.postMessage({
+            id,
+            payload,
+            type,
+        }, '*');
+    }
+};
+/**
+ * Base class for iframe services, being used for Iframe to communicate back to the parent window
+ */
+export class IframeService {
+    constructor(targetElement, targetId) {
+        this.targetElement = targetElement;
+        this.targetId = targetId;
+        this.sendMessage = (type, payload) => {
+            postMessage({
+                id: this.targetId,
+                payload,
+                target: this.targetElement,
+                type,
+            });
+        };
+    }
+}
+IframeService.iframeServices = iframeServices;
+IframeService.sendMessage = postMessage;
+IframeService.injectPrivateIframe = ({ id, onload, src, }) => {
+    const iframe = document.createElement('iframe');
+    iframe.src = src;
+    iframe.id = id;
+    iframe.style.display = 'none';
+    iframe.role = 'presentation';
+    iframe.ariaHidden = 'true';
+    iframe.tabIndex = -1;
+    iframe.style.border = 'none !important';
+    iframe.style.margin = '0px !important';
+    iframe.style.padding = '0px !important';
+    iframe.style.width = '1px !important';
+    iframe.style.minWidth = '100% !important';
+    iframe.style.overflow = 'hidden !important';
+    iframe.style.display = 'block !important';
+    iframe.style.visibility = 'hidden !important';
+    iframe.style.position = 'fixed !important';
+    iframe.style.pointerEvents = 'none !important';
+    iframe.style.userSelect = 'none !important';
+    iframe.style.height = '1px !important';
+    iframe.onload = () => onload(iframe);
+    document.body.appendChild(iframe);
+    return iframe;
+};
+export const injectPrivateIframe = ({ id, onload, src, }) => {
+    const iframe = document.createElement('iframe');
+    iframe.src = src;
+    iframe.id = id;
+    iframe.style.display = 'none';
+    iframe.role = 'presentation';
+    iframe.ariaHidden = 'true';
+    iframe.tabIndex = -1;
+    iframe.style.border = 'none !important';
+    iframe.style.margin = '0px !important';
+    iframe.style.padding = '0px !important';
+    iframe.style.width = '1px !important';
+    iframe.style.minWidth = '100% !important';
+    iframe.style.overflow = 'hidden !important';
+    iframe.style.display = 'block !important';
+    iframe.style.visibility = 'hidden !important';
+    iframe.style.position = 'fixed !important';
+    iframe.style.pointerEvents = 'none !important';
+    iframe.style.userSelect = 'none !important';
+    iframe.style.height = '1px !important';
+    iframe.onload = onload;
+    document.body.appendChild(iframe);
+};

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

@@ -0,0 +1,5 @@
+export const mergeAddress = ({ addresses, delimiter = ' ', }) => {
+    // Remove duplicate addresses
+    const addressSet = new Set(addresses.filter(Boolean));
+    return Array.from(addressSet).join(delimiter);
+};