@wix/headless-stores 0.0.37 → 0.0.39

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

@@ -1,5 +1,8 @@
-import type { PropsWithChildren, ReactNode } from "react";
 import { type CategoryServiceConfig } from "../services/category-service.js";
+export interface RootProps {
+    children: React.ReactNode;
+    categoryServiceConfig: CategoryServiceConfig;
+}
 /**
  * Root component that provides the Category service context to its children.
  * This component sets up the necessary services for managing category state.
@@ -24,15 +27,13 @@ import { type CategoryServiceConfig } from "../services/category-service.js";
  * }
  * ```
  */
-export declare function Root(props: PropsWithChildren<{
-    categoryServiceConfig: CategoryServiceConfig;
-}>): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for Name headless component
  */
 export interface NameProps {
     /** Content to display (can be a render function receiving name data or ReactNode) */
-    children: ((props: NameRenderProps) => ReactNode) | ReactNode;
+    children: ((props: NameRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for Name component
@@ -60,13 +61,13 @@ export interface NameRenderProps {
  * }
  * ```
  */
-export declare function Name(props: NameProps): ReactNode;
+export declare function Name(props: NameProps): import("react").ReactNode;
 /**
  * Props for Slug headless component
  */
 export interface SlugProps {
     /** Content to display (can be a render function receiving slug data or ReactNode) */
-    children: ((props: SlugRenderProps) => ReactNode) | ReactNode;
+    children: ((props: SlugRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for Slug component
@@ -94,4 +95,4 @@ export interface SlugRenderProps {
  * }
  * ```
  */
-export declare function Slug(props: SlugProps): ReactNode;
+export declare function Slug(props: SlugProps): import("react").ReactNode;

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

@@ -1,6 +1,9 @@
 import { type CategoriesListServiceConfig } from "../services/categories-list-service.js";
-import type { PropsWithChildren, ReactNode } from "react";
 import { categories } from "@wix/categories";
+export interface RootProps {
+    children: React.ReactNode;
+    categoriesListConfig: CategoriesListServiceConfig;
+}
 /**
  * Root component that provides the CategoryList service context to its children.
  * This component sets up the necessary services for managing categories list state.
@@ -26,15 +29,13 @@ import { categories } from "@wix/categories";
  * }
  * ```
  */
-export declare function Root(props: PropsWithChildren<{
-    categoriesListConfig: CategoriesListServiceConfig;
-}>): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for EmptyState headless component
  */
 export interface EmptyStateProps {
     /** Content to display when categories list is empty (can be a render function or ReactNode) */
-    children: ((props: EmptyStateRenderProps) => ReactNode) | ReactNode;
+    children: ((props: EmptyStateRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for EmptyState component
@@ -64,13 +65,13 @@ export interface EmptyStateRenderProps {
  * }
  * ```
  */
-export declare function EmptyState(props: EmptyStateProps): ReactNode;
+export declare function EmptyState(props: EmptyStateProps): import("react").ReactNode;
 /**
  * Props for Loading headless component
  */
 export interface LoadingProps {
     /** Content to display during loading (can be a render function or ReactNode) */
-    children: ((props: LoadingRenderProps) => ReactNode) | ReactNode;
+    children: ((props: LoadingRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for Loading component
@@ -100,13 +101,13 @@ export interface LoadingRenderProps {
  * }
  * ```
  */
-export declare function Loading(props: LoadingProps): ReactNode;
+export declare function Loading(props: LoadingProps): import("react").ReactNode;
 /**
  * Props for Error headless component
  */
 export interface ErrorProps {
     /** Content to display during error state (can be a render function or ReactNode) */
-    children: ((props: ErrorRenderProps) => ReactNode) | ReactNode;
+    children: ((props: ErrorRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for Error component
@@ -141,13 +142,13 @@ export interface ErrorRenderProps {
  * }
  * ```
  */
-export declare function Error(props: ErrorProps): ReactNode;
+export declare function Error(props: ErrorProps): import("react").ReactNode;
 /**
  * Props for ItemContent headless component
  */
 export interface ItemContentProps {
     /** Content to display for each category (can be a render function receiving category data or ReactNode) */
-    children: ((props: ItemContentRenderProps) => ReactNode) | ReactNode;
+    children: ((props: ItemContentRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for ItemContent component

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

@@ -1,6 +1,9 @@
 import { ProductServiceConfig } from "../services/product-service.js";
 import type { V3Product, ProductMedia } from "@wix/auto_sdk_stores_products-v-3";
-import type { PropsWithChildren } from "react";
+export interface RootProps {
+    children: React.ReactNode;
+    productServiceConfig: ProductServiceConfig;
+}
 /**
  * Root component that provides the Product service context to its children.
  * This component sets up the necessary services for rendering and managing a single product's data.
@@ -31,9 +34,7 @@ import type { PropsWithChildren } from "react";
  * }
  * ```
  */
-export declare function Root(props: PropsWithChildren<{
-    productServiceConfig: ProductServiceConfig;
-}>): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for ProductName headless component
  */

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

@@ -39,7 +39,7 @@ export interface RootProps {
  * }
  * ```
  */
-export declare function Root(props: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for InventoryStatus headless component
  */
@@ -144,13 +144,17 @@ export interface PriceRangeProps {
  */
 export interface PriceRangeRenderProps {
     /** Current minimum price filter value */
-    minPrice: number;
+    selectedMinPrice: number;
     /** Current maximum price filter value */
-    maxPrice: number;
+    selectedMaxPrice: number;
+    /** Catalog minimum price */
+    availableMinPrice: number;
+    /** Catalog maximum price */
+    availableMaxPrice: number;
     /** Function to update the minimum price filter */
-    setMinPrice: (minPrice: number) => void;
+    setSelectedMinPrice: (minPrice: number) => void;
     /** Function to update the maximum price filter */
-    setMaxPrice: (maxPrice: number) => void;
+    setSelectedMaxPrice: (maxPrice: number) => void;
 }
 /**
  * Headless component for managing price range filters (combined min/max)

package/cjs/dist/react/ProductListFilters.js

@@ -153,12 +153,21 @@ export function ResetTrigger(props) {
  */
 export function PriceRange(props) {
     const service = useService(ProductsListFiltersServiceDefinition);
-    const minPrice = service.minPrice.get();
-    const maxPrice = service.maxPrice.get();
-    const setMinPrice = service.setMinPrice;
-    const setMaxPrice = service.setMaxPrice;
+    const selectedMinPrice = service.selectedMinPrice.get();
+    const availableMinPrice = service.availableMinPrice.get();
+    const selectedMaxPrice = service.selectedMaxPrice.get();
+    const availableMaxPrice = service.availableMaxPrice.get();
+    const setSelectedMinPrice = service.setSelectedMinPrice;
+    const setSelectedMaxPrice = service.setSelectedMaxPrice;
     return typeof props.children === "function"
-        ? props.children({ minPrice, maxPrice, setMinPrice, setMaxPrice })
+        ? props.children({
+            availableMinPrice,
+            selectedMinPrice,
+            selectedMaxPrice,
+            availableMaxPrice,
+            setSelectedMinPrice,
+            setSelectedMaxPrice,
+        })
         : props.children;
 }
 /**

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

@@ -1,4 +1,6 @@
-import type { PropsWithChildren, ReactNode } from "react";
+export interface RootProps {
+    children: React.ReactNode;
+}
 /**
  * Root component that provides the ProductListPagination service context to its children.
  * This component sets up the necessary services for managing products list pagination.
@@ -27,13 +29,13 @@ import type { PropsWithChildren, ReactNode } from "react";
  * }
  * ```
  */
-export declare function Root(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for PageSize headless component
  */
 export interface PageSizeProps {
     /** Content to display (can be a render function receiving page size controls or ReactNode) */
-    children: ((props: PageSizeRenderProps) => ReactNode) | ReactNode;
+    children: ((props: PageSizeRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for PageSize component
@@ -73,13 +75,13 @@ export interface PageSizeRenderProps {
  * }
  * ```
  */
-export declare function PageSize(props: PageSizeProps): ReactNode;
+export declare function PageSize(props: PageSizeProps): import("react").ReactNode;
 /**
  * Props for NextPageTrigger headless component
  */
 export interface NextPageTriggerProps {
     /** Content to display (can be a render function receiving next page controls or ReactNode) */
-    children: ((props: NextPageTriggerRenderProps) => ReactNode) | ReactNode;
+    children: ((props: NextPageTriggerRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for NextPageTrigger component
@@ -115,13 +117,13 @@ export interface NextPageTriggerRenderProps {
  * }
  * ```
  */
-export declare function NextPageTrigger(props: NextPageTriggerProps): ReactNode;
+export declare function NextPageTrigger(props: NextPageTriggerProps): import("react").ReactNode;
 /**
  * Props for PreviousPageTrigger headless component
  */
 export interface PreviousPageTriggerProps {
     /** Content to display (can be a render function receiving previous page controls or ReactNode) */
-    children: ((props: PreviousPageTriggerRenderProps) => ReactNode) | ReactNode;
+    children: ((props: PreviousPageTriggerRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for PreviousPageTrigger component
@@ -157,13 +159,13 @@ export interface PreviousPageTriggerRenderProps {
  * }
  * ```
  */
-export declare function PreviousPageTrigger(props: PreviousPageTriggerProps): ReactNode;
+export declare function PreviousPageTrigger(props: PreviousPageTriggerProps): import("react").ReactNode;
 /**
  * Props for FirstPageTrigger headless component
  */
 export interface FirstPageTriggerProps {
     /** Content to display (can be a render function receiving first page controls or ReactNode) */
-    children: ((props: FirstPageTriggerRenderProps) => ReactNode) | ReactNode;
+    children: ((props: FirstPageTriggerRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for FirstPageTrigger component
@@ -199,13 +201,13 @@ export interface FirstPageTriggerRenderProps {
  * }
  * ```
  */
-export declare function FirstPageTrigger(props: FirstPageTriggerProps): ReactNode;
+export declare function FirstPageTrigger(props: FirstPageTriggerProps): import("react").ReactNode;
 /**
  * Props for LoadMoreTrigger headless component
  */
 export interface LoadMoreTriggerProps {
     /** Content to display (can be a render function receiving load more controls or ReactNode) */
-    children: ((props: LoadMoreTriggerRenderProps) => ReactNode) | ReactNode;
+    children: ((props: LoadMoreTriggerRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for LoadMoreTrigger component
@@ -243,4 +245,4 @@ export interface LoadMoreTriggerRenderProps {
  * }
  * ```
  */
-export declare function LoadMoreTrigger(props: LoadMoreTriggerProps): ReactNode;
+export declare function LoadMoreTrigger(props: LoadMoreTriggerProps): import("react").ReactNode;

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

@@ -1,5 +1,7 @@
-import type { PropsWithChildren, ReactNode } from "react";
 import { SortType } from "../services/products-list-sort-service.js";
+export interface RootProps {
+    children: React.ReactNode;
+}
 /**
  * Root component that provides the ProductListSort service context to its children.
  * This component sets up the necessary services for managing products list sorting.
@@ -32,13 +34,13 @@ import { SortType } from "../services/products-list-sort-service.js";
  * }
  * ```
  */
-export declare function Root(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for Options headless component
  */
 export interface OptionsProps {
     /** Content to display (can be a render function receiving sort controls or ReactNode) */
-    children: ((props: OptionsRenderProps) => ReactNode) | ReactNode;
+    children: ((props: OptionsRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for Options component
@@ -84,4 +86,4 @@ export interface OptionsRenderProps {
  * }
  * ```
  */
-export declare function Options(props: OptionsProps): ReactNode;
+export declare function Options(props: OptionsProps): import("react").ReactNode;

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

@@ -1,5 +1,7 @@
 import { type ConnectedModifier, type ConnectedModifierChoice } from "@wix/auto_sdk_stores_products-v-3";
-import type { PropsWithChildren } from "react";
+export interface RootProps {
+    children: React.ReactNode;
+}
 /**
  * Root component that provides the ProductModifiers service context to its children.
  * This component sets up the necessary services for managing product modifier functionality.
@@ -74,7 +76,7 @@ import type { PropsWithChildren } from "react";
  * }
  * ```
  */
-export declare function Root(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for Modifiers headless component
  */

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

@@ -1,6 +1,9 @@
 import { SelectedVariantServiceConfig } from "../services/selected-variant-service.js";
-import type { PropsWithChildren } from "react";
 import { type ConnectedOption, type ConnectedOptionChoice, InventoryAvailabilityStatus } from "@wix/auto_sdk_stores_products-v-3";
+export interface RootProps {
+    children: React.ReactNode;
+    selectedVariantServiceConfig: SelectedVariantServiceConfig;
+}
 /**
  * Root component that provides the ProductVariantSelector service context to its children.
  * This component sets up the necessary services for rendering and managing product variant selection.
@@ -39,9 +42,7 @@ import { type ConnectedOption, type ConnectedOptionChoice, InventoryAvailability
  * }
  * ```
  */
-export declare function Root(props: PropsWithChildren<{
-    selectedVariantServiceConfig?: SelectedVariantServiceConfig;
-}>): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for Options headless component
  */

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

@@ -1,5 +1,8 @@
 import { SelectedVariantServiceConfig } from "../services/selected-variant-service.js";
-import type { PropsWithChildren } from "react";
+export interface RootProps {
+    children: React.ReactNode;
+    selectedVariantServiceConfig: SelectedVariantServiceConfig;
+}
 /**
  * Root component that provides the SelectedVariant service context to its children.
  * This component sets up the necessary services for rendering and managing selected variant data.
@@ -33,9 +36,7 @@ import type { PropsWithChildren } from "react";
  * }
  * ```
  */
-export declare function Root(props: PropsWithChildren<{
-    selectedVariantServiceConfig?: SelectedVariantServiceConfig;
-}>): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for ProductDetails headless component
  */
@@ -161,3 +162,66 @@ export interface SKURenderProps {
  * ```
  */
 export declare function SKU(props: SKUProps): import("react").ReactNode;
+/**
+ * Props for Actions headless component
+ */
+export interface ActionsProps {
+    /** 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>;
+    /** Whether add to cart is available */
+    canAddToCart: boolean;
+    /** Whether add to cart is currently loading */
+    isLoading: boolean;
+    /** 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;
+}
+/**
+ * Headless component for product actions (add to cart, buy now)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function AddToCartButton() {
+ *   return (
+ *     <SelectedVariant.Actions>
+ *       {({ onAddToCart, onBuyNow, canAddToCart, isLoading, inStock, error }) => (
+ *         <div>
+ *           {error && <div className="error">{error}</div>}
+ *           {!inStock && <div>Out of stock</div>}
+ *           <button
+ *             onClick={onAddToCart}
+ *             disabled={!canAddToCart || isLoading}
+ *           >
+ *             {isLoading ? 'Adding...' : 'Add to Cart'}
+ *           </button>
+ *           <button
+ *             onClick={onBuyNow}
+ *             disabled={!canAddToCart || isLoading}
+ *           >
+ *             Buy Now
+ *           </button>
+ *         </div>
+ *       )}
+ *     </SelectedVariant.Actions>
+ *   );
+ * }
+ * ```
+ */
+export declare function Actions(props: ActionsProps): import("react").ReactNode;

package/cjs/dist/react/SelectedVariant.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useService, WixServices } from "@wix/services-manager-react";
 import { SelectedVariantServiceDefinition, SelectedVariantService, } from "../services/selected-variant-service.js";
+import { ProductModifiersServiceDefinition } from "../services/product-modifiers-service.js";
+import { CurrentCartServiceDefinition } from "@wix/headless-ecom/services";
 import { createServicesMap } from "@wix/services-manager";
 /**
  * Root component that provides the SelectedVariant service context to its children.
@@ -141,3 +143,98 @@ export function SKU(props) {
         sku,
     });
 }
+/**
+ * Headless component for product actions (add to cart, buy now)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { SelectedVariant } from '@wix/stores/components';
+ *
+ * function AddToCartButton() {
+ *   return (
+ *     <SelectedVariant.Actions>
+ *       {({ onAddToCart, onBuyNow, canAddToCart, isLoading, inStock, error }) => (
+ *         <div>
+ *           {error && <div className="error">{error}</div>}
+ *           {!inStock && <div>Out of stock</div>}
+ *           <button
+ *             onClick={onAddToCart}
+ *             disabled={!canAddToCart || isLoading}
+ *           >
+ *             {isLoading ? 'Adding...' : 'Add to Cart'}
+ *           </button>
+ *           <button
+ *             onClick={onBuyNow}
+ *             disabled={!canAddToCart || isLoading}
+ *           >
+ *             Buy Now
+ *           </button>
+ *         </div>
+ *       )}
+ *     </SelectedVariant.Actions>
+ *   );
+ * }
+ * ```
+ */
+export function Actions(props) {
+    const variantService = useService(SelectedVariantServiceDefinition);
+    const cartService = useService(CurrentCartServiceDefinition);
+    // Try to get modifiers service - it may not exist for all products
+    let modifiersService = null;
+    try {
+        modifiersService = useService(ProductModifiersServiceDefinition);
+    }
+    catch {
+        // Modifiers service not available for this product
+        modifiersService = null;
+    }
+    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 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;
+        }
+    };
+    return props.children({
+        onAddToCart,
+        onBuyNow,
+        canAddToCart,
+        isLoading,
+        inStock,
+        isPreOrderEnabled,
+        preOrderMessage,
+        error,
+    });
+}

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

@@ -1,7 +1,6 @@
 export * as CategoryList from "./CategoryList.js";
 export * as Category from "./Category.js";
 export * as Product from "./Product.js";
-export * as ProductActions from "./ProductActions.js";
 export * as ProductModifiers from "./ProductModifiers.js";
 export * as ProductList from "./ProductList.js";
 export * as ProductListFilters from "./ProductListFilters.js";

package/cjs/dist/react/index.js

@@ -1,7 +1,6 @@
 export * as CategoryList from "./CategoryList.js";
 export * as Category from "./Category.js";
 export * as Product from "./Product.js";
-export * as ProductActions from "./ProductActions.js";
 export * as ProductModifiers from "./ProductModifiers.js";
 export * as ProductList from "./ProductList.js";
 export * as ProductListFilters from "./ProductListFilters.js";