@zonos/elements 1.3.11-alpha.0 → 1.3.11-alpha.2

package/dist/types/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.d.ts

@@ -0,0 +1,29 @@
+import { type TabItem, type TabItems } from "../../store/checkout/cart";
+import type { Color } from "../../../types/styles/Color";
+export declare class ZonosCheckoutProgressTabs {
+    ele: HTMLZonosCheckoutProgressTabsElement;
+    /**
+     * Color of the tab progress bar and label, override the secondary color of the appearance settings
+     */
+    tabColor?: string | null;
+    /**
+     * Background color of the parent that's wrapped around the tab progress bar
+     */
+    backgroundColor?: Color | (string & {
+        _placeholder?: never;
+    }) | null;
+    /**
+     * The total number of steps that's done
+     */
+    private getTotalSuccessStep;
+    private isTabClickable;
+    /**
+     * Set the tab items data. This is to be used in storybook
+     */
+    setTabItems(tabItems: TabItems): Promise<void>;
+    /**
+     * Set selected tab. Only set the tab if it's clickable
+     */
+    setTabSelected(tabValue: TabItem['value']): Promise<void>;
+    render(): any;
+}

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

@@ -1,5 +1,5 @@
 import { type EventEmitter } from '../../../stencil-public-runtime';
-import type { ElementsUiStyle } from "../../../types/index";
+import type { ElementsUiStyle } from "../../../types/generated/graphql.customer.types";
 export declare class ZonosDialog {
     /**
      * Whether or not the dialog is open
@@ -34,11 +34,6 @@ export declare class ZonosDialog {
      * @default false
      */
     noBorder: boolean;
-    /**
-     * The right area for the action in the footer
-     * @default null
-     */
-    footerRightAction: HTMLElement | null;
     /**
      * The border style of the button
      * @default ROUNDED

package/dist/types/components/common/zonos-icon/zonos-icon.d.ts

@@ -1,4 +1,4 @@
-import type { Color } from "../../../types/index";
+import type { Color } from "../../../types/styles/Color";
 export declare class ZonosIcon {
     /**
      * Determines if the icon should be auto height instead of square
@@ -9,7 +9,9 @@ export declare class ZonosIcon {
      * Color of the SVG
      * @default 'gray-1200'
      */
-    iconColor: Color;
+    iconColor: Color | (string & {
+        _placeholder?: never;
+    });
     /**
      * The content of the icon (full svg)
      * @example

package/dist/types/components/common/zonos-logo/zonos-logo.d.ts

@@ -1,4 +1,4 @@
-import type { ElementsUiTheme } from "../../../types/index";
+import type { ElementsUiTheme } from "../../../types/generated/graphql.customer.types";
 export declare class ZonosLogo {
     /**
      * Theme to change the color of the logo

package/dist/types/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.d.ts

@@ -1,5 +1,6 @@
 import { type EventEmitter } from '../../../stencil-public-runtime';
-import type { Color, ElementsUiStyle, ElementsUiTheme } from "../../../types/index";
+import type { ElementsUiStyle, ElementsUiTheme } from "../../../types/generated/graphql.customer.types";
+import type { Color } from "../../../types/styles/Color";
 export type ShippingRichRadioItem = {
     caption?: string;
     label: string;
@@ -26,6 +27,10 @@ export declare class ZonosShippingRichRadio {
      * Theme of the radio item
      */
     theme?: ElementsUiTheme;
+    /**
+     * Initial selected value
+     */
+    initialSelectedValue?: string | number;
     /**
      * Selected item
      * @default {null|firstItem}
@@ -37,5 +42,6 @@ export declare class ZonosShippingRichRadio {
     radioSelected?: EventEmitter<ShippingRichRadioItem>;
     private handleRichRadioSelect;
     private getRadioItemStyleVariables;
+    componentWillLoad(): void;
     render(): any;
 }

package/dist/types/components/common/zonos-text/zonos-text.d.ts

@@ -4,7 +4,9 @@ export declare class ZonosText {
     /**
      * The icon element to display
      */
-    textColor: Color;
+    textColor: Color | (string & {
+        _placeholder?: never;
+    });
     /**
      * The size of the text
      */

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

@@ -76,5 +76,6 @@ export declare class ZonosHello {
     private shouldAnimateLeftDesktop;
     handleResize(): void;
     private isShippableCountry;
+    handleAppearanceSettingsOverrideChange(): void;
     render(): any;
 }

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

@@ -1,5 +1,6 @@
 import { type EventEmitter } from '../../../stencil-public-runtime';
-import type { AppearanceConfig, HelloMobileLocation } from "../../../types/index";
+import type { AppearanceConfig } from "../../store/zonosStore";
+import type { HelloMobileLocation } from "../../../types/generated/graphql.customer.types";
 import type { RestrictedItem } from "../../../types/hello/RestrictedItem";
 export declare class ZonosHelloDialog {
     /**

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

@@ -1,5 +1,13 @@
 import { stripeStoreUpdateCheckoutSession } from "./stripe";
-import type { CheckoutPresentmentFragment, CurrencyCode, ItemMeasurementType, ItemUnitOfMeasure, LandedCostFragment, ShipmentRatingFragment } from "../../../types/generated/graphql.customer.types";
+import type { CheckoutPresentmentFragment, CurrencyCode, ItemMeasurementType, ItemType, ItemUnitOfMeasure, LandedCostFragment, ShipmentRatingFragment } from "../../../types/generated/graphql.customer.types";
+type Step = 'customer-info' | 'shipping' | 'payment' | 'finish' | 'error';
+export type TabItem = {
+    index: number;
+    isDone: boolean;
+    label: 'Customer' | 'Delivery' | 'Payment';
+    value: 'customer-info' | 'shipping' | 'payment';
+};
+export type TabItems = Record<TabItem['value'], TabItem>;
 export type ItemMeasurement = {
     /** Indicates what type of `Measurement`, e.g. weight, specific dim unit. */
     type?: ItemMeasurementType;
@@ -13,15 +21,21 @@ type MappedCheckoutLandedCost = CheckoutPresentmentFragment & {
 };
 export type CartItem = {
     amount: number;
+    attributes?: {
+        key: string;
+        value: string;
+    }[];
     countryOfOrigin?: string;
     currencyCode: string;
     description?: string;
     hsCode?: string;
     imageUrl?: string;
+    itemType?: ItemType;
     measurements?: ItemMeasurement[];
     metadata?: {
-        [key: string]: string | number;
-    };
+        key: string;
+        value: string;
+    }[];
     name: string;
     productId?: string;
     quantity: number;
@@ -52,8 +66,9 @@ type CartStore = {
     selectedShippingOptionTransitTime: string;
     shipping: number;
     shippingData: ShipmentRatingFragment[] | null;
-    step: 'customer-info' | 'shipping' | 'payment' | 'finish' | 'error';
+    step: Step;
     subtotal: number;
+    tabItems: TabItems;
     total: number;
 };
 declare const cartStore: CartStore;

package/dist/types/components/store/translationStore/strings.arabic.d.ts

@@ -62,6 +62,9 @@ export declare const stringsArabic: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.base.d.ts

@@ -62,6 +62,9 @@ export declare const stringsBase: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.chinese.d.ts

@@ -62,6 +62,9 @@ export declare const stringsChinese: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.danish.d.ts

@@ -62,6 +62,9 @@ export declare const stringsDanish: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.dutch.d.ts

@@ -62,6 +62,9 @@ export declare const stringsDutch: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.french.d.ts

@@ -62,6 +62,9 @@ export declare const stringsFrench: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.german.d.ts

@@ -62,6 +62,9 @@ export declare const stringsGerman: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.hebrew.d.ts

@@ -62,6 +62,9 @@ export declare const stringsHebrew: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.indonesian.d.ts

@@ -62,6 +62,9 @@ export declare const stringsIndonesian: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.italian.d.ts

@@ -62,6 +62,9 @@ export declare const stringsItalian: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.japanese.d.ts

@@ -62,6 +62,9 @@ export declare const stringsJapanese: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.korean.d.ts

@@ -62,6 +62,9 @@ export declare const stringsKorean: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.norwegian.d.ts

@@ -62,6 +62,9 @@ export declare const stringsNorwegian: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.polish.d.ts

@@ -62,6 +62,9 @@ export declare const stringsPolish: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.portuguese.d.ts

@@ -62,6 +62,9 @@ export declare const stringsPortuguese: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.russian.d.ts

@@ -62,6 +62,9 @@ export declare const stringsRussian: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.spanish.d.ts

@@ -62,6 +62,9 @@ export declare const stringsSpanish: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.swedish.d.ts

@@ -62,6 +62,9 @@ export declare const stringsSwedish: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.turkish.d.ts

@@ -62,6 +62,9 @@ export declare const stringsTurkish: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/translationStore/strings.vietnamese.d.ts

@@ -62,6 +62,9 @@ export declare const stringsVietnamese: {
     'No shipping method selected': {
         value: string;
     };
+    'No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.': {
+        value: string;
+    };
     'No shipping methods found - try editing your address or contacting support if the error persists': {
         value: string;
     };

package/dist/types/components/store/zonosStore.d.ts

@@ -1,6 +1,7 @@
 import type { CurrencyConverter, LoadZonosParamsConfig } from "../../scripts/zonosBase";
-import type { CheckoutConfig, HelloConfig } from "../../types/index";
+import type { CheckoutConfig } from "../../types/checkout/CheckoutConfig";
 import type { ElementsUiStyle, ElementsUiTheme, ZonosAttribution, ZonosSettingsQuery } from "../../types/generated/graphql.customer.types";
+import type { HelloConfig } from "../../types/hello/HelloConfig";
 export type AppearanceConfig = {
     colorPrimary?: string;
     colorSecondary?: string;
@@ -25,9 +26,17 @@ export type ZonosConfig = {
 type ZonosStore = ZonosConfig & {
     loadedConfig: boolean;
     stripeApiKey?: string;
+    /**
+     * Zonos API Key
+     * @note optional if tempCartData is available as we can pull the zonosApiKey from the tempCartData
+     */
     zonosApiKey: string;
 };
 declare const zonosStore: ZonosStore;
+/**
+ * Get theme from media query if theme is SYSTEM, otherwise return the theme
+ */
+declare const getZonosStoreTheme: (theme: ElementsUiTheme) => Exclude<ElementsUiTheme, 'SYSTEM'>;
 /**
  * Init setting from zonos setting
  */
@@ -36,4 +45,4 @@ declare const zonosStoreInitSetting: ({ overrideSettings, zonosSettings, }: {
     zonosSettings: ZonosSettingsQuery | null;
 }) => void;
 declare const zonosStoreFontFamily: () => string;
-export { zonosStore, zonosStoreFontFamily, zonosStoreInitSetting };
+export { getZonosStoreTheme, zonosStore, zonosStoreFontFamily, zonosStoreInitSetting, };

package/dist/types/components/utils/api/buildCartItemsByTempCart.d.ts

@@ -0,0 +1,7 @@
+import type { CartItem } from "../../store/checkout/cart";
+import type { TempCart } from "../../../types/checkout/api/TempCart";
+/**
+ * Map the items from tempCart like how we do it in dgs
+ * @ref https://github.com/Zonos/ShippingQuoteService/blob/f8bd4f1ff41cb34b49b9f3f435576ec28dedf906/src/main/java/com/iglobal/services/shippingquote/dto/ShippingQuoteRequestDto.java#L393
+ */
+export declare const buildCartItemsByTempCart: (tempCartData: TempCart) => CartItem[];

package/dist/types/components/utils/api/getLocaleMessages.d.ts

@@ -4,7 +4,7 @@ export declare const getLocaleMessages: ({ countryCode, localeTo, storeId, }: {
     localeTo?: string | undefined;
     storeId: number;
 }) => Promise<{
-    countryCodes: string[] | null;
+    countryCodes: string[];
     countryCodesPageMessageLinks: {
         id: number;
         message: {

package/dist/types/components/utils/api/tempCartItem/getAttributes.d.ts

@@ -0,0 +1,11 @@
+import type { TempCartItem } from "../../../../types/checkout/api/TempCart";
+type AttributeKey = 'brand' | 'category' | 'color' | 'customization' | 'descriptionDetailed' | 'fabricContent' | 'ltlClass' | 'pickingLocation' | 'shipFromLocation' | 'size' | 'material' | 'status';
+/**
+ * Map legacy item attribute to dgs item attributes
+ * @ref https://github.com/Zonos/ShippingQuoteService/blob/f8bd4f1ff41cb34b49b9f3f435576ec28dedf906/src/main/java/com/iglobal/services/shippingquote/dto/ShippingQuoteRequestDto.java#L412
+ */
+export declare const getAttributes: (item: TempCartItem) => {
+    key: AttributeKey;
+    value: string;
+}[];
+export {};

package/dist/types/components/utils/api/tempCartItem/getMeasurements.d.ts

@@ -0,0 +1,7 @@
+import type { ItemMeasurement } from "../../../store/checkout/cart";
+import type { TempCartItem } from "../../../../types/checkout/api/TempCart";
+/**
+ * Mapping legacy measurement with dgs
+ * @ref https://github.com/Zonos/ShippingQuoteService/blob/f8bd4f1ff41cb34b49b9f3f435576ec28dedf906/src/main/java/com/iglobal/services/shippingquote/dto/ShippingQuoteRequestDto.java#L441
+ */
+export declare const getMeasurements: (item: TempCartItem) => ItemMeasurement[];

package/dist/types/components/utils/changeDeepProperty.d.ts

@@ -1,4 +1,4 @@
-import type { IDeepKeyof, IDeepPropertyType } from "../../types/index";
+import type { IDeepKeyof, IDeepPropertyType } from "../../types/utils/deep/IDeepKeyof";
 /**
  * Will change a nested property on an object, and return a copy of the object with only that property changed.
  *

package/dist/types/components/utils/changeDeepPropertyAtIndex.d.ts

@@ -1,4 +1,4 @@
-import type { IDeepKeyofAtIndex, IDeepPropertyTypeAtIndex } from "../../types/index";
+import type { IDeepKeyofAtIndex, IDeepPropertyTypeAtIndex } from "../../types/utils/deep/IDeepKeyofAtIndex";
 /**
  * Will change a nested property on an object (with array), and return a copy of the object with only that property changed.
  *

package/dist/types/components/utils/createCustomEvent.d.ts

@@ -0,0 +1,12 @@
+export type CustomEventMap = {
+    legacyCheckoutError: string;
+    'zonos-checkout-success': {
+        message: string;
+    };
+};
+/**
+ * Strongly typed custom event creation for all available events in zonos-checkout project
+ */
+export declare const createCustomEvent: <T extends (string & {
+    _placeholder?: undefined;
+}) | keyof CustomEventMap>(eventName: T, detail?: (T extends keyof CustomEventMap ? CustomEventMap[T] : unknown) | undefined) => CustomEvent<T extends keyof CustomEventMap ? CustomEventMap[T] : unknown>;

package/dist/types/components/utils/getBorderRadius.d.ts

@@ -1,4 +1,4 @@
-import type { ElementsUiStyle } from "../../types/index";
+import type { ElementsUiStyle } from "../../types/generated/graphql.customer.types";
 /**
  * Get the border radius for the elements based on the style
  * @param overrideBorderStyle

package/dist/types/components/utils/getContrastColor.d.ts

@@ -0,0 +1,4 @@
+export declare const getContrastColor: ({ backgroundColor, color, }: {
+    backgroundColor: string;
+    color: string;
+}) => string;

package/dist/types/components/utils/handleFetch.d.ts

@@ -1,4 +1,5 @@
-import type { JsonError, NoInfer } from "../../types/index";
+import type { JsonError } from "../../types/JsonError";
+import type { NoInfer } from "../../types/NoInfer";
 export type HandleFetchReturn<ResponseBody extends unknown> = {
     errors: JsonError[];
     json: NoInfer<ResponseBody> | null;

package/dist/types/components/utils/isColorVariable.d.ts

@@ -1 +1 @@
-export declare const isColorVariable: (color?: string) => boolean | "" | undefined;
+export declare const isColorVariable: (color?: string) => boolean;

package/dist/types/components/utils/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * Filter out all of the undefined values from the object so we don't have undefined css variable values
+ */
+export declare const styles: (props: import("react").CSSProperties & {
+    [key: string]: string | undefined;
+}) => Record<string, string>;