@liquidcommerce/elements-sdk 2.2.0-beta.30 → 2.2.0-beta.32

package/dist/types/core/client/client-action.service.d.ts

@@ -32,6 +32,7 @@ export interface ICheckoutActions {
     closeCheckout: () => void;
     toggleCheckout: () => void;
     addProduct: (params: IAddProductParams[], openCheckout?: boolean) => Promise<void>;
+    addPresaleProduct: (params: IAddProductParams) => Promise<void>;
     applyPromoCode: (promoCode: string) => Promise<void>;
     removePromoCode: () => Promise<void>;
     applyGiftCard: (code: string) => Promise<void>;

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

@@ -66,10 +66,12 @@ export interface ICheckoutGiftCardFailedEventData {
 export interface ICheckoutProductAddEventData {
     itemsAdded: number;
     identifiers: string[];
+    isPresale?: boolean;
 }
 export interface ICheckoutProductAddFailedEventData {
     identifiers: string[];
     error: string;
+    isPresale?: boolean;
 }
 export interface ICheckoutItemEventData {
     liquidId: string;

package/dist/types/elements-client-helper.d.ts

@@ -1 +1,4 @@
+import { type ComponentType } from '@/enums';
 export declare function deepMergeConfigs<T extends Record<string, any>>(target: T, source: Partial<T>): T;
+export declare const layoutFieldToComponentTypes: Map<string, ComponentType[]>;
+export declare function getComponentTypesForLayoutFields(parentPath: string, layoutFields: Record<string, any>): ComponentType[];

package/dist/types/interfaces/configs/checkout.interface.d.ts

@@ -18,6 +18,7 @@ export interface ICheckoutLayout {
     drawerHeaderText: string;
     placeOrderButtonText: string;
     placeOrderButtonShowRequiredFields: boolean;
+    checkoutCompleted: ICheckoutCompleted;
 }
 export interface ICheckoutCompleted {
     customLogo: string;
@@ -25,7 +26,6 @@ export interface ICheckoutCompleted {
 }
 export interface ICheckoutTheme {
     backgroundColor: string;
-    checkoutCompleted: ICheckoutCompleted;
 }
 export interface ICheckoutComponent {
     theme: ICheckoutTheme;

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

@@ -34,17 +34,22 @@ export interface IBuilderInjectElementParams {
     containerId: string;
     [key: string]: any;
 }
+export interface IInjectedComponent {
+    getType(): ComponentType;
+    getElement(): HTMLElement;
+    rerender(): void;
+}
 export interface ILiquidCommerceElementsBuilderMethod {
     updateComponentGlobalConfigs(configs: UpdateComponentGlobalConfigs): Promise<void>;
     updateProductComponent(configs: UpdateProductComponent): Promise<void>;
     updateAddressComponent(configs: UpdateAddressComponent): void;
     updateCartComponent(configs: UpdateCartComponent): void;
     updateCheckoutComponent(configs: UpdateCheckoutComponent): void;
-    injectElement(params: IBuilderInjectElementParams): Promise<void>;
-    injectProductElement(params: IInjectProductElement[]): Promise<void>;
-    injectAddressElement(containerId: string, options?: IAddressOptions): Promise<void>;
-    injectCartElement(containerId: string): Promise<void>;
-    injectCheckoutElement(containerId: string): Promise<void>;
+    injectElement(params: IBuilderInjectElementParams): Promise<IInjectedComponent | null>;
+    injectProductElement(params: IInjectProductElement[]): Promise<IInjectedComponent[]>;
+    injectAddressElement(containerId: string, options?: IAddressOptions): Promise<IInjectedComponent | null>;
+    injectCartElement(containerId: string): Promise<IInjectedComponent | null>;
+    injectCheckoutElement(containerId: string): Promise<IInjectedComponent | null>;
 }
 export interface IProcessInjectElementParams {
     type: ComponentType;
@@ -66,11 +71,12 @@ export interface ILiquidCommerceElementsActions {
 }
 export interface ILiquidCommerceElementsClient {
     builder: ILiquidCommerceElementsBuilderMethod;
-    injectProductElement(params: IInjectProductElement[]): Promise<void>;
-    injectAddressElement(containerId: string, options?: IAddressOptions): Promise<void>;
-    injectCartElement(containerId: string): Promise<void>;
-    injectCheckoutElement(containerId: string): Promise<void>;
+    injectProductElement(params: IInjectProductElement[]): Promise<IInjectedComponent[]>;
+    injectAddressElement(containerId: string, options?: IAddressOptions): Promise<IInjectedComponent | null>;
+    injectCartElement(containerId: string): Promise<IInjectedComponent | null>;
+    injectCheckoutElement(containerId: string): Promise<IInjectedComponent | null>;
     ui: ILiquidCommerceElementsUIMethod;
     actions: ILiquidCommerceElementsActions;
+    getInjectedComponents(): Map<string, IInjectedComponent>;
 }
 export type LiquidCommerceElementsClientConstructor = new (clientConfigs: IClientConfigs) => ILiquidCommerceElementsClient;

package/dist/types/modules/theme-provider/services/font-manager.service.d.ts

@@ -2,6 +2,7 @@ import type { IFontFamily } from '@/interfaces/configs';
 export declare class FontManagerService {
     private googleFontsUrl;
     private defaultFontFamilies;
+    private readonly fontsLinkAttribute;
     loadGoogleFonts(fonts: IFontFamily[], globalDisplay?: string): void;
     updateGoogleFonts(fonts: IFontFamily[], globalDisplay?: string): void;
     private injectGoogleFontsResourceHints;

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

@@ -2,8 +2,10 @@ import type { ComponentType } from '@/enums';
 export declare class LceElementComponent extends HTMLElement {
     private _initialized;
     protected _container: ShadowRoot | null;
+    private _wrappedComponentRerender;
     constructor();
     initialize(contentType: ComponentType, contentElement: HTMLElement): void;
+    rerender(context?: string): void;
     private applyBasicStyles;
     private isCSSStyleSheetSupported;
     private applyThemeStyles;

package/docs/ACTIONS.md

@@ -530,7 +530,43 @@ window.addEventListener('lce:actions.checkout_product_add_failed', function(even
 });
 ```
 
-**Real Business Use**: Perfect for "Buy Now" buttons, one-click purchasing, express checkout flows, or any scenario where you want to skip the cart and go straight to checkout.
+#### Add Presale Product to Checkout
+```javascript
+// Add a single presale product directly to checkout (bypasses cart, always opens checkout drawer)
+// The method automatically validates product availability and fulfillment options
+await actions.checkout.addPresaleProduct({
+  identifier: 'presale-product-123',
+  fulfillmentType: 'shipping',
+  quantity: 1
+});
+
+// Listen for success/failure feedback (same events as regular addProduct)
+window.addEventListener('lce:actions.checkout_product_add_success', function(event) {
+  const { itemsAdded, identifiers, isPresale } = event.detail.data;
+  if (isPresale) {
+    console.log(`✅ Added ${itemsAdded} presale product to checkout:`, identifiers);
+    showSuccessMessage('Presale item ready for checkout!');
+  }
+});
+
+window.addEventListener('lce:actions.checkout_product_add_failed', function(event) {
+  const { identifiers, error, isPresale } = event.detail.data;
+  if (isPresale) {
+    console.log(`❌ Failed to add presale product to checkout:`, identifiers, error);
+    showErrorMessage('Could not proceed with presale checkout. Please try again.');
+  }
+});
+```
+
+**Key Features:**
+- **Product Availability Validation**: Automatically fetches and validates product data
+- **Fulfillment Type Support**: Checks if the requested fulfillment type is available
+- **Presale Verification**: Ensures the product is actually a presale item
+- **Always Opens Checkout**: Automatically opens checkout drawer after adding presale product
+- **Address Requirement**: Opens address input if location is not available
+- **Error Handling**: Comprehensive error handling with detailed feedback
+
+**Real Business Use**: Perfect for "Buy Now" buttons, one-click purchasing, express checkout flows, or any scenario where you want to skip the cart and go straight to checkout. The `addPresaleProduct` method is specifically designed for presale items that need to bypass the regular cart flow and go directly to checkout.
 
 #### Pre-fill Customer Information
 ```javascript

package/docs/TROUBLESHOOTING.md

@@ -102,9 +102,26 @@ console.log('Container:', container);  // Should not be null
 // 2. Wait for DOM
 window.addEventListener('DOMContentLoaded', async () => {
   const client = await Elements('YOUR_API_KEY', { env: 'production' });
-  await client.injectProductElement([
+  const components = await client.injectProductElement([
     { containerId: 'product-container', identifier: 'product-123' }
   ]);
+  
+  // Check if injection was successful
+  if (components.length > 0) {
+    console.log('Product component injected successfully');
+    // components[0].rerender() - Rerender if needed
+    // components[0].getElement() - Get container element
+    // components[0].getType() - Get component type
+  } else {
+    console.log('Product injection failed');
+  }
+  
+  // Debug: Check all injected components
+  const allComponents = client.getInjectedComponents();
+  console.log('All injected components:', allComponents);
+  allComponents.forEach((component, containerId) => {
+    console.log(`Container: ${containerId}, Type: ${component.getType()}`);
+  });
 });
 
 // 3. Monitor product loading

package/package.json

@@ -3,7 +3,7 @@
   "description": "LiquidCommerce Elements SDK",
   "license": "UNLICENSED",
   "author": "LiquidCommerce Team",
-  "version": "2.2.0-beta.30",
+  "version": "2.2.0-beta.32",
   "homepage": "https://docs.liquidcommerce.co/elements-sdk",
   "repository": {
     "type": "git",