@wix/headless-stores 0.0.36 → 0.0.38

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

@@ -1,119 +0,0 @@
-import { defineService, implementService } from "@wix/services-definitions";
-import { SignalsServiceDefinition } from "@wix/services-definitions/core-services/signals";
-import { URLParamsUtils } from "../utils/url-params.js";
-import { CatalogServiceDefinition, } from "./catalog-service.js";
-export const FilterServiceDefinition = defineService("filtered-collection");
-export const defaultFilter = {
-    priceRange: { min: 0, max: 0 },
-    selectedOptions: {},
-};
-export const FilterService = implementService.withConfig()(FilterServiceDefinition, ({ getService, config }) => {
-    const signalsService = getService(SignalsServiceDefinition);
-    const catalogService = getService(CatalogServiceDefinition);
-    const currentFilters = signalsService.signal((config?.initialFilters || defaultFilter));
-    // Use computed signal for availableOptions to automatically track dependencies
-    const availableOptions = signalsService.computed(() => {
-        const catalogPriceRange = catalogService.catalogPriceRange.get();
-        const catalogOptions = catalogService.catalogOptions.get();
-        const priceRange = catalogPriceRange &&
-            catalogPriceRange.minPrice < catalogPriceRange.maxPrice
-            ? { min: catalogPriceRange.minPrice, max: catalogPriceRange.maxPrice }
-            : { min: 0, max: 0 };
-        const productOptions = catalogOptions && catalogOptions.length > 0 ? catalogOptions : [];
-        return {
-            productOptions,
-            priceRange,
-        };
-    });
-    // Use computed signal for isFullyLoaded to automatically track dependencies
-    const isFullyLoaded = signalsService.computed(() => {
-        const catalogPriceRange = catalogService.catalogPriceRange.get();
-        const catalogOptions = catalogService.catalogOptions.get();
-        // Price range data is considered loaded whether it's null (no prices) or has valid data
-        const hasPriceRangeData = catalogPriceRange !== undefined; // includes null case
-        const hasOptionsData = !!(catalogOptions && catalogOptions.length >= 0); // Even 0 options is valid
-        return hasPriceRangeData && hasOptionsData;
-    });
-    // Effect to update currentFilters when catalog data loads (only if filters are at defaults)
-    signalsService.effect(() => {
-        const catalogPriceRange = catalogService.catalogPriceRange.get();
-        if (catalogPriceRange &&
-            catalogPriceRange.minPrice < catalogPriceRange.maxPrice) {
-            const priceRange = {
-                min: catalogPriceRange.minPrice,
-                max: catalogPriceRange.maxPrice,
-            };
-            // Update current filters to use catalog price range
-            const currentFiltersValue = currentFilters.get();
-            // Only update if current filter range is at defaults (either 0-0 or 0-1000)
-            const isDefaultRange = (currentFiltersValue.priceRange.min === 0 &&
-                currentFiltersValue.priceRange.max === 0) ||
-                (currentFiltersValue.priceRange.min === 0 &&
-                    currentFiltersValue.priceRange.max === 1000);
-            if (isDefaultRange) {
-                currentFilters.set({
-                    ...currentFiltersValue,
-                    priceRange,
-                });
-            }
-        }
-    });
-    // Apply filters by delegating to the collection service
-    const applyFilters = async (filters) => {
-        currentFilters.set(filters);
-        // Update URL with filter parameters
-        const urlParams = {};
-        const availableOpts = availableOptions.get();
-        // Add price filters if different from defaults
-        if (availableOpts?.priceRange) {
-            if (filters.priceRange.min > availableOpts.priceRange.min) {
-                urlParams["minPrice"] = filters.priceRange.min.toString();
-            }
-            if (filters.priceRange.max < availableOpts.priceRange.max) {
-                urlParams["maxPrice"] = filters.priceRange.max.toString();
-            }
-        }
-        // Add option filters using option names as keys
-        if (availableOpts?.productOptions) {
-            Object.entries(filters.selectedOptions).forEach(([optionId, choiceIds]) => {
-                const option = availableOpts.productOptions.find((opt) => opt.id === optionId);
-                if (option && choiceIds.length > 0) {
-                    const selectedChoices = option.choices.filter((choice) => choiceIds.includes(choice.id));
-                    if (selectedChoices.length > 0) {
-                        // Use 'availability' as URL param for inventory filter
-                        const paramName = optionId === "inventory-filter" ? "availability" : option.name;
-                        urlParams[paramName] = selectedChoices.map((choice) => choice.name);
-                    }
-                }
-            });
-        }
-        // Preserve existing sort parameter
-        const currentParams = URLParamsUtils.getURLParams();
-        if (currentParams["sort"]) {
-            urlParams["sort"] = currentParams["sort"];
-        }
-        URLParamsUtils.updateURL(urlParams);
-    };
-    // Clear all filters by applying default filter state
-    const clearFilters = async () => {
-        const availablePriceRange = availableOptions.get()?.priceRange;
-        currentFilters.set({
-            ...defaultFilter,
-            priceRange: availablePriceRange || { min: 0, max: 0 },
-        });
-        // Clear filter parameters from URL, keeping only sort parameter
-        const currentParams = URLParamsUtils.getURLParams();
-        const urlParams = {};
-        if (currentParams["sort"]) {
-            urlParams["sort"] = currentParams["sort"];
-        }
-        URLParamsUtils.updateURL(urlParams);
-    };
-    return {
-        currentFilters,
-        applyFilters,
-        clearFilters,
-        availableOptions,
-        isFullyLoaded,
-    };
-});

package/cjs/dist/services/related-products-service.d.ts

@@ -1,100 +0,0 @@
-import { type Signal } from "@wix/services-definitions/core-services/signals";
-import * as productsV3 from "@wix/auto_sdk_stores_products-v-3";
-export interface RelatedProductsServiceAPI {
-    relatedProducts: Signal<productsV3.V3Product[]>;
-    isLoading: Signal<boolean>;
-    error: Signal<string | null>;
-    hasRelatedProducts: Signal<boolean>;
-    loadRelatedProducts: (productId: string, limit?: number) => Promise<void>;
-    refreshRelatedProducts: () => Promise<void>;
-}
-export declare const RelatedProductsServiceDefinition: string & {
-    __api: RelatedProductsServiceAPI;
-    __config: {};
-    isServiceDefinition?: boolean;
-} & RelatedProductsServiceAPI;
-export interface RelatedProductsServiceConfig {
-    productId: string;
-    limit?: number;
-}
-export declare const RelatedProductsService: import("@wix/services-definitions").ServiceFactory<string & {
-    __api: RelatedProductsServiceAPI;
-    __config: {};
-    isServiceDefinition?: boolean;
-} & RelatedProductsServiceAPI, RelatedProductsServiceConfig>;
-/**
- * Loads related products service configuration for SSR initialization.
- * This function is designed to be used during Server-Side Rendering (SSR) to create
- * configuration that tells the RelatedProductsService which product to load related products for.
- * Unlike other loaders, this creates configuration rather than fetching data during SSR.
- *
- * @param productId The ID of the product to find related products for
- * @param limit Optional number of related products to load (default: 4)
- * @returns Promise that resolves to RelatedProductsServiceConfig
- *
- * @example
- * ```astro
- * ---
- * // Astro page example - pages/product/[slug].astro
- * import { loadRelatedProductsServiceConfig } from '@wix/stores/services';
- * import { RelatedProducts } from '@wix/stores/components';
- *
- * // Create related products config for a specific product
- * const relatedProductsConfig = await loadRelatedProductsServiceConfig(
- *   'product-id-123',
- *   6
- * );
- * ---
- *
- * <RelatedProducts.Root relatedProductsConfig={relatedProductsConfig}>
- *   <RelatedProducts.List>
- *     {({ products, isLoading }) => (
- *       <div>
- *         {isLoading ? 'Loading...' : `${products.length} related products`}
- *       </div>
- *     )}
- *   </RelatedProducts.List>
- * </RelatedProducts.Root>
- * ```
- *
- * @example
- * ```tsx
- * // Next.js page example - pages/product/[slug].tsx
- * import { GetServerSideProps } from 'next';
- * import { loadRelatedProductsServiceConfig } from '@wix/stores/services';
- * import { RelatedProducts } from '@wix/stores/components';
- *
- * interface ProductPageProps {
- *   relatedProductsConfig: Awaited<ReturnType<typeof loadRelatedProductsServiceConfig>>;
- * }
- *
- * export const getServerSideProps: GetServerSideProps<ProductPageProps> = async () => {
- *   // Create related products config for a specific product
- *   const relatedProductsConfig = await loadRelatedProductsServiceConfig(
- *     'product-id-123',
- *     6
- *   );
- *
- *   return {
- *     props: {
- *       relatedProductsConfig,
- *     },
- *   };
- * };
- *
- * export default function ProductPage({ relatedProductsConfig }: ProductPageProps) {
- *   return (
- *     <RelatedProducts.Root relatedProductsConfig={relatedProductsConfig}>
- *       <RelatedProducts.List>
- *         {({ products, isLoading }) => (
- *           <div>
- *             {isLoading ? 'Loading...' : `${products.length} related products`}
- *           </div>
- *         )}
- *       </RelatedProducts.List>
- *     </RelatedProducts.Root>
- *   );
- * }
- * ```
- */
-export declare function loadRelatedProductsServiceConfig(productId: string, limit?: number): Promise<RelatedProductsServiceConfig>;

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

@@ -1,127 +0,0 @@
-import { defineService, implementService, } from "@wix/services-definitions";
-import { SignalsServiceDefinition, } from "@wix/services-definitions/core-services/signals";
-import * as productsV3 from "@wix/auto_sdk_stores_products-v-3";
-export const RelatedProductsServiceDefinition = defineService("relatedProducts");
-export const RelatedProductsService = implementService.withConfig()(RelatedProductsServiceDefinition, ({ getService, config }) => {
-    const signalsService = getService(SignalsServiceDefinition);
-    const relatedProducts = signalsService.signal([]);
-    const isLoading = signalsService.signal(false);
-    const error = signalsService.signal(null);
-    const hasRelatedProducts = signalsService.signal(false);
-    const loadRelatedProducts = async (productId, limit = 4) => {
-        isLoading.set(true);
-        error.set(null);
-        try {
-            let relatedQuery = productsV3.queryProducts().ne("_id", productId);
-            const relatedResult = await relatedQuery.limit(limit).find();
-            relatedProducts.set(relatedResult.items || []);
-            hasRelatedProducts.set((relatedResult.items || []).length > 0);
-        }
-        catch (err) {
-            const errorMessage = err instanceof Error
-                ? err.message
-                : "Failed to load related products";
-            error.set(errorMessage);
-            relatedProducts.set([]);
-            hasRelatedProducts.set(false);
-        }
-        finally {
-            isLoading.set(false);
-        }
-    };
-    const refreshRelatedProducts = async () => {
-        await loadRelatedProducts(config.productId, config.limit);
-    };
-    if (config.productId) {
-        loadRelatedProducts(config.productId, config.limit);
-    }
-    return {
-        relatedProducts,
-        isLoading,
-        error,
-        hasRelatedProducts,
-        loadRelatedProducts,
-        refreshRelatedProducts,
-    };
-});
-/**
- * Loads related products service configuration for SSR initialization.
- * This function is designed to be used during Server-Side Rendering (SSR) to create
- * configuration that tells the RelatedProductsService which product to load related products for.
- * Unlike other loaders, this creates configuration rather than fetching data during SSR.
- *
- * @param productId The ID of the product to find related products for
- * @param limit Optional number of related products to load (default: 4)
- * @returns Promise that resolves to RelatedProductsServiceConfig
- *
- * @example
- * ```astro
- * ---
- * // Astro page example - pages/product/[slug].astro
- * import { loadRelatedProductsServiceConfig } from '@wix/stores/services';
- * import { RelatedProducts } from '@wix/stores/components';
- *
- * // Create related products config for a specific product
- * const relatedProductsConfig = await loadRelatedProductsServiceConfig(
- *   'product-id-123',
- *   6
- * );
- * ---
- *
- * <RelatedProducts.Root relatedProductsConfig={relatedProductsConfig}>
- *   <RelatedProducts.List>
- *     {({ products, isLoading }) => (
- *       <div>
- *         {isLoading ? 'Loading...' : `${products.length} related products`}
- *       </div>
- *     )}
- *   </RelatedProducts.List>
- * </RelatedProducts.Root>
- * ```
- *
- * @example
- * ```tsx
- * // Next.js page example - pages/product/[slug].tsx
- * import { GetServerSideProps } from 'next';
- * import { loadRelatedProductsServiceConfig } from '@wix/stores/services';
- * import { RelatedProducts } from '@wix/stores/components';
- *
- * interface ProductPageProps {
- *   relatedProductsConfig: Awaited<ReturnType<typeof loadRelatedProductsServiceConfig>>;
- * }
- *
- * export const getServerSideProps: GetServerSideProps<ProductPageProps> = async () => {
- *   // Create related products config for a specific product
- *   const relatedProductsConfig = await loadRelatedProductsServiceConfig(
- *     'product-id-123',
- *     6
- *   );
- *
- *   return {
- *     props: {
- *       relatedProductsConfig,
- *     },
- *   };
- * };
- *
- * export default function ProductPage({ relatedProductsConfig }: ProductPageProps) {
- *   return (
- *     <RelatedProducts.Root relatedProductsConfig={relatedProductsConfig}>
- *       <RelatedProducts.List>
- *         {({ products, isLoading }) => (
- *           <div>
- *             {isLoading ? 'Loading...' : `${products.length} related products`}
- *           </div>
- *         )}
- *       </RelatedProducts.List>
- *     </RelatedProducts.Root>
- *   );
- * }
- * ```
- */
-export async function loadRelatedProductsServiceConfig(productId, limit = 4) {
-    return {
-        productId,
-        limit,
-    };
-}

package/cjs/dist/services/sort-service.d.ts

@@ -1,20 +0,0 @@
-import { type Signal } from "@wix/services-definitions/core-services/signals";
-import { SortType } from "../enums/sort-enums.js";
-export type SortBy = SortType;
-export interface SortServiceAPI {
-    currentSort: Signal<SortBy>;
-    setSortBy: (sortBy: SortBy) => Promise<void>;
-}
-export declare const SortServiceDefinition: string & {
-    __api: SortServiceAPI;
-    __config: {};
-    isServiceDefinition?: boolean;
-} & SortServiceAPI;
-export declare const defaultSort: SortBy;
-export declare const SortService: import("@wix/services-definitions").ServiceFactory<string & {
-    __api: SortServiceAPI;
-    __config: {};
-    isServiceDefinition?: boolean;
-} & SortServiceAPI, {
-    initialSort?: SortBy;
-}>;

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

@@ -1,27 +0,0 @@
-import { defineService, implementService } from "@wix/services-definitions";
-import { SignalsServiceDefinition, } from "@wix/services-definitions/core-services/signals";
-import { URLParamsUtils } from "../utils/url-params.js";
-import { SortType, DEFAULT_SORT_TYPE } from "../enums/sort-enums.js";
-export const SortServiceDefinition = defineService("sort");
-export const defaultSort = DEFAULT_SORT_TYPE;
-export const SortService = implementService.withConfig()(SortServiceDefinition, ({ getService, config }) => {
-    const signalsService = getService(SignalsServiceDefinition);
-    const currentSort = signalsService.signal((config?.initialSort || defaultSort));
-    const setSortBy = async (sortBy) => {
-        currentSort.set(sortBy);
-        // Update URL with sort parameter
-        const currentParams = URLParamsUtils.getURLParams();
-        const urlParams = { ...currentParams };
-        if (sortBy !== SortType.NEWEST) {
-            urlParams["sort"] = sortBy;
-        }
-        else {
-            delete urlParams["sort"];
-        }
-        URLParamsUtils.updateURL(urlParams);
-    };
-    return {
-        currentSort,
-        setSortBy,
-    };
-});

package/dist/react/Collection.d.ts

@@ -1,294 +0,0 @@
-import { type V3Product } from "@wix/auto_sdk_stores_products-v-3";
-/**
- * Props for Grid headless component
- */
-export interface GridProps {
-    /** Render prop function that receives product grid data */
-    children: (props: GridRenderProps) => React.ReactNode;
-}
-/**
- * Render props for Grid component
- */
-export interface GridRenderProps {
-    /** Array of products */
-    products: V3Product[];
-    /** Whether products are loading */
-    isLoading: boolean;
-    /** Error message if any */
-    error: string | null;
-    /** Whether there are no products */
-    isEmpty: boolean;
-    /** Total number of products */
-    totalProducts: number;
-    /** Whether collection has products */
-    hasProducts: boolean;
-}
-/**
- * Headless component for product grid
- *
- * @component
- * @example
- * ```tsx
- * import { Collection } from '@wix/stores/components';
- *
- * function ProductGrid() {
- *   return (
- *     <Collection.Grid>
- *       {({ products, isLoading, error, isEmpty, totalProducts, hasProducts }) => (
- *         <div>
- *           {isLoading && <div>Loading products...</div>}
- *           {error && <div>Error: {error}</div>}
- *           {isEmpty && <div>No products found</div>}
- *           {hasProducts && (
- *             <div>
- *               <p>Showing {products.length} of {totalProducts} products</p>
- *               <div className="product-grid">
- *                 {products.map(product => (
- *                   <div key={product.id} className="product-card">
- *                     <h3>{product.name}</h3>
- *                     <p>{product.price?.price} {product.price?.currency}</p>
- *                   </div>
- *                 ))}
- *               </div>
- *             </div>
- *           )}
- *         </div>
- *       )}
- *     </Collection.Grid>
- *   );
- * }
- * ```
- */
-export declare const Grid: (props: GridProps) => import("react").ReactNode;
-/**
- * Props for Item headless component
- */
-export interface ItemProps {
-    /** Product data */
-    product: V3Product;
-    /** Render prop function that receives product item data */
-    children: (props: ItemRenderProps) => React.ReactNode;
-}
-/**
- * Render props for Item component
- */
-export interface ItemRenderProps {
-    /** Product ID */
-    id: string;
-    /** Product title */
-    title: string;
-    /** Product slug for URL */
-    slug: string;
-    /** Main product image URL */
-    image: string | null;
-    /** Product price */
-    price: string;
-    /** Compare at price (for strikethrough) */
-    compareAtPrice: string | null;
-    /** Product description */
-    description: string;
-    /** Whether product is available */
-    available: boolean;
-}
-/**
- * Headless component for individual product item
- *
- * @component
- * @example
- * ```tsx
- * import { Collection } from '@wix/stores/components';
- *
- * function ProductCard({ product }) {
- *   return (
- *     <Collection.Item product={product}>
- *       {({ id, title, slug, image, price, compareAtPrice, description, available }) => (
- *         <div className={`product-card ${!available ? 'unavailable' : ''}`}>
- *           {image && <img src={image} alt={title} />}
- *           <h3>{title}</h3>
- *           <p>{description}</p>
- *           <div className="pricing">
- *             <span className="price">{price}</span>
- *             {compareAtPrice && (
- *               <span className="compare-price"><s>{compareAtPrice}</s></span>
- *             )}
- *           </div>
- *           {!available && <div className="badge">Out of Stock</div>}
- *           <a href={`/products/${slug}`}>View Product</a>
- *         </div>
- *       )}
- *     </Collection.Item>
- *   );
- * }
- * ```
- */
-export declare const Item: (props: ItemProps) => import("react").ReactNode;
-/**
- * Props for LoadMore headless component
- */
-export interface LoadMoreProps {
-    /** Render prop function that receives load more data */
-    children: (props: LoadMoreRenderProps) => React.ReactNode;
-}
-/**
- * Render props for LoadMore component
- */
-export interface LoadMoreRenderProps {
-    /** Function to load more products */
-    loadMore: () => Promise<void>;
-    /** Function to refresh products */
-    refresh: () => Promise<void>;
-    /** Whether load more is currently loading */
-    isLoading: boolean;
-    /** Whether there are products */
-    hasProducts: boolean;
-    /** Total number of products currently loaded */
-    totalProducts: number;
-    /** Whether there are more products to load */
-    hasMoreProducts: boolean;
-}
-/**
- * Headless component for load more products functionality
- * Note: V3 API uses simplified loading without traditional pagination
- *
- * @component
- * @example
- * ```tsx
- * import { Collection } from '@wix/stores/components';
- *
- * function LoadMoreButton() {
- *   return (
- *     <Collection.LoadMore>
- *       {({ loadMore, refresh, isLoading, hasProducts, totalProducts, hasMoreProducts }) => (
- *         <div className="load-more-section">
- *           {hasProducts && (
- *             <div>
- *               <p>Loaded {totalProducts} products</p>
- *               <div className="actions">
- *                 {hasMoreProducts && (
- *                   <button
- *                     onClick={loadMore}
- *                     disabled={isLoading}
- *                   >
- *                     {isLoading ? 'Loading...' : 'Load More Products'}
- *                   </button>
- *                 )}
- *                 <button onClick={refresh}>Refresh Collection</button>
- *               </div>
- *             </div>
- *           )}
- *         </div>
- *       )}
- *     </Collection.LoadMore>
- *   );
- * }
- * ```
- */
-export declare const LoadMore: (props: LoadMoreProps) => import("react").ReactNode;
-/**
- * Props for Header headless component
- */
-export interface HeaderProps {
-    /** Render prop function that receives collection header data */
-    children: (props: HeaderRenderProps) => React.ReactNode;
-}
-/**
- * Render props for Header component
- */
-export interface HeaderRenderProps {
-    /** Total number of products */
-    totalProducts: number;
-    /** Whether collection is loading */
-    isLoading: boolean;
-    /** Whether collection has products */
-    hasProducts: boolean;
-}
-/**
- * Headless component for collection header with product count
- *
- * @component
- * @example
- * ```tsx
- * import { Collection } from '@wix/stores/components';
- *
- * function CollectionHeader() {
- *   return (
- *     <Collection.Header>
- *       {({ totalProducts, isLoading, hasProducts }) => (
- *         <div className="collection-header">
- *           {isLoading && <div>Loading collection...</div>}
- *           {hasProducts && !isLoading && (
- *             <h2>Products ({totalProducts} items)</h2>
- *           )}
- *           {!hasProducts && !isLoading && (
- *             <h2>No products found</h2>
- *           )}
- *         </div>
- *       )}
- *     </Collection.Header>
- *   );
- * }
- * ```
- */
-export declare const Header: (props: HeaderProps) => import("react").ReactNode;
-/**
- * Props for Actions headless component
- */
-export interface ActionsProps {
-    /** Render prop function that receives collection actions data */
-    children: (props: ActionsRenderProps) => React.ReactNode;
-}
-/**
- * Render props for Actions component
- */
-export interface ActionsRenderProps {
-    /** Function to refresh the collection */
-    refresh: () => Promise<void>;
-    /** Function to load more products */
-    loadMore: () => Promise<void>;
-    /** Whether actions are loading */
-    isLoading: boolean;
-    /** Error message if any */
-    error: string | null;
-}
-/**
- * Headless component for collection actions (refresh, load more)
- * Replaces traditional pagination for V3 API
- *
- * @component
- * @example
- * ```tsx
- * import { Collection } from '@wix/stores/components';
- *
- * function CollectionActions() {
- *   return (
- *     <Collection.Actions>
- *       {({ refresh, loadMore, isLoading, error }) => (
- *         <div className="collection-actions">
- *           {error && (
- *             <div className="error">
- *               Error: {error}
- *               <button onClick={refresh}>Retry</button>
- *             </div>
- *           )}
- *           <div className="action-buttons">
- *             <button
- *               onClick={refresh}
- *               disabled={isLoading}
- *             >
- *               {isLoading ? 'Refreshing...' : 'Refresh'}
- *             </button>
- *             <button
- *               onClick={loadMore}
- *               disabled={isLoading}
- *             >
- *               Load More
- *             </button>
- *           </div>
- *         </div>
- *       )}
- *     </Collection.Actions>
- *   );
- * }
- * ```
- */
-export declare const Actions: (props: ActionsProps) => import("react").ReactNode;