@wix/headless-stores 0.0.36 → 0.0.38

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

@@ -0,0 +1,446 @@
+import { defineService } from "@wix/services-definitions";
+import { implementService } from "@wix/services-definitions";
+import { SignalsServiceDefinition, } from "@wix/services-definitions/core-services/signals";
+import { productsV3 } from "@wix/stores";
+import { ProductsListServiceDefinition } from "./products-list-service.js";
+import { customizationsV3 } from "@wix/stores";
+/**
+ * Enumeration of inventory status types available for filtering.
+ * Maps to the Wix Stores API inventory availability statuses.
+ *
+ * @enum {string}
+ */
+export var InventoryStatusType;
+(function (InventoryStatusType) {
+    /** Product is in stock and available for purchase */
+    InventoryStatusType["IN_STOCK"] = "IN_STOCK";
+    /** Product is out of stock */
+    InventoryStatusType["OUT_OF_STOCK"] = "OUT_OF_STOCK";
+    /** Product is partially out of stock (some variants available) */
+    InventoryStatusType["PARTIALLY_OUT_OF_STOCK"] = "PARTIALLY_OUT_OF_STOCK";
+})(InventoryStatusType || (InventoryStatusType = {}));
+/**
+ * Loads products list filters service configuration from the Wix Stores API for SSR initialization.
+ * This function fetches customization data that will be used to build product filter options.
+ *
+ * @returns {Promise<ProductsListFiltersServiceConfig>} Promise that resolves to the filters configuration
+ *
+ * @example
+ * ```astro
+ * ---
+ * // Astro page example - pages/products.astro
+ * import { loadProductsListFiltersServiceConfig } from '@wix/stores/services';
+ * import { ProductsListFilters } from '@wix/stores/components';
+ *
+ * // Load filters configuration during SSR
+ * const filtersConfig = await loadProductsListFiltersServiceConfig();
+ * ---
+ *
+ * <ProductsListFilters.Root filtersConfig={filtersConfig}>
+ *   <ProductsListFilters.MinPrice>
+ *     {({ minPrice, setMinPrice }) => (
+ *       <input
+ *         type="number"
+ *         value={minPrice}
+ *         onChange={(e) => setMinPrice(parseFloat(e.target.value))}
+ *         placeholder="Min Price"
+ *       />
+ *     )}
+ *   </ProductsListFilters.MinPrice>
+ * </ProductsListFilters.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Next.js page example
+ * import { GetServerSideProps } from 'next';
+ * import { loadProductsListFiltersServiceConfig } from '@wix/stores/services';
+ *
+ * export const getServerSideProps: GetServerSideProps = async () => {
+ *   const filtersConfig = await loadProductsListFiltersServiceConfig();
+ *
+ *   return {
+ *     props: {
+ *       filtersConfig,
+ *     },
+ *   };
+ * };
+ * ```
+ */
+export async function loadProductsListFiltersServiceConfig() {
+    const { items: customizations = [] } = await customizationsV3
+        .queryCustomizations()
+        .find();
+    return {
+        customizations,
+    };
+}
+/**
+ * Service definition for the Products List Filters service.
+ * This defines the reactive API contract for managing product list filtering capabilities
+ * including price, inventory status, and product option filters.
+ *
+ * @constant
+ */
+export const ProductsListFiltersServiceDefinition = defineService("products-list-filters");
+/**
+ * Implementation of the Products List Filters service that manages reactive filtering state.
+ * This service provides signals for all filter types (price, inventory, product options) and
+ * automatically updates the products list search options when filters change.
+ *
+ * @example
+ * ```tsx
+ * import { ProductsListFiltersService, ProductsListFiltersServiceDefinition } from '@wix/stores/services';
+ * import { useService } from '@wix/services-manager-react';
+ *
+ * function FiltersComponent({ filtersConfig }) {
+ *   return (
+ *     <ServiceProvider services={createServicesMap([
+ *       [ProductsListFiltersServiceDefinition, ProductsListFiltersService.withConfig(filtersConfig)]
+ *     ])}>
+ *       <FilterControls />
+ *     </ServiceProvider>
+ *   );
+ * }
+ *
+ * function FilterControls() {
+ *   const filtersService = useService(ProductsListFiltersServiceDefinition);
+ *   const minPrice = filtersService.minPrice.get();
+ *   const maxPrice = filtersService.maxPrice.get();
+ *   const selectedInventoryStatuses = filtersService.selectedInventoryStatuses.get();
+ *   const availableProductOptions = filtersService.availableProductOptions.get();
+ *   const isFiltered = filtersService.isFiltered.get();
+ *
+ *   return (
+ *     <div>
+ *       <div>
+ *         <input
+ *           type="number"
+ *           value={minPrice}
+ *           onChange={(e) => filtersService.setMinPrice(parseFloat(e.target.value))}
+ *           placeholder="Min Price"
+ *         />
+ *         <input
+ *           type="number"
+ *           value={maxPrice}
+ *           onChange={(e) => filtersService.setMaxPrice(parseFloat(e.target.value))}
+ *           placeholder="Max Price"
+ *         />
+ *       </div>
+ *
+ *       {availableProductOptions.map(option => (
+ *         <div key={option.id}>
+ *           <h4>{option.name}</h4>
+ *           {option.choices.map(choice => (
+ *             <label key={choice.id}>
+ *               <input
+ *                 type="checkbox"
+ *                 onChange={() => filtersService.toggleProductOption(option.id, choice.id)}
+ *               />
+ *               {choice.name}
+ *             </label>
+ *           ))}
+ *         </div>
+ *       ))}
+ *
+ *       {isFiltered && (
+ *         <button onClick={() => filtersService.reset()}>
+ *           Clear All Filters
+ *         </button>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export const ProductsListFiltersService = implementService.withConfig()(ProductsListFiltersServiceDefinition, ({ getService, config }) => {
+    let firstRun = true;
+    const signalsService = getService(SignalsServiceDefinition);
+    const productsListService = getService(ProductsListServiceDefinition);
+    const { customizations } = config;
+    const aggregationData = productsListService.aggregations.get()?.results;
+    // TODO: use the aggregations to get the available inventory statuses
+    // and the available price ranges
+    // and the available product options
+    // and the available product choices
+    const minPriceSignal = signalsService.signal(getMinPrice(productsListService.searchOptions.get()));
+    const maxPriceSignal = signalsService.signal(getMaxPrice(productsListService.searchOptions.get()));
+    const availableInventoryStatusesSignal = signalsService.signal([
+        InventoryStatusType.IN_STOCK,
+        InventoryStatusType.OUT_OF_STOCK,
+        InventoryStatusType.PARTIALLY_OUT_OF_STOCK,
+    ]);
+    const selectedInventoryStatusesSignal = signalsService.signal(getSelectedInventoryStatuses(productsListService.searchOptions.get()));
+    // TODO: Get product options from aggregations data
+    const availableProductOptionsSignal = signalsService.signal(getAvailableProductOptions(aggregationData, customizations));
+    const selectedProductOptionsSignal = signalsService.signal(getSelectedProductOptions(productsListService.searchOptions.get()));
+    const isFilteredSignal = signalsService.signal(false);
+    if (typeof window !== "undefined") {
+        signalsService.effect(() => {
+            // CRITICAL: Read the signals FIRST to establish dependencies, even on first run
+            const minPrice = minPriceSignal.get();
+            const maxPrice = maxPriceSignal.get();
+            const selectedInventoryStatuses = selectedInventoryStatusesSignal.get();
+            const selectedProductOptions = selectedProductOptionsSignal.get();
+            if (firstRun) {
+                firstRun = false;
+                return;
+            }
+            isFilteredSignal.set(true);
+            // Build new search options with updated price filters
+            const newSearchOptions = {
+                ...productsListService.searchOptions.peek(),
+            };
+            delete newSearchOptions.cursorPaging?.cursor;
+            // Initialize filter if it doesn't exist
+            if (!newSearchOptions.filter) {
+                newSearchOptions.filter = {};
+            }
+            else {
+                // Copy existing filter to avoid mutation
+                newSearchOptions.filter = { ...newSearchOptions.filter };
+            }
+            // Remove existing price filters
+            delete newSearchOptions.filter["actualPriceRange.minValue.amount"];
+            delete newSearchOptions.filter["actualPriceRange.maxValue.amount"];
+            // Remove existing inventory filter
+            delete newSearchOptions.filter["inventory.availabilityStatus"];
+            // Remove existing product option filters
+            // First, find and remove any existing option filters
+            Object.keys(newSearchOptions.filter).forEach((key) => {
+                if (key.startsWith("options.")) {
+                    delete newSearchOptions.filter[key];
+                }
+            });
+            // Add new price filters if they have valid values
+            if (minPrice > 0) {
+                newSearchOptions.filter["actualPriceRange.minValue.amount"] = { $gte: minPrice };
+            }
+            if (maxPrice > 0) {
+                newSearchOptions.filter["actualPriceRange.maxValue.amount"] = { $lte: maxPrice };
+            }
+            // Add new inventory filter if there are selected statuses
+            if (selectedInventoryStatuses.length > 0) {
+                if (selectedInventoryStatuses.length === 1) {
+                    newSearchOptions.filter["inventory.availabilityStatus"] =
+                        selectedInventoryStatuses[0];
+                }
+                else {
+                    newSearchOptions.filter["inventory.availabilityStatus"] =
+                        {
+                            $in: selectedInventoryStatuses,
+                        };
+                }
+            }
+            // Add new product option filters if there are selected options
+            if (selectedProductOptions &&
+                Object.keys(selectedProductOptions).length > 0) {
+                for (const [optionId, choiceIds] of Object.entries(selectedProductOptions)) {
+                    if (choiceIds && choiceIds.length > 0) {
+                        // Handle inventory filter separately
+                        if (optionId === "inventory-filter") {
+                            newSearchOptions.filter["inventory.availabilityStatus"] = {
+                                $in: choiceIds,
+                            };
+                        }
+                        else {
+                            // Regular product options filter
+                            newSearchOptions.filter["options.choicesSettings.choices.choiceId"] = {
+                                $hasSome: choiceIds,
+                            };
+                        }
+                    }
+                }
+            }
+            // Use callback to update search options
+            productsListService.setSearchOptions(newSearchOptions);
+        });
+    }
+    return {
+        minPrice: minPriceSignal,
+        maxPrice: maxPriceSignal,
+        availableInventoryStatuses: availableInventoryStatusesSignal,
+        selectedInventoryStatuses: selectedInventoryStatusesSignal,
+        availableProductOptions: availableProductOptionsSignal,
+        selectedProductOptions: selectedProductOptionsSignal,
+        setMinPrice: (minPrice) => {
+            minPriceSignal.set(minPrice);
+        },
+        setMaxPrice: (maxPrice) => {
+            maxPriceSignal.set(maxPrice);
+        },
+        toggleInventoryStatus: (status) => {
+            const current = selectedInventoryStatusesSignal.get();
+            const isSelected = current.includes(status);
+            if (isSelected) {
+                selectedInventoryStatusesSignal.set(current.filter((s) => s !== status));
+            }
+            else {
+                selectedInventoryStatusesSignal.set([...current, status]);
+            }
+        },
+        toggleProductOption: (optionId, choiceId) => {
+            const current = selectedProductOptionsSignal.get();
+            const currentChoices = current[optionId] || [];
+            const isSelected = currentChoices.includes(choiceId);
+            if (isSelected) {
+                // Remove the choice
+                const newChoices = currentChoices.filter((id) => id !== choiceId);
+                if (newChoices.length === 0) {
+                    const newOptions = { ...current };
+                    delete newOptions[optionId];
+                    selectedProductOptionsSignal.set(newOptions);
+                }
+                else {
+                    selectedProductOptionsSignal.set({
+                        ...current,
+                        [optionId]: newChoices,
+                    });
+                }
+            }
+            else {
+                // Add the choice
+                selectedProductOptionsSignal.set({
+                    ...current,
+                    [optionId]: [...currentChoices, choiceId],
+                });
+            }
+        },
+        isFiltered: isFilteredSignal,
+        reset: () => {
+            // TODO: reset the filters to the original values from the aggregation data
+            minPriceSignal.set(0);
+            maxPriceSignal.set(0);
+            selectedInventoryStatusesSignal.set([]);
+            selectedProductOptionsSignal.set({});
+            isFilteredSignal.set(false);
+        },
+    };
+});
+function getMinPrice(searchOptions) {
+    const filter = searchOptions.filter;
+    if (!filter)
+        return 0;
+    const minPriceFilter = filter["actualPriceRange.minValue.amount"];
+    if (typeof minPriceFilter === "object" &&
+        minPriceFilter !== null &&
+        "$gte" in minPriceFilter) {
+        return Number(minPriceFilter.$gte) || 0;
+    }
+    return 0;
+}
+function getMaxPrice(searchOptions) {
+    const filter = searchOptions.filter;
+    if (!filter)
+        return 0;
+    const maxPriceFilter = filter["actualPriceRange.maxValue.amount"];
+    if (typeof maxPriceFilter === "object" &&
+        maxPriceFilter !== null &&
+        "$lte" in maxPriceFilter) {
+        return Number(maxPriceFilter.$lte) || 0;
+    }
+    return 0;
+}
+function getSelectedInventoryStatuses(searchOptions) {
+    const filter = searchOptions.filter;
+    if (!filter)
+        return [];
+    const inventoryFilter = filter["inventory.availabilityStatus"];
+    if (typeof inventoryFilter === "string" && inventoryFilter.length > 0) {
+        return [inventoryFilter];
+    }
+    if (typeof inventoryFilter === "object" &&
+        inventoryFilter !== null &&
+        "$in" in inventoryFilter) {
+        return Array.isArray(inventoryFilter.$in) ? inventoryFilter.$in : [];
+    }
+    return [];
+}
+function getSelectedProductOptions(searchOptions) {
+    const filter = searchOptions.filter;
+    if (!filter)
+        return {};
+    const selectedOptions = {};
+    // Look for options.{optionId}.choice filters
+    Object.keys(filter).forEach((key) => {
+        if (key.startsWith("options.") && key.endsWith(".choice")) {
+            const optionId = key.slice(8, -7); // Remove "options." and ".choice"
+            const optionFilter = filter[key];
+            if (typeof optionFilter === "string" && optionFilter.length > 0) {
+                selectedOptions[optionId] = [optionFilter];
+            }
+            else if (typeof optionFilter === "object" &&
+                optionFilter !== null &&
+                "$in" in optionFilter &&
+                Array.isArray(optionFilter.$in)) {
+                selectedOptions[optionId] = optionFilter.$in;
+            }
+        }
+    });
+    return selectedOptions;
+}
+function getAvailableProductOptions(aggregationData = [], customizations = []) {
+    // Helper function to match aggregation names case-insensitively
+    const matchesAggregationName = (name, aggregationNames) => {
+        return aggregationNames.some((aggName) => aggName.toLowerCase() === name.toLowerCase());
+    };
+    // Helper function to sort choices intelligently (numbers first, then alphabetically)
+    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(b.name) - parseInt(a.name);
+            }
+            if (aIsNumber && !bIsNumber)
+                return -1;
+            if (!aIsNumber && bIsNumber)
+                return 1;
+            return a.name.localeCompare(b.name);
+        });
+    };
+    // Extract option names from aggregation data
+    const optionNames = [];
+    const choiceNames = [];
+    // Process aggregation results to extract available option and choice names
+    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"));
+        }
+    });
+    // Build options by matching customizations with aggregation data
+    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/cjs/dist/services/products-list-pagination-service.d.ts

@@ -0,0 +1,186 @@
+import { type Signal } from "@wix/services-definitions/core-services/signals";
+/**
+ * Service definition for the Products List Pagination service.
+ * This defines the reactive API contract for managing product list pagination state and navigation.
+ *
+ * @constant
+ */
+export declare const ProductsListPaginationServiceDefinition: string & {
+    __api: {
+        /** Reactive signal containing the current page size limit */
+        currentLimit: Signal<number>;
+        /** Reactive signal containing the current cursor for pagination */
+        currentCursor: Signal<string | null>;
+        /** Computed signal indicating if there's a next page available */
+        hasNextPage: {
+            get: () => boolean;
+        };
+        /** Computed signal indicating if there's a previous page available */
+        hasPrevPage: {
+            get: () => boolean;
+        };
+        /** Function to set the page size limit */
+        setLimit: (limit: number) => void;
+        /** Function to navigate to the next page */
+        nextPage: () => void;
+        /** Function to navigate to the previous page */
+        prevPage: () => void;
+        /** Function to navigate to the first page */
+        goToFirstPage: () => void;
+        /** Function to load more items (increase the limit) */
+        loadMore: (count: number) => void;
+    };
+    __config: {};
+    isServiceDefinition?: boolean;
+} & {
+    /** Reactive signal containing the current page size limit */
+    currentLimit: Signal<number>;
+    /** Reactive signal containing the current cursor for pagination */
+    currentCursor: Signal<string | null>;
+    /** Computed signal indicating if there's a next page available */
+    hasNextPage: {
+        get: () => boolean;
+    };
+    /** Computed signal indicating if there's a previous page available */
+    hasPrevPage: {
+        get: () => boolean;
+    };
+    /** Function to set the page size limit */
+    setLimit: (limit: number) => void;
+    /** Function to navigate to the next page */
+    nextPage: () => void;
+    /** Function to navigate to the previous page */
+    prevPage: () => void;
+    /** Function to navigate to the first page */
+    goToFirstPage: () => void;
+    /** Function to load more items (increase the limit) */
+    loadMore: (count: number) => void;
+};
+/**
+ * Configuration interface for the Products List Pagination service.
+ * Currently empty as this service doesn't require initial configuration.
+ *
+ * @interface ProductsListPaginationServiceConfig
+ */
+export type ProductsListPaginationServiceConfig = {};
+/**
+ * Implementation of the Products List Pagination service that manages reactive pagination state.
+ * This service provides signals for pagination state and automatically updates the products list
+ * search options when pagination settings change. It supports both cursor-based pagination
+ * and load-more functionality.
+ *
+ * @example
+ * ```tsx
+ * import { ProductsListPaginationService, ProductsListPaginationServiceDefinition } from '@wix/stores/services';
+ * import { useService } from '@wix/services-manager-react';
+ *
+ * function PaginationComponent() {
+ *   return (
+ *     <ServiceProvider services={createServicesMap([
+ *       [ProductsListPaginationServiceDefinition, ProductsListPaginationService.withConfig({})]
+ *     ])}>
+ *       <PaginationControls />
+ *     </ServiceProvider>
+ *   );
+ * }
+ *
+ * function PaginationControls() {
+ *   const paginationService = useService(ProductsListPaginationServiceDefinition);
+ *   const currentLimit = paginationService.currentLimit.get();
+ *   const hasNextPage = paginationService.hasNextPage.get();
+ *   const hasPrevPage = paginationService.hasPrevPage.get();
+ *
+ *   return (
+ *     <div>
+ *       <div>
+ *         Items per page:
+ *         <select
+ *           value={currentLimit}
+ *           onChange={(e) => paginationService.setLimit(parseInt(e.target.value))}
+ *         >
+ *           <option value={12}>12</option>
+ *           <option value={24}>24</option>
+ *           <option value={48}>48</option>
+ *         </select>
+ *       </div>
+ *
+ *       <div>
+ *         <button
+ *           onClick={() => paginationService.goToFirstPage()}
+ *           disabled={!hasPrevPage}
+ *         >
+ *           First
+ *         </button>
+ *         <button
+ *           onClick={() => paginationService.prevPage()}
+ *           disabled={!hasPrevPage}
+ *         >
+ *           Previous
+ *         </button>
+ *         <button
+ *           onClick={() => paginationService.nextPage()}
+ *           disabled={!hasNextPage}
+ *         >
+ *           Next
+ *         </button>
+ *       </div>
+ *
+ *       <button onClick={() => paginationService.loadMore(12)}>
+ *         Load More
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare const ProductsListPaginationService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: {
+        /** Reactive signal containing the current page size limit */
+        currentLimit: Signal<number>;
+        /** Reactive signal containing the current cursor for pagination */
+        currentCursor: Signal<string | null>;
+        /** Computed signal indicating if there's a next page available */
+        hasNextPage: {
+            get: () => boolean;
+        };
+        /** Computed signal indicating if there's a previous page available */
+        hasPrevPage: {
+            get: () => boolean;
+        };
+        /** Function to set the page size limit */
+        setLimit: (limit: number) => void;
+        /** Function to navigate to the next page */
+        nextPage: () => void;
+        /** Function to navigate to the previous page */
+        prevPage: () => void;
+        /** Function to navigate to the first page */
+        goToFirstPage: () => void;
+        /** Function to load more items (increase the limit) */
+        loadMore: (count: number) => void;
+    };
+    __config: {};
+    isServiceDefinition?: boolean;
+} & {
+    /** Reactive signal containing the current page size limit */
+    currentLimit: Signal<number>;
+    /** Reactive signal containing the current cursor for pagination */
+    currentCursor: Signal<string | null>;
+    /** Computed signal indicating if there's a next page available */
+    hasNextPage: {
+        get: () => boolean;
+    };
+    /** Computed signal indicating if there's a previous page available */
+    hasPrevPage: {
+        get: () => boolean;
+    };
+    /** Function to set the page size limit */
+    setLimit: (limit: number) => void;
+    /** Function to navigate to the next page */
+    nextPage: () => void;
+    /** Function to navigate to the previous page */
+    prevPage: () => void;
+    /** Function to navigate to the first page */
+    goToFirstPage: () => void;
+    /** Function to load more items (increase the limit) */
+    loadMore: (count: number) => void;
+}, ProductsListPaginationServiceConfig>;