@wix/headless-stores 0.0.54 → 0.0.55

package/cjs/dist/services/selected-variant-service.js

@@ -249,7 +249,7 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
         else if (prod?.compareAtPriceRange?.minValue?.amount) {
             rawAmount = prod.compareAtPriceRange.minValue.amount;
         }
-        return rawAmount ? `$${rawAmount}` : null;
+        return rawAmount && rawAmount !== '0' ? `$${rawAmount}` : null;
     });
     const isInStock = signalsService.computed(() => {
         const variant = currentVariant.get();

package/dist/react/Product.d.ts

@@ -188,6 +188,64 @@ export interface CompareAtPriceProps extends AsChildProps<{
  * ```
  */
 export declare const CompareAtPrice: React.ForwardRefExoticComponent<CompareAtPriceProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Slug component
+ * @interface SlugProps
+ */
+export interface SlugProps extends AsChildProps<{
+    slug: string;
+}> {
+}
+/**
+ * Product Slug component that displays the product's slug
+ *
+ * @component
+ * @order 6
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductSlugLink() {
+ *   return (
+ *     <Product.Slug>
+ *       {({ slug }) => (
+ *         <a href={`/product/${slug}`}>
+ *           View Product Details
+ *         </a>
+ *       )}
+ *     </Product.Slug>
+ *   );
+ * }
+ * ```
+ */
+export declare const Slug: React.ForwardRefExoticComponent<SlugProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product Raw component
+ */
+export interface RawProps extends AsChildProps<{
+    product: V3Product;
+}> {
+}
+/**
+ * Provides access to the raw product data for advanced use cases.
+ * Similar to Category.Raw, this should only be used when you need custom access to product data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Custom rendering with forwardRef
+ * <Product.Raw asChild>
+ *   {React.forwardRef(({product, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="product-debug">
+ *       <span>Product ID: {product._id}</span>
+ *       <span>SKU: {product.sku}</span>
+ *       <span>Inventory: {product.inventory?.quantity}</span>
+ *     </div>
+ *   ))}
+ * </Product.Raw>
+ * ```
+ */
+export declare const Raw: React.ForwardRefExoticComponent<RawProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for Product Variants container
  */
@@ -388,4 +446,47 @@ export interface ModifierOptionRepeaterProps {
  * @component
  */
 export declare const ModifierOptionRepeater: React.ForwardRefExoticComponent<ModifierOptionRepeaterProps & React.RefAttributes<HTMLElement>>;
-export {};
+/**
+ * Props for Product MediaGallery component
+ */
+export interface ProductMediaGalleryProps {
+    children: React.ReactNode;
+    infinite?: boolean;
+    autoPlay?: {
+        direction?: 'forward' | 'backward';
+        intervalMs?: number;
+    };
+}
+/**
+ * Container for product media gallery.
+ * Renders a MediaGallery.Root with the product media items.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.MediaGallery
+ *   infinite={true}
+ *   autoPlay={{ direction: "forward", intervalMs: 5000 }}
+ * >
+ *   <MediaGallery.Viewport />
+ *   <MediaGallery.Previous />
+ *   <MediaGallery.Next />
+ *   <MediaGallery.Thumbnails>
+ *     <MediaGallery.ThumbnailRepeater>
+ *       <MediaGallery.ThumbnailItem />
+ *     </MediaGallery.ThumbnailRepeater>
+ *   </MediaGallery.Thumbnails>
+ * </Product.MediaGallery>
+ *
+ * // Simple usage
+ * <Product.MediaGallery>
+ *   <MediaGallery.Viewport className="rounded-lg" />
+ * </Product.MediaGallery>
+ * ```
+ */
+export declare const ProductMediaGallery: React.ForwardRefExoticComponent<ProductMediaGalleryProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Alias for ProductMediaGallery to match the documented API
+ */
+export { ProductMediaGallery as MediaGallery };

package/dist/react/Product.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { renderAsChild } from '../utils/index.js';
+import { MediaGallery } from '@wix/headless-media/react';
 import * as CoreProduct from './core/Product.js';
 import * as ProductVariantSelector from './core/ProductVariantSelector.js';
 import * as ProductModifiers from './core/ProductModifiers.js';
@@ -36,12 +37,15 @@ var TestIds;
     TestIds["productDescription"] = "product-description";
     TestIds["productPrice"] = "product-price";
     TestIds["productCompareAtPrice"] = "product-compare-at-price";
+    TestIds["productSlug"] = "product-slug";
+    TestIds["productRaw"] = "product-raw";
     TestIds["productVariants"] = "product-variants";
     TestIds["productVariantOptions"] = "product-variant-options";
     TestIds["productVariantOption"] = "product-variant-option";
     TestIds["productModifiers"] = "product-modifiers";
     TestIds["productModifierOptions"] = "product-modifier-options";
     TestIds["productModifierOption"] = "product-modifier-option";
+    TestIds["productMediaGallery"] = "product-media-gallery";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides all necessary service contexts for a complete product experience.
@@ -64,7 +68,9 @@ var TestIds;
  * ```
  */
 export function Root(props) {
-    return (_jsx(CoreProduct.Root, { productServiceConfig: { product: props.product }, "data-testid": TestIds.productRoot, children: _jsx(ProductVariantSelector.Root, { children: _jsx(ProductModifiers.Root, { children: _jsx(SelectedVariant.Root, { children: props.children }) }) }) }));
+    return (_jsx(CoreProduct.Root, { productServiceConfig: { product: props.product }, "data-testid": TestIds.productRoot, 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 }) }) }) }) }));
 }
 /**
  * Displays the product name with customizable rendering following the documented API.
@@ -281,6 +287,90 @@ export const CompareAtPrice = React.forwardRef((props, ref) => {
             return (_jsx("span", { className: className, ...attributes, ref: ref, children: compareAtPrice }));
         } }));
 });
+/**
+ * Product Slug component that displays the product's slug
+ *
+ * @component
+ * @order 6
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductSlugLink() {
+ *   return (
+ *     <Product.Slug>
+ *       {({ slug }) => (
+ *         <a href={`/product/${slug}`}>
+ *           View Product Details
+ *         </a>
+ *       )}
+ *     </Product.Slug>
+ *   );
+ * }
+ * ```
+ */
+export const Slug = React.forwardRef((props, ref) => {
+    const { asChild, children } = props;
+    const testId = TestIds.productSlug;
+    return (_jsx(CoreProduct.Slug, { children: ({ slug }) => {
+            const attributes = {
+                'data-testid': testId,
+            };
+            const slugData = { slug };
+            if (asChild) {
+                const rendered = renderAsChild({
+                    children,
+                    props: slugData,
+                    ref,
+                    content: slug,
+                    attributes,
+                });
+                if (rendered)
+                    return rendered;
+            }
+            return (_jsx("span", { ...attributes, ref: ref, children: slug }));
+        } }));
+});
+/**
+ * Provides access to the raw product data for advanced use cases.
+ * Similar to Category.Raw, this should only be used when you need custom access to product data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Custom rendering with forwardRef
+ * <Product.Raw asChild>
+ *   {React.forwardRef(({product, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="product-debug">
+ *       <span>Product ID: {product._id}</span>
+ *       <span>SKU: {product.sku}</span>
+ *       <span>Inventory: {product.inventory?.quantity}</span>
+ *     </div>
+ *   ))}
+ * </Product.Raw>
+ * ```
+ */
+export const Raw = React.forwardRef((props, ref) => {
+    const { asChild, children } = props;
+    return (_jsx(CoreProduct.Content, { children: ({ product }) => {
+            const attributes = {
+                'data-testid': TestIds.productRaw,
+            };
+            if (asChild) {
+                const rendered = renderAsChild({
+                    children,
+                    props: { product },
+                    ref,
+                    content: null,
+                    attributes,
+                });
+                if (rendered)
+                    return rendered;
+            }
+            // Raw component should not render anything by default when not using asChild
+            return null;
+        } }));
+});
 /**
  * Container for product variant selection system.
  * Does not render when there are no variants.
@@ -537,3 +627,50 @@ export const ModifierOptionRepeater = React.forwardRef((props, _ref) => {
                     }, allowedTypes: allowedTypes, children: children })) }, modifier._id));
         }) }));
 });
+/**
+ * Container for product media gallery.
+ * Renders a MediaGallery.Root with the product media items.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.MediaGallery
+ *   infinite={true}
+ *   autoPlay={{ direction: "forward", intervalMs: 5000 }}
+ * >
+ *   <MediaGallery.Viewport />
+ *   <MediaGallery.Previous />
+ *   <MediaGallery.Next />
+ *   <MediaGallery.Thumbnails>
+ *     <MediaGallery.ThumbnailRepeater>
+ *       <MediaGallery.ThumbnailItem />
+ *     </MediaGallery.ThumbnailRepeater>
+ *   </MediaGallery.Thumbnails>
+ * </Product.MediaGallery>
+ *
+ * // Simple usage
+ * <Product.MediaGallery>
+ *   <MediaGallery.Viewport className="rounded-lg" />
+ * </Product.MediaGallery>
+ * ```
+ */
+export const ProductMediaGallery = React.forwardRef((props, ref) => {
+    const { children, infinite, autoPlay, ...otherProps } = props;
+    return (_jsx(CoreProduct.Media, { children: ({ mediaItems, mainMedia }) => {
+            const media = mediaItems.length > 0 ? mediaItems : mainMedia ? [mainMedia] : [];
+            const mediaGalleryServiceConfig = {
+                media,
+                infinite,
+                autoPlay,
+            };
+            const attributes = {
+                'data-testid': TestIds.productMediaGallery,
+            };
+            return (_jsx("div", { ...attributes, ref: ref, ...otherProps, children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: mediaGalleryServiceConfig, children: children }) }));
+        } }));
+});
+/**
+ * Alias for ProductMediaGallery to match the documented API
+ */
+export { ProductMediaGallery as MediaGallery };

package/dist/react/ProductList.d.ts

@@ -0,0 +1,116 @@
+import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
+import React from 'react';
+import type { ProductsListSearchServiceConfig } from '../services/products-list-search-service.js';
+import type { ProductsListServiceConfig } from '../services/products-list-service.js';
+/**
+ * Props for the ProductList root component following the documented API
+ */
+export interface ProductListRootProps {
+    children: React.ReactNode;
+    products?: V3Product[];
+    productsListConfig?: ProductsListServiceConfig;
+    productsListSearchConfig?: ProductsListSearchServiceConfig;
+    className?: string;
+}
+/**
+ * Root component that provides the ProductList service context for rendering product lists.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList } from '@wix/stores/components';
+ *
+ * function ProductListPage({ products }) {
+ *   return (
+ *     <ProductList.Root products={products}>
+ *       <ProductList.Products>
+ *         <ProductList.ProductRepeater>
+ *           <Product.Name />
+ *           <Product.Price />
+ *         </ProductList.ProductRepeater>
+ *       </ProductList.Products>
+ *     </ProductList.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<ProductListRootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ProductList Raw component
+ */
+export interface RawProps {
+    children: ((props: {
+        totalProducts: number;
+        displayedProducts: number;
+        isFiltered: boolean;
+    }) => React.ReactNode) | React.ReactNode;
+}
+/**
+ * Raw component that provides direct access to product list data.
+ * Similar to Product.Raw, this should only be used when you need custom access to list data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.Raw>
+ *   {({ totalProducts, displayedProducts, isFiltered }) => (
+ *     <div className="text-content-muted">
+ *       Showing {displayedProducts} of {totalProducts} products
+ *       {isFiltered && <span className="ml-2 text-brand-primary">(Filtered)</span>}
+ *     </div>
+ *   )}
+ * </ProductList.Raw>
+ * ```
+ */
+export declare const Raw: React.ForwardRefExoticComponent<RawProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ProductList Products component
+ */
+export interface ProductsProps {
+    children: React.ReactNode;
+    emptyState?: React.ReactNode;
+    infiniteScroll?: boolean;
+    pageSize?: number;
+    className?: string;
+}
+/**
+ * Container for the product list with empty state support.
+ * Follows List Container Level pattern.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.Products emptyState={<div>No products found</div>}>
+ *   <ProductList.ProductRepeater>
+ *     <Product.Name />
+ *     <Product.Price />
+ *   </ProductList.ProductRepeater>
+ * </ProductList.Products>
+ * ```
+ */
+export declare const Products: React.ForwardRefExoticComponent<ProductsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ProductList ProductRepeater component
+ */
+export interface ProductRepeaterProps {
+    children: React.ReactNode;
+}
+/**
+ * Repeater component that renders Product.Root for each product.
+ * Follows Repeater Level pattern.
+ * Note: Repeater components do NOT support asChild as per architecture rules.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.ProductRepeater>
+ *   <Product.Name />
+ *   <Product.Price />
+ *   <Product.MediaGallery>
+ *     <MediaGallery.Viewport />
+ *   </Product.MediaGallery>
+ * </ProductList.ProductRepeater>
+ * ```
+ */
+export declare const ProductRepeater: React.ForwardRefExoticComponent<ProductRepeaterProps & React.RefAttributes<HTMLElement>>;

package/dist/react/ProductList.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useService } from '@wix/services-manager-react';
+import React from 'react';
+import { ProductsListServiceDefinition } from '../services/products-list-service.js';
+import * as CoreProductList from './core/ProductList.js';
+import * as Product from './Product.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["productListRoot"] = "product-list-root";
+    TestIds["productListProducts"] = "product-list-products";
+    TestIds["productListItem"] = "product-list-item";
+})(TestIds || (TestIds = {}));
+/**
+ * Root component that provides the ProductList service context for rendering product lists.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList } from '@wix/stores/components';
+ *
+ * function ProductListPage({ products }) {
+ *   return (
+ *     <ProductList.Root products={products}>
+ *       <ProductList.Products>
+ *         <ProductList.ProductRepeater>
+ *           <Product.Name />
+ *           <Product.Price />
+ *         </ProductList.ProductRepeater>
+ *       </ProductList.Products>
+ *     </ProductList.Root>
+ *   );
+ * }
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { children, products, productsListConfig, productsListSearchConfig, className, } = props;
+    const serviceConfig = productsListConfig || {
+        products: products || [],
+        searchOptions: {
+            cursorPaging: { limit: 10 },
+        },
+        pagingMetadata: {
+            count: products?.length || 0,
+        },
+        aggregations: {}, // Empty aggregation data
+    };
+    return (_jsx(CoreProductList.Root, { productsListConfig: serviceConfig, productsListSearchConfig: productsListSearchConfig, children: _jsx(RootContent, { children: children, className: className, ref: ref }) }));
+});
+/**
+ * Internal component to handle the Root content with service access
+ */
+const RootContent = React.forwardRef((props, ref) => {
+    const { children, className } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const contextProducts = productsListService.products.get();
+    const pagingMetadata = productsListService.pagingMetadata.get();
+    const displayedProducts = contextProducts.length;
+    const totalProducts = pagingMetadata.count || contextProducts.length;
+    const isFiltered = false; // TODO: Implement filtering detection
+    const attributes = {
+        'data-testid': TestIds.productListRoot,
+        'data-total-products': totalProducts,
+        'data-displayed-products': displayedProducts,
+        'data-filtered': isFiltered,
+        className,
+    };
+    return (_jsx("div", { ...attributes, ref: ref, children: children }));
+});
+/**
+ * Raw component that provides direct access to product list data.
+ * Similar to Product.Raw, this should only be used when you need custom access to list data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.Raw>
+ *   {({ totalProducts, displayedProducts, isFiltered }) => (
+ *     <div className="text-content-muted">
+ *       Showing {displayedProducts} of {totalProducts} products
+ *       {isFiltered && <span className="ml-2 text-brand-primary">(Filtered)</span>}
+ *     </div>
+ *   )}
+ * </ProductList.Raw>
+ * ```
+ */
+export const Raw = React.forwardRef((props, _ref) => {
+    const { children } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const products = productsListService.products.get();
+    const pagingMetadata = productsListService.pagingMetadata.get();
+    const displayedProducts = products.length;
+    const totalProducts = pagingMetadata.count || products.length;
+    const isFiltered = false; // TODO: Implement filtering detection
+    return typeof children === 'function'
+        ? children({ totalProducts, displayedProducts, isFiltered })
+        : children;
+});
+/**
+ * Container for the product list with empty state support.
+ * Follows List Container Level pattern.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.Products emptyState={<div>No products found</div>}>
+ *   <ProductList.ProductRepeater>
+ *     <Product.Name />
+ *     <Product.Price />
+ *   </ProductList.ProductRepeater>
+ * </ProductList.Products>
+ * ```
+ */
+export const Products = React.forwardRef((props, ref) => {
+    const { children, emptyState, infiniteScroll = true, pageSize = 0, className, } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const products = productsListService.products.get();
+    const hasProducts = products.length > 0;
+    if (!hasProducts) {
+        return emptyState || null;
+    }
+    const attributes = {
+        'data-testid': TestIds.productListProducts,
+        'data-empty': !hasProducts,
+        'data-infinite-scroll': infiniteScroll,
+        'data-page-size': pageSize,
+        className,
+    };
+    return (_jsx("div", { ...attributes, ref: ref, children: children }));
+});
+/**
+ * Repeater component that renders Product.Root for each product.
+ * Follows Repeater Level pattern.
+ * Note: Repeater components do NOT support asChild as per architecture rules.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.ProductRepeater>
+ *   <Product.Name />
+ *   <Product.Price />
+ *   <Product.MediaGallery>
+ *     <MediaGallery.Viewport />
+ *   </Product.MediaGallery>
+ * </ProductList.ProductRepeater>
+ * ```
+ */
+export const ProductRepeater = React.forwardRef((props, _ref) => {
+    const { children } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const products = productsListService.products.get();
+    const hasProducts = products.length > 0;
+    if (!hasProducts)
+        return null;
+    return (_jsx(_Fragment, { children: products.map((product) => (_jsx(Product.Root, { product: product, "data-testid": TestIds.productListItem, "data-product-id": product._id, "data-product-available": true, children: children }, product._id))) }));
+});

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

@@ -129,7 +129,8 @@ export interface ProductMediaProps {
     children: (props: ProductMediaRenderProps) => React.ReactNode;
 }
 export interface ProductMediaRenderProps {
-    media: ProductMedia[];
+    mediaItems: ProductMedia[];
+    mainMedia?: ProductMedia;
 }
 export declare function Media(props: ProductMediaProps): import("react").ReactNode;
 export interface ProductProps {
@@ -146,3 +147,39 @@ export interface LoadingRenderProps {
     isLoading: boolean;
 }
 export declare function Loading(props: LoadingProps): import("react").ReactNode;
+/**
+ * Props for ProductSlug headless component
+ */
+export interface ProductSlugProps {
+    /** Render prop function that receives product slug data */
+    children: (props: ProductSlugRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ProductSlug component
+ */
+export interface ProductSlugRenderProps {
+    /** Product slug */
+    slug: string;
+}
+/**
+ * Headless component for product slug display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductSlugDisplay() {
+ *   return (
+ *     <Product.Slug>
+ *       {({ slug }) => (
+ *         <a href={`/product/${slug}`}>
+ *           View Product
+ *         </a>
+ *       )}
+ *     </Product.Slug>
+ *   );
+ * }
+ * ```
+ */
+export declare function Slug(props: ProductSlugProps): import("react").ReactNode;

package/dist/react/core/Product.js

@@ -105,9 +105,11 @@ export function Description(props) {
 export function Media(props) {
     const service = useService(ProductServiceDefinition);
     const product = service.product.get();
-    const media = product.media?.itemsInfo?.items ?? [];
+    const mainMedia = product.media?.main;
+    const mediaItems = product.media?.itemsInfo?.items ?? [];
     return props.children({
-        media,
+        mediaItems,
+        mainMedia,
     });
 }
 export function Content(props) {
@@ -124,3 +126,32 @@ export function Loading(props) {
         isLoading,
     });
 }
+/**
+ * Headless component for product slug display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductSlugDisplay() {
+ *   return (
+ *     <Product.Slug>
+ *       {({ slug }) => (
+ *         <a href={`/product/${slug}`}>
+ *           View Product
+ *         </a>
+ *       )}
+ *     </Product.Slug>
+ *   );
+ * }
+ * ```
+ */
+export function Slug(props) {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    const slug = product.slug;
+    return props.children({
+        slug,
+    });
+}

package/dist/react/index.d.ts

@@ -2,13 +2,14 @@ export * as CategoryListCore from './core/CategoryList.js';
 export * as CategoryCore from './core/Category.js';
 export * as ProductCore from './core/Product.js';
 export * as ProductModifiers from './core/ProductModifiers.js';
-export * as ProductList from './core/ProductList.js';
+export * as ProductListCore from './core/ProductList.js';
 export * as ProductListFilters from './core/ProductListFilters.js';
 export * as ProductListPagination from './core/ProductListPagination.js';
 export * as ProductListSort from './core/ProductListSort.js';
 export * as ProductVariantSelector from './core/ProductVariantSelector.js';
 export * as SelectedVariant from './core/SelectedVariant.js';
 export * as Product from './Product.js';
+export * as ProductList from './ProductList.js';
 export * as Option from './Option.js';
 export * as Choice from './Choice.js';
 export * as CategoryList from './CategoryList.js';