@zonos/elements 1.2.2 → 1.2.4-alpha.1

package/dist/scripts/zonos.js

@@ -30,6 +30,33 @@ const logError = (message, ...rest) => {
     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';
@@ -141,9 +168,40 @@ const zonosLoadStripe = async (...args) => {
 };
 
 var _a;
-const ZONOS_URL = "https://v1.2.2.js.zonos.com";
-const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.2.2";
+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.4-alpha.1.js.zonos.com";
+const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.2.4-alpha.1";
 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 {
 }
@@ -153,9 +211,13 @@ Zonos.doneInit = false;
 Zonos.debug = !!window.location.search.match(/\?.*(&*)zonosDebug=1/);
 Zonos.isBigCommerce = false;
 Zonos.internationalHideSelector = '';
-Zonos.version = `v${"1.2.2"}`;
+Zonos.zonosQaUrl = zonosQaUrl;
+Zonos.version = `v${"1.2.4-alpha.1"}`;
+Zonos.modeAlerted = false;
+Zonos.getCurrentTimestamp = () => new Date().getTime();
+Zonos.zonosController = null;
 Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSettings, zonosApiKey, }) => {
-    if (Zonos.doneInit) {
+    if (_a.doneInit) {
         // do nothing if zonos is already initializeds
         return;
     }
@@ -165,16 +227,15 @@ Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSett
         return;
     }
     _a.zonosApiKey = zonosApiKey;
-    // eslint-disable-next-line no-console
     log('init zonos');
     // inject zonos cdn
-    Zonos.injectZonosCdn();
+    _a.injectZonosCdn();
     // inject css for zonos elements
-    Zonos.injectZonosCss();
+    _a.injectZonosCss();
     // inject fonts for zonos elements
-    Zonos.injectFonts();
+    _a.injectFonts();
     // init zonos controller
-    Zonos.injectController({
+    _a.injectController({
         config: {
             appearance,
             checkoutSettings,
@@ -183,7 +244,7 @@ Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSett
         },
         zonosApiKey,
     });
-    Zonos.doneInit = true;
+    _a.doneInit = true;
 };
 Zonos.displayCurrency = () => {
     const zonosHello = document.querySelector('zonos-hello');
@@ -192,13 +253,59 @@ Zonos.displayCurrency = () => {
     }
 };
 Zonos.showNotification = (notification) => {
-    const zonosController = document.querySelector('zonos-controller');
-    void (zonosController === null || zonosController === void 0 ? void 0 : zonosController.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;
@@ -214,7 +321,8 @@ Zonos.injectController = ({ config, zonosApiKey, }) => {
         void zonosController.initCheckoutElement(stripe);
     });
     document.body.appendChild(zonosController);
-    // eslint-disable-next-line no-console
+    // set zonos controller to be global
+    _a.zonosController = zonosController;
     log('Zonos controller injected!');
 };
 Zonos.injectScript = ({ fallBackDomain, isModule, scriptDomain, theRestUrl, }) => {
@@ -306,10 +414,9 @@ Zonos.injectStylesheet = ({ fallBackDomain, stylesheetDomain, theRestUrl, }) =>
 };
 Zonos.injectZonosCss = () => {
     const findStyleLink = () => {
-        return !!document.querySelector(`link[rel="stylesheet"][href^="${ZONOS_URL}/dist/zonos-elements/zonos-elements.css"]`);
+        return !!document.querySelector(`link[rel="stylesheet"][href*="/dist/zonos-elements/zonos-elements.css"]`);
     };
     if (findStyleLink()) {
-        // eslint-disable-next-line no-console
         log('Zonos style links already injected', 'warn');
         return;
     }
@@ -319,7 +426,6 @@ Zonos.injectZonosCss = () => {
         stylesheetDomain: ZONOS_URL,
         theRestUrl: 'dist/zonos-elements/zonos-elements.css',
     });
-    // eslint-disable-next-line no-console
     log('Zonos style css injected!');
 };
 Zonos.injectFonts = () => {
@@ -338,23 +444,49 @@ Zonos.injectFonts = () => {
         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
+    // inject font 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
+    // 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);
-    // eslint-disable-next-line no-console
     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!`);
+};
 
 exports.Zonos = Zonos;

package/dist/types/__tests__/build-utils/urlCheckOne.d.ts

@@ -0,0 +1,6 @@
+export declare const urlCheckOne: ({ branch, filePath, packageVersion, }: {
+    /** Branch that the build is compiled for */
+    branch: string;
+    filePath: string;
+    packageVersion: string;
+}) => Promise<boolean>;

package/dist/types/components/checkout/zonos-checkout/zonos-cart-items/zonos-cart-items.d.ts

@@ -1,4 +1,4 @@
 export declare class ZonosCartItems {
-  errorImages: string[];
-  render(): any;
+    errorImages: string[];
+    render(): any;
 }

package/dist/types/components/checkout/zonos-checkout/zonos-cart-subtotal/zonos-cart-subtotal.d.ts

@@ -1,3 +1,3 @@
 export declare class ZonosCartSubtotal {
-  render(): any;
+    render(): any;
 }

package/dist/types/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.d.ts

@@ -2,35 +2,35 @@ import { type EventEmitter } from '../../../../stencil-public-runtime';
 import type { PaymentIntent } from '@stripe/stripe-js';
 import type { ElementsUiStyle } from "../../../../types/index";
 type OverrideNotification = {
-  messages: string[];
-  title: string;
-  type: 'success' | 'error';
+    messages: string[];
+    title: string;
+    type: 'success' | 'error';
 };
 export declare class ZonosCheckoutFinish {
-  /**
-   * The border radius style of the dialog
-   */
-  borderRadius: ElementsUiStyle;
-  /**
-   * Force status to test the UI for storybook
-   */
-  storybookForceStatus?: PaymentIntent['status'];
-  /**
-   * Override the notification message and title, bypass checking stripe payment status
-   *
-   */
-  overrideNotification?: OverrideNotification;
-  /**
-   * Event to emit when the continue button is clicked
-   */
-  closeClick: EventEmitter<void>;
-  isLoading: boolean;
-  notificationType: 'success' | 'error';
-  notificationTitle: string;
-  notificationMessages: string[];
-  private checkPaymentStatus;
-  private closeClickHandler;
-  componentDidLoad(): void;
-  render(): any;
+    /**
+     * The border radius style of the dialog
+     */
+    borderRadius: ElementsUiStyle;
+    /**
+     * Force status to test the UI for storybook
+     */
+    storybookForceStatus?: PaymentIntent['status'];
+    /**
+     * Override the notification message and title, bypass checking stripe payment status
+     *
+     */
+    overrideNotification?: OverrideNotification;
+    /**
+     * Event to emit when the continue button is clicked
+     */
+    closeClick: EventEmitter<void>;
+    isLoading: boolean;
+    notificationType: 'success' | 'error';
+    notificationTitle: string;
+    notificationMessages: string[];
+    private checkPaymentStatus;
+    private closeClickHandler;
+    componentDidLoad(): void;
+    render(): any;
 }
 export {};

package/dist/types/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.d.ts

@@ -1,34 +1,34 @@
 import { type EventEmitter } from '../../../../stencil-public-runtime';
 export declare class ZonosCheckoutPayment {
-  /**
-   * Error occurred during payment
-   */
-  paymentError: boolean;
-  /**
-   * Whether or not the checkout is in mobile mode
-   */
-  submitBtnType?: HTMLZonosButtonElement['variant'];
-  /**
-   * Whether or not the continue button is loading
-   */
-  continueLoading: boolean;
-  /**
-   * Submit button main color
-   */
-  submitBtnColor?: string;
-  /**
-   * Event to emit when the continue button is clicked
-   */
-  continueClicked: EventEmitter<void>;
-  /**
-   * Whether or not the continue button is disabled
-   * @default true
-   */
-  disabled: boolean;
-  watchFormComplete(): void;
-  /**
-   * handler for continue button click
-   */
-  private continueClickHandler;
-  render(): any;
+    /**
+     * Error occurred during payment
+     */
+    paymentError: boolean;
+    /**
+     * Whether or not the checkout is in mobile mode
+     */
+    submitBtnType?: HTMLZonosButtonElement['variant'];
+    /**
+     * Whether or not the continue button is loading
+     */
+    continueLoading: boolean;
+    /**
+     * Submit button main color
+     */
+    submitBtnColor?: string;
+    /**
+     * Event to emit when the continue button is clicked
+     */
+    continueClicked: EventEmitter<void>;
+    /**
+     * Whether or not the continue button is disabled
+     * @default true
+     */
+    disabled: boolean;
+    watchFormComplete(): void;
+    /**
+     * handler for continue button click
+     */
+    private continueClickHandler;
+    render(): any;
 }

package/dist/types/components/checkout/zonos-checkout/zonos-checkout.d.ts

@@ -3,81 +3,81 @@ import { type CartItem } from "../../store/checkout/cart";
 import { type ContactOption } from "../../store/checkout/stripe";
 import { type AppearanceConfig } from "../../store/zonosStore";
 export declare class ZonosCheckout {
-  /**
-   * Override appearance config
-   */
-  appearanceSettingsOverride?: Partial<AppearanceConfig>;
-  /**
-   * Preview checkout without needing to click on the button. This would be useful for demo purpose
-   */
-  preview: boolean;
-  /**
-   * Flag to determine if the checkout is on mobile
-   */
-  mobile: boolean;
-  /**
-   * Default address to use for the checkout (preview mode)
-   */
-  defaultAddress: ContactOption | null;
-  /**
-   * Force dialog to be open
-   */
-  forceDialogOpen: boolean;
-  /**
-   * Whether or not the dialog is open
-   */
-  open: boolean;
-  /**
-   * The stripe instance
-   */
-  stripe: Stripe | null;
-  /**
-   * Whether or not the submit button is loading in `step` component
-   */
-  submitLoading: boolean;
-  /**
-   * Error when submitting payment
-   */
-  paymentError: boolean;
-  collapseReviewMobile: boolean;
-  /**
-   * Determine if we should skip and not hijack the Checkout button click event
-   * Sometimes stripe or our api has error, we don't want to hijack the click event.
-   */
-  isAttachError: boolean;
-  isMobile: boolean;
-  zonosReviewRef?: HTMLZonosReviewElement;
-  storybookPaymentStatusOverride?: PaymentIntent['status'];
-  /**
-   * Init cart info handler event
-   */
-  initCartInfoHandler(e: CustomEvent<CartItem[]>): Promise<void>;
-  /**
-   * Close dialog action
-   */
-  closeDialogHandler(): Promise<void>;
-  private applyStripeTheme;
-  private buildCartAndInit;
-  private attachCheckout;
-  private isShippableCountry;
-  appearanceSettingsOverrideChanged(): void;
-  /**
-   * Setup all of the event listeners for the component on first load
-   */
-  init(): Promise<void>;
-  /**
-   * For storybook to set to finish step, this is to trigger in the story for zonos-checkout-finish
-   */
-  setToFinishStep(forcePaymentStatus?: PaymentIntent['status']): Promise<void>;
-  private handleCustomerInfoContinue;
-  private handleShippingContinue;
-  private handleCheckoutPaymentContinue;
-  private handleFinishClick;
-  private handleBackClick;
-  private getCurrentLocalePageEnum;
-  handleWindowResize(): void;
-  handleMobileChange(): void;
-  componentWillLoad(): void;
-  disconnectedCallback(): void;
-  render(): any;
+    /**
+     * Override appearance config
+     */
+    appearanceSettingsOverride?: Partial<AppearanceConfig>;
+    /**
+     * Preview checkout without needing to click on the button. This would be useful for demo purpose
+     */
+    preview: boolean;
+    /**
+     * Flag to determine if the checkout is on mobile
+     */
+    mobile: boolean;
+    /**
+     * Default address to use for the checkout (preview mode)
+     */
+    defaultAddress: ContactOption | null;
+    /**
+     * Force dialog to be open
+     */
+    forceDialogOpen: boolean;
+    /**
+     * Whether or not the dialog is open
+     */
+    open: boolean;
+    /**
+     * The stripe instance
+     */
+    stripe: Stripe | null;
+    /**
+     * Whether or not the submit button is loading in `step` component
+     */
+    submitLoading: boolean;
+    /**
+     * Error when submitting payment
+     */
+    paymentError: boolean;
+    collapseReviewMobile: boolean;
+    /**
+     * Determine if we should skip and not hijack the Checkout button click event
+     * Sometimes stripe or our api has error, we don't want to hijack the click event.
+     */
+    isAttachError: boolean;
+    isMobile: boolean;
+    zonosReviewRef?: HTMLZonosReviewElement;
+    storybookPaymentStatusOverride?: PaymentIntent['status'];
+    /**
+     * Init cart info handler event
+     */
+    initCartInfoHandler(e: CustomEvent<CartItem[]>): Promise<void>;
+    /**
+     * Close dialog action
+     */
+    closeDialogHandler(): Promise<void>;
+    private applyStripeTheme;
+    private buildCartAndInit;
+    private attachCheckout;
+    private isShippableCountry;
+    appearanceSettingsOverrideChanged(): void;
+    /**
+     * Setup all of the event listeners for the component on first load
+     */
+    init(): Promise<void>;
+    /**
+     * For storybook to set to finish step, this is to trigger in the story for zonos-checkout-finish
+     */
+    setToFinishStep(forcePaymentStatus?: PaymentIntent['status']): Promise<void>;
+    private handleCustomerInfoContinue;
+    private handleShippingContinue;
+    private handleCheckoutPaymentContinue;
+    private handleFinishClick;
+    private handleBackClick;
+    private getCurrentLocalePageEnum;
+    handleWindowResize(): void;
+    handleMobileChange(): void;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
 }

package/dist/types/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.d.ts

@@ -1,35 +1,35 @@
 import { type EventEmitter } from '../../../../stencil-public-runtime';
 import { type ContactOption } from "../../../store/checkout/stripe";
 export declare class ZonosCustomerInfo {
-  /**
-   * Whether or not the continue button is loading
-   */
-  continueLoading: boolean;
-  /**
-   * Whether or not the checkout is in mobile mode
-   */
-  submitBtnType?: HTMLZonosButtonElement['variant'];
-  /**
-   * Submit button main color
-   */
-  submitBtnColor?: string;
-  /**
-   * Default address to use for the checkout (preview mode)
-   */
-  defaultAddress: ContactOption | null;
-  /**
-   * Event to emit when the continue button is clicked
-   */
-  continueClicked: EventEmitter<void>;
-  /**
-   * Whether or not the continue button is disabled
-   * @default true
-   */
-  disabled: boolean;
-  watchFormComplete(): void;
-  /**
-   * handler for continue button click
-   */
-  private continueClickHandler;
-  render(): any;
+    /**
+     * Whether or not the continue button is loading
+     */
+    continueLoading: boolean;
+    /**
+     * Whether or not the checkout is in mobile mode
+     */
+    submitBtnType?: HTMLZonosButtonElement['variant'];
+    /**
+     * Submit button main color
+     */
+    submitBtnColor?: string;
+    /**
+     * Default address to use for the checkout (preview mode)
+     */
+    defaultAddress: ContactOption | null;
+    /**
+     * Event to emit when the continue button is clicked
+     */
+    continueClicked: EventEmitter<void>;
+    /**
+     * Whether or not the continue button is disabled
+     * @default true
+     */
+    disabled: boolean;
+    watchFormComplete(): void;
+    /**
+     * handler for continue button click
+     */
+    private continueClickHandler;
+    render(): any;
 }