@zonos/elements 1.2.3 → 1.2.4-alpha.10

package/dist/scripts/zonos.js

@@ -1,10 +1,30 @@
 'use strict';
 
 const log = (message, type, ...additionalInfo) => {
+    var _a;
     // if type is error and debug is false, do not log
     if (!window.Zonos.debug) {
         return;
     }
+    let loggingIframe = document.querySelector('iframe#zonos---debug-logging-iframe');
+    if (!loggingIframe) {
+        // add a hidden iframe
+        loggingIframe = document.createElement('iframe');
+        loggingIframe.id = 'zonos---debug-logging-iframe';
+        loggingIframe.style.display = 'none';
+        loggingIframe.style.opacity = '0';
+        loggingIframe.style.position = 'absolute';
+        loggingIframe.style.top = '-9999px';
+        loggingIframe.style.left = '-9999px';
+        loggingIframe.style.width = '1px';
+        loggingIframe.style.height = '1px';
+        loggingIframe.style.border = 'none';
+        loggingIframe.style.overflow = 'hidden';
+        loggingIframe.style.visibility = 'hidden';
+        document.body.appendChild(loggingIframe);
+    }
+    // use the logging iframe's console to log just in case the console is disabled (overriden) by the site owner
+    const console = ((_a = loggingIframe.contentWindow) === null || _a === void 0 ? void 0 : _a.window.console) || window.console;
     switch (type) {
         case 'warn':
             // eslint-disable-next-line no-console
@@ -30,6 +50,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,44 +188,40 @@ const zonosLoadStripe = async (...args) => {
 };
 
 var _a;
-// 3 hours
-const EXPIRED_QA_TIME = 3 * 60 * 60 * 1000;
-// validate the time format (yyyymmddhhmmss) in the qa params if exceeds 1 hour, don't use qa
-const isZonosQa = (() => {
-    const zonosQaTime = window.location.search.match(/\?.*(&*)zonosQa=(\d+)/);
-    if (!zonosQaTime) {
-        return false;
-    }
-    const [, , zonosQaTimeExtracted] = zonosQaTime;
-    if (!zonosQaTimeExtracted) {
-        return false;
-    }
-    const zonosQaTimeValue = parseInt(zonosQaTimeExtracted, 10);
-    const now = new Date();
-    const nowTime = now.getTime();
-    const isValid = nowTime - zonosQaTimeValue < EXPIRED_QA_TIME;
-    if (isValid) {
-        // Zonos class is not available in here yet, so we use console.warn instead of log util
-        // eslint-disable-next-line no-console
-        console.warn(`[ZONOS-WARNING] USING DEBUG DOMAIN, THIS IS ONLY FOR ZONOS DEVELOPER TO DEBUG, PLEASE REMOVE zonosQa=xxx OUT OF URL IF YOU DON'T KNOW WHAT YOU'RE DOING`);
+const zonosQaUrl = (() => {
+    const qaUrl = extractZonosQaUrl(window.location.href);
+    if (!qaUrl) {
+        return null;
     }
-    else {
-        // Zonos class is not available in here yet, so we use console.warn instead of log util
+    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
-        console.warn(`[ZONOS-WARNING] QA DOMAIN IS EXPIRED, USING PRODUCTION DOMAIN NOW`);
-        // remove the zonosQa param from url
+        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('zonosQa');
-        const newUrl = `${window.location.pathname}?${urlSearchParams.toString()}`;
+        urlSearchParams.delete('zonosQaUrl');
+        const { pathname } = window.location;
+        const newUrl = `${pathname}?${urlSearchParams.toString()}`;
         window.history.replaceState({}, '', newUrl);
-    }
-    return isValid;
+        window.location.reload();
+        return null;
+    });
+    return fullUrl;
 })();
-const ZONOS_URL = isZonosQa
-    ? 'https://debug.js.zonos.com'
-    : "https://v1.2.3.js.zonos.com";
-const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.2.3";
+const ZONOS_URL = zonosQaUrl || "https://v1.2.4-alpha.10.js.zonos.com";
+const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.2.4-alpha.10";
 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 {
 }
@@ -188,10 +231,13 @@ Zonos.doneInit = false;
 Zonos.debug = !!window.location.search.match(/\?.*(&*)zonosDebug=1/);
 Zonos.isBigCommerce = false;
 Zonos.internationalHideSelector = '';
-Zonos.version = `v${"1.2.3"}`;
+Zonos.zonosQaUrl = zonosQaUrl;
+Zonos.version = `v${"1.2.4-alpha.10"}`;
+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;
     }
@@ -202,14 +248,16 @@ Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSett
     }
     _a.zonosApiKey = zonosApiKey;
     log('init zonos');
+    // add sentry to the project
+    _a.injectSentryScript();
     // 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,
@@ -218,7 +266,7 @@ Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSett
         },
         zonosApiKey,
     });
-    Zonos.doneInit = true;
+    _a.doneInit = true;
 };
 Zonos.displayCurrency = () => {
     const zonosHello = document.querySelector('zonos-hello');
@@ -227,8 +275,8 @@ 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
@@ -295,9 +343,60 @@ 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.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()) {
+        // eslint-disable-next-line no-console
+        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({
+            denyUrls: [
+                // Facebook flakiness
+                /graph\.facebook\.com/i,
+                // Facebook blocked
+                /connect\.facebook\.net\/en_US\/all\.js/i,
+                // Woopra flakiness
+                /eatdifferent\.com\.woopra-ns\.com/i,
+                /static\.woopra\.com\/js\/woopra\.js/i,
+                // Chrome extensions
+                /extensions\//i,
+                /^chrome:\/\//i,
+                /^chrome-extension:\/\//i,
+                // Other plugins
+                /webappstoolbarba\.texthelp\.com\//i,
+                /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
+                /dev.elements.zonos.com/i,
+                /js.zonos.com/,
+            ],
+            dsn: 'https://19168bd05af0e2e0e7520ad58953e4f2@o446983.ingest.sentry.io/4506400622837760',
+            release: `zonos-elements@${_a.version}`,
+        });
+    };
+    headOrBody.appendChild(script);
+};
 Zonos.injectScript = ({ fallBackDomain, isModule, scriptDomain, theRestUrl, }) => {
     const fullScriptUrl = `${scriptDomain}/${theRestUrl}`;
     const findScript = () => {
@@ -320,6 +419,7 @@ Zonos.injectScript = ({ fallBackDomain, isModule, scriptDomain, theRestUrl, }) =
         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);
@@ -390,7 +490,6 @@ Zonos.injectZonosCss = () => {
         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;
     }
@@ -400,7 +499,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 = () => {
@@ -419,23 +517,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

@@ -1,36 +1,40 @@
 import { type EventEmitter } from '../../../../stencil-public-runtime';
 import type { PaymentIntent } from '@stripe/stripe-js';
-import type { ElementsUiStyle } from "../../../../types/index";
+import { type ElementsUiStyle } from "../../../../types/index";
+import type { GetOrderQuery } from "../../../../types/generated/graphql.customer.types";
 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[];
+    order: GetOrderQuery['order'] | null;
+    private pullOrder;
+    private getPullOrder;
+    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;
 }