@wix/headless-stores 0.0.9 → 0.0.11

package/cjs/dist/enums/index.d.ts

@@ -0,0 +1,2 @@
+export * from './sort-enums';
+export * from './social-platform-enums';

package/cjs/dist/enums/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./sort-enums"), exports);
+__exportStar(require("./social-platform-enums"), exports);

package/cjs/dist/enums/social-platform-enums.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Business logic enums for social sharing platforms (headless layer)
+ */
+/**
+ * Enum for social sharing platforms (business identifiers)
+ */
+export declare enum SocialPlatform {
+    FACEBOOK = "facebook",
+    TWITTER = "twitter",
+    LINKEDIN = "linkedin",
+    WHATSAPP = "whatsapp",
+    EMAIL = "email",
+    CLIPBOARD = "clipboard",
+    NATIVE = "native"
+}
+/**
+ * Enum for social platform share URLs (business logic)
+ */
+export declare enum SocialPlatformShareUrl {
+    FACEBOOK = "https://www.facebook.com/sharer/sharer.php",
+    TWITTER = "https://twitter.com/intent/tweet",
+    LINKEDIN = "https://www.linkedin.com/sharing/share-offsite/",
+    WHATSAPP = "https://wa.me/",
+    EMAIL = "mailto:"
+}

package/cjs/dist/enums/social-platform-enums.js

@@ -0,0 +1,30 @@
+"use strict";
+/**
+ * Business logic enums for social sharing platforms (headless layer)
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SocialPlatformShareUrl = exports.SocialPlatform = void 0;
+/**
+ * Enum for social sharing platforms (business identifiers)
+ */
+var SocialPlatform;
+(function (SocialPlatform) {
+    SocialPlatform["FACEBOOK"] = "facebook";
+    SocialPlatform["TWITTER"] = "twitter";
+    SocialPlatform["LINKEDIN"] = "linkedin";
+    SocialPlatform["WHATSAPP"] = "whatsapp";
+    SocialPlatform["EMAIL"] = "email";
+    SocialPlatform["CLIPBOARD"] = "clipboard";
+    SocialPlatform["NATIVE"] = "native";
+})(SocialPlatform || (exports.SocialPlatform = SocialPlatform = {}));
+/**
+ * Enum for social platform share URLs (business logic)
+ */
+var SocialPlatformShareUrl;
+(function (SocialPlatformShareUrl) {
+    SocialPlatformShareUrl["FACEBOOK"] = "https://www.facebook.com/sharer/sharer.php";
+    SocialPlatformShareUrl["TWITTER"] = "https://twitter.com/intent/tweet";
+    SocialPlatformShareUrl["LINKEDIN"] = "https://www.linkedin.com/sharing/share-offsite/";
+    SocialPlatformShareUrl["WHATSAPP"] = "https://wa.me/";
+    SocialPlatformShareUrl["EMAIL"] = "mailto:";
+})(SocialPlatformShareUrl || (exports.SocialPlatformShareUrl = SocialPlatformShareUrl = {}));

package/cjs/dist/enums/sort-enums.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Enum for sort types used in the store
+ * Note: Cannot use SDK SortType as it's for aggregations (COUNT/VALUE)
+ * while this enum represents user-facing sort options
+ */
+export declare enum SortType {
+    NEWEST = "newest",
+    NAME_ASC = "name_asc",
+    NAME_DESC = "name_desc",
+    PRICE_ASC = "price_asc",
+    PRICE_DESC = "price_desc",
+    RECOMMENDED = "recommended"
+}
+/**
+ * Default sort type
+ */
+export declare const DEFAULT_SORT_TYPE = SortType.NEWEST;

package/cjs/dist/enums/sort-enums.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_SORT_TYPE = exports.SortType = void 0;
+/**
+ * Enum for sort types used in the store
+ * Note: Cannot use SDK SortType as it's for aggregations (COUNT/VALUE)
+ * while this enum represents user-facing sort options
+ */
+var SortType;
+(function (SortType) {
+    SortType["NEWEST"] = "newest";
+    SortType["NAME_ASC"] = "name_asc";
+    SortType["NAME_DESC"] = "name_desc";
+    SortType["PRICE_ASC"] = "price_asc";
+    SortType["PRICE_DESC"] = "price_desc";
+    SortType["RECOMMENDED"] = "recommended";
+})(SortType || (exports.SortType = SortType = {}));
+/**
+ * Default sort type
+ */
+exports.DEFAULT_SORT_TYPE = SortType.NEWEST;

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

@@ -1,4 +1,3 @@
-export type RedirectToCheckout = () => void;
 /**
  * Props passed to the render function of the BuyNow component
  */
@@ -8,7 +7,7 @@ export interface BuyNowRenderProps {
     /** The name of the product being purchased */
     productName: string;
     /** Function to redirect the user to the checkout page */
-    redirectToCheckout: RedirectToCheckout;
+    redirectToCheckout: () => void;
     /** The error message if the buy now operation fails */
     error: string | null;
     /** The price of the product being purchased */
@@ -20,13 +19,12 @@ export interface BuyNowRenderProps {
     /** Whether the product is available for pre-order */
     preOrderAvailable: boolean;
 }
-export type BuyNowChildren = (props: BuyNowRenderProps) => React.ReactNode;
 /**
  * Props for the BuyNow component
  */
 export interface BuyNowProps {
     /** Render function that receives buy now state and actions */
-    children: BuyNowChildren;
+    children: (props: BuyNowRenderProps) => React.ReactNode;
 }
 /**
  * A headless component that provides buy now functionality using the render props pattern.

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

@@ -0,0 +1,15 @@
+import { type Category } from '@wix/auto_sdk_categories_categories';
+import React, { type ReactNode } from 'react';
+export interface CategoryListProps {
+    children: (data: {
+        categories: Category[];
+        selectedCategory: string | null;
+        setSelectedCategory: (categoryId: string | null) => void;
+    }) => ReactNode;
+}
+/**
+ * Headless component for displaying a list of categories
+ *
+ * @component
+ */
+export declare const List: React.FC<CategoryListProps>;

package/cjs/dist/react/Category.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const services_manager_react_1 = require("@wix/services-manager-react");
+const category_service_1 = require("../services/category-service");
+/**
+ * Headless component for displaying a list of categories
+ *
+ * @component
+ */
+const List = ({ children }) => {
+    const service = (0, services_manager_react_1.useService)(category_service_1.CategoryServiceDefinition);
+    const categories = service.categories.get();
+    const selectedCategory = service.selectedCategory.get();
+    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,151 @@
+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
+ */
+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;
+    /** Product URL */
+    href: string;
+}
+/**
+ * Headless component for individual product item
+ *
+ * @component
+ */
+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
+ */
+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
+ */
+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
+ */
+export declare const Actions: (props: ActionsProps) => import("react").ReactNode;

package/cjs/dist/react/Collection.js

@@ -0,0 +1,209 @@
+"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");
+const auto_sdk_stores_products_v_3_1 = require("@wix/auto_sdk_stores_products-v-3");
+/**
+ * Headless component for product grid
+ *
+ * @component
+ */
+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
+ *
+ * @component
+ */
+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 === auto_sdk_stores_products_v_3_1.InventoryAvailabilityStatus.IN_STOCK ||
+        availabilityStatus === auto_sdk_stores_products_v_3_1.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}`,
+    });
+};
+exports.Item = Item;
+/**
+ * Headless component for load more products functionality
+ * Note: V3 API uses simplified loading without traditional pagination
+ *
+ * @component
+ */
+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
+ *
+ * @component
+ */
+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
+ *
+ * @component
+ */
+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,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>;