@wix/headless-stores 0.0.61 → 0.0.64

package/dist/react/Product.js

@@ -1,4 +1,5 @@
 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 { AsChildSlot } from '@wix/headless-utils/react';
 import { MediaGallery } from '@wix/headless-media/react';
@@ -39,6 +40,8 @@ var TestIds;
     TestIds["productCompareAtPrice"] = "product-compare-at-price";
     TestIds["productSlug"] = "product-slug";
     TestIds["productRaw"] = "product-raw";
+    TestIds["productRibbon"] = "product-ribbon";
+    TestIds["productStock"] = "product-stock";
     TestIds["productVariants"] = "product-variants";
     TestIds["productVariantOptions"] = "product-variant-options";
     TestIds["productVariantOption"] = "product-variant-option";
@@ -68,9 +71,10 @@ var TestIds;
  * ```
  */
 export function Root(props) {
-    return (_jsx(CoreProduct.Root, { productServiceConfig: { product: props.product }, "data-testid": TestIds.productRoot, children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: {
+    const { children, product, ...attrs } = props;
+    return (_jsx(CoreProduct.Root, { productServiceConfig: { product: props.product }, children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: {
                 media: props.product.media?.itemsInfo?.items ?? [],
-            }, children: _jsx(ProductVariantSelector.Root, { children: _jsx(ProductModifiers.Root, { children: _jsx(SelectedVariant.Root, { children: props.children }) }) }) }) }));
+            }, children: _jsx(ProductVariantSelector.Root, { children: _jsx(ProductModifiers.Root, { children: _jsx(SelectedVariant.Root, { children: _jsx(AsChildSlot, { ...attrs, children: children }) }) }) }) }) }));
 }
 /**
  * Displays the product name with customizable rendering following the documented API.
@@ -287,6 +291,120 @@ export const Raw = React.forwardRef((props, ref) => {
             return (_jsx(AsChildSlot, { ref: ref, className: className, "data-testid": TestIds.productRaw, customElement: children, customElementProps: { product } }));
         } }));
 });
+/**
+ * Displays the product ribbon with customizable rendering following the documented API.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.Ribbon className="absolute top-2 left-2 bg-red-500 text-white px-2 py-1 text-xs rounded" />
+ *
+ * // asChild with primitive
+ * <Product.Ribbon asChild>
+ *   <span className="ribbon-badge" />
+ * </Product.Ribbon>
+ *
+ * // asChild with react component
+ * <Product.Ribbon asChild>
+ *   {React.forwardRef(({ribbon, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="ribbon-badge">
+ *       {ribbon}
+ *     </div>
+ *   ))}
+ * </Product.Ribbon>
+ * ```
+ */
+export const Ribbon = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreProduct.Ribbon, { children: ({ ribbon, hasRibbon }) => {
+            // Don't render anything if there's no ribbon
+            if (!hasRibbon) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productRibbon, customElement: children, customElementProps: { ribbon }, content: ribbon, children: _jsx("span", { children: ribbon }) }));
+        } }));
+});
+/**
+ * Displays the product stock status with customizable rendering and labels following the documented API.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.Stock
+ *   className="stock-indicator"
+ *   labels={{
+ *     inStock: 'In Stock',
+ *     limitedStock: 'Limited Stock',
+ *     outOfStock: 'Out of Stock'
+ *   }}
+ * />
+ *
+ * // asChild with primitive
+ * <Product.Stock asChild>
+ *   <div className="stock-status" />
+ * </Product.Stock>
+ *
+ * // asChild with react component
+ * <Product.Stock
+ *   labels={{
+ *     inStock: 'Available',
+ *     limitedStock: 'Low Stock',
+ *     outOfStock: 'Sold Out'
+ *   }}
+ *   asChild
+ * >
+ *   {React.forwardRef(({status, label, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       className="flex items-center gap-1 data-[state='in-stock']:text-green-600 data-[state='limited-stock']:text-yellow-600 data-[state='out-of-stock']:text-red-600"
+ *     >
+ *       <div className="w-2 h-2 rounded-full data-[state='in-stock']:bg-green-500 data-[state='limited-stock']:bg-yellow-500 data-[state='out-of-stock']:bg-red-500" />
+ *       <span className="text-xs font-medium">
+ *         {label}
+ *       </span>
+ *     </div>
+ *   ))}
+ * </Product.Stock>
+ * ```
+ */
+export const Stock = React.forwardRef((props, ref) => {
+    const { asChild, children, className, labels } = props;
+    return (_jsx(CoreProduct.Content, { children: ({ product }) => {
+            const availabilityStatus = product.inventory?.availabilityStatus;
+            // Default labels
+            const defaultLabels = {
+                inStock: 'In Stock',
+                limitedStock: 'Partially Out of Stock',
+                outOfStock: 'Out of Stock',
+            };
+            const finalLabels = { ...defaultLabels, ...labels };
+            // Determine status based on availabilityStatus
+            let status;
+            let label;
+            switch (availabilityStatus) {
+                case InventoryAvailabilityStatus.IN_STOCK:
+                    status = 'in-stock';
+                    label = finalLabels.inStock;
+                    break;
+                case InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK:
+                    status = 'limited-stock';
+                    label = finalLabels.limitedStock;
+                    break;
+                case InventoryAvailabilityStatus.OUT_OF_STOCK:
+                default:
+                    status = 'out-of-stock';
+                    label = finalLabels.outOfStock;
+                    break;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productStock, "data-state": status, customElement: children, customElementProps: {
+                    status,
+                    label,
+                }, content: label, children: _jsx("span", { children: label }) }));
+        } }));
+});
 /**
  * Container for product variant selection system.
  * Does not render when there are no variants.

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

@@ -183,3 +183,43 @@ export interface ProductSlugRenderProps {
  * ```
  */
 export declare function Slug(props: ProductSlugProps): import("react").ReactNode;
+/**
+ * Props for ProductRibbon headless component
+ */
+export interface ProductRibbonProps {
+    /** Render prop function that receives product ribbon data */
+    children: (props: ProductRibbonRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ProductRibbon component
+ */
+export interface ProductRibbonRenderProps {
+    /** Product ribbon text */
+    ribbon: string | null;
+    /** Whether the product has a ribbon */
+    hasRibbon: boolean;
+}
+/**
+ * Headless component for product ribbon display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductRibbonDisplay() {
+ *   return (
+ *     <Product.Ribbon>
+ *       {({ ribbon, hasRibbon }) => (
+ *         hasRibbon ? (
+ *           <span className="ribbon-badge">
+ *             {ribbon}
+ *           </span>
+ *         ) : null
+ *       )}
+ *     </Product.Ribbon>
+ *   );
+ * }
+ * ```
+ */
+export declare function Ribbon(props: ProductRibbonProps): import("react").ReactNode;

package/dist/react/core/Product.js

@@ -155,3 +155,36 @@ export function Slug(props) {
         slug,
     });
 }
+/**
+ * Headless component for product ribbon display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductRibbonDisplay() {
+ *   return (
+ *     <Product.Ribbon>
+ *       {({ ribbon, hasRibbon }) => (
+ *         hasRibbon ? (
+ *           <span className="ribbon-badge">
+ *             {ribbon}
+ *           </span>
+ *         ) : null
+ *       )}
+ *     </Product.Ribbon>
+ *   );
+ * }
+ * ```
+ */
+export function Ribbon(props) {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    const ribbon = product.ribbon?.name || null;
+    const hasRibbon = !!ribbon;
+    return props.children({
+        ribbon,
+        hasRibbon,
+    });
+}

package/dist/react/core/ProductListFilters.js

@@ -52,6 +52,10 @@ function buildSearchFilterData(availableOptions, availableInventoryStatuses, ava
                     ? name.toLowerCase()
                     : name;
             },
+            valueBgColorFormatter: (value) => {
+                const choice = option.choices.find((c) => c.id === value);
+                return choice?.colorCode || null;
+            },
         })),
         // Inventory status - use actual search field name
         {

package/dist/services/products-list-service.js

@@ -323,15 +323,7 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
             }
             try {
                 isLoadingSignal.set(true);
-                const affectiveSearchOptions = searchOptions.cursorPaging?.cursor
-                    ? {
-                        cursorPaging: {
-                            cursor: searchOptions.cursorPaging.cursor,
-                            limit: searchOptions.cursorPaging.limit,
-                        },
-                    }
-                    : searchOptions;
-                const result = await fetchProducts(affectiveSearchOptions);
+                const result = await fetchProducts(searchOptions);
                 productsSignal.set(result.products ?? []);
                 pagingMetadataSignal.set(result.pagingMetadata);
             }
@@ -344,6 +336,29 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
         });
     }
     firstRun = false;
+    const loadMoreCursor = async (count) => {
+        const affectiveSearchOptions = {
+            cursorPaging: {
+                cursor: pagingMetadataSignal.get().cursors?.next,
+                limit: DEFAULT_QUERY_LIMIT || count,
+            },
+        };
+        try {
+            isLoadingSignal.set(true);
+            const result = await fetchProducts(affectiveSearchOptions);
+            productsSignal.set([
+                ...productsSignal.get(),
+                ...(result.products ?? []),
+            ]);
+            pagingMetadataSignal.set(result.pagingMetadata);
+        }
+        catch (error) {
+            errorSignal.set(error instanceof Error ? error.message : 'Unknown error');
+        }
+        finally {
+            isLoadingSignal.set(false);
+        }
+    };
     return {
         products: productsSignal,
         searchOptions: searchOptionsSignal,
@@ -391,14 +406,7 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
         isLoading: isLoadingSignal,
         error: errorSignal,
         loadMore: (count) => {
-            const currentOptions = searchOptionsSignal.peek();
-            searchOptionsSignal.set({
-                ...currentOptions,
-                cursorPaging: {
-                    cursor: pagingMetadataSignal.get().cursors?.next,
-                    limit: currentOptions.cursorPaging?.limit ?? 0 + count,
-                },
-            });
+            loadMoreCursor(count);
         },
         hasMoreProducts: signalsService.computed(() => pagingMetadataSignal.get().hasNext ?? false),
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.61",
+  "version": "0.0.64",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",
@@ -62,10 +62,10 @@
     "@wix/auto_sdk_stores_read-only-variants-v-3": "^1.0.23",
     "@wix/ecom": "^1.0.1278",
     "@wix/essentials": "^0.1.24",
-    "@wix/headless-components": "0.0.3",
-    "@wix/headless-ecom": "0.0.17",
-    "@wix/headless-media": "^0.0.11",
-    "@wix/headless-utils": "^0.0.2",
+    "@wix/headless-components": "workspace:*",
+    "@wix/headless-ecom": "workspace:*",
+    "@wix/headless-media": "workspace:*",
+    "@wix/headless-utils": "workspace:*",
     "@wix/redirects": "^1.0.83",
     "@wix/services-definitions": "^0.1.4",
     "@wix/services-manager-react": "^0.1.26"