@wix/headless-stores 0.0.57 → 0.0.58

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

@@ -1,8 +1,8 @@
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
-import { productsV3, readOnlyVariantsV3 } from '@wix/stores';
+import { customizationsV3, productsV3, readOnlyVariantsV3 } from '@wix/stores';
 import { loadCategoriesListServiceConfig } from './categories-list-service.js';
-import { parseUrlToSearchOptions, } from './products-list-search-service.js';
+import { InventoryStatusType, parseUrlToSearchOptions, } from './products-list-search-service.js';
 export const DEFAULT_QUERY_LIMIT = 100;
 /**
  * Loads products list service configuration from the Wix Stores API for SSR initialization.
@@ -118,10 +118,13 @@ export const DEFAULT_QUERY_LIMIT = 100;
  */
 export async function loadProductsListServiceConfig(input) {
     let searchOptions;
+    const { items: customizations = [] } = await customizationsV3
+        .queryCustomizations()
+        .find();
     if (typeof input === 'string') {
         // URL input - parse it
         const categoriesListConfig = await loadCategoriesListServiceConfig();
-        const { searchOptions: parsedOptions } = await parseUrlToSearchOptions(input, categoriesListConfig.categories);
+        const { searchOptions: parsedOptions } = await parseUrlToSearchOptions(input, categoriesListConfig.categories, customizations);
         searchOptions = parsedOptions;
     }
     else {
@@ -139,6 +142,7 @@ export async function loadProductsListServiceConfig(input) {
         searchOptions,
         pagingMetadata: resultWithFilter.pagingMetadata,
         aggregations: resultWithoutFilter.aggregationData ?? {},
+        customizations,
     };
 }
 /**
@@ -292,6 +296,14 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
     const productsSignal = signalsService.signal(config.products);
     const searchOptionsSignal = signalsService.signal(config.searchOptions);
     const pagingMetadataSignal = signalsService.signal(config.pagingMetadata);
+    const minPriceSignal = signalsService.signal(getMinPrice(config.aggregations.results));
+    const maxPriceSignal = signalsService.signal(getMaxPrice(config.aggregations.results));
+    const availableProductOptionsSignal = signalsService.signal(getAvailableProductOptions(config.aggregations.results, config.customizations));
+    const availableInventoryStatusesSignal = signalsService.signal([
+        InventoryStatusType.IN_STOCK,
+        InventoryStatusType.OUT_OF_STOCK,
+        InventoryStatusType.PARTIALLY_OUT_OF_STOCK,
+    ]);
     const aggregationsSignal = signalsService.signal(config.aggregations);
     const isLoadingSignal = signalsService.signal(false);
     const errorSignal = signalsService.signal(null);
@@ -331,7 +343,15 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
         searchOptions: searchOptionsSignal,
         pagingMetadata: pagingMetadataSignal,
         aggregations: aggregationsSignal,
-        setSearchOptions: (searchOptions) => searchOptionsSignal.set(searchOptions),
+        /* Metadata for products list */
+        minPrice: minPriceSignal,
+        maxPrice: maxPriceSignal,
+        availableInventoryStatuses: availableInventoryStatusesSignal,
+        availableProductOptions: availableProductOptionsSignal,
+        /* End of Metadata for products list */
+        setSearchOptions: (searchOptions) => {
+            searchOptionsSignal.set(searchOptions);
+        },
         setSort: (sort) => {
             const currentOptions = searchOptionsSignal.peek();
             searchOptionsSignal.set({
@@ -346,7 +366,108 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
                 filter,
             });
         },
+        resetFilter: () => {
+            const currentOptions = searchOptionsSignal.peek();
+            searchOptionsSignal.set({
+                ...currentOptions,
+                filter: {},
+            });
+        },
+        isFiltered: () => {
+            return signalsService.computed(() => {
+                const currentOptions = searchOptionsSignal.peek();
+                if (!currentOptions.filter)
+                    return false;
+                return (currentOptions.filter !== undefined &&
+                    Object.keys(currentOptions.filter).length > 0);
+            });
+        },
         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,
+                },
+            });
+        },
+        hasMoreProducts: signalsService.computed(() => pagingMetadataSignal.get().hasNext ?? false),
     };
 });
+function getMinPrice(aggregationData) {
+    const minPriceAggregation = aggregationData.find((data) => data.fieldPath === 'actualPriceRange.minValue.amount');
+    if (minPriceAggregation?.scalar?.value) {
+        return Number(minPriceAggregation.scalar.value) || 0;
+    }
+    return 0;
+}
+function getMaxPrice(aggregationData) {
+    const maxPriceAggregation = aggregationData.find((data) => data.fieldPath === 'actualPriceRange.maxValue.amount');
+    if (maxPriceAggregation?.scalar?.value) {
+        return Number(maxPriceAggregation.scalar.value) || 0;
+    }
+    return 0;
+}
+function getAvailableProductOptions(aggregationData = [], customizations = []) {
+    const matchesAggregationName = (name, aggregationNames) => {
+        return aggregationNames.some((aggName) => aggName.toLowerCase() === name.toLowerCase());
+    };
+    const sortChoicesIntelligently = (choices) => {
+        return [...choices].sort((a, b) => {
+            const aIsNumber = /^\d+$/.test(a.name);
+            const bIsNumber = /^\d+$/.test(b.name);
+            if (aIsNumber && bIsNumber) {
+                return parseInt(a.name) - parseInt(b.name);
+            }
+            if (aIsNumber && !bIsNumber)
+                return -1;
+            if (!aIsNumber && bIsNumber)
+                return 1;
+            return a.name.localeCompare(b.name);
+        });
+    };
+    const optionNames = [];
+    const choiceNames = [];
+    aggregationData.forEach((result) => {
+        if (result.name === 'optionNames' && result.values?.results) {
+            optionNames.push(...result.values.results
+                .map((item) => item.value)
+                .filter((value) => typeof value === 'string'));
+        }
+        if (result.name === 'choiceNames' && result.values?.results) {
+            choiceNames.push(...result.values.results
+                .map((item) => item.value)
+                .filter((value) => typeof value === 'string'));
+        }
+    });
+    const options = customizations
+        .filter((customization) => customization.name &&
+        customization._id &&
+        customization.customizationType ===
+            customizationsV3.CustomizationType.PRODUCT_OPTION &&
+        (optionNames.length === 0 ||
+            matchesAggregationName(customization.name, optionNames)))
+        .map((customization) => {
+        const choices = (customization.choicesSettings?.choices || [])
+            .filter((choice) => choice._id &&
+            choice.name &&
+            (choiceNames.length === 0 ||
+                matchesAggregationName(choice.name, choiceNames)))
+            .map((choice) => ({
+            id: choice._id,
+            name: choice.name,
+            colorCode: choice.colorCode,
+        }));
+        return {
+            id: customization._id,
+            name: customization.name,
+            choices: sortChoicesIntelligently(choices),
+            optionRenderType: customization.customizationRenderType,
+        };
+    })
+        .filter((option) => option.choices.length > 0);
+    return options;
+}

package/dist/react/ProductList.js

@@ -48,6 +48,7 @@ export const Root = React.forwardRef((props, ref) => {
             count: products?.length || 0,
         },
         aggregations: {}, // Empty aggregation data
+        customizations: [],
     };
     return (_jsx(CoreProductList.Root, { productsListConfig: serviceConfig, productsListSearchConfig: productsListSearchConfig, children: _jsx(RootContent, { children: children, className: className, ref: ref }) }));
 });

package/dist/react/ProductListSort.d.ts

@@ -0,0 +1,14 @@
+import { Sort as SortPrimitive } from '@wix/headless-components/react';
+import { productsV3 } from '@wix/stores';
+import React from 'react';
+export interface ProductListSortProps {
+    children?: (props: {
+        currentSort: productsV3.V3ProductSearch['sort'];
+        sortOptions: SortPrimitive.SortOption[];
+        setSort: (sort: productsV3.V3ProductSearch['sort']) => void;
+    }) => React.ReactNode;
+    className?: string;
+    as?: 'select' | 'list';
+    asChild?: boolean;
+}
+export declare const ProductListSort: React.ForwardRefExoticComponent<ProductListSortProps & React.RefAttributes<HTMLElement>>;

package/dist/react/ProductListSort.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sort as SortPrimitive } from '@wix/headless-components/react';
+import { ProductListSort as ProductListSortPrimitive } from './core/ProductListSort.js';
+import React from 'react';
+export const ProductListSort = React.forwardRef(({ children, className, as, asChild }, ref) => {
+    return (_jsx(ProductListSortPrimitive, { children: ({ currentSort, sortOptions, setSort }) => {
+            if (asChild && children) {
+                return children({ currentSort, sortOptions, setSort });
+            }
+            return (_jsx(SortPrimitive.Root, { ref: ref, value: currentSort, onChange: (value) => {
+                    setSort(value);
+                }, sortOptions: sortOptions, as: as, className: className }));
+        } }));
+});

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

@@ -1,6 +1,7 @@
 import { type ProductsListServiceConfig } from '../../services/products-list-service.js';
 import { productsV3 } from '@wix/stores';
 import { ProductsListSearchServiceConfig } from '../../services/products-list-search-service.js';
+import { CategoriesListServiceConfig } from '../../services/categories-list-service.js';
 /**
  * Props for Root headless component
  */
@@ -11,6 +12,8 @@ export interface RootProps {
     productsListConfig: ProductsListServiceConfig;
     /** Configuration for the ProductListSearch service */
     productsListSearchConfig?: ProductsListSearchServiceConfig;
+    /** Configuration for the CategoriesList service */
+    categoriesListConfig?: CategoriesListServiceConfig;
 }
 /**
  * Root component that provides both ProductList and ProductListSearch service contexts to its children.

package/dist/react/core/ProductList.js

@@ -4,6 +4,7 @@ import { createServicesMap } from '@wix/services-manager';
 import { ProductListService, ProductsListServiceDefinition, } from '../../services/products-list-service.js';
 import { ProductService, ProductServiceDefinition, } from '../../services/product-service.js';
 import { ProductsListSearchService, ProductsListSearchServiceDefinition, } from '../../services/products-list-search-service.js';
+import { CategoriesListService, CategoriesListServiceDefinition, } from '../../services/categories-list-service.js';
 /**
  * Root component that provides both ProductList and ProductListSearch service contexts to its children.
  * This component sets up the necessary services for managing products list state, including search,
@@ -64,6 +65,7 @@ import { ProductsListSearchService, ProductsListSearchServiceDefinition, } from
  */
 export function Root(props) {
     return (_jsx(WixServices, { servicesMap: createServicesMap()
+            .addService(CategoriesListServiceDefinition, CategoriesListService, props.categoriesListConfig)
             .addService(ProductsListServiceDefinition, ProductListService, props.productsListConfig)
             .addService(ProductsListSearchServiceDefinition, ProductsListSearchService, props.productsListSearchConfig), children: props.children }));
 }

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

@@ -1,61 +1,6 @@
 import type { ReactNode } from 'react';
-import { type ProductOption, InventoryStatusType } from '../../services/products-list-search-service.js';
 import { Category } from '@wix/auto_sdk_categories_categories';
-/**
- * Props for InventoryStatus headless component
- */
-export interface InventoryStatusProps {
-    /** Content to display (can be a render function receiving inventory status controls or ReactNode) */
-    children: ((props: InventoryStatusRenderProps) => ReactNode) | ReactNode;
-}
-/**
- * Render props for InventoryStatus component
- */
-export interface InventoryStatusRenderProps {
-    /** Available inventory status options */
-    availableInventoryStatuses: InventoryStatusType[];
-    /** Currently selected inventory statuses */
-    selectedInventoryStatuses: InventoryStatusType[];
-    /** Function to toggle an inventory status filter */
-    toggleInventoryStatus: (status: InventoryStatusType) => void;
-}
-/**
- * Headless component for managing inventory status filters
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListFilters } from '@wix/stores/components';
- *
- * function InventoryStatusFilter() {
- *   return (
- *     <ProductList.Root
- *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
- *       productsListSearchConfig={{ customizations: [] }}
- *     >
- *       <ProductListFilters.InventoryStatus>
- *         {({ availableInventoryStatuses, selectedInventoryStatuses, toggleInventoryStatus }) => (
- *           <div>
- *             <h4>Inventory Status:</h4>
- *             {availableInventoryStatuses.map(status => (
- *               <label key={status}>
- *                 <input
- *                   type="checkbox"
- *                   checked={selectedInventoryStatuses.includes(status)}
- *                   onChange={() => toggleInventoryStatus(status)}
- *                 />
- *                 {status}
- *               </label>
- *             ))}
- *           </div>
- *         )}
- *       </ProductListFilters.InventoryStatus>
- *     </ProductList.Root>
- *   );
- * }
- * ```
- */
-export declare function InventoryStatus(props: InventoryStatusProps): ReactNode;
+import React from 'react';
 /**
  * Props for ResetTrigger headless component
  */
@@ -103,136 +48,19 @@ export interface ResetTriggerRenderProps {
  * ```
  */
 export declare function ResetTrigger(props: ResetTriggerProps): ReactNode;
-/**
- * Props for PriceRange headless component
- */
-export interface PriceRangeProps {
-    /** Content to display (can be a render function receiving price range controls or ReactNode) */
-    children: ((props: PriceRangeRenderProps) => ReactNode) | ReactNode;
-}
-/**
- * Render props for PriceRange component
- */
-export interface PriceRangeRenderProps {
-    /** Current minimum price filter value */
-    selectedMinPrice: number;
-    /** Current maximum price filter value */
-    selectedMaxPrice: number;
-    /** Catalog minimum price */
-    availableMinPrice: number;
-    /** Catalog maximum price */
-    availableMaxPrice: number;
-    /** Function to update the minimum price filter */
-    setSelectedMinPrice: (minPrice: number) => void;
-    /** Function to update the maximum price filter */
-    setSelectedMaxPrice: (maxPrice: number) => void;
-}
-/**
- * Headless component for managing price range filters (combined min/max)
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListFilters } from '@wix/stores/components';
- *
- * function PriceRangeFilter() {
- *   return (
- *     <ProductList.Root
- *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
- *       productsListSearchConfig={{ customizations: [] }}
- *     >
- *       <ProductListFilters.PriceRange>
- *         {({ minPrice, maxPrice, setSelectedMinPrice, setSelectedMaxPrice }) => (
- *           <div className="price-range">
- *             <h4>Price Range:</h4>
- *             <div className="price-inputs">
- *               <input
- *                 type="number"
- *                 value={minPrice}
- *                 onChange={(e) => setSelectedMinPrice(Number(e.target.value))}
- *                 placeholder="Min"
- *               />
- *               <span>to</span>
- *               <input
- *                 type="number"
- *                 value={maxPrice}
- *                 onChange={(e) => setSelectedMaxPrice(Number(e.target.value))}
- *                 placeholder="Max"
- *               />
- *             </div>
- *           </div>
- *         )}
- *       </ProductListFilters.PriceRange>
- *     </ProductList.Root>
- *   );
- * }
- * ```
- */
-export declare function PriceRange(props: PriceRangeProps): ReactNode;
 export interface CategoryFilterRenderProps {
     selectedCategory: Category | null;
-    setSelectedCategory: (category: Category | null) => void;
+    setSelectedCategory: (category: Category) => void;
 }
 export interface CategoryFilterProps {
     /** Content to display (can be a render function receiving category data or ReactNode) */
     children: ((props: CategoryFilterRenderProps) => ReactNode) | ReactNode;
 }
 export declare function CategoryFilter(props: CategoryFilterProps): ReactNode;
-/**
- * Props for ProductOptions headless component
- */
-export interface ProductOptionsProps {
-    /** Content to display (can be a render function receiving product option data or ReactNode) */
-    children: ((props: ProductOptionRenderProps) => ReactNode) | ReactNode;
+interface FilterProps {
+    children: ReactNode;
+    asChild?: boolean;
+    className?: string;
 }
-/**
- * Render props for ProductOption component
- */
-export interface ProductOptionRenderProps {
-    /** Product option data */
-    option: ProductOption;
-    /** Currently selected choice IDs for this option */
-    selectedChoices: string[];
-    /** Function to toggle a choice selection */
-    toggleChoice: (choiceId: string) => void;
-}
-/**
- * Headless component that renders content for each product option in the list.
- * Maps over all available product options and provides each option through a render prop.
- * Only renders when options are available (not loading, no error, and has options).
- * This follows the same collection pattern as ProductList.ItemContent and CategoryList.ItemContent.
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListFilters } from '@wix/stores/components';
- *
- * function ProductOptionsFilter() {
- *   return (
- *     <ProductList.Root
- *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
- *       productsListSearchConfig={{ customizations: [] }}
- *     >
- *       <ProductListFilters.ProductOptions>
- *         {({ option, selectedChoices, toggleChoice }) => (
- *           <div key={option.id}>
- *             <h4>{option.name}</h4>
- *             {option.choices.map(choice => (
- *               <label key={choice.id}>
- *                 <input
- *                   type="checkbox"
- *                   checked={selectedChoices.includes(choice.id)}
- *                   onChange={() => toggleChoice(choice.id)}
- *                 />
- *                 {choice.name}
- *               </label>
- *             ))}
- *           </div>
- *         )}
- *       </ProductListFilters.ProductOptions>
- *     </ProductList.Root>
- *   );
- * }
- * ```
- */
-export declare function ProductOptions(props: ProductOptionsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const Filter: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLDivElement>>;
+export {};