@wix/headless-stores 0.0.10 → 0.0.11

package/cjs/dist/react/PayNow.d.ts

@@ -1,4 +1,3 @@
-export type PayNowRedirectToCheckout = () => void;
 /**
  * Props passed to the render function of the PayNow component
  */
@@ -6,17 +5,16 @@ export interface PayNowRenderProps {
     /** Whether the buy now operation is currently loading */
     isLoading: boolean;
     /** Function to redirect the user to the checkout page */
-    redirectToCheckout: PayNowRedirectToCheckout;
+    redirectToCheckout: () => void;
     /** The error message if the buy now operation fails */
     error: string | null;
 }
-export type PayNowChildren = (props: PayNowRenderProps) => React.ReactNode;
 /**
  * Props for the PayNow component
  */
 export interface PayNowProps {
     /** Render function that receives buy now state and actions */
-    children: PayNowChildren;
+    children: (props: PayNowRenderProps) => React.ReactNode;
 }
 /**
  * A headless component that provides pay now functionality using the render props pattern.

package/cjs/dist/react/Product.d.ts

@@ -1,3 +1,4 @@
+import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
 /**
  * Props for ProductName headless component
  */
@@ -11,11 +12,11 @@ export interface ProductNameProps {
 export interface ProductNameRenderProps {
     /** Product name */
     name: string;
-    /** Whether product has a name */
-    hasName: boolean;
 }
 /**
  * Headless component for product name display
+ *
+ * @component
  */
 export declare const Name: (props: ProductNameProps) => import("react").ReactNode;
 /**
@@ -30,41 +31,13 @@ export interface ProductDescriptionProps {
  */
 export interface ProductDescriptionRenderProps {
     /** Product description (may contain HTML) */
-    description: string;
-    /** Whether product has a description */
-    hasDescription: boolean;
-    /** Whether description contains HTML */
-    isHtml: boolean;
+    description: NonNullable<V3Product['description']>;
+    /** Product plain description */
+    plainDescription: NonNullable<V3Product['plainDescription']>;
 }
 /**
  * Headless component for product description display
+ *
+ * @component
  */
 export declare const Description: (props: ProductDescriptionProps) => import("react").ReactNode;
-/**
- * Props for ProductDetails headless component
- */
-export interface ProductDetailsProps {
-    /** Render prop function that receives product details data */
-    children: (props: ProductDetailsRenderProps) => React.ReactNode;
-}
-/**
- * Render props for ProductDetails component
- */
-export interface ProductDetailsRenderProps {
-    /** Product SKU */
-    sku: string | null;
-    /** Product weight */
-    weight: string | null;
-    /** Product dimensions (if available) */
-    dimensions: string | null;
-    /** Whether product has SKU */
-    hasSku: boolean;
-    /** Whether product has weight */
-    hasWeight: boolean;
-    /** Whether product has dimensions */
-    hasDimensions: boolean;
-}
-/**
- * Headless component for product details display
- */
-export declare const Details: (props: ProductDetailsProps) => import("react").ReactNode;

package/cjs/dist/react/Product.js

@@ -1,56 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Details = exports.Description = exports.Name = void 0;
+exports.Description = exports.Name = void 0;
 const services_manager_react_1 = require("@wix/services-manager-react");
 const product_service_1 = require("../services/product-service");
-const selected_variant_service_1 = require("../services/selected-variant-service");
 /**
  * Headless component for product name display
+ *
+ * @component
  */
 const Name = (props) => {
     const service = (0, services_manager_react_1.useService)(product_service_1.ProductServiceDefinition);
     const product = service.product.get();
-    const name = product?.name || "";
+    const name = product.name;
     return props.children({
         name,
-        hasName: !!name,
     });
 };
 exports.Name = Name;
 /**
  * Headless component for product description display
+ *
+ * @component
  */
 const Description = (props) => {
     const service = (0, services_manager_react_1.useService)(product_service_1.ProductServiceDefinition);
     const product = service.product.get();
-    // Handle v3 description which can be string or RichContent
-    const rawDescription = product?.description;
-    const description = typeof rawDescription === "string" ? rawDescription : "";
-    const hasDescription = !!description;
-    const isHtml = description.includes("<") && description.includes(">");
+    const descriptionRichContent = product.description;
+    const plainDescription = product.plainDescription;
     return props.children({
-        description,
-        hasDescription,
-        isHtml,
+        description: descriptionRichContent,
+        plainDescription: plainDescription,
     });
 };
 exports.Description = Description;
-/**
- * Headless component for product details display
- */
-const Details = (props) => {
-    const selectedVariantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
-    const selectedVariant = selectedVariantService.currentVariant?.get();
-    let sku = selectedVariant?.sku || null;
-    let weight = selectedVariant?.physicalProperties?.weight?.toString() || null;
-    let dimensions = null;
-    return props.children({
-        sku,
-        weight,
-        dimensions,
-        hasSku: !!sku,
-        hasWeight: !!weight,
-        hasDimensions: false,
-    });
-};
-exports.Details = Details;

package/cjs/dist/react/ProductActions.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Props for Actions headless component
+ */
+export interface ActionsProps {
+    /** Quantity to add (optional) */
+    quantity?: number;
+    /** Render prop function that receives actions data */
+    children: (props: ActionsRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Actions component
+ */
+export interface ActionsRenderProps {
+    /** Function to add product to cart */
+    onAddToCart: () => Promise<void>;
+    /** Function to buy now (clear cart, add product, proceed to checkout) */
+    onBuyNow: () => Promise<void>;
+    /** Function to open cart */
+    onOpenCart: () => void;
+    /** Whether add to cart is available */
+    canAddToCart: boolean;
+    /** Whether add to cart is currently loading */
+    isLoading: boolean;
+    /** Current variant price */
+    price: string;
+    /** Whether variant is in stock */
+    inStock: boolean;
+    /** Whether pre-order is enabled */
+    isPreOrderEnabled: boolean;
+    /** Pre-order message */
+    preOrderMessage: string | null;
+    /** Error message if any */
+    error: string | null;
+    /** Available quantity */
+    availableQuantity: number | null;
+}
+/**
+ * Headless component for product actions (add to cart, buy now)
+ *
+ * @component
+ */
+export declare const Actions: (props: ActionsProps) => import("react").ReactNode;

package/cjs/dist/react/ProductActions.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Actions = void 0;
+const services_manager_react_1 = require("@wix/services-manager-react");
+const selected_variant_service_1 = require("../services/selected-variant-service");
+const product_modifiers_service_1 = require("../services/product-modifiers-service");
+/**
+ * Headless component for product actions (add to cart, buy now)
+ *
+ * @component
+ */
+const Actions = (props) => {
+    const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
+    // const cartService = useService(CurrentCartServiceDefinition) as ServiceAPI<
+    //   typeof CurrentCartServiceDefinition
+    // >;
+    // Try to get modifiers service - it may not exist for all products
+    let modifiersService = null;
+    try {
+        modifiersService = (0, services_manager_react_1.useService)(product_modifiers_service_1.ProductModifiersServiceDefinition);
+    }
+    catch {
+        // Modifiers service not available for this product
+        modifiersService = null;
+    }
+    const price = variantService.currentPrice.get();
+    const inStock = variantService.isInStock.get();
+    const isPreOrderEnabled = variantService.isPreOrderEnabled.get();
+    const preOrderMessage = variantService.preOrderMessage.get();
+    const isLoading = variantService.isLoading.get();
+    const error = variantService.error.get();
+    const availableQuantity = variantService.quantityAvailable.get();
+    const quantity = variantService.selectedQuantity.get();
+    // Check if all required modifiers are filled
+    const areAllRequiredModifiersFilled = modifiersService
+        ? modifiersService.areAllRequiredModifiersFilled()
+        : true; // If no modifiers service, assume no required modifiers
+    const canAddToCart = (inStock || isPreOrderEnabled) &&
+        !isLoading &&
+        areAllRequiredModifiersFilled;
+    const onAddToCart = async () => {
+        // Get modifiers data if available
+        let modifiersData;
+        if (modifiersService) {
+            const selectedModifiers = modifiersService.selectedModifiers.get();
+            if (Object.keys(selectedModifiers).length > 0) {
+                modifiersData = selectedModifiers;
+            }
+        }
+        await variantService.addToCart(quantity, modifiersData);
+    };
+    const onBuyNow = async () => {
+        try {
+            // Clear the cart first
+            // await cartService.clearCart();
+            // Add the product to cart
+            await onAddToCart();
+            // Proceed to checkout
+            // await cartService.proceedToCheckout();
+        }
+        catch (error) {
+            console.error('Buy now failed:', error);
+            throw error;
+        }
+    };
+    const onOpenCart = () => {
+        // cartService.openCart();
+    };
+    return props.children({
+        onAddToCart,
+        onBuyNow,
+        onOpenCart,
+        canAddToCart,
+        isLoading,
+        price,
+        inStock,
+        isPreOrderEnabled,
+        preOrderMessage,
+        error,
+        availableQuantity,
+    });
+};
+exports.Actions = Actions;

package/cjs/dist/react/ProductModifiers.d.ts

@@ -1,4 +1,4 @@
-import { productsV3 } from "@wix/stores";
+import { type ConnectedModifier, type ConnectedModifierChoice } from '@wix/auto_sdk_stores_products-v-3';
 /**
  * Props for Modifiers headless component
  */
@@ -11,7 +11,7 @@ export interface ModifiersProps {
  */
 export interface ModifiersRenderProps {
     /** Array of product modifiers */
-    modifiers: productsV3.ConnectedModifier[];
+    modifiers: ConnectedModifier[];
     /** Whether product has modifiers */
     hasModifiers: boolean;
     /** Currently selected modifier values */
@@ -28,7 +28,7 @@ export declare const Modifiers: (props: ModifiersProps) => import("react").React
  */
 export interface ModifierProps {
     /** Product modifier data */
-    modifier: productsV3.ConnectedModifier;
+    modifier: ConnectedModifier;
     /** Render prop function that receives modifier data */
     children: (props: ModifierRenderProps) => React.ReactNode;
 }
@@ -43,7 +43,7 @@ export interface ModifierRenderProps {
     /** Whether this modifier is mandatory */
     mandatory: boolean;
     /** Array of choices for this modifier (for choice-based modifiers) */
-    choices: productsV3.ConnectedModifierChoice[];
+    choices: ConnectedModifierChoice[];
     /** Currently selected value for this modifier */
     selectedValue: any;
     /** Whether this modifier has choices */
@@ -57,6 +57,8 @@ export interface ModifierRenderProps {
 }
 /**
  * Headless component for a specific product modifier
+ *
+ * @component
  */
 export declare const Modifier: (props: ModifierProps) => import("react").ReactNode;
 /**
@@ -64,9 +66,9 @@ export declare const Modifier: (props: ModifierProps) => import("react").ReactNo
  */
 export interface ChoiceProps {
     /** Product modifier data */
-    modifier: productsV3.ConnectedModifier;
+    modifier: ConnectedModifier;
     /** Choice data */
-    choice: productsV3.ConnectedModifierChoice;
+    choice: ConnectedModifierChoice;
     /** Render prop function that receives choice data */
     children: (props: ChoiceRenderProps) => React.ReactNode;
 }
@@ -91,6 +93,8 @@ export interface ChoiceRenderProps {
 }
 /**
  * Headless component for individual modifier choice selection
+ *
+ * @component
  */
 export declare const Choice: (props: ChoiceProps) => import("react").ReactNode;
 /**
@@ -98,7 +102,7 @@ export declare const Choice: (props: ChoiceProps) => import("react").ReactNode;
  */
 export interface FreeTextProps {
     /** Product modifier data */
-    modifier: productsV3.ConnectedModifier;
+    modifier: ConnectedModifier;
     /** Render prop function that receives free text data */
     children: (props: FreeTextRenderProps) => React.ReactNode;
 }
@@ -125,6 +129,8 @@ export interface FreeTextRenderProps {
 }
 /**
  * Headless component for free text modifier input
+ *
+ * @component
  */
 export declare const FreeText: (props: FreeTextProps) => import("react").ReactNode;
 /**
@@ -132,7 +138,7 @@ export declare const FreeText: (props: FreeTextProps) => import("react").ReactNo
  */
 export interface ToggleFreeTextProps {
     /** Product modifier data */
-    modifier: productsV3.ConnectedModifier;
+    modifier: ConnectedModifier;
     /** Render prop function that receives toggle data */
     children: (props: ToggleFreeTextRenderProps) => React.ReactNode;
 }
@@ -152,5 +158,7 @@ export interface ToggleFreeTextRenderProps {
 /**
  * Headless component for toggling free text modifier input
  * Used for optional free text modifiers where a checkbox shows/hides the input
+ *
+ * @component
  */
 export declare const ToggleFreeText: (props: ToggleFreeTextProps) => import("react").ReactNode;

package/cjs/dist/react/ProductModifiers.js

@@ -4,6 +4,7 @@ exports.ToggleFreeText = exports.FreeText = exports.Choice = exports.Modifier =
 const react_1 = require("react");
 const services_manager_react_1 = require("@wix/services-manager-react");
 const product_modifiers_service_1 = require("../services/product-modifiers-service");
+const auto_sdk_stores_products_v_3_1 = require("@wix/auto_sdk_stores_products-v-3");
 /**
  * Custom hook to safely get the modifiers service
  */
@@ -42,16 +43,18 @@ const Modifiers = (props) => {
 exports.Modifiers = Modifiers;
 /**
  * Headless component for a specific product modifier
+ *
+ * @component
  */
 const Modifier = (props) => {
     const modifiersService = useModifiersService();
     const { modifier } = props;
-    const name = modifier.name || "";
+    const name = modifier.name || '';
     const type = modifier.modifierRenderType;
     const mandatory = modifier.mandatory || false;
     const choices = modifier.choicesSettings?.choices || [];
     const hasChoices = choices.length > 0;
-    const isFreeText = type === "FREE_TEXT";
+    const isFreeText = type === auto_sdk_stores_products_v_3_1.ModifierRenderType.FREE_TEXT;
     const freeTextSettings = modifier.freeTextSettings;
     const maxChars = freeTextSettings?.maxLength;
     const placeholder = freeTextSettings?.placeholder;
@@ -71,17 +74,19 @@ const Modifier = (props) => {
 exports.Modifier = Modifier;
 /**
  * Headless component for individual modifier choice selection
+ *
+ * @component
  */
 const Choice = (props) => {
     const modifiersService = useModifiersService();
     const { modifier, choice } = props;
-    const modifierName = modifier.name || "";
+    const modifierName = modifier.name || '';
     const renderType = modifier.modifierRenderType;
     // For TEXT_CHOICES, use choice.key; for SWATCH_CHOICES, use choice.name
-    const choiceValue = renderType === "TEXT_CHOICES"
-        ? (choice.key || choice.name || "")
-        : (choice.name || "");
-    const value = choice.name || ""; // Display name is always choice.name
+    const choiceValue = renderType === auto_sdk_stores_products_v_3_1.ModifierRenderType.TEXT_CHOICES
+        ? choice.key || choice.name || ''
+        : choice.name || '';
+    const value = choice.name || ''; // Display name is always choice.name
     const description = choice.description;
     const colorCode = choice.colorCode;
     const selectedValue = modifiersService?.getModifierValue(modifierName);
@@ -102,17 +107,19 @@ const Choice = (props) => {
 exports.Choice = Choice;
 /**
  * Headless component for free text modifier input
+ *
+ * @component
  */
 const FreeText = (props) => {
     const modifiersService = useModifiersService();
     const { modifier } = props;
-    const modifierName = modifier.name || "";
+    const modifierName = modifier.name || '';
     const mandatory = modifier.mandatory || false;
     const freeTextSettings = modifier.freeTextSettings;
     const maxChars = freeTextSettings?.maxLength;
     const placeholder = freeTextSettings?.placeholder;
     const selectedValue = modifiersService?.getModifierValue(modifierName);
-    const value = selectedValue?.freeTextValue || "";
+    const value = selectedValue?.freeTextValue || '';
     const charCount = value.length;
     const isOverLimit = maxChars ? charCount > maxChars : false;
     const onChange = (newValue) => {
@@ -135,11 +142,13 @@ exports.FreeText = FreeText;
 /**
  * Headless component for toggling free text modifier input
  * Used for optional free text modifiers where a checkbox shows/hides the input
+ *
+ * @component
  */
 const ToggleFreeText = (props) => {
     const modifiersService = useModifiersService();
     const { modifier } = props;
-    const modifierName = modifier.name || "";
+    const modifierName = modifier.name || '';
     const mandatory = modifier.mandatory || false;
     const [isTextInputShown, setIsTextInputShown] = (0, react_1.useState)(mandatory);
     const onToggle = () => {

package/cjs/dist/react/ProductVariantSelector.d.ts

@@ -1,4 +1,4 @@
-import { productsV3 } from "@wix/stores";
+import { type ConnectedOption, type ConnectedOptionChoice, InventoryAvailabilityStatus } from '@wix/auto_sdk_stores_products-v-3';
 /**
  * Props for Options headless component
  */
@@ -11,7 +11,7 @@ export interface OptionsProps {
  */
 export interface OptionsRenderProps {
     /** Array of product options */
-    options: productsV3.ConnectedOption[];
+    options: ConnectedOption[];
     /** Whether product has options */
     hasOptions: boolean;
     /** Currently selected choices */
@@ -19,6 +19,8 @@ export interface OptionsRenderProps {
 }
 /**
  * Headless component for all product options
+ *
+ * @component
  */
 export declare const Options: (props: OptionsProps) => import("react").ReactNode;
 /**
@@ -26,7 +28,7 @@ export declare const Options: (props: OptionsProps) => import("react").ReactNode
  */
 export interface OptionProps {
     /** Product option data */
-    option: productsV3.ConnectedOption;
+    option: ConnectedOption;
     /** Render prop function that receives option data */
     children: (props: OptionRenderProps) => React.ReactNode;
 }
@@ -39,7 +41,7 @@ export interface OptionRenderProps {
     /** Option type */
     type: any;
     /** Array of choices for this option */
-    choices: productsV3.ConnectedOptionChoice[];
+    choices: ConnectedOptionChoice[];
     /** Currently selected value for this option */
     selectedValue: string | null;
     /** Whether this option has choices */
@@ -47,6 +49,8 @@ export interface OptionRenderProps {
 }
 /**
  * Headless component for choices within a specific product option
+ *
+ * @component
  */
 export declare const Option: (props: OptionProps) => import("react").ReactNode;
 /**
@@ -54,9 +58,9 @@ export declare const Option: (props: OptionProps) => import("react").ReactNode;
  */
 export interface ChoiceProps {
     /** Product option data */
-    option: productsV3.ConnectedOption;
+    option: ConnectedOption;
     /** Choice data */
-    choice: productsV3.ConnectedOptionChoice;
+    choice: ConnectedOptionChoice;
     /** Render prop function that receives choice data */
     children: (props: ChoiceRenderProps) => React.ReactNode;
 }
@@ -70,8 +74,12 @@ export interface ChoiceRenderProps {
     description: string | undefined;
     /** Whether this choice is currently selected */
     isSelected: boolean;
-    /** Whether this choice is available for selection */
-    isAvailable: boolean;
+    /** Whether this choice is visible */
+    isVisible: boolean;
+    /** Whether this choice is in stock */
+    isInStock: boolean;
+    /** Whether this choice is available for pre-order */
+    isPreOrderEnabled: boolean;
     /** Function to select this choice */
     onSelect: () => void;
     /** Option name */
@@ -81,64 +89,10 @@ export interface ChoiceRenderProps {
 }
 /**
  * Headless component for individual choice selection
+ *
+ * @component
  */
 export declare const Choice: (props: ChoiceProps) => import("react").ReactNode;
-/**
- * Props for Trigger headless component
- */
-export interface TriggerProps {
-    /** Quantity to add (optional) */
-    quantity?: number;
-    /** Render prop function that receives trigger data */
-    children: (props: TriggerRenderProps) => React.ReactNode;
-}
-/**
- * Render props for Trigger component
- */
-export interface TriggerRenderProps {
-    /** Function to add product to cart */
-    onAddToCart: () => Promise<void>;
-    /** Whether add to cart is available */
-    canAddToCart: boolean;
-    /** Whether add to cart is currently loading */
-    isLoading: boolean;
-    /** Current product price */
-    price: string;
-    /** Whether product is in stock */
-    inStock: boolean;
-    /** Whether pre-order is enabled */
-    isPreOrderEnabled: boolean;
-    /** Error message if any */
-    error: string | null;
-}
-/**
- * Headless component for add to cart trigger
- */
-export declare const Trigger: (props: TriggerProps) => import("react").ReactNode;
-/**
- * Props for Price headless component
- */
-export interface PriceProps {
-    /** Render prop function that receives price data */
-    children: (props: PriceRenderProps) => React.ReactNode;
-}
-/**
- * Render props for Price component
- */
-export interface PriceRenderProps {
-    /** Current price (formatted) */
-    price: string;
-    /** Compare at price (formatted) - null if no compare price */
-    compareAtPrice: string | null;
-    /** Whether price is for a variant */
-    isVariantPrice: boolean;
-    /** Currency code */
-    currency: string;
-}
-/**
- * Headless component for product price display
- */
-export declare const Price: (props: PriceProps) => import("react").ReactNode;
 /**
  * Props for Stock headless component
  */
@@ -154,16 +108,46 @@ export interface StockRenderProps {
     inStock: boolean;
     /** Whether pre-order is enabled */
     isPreOrderEnabled: boolean;
-    /** Stock status message */
-    status: string;
-    /** Stock quantity (if available) */
-    quantity: number | null;
+    /** Raw inventory availability status */
+    availabilityStatus: InventoryAvailabilityStatus | string;
     /** Whether stock tracking is enabled */
     trackInventory: boolean;
     /** Current variant id */
     currentVariantId: string | null;
+    /** Available quantity */
+    availableQuantity: number | null;
+    /** Currently selected quantity */
+    selectedQuantity: number;
+    /** Function to increment quantity */
+    incrementQuantity: () => void;
+    /** Function to decrement quantity */
+    decrementQuantity: () => void;
 }
 /**
  * Headless component for product stock status
+ *
+ * @component
  */
 export declare const Stock: (props: StockProps) => import("react").ReactNode;
+/**
+ * Props for Reset headless component
+ */
+export interface ResetProps {
+    /** Render prop function that receives reset data */
+    children: (props: ResetRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Reset component
+ */
+export interface ResetRenderProps {
+    /** Function to reset all selections */
+    onReset: () => void;
+    /** Whether the reset button should be rendered */
+    hasSelections: boolean;
+}
+/**
+ * Headless component for resetting variant selections
+ *
+ * @component
+ */
+export declare const Reset: (props: ResetProps) => import("react").ReactNode;