@zonos/elements 1.2.3 → 1.2.4-alpha.10

package/dist/collection/__mocks__/zonos-url/loadZonos.js

@@ -0,0 +1,492 @@
+'use strict';
+
+const log = (message, type, ...additionalInfo) => {
+    // if type is error and debug is false, do not log
+    if (!window.Zonos.debug) {
+        return;
+    }
+    switch (type) {
+        case 'warn':
+            // eslint-disable-next-line no-console
+            console.warn(message, ...additionalInfo);
+            break;
+        case 'info':
+            // eslint-disable-next-line no-console
+            console.info(message, ...additionalInfo);
+            break;
+        default:
+            // eslint-disable-next-line no-console
+            console.groupCollapsed(message, ...additionalInfo);
+            // eslint-disable-next-line no-console
+            console.trace();
+            // eslint-disable-next-line no-console
+            console.groupEnd();
+            break;
+    }
+};
+
+const logError = (message, ...rest) => {
+    // eslint-disable-next-line no-console
+    console.error(message, ...rest);
+};
+
+/**
+ * Extracts the zonosQaUrl from the url
+ *
+ * @param url - url to extract zonosQaUrl from
+ *
+ * **NOTE**: value of zonosQaUrl param should be without protocol, allowed characters are: a-z, A-Z, 0-9, -, _
+ * @example
+ * valid: https://www.zonos.com/?zonosQaUrl=some-feature-v988
+ * invalid: https://www.zonos.com/?zonosQaUrl=https://zonos-something
+ */
+const extractZonosQaUrl = (url) => {
+    if (!url) {
+        return null;
+    }
+    // get params from url
+    const param = new URL(url).searchParams;
+    const zonosQaUrl = param.get('zonosQaUrl');
+    if (!zonosQaUrl) {
+        return null;
+    }
+    const hasInvalidCharacters = /[^a-zA-Z0-9-_]+/.test(zonosQaUrl);
+    if (!!hasInvalidCharacters) {
+        return null;
+    }
+    return zonosQaUrl;
+};
+
+/* eslint-disable no-console */
+/** Loading stripe script extracted from stripe.js repository  */
+const V3_URL = 'https://js.stripe.com/v3';
+const V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
+const EXISTING_SCRIPT_MESSAGE = 'loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used';
+const zonosStripeFindScript = () => {
+    const scripts = document.querySelectorAll(`script[src^="${V3_URL}"]`);
+    for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
+        if (!script) {
+            continue;
+        }
+        if (!V3_URL_REGEX.test(script.src)) {
+            continue;
+        }
+        return script;
+    }
+    return null;
+};
+let stripePromise$1 = null;
+const injectScript = (params) => {
+    const queryString = params && !params.advancedFraudSignals ? '?advancedFraudSignals=false' : '';
+    const script = document.createElement('script');
+    script.src = `${V3_URL}${queryString}`;
+    const headBody = document.head || document.body;
+    if (!headBody) {
+        logError('Expected document.body not to be null. Stripe.js requires a <body> element.');
+        return null;
+    }
+    headBody.appendChild(script);
+    return script;
+};
+const zonosStripeLoadScript = (params) => {
+    // Ensure that we only attempt to load Stripe.js at most once
+    if (stripePromise$1 !== null) {
+        return stripePromise$1;
+    }
+    stripePromise$1 = new Promise((resolve, reject) => {
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+            // Resolve to null when imported server side. This makes the module
+            // safe to import in an isomorphic code base.
+            resolve(null);
+            return;
+        }
+        if (window.Stripe && params) {
+            console.warn(EXISTING_SCRIPT_MESSAGE);
+        }
+        if (window.Stripe) {
+            resolve(window.Stripe);
+            return;
+        }
+        try {
+            let script = zonosStripeFindScript();
+            if (script && params) {
+                console.warn(EXISTING_SCRIPT_MESSAGE);
+            }
+            else if (!script) {
+                script = injectScript(params);
+            }
+            script === null || script === void 0 ? void 0 : script.addEventListener('load', () => {
+                if (window.Stripe) {
+                    resolve(window.Stripe);
+                }
+                else {
+                    reject(new Error('Stripe.js not available'));
+                }
+            });
+            script === null || script === void 0 ? void 0 : script.addEventListener('error', () => {
+                reject(new Error('Failed to load Stripe.js'));
+            });
+        }
+        catch (error) {
+            reject(error);
+            return;
+        }
+    });
+    return stripePromise$1;
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const registerWrapper = (stripe, startTime) => {
+    if (!stripe || !stripe._registerWrapper) {
+        return;
+    }
+    stripe._registerWrapper({ name: 'stripe-js', startTime });
+};
+const initStripe = (maybeStripe, args, startTime) => {
+    if (maybeStripe === null) {
+        return null;
+    }
+    const stripe = maybeStripe.apply(undefined, args);
+    registerWrapper(stripe, startTime);
+    return stripe;
+};
+
+// Execute our own script injection after a tick to give users time to do their
+// own script injection.
+const stripePromise = Promise.resolve().then(() => zonosStripeLoadScript(null));
+let loadCalled = false;
+stripePromise.catch((err) => {
+    if (!loadCalled) {
+        // eslint-disable-next-line no-console
+        console.warn(err);
+    }
+});
+const zonosLoadStripe = async (...args) => {
+    loadCalled = true;
+    const startTime = Date.now();
+    return stripePromise.then(maybeStripe => initStripe(maybeStripe, args, startTime));
+};
+
+var _a;
+const zonosQaUrl = (() => {
+    const qaUrl = extractZonosQaUrl(window.location.href);
+    if (!qaUrl) {
+        return null;
+    }
+    const suffixDomain = 'preview.js.zonos.com';
+    const fullUrl = `https://${qaUrl}.${suffixDomain}`;
+    // eslint-disable-next-line no-console
+    console.warn(`[ZONOS-WARNING] using '${fullUrl}' for loading script`);
+    // request to the url and check if the request has an error
+    void fetch(fullUrl)
+        .then(() => {
+        // cleanup checkout session to avoid using the prod session in preview domain
+        window.sessionStorage.removeItem('zonos--checkout-session-id');
+        window.sessionStorage.removeItem('zonos--client-secret');
+    })
+        .catch(() => {
+        // eslint-disable-next-line no-console
+        alert(`[ZONOS-WARNING] '${fullUrl}' IS NO LONGER AVAILABLE. REMOVING zonosQaUrl PARAM AND RELOADING THE PAGE`);
+        // remove the zonosQaUrl param from url
+        const urlSearchParams = new URLSearchParams(window.location.search);
+        urlSearchParams.delete('zonosQaUrl');
+        const { pathname } = window.location;
+        const newUrl = `${pathname}?${urlSearchParams.toString()}`;
+        window.history.replaceState({}, '', newUrl);
+        window.location.reload();
+        return null;
+    });
+    return fullUrl;
+})();
+const ZONOS_URL = zonosQaUrl || "https://v1.2.3-alpha.0.js.zonos.com";
+const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.2.3-alpha.0";
+const INTER_FONT_URL = 'https://rsms.me';
+const GOOGLE_FONT_URL = 'https://fonts.googleapis.com';
+const INTER_FONT_REGEX = /^https:\/\/rsms\.me\/inter\/inter\.css(.*)$/;
+class Zonos {
+}
+_a = Zonos;
+Zonos.doneInit = false;
+// if query 'zonosDebug=1' param from url, debug mode is on
+Zonos.debug = !!window.location.search.match(/\?.*(&*)zonosDebug=1/);
+Zonos.isBigCommerce = false;
+Zonos.internationalHideSelector = '';
+Zonos.zonosQaUrl = zonosQaUrl;
+Zonos.version = `v${"1.2.3-alpha.0"}`;
+Zonos.modeAlerted = false;
+Zonos.getCurrentTimestamp = () => new Date().getTime();
+Zonos.zonosController = null;
+Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSettings, zonosApiKey, }) => {
+    if (Zonos.doneInit) {
+        // do nothing if zonos is already initializeds
+        return;
+    }
+    log(`====== ZONOS DEBUG MODE: on (${_a.version}) ======`);
+    if (!zonosApiKey) {
+        logError('Missing Zonos API key');
+        return;
+    }
+    _a.zonosApiKey = zonosApiKey;
+    log('init zonos');
+    // inject zonos cdn
+    Zonos.injectZonosCdn();
+    // inject css for zonos elements
+    Zonos.injectZonosCss();
+    // inject fonts for zonos elements
+    Zonos.injectFonts();
+    // init zonos controller
+    Zonos.injectController({
+        config: {
+            appearance,
+            checkoutSettings,
+            currencyConverter,
+            helloSettings,
+        },
+        zonosApiKey,
+    });
+    Zonos.doneInit = true;
+};
+Zonos.displayCurrency = () => {
+    const zonosHello = document.querySelector('zonos-hello');
+    if (zonosHello) {
+        void zonosHello.displayCurrency();
+    }
+};
+Zonos.showNotification = (notification) => {
+    var _b;
+    void ((_b = _a.zonosController) === null || _b === void 0 ? void 0 : _b.showNotification(notification));
+};
+Zonos.disablePlaceOrderButtons = ({ autoEnable = true, disable, placeOrderButtonSelector, }) => {
+    // if placeOrderAnchor is passed in the config for checkoutSettings, disable the place order button until zonos is initialized
+    if (placeOrderButtonSelector) {
+        const placeOrderButton = document.querySelectorAll(placeOrderButtonSelector);
+        const disableEvent = (e) => {
+            const target = e.target;
+            // prevent default and propagation when the item has disabled attribute
+            if (target.getAttribute('disabled')) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        placeOrderButton.forEach(button => {
+            if (disable) {
+                button.setAttribute('disabled', 'true');
+                // prevent the selector to perform default action when it's disabled
+                button.addEventListener('click', disableEvent);
+            }
+            else {
+                button.removeAttribute('disabled');
+                // clean up the event listener
+                button.removeEventListener('click', disableEvent);
+            }
+        });
+        // only auto enable if autoEnable is true and we are setting button disable
+        if (autoEnable && disable) {
+            setTimeout(() => {
+                // release it if zonos is not initialized after 5 seconds (this is to prevent the place order button from being disabled forever due to api)
+                placeOrderButton.forEach(button => {
+                    button.removeAttribute('disabled');
+                    // clean up the event listener if exists
+                    button.removeEventListener('click', disableEvent);
+                });
+            }, 5000);
+        }
+    }
+};
+Zonos.injectController = ({ config, zonosApiKey, }) => {
+    var _b;
+    if (document.querySelector('zonos-controller')) {
+        return;
+    }
+    // if placeOrderAnchor is passed in the config for checkoutSettings, disable the place order button until zonos is initialized
+    if ((_b = config.checkoutSettings) === null || _b === void 0 ? void 0 : _b.placeOrderButtonSelector) {
+        const placeOrderButtonSelector = config.checkoutSettings.placeOrderButtonSelector;
+        _a.disablePlaceOrderButtons({
+            disable: true,
+            placeOrderButtonSelector,
+        });
+    }
+    const zonosController = document.createElement('zonos-controller');
+    zonosController.config = config;
+    zonosController.zonosApiKey = zonosApiKey;
+    zonosController.addEventListener('stripeInitEvent', async (event) => {
+        const { detail } = event;
+        log('loading Stripe');
+        const stripe = await zonosLoadStripe(detail.publishableKey);
+        if (!stripe) {
+            logError('API seems to be invalid or missing. Failed to load Stripe');
+            return;
+        }
+        window.Zonos.stripe = stripe;
+        void zonosController.initCheckoutElement(stripe);
+    });
+    document.body.appendChild(zonosController);
+    // set zonos controller to be global
+    _a.zonosController = zonosController;
+    log('Zonos controller injected!');
+};
+Zonos.injectScript = ({ fallBackDomain, isModule, scriptDomain, theRestUrl, }) => {
+    const fullScriptUrl = `${scriptDomain}/${theRestUrl}`;
+    const findScript = () => {
+        const script = document.querySelector(`script[src="${fullScriptUrl}"]`);
+        return !!script;
+    };
+    if (findScript()) {
+        // eslint-disable-next-line no-console
+        log(`Zonos script "${fullScriptUrl}" already exists in the document`, 'warn');
+        return;
+    }
+    const headOrBody = document.head || document.body;
+    // init zonos elements when the zonosKey is valid
+    // inject esmodule cdn for zonos elements
+    const script = document.createElement('script');
+    if (!!isModule) {
+        script.type = 'module';
+    }
+    else {
+        script.noModule = true;
+    }
+    script.src = fullScriptUrl;
+    script.onerror = () => {
+        // only fallback if the stylesheetDomain is versioned. (https://v1.2.3.something.com || https://v1.something.com)
+        const isVersioned = /\/\/v\d+\./g.test(scriptDomain);
+        if (!isVersioned) {
+            log('No need to fallback since this is not a versioned domain', 'warn');
+            return;
+        }
+        if (fallBackDomain) {
+            _a.injectScript({
+                isModule,
+                scriptDomain: fallBackDomain,
+                theRestUrl,
+            });
+        }
+        logError(`Failed to load ${script.src}`);
+    };
+    headOrBody.appendChild(script);
+};
+Zonos.injectZonosCdn = () => {
+    // init zonos elements when the zonosKey is valid
+    // inject esmodule cdn for zonos elements
+    _a.injectScript({
+        fallBackDomain: UNPKG_ZONOS_URL,
+        isModule: true,
+        scriptDomain: ZONOS_URL,
+        theRestUrl: 'dist/zonos-elements/zonos-elements.esm.js',
+    });
+    // inject non module cdn for zonos elements
+    _a.injectScript({
+        fallBackDomain: UNPKG_ZONOS_URL,
+        isModule: false,
+        scriptDomain: ZONOS_URL,
+        theRestUrl: 'dist/zonos-elements/zonos-elements.js',
+    });
+    // eslint-disable-next-line no-console
+    log('Zonos cdn script injected!');
+};
+Zonos.injectStylesheet = ({ fallBackDomain, stylesheetDomain, theRestUrl, }) => {
+    const headOrBody = document.head || document.body;
+    // inject preconnect css for zonos elements
+    const zonosCssPreconnect = document.createElement('link');
+    zonosCssPreconnect.rel = 'preconnect';
+    zonosCssPreconnect.href = `${ZONOS_URL}/`;
+    headOrBody.appendChild(zonosCssPreconnect);
+    // inject css for zonos elements
+    const zonosCss = document.createElement('link');
+    zonosCss.rel = 'stylesheet';
+    zonosCss.href = `${stylesheetDomain}/${theRestUrl}`;
+    zonosCss.onerror = () => {
+        // only fallback if the stylesheetDomain is versioned. (https://v1.2.3.something.com || https://v1.something.com)
+        const isVersioned = /\/\/v\d+\./g.test(stylesheetDomain);
+        if (!isVersioned) {
+            log('No need to fallback since this is not a versioned domain', 'warn');
+            return;
+        }
+        if (fallBackDomain && isVersioned) {
+            _a.injectStylesheet({
+                stylesheetDomain: fallBackDomain,
+                theRestUrl,
+            });
+        }
+        logError(`Failed to load ${zonosCss.href}`);
+    };
+    headOrBody.appendChild(zonosCss);
+};
+Zonos.injectZonosCss = () => {
+    const findStyleLink = () => {
+        return !!document.querySelector(`link[rel="stylesheet"][href*="/dist/zonos-elements/zonos-elements.css"]`);
+    };
+    if (findStyleLink()) {
+        log('Zonos style links already injected', 'warn');
+        return;
+    }
+    // inject css for zonos elements
+    _a.injectStylesheet({
+        fallBackDomain: UNPKG_ZONOS_URL,
+        stylesheetDomain: ZONOS_URL,
+        theRestUrl: 'dist/zonos-elements/zonos-elements.css',
+    });
+    log('Zonos style css injected!');
+};
+Zonos.injectFonts = () => {
+    const findFont = () => {
+        const links = document.querySelectorAll(`link[rel="stylesheet"][href^="${INTER_FONT_URL}"]`);
+        for (let i = 0; i < links.length; i++) {
+            const link = links[i];
+            if (!link) {
+                continue;
+            }
+            if (INTER_FONT_REGEX.test(link.href)) {
+                continue;
+            }
+            return link;
+        }
+        return null;
+    };
+    if (findFont()) {
+        log('Inter font already injected', 'warn');
+        return;
+    }
+    const headOrBody = document.head || document.body;
+    // inject font css for zonos elements
+    const fontPreconnect = document.createElement('link');
+    fontPreconnect.rel = 'preconnect';
+    fontPreconnect.href = INTER_FONT_URL;
+    headOrBody.appendChild(fontPreconnect);
+    // inject font css for zonos elements
+    const font = document.createElement('link');
+    font.rel = 'stylesheet';
+    font.href = `${INTER_FONT_URL}/inter/inter.css`;
+    headOrBody.appendChild(font);
+    log('Zonos font injected!');
+};
+// apply font for zonos elements and inject font if needed
+Zonos.setupGoogleFont = (fontFamily) => {
+    var _b;
+    void ((_b = _a.zonosController) === null || _b === void 0 ? void 0 : _b.setupGoogleFont(fontFamily));
+};
+// this function is to inject google font to the browser, not apply the font for zonos elements, to apply the font and inject font if needed, use `setupGoogleFont` instead
+Zonos.injectSupportGoogleFont = (fontUrl) => {
+    var _b;
+    log(`[FONT] injecting ${fontUrl}`);
+    const fontFamily = (_b = fontUrl.match(/family=(.*?):/)) === null || _b === void 0 ? void 0 : _b[1];
+    const headOrBody = document.head || document.body;
+    // inject font css for zonos elements
+    if (!document.querySelector(`link[rel="preconnect"][href^="${GOOGLE_FONT_URL}"]`)) {
+        const customFontPreconnect = document.createElement('link');
+        customFontPreconnect.rel = 'preconnect';
+        customFontPreconnect.href = GOOGLE_FONT_URL;
+        headOrBody.appendChild(customFontPreconnect);
+    }
+    if (document.querySelector(`link[rel="stylesheet"][href="${fontUrl}"]`)) {
+        log(`[FONT] ${fontFamily} font already injected`, 'warn');
+        return;
+    }
+    const customFont = document.createElement('link');
+    customFont.rel = 'stylesheet';
+    customFont.href = fontUrl;
+    headOrBody.appendChild(customFont);
+    log(`[FONT] ${fontFamily} font injected!`);
+};
+
+window.Zonos = Zonos;