@wix/headless-stores 0.0.85 → 0.0.86

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

@@ -24,6 +24,14 @@ interface ModifiersContextValue {
  * Hook to access modifiers context
  */
 export declare function useModifiersContext(): ModifiersContextValue;
+/**
+ * Basic stock status type for product availability states
+ */
+export type BasicStockStatus = 'in-stock' | 'limited-stock' | 'out-of-stock';
+/**
+ * Extended stock status type including pre-order capability
+ */
+export type StockStatus = BasicStockStatus | 'can-pre-order';
 /**
  * Props for the Product root component following the documented API
  */
@@ -328,7 +336,7 @@ export interface StockProps {
     asChild?: boolean;
     /** Custom render function when using asChild */
     children?: AsChildChildren<{
-        status: 'in-stock' | 'limited-stock' | 'out-of-stock';
+        status: BasicStockStatus;
         label: string;
     }>;
     /** CSS classes to apply to the default element */
@@ -675,7 +683,7 @@ export interface ProductQuantitySubComponentProps {
 }
 /**
  * Product quantity selector component that integrates with the selected variant.
- * Provides quantity controls with stock validation and pre-order support.
+ * Provides quantity controls with stock validation and can-pre-order support.
  * Uses a compound component pattern with Root, Decrement, Input, Increment, and Raw sub-components.
  *
  * @component
@@ -737,7 +745,7 @@ export interface ProductQuantitySubComponentProps {
 export declare const ProductQuantity: React.ForwardRefExoticComponent<ProductQuantityProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * Product Quantity Decrement component.
- * Automatically handles disabled state based on stock and pre-order settings.
+ * Automatically handles disabled state based on stock and can-pre-order settings.
  * Must be used within Product.Quantity.Root.
  *
  * @component
@@ -859,7 +867,7 @@ export declare const ProductActionAddToCart: React.ForwardRefExoticComponent<Pro
 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.
+ * Handles can-pre-order functionality when products are not in stock.
  */
 export declare const ProductActionPreOrder: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
 /**
@@ -882,7 +890,7 @@ export interface ProductVariantStockProps {
     asChild?: boolean;
     /** Custom render function when using asChild */
     children?: AsChildChildren<{
-        status: 'in-stock' | 'limited-stock' | 'out-of-stock' | 'pre-order';
+        status: StockStatus;
         label: string;
     }>;
     /** CSS classes to apply to the default element */
@@ -895,13 +903,13 @@ export interface ProductVariantStockProps {
         limitedStock?: string;
         /** Label for out of stock state */
         outOfStock?: string;
-        /** Label for pre-order state */
+        /** Label for can-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.
+ * including can-pre-order support. Similar to Product.Stock but for the selected variant.
  *
  * @component
  * @example
@@ -936,9 +944,9 @@ export interface ProductVariantStockProps {
  *     <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"
+ *       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='can-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" />
+ *       <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='can-pre-order']:bg-blue-500" />
  *       <span className="text-sm font-medium">
  *         {label}
  *       </span>

package/cjs/dist/react/Product.js

@@ -59,7 +59,7 @@ var TestIds;
     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["productActionPreOrder"] = "product-action-can-pre-order";
     TestIds["productQuantity"] = "product-quantity";
     TestIds["productQuantityDecrement"] = "product-quantity-decrement";
     TestIds["productQuantityInput"] = "product-quantity-input";
@@ -692,7 +692,7 @@ export const ProductMediaGallery = React.forwardRef((props, ref) => {
 export { ProductMediaGallery as MediaGallery };
 /**
  * Product quantity selector component that integrates with the selected variant.
- * Provides quantity controls with stock validation and pre-order support.
+ * Provides quantity controls with stock validation and can-pre-order support.
  * Uses a compound component pattern with Root, Decrement, Input, Increment, and Raw sub-components.
  *
  * @component
@@ -769,7 +769,7 @@ export const ProductQuantity = React.forwardRef((props, ref) => {
 });
 /**
  * Product Quantity Decrement component.
- * Automatically handles disabled state based on stock and pre-order settings.
+ * Automatically handles disabled state based on stock and can-pre-order settings.
  * Must be used within Product.Quantity.Root.
  *
  * @component
@@ -917,7 +917,7 @@ export const ProductActionBuyNow = React.forwardRef((props, ref) => {
 });
 /**
  * Pre-Order action button component following the documented API.
- * Handles pre-order functionality when products are not in stock.
+ * Handles can-pre-order functionality when products are not in stock.
  */
 export const ProductActionPreOrder = React.forwardRef((props, ref) => {
     const { asChild, children, className, label, loadingState } = props;
@@ -951,13 +951,13 @@ export const Action = {
     PreOrder: ProductActionPreOrder,
 };
 /**
- * Helper function to determine stock status and label based on availability and pre-order settings
+ * Helper function to determine stock status and label based on availability and can-pre-order settings
  */
 function getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, labels) {
     // Pre-order takes precedence
-    if (isPreOrderEnabled) {
+    if (isPreOrderEnabled && !inStock) {
         return {
-            status: 'pre-order',
+            status: 'can-pre-order',
             label: labels.preOrder,
         };
     }
@@ -988,7 +988,7 @@ function getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, l
 }
 /**
  * Displays the selected variant stock status with customizable rendering and labels,
- * including pre-order support. Similar to Product.Stock but for the selected variant.
+ * including can-pre-order support. Similar to Product.Stock but for the selected variant.
  *
  * @component
  * @example
@@ -1023,9 +1023,9 @@ function getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, l
  *     <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"
+ *       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='can-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" />
+ *       <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='can-pre-order']:bg-blue-500" />
  *       <span className="text-sm font-medium">
  *         {label}
  *       </span>

package/dist/react/Product.d.ts

@@ -24,6 +24,14 @@ interface ModifiersContextValue {
  * Hook to access modifiers context
  */
 export declare function useModifiersContext(): ModifiersContextValue;
+/**
+ * Basic stock status type for product availability states
+ */
+export type BasicStockStatus = 'in-stock' | 'limited-stock' | 'out-of-stock';
+/**
+ * Extended stock status type including pre-order capability
+ */
+export type StockStatus = BasicStockStatus | 'can-pre-order';
 /**
  * Props for the Product root component following the documented API
  */
@@ -328,7 +336,7 @@ export interface StockProps {
     asChild?: boolean;
     /** Custom render function when using asChild */
     children?: AsChildChildren<{
-        status: 'in-stock' | 'limited-stock' | 'out-of-stock';
+        status: BasicStockStatus;
         label: string;
     }>;
     /** CSS classes to apply to the default element */
@@ -675,7 +683,7 @@ export interface ProductQuantitySubComponentProps {
 }
 /**
  * Product quantity selector component that integrates with the selected variant.
- * Provides quantity controls with stock validation and pre-order support.
+ * Provides quantity controls with stock validation and can-pre-order support.
  * Uses a compound component pattern with Root, Decrement, Input, Increment, and Raw sub-components.
  *
  * @component
@@ -737,7 +745,7 @@ export interface ProductQuantitySubComponentProps {
 export declare const ProductQuantity: React.ForwardRefExoticComponent<ProductQuantityProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * Product Quantity Decrement component.
- * Automatically handles disabled state based on stock and pre-order settings.
+ * Automatically handles disabled state based on stock and can-pre-order settings.
  * Must be used within Product.Quantity.Root.
  *
  * @component
@@ -859,7 +867,7 @@ export declare const ProductActionAddToCart: React.ForwardRefExoticComponent<Pro
 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.
+ * Handles can-pre-order functionality when products are not in stock.
  */
 export declare const ProductActionPreOrder: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
 /**
@@ -882,7 +890,7 @@ export interface ProductVariantStockProps {
     asChild?: boolean;
     /** Custom render function when using asChild */
     children?: AsChildChildren<{
-        status: 'in-stock' | 'limited-stock' | 'out-of-stock' | 'pre-order';
+        status: StockStatus;
         label: string;
     }>;
     /** CSS classes to apply to the default element */
@@ -895,13 +903,13 @@ export interface ProductVariantStockProps {
         limitedStock?: string;
         /** Label for out of stock state */
         outOfStock?: string;
-        /** Label for pre-order state */
+        /** Label for can-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.
+ * including can-pre-order support. Similar to Product.Stock but for the selected variant.
  *
  * @component
  * @example
@@ -936,9 +944,9 @@ export interface ProductVariantStockProps {
  *     <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"
+ *       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='can-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" />
+ *       <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='can-pre-order']:bg-blue-500" />
  *       <span className="text-sm font-medium">
  *         {label}
  *       </span>

package/dist/react/Product.js

@@ -59,7 +59,7 @@ var TestIds;
     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["productActionPreOrder"] = "product-action-can-pre-order";
     TestIds["productQuantity"] = "product-quantity";
     TestIds["productQuantityDecrement"] = "product-quantity-decrement";
     TestIds["productQuantityInput"] = "product-quantity-input";
@@ -692,7 +692,7 @@ export const ProductMediaGallery = React.forwardRef((props, ref) => {
 export { ProductMediaGallery as MediaGallery };
 /**
  * Product quantity selector component that integrates with the selected variant.
- * Provides quantity controls with stock validation and pre-order support.
+ * Provides quantity controls with stock validation and can-pre-order support.
  * Uses a compound component pattern with Root, Decrement, Input, Increment, and Raw sub-components.
  *
  * @component
@@ -769,7 +769,7 @@ export const ProductQuantity = React.forwardRef((props, ref) => {
 });
 /**
  * Product Quantity Decrement component.
- * Automatically handles disabled state based on stock and pre-order settings.
+ * Automatically handles disabled state based on stock and can-pre-order settings.
  * Must be used within Product.Quantity.Root.
  *
  * @component
@@ -917,7 +917,7 @@ export const ProductActionBuyNow = React.forwardRef((props, ref) => {
 });
 /**
  * Pre-Order action button component following the documented API.
- * Handles pre-order functionality when products are not in stock.
+ * Handles can-pre-order functionality when products are not in stock.
  */
 export const ProductActionPreOrder = React.forwardRef((props, ref) => {
     const { asChild, children, className, label, loadingState } = props;
@@ -951,13 +951,13 @@ export const Action = {
     PreOrder: ProductActionPreOrder,
 };
 /**
- * Helper function to determine stock status and label based on availability and pre-order settings
+ * Helper function to determine stock status and label based on availability and can-pre-order settings
  */
 function getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, labels) {
     // Pre-order takes precedence
-    if (isPreOrderEnabled) {
+    if (isPreOrderEnabled && !inStock) {
         return {
-            status: 'pre-order',
+            status: 'can-pre-order',
             label: labels.preOrder,
         };
     }
@@ -988,7 +988,7 @@ function getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, l
 }
 /**
  * Displays the selected variant stock status with customizable rendering and labels,
- * including pre-order support. Similar to Product.Stock but for the selected variant.
+ * including can-pre-order support. Similar to Product.Stock but for the selected variant.
  *
  * @component
  * @example
@@ -1023,9 +1023,9 @@ function getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, l
  *     <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"
+ *       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='can-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" />
+ *       <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='can-pre-order']:bg-blue-500" />
  *       <span className="text-sm font-medium">
  *         {label}
  *       </span>

package/package.json

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