@wix/headless-stores 0.0.9 → 0.0.11

package/dist/services/collection-service.js

@@ -0,0 +1,532 @@
+import { defineService, implementService, } from '@wix/services-definitions';
+import { SignalsServiceDefinition } from '@wix/services-definitions/core-services/signals';
+import { searchProducts as searchProductsSDK, SortDirection, } from '@wix/auto_sdk_stores_products-v-3';
+import { queryVariants } from '@wix/auto_sdk_stores_read-only-variants-v-3';
+import { FilterServiceDefinition } from './filter-service';
+import { CategoryServiceDefinition } from './category-service';
+import { SortServiceDefinition } from './sort-service';
+import { URLParamsUtils } from '../utils/url-params';
+import { SortType } from '../enums/sort-enums';
+const searchProducts = async (searchOptions) => {
+    const searchParams = {
+        filter: searchOptions.search?.filter,
+        sort: searchOptions.search?.sort,
+        ...(searchOptions.paging && { cursorPaging: searchOptions.paging }),
+    };
+    const options = {
+        fields: searchOptions.fields || [],
+    };
+    const result = await searchProductsSDK(searchParams, options);
+    // Fetch missing variants for all products in one batch request
+    if (result.products) {
+        result.products = await fetchMissingVariants(result.products);
+    }
+    return result;
+};
+// Helper to build search options with supported filters
+const buildSearchOptions = (filters, selectedCategory, sortBy) => {
+    const searchOptions = {
+        search: {},
+        fields: [
+            'DESCRIPTION',
+            'DIRECT_CATEGORIES_INFO',
+            'BREADCRUMBS_INFO',
+            'INFO_SECTION',
+            'MEDIA_ITEMS_INFO',
+            'PLAIN_DESCRIPTION',
+            'THUMBNAIL',
+            'URL',
+            'VARIANT_OPTION_CHOICE_NAMES',
+            'WEIGHT_MEASUREMENT_UNIT_INFO',
+        ],
+    };
+    // Build filter conditions array
+    const filterConditions = [];
+    // Add category filter if selected
+    if (selectedCategory) {
+        filterConditions.push({
+            'allCategoriesInfo.categories': {
+                $matchItems: [
+                    {
+                        id: {
+                            $in: [selectedCategory],
+                        },
+                    },
+                ],
+            },
+        });
+    }
+    // Add price range filter if provided
+    if (filters?.priceRange) {
+        const { min, max } = filters.priceRange;
+        if (min > 0) {
+            filterConditions.push({
+                'actualPriceRange.minValue.amount': { $gte: min.toString() },
+            });
+        }
+        if (max > 0 && max < 999999) {
+            filterConditions.push({
+                'actualPriceRange.maxValue.amount': { $lte: max.toString() },
+            });
+        }
+    }
+    // Add product options filter if provided
+    if (filters?.selectedOptions &&
+        Object.keys(filters.selectedOptions).length > 0) {
+        for (const [optionId, choiceIds] of Object.entries(filters.selectedOptions)) {
+            if (choiceIds.length > 0) {
+                // Handle inventory filter separately
+                if (optionId === 'inventory-filter') {
+                    filterConditions.push({
+                        'inventory.availabilityStatus': {
+                            $in: choiceIds,
+                        },
+                    });
+                }
+                else {
+                    // Regular product options filter
+                    filterConditions.push({
+                        'options.choicesSettings.choices.choiceId': {
+                            $hasSome: choiceIds,
+                        },
+                    });
+                }
+            }
+        }
+    }
+    // Apply filters
+    if (filterConditions.length > 0) {
+        if (filterConditions.length === 1) {
+            // Single condition - no need for $and wrapper
+            searchOptions.search.filter = filterConditions[0];
+        }
+        else {
+            // Multiple conditions - use $and
+            searchOptions.search.filter = {
+                $and: filterConditions,
+            };
+        }
+    }
+    // Add sort if provided
+    if (sortBy) {
+        switch (sortBy) {
+            case SortType.NAME_ASC:
+                searchOptions.search.sort = [
+                    { fieldName: 'name', order: SortDirection.ASC },
+                ];
+                break;
+            case SortType.NAME_DESC:
+                searchOptions.search.sort = [
+                    { fieldName: 'name', order: SortDirection.DESC },
+                ];
+                break;
+            case SortType.PRICE_ASC:
+                searchOptions.search.sort = [
+                    {
+                        fieldName: 'actualPriceRange.minValue.amount',
+                        order: SortDirection.ASC,
+                    },
+                ];
+                break;
+            case SortType.PRICE_DESC:
+                searchOptions.search.sort = [
+                    {
+                        fieldName: 'actualPriceRange.minValue.amount',
+                        order: SortDirection.DESC,
+                    },
+                ];
+                break;
+            case SortType.RECOMMENDED:
+                searchOptions.search.sort = [
+                    {
+                        fieldName: 'allCategoriesInfo.categories.index',
+                        selectItemsBy: [
+                            {
+                                'allCategoriesInfo.categories.id': selectedCategory,
+                            },
+                        ],
+                    },
+                ];
+                break;
+        }
+    }
+    return searchOptions;
+};
+export const CollectionServiceDefinition = defineService('collection');
+export const CollectionService = implementService.withConfig()(CollectionServiceDefinition, ({ getService, config }) => {
+    const signalsService = getService(SignalsServiceDefinition);
+    const collectionFilters = getService(FilterServiceDefinition);
+    const categoryService = getService(CategoryServiceDefinition);
+    const sortService = getService(SortServiceDefinition);
+    const hasMoreProducts = signalsService.signal((config.initialHasMore ?? true));
+    let nextCursor = config.initialCursor;
+    const initialProducts = config.initialProducts || [];
+    // Signal declarations
+    const productsList = signalsService.signal(initialProducts);
+    const isLoading = signalsService.signal(false);
+    const error = signalsService.signal(null);
+    const totalProducts = signalsService.signal(initialProducts.length);
+    const hasProducts = signalsService.signal((initialProducts.length > 0));
+    const pageSize = config.pageSize || 12;
+    let allProducts = initialProducts;
+    // Debouncing mechanism to prevent multiple simultaneous refreshes
+    let refreshTimeout = null;
+    let isRefreshing = false;
+    let isInitializingCatalogData = true;
+    const loadMore = async () => {
+        // Don't load more if there are no more products available
+        if (!hasMoreProducts.get()) {
+            return;
+        }
+        try {
+            isLoading.set(true);
+            error.set(null);
+            // For loadMore, use no filters or sorting to work with cursor pagination
+            const searchOptions = buildSearchOptions(undefined, undefined, undefined);
+            // Add pagination
+            searchOptions.paging = { limit: pageSize };
+            if (nextCursor) {
+                searchOptions.paging.cursor = nextCursor;
+            }
+            const currentProducts = productsList.get();
+            const productResults = await searchProducts(searchOptions);
+            // Update cursor for next pagination
+            nextCursor = productResults.pagingMetadata?.cursors?.next || undefined;
+            // Check if there are more products to load
+            const hasMore = Boolean(nextCursor &&
+                productResults.products &&
+                productResults.products.length === pageSize);
+            hasMoreProducts.set(hasMore);
+            // Update allProducts with the new data
+            allProducts = [...allProducts, ...(productResults.products || [])];
+            // Add new products to the list
+            const additionalProducts = productResults.products || [];
+            productsList.set([...currentProducts, ...additionalProducts]);
+            totalProducts.set(currentProducts.length + additionalProducts.length);
+            hasProducts.set(currentProducts.length + additionalProducts.length > 0);
+        }
+        catch (err) {
+            error.set(err instanceof Error ? err.message : 'Failed to load more products');
+        }
+        finally {
+            isLoading.set(false);
+        }
+    };
+    const refresh = async (setTotalProducts = true) => {
+        if (isRefreshing)
+            return;
+        try {
+            isRefreshing = true;
+            isLoading.set(true);
+            error.set(null);
+            const filters = collectionFilters.currentFilters.get();
+            const selectedCategory = categoryService.selectedCategory.get();
+            const sortBy = sortService.currentSort.get();
+            // Use regular search for all sorting options including recommended
+            const searchOptions = buildSearchOptions(filters, selectedCategory, sortBy);
+            // Add pagination
+            searchOptions.paging = { limit: pageSize };
+            const productResults = await searchProducts(searchOptions);
+            const isPriceSort = sortBy === SortType.PRICE_ASC || sortBy === SortType.PRICE_DESC;
+            if (isPriceSort) {
+                productResults.products = productResults.products?.sort((a, b) => {
+                    const aPrice = Number(a.actualPriceRange?.minValue?.amount) || 0;
+                    const bPrice = Number(b.actualPriceRange?.minValue?.amount) || 0;
+                    return sortBy === SortType.PRICE_ASC
+                        ? aPrice - bPrice
+                        : bPrice - aPrice;
+                });
+            }
+            // Reset pagination state
+            nextCursor = productResults.pagingMetadata?.cursors?.next || undefined;
+            const hasMore = Boolean(productResults.pagingMetadata?.cursors?.next &&
+                productResults.products &&
+                productResults.products.length === pageSize);
+            hasMoreProducts.set(hasMore);
+            // Update allProducts with the new data
+            allProducts = productResults.products || [];
+            // All filtering is handled server-side
+            productsList.set(allProducts);
+            if (setTotalProducts) {
+                totalProducts.set(allProducts.length);
+            }
+            hasProducts.set(allProducts.length > 0);
+        }
+        catch (err) {
+            error.set(err instanceof Error ? err.message : 'Failed to refresh products');
+        }
+        finally {
+            isLoading.set(false);
+            isRefreshing = false;
+        }
+    };
+    // Debounced refresh function
+    const debouncedRefresh = async (setTotalProducts = true) => {
+        if (refreshTimeout) {
+            clearTimeout(refreshTimeout);
+        }
+        return new Promise(resolve => {
+            refreshTimeout = setTimeout(async () => {
+                await refresh(setTotalProducts);
+                resolve();
+            }, 50); // 50ms debounce delay
+        });
+    };
+    // Refresh with server-side filtering when any filters change
+    collectionFilters.currentFilters.subscribe(() => {
+        // Skip refresh during catalog data initialization to prevent double API calls
+        if (isInitializingCatalogData) {
+            return;
+        }
+        // All filtering (categories, price, options) is now handled server-side
+        debouncedRefresh(false);
+    });
+    // Initialize catalog data when the service starts
+    const initializeCatalogData = async () => {
+        const selectedCategory = categoryService.selectedCategory.get();
+        await collectionFilters.loadCatalogPriceRange(selectedCategory || undefined);
+        await collectionFilters.loadCatalogOptions(selectedCategory || undefined);
+        // Reset flag to allow filter changes to trigger refreshes
+        isInitializingCatalogData = false;
+    };
+    // Load catalog data on initialization
+    void initializeCatalogData();
+    sortService.currentSort.subscribe(() => {
+        debouncedRefresh(false);
+    });
+    categoryService.selectedCategory.subscribe(() => {
+        debouncedRefresh(true).then(() => {
+            initializeCatalogData();
+        });
+    });
+    return {
+        products: productsList,
+        isLoading,
+        error,
+        totalProducts,
+        hasProducts,
+        hasMoreProducts,
+        loadMore,
+        refresh: debouncedRefresh,
+    };
+});
+// Helper function to parse URL parameters
+function parseURLParams(searchParams, products = []) {
+    const defaultFilters = {
+        priceRange: { min: 0, max: 0 },
+        selectedOptions: {},
+    };
+    if (!searchParams) {
+        return {
+            initialSort: SortType.NEWEST,
+            initialFilters: defaultFilters,
+        };
+    }
+    const urlParams = URLParamsUtils.parseSearchParams(searchParams);
+    // Parse sort parameter
+    const sortMap = {
+        name_asc: SortType.NAME_ASC,
+        name_desc: SortType.NAME_DESC,
+        price_asc: SortType.PRICE_ASC,
+        price_desc: SortType.PRICE_DESC,
+        recommended: SortType.RECOMMENDED,
+    };
+    const initialSort = sortMap[urlParams['sort']] || SortType.NEWEST;
+    // Check if there are any filter parameters (excluding sort)
+    const filterParams = Object.keys(urlParams).filter(key => key !== 'sort');
+    if (filterParams.length === 0 || products.length === 0) {
+        return { initialSort, initialFilters: defaultFilters };
+    }
+    // Calculate available price range from products
+    const priceRange = calculatePriceRange(products);
+    const initialFilters = {
+        priceRange,
+        selectedOptions: {},
+    };
+    // Apply price filters from URL
+    if (urlParams['minPrice']) {
+        const min = parseFloat(urlParams['minPrice']);
+        if (!isNaN(min))
+            initialFilters.priceRange.min = min;
+    }
+    if (urlParams['maxPrice']) {
+        const max = parseFloat(urlParams['maxPrice']);
+        if (!isNaN(max))
+            initialFilters.priceRange.max = max;
+    }
+    // Parse option filters
+    const optionsMap = buildOptionsMap(products);
+    parseOptionFilters(urlParams, optionsMap, initialFilters);
+    // Parse inventory filter from 'availability' URL parameter
+    if (urlParams['availability']) {
+        const availabilityValues = Array.isArray(urlParams['availability'])
+            ? urlParams['availability']
+            : [urlParams['availability']];
+        const inventoryStatusValues = availabilityValues.map(value => value.replace(/\s+/g, '_').toUpperCase());
+        initialFilters.selectedOptions['inventory-filter'] = inventoryStatusValues;
+    }
+    return { initialSort, initialFilters };
+}
+// Helper function to calculate price range from products
+function calculatePriceRange(products) {
+    if (products.length === 0) {
+        return { min: 0, max: 1000 };
+    }
+    let minPrice = Infinity;
+    let maxPrice = 0;
+    products.forEach(product => {
+        const min = parseFloat(product.actualPriceRange?.minValue?.amount || '0');
+        const max = parseFloat(product.actualPriceRange?.maxValue?.amount || '0');
+        if (min > 0)
+            minPrice = Math.min(minPrice, min);
+        if (max > 0)
+            maxPrice = Math.max(maxPrice, max);
+    });
+    // If no valid prices found, return default range
+    if (minPrice === Infinity) {
+        minPrice = 0;
+        maxPrice = 1000;
+    }
+    return { min: minPrice, max: maxPrice };
+}
+// Helper function to build options map from products
+function buildOptionsMap(products) {
+    const optionsMap = new Map();
+    products.forEach(product => {
+        product.options?.forEach(option => {
+            if (!option._id || !option.name)
+                return;
+            if (!optionsMap.has(option.name)) {
+                optionsMap.set(option.name, { id: option._id, choices: [] });
+            }
+            const optionData = optionsMap.get(option.name);
+            option.choicesSettings?.choices?.forEach(choice => {
+                if (choice.choiceId &&
+                    choice.name &&
+                    !optionData.choices.find(c => c.id === choice.choiceId)) {
+                    optionData.choices.push({ id: choice.choiceId, name: choice.name });
+                }
+            });
+        });
+    });
+    return optionsMap;
+}
+// Helper function to parse option filters from URL parameters
+function parseOptionFilters(urlParams, optionsMap, filters) {
+    Object.entries(urlParams).forEach(([key, value]) => {
+        if (['sort', 'minPrice', 'maxPrice'].includes(key))
+            return;
+        const option = optionsMap.get(key);
+        if (option) {
+            const values = Array.isArray(value) ? value : [value];
+            const matchingChoices = option.choices.filter(choice => values.includes(choice.name));
+            if (matchingChoices.length > 0) {
+                filters.selectedOptions[option.id] = matchingChoices.map(c => c.id);
+            }
+        }
+    });
+}
+export async function loadCollectionServiceConfig(categoryId, searchParams, preloadedCategories) {
+    try {
+        // Use pre-loaded categories if provided, otherwise load them
+        let categories;
+        if (preloadedCategories) {
+            categories = preloadedCategories;
+        }
+        else {
+            const { loadCategoriesConfig } = await import('./category-service');
+            const categoriesConfig = await loadCategoriesConfig();
+            categories = categoriesConfig.categories;
+        }
+        // Build search options with category filter
+        const searchOptions = buildSearchOptions(undefined, categoryId, undefined);
+        const pageSize = 12;
+        searchOptions.paging = { limit: pageSize };
+        const productResults = await searchProducts(searchOptions);
+        // Parse URL parameters for initial state
+        const { initialSort, initialFilters } = parseURLParams(searchParams, productResults.products || []);
+        return {
+            initialProducts: productResults.products || [],
+            pageSize,
+            initialCursor: productResults.pagingMetadata?.cursors?.next || undefined,
+            initialHasMore: Boolean(productResults.pagingMetadata?.cursors?.next &&
+                productResults.products &&
+                productResults.products.length === pageSize),
+            initialSort,
+            initialFilters,
+            categories,
+        };
+    }
+    catch (error) {
+        console.warn('Failed to load initial products:', error);
+        const { initialSort, initialFilters } = parseURLParams(searchParams);
+        return {
+            initialProducts: [],
+            pageSize: 12,
+            initialHasMore: false,
+            initialSort,
+            initialFilters,
+            categories: [],
+        };
+    }
+}
+// Add function to fetch missing variants for all products in one request
+const fetchMissingVariants = async (products) => {
+    // Find products that need variants (both single and multi-variant products)
+    const productsNeedingVariants = products.filter(product => !product.variantsInfo?.variants &&
+        product.variantSummary?.variantCount &&
+        product.variantSummary.variantCount > 0);
+    if (productsNeedingVariants.length === 0) {
+        return products;
+    }
+    try {
+        const productIds = productsNeedingVariants
+            .map(p => p._id)
+            .filter(Boolean);
+        if (productIds.length === 0) {
+            return products;
+        }
+        const items = [];
+        const res = await queryVariants({})
+            .in('productData.productId', productIds)
+            .limit(100)
+            .find();
+        items.push(...res.items);
+        let nextRes = res;
+        while (nextRes.hasNext()) {
+            nextRes = await nextRes.next();
+            items.push(...nextRes.items);
+        }
+        const variantsByProductId = new Map();
+        items.forEach(item => {
+            const productId = item.productData?.productId;
+            if (productId) {
+                if (!variantsByProductId.has(productId)) {
+                    variantsByProductId.set(productId, []);
+                }
+                variantsByProductId.get(productId).push({
+                    ...item,
+                    choices: item.optionChoices,
+                });
+            }
+        });
+        // Update products with their variants
+        return products.map(product => {
+            const variants = variantsByProductId.get(product._id || '');
+            if (variants && variants.length > 0) {
+                return {
+                    ...product,
+                    variantsInfo: {
+                        ...product.variantsInfo,
+                        variants,
+                    },
+                };
+            }
+            return product;
+        });
+    }
+    catch (error) {
+        console.error('Failed to fetch missing variants:', error);
+        return products;
+    }
+};

package/dist/services/filter-service.d.ts

@@ -0,0 +1,56 @@
+import type { Signal } from '../../Signal';
+export interface ProductOption {
+    id: string;
+    name: string;
+    choices: {
+        id: string;
+        name: string;
+        colorCode?: string;
+    }[];
+    optionRenderType?: string;
+}
+export interface PriceRange {
+    min: number;
+    max: number;
+}
+export interface AvailableOptions {
+    productOptions: ProductOption[];
+    priceRange: PriceRange;
+}
+export interface Filter {
+    priceRange: {
+        min: number;
+        max: number;
+    };
+    selectedOptions: {
+        [optionId: string]: string[];
+    };
+}
+export interface FilterServiceAPI {
+    currentFilters: Signal<Filter>;
+    applyFilters: (filters: Filter) => Promise<void>;
+    clearFilters: () => Promise<void>;
+    availableOptions: Signal<{
+        productOptions: ProductOption[];
+        priceRange: {
+            min: number;
+            max: number;
+        };
+    }>;
+    loadCatalogPriceRange: (categoryId?: string) => Promise<void>;
+    loadCatalogOptions: (categoryId?: string) => Promise<void>;
+    isFullyLoaded: Signal<boolean>;
+}
+export declare const FilterServiceDefinition: string & {
+    __api: FilterServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & FilterServiceAPI;
+export declare const defaultFilter: Filter;
+export declare const FilterService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: FilterServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & FilterServiceAPI, {
+    initialFilters?: Filter;
+}, import("@wix/services-definitions").ThreadMode.MAIN>;