@zonos/elements 1.0.16 → 1.0.17-alpha.1

package/dist/scripts/zonos.js

@@ -0,0 +1,300 @@
+'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);
+};
+
+/* 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 ZONOS_URL = "https://unpkg.com/@zonos/elements@1.0.17-alpha.1";
+const INTER_FONT_URL = 'https://rsms.me';
+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.init = async ({ appearance, checkoutSettings, currencyConverter, helloSettings, zonosApiKey, }) => {
+    if (Zonos.doneInit) {
+        // do nothing if zonos is already initializeds
+        return;
+    }
+    log('====== ZONOS DEBUG MODE: on ======');
+    if (!zonosApiKey) {
+        logError('Missing Zonos API key');
+        return;
+    }
+    _a.zonosApiKey = zonosApiKey;
+    // eslint-disable-next-line no-console
+    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) => {
+    const zonosController = document.querySelector('zonos-controller');
+    void (zonosController === null || zonosController === void 0 ? void 0 : zonosController.showNotification(notification));
+};
+Zonos.injectController = ({ config, zonosApiKey, }) => {
+    if (document.querySelector('zonos-controller')) {
+        return;
+    }
+    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);
+    // eslint-disable-next-line no-console
+    log('Zonos controller injected!');
+};
+Zonos.injectZonosCdn = () => {
+    const findScript = () => {
+        const scripts = document.querySelectorAll(`script[src^="${ZONOS_URL}/dist/zonos-elements"]`);
+        scripts.forEach(script => {
+            if (script.src.indexOf('zonos-elements.js')) {
+                return true;
+            }
+        });
+        return false;
+    };
+    if (findScript()) ;
+    const headOrBody = document.head || document.body;
+    // init zonos elements when the zonosKey is valid
+    // inject esmodule cdn for zonos elements
+    const zonosEsmCdn = document.createElement('script');
+    zonosEsmCdn.type = 'module';
+    zonosEsmCdn.src = `${ZONOS_URL}/dist/zonos-elements/zonos-elements.esm.js`;
+    headOrBody.appendChild(zonosEsmCdn);
+    // inject non module cdn for zonos elements
+    const zonosCdn = document.createElement('script');
+    zonosCdn.noModule = true;
+    zonosCdn.src = `${ZONOS_URL}/dist/zonos-elements/zonos-elements.js`;
+    headOrBody.appendChild(zonosCdn);
+    // eslint-disable-next-line no-console
+    log('Zonos cdn script injected!');
+};
+Zonos.injectZonosCss = () => {
+    const findStyleLink = () => {
+        return !!document.querySelector(`link[rel="stylesheet"][href^="${ZONOS_URL}/dist/zonos-elements/zonos-elements.css"]`);
+    };
+    if (findStyleLink()) {
+        // eslint-disable-next-line no-console
+        log('Zonos style links already injected', 'warn');
+        return;
+    }
+    const headOrBody = document.head || document.body;
+    // inject 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 = `${ZONOS_URL}/dist/zonos-elements/zonos-elements.css`;
+    headOrBody.appendChild(zonosCss);
+    // eslint-disable-next-line no-console
+    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()) {
+        // eslint-disable-next-line no-console
+        log('Inter font already injected', 'warn');
+        return;
+    }
+    const headOrBody = document.head || document.body;
+    // inject css for zonos elements
+    const fontPreconnect = document.createElement('link');
+    fontPreconnect.rel = 'preconnect';
+    fontPreconnect.href = INTER_FONT_URL;
+    headOrBody.appendChild(fontPreconnect);
+    // inject css for zonos elements
+    const font = document.createElement('link');
+    font.rel = 'stylesheet';
+    font.href = `${INTER_FONT_URL}/inter/inter.css`;
+    headOrBody.appendChild(font);
+    // eslint-disable-next-line no-console
+    log('Zonos font injected!');
+};
+
+exports.Zonos = Zonos;

package/dist/types/components/store/checkout/cart.d.ts

@@ -19,6 +19,13 @@ type CartStore = {
     messages: string[];
     title: string;
   } | null;
+  exchangeRate: {
+    id: string;
+    rate: number;
+    sourceCurrencyCode: CurrencyCode;
+    targetCurrencyCode: CurrencyCode;
+    type: string;
+  } | null;
   isSelectedShippingAboveDeminimis: boolean;
   isSelectedShippingGuarantee: boolean;
   items: CartItem[];
@@ -52,6 +59,13 @@ declare const cartStoreUpdateToErrorState: ({ messages, title, }: {
   title: string;
 }) => void;
 type CartSubtotals = {
+  exchangeRate: {
+    id: string;
+    rate: number;
+    sourceCurrencyCode: CurrencyCode;
+    targetCurrencyCode: CurrencyCode;
+    type: string;
+  };
   items: number;
   landedCostTotal: number;
   presentmentCurrencyCode: CurrencyCode;

package/dist/types/components/store/checkout/stripe.d.ts

@@ -37,7 +37,7 @@ declare const initStripeElements: (props?: {
 declare const stripeStoreReset: () => void;
 declare const stripeStorePrefetchLandedCost: () => Promise<void>;
 declare const stripeStoreRetrievePayment: ({ clientSecret: _clientSecret, storybookForceStatus, }: {
-  clientSecret?: string | undefined;
+  clientSecret: string | null;
   storybookForceStatus?: PaymentIntent.Status | undefined;
 }) => Promise<{
   error: boolean;

package/dist/types/scripts/loadStripe.d.ts

@@ -1,2 +1,2 @@
 import { type LoadStripe } from "./stripe";
-export declare const loadStripe: LoadStripe;
+export declare const zonosLoadStripe: LoadStripe;

package/dist/types/scripts/stripe.d.ts

@@ -4,9 +4,9 @@ export interface LoadParams {
   advancedFraudSignals: boolean;
 }
 export type LoadStripe = (...args: Parameters<StripeConstructor>) => Promise<Stripe | null>;
-export declare const findScript: () => HTMLScriptElement | null;
+export declare const zonosStripeFindScript: () => HTMLScriptElement | null;
 export declare const injectScript: (params: null | LoadParams) => HTMLScriptElement | null;
-export declare const loadScript: (params: null | LoadParams) => Promise<StripeConstructor | null>;
+export declare const zonosStripeLoadScript: (params: null | LoadParams) => Promise<StripeConstructor | null>;
 export declare const initStripe: (maybeStripe: StripeConstructor | null, args: [publishableKey: string, options?: import("@stripe/stripe-js").StripeConstructorOptions | undefined], startTime: number) => Stripe | null;
 export declare const validateLoadParams: (params: {
   advancedFraudSignals: boolean;

package/dist/types/types/generated/graphql.customer.types.d.ts

@@ -1687,6 +1687,12 @@ export declare const stripeSubscriptionStatus: {
   readonly Unpaid: "UNPAID";
 };
 export type StripeSubscriptionStatus = (typeof stripeSubscriptionStatus)[keyof typeof stripeSubscriptionStatus];
+export declare const taxCalculationType: {
+  readonly Cif: "CIF";
+  readonly Custom: "CUSTOM";
+  readonly Fob: "FOB";
+};
+export type TaxCalculationType = (typeof taxCalculationType)[keyof typeof taxCalculationType];
 export declare const taxIdType: {
   readonly Cnp: "CNP";
   readonly Dan: "DAN";
@@ -1848,6 +1854,13 @@ export type CalculateLandedCostMutation = {
     } | null;
     subtotals: {
       duties: number;
+      exchangeRate: {
+        id: string;
+        rate: number;
+        sourceCurrencyCode: CurrencyCode;
+        targetCurrencyCode: CurrencyCode;
+        type: ExchangeRateType;
+      };
       fees: number;
       items: number;
       landedCostTotal: number;
@@ -1934,6 +1947,13 @@ export type CheckoutPresentmentFragment = {
   } | null;
   subtotals: {
     duties: number;
+    exchangeRate: {
+      id: string;
+      rate: number;
+      sourceCurrencyCode: CurrencyCode;
+      targetCurrencyCode: CurrencyCode;
+      type: ExchangeRateType;
+    };
     fees: number;
     items: number;
     landedCostTotal: number;
@@ -2007,6 +2027,13 @@ export type CheckoutSessionUpdateMutation = {
     organizationId: string;
     subtotals: {
       duties: number;
+      exchangeRate: {
+        id: string;
+        rate: number;
+        sourceCurrencyCode: CurrencyCode;
+        targetCurrencyCode: CurrencyCode;
+        type: ExchangeRateType;
+      };
       fees: number;
       items: number;
       landedCostTotal: number;
@@ -2043,6 +2070,13 @@ export type CheckoutSessionUpdateDetailsFragment = {
   organizationId: string;
   subtotals: {
     duties: number;
+    exchangeRate: {
+      id: string;
+      rate: number;
+      sourceCurrencyCode: CurrencyCode;
+      targetCurrencyCode: CurrencyCode;
+      type: ExchangeRateType;
+    };
     fees: number;
     items: number;
     landedCostTotal: number;
@@ -2098,6 +2132,13 @@ export type CheckoutSessionCreateMutation = {
     organizationId: string;
     subtotals: {
       duties: number;
+      exchangeRate: {
+        id: string;
+        rate: number;
+        sourceCurrencyCode: CurrencyCode;
+        targetCurrencyCode: CurrencyCode;
+        type: ExchangeRateType;
+      };
       fees: number;
       items: number;
       landedCostTotal: number;
@@ -2134,6 +2175,13 @@ export type CheckoutDetailsFragment = {
   organizationId: string;
   subtotals: {
     duties: number;
+    exchangeRate: {
+      id: string;
+      rate: number;
+      sourceCurrencyCode: CurrencyCode;
+      targetCurrencyCode: CurrencyCode;
+      type: ExchangeRateType;
+    };
     fees: number;
     items: number;
     landedCostTotal: number;

package/dist/types/types/generated/graphql.customer.types.ts

@@ -1946,6 +1946,14 @@ export const stripeSubscriptionStatus = {
 
 export type StripeSubscriptionStatus =
   (typeof stripeSubscriptionStatus)[keyof typeof stripeSubscriptionStatus];
+export const taxCalculationType = {
+  Cif: 'CIF',
+  Custom: 'CUSTOM',
+  Fob: 'FOB',
+} as const;
+
+export type TaxCalculationType =
+  (typeof taxCalculationType)[keyof typeof taxCalculationType];
 
 export const taxIdType = {
   Cnp: 'CNP',
@@ -2132,6 +2140,13 @@ export type CalculateLandedCostMutation = {
     } | null;
     subtotals: {
       duties: number;
+      exchangeRate: {
+        id: string;
+        rate: number;
+        sourceCurrencyCode: CurrencyCode;
+        targetCurrencyCode: CurrencyCode;
+        type: ExchangeRateType;
+      };
       fees: number;
       items: number;
       landedCostTotal: number;
@@ -2204,6 +2219,13 @@ export type CheckoutPresentmentFragment = {
   } | null;
   subtotals: {
     duties: number;
+    exchangeRate: {
+      id: string;
+      rate: number;
+      sourceCurrencyCode: CurrencyCode;
+      targetCurrencyCode: CurrencyCode;
+      type: ExchangeRateType;
+    };
     fees: number;
     items: number;
     landedCostTotal: number;
@@ -2263,6 +2285,13 @@ export type CheckoutSessionUpdateMutation = {
     organizationId: string;
     subtotals: {
       duties: number;
+      exchangeRate: {
+        id: string;
+        rate: number;
+        sourceCurrencyCode: CurrencyCode;
+        targetCurrencyCode: CurrencyCode;
+        type: ExchangeRateType;
+      };
       fees: number;
       items: number;
       landedCostTotal: number;
@@ -2295,6 +2324,13 @@ export type CheckoutSessionUpdateDetailsFragment = {
   organizationId: string;
   subtotals: {
     duties: number;
+    exchangeRate: {
+      id: string;
+      rate: number;
+      sourceCurrencyCode: CurrencyCode;
+      targetCurrencyCode: CurrencyCode;
+      type: ExchangeRateType;
+    };
     fees: number;
     items: number;
     landedCostTotal: number;
@@ -2348,6 +2384,13 @@ export type CheckoutSessionCreateMutation = {
     organizationId: string;
     subtotals: {
       duties: number;
+      exchangeRate: {
+        id: string;
+        rate: number;
+        sourceCurrencyCode: CurrencyCode;
+        targetCurrencyCode: CurrencyCode;
+        type: ExchangeRateType;
+      };
       fees: number;
       items: number;
       landedCostTotal: number;
@@ -2380,6 +2423,13 @@ export type CheckoutDetailsFragment = {
   organizationId: string;
   subtotals: {
     duties: number;
+    exchangeRate: {
+      id: string;
+      rate: number;
+      sourceCurrencyCode: CurrencyCode;
+      targetCurrencyCode: CurrencyCode;
+      type: ExchangeRateType;
+    };
     fees: number;
     items: number;
     landedCostTotal: number;

package/dist/zonos-elements/{cart-36c33342.js → cart-2f83e048.js}

@@ -214,6 +214,7 @@ const stripeStorePrefetchLandedCost = async () => {
       if (subtotals) {
         // prefetch landed cost will not update shipping and taxes since we haven't selected shipping method yet
         cartStoreApplySubtotals({
+          exchangeRate: subtotals.exchangeRate,
           items: subtotals.items,
           landedCostTotal: 0,
           presentmentCurrencyCode: subtotals.presentmentCurrencyCode,
@@ -349,6 +350,7 @@ const stripeStoreInitCheckoutSession = async () => {
   // update cart store with updated informations
   cartStore.checkoutSessionId = result.id;
   cartStoreApplySubtotals(Object.assign(Object.assign({}, result.subtotals), { landedCostTotal: 0, shipping: 0, total: result.subtotals.items }));
+  log('Exchange rate updated for cart items (checkout session create)', 'info', cartStore.exchangeRate);
   log('done-init-checkout-session');
   return true;
 };
@@ -401,6 +403,7 @@ const { onChange, reset, state: cartStore, } = createStore(() => ({
   currency: 'USD',
   dutiesTaxFees: 0,
   error: null,
+  exchangeRate: null,
   isSelectedShippingAboveDeminimis: false,
   isSelectedShippingGuarantee: false,
   items: [],
@@ -453,6 +456,8 @@ const cartStoreUpdateToErrorState = ({ messages, title, }) => {
   };
 };
 const cartStoreApplySubtotals = (subtotals) => {
+  // update exchange rate so we can use it to display cart items
+  cartStore.exchangeRate = subtotals.exchangeRate;
   cartStore.dutiesTaxFees = subtotals.landedCostTotal;
   cartStore.subtotal = subtotals.items;
   cartStore.total = subtotals.total;
@@ -463,6 +468,7 @@ const cartStoreReCalculateTotal = async ({ currency, itemsAmount, landedCostId,
     // update cart total right away if we have landed cost id to avoid order total flickering
     const subtotals = cartStore.selectedLandedCost.subtotals;
     cartStoreApplySubtotals(subtotals);
+    log('Exchange rate updated for cart items (landed cost subtotal)', 'info', cartStore.exchangeRate);
   }
   // update checkout session
   if (!cartStore.checkoutSessionId) {
@@ -491,6 +497,7 @@ const cartStoreReCalculateTotal = async ({ currency, itemsAmount, landedCostId,
     // This is when first open the checkout modal and we just want to get info from the old cart session.
     // use subtotals from checkout session to update cart total
     cartStoreApplySubtotals(json.checkoutSessionUpdate.subtotals);
+    log('Exchange rate updated for cart items (checkout session update)', 'info', cartStore.exchangeRate);
   }
   return true;
 };
@@ -588,4 +595,4 @@ const cartStorePreviousStep = () => {
 
 export { cartStoreUpdateItems as a, cartStoreReset as b, cartStore as c, stripeStoreInitCheckoutSession as d, cartStoreUpdateToErrorState as e, stripeStorePrefetchLandedCost as f, cartStoreNextStep as g, stripeStoreConfirmPayment as h, initStripeElements as i, stripeStoreReset as j, cartStorePreviousStep as k, stripeStoreRetrievePayment as l, cartStoreUpdateSelectedShippingOption as m, cartStoreGetShippingTransitInfo as n, stripeStore as s };
 
-//# sourceMappingURL=cart-36c33342.js.map
+//# sourceMappingURL=cart-2f83e048.js.map