@wix/headless-stores 0.0.84 → 0.0.85

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

@@ -874,6 +874,80 @@ export declare const Action: {
     /** Pre-order action button */
     readonly PreOrder: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
 };
+/**
+ * Props for ProductVariantStock component
+ */
+export interface ProductVariantStockProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        status: 'in-stock' | 'limited-stock' | 'out-of-stock' | 'pre-order';
+        label: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+    /** Custom labels for different stock states */
+    labels?: {
+        /** Label for in stock state */
+        inStock?: string;
+        /** Label for limited stock state (when quantity is low) */
+        limitedStock?: string;
+        /** Label for out of stock state */
+        outOfStock?: string;
+        /** Label for pre-order state */
+        preOrder?: string;
+    };
+}
+/**
+ * Displays the selected variant stock status with customizable rendering and labels,
+ * including pre-order support. Similar to Product.Stock but for the selected variant.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.ProductVariant.Stock
+ *   className="stock-indicator"
+ *   labels={{
+ *     inStock: 'In Stock',
+ *     limitedStock: 'Limited Stock',
+ *     outOfStock: 'Out of Stock',
+ *     preOrder: 'Available for Pre-order'
+ *   }}
+ * />
+ *
+ * // asChild with primitive
+ * <Product.ProductVariant.Stock asChild>
+ *   <div className="variant-stock-status" />
+ * </Product.ProductVariant.Stock>
+ *
+ * // asChild with react component
+ * <Product.ProductVariant.Stock
+ *   labels={{
+ *     inStock: 'Available',
+ *     limitedStock: 'Low Stock',
+ *     outOfStock: 'Sold Out',
+ *     preOrder: 'Pre-order Now'
+ *   }}
+ *   asChild
+ * >
+ *   {React.forwardRef(({status, label, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       className="flex items-center gap-2 data-[state='in-stock']:text-green-600 data-[state='limited-stock']:text-yellow-600 data-[state='out-of-stock']:text-red-600 data-[state='pre-order']:text-blue-600"
+ *     >
+ *       <div className="w-3 h-3 rounded-full data-[state='in-stock']:bg-green-500 data-[state='limited-stock']:bg-yellow-500 data-[state='out-of-stock']:bg-red-500 data-[state='pre-order']:bg-blue-500" />
+ *       <span className="text-sm font-medium">
+ *         {label}
+ *       </span>
+ *     </div>
+ *   ))}
+ * </Product.ProductVariant.Stock>
+ * ```
+ */
+export declare const ProductVariantStock: React.ForwardRefExoticComponent<ProductVariantStockProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for ProductVariantSKU component
  */
@@ -952,9 +1026,11 @@ export interface ProductVariantWeightProps {
 export declare const ProductVariantWeight: React.ForwardRefExoticComponent<ProductVariantWeightProps & React.RefAttributes<HTMLElement>>;
 /**
  * ProductVariant namespace containing product variant components
- * following the compound component pattern: Product.ProductVariant.SKU, Product.ProductVariant.Weight
+ * following the compound component pattern: Product.ProductVariant.Stock, Product.ProductVariant.SKU, Product.ProductVariant.Weight
  */
 export declare const ProductVariant: {
+    /** Product variant stock component */
+    readonly Stock: React.ForwardRefExoticComponent<ProductVariantStockProps & React.RefAttributes<HTMLElement>>;
     /** Product variant SKU component */
     readonly SKU: React.ForwardRefExoticComponent<ProductVariantSKUProps & React.RefAttributes<HTMLElement>>;
     /** Product variant weight component */

package/cjs/dist/react/Product.js

@@ -51,6 +51,7 @@ var TestIds;
     TestIds["productVariant"] = "product-variant";
     TestIds["productVariantSku"] = "product-variant-sku";
     TestIds["productVariantWeight"] = "product-variant-weight";
+    TestIds["productVariantStock"] = "product-variant-stock";
     TestIds["productModifiers"] = "product-modifiers";
     TestIds["productModifierOptions"] = "product-modifier-options";
     TestIds["productModifierOption"] = "product-modifier-option";
@@ -949,6 +950,113 @@ export const Action = {
     /** Pre-order action button */
     PreOrder: ProductActionPreOrder,
 };
+/**
+ * Helper function to determine stock status and label based on availability and pre-order settings
+ */
+function getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, labels) {
+    // Pre-order takes precedence
+    if (isPreOrderEnabled) {
+        return {
+            status: 'pre-order',
+            label: labels.preOrder,
+        };
+    }
+    // Handle stock status based on availability
+    if (inStock) {
+        switch (availabilityStatus) {
+            case InventoryAvailabilityStatus.IN_STOCK:
+                return {
+                    status: 'in-stock',
+                    label: labels.inStock,
+                };
+            case InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK:
+                return {
+                    status: 'limited-stock',
+                    label: labels.limitedStock,
+                };
+            default:
+                return {
+                    status: 'in-stock',
+                    label: labels.inStock,
+                };
+        }
+    }
+    return {
+        status: 'out-of-stock',
+        label: labels.outOfStock,
+    };
+}
+/**
+ * Displays the selected variant stock status with customizable rendering and labels,
+ * including pre-order support. Similar to Product.Stock but for the selected variant.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.ProductVariant.Stock
+ *   className="stock-indicator"
+ *   labels={{
+ *     inStock: 'In Stock',
+ *     limitedStock: 'Limited Stock',
+ *     outOfStock: 'Out of Stock',
+ *     preOrder: 'Available for Pre-order'
+ *   }}
+ * />
+ *
+ * // asChild with primitive
+ * <Product.ProductVariant.Stock asChild>
+ *   <div className="variant-stock-status" />
+ * </Product.ProductVariant.Stock>
+ *
+ * // asChild with react component
+ * <Product.ProductVariant.Stock
+ *   labels={{
+ *     inStock: 'Available',
+ *     limitedStock: 'Low Stock',
+ *     outOfStock: 'Sold Out',
+ *     preOrder: 'Pre-order Now'
+ *   }}
+ *   asChild
+ * >
+ *   {React.forwardRef(({status, label, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       className="flex items-center gap-2 data-[state='in-stock']:text-green-600 data-[state='limited-stock']:text-yellow-600 data-[state='out-of-stock']:text-red-600 data-[state='pre-order']:text-blue-600"
+ *     >
+ *       <div className="w-3 h-3 rounded-full data-[state='in-stock']:bg-green-500 data-[state='limited-stock']:bg-yellow-500 data-[state='out-of-stock']:bg-red-500 data-[state='pre-order']:bg-blue-500" />
+ *       <span className="text-sm font-medium">
+ *         {label}
+ *       </span>
+ *     </div>
+ *   ))}
+ * </Product.ProductVariant.Stock>
+ * ```
+ */
+export const ProductVariantStock = React.forwardRef((props, ref) => {
+    const { asChild, children, className, labels } = props;
+    return (_jsx(ProductVariantSelector.Stock, { children: ({ inStock, isPreOrderEnabled, availabilityStatus, currentVariantId, }) => {
+            // Only render if we have a current variant selected
+            if (!currentVariantId && !availabilityStatus) {
+                return null;
+            }
+            // Default labels
+            const defaultLabels = {
+                inStock: 'In Stock',
+                limitedStock: 'Limited Stock',
+                outOfStock: 'Out of Stock',
+                preOrder: 'Available for Pre-order',
+            };
+            const finalLabels = { ...defaultLabels, ...labels };
+            // Get status and label using the helper function
+            const { status, label } = getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, finalLabels);
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariantStock, "data-state": status, customElement: children, customElementProps: {
+                    status,
+                    label,
+                }, content: label, children: _jsx("span", { children: label }) }));
+        } }));
+});
 /**
  * Displays the selected variant SKU with customizable rendering following the documented API.
  *
@@ -1019,9 +1127,11 @@ export const ProductVariantWeight = React.forwardRef((props, ref) => {
 });
 /**
  * ProductVariant namespace containing product variant components
- * following the compound component pattern: Product.ProductVariant.SKU, Product.ProductVariant.Weight
+ * following the compound component pattern: Product.ProductVariant.Stock, Product.ProductVariant.SKU, Product.ProductVariant.Weight
  */
 export const ProductVariant = {
+    /** Product variant stock component */
+    Stock: ProductVariantStock,
     /** Product variant SKU component */
     SKU: ProductVariantSKU,
     /** Product variant weight component */

package/dist/react/Product.d.ts

@@ -874,6 +874,80 @@ export declare const Action: {
     /** Pre-order action button */
     readonly PreOrder: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
 };
+/**
+ * Props for ProductVariantStock component
+ */
+export interface ProductVariantStockProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        status: 'in-stock' | 'limited-stock' | 'out-of-stock' | 'pre-order';
+        label: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+    /** Custom labels for different stock states */
+    labels?: {
+        /** Label for in stock state */
+        inStock?: string;
+        /** Label for limited stock state (when quantity is low) */
+        limitedStock?: string;
+        /** Label for out of stock state */
+        outOfStock?: string;
+        /** Label for pre-order state */
+        preOrder?: string;
+    };
+}
+/**
+ * Displays the selected variant stock status with customizable rendering and labels,
+ * including pre-order support. Similar to Product.Stock but for the selected variant.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.ProductVariant.Stock
+ *   className="stock-indicator"
+ *   labels={{
+ *     inStock: 'In Stock',
+ *     limitedStock: 'Limited Stock',
+ *     outOfStock: 'Out of Stock',
+ *     preOrder: 'Available for Pre-order'
+ *   }}
+ * />
+ *
+ * // asChild with primitive
+ * <Product.ProductVariant.Stock asChild>
+ *   <div className="variant-stock-status" />
+ * </Product.ProductVariant.Stock>
+ *
+ * // asChild with react component
+ * <Product.ProductVariant.Stock
+ *   labels={{
+ *     inStock: 'Available',
+ *     limitedStock: 'Low Stock',
+ *     outOfStock: 'Sold Out',
+ *     preOrder: 'Pre-order Now'
+ *   }}
+ *   asChild
+ * >
+ *   {React.forwardRef(({status, label, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       className="flex items-center gap-2 data-[state='in-stock']:text-green-600 data-[state='limited-stock']:text-yellow-600 data-[state='out-of-stock']:text-red-600 data-[state='pre-order']:text-blue-600"
+ *     >
+ *       <div className="w-3 h-3 rounded-full data-[state='in-stock']:bg-green-500 data-[state='limited-stock']:bg-yellow-500 data-[state='out-of-stock']:bg-red-500 data-[state='pre-order']:bg-blue-500" />
+ *       <span className="text-sm font-medium">
+ *         {label}
+ *       </span>
+ *     </div>
+ *   ))}
+ * </Product.ProductVariant.Stock>
+ * ```
+ */
+export declare const ProductVariantStock: React.ForwardRefExoticComponent<ProductVariantStockProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for ProductVariantSKU component
  */
@@ -952,9 +1026,11 @@ export interface ProductVariantWeightProps {
 export declare const ProductVariantWeight: React.ForwardRefExoticComponent<ProductVariantWeightProps & React.RefAttributes<HTMLElement>>;
 /**
  * ProductVariant namespace containing product variant components
- * following the compound component pattern: Product.ProductVariant.SKU, Product.ProductVariant.Weight
+ * following the compound component pattern: Product.ProductVariant.Stock, Product.ProductVariant.SKU, Product.ProductVariant.Weight
  */
 export declare const ProductVariant: {
+    /** Product variant stock component */
+    readonly Stock: React.ForwardRefExoticComponent<ProductVariantStockProps & React.RefAttributes<HTMLElement>>;
     /** Product variant SKU component */
     readonly SKU: React.ForwardRefExoticComponent<ProductVariantSKUProps & React.RefAttributes<HTMLElement>>;
     /** Product variant weight component */

package/dist/react/Product.js

@@ -51,6 +51,7 @@ var TestIds;
     TestIds["productVariant"] = "product-variant";
     TestIds["productVariantSku"] = "product-variant-sku";
     TestIds["productVariantWeight"] = "product-variant-weight";
+    TestIds["productVariantStock"] = "product-variant-stock";
     TestIds["productModifiers"] = "product-modifiers";
     TestIds["productModifierOptions"] = "product-modifier-options";
     TestIds["productModifierOption"] = "product-modifier-option";
@@ -949,6 +950,113 @@ export const Action = {
     /** Pre-order action button */
     PreOrder: ProductActionPreOrder,
 };
+/**
+ * Helper function to determine stock status and label based on availability and pre-order settings
+ */
+function getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, labels) {
+    // Pre-order takes precedence
+    if (isPreOrderEnabled) {
+        return {
+            status: 'pre-order',
+            label: labels.preOrder,
+        };
+    }
+    // Handle stock status based on availability
+    if (inStock) {
+        switch (availabilityStatus) {
+            case InventoryAvailabilityStatus.IN_STOCK:
+                return {
+                    status: 'in-stock',
+                    label: labels.inStock,
+                };
+            case InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK:
+                return {
+                    status: 'limited-stock',
+                    label: labels.limitedStock,
+                };
+            default:
+                return {
+                    status: 'in-stock',
+                    label: labels.inStock,
+                };
+        }
+    }
+    return {
+        status: 'out-of-stock',
+        label: labels.outOfStock,
+    };
+}
+/**
+ * Displays the selected variant stock status with customizable rendering and labels,
+ * including pre-order support. Similar to Product.Stock but for the selected variant.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.ProductVariant.Stock
+ *   className="stock-indicator"
+ *   labels={{
+ *     inStock: 'In Stock',
+ *     limitedStock: 'Limited Stock',
+ *     outOfStock: 'Out of Stock',
+ *     preOrder: 'Available for Pre-order'
+ *   }}
+ * />
+ *
+ * // asChild with primitive
+ * <Product.ProductVariant.Stock asChild>
+ *   <div className="variant-stock-status" />
+ * </Product.ProductVariant.Stock>
+ *
+ * // asChild with react component
+ * <Product.ProductVariant.Stock
+ *   labels={{
+ *     inStock: 'Available',
+ *     limitedStock: 'Low Stock',
+ *     outOfStock: 'Sold Out',
+ *     preOrder: 'Pre-order Now'
+ *   }}
+ *   asChild
+ * >
+ *   {React.forwardRef(({status, label, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       className="flex items-center gap-2 data-[state='in-stock']:text-green-600 data-[state='limited-stock']:text-yellow-600 data-[state='out-of-stock']:text-red-600 data-[state='pre-order']:text-blue-600"
+ *     >
+ *       <div className="w-3 h-3 rounded-full data-[state='in-stock']:bg-green-500 data-[state='limited-stock']:bg-yellow-500 data-[state='out-of-stock']:bg-red-500 data-[state='pre-order']:bg-blue-500" />
+ *       <span className="text-sm font-medium">
+ *         {label}
+ *       </span>
+ *     </div>
+ *   ))}
+ * </Product.ProductVariant.Stock>
+ * ```
+ */
+export const ProductVariantStock = React.forwardRef((props, ref) => {
+    const { asChild, children, className, labels } = props;
+    return (_jsx(ProductVariantSelector.Stock, { children: ({ inStock, isPreOrderEnabled, availabilityStatus, currentVariantId, }) => {
+            // Only render if we have a current variant selected
+            if (!currentVariantId && !availabilityStatus) {
+                return null;
+            }
+            // Default labels
+            const defaultLabels = {
+                inStock: 'In Stock',
+                limitedStock: 'Limited Stock',
+                outOfStock: 'Out of Stock',
+                preOrder: 'Available for Pre-order',
+            };
+            const finalLabels = { ...defaultLabels, ...labels };
+            // Get status and label using the helper function
+            const { status, label } = getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, finalLabels);
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariantStock, "data-state": status, customElement: children, customElementProps: {
+                    status,
+                    label,
+                }, content: label, children: _jsx("span", { children: label }) }));
+        } }));
+});
 /**
  * Displays the selected variant SKU with customizable rendering following the documented API.
  *
@@ -1019,9 +1127,11 @@ export const ProductVariantWeight = React.forwardRef((props, ref) => {
 });
 /**
  * ProductVariant namespace containing product variant components
- * following the compound component pattern: Product.ProductVariant.SKU, Product.ProductVariant.Weight
+ * following the compound component pattern: Product.ProductVariant.Stock, Product.ProductVariant.SKU, Product.ProductVariant.Weight
  */
 export const ProductVariant = {
+    /** Product variant stock component */
+    Stock: ProductVariantStock,
     /** Product variant SKU component */
     SKU: ProductVariantSKU,
     /** Product variant weight component */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.84",
+  "version": "0.0.85",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",