@wix/headless-stores 0.0.34 → 0.0.36

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

@@ -1,5 +1,51 @@
 import { type Category } from "@wix/auto_sdk_categories_categories";
 import React, { type ReactNode } from "react";
+import { type CategoryServiceConfig } from "../services/category-service.js";
+import type { PropsWithChildren } from "react";
+/**
+ * Root component that provides the Category service context to its children.
+ * This component sets up the necessary services for managing category functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Category } from '@wix/stores/components';
+ *
+ * function CategoryNavigation({ categories }) {
+ *   return (
+ *     <Category.Root categoryServiceConfig={{ categories }}>
+ *       <div>
+ *         <Category.List>
+ *           {({ categories, selectedCategory, setSelectedCategory }) => (
+ *             <nav>
+ *               <button
+ *                 onClick={() => setSelectedCategory(null)}
+ *                 className={selectedCategory === null ? 'active' : ''}
+ *               >
+ *                 All Categories
+ *               </button>
+ *               {categories.map(category => (
+ *                 <button
+ *                   key={category.id}
+ *                   onClick={() => setSelectedCategory(category.id)}
+ *                   className={selectedCategory === category.id ? 'active' : ''}
+ *                 >
+ *                   {category.name}
+ *                 </button>
+ *               ))}
+ *             </nav>
+ *           )}
+ *         </Category.List>
+ *       </div>
+ *     </Category.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{
+    categoryServiceConfig?: CategoryServiceConfig;
+}>): import("react/jsx-runtime").JSX.Element;
 export interface CategoryListProps {
     children: (data: {
         categories: Category[];

package/cjs/dist/react/Category.js

@@ -1,6 +1,72 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useService } from "@wix/services-manager-react";
-import { CategoryServiceDefinition } from "../services/category-service.js";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { CategoryServiceDefinition, CategoryService, } from "../services/category-service.js";
+import { createServicesMap } from "@wix/services-manager";
+// Create navigation handler for category URLs
+const handleCategoryChange = (categoryId, category) => {
+    if (typeof window !== "undefined") {
+        let newPath = "/category";
+        if (categoryId !== null) {
+            // Use category slug for URL
+            if (!category?.slug) {
+                console.warn(`Category ${categoryId} has no slug, using category ID as fallback`);
+            }
+            const categorySlug = category?.slug || categoryId;
+            newPath = `/category/${categorySlug}`;
+        }
+        window.history.pushState(null, "Showing Category " + category?.name, newPath);
+    }
+};
+/**
+ * Root component that provides the Category service context to its children.
+ * This component sets up the necessary services for managing category functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Category } from '@wix/stores/components';
+ *
+ * function CategoryNavigation({ categories }) {
+ *   return (
+ *     <Category.Root categoryServiceConfig={{ categories }}>
+ *       <div>
+ *         <Category.List>
+ *           {({ categories, selectedCategory, setSelectedCategory }) => (
+ *             <nav>
+ *               <button
+ *                 onClick={() => setSelectedCategory(null)}
+ *                 className={selectedCategory === null ? 'active' : ''}
+ *               >
+ *                 All Categories
+ *               </button>
+ *               {categories.map(category => (
+ *                 <button
+ *                   key={category.id}
+ *                   onClick={() => setSelectedCategory(category.id)}
+ *                   className={selectedCategory === category.id ? 'active' : ''}
+ *                 >
+ *                   {category.name}
+ *                 </button>
+ *               ))}
+ *             </nav>
+ *           )}
+ *         </Category.List>
+ *       </div>
+ *     </Category.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(CategoryServiceDefinition, CategoryService, {
+            ...(props.categoryServiceConfig ?? {
+                categories: [],
+                initialCategoryId: null,
+            }),
+            onCategoryChange: handleCategoryChange,
+        }), children: props.children }));
+}
 /**
  * Headless component for displaying a list of categories
  *

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

@@ -1,7 +1,90 @@
 import React, { type ReactNode } from "react";
 import { type AvailableOptions, type FilterServiceAPI, type Filter } from "../services/filter-service.js";
 import { type V3Product } from "@wix/auto_sdk_stores_products-v-3";
+import type { PropsWithChildren } from "react";
 export type { AvailableOptions, Filter, FilterServiceAPI };
+/**
+ * Root component that provides the FilteredCollection service context to its children.
+ * This component sets up the necessary services for managing filtered collection functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function FilteredProductsPage() {
+ *   return (
+ *     <FilteredCollection.Root>
+ *       <div>
+ *         <FilteredCollection.Filters>
+ *           {({ applyFilters, clearFilters, currentFilters, availableOptions, isFiltered }) => (
+ *             <div className="filters">
+ *               <h3>Filters</h3>
+ *               <div className="price-filter">
+ *                 <label>Price Range</label>
+ *                 <input
+ *                   type="range"
+ *                   min={availableOptions.priceRange.min}
+ *                   max={availableOptions.priceRange.max}
+ *                   value={currentFilters.priceRange.min}
+ *                   onChange={(e) => applyFilters({
+ *                     ...currentFilters,
+ *                     priceRange: { ...currentFilters.priceRange, min: Number(e.target.value) }
+ *                   })}
+ *                 />
+ *               </div>
+ *               {isFiltered && (
+ *                 <button onClick={clearFilters}>Clear All Filters</button>
+ *               )}
+ *             </div>
+ *           )}
+ *         </FilteredCollection.Filters>
+ *
+ *         <FilteredCollection.Grid>
+ *           {({ products, isLoading, error, isEmpty, totalProducts, hasMoreProducts }) => (
+ *             <div>
+ *               {isLoading && <div>Loading filtered products...</div>}
+ *               {error && <div>Error: {error}</div>}
+ *               {isEmpty && <div>No products match your filters</div>}
+ *               {products.length > 0 && (
+ *                 <div>
+ *                   <p>Showing {products.length} of {totalProducts} products</p>
+ *                   <div className="filtered-grid">
+ *                     {products.map(product => (
+ *                       <FilteredCollection.Item key={product.id} product={product}>
+ *                         {({ title, image, price, available, slug }) => (
+ *                           <div className={`product-item ${!available ? 'unavailable' : ''}`}>
+ *                             {image && <img src={image} alt={title} />}
+ *                             <h3>{title}</h3>
+ *                             <div className="price">{price}</div>
+ *                             <a href={`/product/${slug}`}>View Details</a>
+ *                           </div>
+ *                         )}
+ *                       </FilteredCollection.Item>
+ *                     ))}
+ *                   </div>
+ *                   {hasMoreProducts && (
+ *                     <FilteredCollection.LoadMore>
+ *                       {({ loadMore, isLoading }) => (
+ *                         <button onClick={loadMore} disabled={isLoading}>
+ *                           {isLoading ? 'Loading...' : 'Load More'}
+ *                         </button>
+ *                       )}
+ *                     </FilteredCollection.LoadMore>
+ *                   )}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </FilteredCollection.Grid>
+ *       </div>
+ *     </FilteredCollection.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
 export interface FiltersLoadingProps {
     children: (data: {
         isFullyLoaded: boolean;

package/cjs/dist/react/FilteredCollection.js

@@ -1,8 +1,104 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useService } from "@wix/services-manager-react";
-import { CollectionServiceDefinition } from "../services/collection-service.js";
-import { FilterServiceDefinition, } from "../services/filter-service.js";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { CollectionServiceDefinition, CollectionService, } from "../services/collection-service.js";
+import { FilterServiceDefinition, FilterService, } from "../services/filter-service.js";
+import { CategoryServiceDefinition, CategoryService, } from "../services/category-service.js";
+import { SortServiceDefinition, SortService, } from "../services/sort-service.js";
+import { CatalogServiceDefinition, CatalogService, } from "../services/catalog-service.js";
 import { InventoryAvailabilityStatus, } from "@wix/auto_sdk_stores_products-v-3";
+import { createServicesMap } from "@wix/services-manager";
+/**
+ * Root component that provides the FilteredCollection service context to its children.
+ * This component sets up the necessary services for managing filtered collection functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function FilteredProductsPage() {
+ *   return (
+ *     <FilteredCollection.Root>
+ *       <div>
+ *         <FilteredCollection.Filters>
+ *           {({ applyFilters, clearFilters, currentFilters, availableOptions, isFiltered }) => (
+ *             <div className="filters">
+ *               <h3>Filters</h3>
+ *               <div className="price-filter">
+ *                 <label>Price Range</label>
+ *                 <input
+ *                   type="range"
+ *                   min={availableOptions.priceRange.min}
+ *                   max={availableOptions.priceRange.max}
+ *                   value={currentFilters.priceRange.min}
+ *                   onChange={(e) => applyFilters({
+ *                     ...currentFilters,
+ *                     priceRange: { ...currentFilters.priceRange, min: Number(e.target.value) }
+ *                   })}
+ *                 />
+ *               </div>
+ *               {isFiltered && (
+ *                 <button onClick={clearFilters}>Clear All Filters</button>
+ *               )}
+ *             </div>
+ *           )}
+ *         </FilteredCollection.Filters>
+ *
+ *         <FilteredCollection.Grid>
+ *           {({ products, isLoading, error, isEmpty, totalProducts, hasMoreProducts }) => (
+ *             <div>
+ *               {isLoading && <div>Loading filtered products...</div>}
+ *               {error && <div>Error: {error}</div>}
+ *               {isEmpty && <div>No products match your filters</div>}
+ *               {products.length > 0 && (
+ *                 <div>
+ *                   <p>Showing {products.length} of {totalProducts} products</p>
+ *                   <div className="filtered-grid">
+ *                     {products.map(product => (
+ *                       <FilteredCollection.Item key={product.id} product={product}>
+ *                         {({ title, image, price, available, slug }) => (
+ *                           <div className={`product-item ${!available ? 'unavailable' : ''}`}>
+ *                             {image && <img src={image} alt={title} />}
+ *                             <h3>{title}</h3>
+ *                             <div className="price">{price}</div>
+ *                             <a href={`/product/${slug}`}>View Details</a>
+ *                           </div>
+ *                         )}
+ *                       </FilteredCollection.Item>
+ *                     ))}
+ *                   </div>
+ *                   {hasMoreProducts && (
+ *                     <FilteredCollection.LoadMore>
+ *                       {({ loadMore, isLoading }) => (
+ *                         <button onClick={loadMore} disabled={isLoading}>
+ *                           {isLoading ? 'Loading...' : 'Load More'}
+ *                         </button>
+ *                       )}
+ *                     </FilteredCollection.LoadMore>
+ *                   )}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </FilteredCollection.Grid>
+ *       </div>
+ *     </FilteredCollection.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap()
+            .addService(CatalogServiceDefinition, CatalogService, {})
+            .addService(CategoryServiceDefinition, CategoryService, {
+            categories: [],
+            initialCategoryId: null,
+        })
+            .addService(SortServiceDefinition, SortService, {})
+            .addService(FilterServiceDefinition, FilterService, {})
+            .addService(CollectionServiceDefinition, CollectionService, {}), children: props.children }));
+}
 /**
  * Headless component for displaying a loading state for filters
  *

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

@@ -1,4 +1,80 @@
 import { type ConnectedModifier, type ConnectedModifierChoice } from "@wix/auto_sdk_stores_products-v-3";
+import type { PropsWithChildren } from "react";
+/**
+ * Root component that provides the ProductModifiers service context to its children.
+ * This component sets up the necessary services for managing product modifier functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ProductCustomization() {
+ *   return (
+ *     <ProductModifiers.Root>
+ *       <div>
+ *         <ProductModifiers.Modifiers>
+ *           {({ modifiers, hasModifiers, selectedModifiers, areAllRequiredModifiersFilled }) => (
+ *             <div>
+ *               {hasModifiers && (
+ *                 <div>
+ *                   <h3>Customize your product</h3>
+ *                   {modifiers.map(modifier => (
+ *                     <ProductModifiers.Modifier key={modifier.id} modifier={modifier}>
+ *                       {({ name, mandatory, hasChoices, choices, isFreeText }) => (
+ *                         <div className="modifier-field">
+ *                           <label>
+ *                             {name} {mandatory && <span className="required">*</span>}
+ *                           </label>
+ *                           {hasChoices && (
+ *                             <div className="choices">
+ *                               {choices.map(choice => (
+ *                                 <ProductModifiers.Choice key={choice.id} modifier={modifier} choice={choice}>
+ *                                   {({ value, isSelected, onSelect }) => (
+ *                                     <button
+ *                                       onClick={onSelect}
+ *                                       className={isSelected ? 'selected' : ''}
+ *                                     >
+ *                                       {value}
+ *                                     </button>
+ *                                   )}
+ *                                 </ProductModifiers.Choice>
+ *                               ))}
+ *                             </div>
+ *                           )}
+ *                           {isFreeText && (
+ *                             <ProductModifiers.FreeText modifier={modifier}>
+ *                               {({ value, onChange, placeholder, maxChars }) => (
+ *                                 <input
+ *                                   type="text"
+ *                                   value={value}
+ *                                   onChange={(e) => onChange(e.target.value)}
+ *                                   placeholder={placeholder}
+ *                                   maxLength={maxChars}
+ *                                 />
+ *                               )}
+ *                             </ProductModifiers.FreeText>
+ *                           )}
+ *                         </div>
+ *                       )}
+ *                     </ProductModifiers.Modifier>
+ *                   ))}
+ *                   {!areAllRequiredModifiersFilled && (
+ *                     <div className="warning">Please fill all required options</div>
+ *                   )}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </ProductModifiers.Modifiers>
+ *       </div>
+ *     </ProductModifiers.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
 /**
  * Props for Modifiers headless component
  */

package/cjs/dist/react/ProductModifiers.js

@@ -1,7 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { useService } from "@wix/services-manager-react";
-import { ProductModifiersServiceDefinition } from "../services/product-modifiers-service.js";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { ProductModifiersServiceDefinition, ProductModifiersService, } from "../services/product-modifiers-service.js";
 import { ModifierRenderType, } from "@wix/auto_sdk_stores_products-v-3";
+import { createServicesMap } from "@wix/services-manager";
+/**
+ * Root component that provides the ProductModifiers service context to its children.
+ * This component sets up the necessary services for managing product modifier functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ProductCustomization() {
+ *   return (
+ *     <ProductModifiers.Root>
+ *       <div>
+ *         <ProductModifiers.Modifiers>
+ *           {({ modifiers, hasModifiers, selectedModifiers, areAllRequiredModifiersFilled }) => (
+ *             <div>
+ *               {hasModifiers && (
+ *                 <div>
+ *                   <h3>Customize your product</h3>
+ *                   {modifiers.map(modifier => (
+ *                     <ProductModifiers.Modifier key={modifier.id} modifier={modifier}>
+ *                       {({ name, mandatory, hasChoices, choices, isFreeText }) => (
+ *                         <div className="modifier-field">
+ *                           <label>
+ *                             {name} {mandatory && <span className="required">*</span>}
+ *                           </label>
+ *                           {hasChoices && (
+ *                             <div className="choices">
+ *                               {choices.map(choice => (
+ *                                 <ProductModifiers.Choice key={choice.id} modifier={modifier} choice={choice}>
+ *                                   {({ value, isSelected, onSelect }) => (
+ *                                     <button
+ *                                       onClick={onSelect}
+ *                                       className={isSelected ? 'selected' : ''}
+ *                                     >
+ *                                       {value}
+ *                                     </button>
+ *                                   )}
+ *                                 </ProductModifiers.Choice>
+ *                               ))}
+ *                             </div>
+ *                           )}
+ *                           {isFreeText && (
+ *                             <ProductModifiers.FreeText modifier={modifier}>
+ *                               {({ value, onChange, placeholder, maxChars }) => (
+ *                                 <input
+ *                                   type="text"
+ *                                   value={value}
+ *                                   onChange={(e) => onChange(e.target.value)}
+ *                                   placeholder={placeholder}
+ *                                   maxLength={maxChars}
+ *                                 />
+ *                               )}
+ *                             </ProductModifiers.FreeText>
+ *                           )}
+ *                         </div>
+ *                       )}
+ *                     </ProductModifiers.Modifier>
+ *                   ))}
+ *                   {!areAllRequiredModifiersFilled && (
+ *                     <div className="warning">Please fill all required options</div>
+ *                   )}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </ProductModifiers.Modifiers>
+ *       </div>
+ *     </ProductModifiers.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductModifiersServiceDefinition, ProductModifiersService, {}), children: props.children }));
+}
 /**
  * Custom hook to safely get the modifiers service
  */

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

@@ -5,7 +5,6 @@ export * as Category from "./Category.js";
 export * as FilteredCollection from "./FilteredCollection.js";
 export * as ProductVariantSelector from "./ProductVariantSelector.js";
 export * as RelatedProducts from "./RelatedProducts.js";
-export * as SocialSharing from "./SocialSharing.js";
 export * as Collection from "./Collection.js";
 export * as Product from "./Product.js";
 export * as ProductModifiers from "./ProductModifiers.js";

package/cjs/dist/react/index.js

@@ -5,7 +5,6 @@ export * as Category from "./Category.js";
 export * as FilteredCollection from "./FilteredCollection.js";
 export * as ProductVariantSelector from "./ProductVariantSelector.js";
 export * as RelatedProducts from "./RelatedProducts.js";
-export * as SocialSharing from "./SocialSharing.js";
 export * as Collection from "./Collection.js";
 export * as Product from "./Product.js";
 export * as ProductModifiers from "./ProductModifiers.js";

package/cjs/dist/services/collection-service.js

@@ -1,4 +1,4 @@
-import { defineService, implementService, } from "@wix/services-definitions";
+import { defineService, implementService } from "@wix/services-definitions";
 import { SignalsServiceDefinition } from "@wix/services-definitions/core-services/signals";
 import { productsV3, readOnlyVariantsV3 } from "@wix/stores";
 import { FilterServiceDefinition } from "./filter-service.js";

package/cjs/dist/services/index.d.ts

@@ -6,6 +6,5 @@ export { ProductModifiersService, ProductModifiersServiceDefinition, } from "./p
 export { ProductService, ProductServiceDefinition, loadProductServiceConfig, } from "./product-service.js";
 export { RelatedProductsService, RelatedProductsServiceDefinition, loadRelatedProductsServiceConfig, } from "./related-products-service.js";
 export { SelectedVariantService, SelectedVariantServiceDefinition, } from "./selected-variant-service.js";
-export { SocialSharingService, SocialSharingServiceDefinition, } from "./social-sharing-service.js";
-export { ProductListService, ProductsListServiceDefinition, loadProductsListServiceConfig } from "./products-list-service.js";
+export { ProductListService, ProductsListServiceDefinition, loadProductsListServiceConfig, } from "./products-list-service.js";
 export { SortService, SortServiceDefinition, SortBy } from "./sort-service.js";

package/cjs/dist/services/index.js

@@ -16,6 +16,5 @@ export { ProductModifiersService, ProductModifiersServiceDefinition, } from "./p
 export { ProductService, ProductServiceDefinition, loadProductServiceConfig, } from "./product-service.js";
 export { RelatedProductsService, RelatedProductsServiceDefinition, loadRelatedProductsServiceConfig, } from "./related-products-service.js";
 export { SelectedVariantService, SelectedVariantServiceDefinition, } from "./selected-variant-service.js";
-export { SocialSharingService, SocialSharingServiceDefinition, } from "./social-sharing-service.js";
-export { ProductListService, ProductsListServiceDefinition, loadProductsListServiceConfig } from "./products-list-service.js";
+export { ProductListService, ProductsListServiceDefinition, loadProductsListServiceConfig, } from "./products-list-service.js";
 export { SortService, SortServiceDefinition } from "./sort-service.js";

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

@@ -9,7 +9,6 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
     const signalsService = getService(SignalsServiceDefinition);
     const cartService = getService(CurrentCartServiceDefinition);
     const productService = getService(ProductServiceDefinition);
-    // const mediaService = getService(MediaGalleryServiceDefinition);
     const selectedChoices = signalsService.signal({});
     const preOrderMessage = signalsService.signal(null);
     const initialProduct = productService.product.get();

package/dist/react/Category.d.ts

@@ -1,5 +1,51 @@
 import { type Category } from "@wix/auto_sdk_categories_categories";
 import React, { type ReactNode } from "react";
+import { type CategoryServiceConfig } from "../services/category-service.js";
+import type { PropsWithChildren } from "react";
+/**
+ * Root component that provides the Category service context to its children.
+ * This component sets up the necessary services for managing category functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Category } from '@wix/stores/components';
+ *
+ * function CategoryNavigation({ categories }) {
+ *   return (
+ *     <Category.Root categoryServiceConfig={{ categories }}>
+ *       <div>
+ *         <Category.List>
+ *           {({ categories, selectedCategory, setSelectedCategory }) => (
+ *             <nav>
+ *               <button
+ *                 onClick={() => setSelectedCategory(null)}
+ *                 className={selectedCategory === null ? 'active' : ''}
+ *               >
+ *                 All Categories
+ *               </button>
+ *               {categories.map(category => (
+ *                 <button
+ *                   key={category.id}
+ *                   onClick={() => setSelectedCategory(category.id)}
+ *                   className={selectedCategory === category.id ? 'active' : ''}
+ *                 >
+ *                   {category.name}
+ *                 </button>
+ *               ))}
+ *             </nav>
+ *           )}
+ *         </Category.List>
+ *       </div>
+ *     </Category.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{
+    categoryServiceConfig?: CategoryServiceConfig;
+}>): import("react/jsx-runtime").JSX.Element;
 export interface CategoryListProps {
     children: (data: {
         categories: Category[];