@zonos/elements 1.3.81 → 1.3.83

package/dist/scripts/index.d.ts

@@ -4,6 +4,11 @@ import { BrowserOptions } from '@sentry/browser';
 import { z } from 'zod';
 import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 
+declare const adjustmentSource: {
+    readonly ApiRequest: "API_REQUEST";
+    readonly PromoCode: "PROMO_CODE";
+};
+type AdjustmentSource = (typeof adjustmentSource)[keyof typeof adjustmentSource];
 declare const analyticsProviderStatus: {
     readonly Disabled: "DISABLED";
     readonly Enabled: "ENABLED";
@@ -715,6 +720,10 @@ type CalculateLandedCostMutation = {
             discounts: number | null;
         } | null;
         appliedAdjustments: Array<{
+            adjustment: {
+                name: string | null;
+                source: AdjustmentSource | null;
+            } | null;
             amount: number;
             item: {
                 amount: number;
@@ -941,130 +950,445 @@ type GetOrderQuery = {
     } | null;
 };
 
-type CustomEventMap = {
-    legacyCheckoutError: string;
-    'zonos-checkout-success': {
-        message: string;
-    };
+type TabItem = {
+    index: number;
+    isDone: boolean;
+    label: 'Customer' | 'Delivery' | 'Payment';
+    value: 'customer-info' | 'shipping' | 'payment';
 };
-
-declare const envClientSchema: z.ZodObject<{
-    NEXT_PUBLIC_FLAG_URL: z.ZodString;
-    NEXT_PUBLIC_RELEASE_DATE: z.ZodString;
-    NEXT_PUBLIC_ZONOS_API_KEY: z.ZodString;
-    NEXT_PUBLIC_ZONOS_CDNJS_CDN_URL: z.ZodString;
-    NEXT_PUBLIC_ZONOS_CDN_URL: z.ZodString;
-    NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL: z.ZodString;
-    NEXT_PUBLIC_ZONOS_JS_DELIVR_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_RELEASE_DATE: string;
-    NEXT_PUBLIC_ZONOS_API_KEY: string;
-    NEXT_PUBLIC_ZONOS_CDNJS_CDN_URL: string;
-    NEXT_PUBLIC_ZONOS_CDN_URL: string;
-    NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL: string;
-    NEXT_PUBLIC_ZONOS_JS_DELIVR_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_RELEASE_DATE: string;
-    NEXT_PUBLIC_ZONOS_API_KEY: string;
-    NEXT_PUBLIC_ZONOS_CDNJS_CDN_URL: string;
-    NEXT_PUBLIC_ZONOS_CDN_URL: string;
-    NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL: string;
-    NEXT_PUBLIC_ZONOS_JS_DELIVR_CDN_URL: string;
-    NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: string;
-    NEXT_PUBLIC_ZONOS_ROUTE_URL: string;
-    NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: string;
-}>;
-interface Env extends z.infer<typeof envClientSchema> {
-}
-
-/* eslint-disable no-relative-import-paths/no-relative-import-paths */
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-  interface Document {
-    addEventListener<K extends keyof CustomEventMap>(
-      type: K,
-      listener: (this: Document, ev: CustomEvent<CustomEventMap[K]>) => void,
-    ): void;
-  }
-
-  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-  interface Window {
-    Sentry?: {
-      init: (config: BrowserOptions) => void;
-    };
-    Stripe?: StripeConstructor;
-    Zonos: Zonos;
-    /**
-     * A flag to determine if the current page is a BigCommerce page
-     */
-    bcConfig?: unknown;
-    /**
-     * A flag to determine if the current page is a BigCommerce page
-     */
-    stencilBootstrap?: unknown;
-    sentryOnLoad?: () => void;
-  }
-
-  namespace NodeJS {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-    interface ProcessEnv extends Env {}
-  }
-}
-
-type TranslatedText = {
-    [key: string]: string;
+type TabItems = Record<TabItem['value'], TabItem>;
+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;
 };
-type EnteredInfo = {
-    city: string;
-    country: CountryCode;
-    email: string;
-    line1: string;
-    line2: string;
+type CartItem = {
+    amount: number;
+    attributes?: {
+        key: string;
+        value: string;
+    }[];
+    countryOfOrigin?: CountryCode;
+    currencyCode: CurrencyCode;
+    description?: string;
+    hsCode?: string;
+    imageUrl?: string;
+    itemType?: ItemType;
+    measurements?: ItemMeasurement[];
+    metadata?: {
+        key: string;
+        value: string;
+    }[];
     name: string;
-    phone: string;
-    postal_code: string;
-    state: string;
+    productId?: string;
+    quantity: number;
+    sku?: string;
 };
-type ValidateAddressFields = Omit<StripeAddressElementChangeEvent['value']['address'], 'country'> & {
-    name: string;
+
+type CalculateLandedCostAdjustmentInput = {
+    amount: number;
+    productId: string | null;
+    promoCode?: string | null;
+    sku: string | null;
+    type: LandedCostAdjustmentType;
 };
-type TranslatedAddressObject = {
-    [key in keyof ValidateAddressFields]?: TranslatedText;
+type CalculateLandedCostRequest = {
+    billingAddress: {
+        addressLine1: string;
+        addressLine2?: string | undefined;
+        city: string;
+        country: CountryCode;
+        postalCode: string;
+        state: string;
+    };
+    billingContact: {
+        firstName: string;
+        lastName: string;
+        phone: string;
+    };
+    checkoutSessionId: string;
+    contact: {
+        email?: string;
+        firstName: string;
+        lastName: string;
+        phone: string;
+    };
+    items: CartItem[];
+    landedCostAdjustments?: CalculateLandedCostAdjustmentInput[];
+    metadata?: {
+        key: string;
+        value: string;
+    }[];
+    shippingAddress: {
+        addressLine1: string;
+        addressLine2?: string | undefined;
+        city: string;
+        country: CountryCode;
+        postalCode: string;
+        state: string;
+    };
 };
 
-type SubmitEventData = {
-    billingAddress: Record<keyof TranslatedAddressObject, string> | null;
-    shippingAddress: Record<keyof TranslatedAddressObject, string>;
+type BuildLandedCostParams = {
+    billingAddress: CalculateLandedCostRequest['billingAddress'];
+    billingContact: CalculateLandedCostRequest['billingContact'];
+    checkoutSessionId: string;
+    contact: CalculateLandedCostRequest['contact'];
+    landedCostAdjustments?: CalculateLandedCostRequest['landedCostAdjustments'];
+    shippingAddress: CalculateLandedCostRequest['shippingAddress'];
+    zonosApiRoute: string;
 };
+type BuildLandedCostResponse = (CalculateLandedCostMutation & {
+    errors?: {
+        message: string;
+    }[];
+}) | null;
 
-declare const colorPrefixes: readonly ["blue", "cyan", "green", "orange", "purple", "red", "gray", "glass"];
-declare const colorContrasts: readonly ["100", "200", "300", "400", "500", "600", "700", "800", "900", "1000"];
-type ColorContrast = (typeof colorContrasts)[number];
-type ColorPrefix = (typeof colorPrefixes)[number];
-type Color = 'gray-0' | 'gray-50' | 'glass-0' | 'glass-50' | `${ColorPrefix}-${ColorContrast}` | 'gray-1100' | 'gray-1200' | 'glass-1100' | 'glass-1200';
-declare const checkboxColorPrefix: readonly ["blue", "cyan", "green", "orange", "purple", "red", "gray"];
-type CheckboxColorPrefix = (typeof checkboxColorPrefix)[number];
-
-type BannerIntent = 'default' | 'error' | 'success' | 'warning' | 'info';
+type ZonosOrder = GetOrderQuery['order'];
 
-declare const textOptions: {
-    readonly pageHeader: {
-        readonly label: "Page Header (3XL) · 34px (2.125rem)";
-        readonly size: "3xl";
-        readonly tag: "h2";
-        readonly weight: 900;
+type BuildCardDetailParams = {
+    countryCode: CountryCode;
+    currencyCode: CurrencyCode;
+};
+type CheckoutConfig = {
+    /**
+     * Validate address to allow specific character sets
+     * @default ALL
+     */
+    allowedCharacterSets?: 'ALL' | 'LATIN';
+    analyticsProviders: Array<{
+        status: AnalyticsProviderStatus;
+        type: AnalyticsProviderType;
+    }>;
+    /**
+     * @default false - when false, we disable the place order button until the script is loaded
+     * @note if set to true, we will not enable or disable the place order button
+     */
+    disablePlaceOrderButtonActivation?: boolean;
+    externalPaymentMethods: Array<{
+        status: ExternalPaymentMethodStatus;
+        type: ExternalPaymentMethodType;
+    }> | null;
+    externalServiceTokens: {
+        token: string;
+        type: ExternalServiceTokenType;
+    }[];
+    /**
+     * Test mode for checkout (sandbox or production)
+     * @default TEST
+     */
+    mode: Mode;
+    orderNotifications: {
+        abandonedCart: {
+            delay: number;
+            discountPercent: number;
+            status: {
+                active: NotificationActiveStatus;
+                sendCopiesTo: Array<string>;
+            };
+        };
+        orderCancelled: {
+            active: NotificationActiveStatus;
+            sendCopiesTo: Array<string>;
+        };
+        orderConfirmation: {
+            active: NotificationActiveStatus;
+            sendCopiesTo: Array<string>;
+        } | null;
+        orderShipped: {
+            active: NotificationActiveStatus;
+            sendCopiesTo: Array<string>;
+        };
     };
-    readonly secondaryPageHeader: {
-        readonly label: "Secondary Page Header (3XL) • 34px, 500 \"Medium\"";
+    organization: string;
+    placeOrderButtonSelector: string | null;
+    /**
+     * @param subscriptionStatus subscription status for checkout, checkout only available if subscription status is ENABLED and visibility status is ENABLED
+     *
+     * **NOTE: this value can't be overridden in Zonos.init**
+     */
+    subscriptionStatus: CheckoutSubscriptionStatus;
+    successBehavior: CheckoutSuccessBehavior;
+    /**
+     * The success page action text for checkout.
+     * @note Default text supports translation automatically, but any custom text will not be translated.
+     */
+    successPageActionText?: string;
+    /**
+     * The success page subtitle text for checkout. Each item in the array will appear on a new line.
+     * @note Default text supports translation automatically, but any custom text will not be translated.
+     */
+    successPageSubtitleText?: string[];
+    /**
+     * The success page title text for checkout.
+     * @note Default text supports translation automatically, but any custom text will not be translated.
+     */
+    successPageTitleText?: string;
+    successRedirectUrl: string;
+    visibilityStatus: CheckoutVisibilityStatus;
+    /**
+     * Cart info callback for checkout (optional),
+     * @deprecated
+     * @note
+     * This function is deprecated in favor of new API `createCartId`
+     * @note will attempt to use cart data if available
+     * 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?: (params: BuildCardDetailParams) => Promise<CartItem[]>;
+    /**
+     * Calculate landed cost callback for checkout (optional)
+     * @deprecated
+     * @note
+     * This function is deprecated in favor of new API `createCartId`
+     * @note will attempt to use cart data if available
+     */
+    buildLandedCost?: (params: BuildLandedCostParams) => Promise<BuildLandedCostResponse>;
+    /**
+     * Callback that returns the cart id from `cartCreate` mutation.
+     * @note
+     * The mutation `cartCreate` is preferred to be called in the server side
+     * @returns string - Cart ID
+     */
+    createCartId?: () => Promise<string> | string;
+    /**
+     * Callback trigger when the checkout is closed
+     */
+    onClose?: () => void;
+    /**
+     * This callback is optional. If provided, it will be called right before the payment is processed.
+     * @param items - The cart items.
+     * @returns {string | null} - The error message to display to the user. If the message is empty or null, the payment will proceed.
+     * @example
+     * onInventoryCheck: async ({ items }) => {
+     *   // Check if all items are available from the server. If the fetch is throwing an error, we will show a generic error message "Unable to check inventory. Please try again.".
+     *   const itemsInfo = await fetch('https://yourserver.com/api/get-available-items', {
+     *     method: 'POST',
+     *     body: JSON.stringify({ items }),
+     *   });
+     *   const items = await itemsInfo.json();
+     *   // Filter out unavailable items.
+     *   const unavailableItems = items.filter(item => !item.available);
+     *   if (unavailableItems.length) {
+     *     // Display an error message to the user.
+     *     return `The following items are not available: ${unavailableItems.map(item => item.name).join(', ')}`;
+     *   }
+     *   // Proceed with the payment if you return an empty string or null.
+     *   return '';
+     * }
+     */
+    onInventoryCheck?: (params: {
+        items: CartItem[];
+    }) => Promise<string | null>;
+    /**
+     * Callback trigger when payment succeeds
+     */
+    onOrderSuccess?: (props: {
+        zonosApiRoute: string;
+        zonosOrder: ZonosOrder;
+    }) => Promise<void>;
+};
+
+type CountryOverrideBehavior = 'URL_PARAM' | 'SESSION';
+type ShowForCountries = 'ALL' | 'ONLY_SHIPPABLE' | CountryCode[];
+type ShowCountryList = 'ALL' | 'ONLY_SHIPPABLE' | CountryCode[];
+type HelloConfig = {
+    anchorElementSelector: string;
+    cartUrlPattern: string | null;
+    /**
+     * The behavior to use when determining the country to use for the user.
+     * @default 'URL_PARAM'
+     */
+    countryOverrideBehavior?: CountryOverrideBehavior;
+    currencyBehavior: HelloCurrencyBehavior;
+    currencyElementSelector: string;
+    desktopLocation?: HelloMobileLocation | null;
+    excludedUrlPatterns: Array<string>;
+    homepageUrlPattern: string | null;
+    mobileLocation: HelloMobileLocation | null;
+    mode: Mode;
+    organization: string;
+    peekMessageBehavior: HelloPeekMessageBehavior;
+    peekMessageDelay: number;
+    productAddToCartElementSelector: string | null;
+    productDescriptionElementSelector: string | null;
+    productDetailUrlPattern: string | null;
+    productListUrlPattern: string | null;
+    productTitleElementSelector: string | null;
+    restrictionBehavior: HelloRestrictionBehavior;
+    /**
+     * The countries to include in the country list dropdown of the Hello widget.
+     * @default ONLY_SHIPPABLE
+     */
+    showCountryList?: ShowCountryList;
+    /**
+     * The countries to show the widget for.
+     * @default ONLY_SHIPPABLE
+     */
+    showForCountries?: ShowForCountries;
+    visibilityStatus?: 'ENABLED' | 'DISABLED';
+    /**
+     * Callback function to run after the Hello widget has been initialized. This should be triggered only once when hello is attached to the DOM.
+     * **Note**: If hello is detached from the DOM and reattached, this callback will be called again.
+     * @param params - The parameters containing the country code and currency code that hello is initialized with.
+     */
+    onInitSuccess?: (params: {
+        countryCode: CountryCode;
+        currencyCode: CurrencyCode;
+    }) => Promise<void>;
+};
+
+type AppearanceConfig = {
+    colorPrimary?: string;
+    colorSecondary?: string;
+    fontFamily: string;
+    logoUrl: string;
+    style: ElementsUiStyle;
+    theme: ElementsUiTheme;
+    zonosAttribution: ZonosAttribution | null;
+};
+
+type CustomEventMap = {
+    legacyCheckoutError: string;
+    'zonos-checkout-success': {
+        message: string;
+    };
+};
+
+declare const envClientSchema: z.ZodObject<{
+    NEXT_PUBLIC_FLAG_URL: z.ZodString;
+    NEXT_PUBLIC_RELEASE_DATE: z.ZodString;
+    NEXT_PUBLIC_ZONOS_API_KEY: z.ZodString;
+    NEXT_PUBLIC_ZONOS_CDNJS_CDN_URL: z.ZodString;
+    NEXT_PUBLIC_ZONOS_CDN_URL: z.ZodString;
+    NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL: z.ZodString;
+    NEXT_PUBLIC_ZONOS_JS_DELIVR_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_RELEASE_DATE: string;
+    NEXT_PUBLIC_ZONOS_API_KEY: string;
+    NEXT_PUBLIC_ZONOS_CDNJS_CDN_URL: string;
+    NEXT_PUBLIC_ZONOS_CDN_URL: string;
+    NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL: string;
+    NEXT_PUBLIC_ZONOS_JS_DELIVR_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_RELEASE_DATE: string;
+    NEXT_PUBLIC_ZONOS_API_KEY: string;
+    NEXT_PUBLIC_ZONOS_CDNJS_CDN_URL: string;
+    NEXT_PUBLIC_ZONOS_CDN_URL: string;
+    NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL: string;
+    NEXT_PUBLIC_ZONOS_JS_DELIVR_CDN_URL: string;
+    NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: string;
+    NEXT_PUBLIC_ZONOS_ROUTE_URL: string;
+    NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: string;
+}>;
+interface Env extends z.infer<typeof envClientSchema> {
+}
+
+/* eslint-disable no-relative-import-paths/no-relative-import-paths */
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  interface Document {
+    addEventListener<K extends keyof CustomEventMap>(
+      type: K,
+      listener: (this: Document, ev: CustomEvent<CustomEventMap[K]>) => void,
+    ): void;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  interface Window {
+    Sentry?: {
+      init: (config: BrowserOptions) => void;
+    };
+    Stripe?: StripeConstructor;
+    Zonos: Zonos;
+    /**
+     * A flag to determine if the current page is a BigCommerce page
+     */
+    bcConfig?: unknown;
+    /**
+     * A flag to determine if the current page is a BigCommerce page
+     */
+    stencilBootstrap?: unknown;
+    sentryOnLoad?: () => void;
+  }
+
+  namespace NodeJS {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+    interface ProcessEnv extends Env {}
+  }
+}
+
+type TranslatedText = {
+    [key: string]: string;
+};
+type EnteredInfo = {
+    city: string;
+    country: CountryCode;
+    email: string;
+    line1: string;
+    line2: string;
+    name: string;
+    phone: string;
+    postal_code: string;
+    state: string;
+};
+type ValidateAddressFields = Omit<StripeAddressElementChangeEvent['value']['address'], 'country'> & {
+    name: string;
+};
+type TranslatedAddressObject = {
+    [key in keyof ValidateAddressFields]?: TranslatedText;
+};
+
+type SubmitEventData = {
+    billingAddress: Record<keyof TranslatedAddressObject, string> | null;
+    shippingAddress: Record<keyof TranslatedAddressObject, string>;
+};
+
+declare const colorPrefixes: readonly ["blue", "cyan", "green", "orange", "purple", "red", "gray", "glass"];
+declare const colorContrasts: readonly ["100", "200", "300", "400", "500", "600", "700", "800", "900", "1000"];
+type ColorContrast = (typeof colorContrasts)[number];
+type ColorPrefix = (typeof colorPrefixes)[number];
+type Color = 'gray-0' | 'gray-50' | 'glass-0' | 'glass-50' | `${ColorPrefix}-${ColorContrast}` | 'gray-1100' | 'gray-1200' | 'glass-1100' | 'glass-1200';
+declare const checkboxColorPrefix: readonly ["blue", "cyan", "green", "orange", "purple", "red", "gray"];
+type CheckboxColorPrefix = (typeof checkboxColorPrefix)[number];
+
+type BannerIntent = 'default' | 'error' | 'success' | 'warning' | 'info';
+
+declare const textOptions: {
+    readonly pageHeader: {
+        readonly label: "Page Header (3XL) · 34px (2.125rem)";
+        readonly size: "3xl";
+        readonly tag: "h2";
+        readonly weight: 900;
+    };
+    readonly secondaryPageHeader: {
+        readonly label: "Secondary Page Header (3XL) • 34px, 500 \"Medium\"";
         readonly size: "3xl";
         readonly tag: "h2";
         readonly weight: 500;
@@ -1153,6 +1477,20 @@ type Size = TextOptions[keyof TextOptions]['size'];
 type Type = keyof TextOptions;
 type FontWeight = TextOptions[keyof TextOptions]['weight'];
 
+type StripeStoreContactOption = {
+    address: {
+        city: string;
+        country: string;
+        line1: string;
+        line2?: string;
+        postal_code: string;
+        state: string;
+    };
+    email: string;
+    name: string;
+    phone?: string;
+};
+
 type NotificationInit = {
     message: string;
     /**
@@ -1215,6 +1553,7 @@ type ShippingRichRadioItem = {
     caption?: string;
     label: string;
     landedCostId: string;
+    method: IncotermCode;
     price: string;
     shipmentRatingId: string;
     sublabel?: string;
@@ -1324,6 +1663,10 @@ declare namespace Components {
           * @default false
          */
         "bold": boolean;
+        /**
+          * Callback for when the badge is dismissed. Also determines if dismiss icon shown.
+         */
+        "dismissHandler"?: () => void;
         /**
           * The icon element to display
           * @default null
@@ -1334,6 +1677,11 @@ declare namespace Components {
           * @default false
          */
         "iconRight": boolean;
+        /**
+          * Whether or not the badge is loading
+          * @default false
+         */
+        "loading": boolean;
         /**
           * Whether or not the badge is rounded
           * @default false
@@ -1479,6 +1827,14 @@ declare namespace Components {
         "hide": boolean;
     }
     interface ZonosCartSubtotal {
+        /**
+          * Button color of the submit button
+         */
+        "submitBtnColor"?: string;
+        /**
+          * Button type of the submit button
+         */
+        "submitBtnType"?: HTMLZonosButtonElement['variant'];
     }
     interface ZonosCheckbox {
         /**
@@ -2093,14 +2449,15 @@ declare namespace Components {
           * Override border color of the radio item
          */
         "borderStyle"?: ElementsUiStyle;
-        /**
-          * Initial selected value
-         */
-        "initialSelectedValue"?: string | number;
         /**
           * List of items to display
          */
         "items": ShippingRichRadioItem[];
+        /**
+          * Selected item
+          * @default {null|firstItem}
+         */
+        "selectedItem": ShippingRichRadioItem | null;
         /**
           * Theme of the radio item
          */
@@ -2867,6 +3224,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "bold"?: boolean;
+        /**
+          * Callback for when the badge is dismissed. Also determines if dismiss icon shown.
+         */
+        "dismissHandler"?: () => void;
         /**
           * The icon element to display
           * @default null
@@ -2877,6 +3238,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "iconRight"?: boolean;
+        /**
+          * Whether or not the badge is loading
+          * @default false
+         */
+        "loading"?: boolean;
         /**
           * Whether or not the badge is rounded
           * @default false
@@ -3022,6 +3388,14 @@ declare namespace LocalJSX {
         "hide"?: boolean;
     }
     interface ZonosCartSubtotal {
+        /**
+          * Button color of the submit button
+         */
+        "submitBtnColor"?: string;
+        /**
+          * Button type of the submit button
+         */
+        "submitBtnType"?: HTMLZonosButtonElement['variant'];
     }
     interface ZonosCheckbox {
         /**
@@ -3610,10 +3984,6 @@ declare namespace LocalJSX {
           * Override border color of the radio item
          */
         "borderStyle"?: ElementsUiStyle;
-        /**
-          * Initial selected value
-         */
-        "initialSelectedValue"?: string | number;
         /**
           * List of items to display
          */
@@ -3622,6 +3992,11 @@ declare namespace LocalJSX {
           * Event emitted when an item is selected
          */
         "onRadioSelected"?: (event: ZonosShippingRichRadioCustomEvent<ShippingRichRadioItem>) => void;
+        /**
+          * Selected item
+          * @default {null|firstItem}
+         */
+        "selectedItem"?: ShippingRichRadioItem | null;
         /**
           * Theme of the radio item
          */
@@ -3794,389 +4169,62 @@ declare module "@stencil/core" {
             "zonos-link-authentication": LocalJSX.ZonosLinkAuthentication & JSXBase.HTMLAttributes<HTMLZonosLinkAuthenticationElement>;
             "zonos-logo": LocalJSX.ZonosLogo & JSXBase.HTMLAttributes<HTMLZonosLogoElement>;
             "zonos-notification": LocalJSX.ZonosNotification & JSXBase.HTMLAttributes<HTMLZonosNotificationElement>;
-            "zonos-payment": LocalJSX.ZonosPayment & JSXBase.HTMLAttributes<HTMLZonosPaymentElement>;
-            "zonos-paypal-payment": LocalJSX.ZonosPaypalPayment & JSXBase.HTMLAttributes<HTMLZonosPaypalPaymentElement>;
-            "zonos-rest-state": LocalJSX.ZonosRestState & JSXBase.HTMLAttributes<HTMLZonosRestStateElement>;
-            "zonos-review": LocalJSX.ZonosReview & JSXBase.HTMLAttributes<HTMLZonosReviewElement>;
-            "zonos-select-dialog-header": LocalJSX.ZonosSelectDialogHeader & JSXBase.HTMLAttributes<HTMLZonosSelectDialogHeaderElement>;
-            "zonos-shipping": LocalJSX.ZonosShipping & JSXBase.HTMLAttributes<HTMLZonosShippingElement>;
-            "zonos-shipping-rich-radio": LocalJSX.ZonosShippingRichRadio & JSXBase.HTMLAttributes<HTMLZonosShippingRichRadioElement>;
-            "zonos-spinner": LocalJSX.ZonosSpinner & JSXBase.HTMLAttributes<HTMLZonosSpinnerElement>;
-            "zonos-text": LocalJSX.ZonosText & JSXBase.HTMLAttributes<HTMLZonosTextElement>;
-            "zonos-tooltip": LocalJSX.ZonosTooltip & JSXBase.HTMLAttributes<HTMLZonosTooltipElement>;
-            "zonos-v-stack": LocalJSX.ZonosVStack & JSXBase.HTMLAttributes<HTMLZonosVStackElement>;
-            /**
-             * The idea is from
-             * @ref https://github.com/beenotung/stencil-virtual-scroll/blob/master/src/components/virtual-scroll-list/virtual-scroll-list.scss
-             * @ref https://github.dev/ionic-team/ionic-framework/blob/v6.7.5/core/src/components/virtual-scroll/virtual-scroll.tsx
-             */
-            "zonos-virtual-scroll": LocalJSX.ZonosVirtualScroll & JSXBase.HTMLAttributes<HTMLZonosVirtualScrollElement>;
-        }
-    }
-}
-
-type CalculateLandedCostAdjustmentInput = {
-    amount: number;
-    productId: string | null;
-    sku: string | null;
-    type: LandedCostAdjustmentType;
-};
-type CalculateLandedCostRequest = {
-    billingAddress: {
-        addressLine1: string;
-        addressLine2?: string | undefined;
-        city: string;
-        country: CountryCode;
-        postalCode: string;
-        state: string;
-    };
-    billingContact: {
-        firstName: string;
-        lastName: string;
-        phone: string;
-    };
-    checkoutSessionId: string;
-    contact: {
-        email?: string;
-        firstName: string;
-        lastName: string;
-        phone: string;
-    };
-    items: CartItem[];
-    landedCostAdjustments?: CalculateLandedCostAdjustmentInput[];
-    metadata?: {
-        key: string;
-        value: string;
-    }[];
-    shippingAddress: {
-        addressLine1: string;
-        addressLine2?: string | undefined;
-        city: string;
-        country: CountryCode;
-        postalCode: string;
-        state: string;
-    };
-};
-
-type NormalizedTempCartItem = {
-    amount: number;
-    attributes: {
-        key: string;
-        value: string;
-    }[];
-    countryOfOrigin: CountryCode | null;
-    currencyCode: CurrencyCode;
-    description: string | null;
-    id: string;
-    imageUrl: string | null;
-    itemType: ItemType | null;
-    measurements: {
-        type: ItemMeasurementType;
-        unitOfMeasure: ItemUnitOfMeasure;
-        value: number;
-    }[];
-    name: string | null;
-    productId: string | null;
-    quantity: number;
-    sku: string | null;
-};
-type NormalizedTempCart = {
-    adjustments: {
-        amount: number;
-        currencyCode: CurrencyCode;
-        description: string;
-        productId: string | null;
-        sku: string | null;
-        type: CartAdjustmentType;
-    }[];
-    credentialToken: string;
-    items: NormalizedTempCartItem[];
-    storeBaseUrl: string;
-    storeId: number;
-};
-
-type CountryOverrideBehavior = 'URL_PARAM' | 'SESSION';
-type ShowForCountries = 'ALL' | 'ONLY_SHIPPABLE' | CountryCode[];
-type ShowCountryList = 'ALL' | 'ONLY_SHIPPABLE' | CountryCode[];
-type HelloConfig = {
-    anchorElementSelector: string;
-    cartUrlPattern: string | null;
-    /**
-     * The behavior to use when determining the country to use for the user.
-     * @default 'URL_PARAM'
-     */
-    countryOverrideBehavior?: CountryOverrideBehavior;
-    currencyBehavior: HelloCurrencyBehavior;
-    currencyElementSelector: string;
-    desktopLocation?: HelloMobileLocation | null;
-    excludedUrlPatterns: Array<string>;
-    homepageUrlPattern: string | null;
-    mobileLocation: HelloMobileLocation | null;
-    mode: Mode;
-    organization: string;
-    peekMessageBehavior: HelloPeekMessageBehavior;
-    peekMessageDelay: number;
-    productAddToCartElementSelector: string | null;
-    productDescriptionElementSelector: string | null;
-    productDetailUrlPattern: string | null;
-    productListUrlPattern: string | null;
-    productTitleElementSelector: string | null;
-    restrictionBehavior: HelloRestrictionBehavior;
-    /**
-     * The countries to include in the country list dropdown of the Hello widget.
-     * @default ONLY_SHIPPABLE
-     */
-    showCountryList?: ShowCountryList;
-    /**
-     * The countries to show the widget for.
-     * @default ONLY_SHIPPABLE
-     */
-    showForCountries?: ShowForCountries;
-    visibilityStatus?: 'ENABLED' | 'DISABLED';
-    /**
-     * Callback function to run after the Hello widget has been initialized. This should be triggered only once when hello is attached to the DOM.
-     * **Note**: If hello is detached from the DOM and reattached, this callback will be called again.
-     * @param params - The parameters containing the country code and currency code that hello is initialized with.
-     */
-    onInitSuccess?: (params: {
-        countryCode: CountryCode;
-        currencyCode: CurrencyCode;
-    }) => Promise<void>;
-};
-
-type StripeStoreContactOption = {
-    address: {
-        city: string;
-        country: string;
-        line1: string;
-        line2?: string;
-        postal_code: string;
-        state: string;
-    };
-    email: string;
-    name: string;
-    phone?: string;
-};
+            "zonos-payment": LocalJSX.ZonosPayment & JSXBase.HTMLAttributes<HTMLZonosPaymentElement>;
+            "zonos-paypal-payment": LocalJSX.ZonosPaypalPayment & JSXBase.HTMLAttributes<HTMLZonosPaypalPaymentElement>;
+            "zonos-rest-state": LocalJSX.ZonosRestState & JSXBase.HTMLAttributes<HTMLZonosRestStateElement>;
+            "zonos-review": LocalJSX.ZonosReview & JSXBase.HTMLAttributes<HTMLZonosReviewElement>;
+            "zonos-select-dialog-header": LocalJSX.ZonosSelectDialogHeader & JSXBase.HTMLAttributes<HTMLZonosSelectDialogHeaderElement>;
+            "zonos-shipping": LocalJSX.ZonosShipping & JSXBase.HTMLAttributes<HTMLZonosShippingElement>;
+            "zonos-shipping-rich-radio": LocalJSX.ZonosShippingRichRadio & JSXBase.HTMLAttributes<HTMLZonosShippingRichRadioElement>;
+            "zonos-spinner": LocalJSX.ZonosSpinner & JSXBase.HTMLAttributes<HTMLZonosSpinnerElement>;
+            "zonos-text": LocalJSX.ZonosText & JSXBase.HTMLAttributes<HTMLZonosTextElement>;
+            "zonos-tooltip": LocalJSX.ZonosTooltip & JSXBase.HTMLAttributes<HTMLZonosTooltipElement>;
+            "zonos-v-stack": LocalJSX.ZonosVStack & JSXBase.HTMLAttributes<HTMLZonosVStackElement>;
+            /**
+             * The idea is from
+             * @ref https://github.com/beenotung/stencil-virtual-scroll/blob/master/src/components/virtual-scroll-list/virtual-scroll-list.scss
+             * @ref https://github.dev/ionic-team/ionic-framework/blob/v6.7.5/core/src/components/virtual-scroll/virtual-scroll.tsx
+             */
+            "zonos-virtual-scroll": LocalJSX.ZonosVirtualScroll & JSXBase.HTMLAttributes<HTMLZonosVirtualScrollElement>;
+        }
+    }
+}
 
-type TabItem = {
-    index: number;
-    isDone: boolean;
-    label: 'Customer' | 'Delivery' | 'Payment';
-    value: 'customer-info' | 'shipping' | 'payment';
-};
-type TabItems = Record<TabItem['value'], TabItem>;
-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;
-};
-type CartItem = {
+type NormalizedTempCartItem = {
     amount: number;
-    attributes?: {
+    attributes: {
         key: string;
         value: string;
     }[];
-    countryOfOrigin?: CountryCode;
+    countryOfOrigin: CountryCode | null;
     currencyCode: CurrencyCode;
-    description?: string;
-    hsCode?: string;
-    imageUrl?: string;
-    itemType?: ItemType;
-    measurements?: ItemMeasurement[];
-    metadata?: {
-        key: string;
-        value: string;
+    description: string | null;
+    id: string;
+    imageUrl: string | null;
+    itemType: ItemType | null;
+    measurements: {
+        type: ItemMeasurementType;
+        unitOfMeasure: ItemUnitOfMeasure;
+        value: number;
     }[];
-    name: string;
-    productId?: string;
+    name: string | null;
+    productId: string | null;
     quantity: number;
-    sku?: string;
-};
-
-type BuildLandedCostParams = {
-    billingAddress: CalculateLandedCostRequest['billingAddress'];
-    billingContact: CalculateLandedCostRequest['billingContact'];
-    checkoutSessionId: string;
-    contact: CalculateLandedCostRequest['contact'];
-    shippingAddress: CalculateLandedCostRequest['shippingAddress'];
-    zonosApiRoute: string;
-};
-type BuildLandedCostResponse = (CalculateLandedCostMutation & {
-    errors?: {
-        message: string;
-    }[];
-}) | null;
-
-type ZonosOrder = GetOrderQuery['order'];
-
-type BuildCardDetailParams = {
-    countryCode: CountryCode;
-    currencyCode: CurrencyCode;
+    sku: string | null;
 };
-type CheckoutConfig = {
-    /**
-     * Validate address to allow specific character sets
-     * @default ALL
-     */
-    allowedCharacterSets?: 'ALL' | 'LATIN';
-    analyticsProviders: Array<{
-        status: AnalyticsProviderStatus;
-        type: AnalyticsProviderType;
-    }>;
-    /**
-     * @default false - when false, we disable the place order button until the script is loaded
-     * @note if set to true, we will not enable or disable the place order button
-     */
-    disablePlaceOrderButtonActivation?: boolean;
-    externalPaymentMethods: Array<{
-        status: ExternalPaymentMethodStatus;
-        type: ExternalPaymentMethodType;
-    }> | null;
-    externalServiceTokens: {
-        token: string;
-        type: ExternalServiceTokenType;
+type NormalizedTempCart = {
+    adjustments: {
+        amount: number;
+        currencyCode: CurrencyCode;
+        description: string;
+        productId: string | null;
+        sku: string | null;
+        type: CartAdjustmentType;
     }[];
-    /**
-     * Test mode for checkout (sandbox or production)
-     * @default TEST
-     */
-    mode: Mode;
-    orderNotifications: {
-        abandonedCart: {
-            delay: number;
-            discountPercent: number;
-            status: {
-                active: NotificationActiveStatus;
-                sendCopiesTo: Array<string>;
-            };
-        };
-        orderCancelled: {
-            active: NotificationActiveStatus;
-            sendCopiesTo: Array<string>;
-        };
-        orderConfirmation: {
-            active: NotificationActiveStatus;
-            sendCopiesTo: Array<string>;
-        } | null;
-        orderShipped: {
-            active: NotificationActiveStatus;
-            sendCopiesTo: Array<string>;
-        };
-    };
-    organization: string;
-    placeOrderButtonSelector: string | null;
-    /**
-     * @param subscriptionStatus subscription status for checkout, checkout only available if subscription status is ENABLED and visibility status is ENABLED
-     *
-     * **NOTE: this value can't be overridden in Zonos.init**
-     */
-    subscriptionStatus: CheckoutSubscriptionStatus;
-    successBehavior: CheckoutSuccessBehavior;
-    /**
-     * The success page action text for checkout.
-     * @note Default text supports translation automatically, but any custom text will not be translated.
-     */
-    successPageActionText?: string;
-    /**
-     * The success page subtitle text for checkout. Each item in the array will appear on a new line.
-     * @note Default text supports translation automatically, but any custom text will not be translated.
-     */
-    successPageSubtitleText?: string[];
-    /**
-     * The success page title text for checkout.
-     * @note Default text supports translation automatically, but any custom text will not be translated.
-     */
-    successPageTitleText?: string;
-    successRedirectUrl: string;
-    visibilityStatus: CheckoutVisibilityStatus;
-    /**
-     * Cart info callback for checkout (optional),
-     * @deprecated
-     * @note
-     * This function is deprecated in favor of new API `createCartId`
-     * @note will attempt to use cart data if available
-     * 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?: (params: BuildCardDetailParams) => Promise<CartItem[]>;
-    /**
-     * Calculate landed cost callback for checkout (optional)
-     * @deprecated
-     * @note
-     * This function is deprecated in favor of new API `createCartId`
-     * @note will attempt to use cart data if available
-     */
-    buildLandedCost?: (params: BuildLandedCostParams) => Promise<BuildLandedCostResponse>;
-    /**
-     * Callback that returns the cart id from `cartCreate` mutation.
-     * @note
-     * The mutation `cartCreate` is preferred to be called in the server side
-     * @returns string - Cart ID
-     */
-    createCartId?: () => Promise<string> | string;
-    /**
-     * Callback trigger when the checkout is closed
-     */
-    onClose?: () => void;
-    /**
-     * This callback is optional. If provided, it will be called right before the payment is processed.
-     * @param items - The cart items.
-     * @returns {string | null} - The error message to display to the user. If the message is empty or null, the payment will proceed.
-     * @example
-     * onInventoryCheck: async ({ items }) => {
-     *   // Check if all items are available from the server. If the fetch is throwing an error, we will show a generic error message "Unable to check inventory. Please try again.".
-     *   const itemsInfo = await fetch('https://yourserver.com/api/get-available-items', {
-     *     method: 'POST',
-     *     body: JSON.stringify({ items }),
-     *   });
-     *   const items = await itemsInfo.json();
-     *   // Filter out unavailable items.
-     *   const unavailableItems = items.filter(item => !item.available);
-     *   if (unavailableItems.length) {
-     *     // Display an error message to the user.
-     *     return `The following items are not available: ${unavailableItems.map(item => item.name).join(', ')}`;
-     *   }
-     *   // Proceed with the payment if you return an empty string or null.
-     *   return '';
-     * }
-     */
-    onInventoryCheck?: (params: {
-        items: CartItem[];
-    }) => Promise<string | null>;
-    /**
-     * Callback trigger when payment succeeds
-     */
-    onOrderSuccess?: (props: {
-        zonosApiRoute: string;
-        zonosOrder: ZonosOrder;
-    }) => Promise<void>;
-};
-
-type AppearanceConfig = {
-    colorPrimary?: string;
-    colorSecondary?: string;
-    fontFamily: string;
-    logoUrl: string;
-    style: ElementsUiStyle;
-    theme: ElementsUiTheme;
-    zonosAttribution: ZonosAttribution | null;
+    credentialToken: string;
+    items: NormalizedTempCartItem[];
+    storeBaseUrl: string;
+    storeId: number;
 };
 
 /**