@zonos/elements 1.3.18-alpha.2 → 1.3.18-alpha.4

package/dist/esm/index.js

@@ -1 +1,626 @@
+import { l as log, a as logError } from './logError-c456c092.js';
 
+/**
+ * Get the load version and url based on the loadScriptSrc and version
+ * @returns
+ */
+const checkIfLoadVersionDomain = ({ loadScriptSrc }) => {
+    if (!loadScriptSrc) {
+        return {
+            currentLoadScriptUrl: '',
+            isForceLoadVersionDomain: false,
+            isWhiteListed: false,
+        };
+    }
+    const whiteListedDomains = [
+        // local domain
+        'dev.elements.zonos.com',
+        // any domain with prefix , no need to version it
+        '.js.zonos.com',
+        // vercel git domain
+        'zonos-elements-test-git',
+        'zonos-elements-git',
+    ];
+    const forceLoadVersionDomain = [
+        // force load version for qa domain, this is to test the load version behavior
+        'qa.js.zonos.com',
+    ];
+    // get the domain that's used to load the loadZonos.js
+    const currentLoadScriptUrl = new URL(loadScriptSrc).origin;
+    const isWhiteListed = whiteListedDomains.some(domain => 
+    // check if the current domain is in the white listed domains
+    currentLoadScriptUrl.includes(domain));
+    const isForceLoadVersionDomain = forceLoadVersionDomain.some(domain => 
+    // check if the current domain is in the force load version domains list
+    currentLoadScriptUrl.includes(domain));
+    return { currentLoadScriptUrl, isForceLoadVersionDomain, isWhiteListed };
+};
+
+/**
+ * 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;
+};
+
+/**
+ * Get the Zonos QA URL and return it. Will remove `zonosQaUrl` from the url query if it doesn't exists.
+ */
+const getZonosQaUrl = () => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    const qaUrl = extractZonosQaUrl(window.location.href);
+    if (!qaUrl) {
+        return null;
+    }
+    // If the qaUrl, use the dev-elements domain to forward the request to the dev server to quickly debug the issue
+    if (qaUrl === 'dev-elements') {
+        return 'https://dev.elements.zonos.com';
+    }
+    const suffixDomain = 'preview.js.zonos.com';
+    const fullUrl = `https://${qaUrl}.${suffixDomain}`;
+    log(`[ZONOS-WARNING] using '${fullUrl}' for loading script`, 'warn');
+    // 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(() => {
+        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()}`;
+        /**
+         * Setting the state to null in window.history.replaceState can cause issues with rendering when using next/link and pressing the back button.
+         * @ref https://github.com/vercel/next.js/issues/33233#issuecomment-1052349396
+         **/
+        window.history.replaceState(window.history.state, '', newUrl);
+        window.location.reload();
+        return null;
+    });
+    return fullUrl;
+};
+
+/* eslint-disable no-console */
+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;
+/**
+ * Get the load version and url based on the loadScriptSrc, if the domain that used to load `zonos.js` is in white listed domains, use currentLoadScriptUrl as the load url instead, if zonosQaUrl exists, it would also fall under the white listed domain
+ */
+const zonosLoadUrl = (() => {
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    const scriptExist = document.querySelector(`script[src*="/zonos.js"]`);
+    const { currentLoadScriptUrl, isWhiteListed } = checkIfLoadVersionDomain({
+        loadScriptSrc: scriptExist === null || scriptExist === void 0 ? void 0 : scriptExist.src,
+    });
+    if (isWhiteListed) {
+        return currentLoadScriptUrl;
+    }
+    return null;
+})();
+const ZONOS_URL = zonosLoadUrl || "https://v1.3.18-alpha.4.js.zonos.com";
+const JS_DELIVR_ZONOS_URL = "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.18-alpha.4";
+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 = typeof window !== 'undefined' &&
+    !!window.location.search.match(/\?.*(&*)zonosDebug=1/);
+Zonos.zonosConversionTest = typeof window !== 'undefined' &&
+    !!window.location.search.match(/\?.*(&*)zonosConversionTest/);
+Zonos.isBigCommerce = false;
+/**
+ * By default, the package will load from npm
+ */
+Zonos.isNpm = true;
+Zonos.internationalHideSelector = '';
+Zonos.zonosQaUrl = null;
+Zonos.version = `v${"1.3.18-alpha.4"}`;
+Zonos.modeAlerted = false;
+Zonos.tempCartData = null;
+Zonos.getCurrentTimestamp = () => new Date().getTime();
+Zonos.zonosController = null;
+Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSettings, onCountryChange, storeId, zonosApiKey, }) => {
+    if (_a.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;
+    _a.storeId = storeId;
+    log('init zonos');
+    // add sentry to the project
+    _a.injectSentryScript();
+    // inject zonos cdn
+    _a.injectZonosCdn();
+    // inject css for zonos elements
+    _a.injectZonosCss();
+    // inject fonts for zonos elements
+    _a.injectFonts();
+    // init zonos controller
+    _a.injectController({
+        config: {
+            appearance,
+            checkoutSettings,
+            currencyConverter,
+            helloSettings,
+            onCountryChange,
+        },
+        zonosApiKey,
+    });
+    _a.doneInit = true;
+};
+Zonos.displayCurrency = () => {
+    const zonosHello = document.querySelector('zonos-hello');
+    if (zonosHello) {
+        void zonosHello.displayCurrency();
+    }
+};
+// Called openHelloDialog because the main use case is to simply open the dialog
+Zonos.openHelloDialog = (value) => {
+    const zonosHello = document.querySelector('zonos-hello');
+    if (zonosHello) {
+        void zonosHello.openHelloDialog(value !== null && value !== void 0 ? value : true);
+    }
+};
+Zonos.showNotification = (notification) => {
+    var _b;
+    void ((_b = _a.zonosController) === null || _b === void 0 ? void 0 : _b.showNotification(notification));
+};
+Zonos.updateOrganizationName = (organizationName) => {
+    var _b;
+    void ((_b = _a.zonosController) === null || _b === void 0 ? void 0 : _b.updateOrganizationName(organizationName));
+};
+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 => {
+            const isEventAttached = button.getAttribute('data-zonos-checkout-attached');
+            if (isEventAttached) {
+                // do nothing if event is already attached
+                return;
+            }
+            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,
+        });
+        // create a mutation observer to see if any new elements that match our selector is added to the DOM
+        const observer = new MutationObserver(() => {
+            _a.disablePlaceOrderButtons({
+                disable: true,
+                placeOrderButtonSelector,
+            });
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    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.injectSentryScript = () => {
+    const scriptUrl = 'https://browser.sentry-cdn.com/7.88.0/bundle.tracing.min.js';
+    const findScript = () => {
+        const script = document.querySelector(`script[src="${scriptUrl}"]`);
+        return !!script;
+    };
+    if (findScript()) {
+        log('Sentry script 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');
+    script.crossOrigin = 'anonymous';
+    script.src = scriptUrl;
+    script.integrity =
+        'sha384-z/aQww1Fr6Mes0MO/2wlzQd2nXBCdDcKPXDTsMDMNPgTGRPqii3a4bzH79I+Vo8l';
+    script.setAttribute('data-lazy', 'no');
+    script.onerror = () => {
+        logError(`Failed to load ${script.src}`);
+    };
+    script.onload = () => {
+        var _b;
+        (_b = window.Sentry) === null || _b === void 0 ? void 0 : _b.init({
+            beforeSend(event) {
+                var _b, _c, _d, _e, _f, _g;
+                // only send error to sentry if it's from zonos production
+                const firstExceptionFilename = (_g = (_f = (_e = (_d = (_c = (_b = event.exception) === null || _b === void 0 ? void 0 : _b.values) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.stacktrace) === null || _e === void 0 ? void 0 : _e.frames) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.filename;
+                const isZonosProduction = (firstExceptionFilename === null || firstExceptionFilename === void 0 ? void 0 : firstExceptionFilename.includes('js.zonos.com')) ||
+                    (firstExceptionFilename === null || firstExceptionFilename === void 0 ? void 0 : firstExceptionFilename.includes('@zonos/elements'));
+                const isDevelopmentHref = window.location.href.includes('dev.elements') ||
+                    window.location.href.includes('route.js.zonos.com');
+                // don't send error to sentry if the errors are in development href
+                if (isZonosProduction && !isDevelopmentHref) {
+                    return event;
+                }
+                return null;
+            },
+            dsn: 'https://19168bd05af0e2e0e7520ad58953e4f2@o446983.ingest.sentry.io/4506400622837760',
+            ignoreErrors: ['Failed to load Stripe.js'],
+            release: `zonos-elements@${_a.version}`,
+            tracesSampler: () => {
+                return 0.01;
+            },
+        });
+    };
+    headOrBody.appendChild(script);
+};
+Zonos.injectScript = ({ fallBackDomain, isModule, scriptDomain, theRestUrl, }) => {
+    const fullScriptUrl = `${scriptDomain}/${theRestUrl}`;
+    const findScript = () => {
+        const script = document.querySelector(`script[src="${fullScriptUrl}"]`);
+        return !!script;
+    };
+    if (findScript()) {
+        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.crossOrigin = 'anonymous';
+    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);
+};
+/**
+ * We now support loading Zonos via npm. For clients using npm, `zonosBase` will always load from the server side. Therefore, the `zonosLoadUrl` defined earlier won't work since it lacks access to client-side APIs such as `window` and `document`.
+ */
+Zonos.getZonosUrl = () => {
+    // To ensure that sites using zonos-elements load the script from a specific domain when using npm, we need to check for zonosQaUrl and use it if available. Otherwise it will always load from the compiled versioned domain
+    if (_a.isNpm) {
+        const zonosQaUrl = getZonosQaUrl();
+        // Default to hard coded domain if zonosQaUrl is not available
+        return zonosQaUrl || ZONOS_URL;
+    }
+    return ZONOS_URL;
+};
+Zonos.injectZonosCdn = () => {
+    const ZONOS_LOAD_URL = _a.getZonosUrl();
+    // init zonos elements when the zonosKey is valid
+    // inject esmodule cdn for zonos elements
+    _a.injectScript({
+        fallBackDomain: JS_DELIVR_ZONOS_URL,
+        isModule: true,
+        scriptDomain: ZONOS_LOAD_URL,
+        theRestUrl: 'dist/zonos-elements/zonos-elements.esm.js',
+    });
+    // inject non module cdn for zonos elements
+    _a.injectScript({
+        fallBackDomain: JS_DELIVR_ZONOS_URL,
+        isModule: false,
+        scriptDomain: ZONOS_LOAD_URL,
+        theRestUrl: 'dist/zonos-elements/zonos-elements.js',
+    });
+    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: JS_DELIVR_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!`);
+};
+
+export { Zonos };