@zonos/elements 1.2.3 → 1.2.4-alpha.10

package/dist/types/environment.d.ts

@@ -5,50 +5,55 @@ export declare const inTestEnvironment: boolean;
 export declare const inStorybook: boolean;
 export declare const inVercel: boolean;
 export declare const inCI: boolean;
+declare const isVercelPreview: boolean;
 export declare const isVercelProd: boolean;
-declare let packageVersion: string;
-export declare const formattedUrl: ({ packageVersion: _packageVersion, type, url, }: {
-  packageVersion: string;
-  type: 'major' | 'full' | 'vercel-git';
-  url?: string | undefined;
+declare const packageVersion: string;
+export declare const formattedUrl: ({ branchName, inCI: _inCI, inVercel: _inVercel, isVercelPreview: _isVercelPreview, packageVersion: _packageVersion, type, url, }: {
+    branchName?: string | undefined;
+    inCI: boolean;
+    inVercel: boolean;
+    isVercelPreview: boolean;
+    packageVersion: string;
+    type: 'major' | 'full' | 'vercel-git';
+    url?: string | undefined;
 }) => string | undefined;
 declare const envClientSchema: z.ZodObject<{
-  NEXT_PUBLIC_FLAG_URL: z.ZodString;
-  NEXT_PUBLIC_ZONOS_API_KEY: z.ZodString;
-  NEXT_PUBLIC_ZONOS_CDN_URL: z.ZodString;
-  NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: z.ZodString;
-  NEXT_PUBLIC_ZONOS_ROUTE_URL: z.ZodString;
-  NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: z.ZodString;
+    NEXT_PUBLIC_FLAG_URL: z.ZodString;
+    NEXT_PUBLIC_ZONOS_API_KEY: z.ZodString;
+    NEXT_PUBLIC_ZONOS_CDN_URL: z.ZodString;
+    NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: z.ZodString;
+    NEXT_PUBLIC_ZONOS_ROUTE_URL: z.ZodString;
+    NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: z.ZodString;
 }, "strip", z.ZodTypeAny, {
-  NEXT_PUBLIC_FLAG_URL: string;
-  NEXT_PUBLIC_ZONOS_API_KEY: string;
-  NEXT_PUBLIC_ZONOS_CDN_URL: string;
-  NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: string;
-  NEXT_PUBLIC_ZONOS_ROUTE_URL: string;
-  NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: string;
+    NEXT_PUBLIC_FLAG_URL: string;
+    NEXT_PUBLIC_ZONOS_API_KEY: string;
+    NEXT_PUBLIC_ZONOS_CDN_URL: string;
+    NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: string;
+    NEXT_PUBLIC_ZONOS_ROUTE_URL: string;
+    NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: string;
 }, {
-  NEXT_PUBLIC_FLAG_URL: string;
-  NEXT_PUBLIC_ZONOS_API_KEY: string;
-  NEXT_PUBLIC_ZONOS_CDN_URL: string;
-  NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: string;
-  NEXT_PUBLIC_ZONOS_ROUTE_URL: string;
-  NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: string;
+    NEXT_PUBLIC_FLAG_URL: string;
+    NEXT_PUBLIC_ZONOS_API_KEY: string;
+    NEXT_PUBLIC_ZONOS_CDN_URL: string;
+    NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: string;
+    NEXT_PUBLIC_ZONOS_ROUTE_URL: string;
+    NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: string;
 }>;
 export interface Env extends z.infer<typeof envClientSchema> {
 }
-export declare const env: {
-  NEXT_PUBLIC_FLAG_URL: string;
-  NEXT_PUBLIC_ZONOS_API_KEY: string;
-  NEXT_PUBLIC_ZONOS_CDN_URL: string;
-  NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: string;
-  NEXT_PUBLIC_ZONOS_ROUTE_URL: string;
-  NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: string;
-};
+export declare const env: Readonly<{
+    NEXT_PUBLIC_FLAG_URL: string;
+    NEXT_PUBLIC_ZONOS_API_KEY: string;
+    NEXT_PUBLIC_ZONOS_CDN_URL: string;
+    NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: string;
+    NEXT_PUBLIC_ZONOS_ROUTE_URL: string;
+    NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: string;
+}>;
 type Keys = keyof typeof env;
 type Props = {
-  override?: {
-    [key in Keys]: string;
-  };
+    override?: {
+        [key in Keys]: string;
+    };
 };
 /**
  * Env object that has all of native env variable used in code to replace them with

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

@@ -0,0 +1,11 @@
+/**
+ * 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
+ */
+export declare const extractZonosQaUrl: (url: string | undefined) => string | null;

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

@@ -1,7 +1,7 @@
 /** Loading stripe script extracted from stripe.js repository  */
 import type { Stripe, StripeConstructor } from '@stripe/stripe-js';
 export interface LoadParams {
-  advancedFraudSignals: boolean;
+    advancedFraudSignals: boolean;
 }
 export type LoadStripe = (...args: Parameters<StripeConstructor>) => Promise<Stripe | null>;
 export declare const zonosStripeFindScript: () => HTMLScriptElement | null;
@@ -9,5 +9,5 @@ export declare const injectScript: (params: null | LoadParams) => HTMLScriptElem
 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;
+    advancedFraudSignals: boolean;
 }) => LoadParams | void;

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

@@ -4,50 +4,61 @@ import type { CheckoutConfig, HelloConfig, NotificationInit } from "../types/ind
 import type { OnlineStoreConfig } from "../types/online-store/OnlineStoreConfig";
 export type CurrencyConverter = (convertAndFormat: (amount: number) => string, convert: (amount: number) => number, format: (amount: number) => string, selector?: string) => void;
 export type LoadZonosParamsConfig = {
-  appearance?: Partial<AppearanceConfig>;
-  checkoutSettings?: Partial<CheckoutConfig>;
-  currencyConverter?: CurrencyConverter;
-  helloSettings?: Partial<HelloConfig>;
-  onlineStoreSettings?: Partial<OnlineStoreConfig>;
+    appearance?: Partial<AppearanceConfig>;
+    checkoutSettings?: Partial<CheckoutConfig>;
+    currencyConverter?: CurrencyConverter;
+    helloSettings?: Partial<HelloConfig>;
+    onlineStoreSettings?: Partial<OnlineStoreConfig>;
 };
 export type LoadZonosParams = LoadZonosParamsConfig & {
-  zonosApiKey: string;
+    zonosApiKey: string;
 };
 export interface Zonos {
-  /**
-   * Toggle debug mode (add query param 'zonosDebug=1' to url)
-   * @default false
-   */
-  debug?: boolean;
-  doneInit: boolean;
-  internationalHideSelector: string;
-  isBigCommerce: boolean;
-  /** Stripe instance */
-  stripe: Stripe;
-  version: string;
-  zonosApiKey: string;
-  displayCurrency: () => void;
-  getCurrentTimestamp: () => number;
-  init: (params: LoadZonosParams) => Promise<void>;
-  showNotification: (props: NotificationInit) => void;
+    /**
+     * Toggle debug mode (add query param 'zonosDebug=1' to url)
+     * @default false
+     */
+    debug?: boolean;
+    doneInit: boolean;
+    internationalHideSelector: string;
+    isBigCommerce: boolean;
+    /** Flag if already alerted when preview domain is defined and it's connecting production environment */
+    modeAlerted: boolean;
+    /** Stripe instance */
+    stripe: Stripe;
+    version: string;
+    zonosApiKey: string;
+    zonosQaUrl: string | null;
+    displayCurrency: () => void;
+    getCurrentTimestamp: () => number;
+    init: (params: LoadZonosParams) => Promise<void>;
+    injectSupportGoogleFont: (fontUrl: string) => void;
+    setupGoogleFont: (fontFamily: string) => void;
+    showNotification: (props: NotificationInit) => void;
 }
 export declare abstract class Zonos {
-  static zonosApiKey: string;
-  static stripe: Stripe;
-  static doneInit: boolean;
-  static debug: boolean;
-  static isBigCommerce: boolean;
-  static internationalHideSelector: string;
-  static version: string;
-  static getCurrentTimestamp: () => number;
-  static init: ({ appearance, checkoutSettings, currencyConverter, helloSettings, zonosApiKey, }: LoadZonosParams) => Promise<void>;
-  static displayCurrency: () => void;
-  static showNotification: (notification: NotificationInit) => void;
-  private static disablePlaceOrderButtons;
-  private static injectController;
-  private static injectScript;
-  private static injectZonosCdn;
-  private static injectStylesheet;
-  private static injectZonosCss;
-  private static injectFonts;
+    static zonosApiKey: string;
+    static stripe: Stripe;
+    static doneInit: boolean;
+    static debug: boolean;
+    static isBigCommerce: boolean;
+    static internationalHideSelector: string;
+    static zonosQaUrl: string | null;
+    static version: string;
+    static modeAlerted: boolean;
+    static getCurrentTimestamp: () => number;
+    private static zonosController;
+    static init: ({ appearance, checkoutSettings, currencyConverter, helloSettings, zonosApiKey, }: LoadZonosParams) => Promise<void>;
+    static displayCurrency: () => void;
+    static showNotification: (notification: NotificationInit) => void;
+    private static disablePlaceOrderButtons;
+    private static injectController;
+    private static injectSentryScript;
+    private static injectScript;
+    private static injectZonosCdn;
+    private static injectStylesheet;
+    private static injectZonosCss;
+    private static injectFonts;
+    static setupGoogleFont: (fontFamily: string) => void;
+    static injectSupportGoogleFont: (fontUrl: string) => void;
 }

package/dist/types/stencil-public-runtime.d.ts

@@ -3,6 +3,16 @@ export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
 export interface ComponentOptions {
+    /**
+     * When set to `true` this component will be form-associated. See
+     * https://stenciljs.com/docs/next/form-associated documentation on how to
+     * build form-associated Stencil components that integrate into forms like
+     * native browser elements such as `<input>` and `<textarea>`.
+     *
+     * The {@link AttachInternals} decorator allows for access to the
+     * `ElementInternals` object to modify the associated form.
+     */
+    formAssociated?: boolean;
     /**
      * Tag name of the web component. Ideally, the tag name must be globally unique,
      * so it's recommended to choose an unique prefix for all your components within the same collection.
@@ -107,6 +117,9 @@ export interface EventOptions {
      */
     composed?: boolean;
 }
+export interface AttachInternalsDecorator {
+    (): PropertyDecorator;
+}
 export interface ListenDecorator {
     (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
 }
@@ -175,6 +188,12 @@ export declare const Element: ElementDecorator;
  * https://stenciljs.com/docs/events
  */
 export declare const Event: EventDecorator;
+/**
+ * If the `formAssociated` option is set in options passed to the
+ * `@Component()` decorator then this decorator may be used to get access to the
+ * `ElementInternals` instance associated with the component.
+ */
+export declare const AttachInternals: AttachInternalsDecorator;
 /**
  * The `Listen()` decorator is for listening DOM events, including the ones
  * dispatched from `@Events()`.
@@ -791,6 +810,9 @@ export declare namespace JSXBase {
         name?: string;
         type?: string;
         value?: string | string[] | number;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
     interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
         height?: number | string;
@@ -952,6 +974,9 @@ export declare namespace JSXBase {
         webkitdirectory?: boolean;
         webkitEntries?: any;
         width?: number | string;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
         autoFocus?: boolean;
@@ -1115,11 +1140,13 @@ export declare namespace JSXBase {
         autocomplete?: string;
     }
     interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
+        height?: number;
         media?: string;
         sizes?: string;
         src?: string;
         srcSet?: string;
         type?: string;
+        width?: number;
     }
     interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
         media?: string;
@@ -1202,6 +1229,7 @@ export declare namespace JSXBase {
         draggable?: boolean;
         hidden?: boolean;
         id?: string;
+        inert?: boolean;
         lang?: string;
         spellcheck?: 'true' | 'false' | any;
         style?: {
@@ -1210,6 +1238,7 @@ export declare namespace JSXBase {
         tabIndex?: number;
         tabindex?: number | string;
         title?: string;
+        popover?: string | null;
         inputMode?: string;
         inputmode?: string;
         enterKeyHint?: string;

package/dist/types/styles/stripe/addressRuleStyle.d.ts

@@ -1,4 +1,4 @@
 import type { ElementsUiTheme, StripeRuleType } from "../../types/index";
 export declare const addressRuleStyle: ({ theme, }: {
-  theme: ElementsUiTheme;
+    theme: ElementsUiTheme;
 }) => StripeRuleType;

package/dist/types/styles/stripe/defaultVariable.d.ts

@@ -1,6 +1,6 @@
 import type { Appearance } from '@stripe/stripe-js';
 import type { ElementsUiStyle, ElementsUiTheme } from "../../types/generated/graphql.customer.types";
 export declare const defaultVariable: ({ borderStyle, theme, }: {
-  borderStyle?: ElementsUiStyle | undefined;
-  theme: ElementsUiTheme;
+    borderStyle?: ElementsUiStyle | undefined;
+    theme: ElementsUiTheme;
 }) => Appearance['variables'];

package/dist/types/types/ICountryJson.d.ts

@@ -1,29 +1,29 @@
 import type { CountryCode } from "./generated/graphql.customer.types";
 declare const regions: readonly [
-  'Africa',
-  'Americas',
-  'Asia',
-  'Central America',
-  'Europe',
-  'North America',
-  'Oceania',
-  'South America'
+    'Africa',
+    'Americas',
+    'Asia',
+    'Central America',
+    'Europe',
+    'North America',
+    'Oceania',
+    'South America'
 ];
 type IRegion = (typeof regions)[number];
 export type ICountry = {
-  active: boolean;
-  code: CountryCode;
-  code3: string;
-  currencyCode: string;
-  displayName: string;
-  fraudRisk: number;
-  languageCode: string;
-  numericCode: string;
-  region: IRegion;
-  upsCode: string | null;
-  zipRegex: string | null;
+    active: boolean;
+    code: CountryCode;
+    code3: string;
+    currencyCode: string;
+    displayName: string;
+    fraudRisk: number;
+    languageCode: string;
+    numericCode: string;
+    region: IRegion;
+    upsCode: string | null;
+    zipRegex: string | null;
 };
 export type ICountryJson = {
-  [countryCode: string]: ICountry;
+    [countryCode: string]: ICountry;
 };
 export {};

package/dist/types/types/JsonError.d.ts

@@ -1,5 +1,5 @@
 export type JsonError = {
-  errorId?: number;
-  message: string;
-  type: string;
+    errorId?: number;
+    message: string;
+    type: string;
 };

package/dist/types/types/Translation.d.ts

@@ -1,3 +1,3 @@
 export type TranslationData = Readonly<Record<string, {
-  value: string;
+    value: string;
 }>>;

package/dist/types/types/checkout/CheckoutConfig.d.ts

@@ -1,57 +1,59 @@
 import type { CartItem } from "../../components/store/checkout/cart";
-import type { AnalyticsProviderStatus, AnalyticsProviderType, CheckoutSubscriptionStatus, CheckoutSuccessBehavior, CheckoutVisibilityStatus, NotificationActiveStatus } from "../generated/graphql.customer.types";
+import type { CalculateLandedCostRequest } from "./api/CalculateLandedCostRequest";
+import type { AnalyticsProviderStatus, AnalyticsProviderType, CalculateLandedCostMutation, CheckoutSubscriptionStatus, CheckoutSuccessBehavior, CheckoutVisibilityStatus, NotificationActiveStatus } from "../generated/graphql.customer.types";
 export type CheckoutConfig = {
-  allowedDomains: Array<string>;
-  analyticsProviders: Array<{
-    status: AnalyticsProviderStatus;
-    type: AnalyticsProviderType;
-  }>;
-  orderNotifications: {
-    abandonedCart: {
-      delay: number;
-      discountPercent: number;
-      status: {
-        active: NotificationActiveStatus;
-        sendCopiesTo: Array<string>;
-      };
+    allowedDomains: Array<string>;
+    analyticsProviders: Array<{
+        status: AnalyticsProviderStatus;
+        type: AnalyticsProviderType;
+    }>;
+    orderNotifications: {
+        abandonedCart: {
+            delay: number;
+            discountPercent: number;
+            status: {
+                active: NotificationActiveStatus;
+                sendCopiesTo: Array<string>;
+            };
+        };
+        orderCancelled: {
+            active: NotificationActiveStatus;
+            sendCopiesTo: Array<string>;
+        };
+        orderConfirmation: {
+            active: NotificationActiveStatus;
+            sendCopiesTo: Array<string>;
+        };
+        orderShipped: {
+            active: NotificationActiveStatus;
+            sendCopiesTo: Array<string>;
+        };
     };
-    orderCancelled: {
-      active: NotificationActiveStatus;
-      sendCopiesTo: Array<string>;
-    };
-    orderConfirmation: {
-      active: NotificationActiveStatus;
-      sendCopiesTo: Array<string>;
-    };
-    orderShipped: {
-      active: NotificationActiveStatus;
-      sendCopiesTo: Array<string>;
-    };
-  };
-  organization: string;
-  placeOrderButtonSelector: string | null;
-  subscriptionStatus: CheckoutSubscriptionStatus;
-  successBehavior: CheckoutSuccessBehavior;
-  successRedirectUrl: string;
-  visibilityStatus: CheckoutVisibilityStatus;
-  /**
-   * cart info callback for checkout (optional)
-   * User can dispatch an event 'zonos--init-cart-info' to update the cart
-   * @example
-   * const initEvent = new CustomEvent<CartItem[]>('zonos--init-cart-info', {
-   *    detail: cartItems,
-   * });
-   * document.body.dispatchEvent(initEvent);
-   * @returns {object[]} - object with the the item info to be added to cart:
-   * - amount: number;
-   * - countryOfOrigin?: string;
-   * - currencyCode: string;
-   * - description?: string;
-   * - hsCode?: string;
-   * - imageUrl?: string;
-   * - name: string;
-   * - productId?: string;
-   * - quantity: number;
-   */
-  buildCartDetail?: () => Promise<CartItem[]>;
+    organization: string;
+    placeOrderButtonSelector: string | null;
+    subscriptionStatus: CheckoutSubscriptionStatus;
+    successBehavior: CheckoutSuccessBehavior;
+    successRedirectUrl: string;
+    visibilityStatus: CheckoutVisibilityStatus;
+    /**
+     * cart info callback for checkout (optional)
+     * User can dispatch an event 'zonos--init-cart-info' to update the cart
+     * @example
+     * const initEvent = new CustomEvent<CartItem[]>('zonos--init-cart-info', {
+     *    detail: cartItems,
+     * });
+     * document.body.dispatchEvent(initEvent);
+     * @returns {object[]} - object with the the item info to be added to cart:
+     * - amount: number;
+     * - countryOfOrigin?: string;
+     * - currencyCode: string;
+     * - description?: string;
+     * - hsCode?: string;
+     * - imageUrl?: string;
+     * - name: string;
+     * - productId?: string;
+     * - quantity: number;
+     */
+    buildCartDetail?: () => Promise<CartItem[]>;
+    buildLandedCost?: (checkoutSessionId: string, contact: CalculateLandedCostRequest['contact'], shippingAddress: CalculateLandedCostRequest['shippingAddress']) => Promise<CalculateLandedCostMutation>;
 };

package/dist/types/types/checkout/api/CalculateLandedCostRequest.d.ts

@@ -1,19 +1,19 @@
 import type { CartItem } from "../../../components/store/checkout/cart";
 export type CalculateLandedCostRequest = {
-  checkoutSessionId: string;
-  contact: {
-    email?: string;
-    firstName: string;
-    lastName: string;
-    phone: string;
-  };
-  items: CartItem[];
-  shippingAddress: {
-    addressLine1: string;
-    addressLine2?: string | undefined;
-    city: string;
-    country: string;
-    postalCode: string;
-    state: string;
-  };
+    checkoutSessionId: string;
+    contact: {
+        email?: string;
+        firstName: string;
+        lastName: string;
+        phone: string;
+    };
+    items: CartItem[];
+    shippingAddress: {
+        addressLine1: string;
+        addressLine2?: string | undefined;
+        city: string;
+        country: string;
+        postalCode: string;
+        state: string;
+    };
 };