@liquidcommerce/elements-sdk 2.7.0 → 2.7.2

package/dist/types/auto-initialize/shared-utils.d.ts

@@ -1,7 +1,12 @@
 import type { IInjectCheckoutParams, IInjectedComponent, ILiquidCommerceElementsDevelopmentConfig } from '@/interfaces/core.interface';
 export declare const SHARED_ATTR: {
     readonly SCRIPT: {
+        readonly MAIN: "data-liquid-commerce-elements";
+        readonly TOKEN: "data-token";
+        readonly ENV: "data-env";
+        readonly DEBUG_MODE: "data-debug-mode";
         readonly CHECKOUT_PARAM: "data-checkout-param";
+        readonly CHECKOUT_URL: "data-checkout-url";
     };
     readonly ELEMENT: {
         readonly CHECKOUT: "data-lce-checkout";

package/dist/types/constants/core.constant.d.ts

@@ -48,7 +48,3 @@ export declare const Z_INDEX: {
     readonly MODAL: 2147483640;
 };
 export declare const DESKTOP_BREAKPOINT = 1024;
-export declare const DISPLAY_MODE: {
-    MODAL: string;
-    DRAWER: string;
-};

package/dist/types/core/base-component.service.d.ts

@@ -7,6 +7,7 @@ import { TelemetryService } from '@/core/telemetry/telemetry.service';
 import type { ComponentType } from '@/enums';
 import type { ConfigsKeyType, ConfigsType } from '@/interfaces/configs';
 import { ThemeProviderService } from '@/modules/theme-provider/theme-provider.service';
+import { SafeHTMLElement } from '@/utils/dom-compat';
 import { CommandService } from './command/command.service';
 export interface IBaseComponentConfig {
     type: ComponentType;
@@ -25,7 +26,7 @@ export interface IOnStoreChanged {
     value: any;
     oldValue: any;
 }
-export declare abstract class BaseComponent<TParams = Record<string, any>, TConfig = ConfigsType> extends HTMLElement {
+export declare abstract class BaseComponent<TParams = Record<string, any>, TConfig = ConfigsType> extends SafeHTMLElement {
     protected readonly store: StoreService;
     protected readonly commands: CommandService;
     protected readonly themeProvider: ThemeProviderService;

package/dist/types/core/pubsub/interfaces/checkout.interface.d.ts

@@ -1,5 +1,6 @@
 import type { ICheckoutAmounts, ICheckoutItem } from '@/interfaces/api/checkout.interface';
 export interface IBaseCheckoutEventData {
+    token: string;
     cartId: string;
     isGift: boolean;
     billingSameAsShipping: boolean;

package/dist/types/enums/core.enum.d.ts

@@ -100,6 +100,7 @@ export declare const COMPONENT_TYPE: {
     readonly PRODUCT_LIST_CARD_LOADING: "product-list-card-loading";
     readonly PRODUCT_LIST_RETAILERS: "product-list-retailers";
     readonly PRODUCT_LIST_ENGRAVING_FORM: "product-list-engraving-form";
+    readonly PRODUCT_LIST_PRODUCT_PRE_CART: "product-list-product-pre-cart";
     readonly CART: "cart";
     readonly CART_RETAILER: "cart-retailer";
     readonly CART_ITEM: "cart-item";
@@ -172,3 +173,13 @@ export declare const CHECKOUT_EVENT_LEVEL: {
     readonly ERROR: "error";
 };
 export type CheckoutEventLevel = (typeof CHECKOUT_EVENT_LEVEL)[keyof typeof CHECKOUT_EVENT_LEVEL];
+export declare const DISPLAY_MODE: {
+    readonly MODAL: "modal";
+    readonly DRAWER: "drawer";
+};
+export type DisplayModeType = (typeof DISPLAY_MODE)[keyof typeof DISPLAY_MODE];
+export declare const NAVIGATION_SOURCE: {
+    readonly PRODUCT_CARD: "productCard";
+    readonly ADD_TO_CART_DRAWER: "addToCartDrawer";
+};
+export type NavigationSourceType = (typeof NAVIGATION_SOURCE)[keyof typeof NAVIGATION_SOURCE];

package/dist/types/interfaces/configs/product-list.interface.d.ts

@@ -1,10 +1,10 @@
+import type { DisplayModeType } from 'enums';
 import type { DeepPartial } from '@/interfaces/core.interface';
 export type ProductListCardStyle = 'card' | 'ghost';
 export type ProductListCardCornerRadius = 'rounded' | 'sharp';
 export interface IProductListTheme {
     backgroundColor: string;
 }
-export type IDisplayMode = 'modal' | 'drawer';
 export interface IProductListLayout {
     productCard: {
         style: ProductListCardStyle;
@@ -19,7 +19,7 @@ export interface IProductListLayout {
         showCollections: boolean;
         enablePersonalization: boolean;
     };
-    displayMode: IDisplayMode;
+    displayMode: DisplayModeType;
 }
 export interface IProductListComponent {
     theme: IProductListTheme;

package/dist/types/interfaces/core.interface.d.ts

@@ -92,6 +92,10 @@ export interface IInjectCheckoutParams {
     checkoutId?: string;
     hideHeader?: boolean;
 }
+export interface IInjectCheckoutBuilderParams extends IInjectCheckoutParams {
+    simulatePresale?: boolean;
+    presaleExpiresInMinutes?: number;
+}
 export interface ILiquidCommerceElementsUIMethod {
     cartButton(containerId: string, showItemsCount?: boolean): void;
     floatingCartButton(showItemsCount?: boolean): void;
@@ -116,10 +120,7 @@ export interface ILiquidCommerceElementsBuilderClient {
     injectProductElement(params: IInjectProductElement[]): Promise<IInjectedComponent[]>;
     injectAddressElement(containerId: string, options?: IAddressOptions): Promise<IInjectedComponent | null>;
     injectCartElement(containerId: string): Promise<IInjectedComponent | null>;
-    injectCheckoutElement(containerId: string, options?: {
-        simulatePresale?: boolean;
-        presaleExpiresInMinutes?: number;
-    }): Promise<IInjectedComponent | null>;
+    injectCheckoutElement(params: IInjectCheckoutBuilderParams): Promise<IInjectedComponent | null>;
     injectProductList(params: IInjectProductListParams): Promise<void>;
     actions: ILiquidCommerceElementsActions;
 }

package/dist/types/modules/address/address-input.component.d.ts

@@ -1,3 +1,7 @@
+import type { IProductListProduct } from 'core/store/interfaces/product-list.interface';
+import { type NavigationSourceType } from 'enums';
+import type { IFulfillment } from 'interfaces/api/product.interface';
+import type { IProductListComponent } from 'interfaces/configs';
 import { BaseComponent } from '@/core/base-component.service';
 import type { IAddressComponent } from '@/interfaces/configs';
 import type { IAddressOptions } from './address.interface';
@@ -5,6 +9,12 @@ export interface IAddressInputComponentParams {
     productId?: string;
     isIndependentComponent?: boolean;
     options?: IAddressOptions;
+    navigationSource?: NavigationSourceType;
+    product?: IProductListProduct;
+    shippingFulfillment?: IFulfillment | null;
+    onDemandFulfillment?: IFulfillment | null;
+    showCollections?: boolean;
+    config?: IProductListComponent;
 }
 export declare class AddressInputComponent extends BaseComponent<IAddressInputComponentParams, IAddressComponent> {
     private suggestions;
@@ -24,6 +34,7 @@ export declare class AddressInputComponent extends BaseComponent<IAddressInputCo
     private closeDrawer;
     private handleCancel;
     private handleCheckAvailability;
+    private reopenAddToCartDrawer;
     private handleSuggestionClick;
     private handleDocumentClick;
     private searchAddresses;

package/dist/types/modules/checkout/components/checkout-stripe-form.component.d.ts

@@ -1,3 +1,4 @@
+import { SafeHTMLElement } from '@/utils/dom-compat';
 declare global {
     interface Window {
         Stripe: any;
@@ -23,7 +24,7 @@ export interface IStripeFormStatus {
     hasError: boolean;
     errorMessage: string | null;
 }
-export declare class CheckoutStripeFormComponent extends HTMLElement {
+export declare class CheckoutStripeFormComponent extends SafeHTMLElement {
     private _initialized;
     private _stripe;
     private _stripeElements;

package/dist/types/modules/product-list/components/card-components/index.d.ts

@@ -1,4 +1,7 @@
+export * from './product-badge';
 export * from './product-button';
 export * from './product-fulfillments';
+export * from './product-price-and-personalization';
 export * from './product-quantity-selector';
 export * from './product-sizes-list';
+export * from './product-title';

package/dist/types/modules/product-list/components/card-components/product-badge.d.ts

@@ -0,0 +1,8 @@
+export interface IBadgesParams {
+    badges: Array<{
+        text: string;
+        className?: string;
+    }>;
+    separatorText?: string;
+}
+export declare const createProductBadges: ({ badges, separatorText }: IBadgesParams) => HTMLElement;

package/dist/types/modules/product-list/components/card-components/product-fulfillments.d.ts

@@ -1,10 +1,12 @@
 import type { IProductFulfillmentStore } from 'core/store/interfaces/product.interface';
+import { type NavigationSourceType } from 'enums';
 export interface IFulfillmentSectionParams {
     shippingVariants: Record<string, IProductFulfillmentStore>;
     onDemandVariants: Record<string, IProductFulfillmentStore>;
     enableShippingFulfillment: boolean;
     enableOnDemandFulfillment: boolean;
     productId: string;
+    navigationSource?: NavigationSourceType;
     onDeliveryOptionsClick: (productId: string) => void | Promise<void>;
 }
 export declare const createFulfillmentSection: (params: IFulfillmentSectionParams) => HTMLElement;

package/dist/types/modules/product-list/components/card-components/product-price-and-personalization.d.ts

@@ -0,0 +1,13 @@
+export interface IPricePersonalizationSectionParams {
+    price: number;
+    showPrice: boolean;
+    hasPersonalization: boolean;
+    showPersonalization: boolean;
+    hasAddress: boolean;
+    wrapperClassName?: string;
+    priceClassName?: string;
+    personalizeClassName?: string;
+    personalizeText?: string;
+    onPersonalizeClick?: () => void;
+}
+export declare const createPricePersonalizationSection: ({ price, showPrice, hasPersonalization, showPersonalization, hasAddress, wrapperClassName, priceClassName, personalizeClassName, personalizeText, onPersonalizeClick, }: IPricePersonalizationSectionParams) => HTMLElement | null;

package/dist/types/modules/product-list/components/card-components/product-title.d.ts

@@ -0,0 +1,6 @@
+export interface ITitleSectionParams {
+    name: string;
+    productUrl?: string | null;
+    onTitleClick?: () => void;
+}
+export declare const createProductTitle: ({ name, productUrl, onTitleClick }: ITitleSectionParams) => HTMLElement;

package/dist/types/modules/product-list/components/index.d.ts

@@ -4,5 +4,6 @@ export * from './filter-components/product-list-apply-filter-button';
 export * from './product-list-card-loading.component';
 export * from './product-list-engraving.component';
 export * from './product-list-filters.component';
+export * from './product-list-product-pre-cart.component';
 export * from './product-list-retailers.component';
 export * from './product-list-search.component';

package/dist/types/modules/product-list/components/product-list-engraving.component.d.ts

@@ -1,6 +1,10 @@
 import { BaseComponent } from 'core/base-component.service';
 import type { IEngravingFormComponentParams } from 'modules/ui-components/engraving';
 export declare class ProductListEngravingComponent extends BaseComponent<IEngravingFormComponentParams> {
-    protected template(): HTMLElement;
+    protected template(): HTMLElement[];
     private createHeader;
+    private handleClose;
+    private handleEngravingComplete;
+    private handleEngravingCancel;
+    private reopenAddToCartDrawer;
 }

package/dist/types/modules/product-list/components/product-list-product-pre-cart.component.d.ts

@@ -0,0 +1,28 @@
+import { BaseComponent } from 'core/base-component.service';
+import type { IProductListProduct } from 'core/store/interfaces/product-list.interface';
+import { type DisplayModeType } from 'enums';
+import type { IFulfillment } from 'interfaces/api/product.interface';
+import type { IProductListComponent } from 'interfaces/configs';
+export interface IProductListProductPreCartComponentParams {
+    displayMode: DisplayModeType;
+    product: IProductListProduct;
+    shippingFulfillment: IFulfillment | null;
+    onDemandFulfillment: IFulfillment | null;
+    config: IProductListComponent;
+}
+export declare class ProductListProductPreCartComponent extends BaseComponent<IProductListProductPreCartComponentParams, IProductListComponent> {
+    private selectedSize;
+    constructor();
+    protected template(): HTMLElement[];
+    private createCartHeader;
+    private createImageSection;
+    private createPricePersonalizationSection;
+    private createDeliversToSection;
+    private createSizesSection;
+    private handleDeliveryOptionsClick;
+    private createFulfillmentSectionWrapper;
+    createFulfillmentTextSection(selectedFulfillmentType: string, selectedFulfillmentRetailerName: string): HTMLElement;
+    private createAddToCartSection;
+    private handleAddToCart;
+    private createExpectationArrivalInfoSection;
+}

package/dist/types/modules/product-list/components/product-list-retailers.component.d.ts

@@ -1,9 +1,16 @@
-import type { IDisplayMode, IProductListComponent } from 'interfaces/configs';
+import type { IProductListProduct } from 'core/store/interfaces/product-list.interface';
+import { type DisplayModeType, type NavigationSourceType } from 'enums';
+import type { IFulfillment } from 'interfaces/api/product.interface';
+import type { IProductListComponent } from 'interfaces/configs';
 import { BaseComponent } from '@/core/base-component.service';
 export interface IProductListRetailersParams {
+    product?: IProductListProduct;
     productId: string;
     config?: IProductListComponent;
-    displayMode?: IDisplayMode;
+    displayMode?: DisplayModeType;
+    navigationSource?: NavigationSourceType;
+    shippingFulfillment?: IFulfillment | null;
+    onDemandFulfillment?: IFulfillment | null;
 }
 export declare class ProductListRetailersComponent extends BaseComponent<IProductListRetailersParams, IProductListComponent> {
     get hostClasses(): string[];
@@ -13,6 +20,7 @@ export declare class ProductListRetailersComponent extends BaseComponent<IProduc
     private extractFulfillments;
     private onFulfillmentTabClick;
     private onRetailerCardClick;
+    private reopenAddToCartDrawer;
     private createHeader;
     private createNoAvailabilityMessage;
 }

package/dist/types/modules/product-list/product-list-card.component.d.ts

@@ -16,16 +16,11 @@ export declare class ProductListCardComponent extends BaseComponent<IProductList
     protected connected(): Promise<void>;
     disconnected(): void;
     private reRender;
-    private getAvailabilityData;
-    private isPresaleActive;
-    private handleAddToCart;
     protected template(): HTMLElement[];
     private generateProductUrl;
     private createVariantStandard;
     private createImageSection;
     private createContentSection;
-    private createBadgesSection;
-    private createTitleSection;
     private createPricePersonalizationSection;
     private createSizesSection;
     private handleDeliveryOptionsClick;

package/dist/types/modules/product-list/product-list.commands.d.ts

@@ -1,12 +1,13 @@
 import type { IModalContentConfig } from 'core/store/interfaces/core.interface';
+import type { IProductSizeStore } from 'core/store/interfaces/product.interface';
 import type { IProductListProduct, IProductListStore } from 'core/store/interfaces/product-list.interface';
 import { BaseCommand } from '@/core/command/base-command.service';
 import { type FulfillmentType } from '@/enums';
-import type { IProduct, IRetailer } from '@/interfaces/api/product.interface';
+import type { IFulfillment, IProduct, IProductSizeAttributes, IRetailer } from '@/interfaces/api/product.interface';
 import type { IFilterSchema, INavigationResponse, IProductSearchParams, IProductSearchResponse } from '@/interfaces/api/product-list.interface';
 import type { ProductListFilterType } from '@/interfaces/core.interface';
 import { type AddItemParams } from '@/modules/cart/cart.commands';
-import type { IExtendedFilterSchema, IPagination, IProductListFilters } from './product-list.interface';
+import type { IExtendedFilterSchema, IPagination, IProductAvailabilityData, IProductListFilters } from './product-list.interface';
 type StateListener = (state: IProductListStore) => void;
 export declare class ProductListCommands extends BaseCommand {
     private readonly uiCommands;
@@ -63,5 +64,13 @@ export declare class ProductListCommands extends BaseCommand {
     selectSize: (productId: string, sizeId: string) => Promise<void>;
     private getFulfillmentForSize;
     updateQuantity: (productId: string, quantity: number) => void;
+    getAvailabilityData(params: {
+        product: IProductListProduct;
+        size?: IProductSizeStore;
+        shippingFulfillment?: IFulfillment | null;
+        onDemandFulfillment?: IFulfillment | null;
+        state?: string;
+    }): IProductAvailabilityData;
+    isPresaleActive(sizeAttributes: IProductSizeAttributes): boolean;
 }
 export {};

package/dist/types/modules/product-list/product-list.interface.d.ts

@@ -70,6 +70,7 @@ export interface IProductAvailabilityData {
     state: string;
     isPresale: boolean;
     isPresaleActive: boolean;
+    presaleShipBy: string | null;
 }
 export interface IProductVariantParams {
     image: string;

package/dist/types/modules/ui-components/engraving/engraving-form.component.d.ts

@@ -1,5 +1,8 @@
+import type { IProductListProduct } from 'core/store/interfaces/product-list.interface';
+import type { IFulfillment } from 'interfaces/api/product.interface';
 import { BaseComponent } from '@/core/base-component.service';
-import type { IDisplayMode } from '@/interfaces/configs';
+import { type DisplayModeType, type NavigationSourceType } from '@/enums';
+import type { IProductListComponent } from '@/interfaces/configs';
 export interface IEngravingFormComponentParams {
     identifier: string;
     context: 'product' | 'cart' | 'product-list';
@@ -8,7 +11,13 @@ export interface IEngravingFormComponentParams {
     maxCharsPerLine: number;
     fee: number;
     location?: string;
-    displayMode?: IDisplayMode;
+    displayMode?: DisplayModeType;
+    navigationSource?: NavigationSourceType;
+    product?: IProductListProduct;
+    shippingFulfillment?: IFulfillment | null;
+    onDemandFulfillment?: IFulfillment | null;
+    showCollections?: boolean;
+    config?: IProductListComponent;
 }
 export declare class EngravingFormComponent extends BaseComponent<IEngravingFormComponentParams, null> {
     get hostClasses(): string[];

package/dist/types/modules/ui-components/lce-element/lce-element.component.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentType } from '@/enums';
-export declare class LceElementComponent extends HTMLElement {
+import { SafeHTMLElement } from '@/utils/dom-compat';
+export declare class LceElementComponent extends SafeHTMLElement {
     private _initialized;
     protected _container: ShadowRoot | null;
     private _wrappedComponentRerender;

package/dist/types/utils/dom-compat.d.ts

@@ -0,0 +1,2 @@
+export declare const SafeHTMLElement: typeof HTMLElement;
+export declare function isHTMLElement(value: unknown): value is HTMLElement;