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

package/dist/types/components.d.ts

@@ -10,13 +10,13 @@ import { CheckboxColorPrefix, Color, ColorPrefix } from "./types/styles/Color";
 import { BannerIntent } from "./components/common/zonos-banner/zonos-banner";
 import { CountryCode, ElementsUiStyle, ElementsUiTheme, HelloMobileLocation } from "./types/generated/graphql.customer.types";
 import { FontWeight, Size, Type } from "./types/styles/Text";
-import { AppearanceConfig as AppearanceConfig1, Color as Color1, ElementsUiStyle as ElementsUiStyle1, ElementsUiTheme as ElementsUiTheme1, HelloMobileLocation as HelloMobileLocation1 } from "./types/index";
 import { AppearanceConfig } from "./components/store/zonosStore";
 import { ContactOption as ContactOption1 } from "./components/store/checkout/stripe";
+import { TabItem, TabItems } from "./components/store/checkout/cart";
 import { LoadZonosParamsConfig } from "./scripts/zonosBase";
 import { NotificationInit } from "./components/common/zonos-notification/zonos-notification";
 import { RestrictedItem } from "./types/hello/RestrictedItem";
-import { AppearanceConfig as AppearanceConfig2 } from "./components.d";
+import { AppearanceConfig as AppearanceConfig1 } from "./components.d";
 import { ShippingRichRadioItem } from "./components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio";
 import { SpinnerColor } from "./components/common/zonos-spinner/zonos-spinner";
 import { GridSpacing } from "./types/styles/GridSpacing";
@@ -25,13 +25,13 @@ export { CheckboxColorPrefix, Color, ColorPrefix } from "./types/styles/Color";
 export { BannerIntent } from "./components/common/zonos-banner/zonos-banner";
 export { CountryCode, ElementsUiStyle, ElementsUiTheme, HelloMobileLocation } from "./types/generated/graphql.customer.types";
 export { FontWeight, Size, Type } from "./types/styles/Text";
-export { AppearanceConfig as AppearanceConfig1, Color as Color1, ElementsUiStyle as ElementsUiStyle1, ElementsUiTheme as ElementsUiTheme1, HelloMobileLocation as HelloMobileLocation1 } from "./types/index";
 export { AppearanceConfig } from "./components/store/zonosStore";
 export { ContactOption as ContactOption1 } from "./components/store/checkout/stripe";
+export { TabItem, TabItems } from "./components/store/checkout/cart";
 export { LoadZonosParamsConfig } from "./scripts/zonosBase";
 export { NotificationInit } from "./components/common/zonos-notification/zonos-notification";
 export { RestrictedItem } from "./types/hello/RestrictedItem";
-export { AppearanceConfig as AppearanceConfig2 } from "./components.d";
+export { AppearanceConfig as AppearanceConfig1 } from "./components.d";
 export { ShippingRichRadioItem } from "./components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio";
 export { SpinnerColor } from "./components/common/zonos-spinner/zonos-spinner";
 export { GridSpacing } from "./types/styles/GridSpacing";
@@ -272,6 +272,14 @@ export namespace Components {
         "storybookForceStatus"?: PaymentIntent['status'];
     }
     interface ZonosCheckoutFooter {
+        /**
+          * Theme to change the color of the logo
+         */
+        "dataTheme"?: ElementsUiTheme;
+        /**
+          * Override mobile mode
+         */
+        "mobile": boolean;
     }
     interface ZonosCheckoutPayment {
         /**
@@ -291,6 +299,24 @@ export namespace Components {
          */
         "submitBtnType"?: HTMLZonosButtonElement['variant'];
     }
+    interface ZonosCheckoutProgressTabs {
+        /**
+          * Background color of the parent that's wrapped around the tab progress bar
+         */
+        "backgroundColor"?: Color | (string & { _placeholder?: never }) | null;
+        /**
+          * 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>;
+        /**
+          * Color of the tab progress bar and label, override the secondary color of the appearance settings
+         */
+        "tabColor"?: string | null;
+    }
     interface ZonosCollapse {
         /**
           * Collapsed size when collapsed
@@ -407,11 +433,6 @@ export namespace Components {
           * @default ROUNDED
          */
         "borderStyle"?: ElementsUiStyle;
-        /**
-          * The right area for the action in the footer
-          * @default null
-         */
-        "footerRightAction": HTMLElement | null;
         /**
           * The header text for the dialog
          */
@@ -566,7 +587,7 @@ export namespace Components {
           * Color of the SVG
           * @default 'gray-1200'
          */
-        "iconColor": Color;
+        "iconColor": Color | (string & { _placeholder?: never });
         /**
           * The size of the icon
           * @default 24
@@ -670,6 +691,10 @@ export namespace Components {
           * Override border color of the radio item
          */
         "borderStyle"?: ElementsUiStyle;
+        /**
+          * Initial selected value
+         */
+        "initialSelectedValue"?: string | number;
         /**
           * List of items to display
          */
@@ -702,7 +727,7 @@ export namespace Components {
         /**
           * The icon element to display
          */
-        "textColor": Color;
+        "textColor": Color | (string & { _placeholder?: never });
         /**
           * Type of the text to display
          */
@@ -887,6 +912,12 @@ declare global {
         prototype: HTMLZonosCheckoutPaymentElement;
         new (): HTMLZonosCheckoutPaymentElement;
     };
+    interface HTMLZonosCheckoutProgressTabsElement extends Components.ZonosCheckoutProgressTabs, HTMLStencilElement {
+    }
+    var HTMLZonosCheckoutProgressTabsElement: {
+        prototype: HTMLZonosCheckoutProgressTabsElement;
+        new (): HTMLZonosCheckoutProgressTabsElement;
+    };
     interface HTMLZonosCollapseElement extends Components.ZonosCollapse, HTMLStencilElement {
     }
     var HTMLZonosCollapseElement: {
@@ -1122,6 +1153,7 @@ declare global {
         "zonos-checkout-finish": HTMLZonosCheckoutFinishElement;
         "zonos-checkout-footer": HTMLZonosCheckoutFooterElement;
         "zonos-checkout-payment": HTMLZonosCheckoutPaymentElement;
+        "zonos-checkout-progress-tabs": HTMLZonosCheckoutProgressTabsElement;
         "zonos-collapse": HTMLZonosCollapseElement;
         "zonos-component": HTMLZonosComponentElement;
         "zonos-controller": HTMLZonosControllerElement;
@@ -1387,6 +1419,14 @@ declare namespace LocalJSX {
         "storybookForceStatus"?: PaymentIntent['status'];
     }
     interface ZonosCheckoutFooter {
+        /**
+          * Theme to change the color of the logo
+         */
+        "dataTheme"?: ElementsUiTheme;
+        /**
+          * Override mobile mode
+         */
+        "mobile"?: boolean;
     }
     interface ZonosCheckoutPayment {
         /**
@@ -1410,6 +1450,16 @@ declare namespace LocalJSX {
          */
         "submitBtnType"?: HTMLZonosButtonElement['variant'];
     }
+    interface ZonosCheckoutProgressTabs {
+        /**
+          * Background color of the parent that's wrapped around the tab progress bar
+         */
+        "backgroundColor"?: Color | (string & { _placeholder?: never }) | null;
+        /**
+          * Color of the tab progress bar and label, override the secondary color of the appearance settings
+         */
+        "tabColor"?: string | null;
+    }
     interface ZonosCollapse {
         /**
           * Collapsed size when collapsed
@@ -1505,11 +1555,6 @@ declare namespace LocalJSX {
           * @default ROUNDED
          */
         "borderStyle"?: ElementsUiStyle;
-        /**
-          * The right area for the action in the footer
-          * @default null
-         */
-        "footerRightAction"?: HTMLElement | null;
         /**
           * The header text for the dialog
          */
@@ -1647,7 +1692,7 @@ declare namespace LocalJSX {
           * Color of the SVG
           * @default 'gray-1200'
          */
-        "iconColor"?: Color;
+        "iconColor"?: Color | (string & { _placeholder?: never });
         /**
           * The size of the icon
           * @default 24
@@ -1751,6 +1796,10 @@ declare namespace LocalJSX {
           * Override border color of the radio item
          */
         "borderStyle"?: ElementsUiStyle;
+        /**
+          * Initial selected value
+         */
+        "initialSelectedValue"?: string | number;
         /**
           * List of items to display
          */
@@ -1787,7 +1836,7 @@ declare namespace LocalJSX {
         /**
           * The icon element to display
          */
-        "textColor"?: Color;
+        "textColor"?: Color | (string & { _placeholder?: never });
         /**
           * Type of the text to display
          */
@@ -1827,6 +1876,7 @@ declare namespace LocalJSX {
         "zonos-checkout-finish": ZonosCheckoutFinish;
         "zonos-checkout-footer": ZonosCheckoutFooter;
         "zonos-checkout-payment": ZonosCheckoutPayment;
+        "zonos-checkout-progress-tabs": ZonosCheckoutProgressTabs;
         "zonos-collapse": ZonosCollapse;
         "zonos-component": ZonosComponent;
         "zonos-controller": ZonosController;
@@ -1871,6 +1921,7 @@ declare module "@stencil/core" {
             "zonos-checkout-finish": LocalJSX.ZonosCheckoutFinish & JSXBase.HTMLAttributes<HTMLZonosCheckoutFinishElement>;
             "zonos-checkout-footer": LocalJSX.ZonosCheckoutFooter & JSXBase.HTMLAttributes<HTMLZonosCheckoutFooterElement>;
             "zonos-checkout-payment": LocalJSX.ZonosCheckoutPayment & JSXBase.HTMLAttributes<HTMLZonosCheckoutPaymentElement>;
+            "zonos-checkout-progress-tabs": LocalJSX.ZonosCheckoutProgressTabs & JSXBase.HTMLAttributes<HTMLZonosCheckoutProgressTabsElement>;
             "zonos-collapse": LocalJSX.ZonosCollapse & JSXBase.HTMLAttributes<HTMLZonosCollapseElement>;
             "zonos-component": LocalJSX.ZonosComponent & JSXBase.HTMLAttributes<HTMLZonosComponentElement>;
             "zonos-controller": LocalJSX.ZonosController & JSXBase.HTMLAttributes<HTMLZonosControllerElement>;

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

@@ -1,6 +1,9 @@
 import type { Stripe } from '@stripe/stripe-js';
 import type { AppearanceConfig } from "../components/store/zonosStore";
-import type { CheckoutConfig, HelloConfig, NotificationInit } from "../types/index";
+import type { NotificationInit } from "../types/index";
+import type { TempCart } from "../types/checkout/api/TempCart";
+import type { CheckoutConfig } from "../types/checkout/CheckoutConfig";
+import type { HelloConfig } from "../types/hello/HelloConfig";
 export type CurrencyConverter = (convertAndFormat: (amount: number) => string, convert: (amount: number) => number, format: (amount: number) => string, selector?: string) => void;
 export type LoadZonosParamsConfig = {
     appearance?: Partial<AppearanceConfig>;
@@ -10,6 +13,10 @@ export type LoadZonosParamsConfig = {
 };
 export type LoadZonosParams = LoadZonosParamsConfig & {
     storeId: number;
+    /**
+     * Temporary cart UUID to be used for zonos checkout, if this is provided, no need to configure `buildCartDetail`, `buildLandedCost` callback, zonosApiKey or storeId
+     */
+    tempCartUUID?: string;
     zonosApiKey: string;
 };
 export interface Zonos {
@@ -26,6 +33,7 @@ export interface Zonos {
     storeId: number;
     /** Stripe instance */
     stripe: Stripe;
+    tempCartData: TempCart | null;
     version: string;
     zonosApiKey: string;
     zonosQaUrl: string | null;
@@ -49,6 +57,7 @@ export declare abstract class Zonos {
     static zonosQaUrl: string | null;
     static version: string;
     static modeAlerted: boolean;
+    static tempCartData: TempCart | null;
     static getCurrentTimestamp: () => number;
     private static zonosController;
     static init: ({ appearance, checkoutSettings, currencyConverter, helloSettings, storeId, zonosApiKey, }: LoadZonosParams) => Promise<void>;

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

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

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

@@ -41,7 +41,8 @@ export type CheckoutConfig = {
     successRedirectUrl: string;
     visibilityStatus: CheckoutVisibilityStatus;
     /**
-     * cart info callback for checkout (optional)
+     * Cart info callback for checkout (optional)
+     * @note will use temp 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', {
@@ -60,6 +61,10 @@ export type CheckoutConfig = {
      * - quantity: number;
      */
     buildCartDetail?: () => Promise<CartItem[]>;
+    /**
+     * Calculate landed cost callback for checkout (optional)
+     * @note will use temp cart data if available
+     */
     buildLandedCost?: (params: BuildLandedCostParams) => BuildLandedCostResponse;
     onOrderSuccess?: (zonosOrder: ZonosOrder) => Promise<void>;
 };

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

@@ -0,0 +1,80 @@
+export type TempCartItem = {
+    additionalCharge: boolean;
+    boxNumber: number | null;
+    countryOfOrigin: string | null;
+    description: string | null;
+    discount: boolean;
+    foreignUnitPrice: number | null;
+    giftCard: boolean;
+    height: number | null;
+    id: number | null;
+    imageURL: string | null;
+    itemBrand: string | null;
+    itemCategory: string | null;
+    itemColor: string | null;
+    itemCustomization: string | null;
+    itemDescriptionDetailed: string | null;
+    itemDescriptionLong: string | null;
+    itemDiscountAmount: number | null;
+    itemDoSell: boolean;
+    itemFabricContent: string | null;
+    itemForwarded: boolean;
+    itemHSCode: string | null;
+    itemLtlClass: string | null;
+    itemMaterial: string | null;
+    itemPickingLocation: string | null;
+    itemShipFromLocation: string | null;
+    itemShippingAmount: number | null;
+    itemSize: string | null;
+    itemURL: string | null;
+    itemUnitPriceHide: boolean;
+    length: number | null;
+    nonShippable: boolean;
+    productId: string | null;
+    quantity: number | null;
+    sku: string | null;
+    status: string | null;
+    unitPrice: number | null;
+    weight: number | null;
+    weightUnits: string | null;
+    width: number | null;
+};
+export type TempCart = {
+    additionalHandling: boolean;
+    boxCount: string | null;
+    /**
+     * @param contShopingUrl should always be set, backend will ensure this. If not set, backend will fallback to the store vendor url
+     */
+    contShoppingURL: string;
+    createdInMillis: number | null;
+    customerId: string | null;
+    customerNote: string | null;
+    discountAmount: number | null;
+    domesticShippingCharge: number | null;
+    exchangeRate: number | null;
+    externalConfirmationPageURL: string | null;
+    footerHtml: string | null;
+    giftCardDescription: string | null;
+    giftCardForeignTotal: number | null;
+    giftCardTotal: number | null;
+    guid: string;
+    iGlobalId: string | null;
+    id: number;
+    iglobalCheckoutFlags: string | null;
+    interpayRateOfferId: string | null;
+    items: TempCartItem[] | null;
+    message: string | null;
+    misc1: string | null;
+    misc2: string | null;
+    misc3: string | null;
+    misc4: string | null;
+    misc5: string | null;
+    misc6: string | null;
+    poAllowed: boolean;
+    referenceId: string | null;
+    shippingAmountOverride: number | null;
+    showForeignCurrency: boolean;
+    storeId: number;
+    usedInMillis: number | null;
+    vendorPassedCurrencyCode: string | null;
+};

package/dist/types/types/generated/graphql.customer.types.d.ts

@@ -316,6 +316,12 @@ export declare const classificationCalculateSource: {
     readonly Legacy: "LEGACY";
 };
 export type ClassificationCalculateSource = (typeof classificationCalculateSource)[keyof typeof classificationCalculateSource];
+export declare const classificationRequestField: {
+    readonly Category: "CATEGORY";
+    readonly Description: "DESCRIPTION";
+    readonly Name: "NAME";
+};
+export type ClassificationRequestField = (typeof classificationRequestField)[keyof typeof classificationRequestField];
 export declare const clearanceType: {
     readonly Commercial: "COMMERCIAL";
     readonly Postal: "POSTAL";
@@ -1726,6 +1732,33 @@ export declare const lcgBillingMethod: {
     readonly Legacy: "LEGACY";
 };
 export type LcgBillingMethod = (typeof lcgBillingMethod)[keyof typeof lcgBillingMethod];
+export declare const manualClassificationRequestCreateStatus: {
+    readonly Created: "CREATED";
+    readonly Existing: "EXISTING";
+};
+export type ManualClassificationRequestCreateStatus = (typeof manualClassificationRequestCreateStatus)[keyof typeof manualClassificationRequestCreateStatus];
+export declare const manualClassificationRequestStatus: {
+    readonly Completed: "COMPLETED";
+    readonly Invalidated: "INVALIDATED";
+    readonly Pending: "PENDING";
+    readonly Reserved: "RESERVED";
+};
+export type ManualClassificationRequestStatus = (typeof manualClassificationRequestStatus)[keyof typeof manualClassificationRequestStatus];
+export declare const manualClassificationRequestsSorting: {
+    readonly HsCode: "HS_CODE";
+    readonly Priority: "PRIORITY";
+};
+export type ManualClassificationRequestsSorting = (typeof manualClassificationRequestsSorting)[keyof typeof manualClassificationRequestsSorting];
+export declare const manualClassificationSettingStatus: {
+    readonly Disabled: "DISABLED";
+    readonly Enabled: "ENABLED";
+};
+export type ManualClassificationSettingStatus = (typeof manualClassificationSettingStatus)[keyof typeof manualClassificationSettingStatus];
+export declare const manualClassificationStatus: {
+    readonly Active: "ACTIVE";
+    readonly Archived: "ARCHIVED";
+};
+export type ManualClassificationStatus = (typeof manualClassificationStatus)[keyof typeof manualClassificationStatus];
 export declare const matchType: {
     readonly ExactMatch: "EXACT_MATCH";
     readonly NoMatch: "NO_MATCH";
@@ -1886,6 +1919,17 @@ export declare const propertyType: {
     readonly Residential: "RESIDENTIAL";
 };
 export type PropertyType = (typeof propertyType)[keyof typeof propertyType];
+export declare const providedHsCodeVisibilityStatus: {
+    readonly NotVisible: "NOT_VISIBLE";
+    readonly Visible: "VISIBLE";
+};
+export type ProvidedHsCodeVisibilityStatus = (typeof providedHsCodeVisibilityStatus)[keyof typeof providedHsCodeVisibilityStatus];
+export declare const restrictedItemAction: {
+    readonly Block: "BLOCK";
+    readonly BlockAll: "BLOCK_ALL";
+    readonly Warn: "WARN";
+};
+export type RestrictedItemAction = (typeof restrictedItemAction)[keyof typeof restrictedItemAction];
 export declare const result: {
     readonly Failure: "FAILURE";
     readonly Success: "SUCCESS";
@@ -1928,6 +1972,44 @@ export declare const shipmentConsolidationStatus: {
     readonly Open: "OPEN";
 };
 export type ShipmentConsolidationStatus = (typeof shipmentConsolidationStatus)[keyof typeof shipmentConsolidationStatus];
+export type ShipmentRatingBatteryDetail = {
+    materialType: ShipmentRatingBatteryMaterialType;
+    packingType: ShipmentRatingBatteryPackingType;
+};
+export declare const shipmentRatingBatteryMaterialType: {
+    readonly LithiumIon: "LITHIUM_ION";
+    readonly LithiumMetal: "LITHIUM_METAL";
+};
+export type ShipmentRatingBatteryMaterialType = (typeof shipmentRatingBatteryMaterialType)[keyof typeof shipmentRatingBatteryMaterialType];
+export declare const shipmentRatingBatteryPackingType: {
+    readonly BatteryInsideEquipment: "BATTERY_INSIDE_EQUIPMENT";
+    readonly BatteryOnly: "BATTERY_ONLY";
+    readonly BatteryPackagedWithEquipment: "BATTERY_PACKAGED_WITH_EQUIPMENT";
+};
+export type ShipmentRatingBatteryPackingType = (typeof shipmentRatingBatteryPackingType)[keyof typeof shipmentRatingBatteryPackingType];
+export declare const shipmentRatingSignatureOptionType: {
+    readonly Adult: "ADULT";
+    readonly Default: "DEFAULT";
+    readonly Direct: "DIRECT";
+    readonly Indirect: "INDIRECT";
+};
+export type ShipmentRatingSignatureOptionType = (typeof shipmentRatingSignatureOptionType)[keyof typeof shipmentRatingSignatureOptionType];
+export type ShipmentRatingSpecialServiceDetail = {
+    batteryDetail?: InputMaybe<ShipmentRatingBatteryDetail>;
+    serviceTypes: Array<ShipmentRatingSpecialServiceType>;
+    signatureOptionType?: InputMaybe<ShipmentRatingSignatureOptionType>;
+};
+export declare const shipmentRatingSpecialServiceType: {
+    readonly Alcohol: "ALCOHOL";
+    readonly Battery: "BATTERY";
+    readonly CutFlowers: "CUT_FLOWERS";
+    readonly DangerousGoods: "DANGEROUS_GOODS";
+    readonly DryIce: "DRY_ICE";
+    readonly SaturdayDelivery: "SATURDAY_DELIVERY";
+    readonly SignatureOption: "SIGNATURE_OPTION";
+    readonly SundayDelivery: "SUNDAY_DELIVERY";
+};
+export type ShipmentRatingSpecialServiceType = (typeof shipmentRatingSpecialServiceType)[keyof typeof shipmentRatingSpecialServiceType];
 export declare const shipmentSpecialService: {
     readonly Consolidation: "CONSOLIDATION";
     readonly CutFlowers: "CUT_FLOWERS";
@@ -2067,6 +2149,7 @@ export type TaxIdType = (typeof taxIdType)[keyof typeof taxIdType];
 export declare const taxMethodType: {
     readonly Consignment: "CONSIGNMENT";
     readonly Default: "DEFAULT";
+    readonly Domestic: "DOMESTIC";
 };
 export type TaxMethodType = (typeof taxMethodType)[keyof typeof taxMethodType];
 export declare const tokenTypeCategory: {
@@ -2163,6 +2246,19 @@ export declare const wcoVersion: {
     readonly Wco_2072: "WCO_2072";
 };
 export type WcoVersion = (typeof wcoVersion)[keyof typeof wcoVersion];
+export declare const webhookStatus: {
+    readonly Disabled: "DISABLED";
+    readonly Enabled: "ENABLED";
+};
+export type WebhookStatus = (typeof webhookStatus)[keyof typeof webhookStatus];
+export declare const webhookType: {
+    readonly OrderCanceled: "ORDER_CANCELED";
+    readonly OrderCreated: "ORDER_CREATED";
+    readonly OrderStatusChanged: "ORDER_STATUS_CHANGED";
+    readonly ShipmentCanceled: "SHIPMENT_CANCELED";
+    readonly ShipmentCreated: "SHIPMENT_CREATED";
+};
+export type WebhookType = (typeof webhookType)[keyof typeof webhookType];
 export declare const weightUnitCode: {
     readonly Gram: "GRAM";
     readonly Kilogram: "KILOGRAM";
@@ -2788,6 +2884,7 @@ export type AppearanceSettingFragment = {
 export type OnlineStoreSettingsQuery = {
     onlineStoreSettings: {
         allowedDomains: Array<string>;
+        url: string;
     };
 };
 export type GetOrderQuery = {