@wix/headless-stores 0.0.8 → 0.0.10

package/cjs/dist/react/BuyNow.d.ts

@@ -53,5 +53,6 @@ export interface BuyNowProps {
  *   )}
  * </BuyNow>
  * ```
+ * @component
  */
 export declare function BuyNow(props: BuyNowProps): React.ReactNode;

package/cjs/dist/react/BuyNow.js

@@ -30,6 +30,7 @@ const buy_now_service_1 = require("../services/buy-now-service");
  *   )}
  * </BuyNow>
  * ```
+ * @component
  */
 function BuyNow(props) {
     const { redirectToCheckout, loadingSignal, productName, errorSignal, price, currency, inStock, preOrderAvailable, } = (0, services_manager_react_1.useService)(buy_now_service_1.BuyNowServiceDefinition);

package/cjs/dist/react/Category.d.ts

@@ -0,0 +1,17 @@
+import React, { type ReactNode } from "react";
+import { type CategoryServiceAPI } from "../services/category-service";
+import { categories } from "@wix/categories";
+interface CategoryProviderProps {
+    children: ReactNode;
+}
+export declare const Provider: React.FC<CategoryProviderProps>;
+export declare const useCategory: () => CategoryServiceAPI;
+interface CategoryListProps {
+    children: (data: {
+        categories: categories.Category[];
+        selectedCategory: string | null;
+        setSelectedCategory: (categoryId: string | null) => void;
+    }) => ReactNode;
+}
+export declare const List: React.FC<CategoryListProps>;
+export {};

package/cjs/dist/react/Category.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = exports.useCategory = exports.Provider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const services_manager_react_1 = require("@wix/services-manager-react");
+const category_service_1 = require("../services/category-service");
+const CategoryContext = (0, react_1.createContext)(null);
+const Provider = ({ children, }) => {
+    const service = (0, services_manager_react_1.useService)(category_service_1.CategoryServiceDefinition);
+    return ((0, jsx_runtime_1.jsx)(CategoryContext.Provider, { value: service, children: children }));
+};
+exports.Provider = Provider;
+const useCategory = () => {
+    const context = (0, react_1.useContext)(CategoryContext);
+    if (!context) {
+        throw new Error("useCategory must be used within a CategoryProvider");
+    }
+    return context;
+};
+exports.useCategory = useCategory;
+const List = ({ children }) => {
+    const service = (0, exports.useCategory)();
+    const [selectedCategory, setSelectedCategory] = (0, react_1.useState)(service.selectedCategory.get());
+    const categories = service.categories.get();
+    service.selectedCategory.subscribe((categoryId) => {
+        if (categoryId !== selectedCategory) {
+            setSelectedCategory(categoryId);
+        }
+    });
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({
+            selectedCategory,
+            categories,
+            setSelectedCategory: service.setSelectedCategory,
+        }) }));
+};
+exports.List = List;

package/cjs/dist/react/Collection.d.ts

@@ -0,0 +1,141 @@
+import { productsV3 } from "@wix/stores";
+/**
+ * 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: productsV3.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
+ */
+export declare const Grid: (props: GridProps) => import("react").ReactNode;
+/**
+ * Props for Item headless component
+ */
+export interface ItemProps {
+    /** Product data */
+    product: productsV3.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;
+    /** Product URL */
+    href: string;
+}
+/**
+ * Headless component for individual product 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
+ */
+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
+ */
+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
+ */
+export declare const Actions: (props: ActionsProps) => import("react").ReactNode;

package/cjs/dist/react/Collection.js

@@ -0,0 +1,198 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Actions = exports.Header = exports.LoadMore = exports.Item = exports.Grid = void 0;
+const services_manager_react_1 = require("@wix/services-manager-react");
+const collection_service_1 = require("../services/collection-service");
+/**
+ * Headless component for product grid
+ */
+const Grid = (props) => {
+    const service = (0, services_manager_react_1.useService)(collection_service_1.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,
+        });
+    }
+};
+exports.Grid = Grid;
+/**
+ * Headless component for individual product item
+ */
+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 === "IN_STOCK" ||
+        availabilityStatus === "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}`,
+    });
+};
+exports.Item = Item;
+/**
+ * Headless component for load more products functionality
+ * Note: V3 API uses simplified loading without traditional pagination
+ */
+const LoadMore = (props) => {
+    const service = (0, services_manager_react_1.useService)(collection_service_1.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,
+        });
+    }
+};
+exports.LoadMore = LoadMore;
+/**
+ * Headless component for collection header with product count
+ */
+const Header = (props) => {
+    const service = (0, services_manager_react_1.useService)(collection_service_1.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,
+        });
+    }
+};
+exports.Header = Header;
+/**
+ * Headless component for collection actions (refresh, load more)
+ * Replaces traditional pagination for V3 API
+ */
+const Actions = (props) => {
+    const service = (0, services_manager_react_1.useService)(collection_service_1.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",
+        });
+    }
+};
+exports.Actions = Actions;

package/cjs/dist/react/FilteredCollection.d.ts

@@ -0,0 +1,65 @@
+import React, { type ReactNode } from "react";
+import { type AvailableOptions, type FilterServiceAPI, type Filter } from "../services/filter-service";
+import { productsV3 } from "@wix/stores";
+import { type CollectionServiceAPI } from "../services/collection-service";
+interface FilteredCollectionProviderProps {
+    children: ReactNode;
+}
+export declare const Provider: React.FC<FilteredCollectionProviderProps>;
+export declare const useFilteredCollection: () => {
+    filter: FilterServiceAPI | null;
+    collection: CollectionServiceAPI | null;
+};
+interface FiltersLoadingProps {
+    children: (data: {
+        isFullyLoaded: boolean;
+    }) => ReactNode;
+}
+export declare const FiltersLoading: React.FC<FiltersLoadingProps>;
+interface FilteredGridProps {
+    children: (data: {
+        products: productsV3.V3Product[];
+        totalProducts: number;
+        isLoading: boolean;
+        error: string | null;
+        isEmpty: boolean;
+        hasMoreProducts: boolean;
+    }) => ReactNode;
+}
+export declare const Grid: React.FC<FilteredGridProps>;
+interface FilteredItemProps {
+    product: productsV3.V3Product;
+    children: (data: {
+        title: string;
+        image: string | null;
+        price: string;
+        compareAtPrice: string | null;
+        available: boolean;
+        href: string;
+        description?: string;
+    }) => ReactNode;
+}
+export declare const Item: React.FC<FilteredItemProps>;
+interface FilteredLoadMoreProps {
+    children: (data: {
+        loadMore: () => Promise<void>;
+        refresh: () => Promise<void>;
+        isLoading: boolean;
+        hasProducts: boolean;
+        totalProducts: number;
+        hasMoreProducts: boolean;
+    }) => ReactNode;
+}
+export declare const LoadMore: React.FC<FilteredLoadMoreProps>;
+interface FilteredFiltersProps {
+    children: (data: {
+        applyFilters: (filters: Filter) => void;
+        clearFilters: () => void;
+        currentFilters: Filter;
+        allProducts: productsV3.V3Product[];
+        availableOptions: AvailableOptions;
+        isFiltered: boolean;
+    }) => ReactNode;
+}
+export declare const Filters: React.FC<FilteredFiltersProps>;
+export {};

package/cjs/dist/react/FilteredCollection.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Filters = exports.LoadMore = exports.Item = exports.Grid = exports.FiltersLoading = exports.useFilteredCollection = exports.Provider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const filter_service_1 = require("../services/filter-service");
+const services_manager_react_1 = require("@wix/services-manager-react");
+const collection_service_1 = require("../services/collection-service");
+const FilteredCollectionContext = (0, react_1.createContext)({ filter: null, collection: null });
+const Provider = ({ children }) => {
+    const filter = (0, services_manager_react_1.useService)(filter_service_1.FilterServiceDefinition);
+    const collection = (0, services_manager_react_1.useService)(collection_service_1.CollectionServiceDefinition);
+    return ((0, jsx_runtime_1.jsx)(FilteredCollectionContext.Provider, { value: { filter, collection }, children: children }));
+};
+exports.Provider = Provider;
+const useFilteredCollection = () => {
+    const context = (0, react_1.useContext)(FilteredCollectionContext);
+    if (!context) {
+        throw new Error("useFilteredCollection must be used within a FilteredCollectionProvider");
+    }
+    return context;
+};
+exports.useFilteredCollection = useFilteredCollection;
+const FiltersLoading = ({ children }) => {
+    const { filter } = (0, exports.useFilteredCollection)();
+    const isFullyLoaded = filter.isFullyLoaded.get();
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({ isFullyLoaded }) }));
+};
+exports.FiltersLoading = FiltersLoading;
+const Grid = ({ children }) => {
+    const { collection } = (0, exports.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 ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({
+            products,
+            isLoading,
+            error,
+            isEmpty: !hasProducts,
+            totalProducts,
+            hasMoreProducts,
+        }) }));
+};
+exports.Grid = Grid;
+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 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 === "IN_STOCK" ||
+        availabilityStatus === "PARTIALLY_OUT_OF_STOCK";
+    const href = `/store/products/${String(product.slug || product._id || "")}`;
+    const description = product.plainDescription
+        ? String(product.plainDescription)
+        : undefined;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({
+            title,
+            image,
+            price: String(price),
+            compareAtPrice,
+            available,
+            href,
+            description,
+        }) }));
+};
+exports.Item = Item;
+const LoadMore = ({ children, }) => {
+    const { collection } = (0, exports.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 ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({
+            loadMore,
+            refresh,
+            isLoading,
+            hasProducts,
+            totalProducts,
+            hasMoreProducts,
+        }) }));
+};
+exports.LoadMore = LoadMore;
+const Filters = ({ children, }) => {
+    const { collection, filter } = (0, exports.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 ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({
+            applyFilters,
+            clearFilters,
+            currentFilters,
+            allProducts,
+            availableOptions,
+            isFiltered,
+        }) }));
+};
+exports.Filters = Filters;

package/cjs/dist/react/PayNow.d.ts

@@ -39,5 +39,6 @@ export interface PayNowProps {
  *   )}
  * </PayNow>
  * ```
+ * @component
  */
 export declare function PayNow(props: PayNowProps): React.ReactNode;

package/cjs/dist/react/PayNow.js

@@ -26,6 +26,7 @@ const pay_now_service_1 = require("../services/pay-now-service");
  *   )}
  * </PayNow>
  * ```
+ * @component
  */
 function PayNow(props) {
     const { redirectToCheckout, loadingSignal, errorSignal, } = (0, services_manager_react_1.useService)(pay_now_service_1.PayNowServiceDefinition);

package/cjs/dist/react/Product.d.ts

@@ -0,0 +1,70 @@
+/**
+ * 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;
+    /** Whether product has a name */
+    hasName: boolean;
+}
+/**
+ * Headless component for product name display
+ */
+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: string;
+    /** Whether product has a description */
+    hasDescription: boolean;
+    /** Whether description contains HTML */
+    isHtml: boolean;
+}
+/**
+ * Headless component for product description display
+ */
+export declare const Description: (props: ProductDescriptionProps) => import("react").ReactNode;
+/**
+ * Props for ProductDetails headless component
+ */
+export interface ProductDetailsProps {
+    /** Render prop function that receives product details data */
+    children: (props: ProductDetailsRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ProductDetails component
+ */
+export interface ProductDetailsRenderProps {
+    /** Product SKU */
+    sku: string | null;
+    /** Product weight */
+    weight: string | null;
+    /** Product dimensions (if available) */
+    dimensions: string | null;
+    /** Whether product has SKU */
+    hasSku: boolean;
+    /** Whether product has weight */
+    hasWeight: boolean;
+    /** Whether product has dimensions */
+    hasDimensions: boolean;
+}
+/**
+ * Headless component for product details display
+ */
+export declare const Details: (props: ProductDetailsProps) => import("react").ReactNode;