@zonos/elements 1.2.2 → 1.2.4-alpha.1

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

@@ -3,72 +3,72 @@ import type { HelloMobileLocation } from "../../../types/generated/graphql.custo
 import type { Product } from "../../../types/hello/Product";
 import type { RestrictedItem } from "../../../types/hello/RestrictedItem";
 export declare class ZonosHello {
-  private helloRef?;
-  /**
-   * Force mobile styling instead of media query and use the passed location value
-   * @default false
-   */
-  mobileLocationOverride?: HelloMobileLocation;
-  /**
-   * Force left animation instead of detecting which side has more space
-   * @default false
-   */
-  animateFromLeftOverride?: boolean;
-  /**
-   * Override the appearance settings
-   */
-  appearanceSettingsOverride?: Partial<AppearanceConfig>;
-  showPeekMessage: boolean;
-  zonosStoreHelloSettings: import("../../..").HelloConfig;
-  showDialog: boolean;
-  peekMessage: string | null;
-  initialUrl: string;
-  /**
-   * This array will hold all restricted items handled by Hello thus far
-   */
-  allRestrictedItems: RestrictedItem[];
-  /**
-   * This array will hold all products handled by Hello thus far
-   */
-  allFoundProducts: Product[];
-  /**
-   * This array will hold all products currently on the page
-   */
-  productsOnPage: Product[];
-  private getHelloPeekMessage;
-  private enableShowPeekMessage;
-  private getNewItemRestrictions;
-  private triggerShowPeekMessage;
-  private disableAddToCartButtons;
-  private handleItemRestrictions;
-  private reloadHelloData;
-  private handleProductCountChange;
-  private watchProductCountChange;
-  private updateHelloOnPageChange;
-  componentWillLoad(): void;
-  /**
-   * This method will trigger the currency conversion and display the converted value
-   * @returns void
-   */
-  displayCurrency(): Promise<void>;
-  /**
-   * This method will call convert and format, and return the converted and formatted string
-   * @returns string
-   */
-  convertAndFormat(value: number): Promise<void>;
-  /**
-   * This method will convert the currency and return the converted value
-   * @returns number
-   */
-  convert(value: number): Promise<void>;
-  /**
-   * This method will format the currency and return the formatted string
-   * @returns number
-   */
-  format(value: number): Promise<void>;
-  private changeShowDialog;
-  private shouldAnimateLeftDesktop;
-  handleResize(): void;
-  private isShippableCountry;
-  render(): any;
+    private helloRef?;
+    /**
+     * Force mobile styling instead of media query and use the passed location value
+     * @default false
+     */
+    mobileLocationOverride?: HelloMobileLocation;
+    /**
+     * Force left animation instead of detecting which side has more space
+     * @default false
+     */
+    animateFromLeftOverride?: boolean;
+    /**
+     * Override the appearance settings
+     */
+    appearanceSettingsOverride?: Partial<AppearanceConfig>;
+    showPeekMessage: boolean;
+    zonosStoreHelloSettings: import("../../..").HelloConfig;
+    showDialog: boolean;
+    peekMessage: string | null;
+    initialUrl: string;
+    /**
+     * This array will hold all restricted items handled by Hello thus far
+     */
+    allRestrictedItems: RestrictedItem[];
+    /**
+     * This array will hold all products handled by Hello thus far
+     */
+    allFoundProducts: Product[];
+    /**
+     * This array will hold all products currently on the page
+     */
+    productsOnPage: Product[];
+    private getHelloPeekMessage;
+    private enableShowPeekMessage;
+    private getNewItemRestrictions;
+    private triggerShowPeekMessage;
+    private disableAddToCartButtons;
+    private handleItemRestrictions;
+    private reloadHelloData;
+    private handleProductCountChange;
+    private watchProductCountChange;
+    private updateHelloOnPageChange;
+    componentWillLoad(): void;
+    /**
+     * This method will trigger the currency conversion and display the converted value
+     * @returns void
+     */
+    displayCurrency(): Promise<void>;
+    /**
+     * This method will call convert and format, and return the converted and formatted string
+     * @returns string
+     */
+    convertAndFormat(value: number): Promise<void>;
+    /**
+     * This method will convert the currency and return the converted value
+     * @returns number
+     */
+    convert(value: number): Promise<void>;
+    /**
+     * This method will format the currency and return the formatted string
+     * @returns number
+     */
+    format(value: number): Promise<void>;
+    private changeShowDialog;
+    private shouldAnimateLeftDesktop;
+    handleResize(): void;
+    private isShippableCountry;
+    render(): any;
 }

package/dist/types/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.d.ts

@@ -1,13 +1,13 @@
 import type { AppearanceConfig } from "../../../../components";
 export declare class ZonosHelloDialogFooter {
-  /**
-   * Appearance settings
-   */
-  appearanceSettings?: Partial<AppearanceConfig>;
-  /**
-   * Whether or not the country select dialog is open
-   * @default false
-   */
-  setShowCountrySelect: (value: boolean) => void;
-  render(): any;
+    /**
+     * Appearance settings
+     */
+    appearanceSettings?: Partial<AppearanceConfig>;
+    /**
+     * Whether or not the country select dialog is open
+     * @default false
+     */
+    setShowCountrySelect: (value: boolean) => void;
+    render(): any;
 }

package/dist/types/components/hello/zonos-hello-dialog/zonos-hello-dialog.d.ts

@@ -2,45 +2,45 @@ import { type EventEmitter } from '../../../stencil-public-runtime';
 import type { AppearanceConfig, HelloMobileLocation } from "../../../types/index";
 import type { RestrictedItem } from "../../../types/hello/RestrictedItem";
 export declare class ZonosHelloDialog {
-  /**
-   * Whether or not the dialog is open
-   */
-  isOpen: boolean;
-  /**
-   * The function to set the open state
-   * @default () => {}
-   */
-  setIsOpen: (isOpen: boolean) => void;
-  /**
-   * Force mobile styling instead of media query and use the passed location value
-   * @default false
-   */
-  mobileLocationOverride?: HelloMobileLocation;
-  /**
-   * Force left animation instead of detecting which side has more space
-   * @default false
-   */
-  animateFromLeftOverride?: boolean;
-  /**
-   * Override the appearance settings
-   */
-  appearanceSettings?: Partial<AppearanceConfig>;
-  /**
-   * Item restrictions array if any
-   * @default []
-   */
-  restrictedItems: RestrictedItem[];
-  welcomeMessage: string;
-  showCountrySelect: boolean;
-  /**
-   * Close dialog button click
-   */
-  closeDialog: EventEmitter<void>;
-  private dialogRef;
-  private clickOutsideDialogHandler;
-  private getCurrentPageEnum;
-  private setShowCountrySelect;
-  globalClickHandler(e: MouseEvent): void;
-  isOpenHandler(isOpen: boolean): void;
-  render(): any;
+    /**
+     * Whether or not the dialog is open
+     */
+    isOpen: boolean;
+    /**
+     * The function to set the open state
+     * @default () => {}
+     */
+    setIsOpen: (isOpen: boolean) => void;
+    /**
+     * Force mobile styling instead of media query and use the passed location value
+     * @default false
+     */
+    mobileLocationOverride?: HelloMobileLocation;
+    /**
+     * Force left animation instead of detecting which side has more space
+     * @default false
+     */
+    animateFromLeftOverride?: boolean;
+    /**
+     * Override the appearance settings
+     */
+    appearanceSettings?: Partial<AppearanceConfig>;
+    /**
+     * Item restrictions array if any
+     * @default []
+     */
+    restrictedItems: RestrictedItem[];
+    welcomeMessage: string;
+    showCountrySelect: boolean;
+    /**
+     * Close dialog button click
+     */
+    closeDialog: EventEmitter<void>;
+    private dialogRef;
+    private clickOutsideDialogHandler;
+    private getCurrentPageEnum;
+    private setShowCountrySelect;
+    globalClickHandler(e: MouseEvent): void;
+    isOpenHandler(isOpen: boolean): void;
+    render(): any;
 }

package/dist/types/components/main/zonos-controller.d.ts

@@ -1,44 +1,54 @@
 import { type EventEmitter } from '../../stencil-public-runtime';
 import type { Stripe } from '@stripe/stripe-js';
 import type { NotificationInit } from "../common/zonos-notification/zonos-notification";
+import { type AppearanceConfig } from "../store/zonosStore";
 import type { LoadZonosParamsConfig } from "../../scripts/zonos";
 import type { CountryCode } from "../../types/generated/graphql.customer.types";
 export declare class ZonosController {
-  /**
-   * The zonos config object
-   */
-  config: LoadZonosParamsConfig;
-  /**
-   * The zonos api key
-   */
-  zonosApiKey: string;
-  /**
-   * Event emitted when stripe is initialized
-   */
-  stripeInitEvent?: EventEmitter<{
-    publishableKey: string;
-  }>;
-  /**
-   * Method to initialize checkout element
-   */
-  initCheckoutElement(stripe: Stripe): Promise<void>;
-  /**
-   * Init zonos notification
-   */
-  private initZonosNotification;
-  componentWillLoad(): Promise<void>;
-  /**
-   * Show notification
-   */
-  showNotification(notification: NotificationInit): Promise<void>;
-  /**
-   * Override the setting
-   * @param config config that need to override the default setting
-   */
-  overrideConfig(config: LoadZonosParamsConfig): Promise<void>;
-  /**
-   * Override country code for storybook
-   */
-  overrideCountry(countryCode: CountryCode): Promise<void>;
-  render(): any;
+    /**
+     * The zonos config object
+     */
+    config: LoadZonosParamsConfig;
+    /**
+     * The zonos api key
+     */
+    zonosApiKey: string;
+    /**
+     * Event emitted when stripe is initialized
+     */
+    stripeInitEvent?: EventEmitter<{
+        publishableKey: string;
+    }>;
+    /**
+     * Method to initialize checkout element
+     */
+    initCheckoutElement(stripe: Stripe): Promise<void>;
+    /**
+     * Init zonos notification
+     */
+    private initZonosNotification;
+    private disablePlaceOrderButtons;
+    /**
+     * Setup google font
+     */
+    setupGoogleFont(overrideFont?: string): Promise<void>;
+    componentWillLoad(): Promise<void>;
+    /**
+     * Show notification
+     */
+    showNotification(notification: NotificationInit): Promise<void>;
+    /**
+     * Override the setting
+     * @param config config that need to override the default setting
+     */
+    overrideConfig(config: LoadZonosParamsConfig): Promise<void>;
+    /**
+     * Override country code for storybook
+     */
+    overrideCountry(countryCode: CountryCode): Promise<void>;
+    /**
+     * Get appearance from setting
+     */
+    getAppearanceSetting(): Promise<AppearanceConfig>;
+    render(): any;
 }

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

@@ -1,57 +1,57 @@
 import { stripeStoreUpdateCheckoutSession } from "./stripe";
 import type { CheckoutPresentmentFragment, CurrencyCode, ItemMeasurementType, ItemUnitOfMeasure, ShipmentRatingFragment } from "../../../types/generated/graphql.customer.types";
 export type ItemMeasurement = {
-  /** Indicates what type of `Measurement`, e.g. weight, specific dim unit. */
-  type?: ItemMeasurementType;
-  /** Indicates the `Measurement` units to be used. */
-  unitOfMeasure?: ItemUnitOfMeasure;
-  /** The `Measurement` value. */
-  value?: number;
+    /** Indicates what type of `Measurement`, e.g. weight, specific dim unit. */
+    type?: ItemMeasurementType;
+    /** Indicates the `Measurement` units to be used. */
+    unitOfMeasure?: ItemUnitOfMeasure;
+    /** The `Measurement` value. */
+    value?: number;
 };
 export type CartItem = {
-  amount: number;
-  countryOfOrigin?: string;
-  currencyCode: string;
-  description?: string;
-  hsCode?: string;
-  imageUrl?: string;
-  measurements?: ItemMeasurement[];
-  metadata?: {
-    [key: string]: string | number;
-  };
-  name: string;
-  productId?: string;
-  quantity: number;
-  sku?: string;
+    amount: number;
+    countryOfOrigin?: string;
+    currencyCode: string;
+    description?: string;
+    hsCode?: string;
+    imageUrl?: string;
+    measurements?: ItemMeasurement[];
+    metadata?: {
+        [key: string]: string | number;
+    };
+    name: string;
+    productId?: string;
+    quantity: number;
+    sku?: string;
 };
 type CartStore = {
-  checkoutSessionId: string | null;
-  currency: CurrencyCode;
-  dutiesTaxFees: number;
-  error: {
-    messages: string[];
-    title: string;
-  } | null;
-  exchangeRate: {
-    id: string;
-    rate: number;
-    sourceCurrencyCode: CurrencyCode;
-    targetCurrencyCode: CurrencyCode;
-    type: string;
-  } | null;
-  isSelectedShippingAboveDeminimis: boolean;
-  isSelectedShippingGuarantee: boolean;
-  items: CartItem[];
-  landedCostData: CheckoutPresentmentFragment[] | null;
-  selectedLandedCost: CheckoutPresentmentFragment | null;
-  selectedShippingOption: ShipmentRatingFragment | null;
-  selectedShippingOptionExpectedDate: string;
-  selectedShippingOptionTransitTime: string;
-  shipping: number;
-  shippingData: ShipmentRatingFragment[] | null;
-  step: 'customer-info' | 'shipping' | 'payment' | 'finish' | 'error';
-  subtotal: number;
-  total: number;
+    checkoutSessionId: string | null;
+    currency: CurrencyCode;
+    dutiesTaxFees: number;
+    error: {
+        messages: string[];
+        title: string;
+    } | null;
+    exchangeRate: {
+        id: string;
+        rate: number;
+        sourceCurrencyCode: CurrencyCode;
+        targetCurrencyCode: CurrencyCode;
+        type: string;
+    } | null;
+    isSelectedShippingAboveDeminimis: boolean;
+    isSelectedShippingGuarantee: boolean;
+    items: CartItem[];
+    landedCostData: CheckoutPresentmentFragment[] | null;
+    selectedLandedCost: CheckoutPresentmentFragment | null;
+    selectedShippingOption: ShipmentRatingFragment | null;
+    selectedShippingOptionExpectedDate: string;
+    selectedShippingOptionTransitTime: string;
+    shipping: number;
+    shippingData: ShipmentRatingFragment[] | null;
+    step: 'customer-info' | 'shipping' | 'payment' | 'finish' | 'error';
+    subtotal: number;
+    total: number;
 };
 declare const cartStore: CartStore;
 /**
@@ -62,28 +62,28 @@ declare const cartStore: CartStore;
  * - minTransit: 3
  */
 declare const cartStoreGetShippingTransitInfo: (item: ShipmentRatingFragment) => {
-  expectedDate: string;
-  maxTransit: string | number;
-  minTransit: string | number;
+    expectedDate: string;
+    maxTransit: string | number;
+    minTransit: string | number;
 };
 declare const cartStoreReset: () => void;
 declare const cartStoreUpdateToErrorState: ({ messages, title, }: {
-  messages: string[];
-  title: string;
+    messages: string[];
+    title: string;
 }) => void;
 type CartSubtotals = {
-  exchangeRate: {
-    id: string;
-    rate: number;
-    sourceCurrencyCode: CurrencyCode;
-    targetCurrencyCode: CurrencyCode;
-    type: string;
-  };
-  items: number;
-  landedCostTotal: number;
-  presentmentCurrencyCode: CurrencyCode;
-  shipping: number;
-  total: number;
+    exchangeRate: {
+        id: string;
+        rate: number;
+        sourceCurrencyCode: CurrencyCode;
+        targetCurrencyCode: CurrencyCode;
+        type: string;
+    };
+    items: number;
+    landedCostTotal: number;
+    presentmentCurrencyCode: CurrencyCode;
+    shipping: number;
+    total: number;
 };
 declare const cartStoreApplySubtotals: (subtotals: CartSubtotals) => void;
 type CartStoreRecalculateTotalParams = Omit<Parameters<typeof stripeStoreUpdateCheckoutSession>[0], 'id' | 'presentmentCountryCode'>;

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

@@ -1,52 +1,53 @@
-import type { PaymentIntent, Stripe, StripeAddressElement, StripeAddressElementChangeEvent, StripeElements, StripeLinkAuthenticationElement, StripeLinkAuthenticationElementChangeEvent, StripePaymentElement, StripePaymentElementChangeEvent } from '@stripe/stripe-js';
+import type { PaymentIntent, Stripe, StripeAddressElement, StripeAddressElementChangeEvent, StripeElements, StripeElementsOptions, StripeLinkAuthenticationElement, StripeLinkAuthenticationElementChangeEvent, StripePaymentElement, StripePaymentElementChangeEvent } from '@stripe/stripe-js';
 import type { CheckoutSessionUpdateMutation, CountryCode, ElementsUiStyle, ElementsUiTheme } from "../../../types/generated/graphql.customer.types";
 export type ContactOption = {
-  address: {
-    city: string;
-    country: string;
-    line1: string;
-    line2?: string;
-    postal_code: string;
-    state: string;
-  };
-  name: string;
-  phone?: string;
+    address: {
+        city: string;
+        country: string;
+        line1: string;
+        line2?: string;
+        postal_code: string;
+        state: string;
+    };
+    name: string;
+    phone?: string;
 };
 type StripeStore = {
-  clientSecret: string | null;
-  fetchingLandedCostAbordController: AbortController | null;
-  isFetchingLandedCost: boolean;
-  isFetchingSession: boolean;
-  stripe: Stripe | null;
-  stripeAddressElement: StripeAddressElement | null;
-  stripeAddressEventData: StripeAddressElementChangeEvent | null;
-  stripeAddressUsedWhenFetchingLC: StripeAddressElementChangeEvent | null;
-  stripeElements: StripeElements | null;
-  stripeLinkElement: StripeLinkAuthenticationElement | null;
-  stripeLinkEventData: StripeLinkAuthenticationElementChangeEvent | null;
-  stripeLinkUsedWhenFetchingLC: StripeLinkAuthenticationElementChangeEvent | null;
-  stripePaymentElement: StripePaymentElement | null;
-  stripePaymentEventData: StripePaymentElementChangeEvent | null;
+    clientSecret: string | null;
+    fetchingLandedCostAbordController: AbortController | null;
+    isFetchingLandedCost: boolean;
+    isFetchingSession: boolean;
+    stripe: Stripe | null;
+    stripeAddressElement: StripeAddressElement | null;
+    stripeAddressEventData: StripeAddressElementChangeEvent | null;
+    stripeAddressUsedWhenFetchingLC: StripeAddressElementChangeEvent | null;
+    stripeElements: StripeElements | null;
+    stripeElementsOptions: StripeElementsOptions | null;
+    stripeLinkElement: StripeLinkAuthenticationElement | null;
+    stripeLinkEventData: StripeLinkAuthenticationElementChangeEvent | null;
+    stripeLinkUsedWhenFetchingLC: StripeLinkAuthenticationElementChangeEvent | null;
+    stripePaymentElement: StripePaymentElement | null;
+    stripePaymentEventData: StripePaymentElementChangeEvent | null;
 };
 declare const stripeStore: StripeStore;
 declare const initStripeElements: (props?: {
-  overrideBorderRaidus?: ElementsUiStyle;
-  overridePrimaryColor?: string;
-  overrideTheme?: ElementsUiTheme;
+    overrideBorderRaidus?: ElementsUiStyle;
+    overridePrimaryColor?: string;
+    overrideTheme?: ElementsUiTheme;
 }) => Promise<void>;
 declare const stripeStoreReset: () => void;
 declare const stripeStorePrefetchLandedCost: () => Promise<void>;
 declare const stripeStoreRetrievePayment: ({ clientSecret: _clientSecret, storybookForceStatus, }: {
-  clientSecret: string | null;
-  storybookForceStatus?: PaymentIntent.Status | undefined;
+    clientSecret: string | null;
+    storybookForceStatus?: PaymentIntent.Status | undefined;
 }) => Promise<{
-  error: boolean;
-  messages: string[];
-  message?: undefined;
+    error: boolean;
+    messages: string[];
+    message?: undefined;
 } | {
-  error: boolean;
-  message: string[];
-  messages?: undefined;
+    error: boolean;
+    message: string[];
+    messages?: undefined;
 }>;
 declare const stripeStoreConfirmPayment: () => Promise<void>;
 /**
@@ -55,17 +56,17 @@ declare const stripeStoreConfirmPayment: () => Promise<void>;
  */
 declare const stripeStoreInitCheckoutSession: () => Promise<boolean>;
 type CheckoutSessionUpdateRequest = {
-  currency?: string;
-  id: string;
-  itemsAmount?: number;
-  landedCostId?: string;
-  presentmentCountryCode: CountryCode | null;
+    currency?: string;
+    id: string;
+    itemsAmount?: number;
+    landedCostId?: string;
+    presentmentCountryCode: CountryCode | null;
 };
 /**
  * Update checkout session. Use for updating amount with landed cost id, or update session when cart items change
  */
 declare const stripeStoreUpdateCheckoutSession: ({ currency, id, itemsAmount, landedCostId, presentmentCountryCode, }: CheckoutSessionUpdateRequest) => Promise<{
-  errors: import("../../..").JsonError[];
-  json: CheckoutSessionUpdateMutation | null;
+    errors: import("../../..").JsonError[];
+    json: CheckoutSessionUpdateMutation | null;
 }>;
 export { initStripeElements, stripeStore, stripeStoreConfirmPayment, stripeStoreInitCheckoutSession, stripeStorePrefetchLandedCost, stripeStoreReset, stripeStoreRetrievePayment, stripeStoreUpdateCheckoutSession, };

package/dist/types/components/store/hello/localization.d.ts

@@ -6,25 +6,25 @@ import type { CurrencyCode } from "../../../types/generated/graphql.customer.typ
 import type { Locale_ElementsSupportedLocationCode_Enum, Locale_PageName_Enum } from "../../../types/generated/graphql.frontend.types";
 import type { ICountryJson } from "../../../types/ICountryJson";
 export type ExchangeRateForUse = {
-  rate: number;
-  targetFormat: TargetFormat;
+    rate: number;
+    targetFormat: TargetFormat;
 };
 type LocalizationStore = {
-  countryLandedCost: CountryLandedCost | null;
-  customMessages: ILocaleMessageForUse[];
-  exchangeRate: ExchangeRateForUse | null;
-  exchangeRateTimeout?: NodeJS.Timeout;
-  isShippableCountry: boolean;
-  localizationLoaded: boolean;
-  selectedCountryCode: CountryCode | null;
-  selectedLocale: Locale_ElementsSupportedLocationCode_Enum;
-  shippingZoneCountries: ICountryJson | null;
-  targetCurrency: CurrencyCode;
+    countryLandedCost: CountryLandedCost | null;
+    customMessages: ILocaleMessageForUse[];
+    exchangeRate: ExchangeRateForUse | null;
+    exchangeRateTimeout?: NodeJS.Timeout;
+    isShippableCountry: boolean;
+    localizationLoaded: boolean;
+    selectedCountryCode: CountryCode | null;
+    selectedLocale: Locale_ElementsSupportedLocationCode_Enum;
+    shippingZoneCountries: ICountryJson | null;
+    targetCurrency: CurrencyCode;
 };
 type ILocaleMessageForUse = {
-  countryCode: string | null;
-  message?: string;
-  pageName: Locale_PageName_Enum;
+    countryCode: string | null;
+    message?: string;
+    pageName: Locale_PageName_Enum;
 };
 declare const localizationStore: LocalizationStore;
 declare const localizationStoreUpdateSelectedCountryCode: (newSelectedCountryCode: CountryCode | null) => Promise<void>;