@wix/headless-stores 0.0.9 → 0.0.11

package/dist/react/Collection.js

@@ -0,0 +1,201 @@
+import { useService } from '@wix/services-manager-react';
+import { CollectionServiceDefinition } from '../services/collection-service';
+import { InventoryAvailabilityStatus, } from '@wix/auto_sdk_stores_products-v-3';
+/**
+ * Headless component for product grid
+ *
+ * @component
+ */
+export const Grid = (props) => {
+    const service = useService(CollectionServiceDefinition);
+    // Debug logging to help identify service issues
+    if (!service) {
+        console.error('CollectionService is undefined');
+        return props.children({
+            products: [],
+            isLoading: false,
+            error: 'Service not available',
+            isEmpty: true,
+            totalProducts: 0,
+            hasProducts: false,
+        });
+    }
+    // Safely access service properties with error handling
+    try {
+        const productList = service.products?.get() || [];
+        const isLoading = service.isLoading?.get() || false;
+        const error = service.error?.get() || null;
+        const totalProducts = service.totalProducts?.get() || 0;
+        const hasProducts = service.hasProducts?.get() || false;
+        return props.children({
+            products: productList,
+            isLoading,
+            error,
+            isEmpty: !hasProducts && !isLoading,
+            totalProducts,
+            hasProducts,
+        });
+    }
+    catch (err) {
+        console.error('Error accessing service properties:', err);
+        return props.children({
+            products: [],
+            isLoading: false,
+            error: 'Failed to load products',
+            isEmpty: true,
+            totalProducts: 0,
+            hasProducts: false,
+        });
+    }
+};
+/**
+ * Headless component for individual product item
+ *
+ * @component
+ */
+export const Item = (props) => {
+    const { product } = props;
+    // Use actual v3 API structure based on real data
+    // Images are in media.main.image, not media.itemsInfo.items
+    const image = product?.media?.main?.image || null;
+    // Create formatted price since formattedAmount is not available
+    const rawAmount = product.actualPriceRange?.minValue?.amount;
+    const price = rawAmount ? `$${rawAmount}` : '$0.00';
+    // Create formatted compare-at price
+    const rawCompareAmount = product.compareAtPriceRange?.minValue?.amount;
+    const compareAtPrice = rawCompareAmount ? `$${rawCompareAmount}` : null;
+    const availabilityStatus = product.inventory?.availabilityStatus;
+    const available = availabilityStatus === InventoryAvailabilityStatus.IN_STOCK ||
+        availabilityStatus === InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK;
+    const description = typeof product.description === 'string' ? product.description : '';
+    return props.children({
+        id: product._id || '',
+        title: product.name || '',
+        slug: product.slug || '',
+        image,
+        price,
+        compareAtPrice,
+        description,
+        available,
+        href: `/store/products/${product.slug}`,
+    });
+};
+/**
+ * Headless component for load more products functionality
+ * Note: V3 API uses simplified loading without traditional pagination
+ *
+ * @component
+ */
+export const LoadMore = (props) => {
+    const service = useService(CollectionServiceDefinition);
+    // Error handling for undefined service
+    if (!service) {
+        console.error('CollectionService is undefined in LoadMore');
+        return props.children({
+            loadMore: async () => { },
+            refresh: async () => { },
+            isLoading: false,
+            hasProducts: false,
+            totalProducts: 0,
+            hasMoreProducts: false,
+        });
+    }
+    try {
+        const isLoading = service.isLoading?.get() || false;
+        const hasProducts = service.hasProducts?.get() || false;
+        const totalProducts = service.totalProducts?.get() || 0;
+        const hasMoreProducts = service.hasMoreProducts?.get() || false;
+        return props.children({
+            loadMore: service.loadMore || (async () => { }),
+            refresh: service.refresh || (async () => { }),
+            isLoading,
+            hasProducts,
+            totalProducts,
+            hasMoreProducts,
+        });
+    }
+    catch (err) {
+        console.error('Error in LoadMore:', err);
+        return props.children({
+            loadMore: async () => { },
+            refresh: async () => { },
+            isLoading: false,
+            hasProducts: false,
+            totalProducts: 0,
+            hasMoreProducts: false,
+        });
+    }
+};
+/**
+ * Headless component for collection header with product count
+ *
+ * @component
+ */
+export const Header = (props) => {
+    const service = useService(CollectionServiceDefinition);
+    // Error handling for undefined service
+    if (!service) {
+        console.error('CollectionService is undefined in Header');
+        return props.children({
+            totalProducts: 0,
+            isLoading: false,
+            hasProducts: false,
+        });
+    }
+    try {
+        const totalProducts = service.totalProducts?.get() || 0;
+        const isLoading = service.isLoading?.get() || false;
+        const hasProducts = service.hasProducts?.get() || false;
+        return props.children({
+            totalProducts,
+            isLoading,
+            hasProducts,
+        });
+    }
+    catch (err) {
+        console.error('Error in Header:', err);
+        return props.children({
+            totalProducts: 0,
+            isLoading: false,
+            hasProducts: false,
+        });
+    }
+};
+/**
+ * Headless component for collection actions (refresh, load more)
+ * Replaces traditional pagination for V3 API
+ *
+ * @component
+ */
+export const Actions = (props) => {
+    const service = useService(CollectionServiceDefinition);
+    // Error handling for undefined service
+    if (!service) {
+        console.error('CollectionService is undefined in Actions');
+        return props.children({
+            refresh: async () => { },
+            loadMore: async () => { },
+            isLoading: false,
+            error: 'Service not available',
+        });
+    }
+    try {
+        const isLoading = service.isLoading?.get() || false;
+        const error = service.error?.get() || null;
+        return props.children({
+            refresh: service.refresh || (async () => { }),
+            loadMore: service.loadMore || (async () => { }),
+            isLoading,
+            error,
+        });
+    }
+    catch (err) {
+        console.error('Error in Actions:', err);
+        return props.children({
+            refresh: async () => { },
+            loadMore: async () => { },
+            isLoading: false,
+            error: 'Failed to load actions',
+        });
+    }
+};

package/dist/react/FilteredCollection.d.ts

@@ -0,0 +1,95 @@
+import React, { type ReactNode } from 'react';
+import { type AvailableOptions, type FilterServiceAPI, type Filter } from '../services/filter-service';
+import { type V3Product } from '@wix/auto_sdk_stores_products-v-3';
+import { type CollectionServiceAPI } from '../services/collection-service';
+export interface FilteredCollectionProviderProps {
+    children: ReactNode;
+}
+/**
+ * Headless component for providing a filtered collection
+ *
+ * @component
+ */
+export declare const Provider: React.FC<FilteredCollectionProviderProps>;
+export declare const useFilteredCollection: () => {
+    filter: FilterServiceAPI | null;
+    collection: CollectionServiceAPI | null;
+};
+export interface FiltersLoadingProps {
+    children: (data: {
+        isFullyLoaded: boolean;
+    }) => ReactNode;
+}
+/**
+ * Headless component for displaying a loading state for filters
+ *
+ * @component
+ */
+export declare const FiltersLoading: React.FC<FiltersLoadingProps>;
+export interface FilteredGridProps {
+    children: (data: {
+        products: V3Product[];
+        totalProducts: number;
+        isLoading: boolean;
+        error: string | null;
+        isEmpty: boolean;
+        hasMoreProducts: boolean;
+    }) => ReactNode;
+}
+/**
+ * Headless component for displaying a grid of filtered products
+ *
+ * @component
+ */
+export declare const Grid: React.FC<FilteredGridProps>;
+export interface FilteredItemProps {
+    product: V3Product;
+    children: (data: {
+        title: string;
+        image: string | null;
+        imageAltText: string | null;
+        price: string;
+        compareAtPrice: string | null;
+        available: boolean;
+        slug: string;
+        description?: string;
+    }) => ReactNode;
+}
+/**
+ * Headless component for displaying an individual product item
+ *
+ * @component
+ */
+export declare const Item: React.FC<FilteredItemProps>;
+export interface FilteredLoadMoreProps {
+    children: (data: {
+        loadMore: () => Promise<void>;
+        refresh: () => Promise<void>;
+        isLoading: boolean;
+        hasProducts: boolean;
+        totalProducts: number;
+        hasMoreProducts: boolean;
+    }) => ReactNode;
+}
+/**
+ * Headless component for displaying a load more button
+ *
+ * @component
+ */
+export declare const LoadMore: React.FC<FilteredLoadMoreProps>;
+export interface FilteredFiltersProps {
+    children: (data: {
+        applyFilters: (filters: Filter) => void;
+        clearFilters: () => void;
+        currentFilters: Filter;
+        allProducts: V3Product[];
+        availableOptions: AvailableOptions;
+        isFiltered: boolean;
+    }) => ReactNode;
+}
+/**
+ * Headless component for displaying a filters component
+ *
+ * @component
+ */
+export declare const Filters: React.FC<FilteredFiltersProps>;

package/dist/react/FilteredCollection.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { FilterServiceDefinition, } from '../services/filter-service';
+import { useService } from '@wix/services-manager-react';
+import { InventoryAvailabilityStatus, } from '@wix/auto_sdk_stores_products-v-3';
+import { CollectionServiceDefinition, } from '../services/collection-service';
+const FilteredCollectionContext = createContext({ filter: null, collection: null });
+/**
+ * Headless component for providing a filtered collection
+ *
+ * @component
+ */
+export const Provider = ({ children, }) => {
+    const filter = useService(FilterServiceDefinition);
+    const collection = useService(CollectionServiceDefinition);
+    return (_jsx(FilteredCollectionContext.Provider, { value: { filter, collection }, children: children }));
+};
+export const useFilteredCollection = () => {
+    const context = useContext(FilteredCollectionContext);
+    if (!context) {
+        throw new Error('useFilteredCollection must be used within a FilteredCollectionProvider');
+    }
+    return context;
+};
+/**
+ * Headless component for displaying a loading state for filters
+ *
+ * @component
+ */
+export const FiltersLoading = ({ children }) => {
+    const { filter } = useFilteredCollection();
+    const isFullyLoaded = filter.isFullyLoaded.get();
+    return _jsx(_Fragment, { children: children({ isFullyLoaded }) });
+};
+/**
+ * Headless component for displaying a grid of filtered products
+ *
+ * @component
+ */
+export const Grid = ({ children }) => {
+    const { collection } = useFilteredCollection();
+    const products = collection.products.get() || [];
+    const totalProducts = collection.totalProducts.get();
+    const isLoading = collection.isLoading.get();
+    const error = collection.error.get();
+    const hasProducts = collection.hasProducts.get();
+    const hasMoreProducts = collection.hasMoreProducts.get();
+    return (_jsx(_Fragment, { children: children({
+            products,
+            isLoading,
+            error,
+            isEmpty: !hasProducts,
+            totalProducts,
+            hasMoreProducts,
+        }) }));
+};
+/**
+ * Headless component for displaying an individual product item
+ *
+ * @component
+ */
+export const Item = ({ product, children }) => {
+    // Safe conversion of product data with type safety guards
+    const title = String(product.name || '');
+    const image = product.media?.main?.image || null;
+    const imageAltText = product.media?.main?.altText || '';
+    const price = product.actualPriceRange?.minValue?.formattedAmount ||
+        product.actualPriceRange?.maxValue?.formattedAmount ||
+        (product.actualPriceRange?.minValue?.amount
+            ? `$${product.actualPriceRange.minValue.amount}`
+            : '$0.00');
+    // Add compare at price
+    const compareAtPrice = product.compareAtPriceRange?.minValue?.formattedAmount ||
+        (product.compareAtPriceRange?.minValue?.amount
+            ? `$${product.compareAtPriceRange.minValue.amount}`
+            : null);
+    const availabilityStatus = product.inventory?.availabilityStatus;
+    const available = availabilityStatus === InventoryAvailabilityStatus.IN_STOCK ||
+        availabilityStatus === InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK;
+    const slug = String(product.slug || product._id || '');
+    const description = product.plainDescription
+        ? String(product.plainDescription)
+        : undefined;
+    return (_jsx(_Fragment, { children: children({
+            title,
+            image,
+            imageAltText,
+            price: String(price),
+            compareAtPrice,
+            available,
+            slug,
+            description,
+        }) }));
+};
+/**
+ * Headless component for displaying a load more button
+ *
+ * @component
+ */
+export const LoadMore = ({ children }) => {
+    const { collection } = useFilteredCollection();
+    const loadMore = collection.loadMore;
+    const refresh = collection.refresh;
+    const isLoading = collection.isLoading.get();
+    const hasProducts = collection.hasProducts.get();
+    const totalProducts = collection.totalProducts.get();
+    const hasMoreProducts = collection.hasMoreProducts.get();
+    return (_jsx(_Fragment, { children: children({
+            loadMore,
+            refresh,
+            isLoading,
+            hasProducts,
+            totalProducts,
+            hasMoreProducts,
+        }) }));
+};
+/**
+ * Headless component for displaying a filters component
+ *
+ * @component
+ */
+export const Filters = ({ children }) => {
+    const { collection, filter } = useFilteredCollection();
+    const applyFilters = filter.applyFilters;
+    const clearFilters = filter.clearFilters;
+    const currentFilters = filter.currentFilters.get();
+    const allProducts = collection.products.get();
+    const availableOptions = filter.availableOptions.get();
+    const isFiltered = currentFilters.priceRange.min !== availableOptions.priceRange.min ||
+        currentFilters.priceRange.max !== availableOptions.priceRange.max ||
+        Object.keys(currentFilters.selectedOptions).length > 0;
+    return (_jsx(_Fragment, { children: children({
+            applyFilters,
+            clearFilters,
+            currentFilters,
+            allProducts,
+            availableOptions,
+            isFiltered,
+        }) }));
+};

package/dist/react/PayNow.d.ts

@@ -1,4 +1,3 @@
-export type PayNowRedirectToCheckout = () => void;
 /**
  * Props passed to the render function of the PayNow component
  */
@@ -6,17 +5,16 @@ export interface PayNowRenderProps {
     /** Whether the buy now operation is currently loading */
     isLoading: boolean;
     /** Function to redirect the user to the checkout page */
-    redirectToCheckout: PayNowRedirectToCheckout;
+    redirectToCheckout: () => void;
     /** The error message if the buy now operation fails */
     error: string | null;
 }
-export type PayNowChildren = (props: PayNowRenderProps) => React.ReactNode;
 /**
  * Props for the PayNow component
  */
 export interface PayNowProps {
     /** Render function that receives buy now state and actions */
-    children: PayNowChildren;
+    children: (props: PayNowRenderProps) => React.ReactNode;
 }
 /**
  * A headless component that provides pay now functionality using the render props pattern.

package/dist/react/Product.d.ts

@@ -0,0 +1,43 @@
+import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
+/**
+ * Props for ProductName headless component
+ */
+export interface ProductNameProps {
+    /** Render prop function that receives product name data */
+    children: (props: ProductNameRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ProductName component
+ */
+export interface ProductNameRenderProps {
+    /** Product name */
+    name: string;
+}
+/**
+ * Headless component for product name display
+ *
+ * @component
+ */
+export declare const Name: (props: ProductNameProps) => import("react").ReactNode;
+/**
+ * Props for ProductDescription headless component
+ */
+export interface ProductDescriptionProps {
+    /** Render prop function that receives product description data */
+    children: (props: ProductDescriptionRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ProductDescription component
+ */
+export interface ProductDescriptionRenderProps {
+    /** Product description (may contain HTML) */
+    description: NonNullable<V3Product['description']>;
+    /** Product plain description */
+    plainDescription: NonNullable<V3Product['plainDescription']>;
+}
+/**
+ * Headless component for product description display
+ *
+ * @component
+ */
+export declare const Description: (props: ProductDescriptionProps) => import("react").ReactNode;

package/dist/react/Product.js

@@ -0,0 +1,30 @@
+import { useService } from '@wix/services-manager-react';
+import { ProductServiceDefinition } from '../services/product-service';
+/**
+ * Headless component for product name display
+ *
+ * @component
+ */
+export const Name = (props) => {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    const name = product.name;
+    return props.children({
+        name,
+    });
+};
+/**
+ * Headless component for product description display
+ *
+ * @component
+ */
+export const Description = (props) => {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    const descriptionRichContent = product.description;
+    const plainDescription = product.plainDescription;
+    return props.children({
+        description: descriptionRichContent,
+        plainDescription: plainDescription,
+    });
+};

package/dist/react/ProductActions.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Props for Actions headless component
+ */
+export interface ActionsProps {
+    /** Quantity to add (optional) */
+    quantity?: number;
+    /** Render prop function that receives actions data */
+    children: (props: ActionsRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Actions component
+ */
+export interface ActionsRenderProps {
+    /** Function to add product to cart */
+    onAddToCart: () => Promise<void>;
+    /** Function to buy now (clear cart, add product, proceed to checkout) */
+    onBuyNow: () => Promise<void>;
+    /** Function to open cart */
+    onOpenCart: () => void;
+    /** Whether add to cart is available */
+    canAddToCart: boolean;
+    /** Whether add to cart is currently loading */
+    isLoading: boolean;
+    /** Current variant price */
+    price: string;
+    /** Whether variant is in stock */
+    inStock: boolean;
+    /** Whether pre-order is enabled */
+    isPreOrderEnabled: boolean;
+    /** Pre-order message */
+    preOrderMessage: string | null;
+    /** Error message if any */
+    error: string | null;
+    /** Available quantity */
+    availableQuantity: number | null;
+}
+/**
+ * Headless component for product actions (add to cart, buy now)
+ *
+ * @component
+ */
+export declare const Actions: (props: ActionsProps) => import("react").ReactNode;

package/dist/react/ProductActions.js

@@ -0,0 +1,79 @@
+import { useService } from '@wix/services-manager-react';
+import { SelectedVariantServiceDefinition } from '../services/selected-variant-service';
+import { ProductModifiersServiceDefinition } from '../services/product-modifiers-service';
+/**
+ * Headless component for product actions (add to cart, buy now)
+ *
+ * @component
+ */
+export const Actions = (props) => {
+    const variantService = useService(SelectedVariantServiceDefinition);
+    // const cartService = useService(CurrentCartServiceDefinition) as ServiceAPI<
+    //   typeof CurrentCartServiceDefinition
+    // >;
+    // Try to get modifiers service - it may not exist for all products
+    let modifiersService = null;
+    try {
+        modifiersService = useService(ProductModifiersServiceDefinition);
+    }
+    catch {
+        // Modifiers service not available for this product
+        modifiersService = null;
+    }
+    const price = variantService.currentPrice.get();
+    const inStock = variantService.isInStock.get();
+    const isPreOrderEnabled = variantService.isPreOrderEnabled.get();
+    const preOrderMessage = variantService.preOrderMessage.get();
+    const isLoading = variantService.isLoading.get();
+    const error = variantService.error.get();
+    const availableQuantity = variantService.quantityAvailable.get();
+    const quantity = variantService.selectedQuantity.get();
+    // Check if all required modifiers are filled
+    const areAllRequiredModifiersFilled = modifiersService
+        ? modifiersService.areAllRequiredModifiersFilled()
+        : true; // If no modifiers service, assume no required modifiers
+    const canAddToCart = (inStock || isPreOrderEnabled) &&
+        !isLoading &&
+        areAllRequiredModifiersFilled;
+    const onAddToCart = async () => {
+        // Get modifiers data if available
+        let modifiersData;
+        if (modifiersService) {
+            const selectedModifiers = modifiersService.selectedModifiers.get();
+            if (Object.keys(selectedModifiers).length > 0) {
+                modifiersData = selectedModifiers;
+            }
+        }
+        await variantService.addToCart(quantity, modifiersData);
+    };
+    const onBuyNow = async () => {
+        try {
+            // Clear the cart first
+            // await cartService.clearCart();
+            // Add the product to cart
+            await onAddToCart();
+            // Proceed to checkout
+            // await cartService.proceedToCheckout();
+        }
+        catch (error) {
+            console.error('Buy now failed:', error);
+            throw error;
+        }
+    };
+    const onOpenCart = () => {
+        // cartService.openCart();
+    };
+    return props.children({
+        onAddToCart,
+        onBuyNow,
+        onOpenCart,
+        canAddToCart,
+        isLoading,
+        price,
+        inStock,
+        isPreOrderEnabled,
+        preOrderMessage,
+        error,
+        availableQuantity,
+    });
+};