@wix/headless-stores 0.0.69 → 0.0.71

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

@@ -641,3 +641,49 @@ export declare const ProductMediaGallery: React.ForwardRefExoticComponent<Produc
  * Alias for ProductMediaGallery to match the documented API
  */
 export { ProductMediaGallery as MediaGallery };
+/**
+ * Props for Product Action components following the documented API
+ */
+export interface ProductActionProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Text label for the button */
+    label: string;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        disabled: boolean;
+        isLoading: boolean;
+        onClick: () => Promise<void>;
+    }>;
+    /** CSS classes to apply to the button */
+    className?: string;
+    /** Content to display when loading */
+    loadingState?: string | React.ReactNode;
+}
+/**
+ * Add to cart action button component following the documented API.
+ * Automatically integrates with the selected variant and handles loading states.
+ */
+export declare const ProductActionAddToCart: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Buy Now action button component following the documented API.
+ * Bypasses the cart and redirects directly to checkout.
+ */
+export declare const ProductActionBuyNow: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Pre-Order action button component following the documented API.
+ * Handles pre-order functionality when products are not in stock.
+ */
+export declare const ProductActionPreOrder: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Actions namespace containing all product action components
+ * following the documented API: Product.Action.AddToCart, Product.Action.BuyNow, Product.Action.PreOrder
+ */
+export declare const Action: {
+    /** Add to cart action button */
+    readonly AddToCart: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+    /** Buy now action button */
+    readonly BuyNow: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+    /** Pre-order action button */
+    readonly PreOrder: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+};

package/cjs/dist/react/Product.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { InventoryAvailabilityStatus } from '@wix/auto_sdk_stores_products-v-3';
 import React from 'react';
+import { Commerce } from '@wix/headless-ecom/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { MediaGallery } from '@wix/headless-media/react';
 import * as CoreProduct from './core/Product.js';
@@ -49,6 +50,10 @@ var TestIds;
     TestIds["productModifierOptions"] = "product-modifier-options";
     TestIds["productModifierOption"] = "product-modifier-option";
     TestIds["productMediaGallery"] = "product-media-gallery";
+    TestIds["productAddToCart"] = "product-add-to-cart";
+    TestIds["productActionAddToCart"] = "product-action-add-to-cart";
+    TestIds["productActionBuyNow"] = "product-action-buy-now";
+    TestIds["productActionPreOrder"] = "product-action-pre-order";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides all necessary service contexts for a complete product experience.
@@ -288,7 +293,7 @@ export const Raw = React.forwardRef((props, ref) => {
             if (!asChild || !children) {
                 return null;
             }
-            return (_jsx(AsChildSlot, { ref: ref, className: className, "data-testid": TestIds.productRaw, customElement: children, customElementProps: { product } }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productRaw, customElement: children, customElementProps: { product } }));
         } }));
 });
 /**
@@ -674,3 +679,82 @@ export const ProductMediaGallery = React.forwardRef((props, ref) => {
  * Alias for ProductMediaGallery to match the documented API
  */
 export { ProductMediaGallery as MediaGallery };
+/**
+ * Add to cart action button component following the documented API.
+ * Automatically integrates with the selected variant and handles loading states.
+ */
+export const ProductActionAddToCart = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label, loadingState } = props;
+    return (_jsx(SelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, addToCart, isPreOrderEnabled, }) => {
+            if (isPreOrderEnabled) {
+                return null;
+            }
+            const onClick = addToCart;
+            const disabled = !canAddToCart || isLoading;
+            if (asChild && children) {
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productActionAddToCart, "data-in-progress": isLoading, customElement: children, customElementProps: {
+                        disabled,
+                        isLoading,
+                        onClick,
+                    } }));
+            }
+            return (_jsx(Commerce.Actions.AddToCart, { ref: ref, label: label, lineItems: lineItems, className: className, disabled: disabled, loadingState: loadingState, "data-testid": TestIds.productActionAddToCart, "data-in-progress": isLoading }));
+        } }));
+});
+/**
+ * Buy Now action button component following the documented API.
+ * Bypasses the cart and redirects directly to checkout.
+ */
+export const ProductActionBuyNow = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label, loadingState } = props;
+    return (_jsx(SelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, buyNow, inStock, isPreOrderEnabled, }) => {
+            if (!inStock || isPreOrderEnabled) {
+                return null;
+            }
+            const onClick = buyNow;
+            const disabled = !canAddToCart || isLoading;
+            if (asChild && children) {
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productActionBuyNow, "data-in-progress": isLoading, customElement: children, customElementProps: {
+                        disabled,
+                        isLoading,
+                        onClick,
+                    } }));
+            }
+            return (_jsx(Commerce.Actions.BuyNow, { ref: ref, label: label, lineItems: lineItems, className: className, disabled: disabled, loadingState: loadingState, "data-testid": TestIds.productActionBuyNow, "data-in-progress": isLoading }));
+        } }));
+});
+/**
+ * Pre-Order action button component following the documented API.
+ * Handles pre-order functionality when products are not in stock.
+ */
+export const ProductActionPreOrder = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label, loadingState } = props;
+    return (_jsx(SelectedVariant.Actions, { children: ({ lineItems, isLoading, addToCart, isPreOrderEnabled }) => {
+            if (!isPreOrderEnabled) {
+                return null;
+            }
+            const canPreOrder = !isLoading;
+            const onClick = addToCart;
+            const disabled = !canPreOrder;
+            if (asChild && children) {
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productActionPreOrder, "data-in-progress": isLoading, customElement: children, customElementProps: {
+                        disabled,
+                        isLoading,
+                        onClick,
+                    } }));
+            }
+            return (_jsx(Commerce.Actions.AddToCart, { ref: ref, label: label, lineItems: lineItems, className: className, disabled: disabled, loadingState: loadingState, "data-testid": TestIds.productActionPreOrder, "data-in-progress": isLoading }));
+        } }));
+});
+/**
+ * Actions namespace containing all product action components
+ * following the documented API: Product.Action.AddToCart, Product.Action.BuyNow, Product.Action.PreOrder
+ */
+export const Action = {
+    /** Add to cart action button */
+    AddToCart: ProductActionAddToCart,
+    /** Buy now action button */
+    BuyNow: ProductActionBuyNow,
+    /** Pre-order action button */
+    PreOrder: ProductActionPreOrder,
+};

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

@@ -1,4 +1,5 @@
 import { SelectedVariantServiceConfig } from '../../services/selected-variant-service.js';
+import { type LineItem } from '@wix/headless-ecom/services';
 export interface RootProps {
     children: React.ReactNode;
     selectedVariantServiceConfig?: SelectedVariantServiceConfig;
@@ -177,6 +178,8 @@ export interface ActionsRenderProps {
     addToCart: () => Promise<void>;
     /** Function to buy now (clear cart, add product, proceed to checkout) */
     buyNow: () => Promise<void>;
+    /** Line items */
+    lineItems: LineItem[];
     /** Whether add to cart is available */
     canAddToCart: boolean;
     /** Whether add to cart is currently loading */

package/cjs/dist/react/core/SelectedVariant.js

@@ -245,6 +245,7 @@ export function Actions(props) {
         return variantService.createLineItems(quantity, modifiersData);
     };
     const commonProps = {
+        lineItems: getLineItems(),
         addToCart,
         canAddToCart,
         isLoading,

package/dist/react/Product.d.ts

@@ -641,3 +641,49 @@ export declare const ProductMediaGallery: React.ForwardRefExoticComponent<Produc
  * Alias for ProductMediaGallery to match the documented API
  */
 export { ProductMediaGallery as MediaGallery };
+/**
+ * Props for Product Action components following the documented API
+ */
+export interface ProductActionProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Text label for the button */
+    label: string;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        disabled: boolean;
+        isLoading: boolean;
+        onClick: () => Promise<void>;
+    }>;
+    /** CSS classes to apply to the button */
+    className?: string;
+    /** Content to display when loading */
+    loadingState?: string | React.ReactNode;
+}
+/**
+ * Add to cart action button component following the documented API.
+ * Automatically integrates with the selected variant and handles loading states.
+ */
+export declare const ProductActionAddToCart: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Buy Now action button component following the documented API.
+ * Bypasses the cart and redirects directly to checkout.
+ */
+export declare const ProductActionBuyNow: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Pre-Order action button component following the documented API.
+ * Handles pre-order functionality when products are not in stock.
+ */
+export declare const ProductActionPreOrder: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Actions namespace containing all product action components
+ * following the documented API: Product.Action.AddToCart, Product.Action.BuyNow, Product.Action.PreOrder
+ */
+export declare const Action: {
+    /** Add to cart action button */
+    readonly AddToCart: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+    /** Buy now action button */
+    readonly BuyNow: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+    /** Pre-order action button */
+    readonly PreOrder: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+};

package/dist/react/Product.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { InventoryAvailabilityStatus } from '@wix/auto_sdk_stores_products-v-3';
 import React from 'react';
+import { Commerce } from '@wix/headless-ecom/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { MediaGallery } from '@wix/headless-media/react';
 import * as CoreProduct from './core/Product.js';
@@ -49,6 +50,10 @@ var TestIds;
     TestIds["productModifierOptions"] = "product-modifier-options";
     TestIds["productModifierOption"] = "product-modifier-option";
     TestIds["productMediaGallery"] = "product-media-gallery";
+    TestIds["productAddToCart"] = "product-add-to-cart";
+    TestIds["productActionAddToCart"] = "product-action-add-to-cart";
+    TestIds["productActionBuyNow"] = "product-action-buy-now";
+    TestIds["productActionPreOrder"] = "product-action-pre-order";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides all necessary service contexts for a complete product experience.
@@ -288,7 +293,7 @@ export const Raw = React.forwardRef((props, ref) => {
             if (!asChild || !children) {
                 return null;
             }
-            return (_jsx(AsChildSlot, { ref: ref, className: className, "data-testid": TestIds.productRaw, customElement: children, customElementProps: { product } }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productRaw, customElement: children, customElementProps: { product } }));
         } }));
 });
 /**
@@ -674,3 +679,82 @@ export const ProductMediaGallery = React.forwardRef((props, ref) => {
  * Alias for ProductMediaGallery to match the documented API
  */
 export { ProductMediaGallery as MediaGallery };
+/**
+ * Add to cart action button component following the documented API.
+ * Automatically integrates with the selected variant and handles loading states.
+ */
+export const ProductActionAddToCart = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label, loadingState } = props;
+    return (_jsx(SelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, addToCart, isPreOrderEnabled, }) => {
+            if (isPreOrderEnabled) {
+                return null;
+            }
+            const onClick = addToCart;
+            const disabled = !canAddToCart || isLoading;
+            if (asChild && children) {
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productActionAddToCart, "data-in-progress": isLoading, customElement: children, customElementProps: {
+                        disabled,
+                        isLoading,
+                        onClick,
+                    } }));
+            }
+            return (_jsx(Commerce.Actions.AddToCart, { ref: ref, label: label, lineItems: lineItems, className: className, disabled: disabled, loadingState: loadingState, "data-testid": TestIds.productActionAddToCart, "data-in-progress": isLoading }));
+        } }));
+});
+/**
+ * Buy Now action button component following the documented API.
+ * Bypasses the cart and redirects directly to checkout.
+ */
+export const ProductActionBuyNow = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label, loadingState } = props;
+    return (_jsx(SelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, buyNow, inStock, isPreOrderEnabled, }) => {
+            if (!inStock || isPreOrderEnabled) {
+                return null;
+            }
+            const onClick = buyNow;
+            const disabled = !canAddToCart || isLoading;
+            if (asChild && children) {
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productActionBuyNow, "data-in-progress": isLoading, customElement: children, customElementProps: {
+                        disabled,
+                        isLoading,
+                        onClick,
+                    } }));
+            }
+            return (_jsx(Commerce.Actions.BuyNow, { ref: ref, label: label, lineItems: lineItems, className: className, disabled: disabled, loadingState: loadingState, "data-testid": TestIds.productActionBuyNow, "data-in-progress": isLoading }));
+        } }));
+});
+/**
+ * Pre-Order action button component following the documented API.
+ * Handles pre-order functionality when products are not in stock.
+ */
+export const ProductActionPreOrder = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label, loadingState } = props;
+    return (_jsx(SelectedVariant.Actions, { children: ({ lineItems, isLoading, addToCart, isPreOrderEnabled }) => {
+            if (!isPreOrderEnabled) {
+                return null;
+            }
+            const canPreOrder = !isLoading;
+            const onClick = addToCart;
+            const disabled = !canPreOrder;
+            if (asChild && children) {
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productActionPreOrder, "data-in-progress": isLoading, customElement: children, customElementProps: {
+                        disabled,
+                        isLoading,
+                        onClick,
+                    } }));
+            }
+            return (_jsx(Commerce.Actions.AddToCart, { ref: ref, label: label, lineItems: lineItems, className: className, disabled: disabled, loadingState: loadingState, "data-testid": TestIds.productActionPreOrder, "data-in-progress": isLoading }));
+        } }));
+});
+/**
+ * Actions namespace containing all product action components
+ * following the documented API: Product.Action.AddToCart, Product.Action.BuyNow, Product.Action.PreOrder
+ */
+export const Action = {
+    /** Add to cart action button */
+    AddToCart: ProductActionAddToCart,
+    /** Buy now action button */
+    BuyNow: ProductActionBuyNow,
+    /** Pre-order action button */
+    PreOrder: ProductActionPreOrder,
+};

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

@@ -1,4 +1,5 @@
 import { SelectedVariantServiceConfig } from '../../services/selected-variant-service.js';
+import { type LineItem } from '@wix/headless-ecom/services';
 export interface RootProps {
     children: React.ReactNode;
     selectedVariantServiceConfig?: SelectedVariantServiceConfig;
@@ -177,6 +178,8 @@ export interface ActionsRenderProps {
     addToCart: () => Promise<void>;
     /** Function to buy now (clear cart, add product, proceed to checkout) */
     buyNow: () => Promise<void>;
+    /** Line items */
+    lineItems: LineItem[];
     /** Whether add to cart is available */
     canAddToCart: boolean;
     /** Whether add to cart is currently loading */

package/dist/react/core/SelectedVariant.js

@@ -245,6 +245,7 @@ export function Actions(props) {
         return variantService.createLineItems(quantity, modifiersData);
     };
     const commonProps = {
+        lineItems: getLineItems(),
         addToCart,
         canAddToCart,
         isLoading,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.69",
+  "version": "0.0.71",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",
@@ -63,7 +63,7 @@
     "@wix/ecom": "^1.0.1278",
     "@wix/essentials": "^0.1.24",
     "@wix/headless-components": "0.0.7",
-    "@wix/headless-ecom": "0.0.20",
+    "@wix/headless-ecom": "0.0.21",
     "@wix/headless-media": "0.0.11",
     "@wix/headless-utils": "0.0.3",
     "@wix/redirects": "^1.0.83",