@wix/headless-stores 0.0.10 → 0.0.12

package/cjs/dist/react/ProductVariantSelector.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Stock = exports.Price = exports.Trigger = exports.Choice = exports.Option = exports.Options = void 0;
+exports.Reset = exports.Stock = exports.Choice = exports.Option = exports.Options = void 0;
 const services_manager_react_1 = require("@wix/services-manager-react");
 const selected_variant_service_1 = require("../services/selected-variant-service");
-const product_modifiers_service_1 = require("../services/product-modifiers-service");
+const auto_sdk_stores_products_v_3_1 = require("@wix/auto_sdk_stores_products-v-3");
 /**
  * Headless component for all product options
+ *
+ * @component
  */
 const Options = (props) => {
     const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
@@ -20,12 +22,14 @@ const Options = (props) => {
 exports.Options = Options;
 /**
  * Headless component for choices within a specific product option
+ *
+ * @component
  */
 const Option = (props) => {
     const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
     const selectedChoices = variantService.selectedChoices.get();
     const { option } = props;
-    const name = option.name || "";
+    const name = option.name || '';
     const choices = option.choicesSettings?.choices || [];
     const selectedValue = selectedChoices[name] || null;
     return props.children({
@@ -39,16 +43,22 @@ const Option = (props) => {
 exports.Option = Option;
 /**
  * Headless component for individual choice selection
+ *
+ * @component
  */
 const Choice = (props) => {
     const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
     const selectedChoices = variantService.selectedChoices.get();
     const { option, choice } = props;
-    const optionName = option.name || "";
-    const choiceValue = choice.name || "";
+    const optionName = option.name || '';
+    const choiceValue = choice.name || '';
     const isSelected = selectedChoices[optionName] === choiceValue;
     // Check if this choice is available based on current selections
-    const isAvailable = variantService.isChoiceAvailable(optionName, choiceValue);
+    const isVisible = variantService.isChoiceAvailable(optionName, choiceValue);
+    // Check if this choice results in an in-stock variant
+    const isInStock = variantService.isChoiceInStock(optionName, choiceValue);
+    // Check if this choice is available for pre-order
+    const isPreOrderEnabled = variantService.isChoicePreOrderEnabled(optionName, choiceValue);
     const value = choiceValue;
     const onSelect = () => {
         const newChoices = {
@@ -61,7 +71,9 @@ const Choice = (props) => {
         value,
         description: undefined, // v3 choices don't have separate description field
         isSelected,
-        isAvailable,
+        isVisible,
+        isInStock,
+        isPreOrderEnabled,
         onSelect,
         optionName,
         choiceValue,
@@ -69,98 +81,58 @@ const Choice = (props) => {
 };
 exports.Choice = Choice;
 /**
- * Headless component for add to cart trigger
+ * Headless component for product stock status
+ *
+ * @component
  */
-const Trigger = (props) => {
+const Stock = (props) => {
     const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
-    // Try to get modifiers service - it may not exist for all products
-    let modifiersService = null;
-    try {
-        modifiersService = (0, services_manager_react_1.useService)(product_modifiers_service_1.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 isLoading = variantService.isLoading.get();
-    const error = variantService.error.get();
-    const quantity = props.quantity || 1;
-    // 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 trackInventory = variantService.trackQuantity.get();
+    const currentVariantId = variantService.selectedVariantId.get();
+    const availableQuantity = variantService.quantityAvailable.get();
+    const selectedQuantity = variantService.selectedQuantity.get();
+    // const currentVariant = variantService.currentVariant.get();
+    // const allVariantsAreOutOfStock = variantService.IsAllVariantsAreOutOfStock();
+    // Return raw availability status - UI components will handle display conversion
+    const availabilityStatus = inStock
+        ? auto_sdk_stores_products_v_3_1.InventoryAvailabilityStatus.IN_STOCK
+        : auto_sdk_stores_products_v_3_1.InventoryAvailabilityStatus.OUT_OF_STOCK;
+    const incrementQuantity = () => {
+        variantService.incrementQuantity();
+    };
+    const decrementQuantity = () => {
+        variantService.decrementQuantity();
     };
     return props.children({
-        onAddToCart,
-        canAddToCart,
-        isLoading,
-        price,
         inStock,
+        availableQuantity,
         isPreOrderEnabled,
-        error,
-    });
-};
-exports.Trigger = Trigger;
-/**
- * Headless component for product price display
- */
-const Price = (props) => {
-    const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
-    const price = variantService.currentPrice.get();
-    const compareAtPrice = variantService.currentCompareAtPrice.get();
-    const currentVariant = variantService.currentVariant.get();
-    const currency = variantService.currency.get();
-    const isVariantPrice = !!currentVariant;
-    return props.children({
-        price,
-        compareAtPrice,
-        isVariantPrice,
-        currency,
+        currentVariantId,
+        availabilityStatus,
+        trackInventory,
+        selectedQuantity,
+        incrementQuantity,
+        decrementQuantity,
     });
 };
-exports.Price = Price;
+exports.Stock = Stock;
 /**
- * Headless component for product stock status
+ * Headless component for resetting variant selections
+ *
+ * @component
  */
-const Stock = (props) => {
+const Reset = (props) => {
     const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
-    const inStock = variantService.isInStock.get();
-    const isPreOrderEnabled = variantService.isPreOrderEnabled.get();
-    const currentVariantId = variantService.selectedVariantId.get();
-    const trackInventory = false; // V3 API has different inventory structure
-    const quantity = null; // Not directly available in v3 API
-    // Determine status based on stock and pre-order availability
-    let status;
-    if (inStock) {
-        status = "In Stock";
-    }
-    else if (isPreOrderEnabled) {
-        status = "Available for Pre-Order";
-    }
-    else {
-        status = "Out of Stock";
-    }
+    const selectedChoices = variantService.selectedChoices.get();
+    const hasSelections = Object.keys(selectedChoices).length > 0;
+    const onReset = () => {
+        variantService.resetSelections();
+    };
     return props.children({
-        inStock,
-        isPreOrderEnabled,
-        currentVariantId,
-        status,
-        quantity,
-        trackInventory,
+        onReset,
+        hasSelections,
     });
 };
-exports.Stock = Stock;
+exports.Reset = Reset;

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { productsV3 } from "@wix/stores";
+import React from 'react';
+import { type V3Product } from '@wix/auto_sdk_stores_products-v-3';
 /**
  * Props for List headless component
  */
@@ -12,7 +12,7 @@ export interface ListProps {
  */
 export interface ListRenderProps {
     /** Array of related products */
-    products: productsV3.V3Product[];
+    products: V3Product[];
     /** Whether products are loading */
     isLoading: boolean;
     /** Error message if any */
@@ -24,6 +24,8 @@ export interface ListRenderProps {
 }
 /**
  * Headless component for displaying related products list
+ *
+ * @component
  */
 export declare const List: (props: ListProps) => React.ReactNode;
 /**
@@ -31,7 +33,7 @@ export declare const List: (props: ListProps) => React.ReactNode;
  */
 export interface ItemProps {
     /** Product data */
-    product: productsV3.V3Product;
+    product: V3Product;
     /** Render prop function that receives item data */
     children: (props: ItemRenderProps) => React.ReactNode;
 }
@@ -56,5 +58,7 @@ export interface ItemRenderProps {
 }
 /**
  * Headless component for individual related product item
+ *
+ * @component
  */
 export declare const Item: (props: ItemProps) => React.ReactNode;

package/cjs/dist/react/RelatedProducts.js

@@ -7,8 +7,11 @@ exports.Item = exports.List = void 0;
 const react_1 = __importDefault(require("react"));
 const services_manager_react_1 = require("@wix/services-manager-react");
 const related_products_service_1 = require("../services/related-products-service");
+const auto_sdk_stores_products_v_3_1 = require("@wix/auto_sdk_stores_products-v-3");
 /**
  * Headless component for displaying related products list
+ *
+ * @component
  */
 const List = (props) => {
     const service = (0, services_manager_react_1.useService)(related_products_service_1.RelatedProductsServiceDefinition);
@@ -23,7 +26,7 @@ const List = (props) => {
             service.error.subscribe(setError),
             service.hasRelatedProducts.subscribe(setHasProducts),
         ];
-        return () => unsubscribes.forEach((fn) => fn());
+        return () => unsubscribes.forEach(fn => fn());
     }, [service]);
     return props.children({
         products,
@@ -36,24 +39,26 @@ const List = (props) => {
 exports.List = List;
 /**
  * Headless component for individual related product item
+ *
+ * @component
  */
 const Item = (props) => {
     const { product } = props;
-    const title = product.name || "Unknown Product";
+    const title = product.name || 'Unknown Product';
     // Use actual v3 media structure - image is directly a string URL
     const image = product.media?.main?.image || null;
     // Create formatted price from raw amount since formattedAmount may not be available
     const rawPrice = product.actualPriceRange?.minValue?.amount;
-    const price = rawPrice ? `$${rawPrice}` : "Price unavailable";
+    const price = rawPrice ? `$${rawPrice}` : 'Price unavailable';
     const availabilityStatus = product.inventory?.availabilityStatus;
-    const available = availabilityStatus === "IN_STOCK" ||
-        availabilityStatus === "PARTIALLY_OUT_OF_STOCK";
+    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 href = `/store/example-2/${product.slug}`;
-    const description = typeof product.description === "string" ? product.description : "";
+    const description = typeof product.description === 'string' ? product.description : '';
     const handleQuickAdd = () => {
         // This would typically add the product to cart
         // For now, we'll just log it
-        console.log("Quick add:", product.name);
+        console.log('Quick add:', product.name);
     };
     return props.children({
         title,

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

@@ -0,0 +1,66 @@
+/**
+ * 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;
+}
+/**
+ * Headless component for selected variant details display
+ *
+ * @component
+ */
+export declare const Details: (props: ProductDetailsProps) => import("react").ReactNode;
+/**
+ * Props for Price headless component
+ */
+export interface PriceProps {
+    /** Render prop function that receives price data */
+    children: (props: PriceRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Price component
+ */
+export interface PriceRenderProps {
+    /** Current price (formatted) */
+    price: string;
+    /** Compare at price (formatted) - null if no compare price */
+    compareAtPrice: string | null;
+    /** Currency code */
+    currency: string;
+}
+/**
+ * Headless component for product price display
+ *
+ * @component
+ */
+export declare const Price: (props: PriceProps) => import("react").ReactNode;
+/**
+ * Props for SKU headless component
+ */
+export interface SKUProps {
+    /** Render prop function that receives SKU data */
+    children: (props: SKURenderProps) => React.ReactNode;
+}
+/**
+ * Render props for SKU component
+ */
+export interface SKURenderProps {
+    /** Product SKU */
+    sku: string | null;
+}
+/**
+ * Headless component for product SKU display
+ *
+ * @component
+ */
+export declare const SKU: (props: SKUProps) => import("react").ReactNode;

package/cjs/dist/react/SelectedVariant.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SKU = exports.Price = exports.Details = void 0;
+const services_manager_react_1 = require("@wix/services-manager-react");
+const selected_variant_service_1 = require("../services/selected-variant-service");
+/**
+ * Headless component for selected variant details display
+ *
+ * @component
+ */
+const Details = (props) => {
+    const selectedVariantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
+    const selectedVariant = selectedVariantService.currentVariant?.get();
+    let sku = selectedVariant?.sku || null;
+    let weight = selectedVariant?.physicalProperties?.weight?.toString() || null;
+    return props.children({
+        sku,
+        weight,
+    });
+};
+exports.Details = Details;
+/**
+ * Headless component for product price display
+ *
+ * @component
+ */
+const Price = (props) => {
+    const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
+    const price = variantService.currentPrice.get();
+    const compareAtPrice = variantService.currentCompareAtPrice.get();
+    const currency = variantService.currency.get();
+    return props.children({
+        price,
+        compareAtPrice,
+        currency,
+    });
+};
+exports.Price = Price;
+/**
+ * Headless component for product SKU display
+ *
+ * @component
+ */
+const SKU = (props) => {
+    const selectedVariantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
+    const selectedVariant = selectedVariantService.currentVariant?.get();
+    const sku = selectedVariant?.sku || null;
+    return props.children({
+        sku,
+    });
+};
+exports.SKU = SKU;

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

@@ -1,25 +1,13 @@
-import React from "react";
-import { SharingPlatform } from "../services/social-sharing-service";
+import React from 'react';
+import { type SharingPlatform } from '../services/social-sharing-service';
 export type { SharingPlatform };
-export type RootChildren = (props: RootRenderProps) => React.ReactNode;
 /**
  * Props for Root headless component
  */
 export interface RootProps {
     /** Render prop function that receives sharing data */
-    children: RootChildren;
+    children: (props: RootRenderProps) => React.ReactNode;
 }
-export type ShareFacebook = (url: string, title: string, description?: string) => void;
-export type ShareTwitter = (url: string, text: string, hashtags?: string[]) => void;
-export type ShareLinkedIn = (url: string, title: string, summary?: string) => void;
-export type ShareWhatsApp = (url: string, text: string) => void;
-export type ShareEmail = (url: string, subject: string, body: string) => void;
-export type CopyLink = (url: string) => Promise<boolean>;
-export type ShareNative = (data: {
-    title: string;
-    text: string;
-    url: string;
-}) => Promise<boolean>;
 /**
  * Render props for Root component
  */
@@ -31,26 +19,30 @@ export interface RootRenderProps {
     /** Last shared platform */
     lastShared: string | null;
     /** Share to Facebook */
-    shareFacebook: ShareFacebook;
+    shareFacebook: (url: string, title: string, description?: string) => void;
     /** Share to Twitter */
-    shareTwitter: ShareTwitter;
+    shareTwitter: (url: string, text: string, hashtags?: string[]) => void;
     /** Share to LinkedIn */
-    shareLinkedIn: ShareLinkedIn;
+    shareLinkedIn: (url: string, title: string, summary?: string) => void;
     /** Share to WhatsApp */
-    shareWhatsApp: ShareWhatsApp;
+    shareWhatsApp: (url: string, text: string) => void;
     /** Share via Email */
-    shareEmail: ShareEmail;
+    shareEmail: (url: string, subject: string, body: string) => void;
     /** Copy to clipboard */
-    copyLink: CopyLink;
+    copyLink: (url: string) => Promise<boolean>;
     /** Native share API */
-    shareNative: ShareNative;
+    shareNative: (data: {
+        title: string;
+        text: string;
+        url: string;
+    }) => Promise<boolean>;
 }
 /**
  * Headless component for social sharing root
+ *
+ * @component
  */
 export declare const Root: (props: RootProps) => React.ReactNode;
-export type OnClick = () => void;
-export type PlatformChildren = (props: PlatformRenderProps) => React.ReactNode;
 /**
  * Props for Platform headless component
  */
@@ -58,11 +50,10 @@ export interface PlatformProps {
     /** Platform data */
     platform: SharingPlatform;
     /** Click handler */
-    onClick: OnClick;
+    onClick: () => void;
     /** Render prop function that receives platform data */
-    children: PlatformChildren;
+    children: (props: PlatformRenderProps) => React.ReactNode;
 }
-export type OnSelect = () => void;
 /**
  * Render props for Platform component
  */
@@ -70,13 +61,14 @@ export interface PlatformRenderProps {
     /** Platform data */
     platform: SharingPlatform;
     /** Platform click handler */
-    onSelect: OnSelect;
+    onSelect: () => void;
 }
 /**
  * Headless component for individual social platform
+ *
+ * @component
  */
 export declare const Platform: (props: PlatformProps) => React.ReactNode;
-export type PlatformsChildren = (props: PlatformsRenderProps) => React.ReactNode;
 /**
  * Props for Platforms headless component
  */
@@ -90,7 +82,7 @@ export interface PlatformsProps {
     /** Hashtags for sharing */
     hashtags?: string[];
     /** Render prop function that receives platforms data */
-    children: PlatformsChildren;
+    children: (props: PlatformsRenderProps) => React.ReactNode;
 }
 /**
  * Render props for Platforms component
@@ -115,5 +107,7 @@ export interface PlatformsRenderProps {
 }
 /**
  * Headless component for social sharing platforms with logic
+ *
+ * @component
  */
 export declare const Platforms: (props: PlatformsProps) => React.ReactNode;

package/cjs/dist/react/SocialSharing.js

@@ -9,6 +9,8 @@ const services_manager_react_1 = require("@wix/services-manager-react");
 const social_sharing_service_1 = require("../services/social-sharing-service");
 /**
  * Headless component for social sharing root
+ *
+ * @component
  */
 const Root = (props) => {
     const service = (0, services_manager_react_1.useService)(social_sharing_service_1.SocialSharingServiceDefinition);
@@ -21,7 +23,7 @@ const Root = (props) => {
             service.shareCount.subscribe(setShareCount),
             service.lastSharedPlatform.subscribe(setLastShared),
         ];
-        return () => unsubscribes.forEach((fn) => fn());
+        return () => unsubscribes.forEach(fn => fn());
     }, [service]);
     return props.children({
         platforms,
@@ -39,6 +41,8 @@ const Root = (props) => {
 exports.Root = Root;
 /**
  * Headless component for individual social platform
+ *
+ * @component
  */
 const Platform = (props) => {
     const { platform, onClick } = props;
@@ -50,9 +54,11 @@ const Platform = (props) => {
 exports.Platform = Platform;
 /**
  * Headless component for social sharing platforms with logic
+ *
+ * @component
  */
 const Platforms = (props) => {
-    const { url, title, description = "", hashtags = [] } = props;
+    const { url, title, description = '', hashtags = [] } = props;
     const service = (0, services_manager_react_1.useService)(social_sharing_service_1.SocialSharingServiceDefinition);
     const [platforms, setPlatforms] = react_1.default.useState([]);
     react_1.default.useEffect(() => {

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

@@ -1,17 +1,14 @@
-import React from "react";
-import { type SortBy } from "../services/sort-service";
-interface SortContextValue {
-    currentSort: SortBy;
-    setSortBy: (sortBy: SortBy) => void;
-}
-export declare function useSortContext(): SortContextValue;
-export interface ProviderProps {
-    children: React.ReactNode;
-}
-export declare function Provider({ children }: ProviderProps): import("react/jsx-runtime").JSX.Element;
-export type SortControllerChildren = (props: SortContextValue) => React.ReactNode;
+import React from 'react';
+import { type SortBy } from '../services/sort-service';
 export interface ControllerProps {
-    children: SortControllerChildren;
+    children: (props: {
+        currentSort: SortBy;
+        setSortBy: (sortBy: SortBy) => void;
+    }) => React.ReactNode;
 }
-export declare function Controller({ children }: ControllerProps): import("react/jsx-runtime").JSX.Element;
-export {};
+/**
+ * Headless component for sorting products
+ *
+ * @component
+ */
+export declare function Controller(props: ControllerProps): React.ReactNode;

package/cjs/dist/react/Sort.js

@@ -1,41 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSortContext = useSortContext;
-exports.Provider = Provider;
 exports.Controller = Controller;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const sort_service_1 = require("../services/sort-service");
 const services_manager_react_1 = require("@wix/services-manager-react");
-const SortContext = (0, react_1.createContext)(null);
-function useSortContext() {
-    const context = (0, react_1.useContext)(SortContext);
-    if (!context) {
-        throw new Error("useSortContext must be used within a Sort.SortProvider");
-    }
-    return context;
-}
-function Provider({ children }) {
+const sort_service_1 = require("../services/sort-service");
+/**
+ * Headless component for sorting products
+ *
+ * @component
+ */
+function Controller(props) {
+    const { children } = props;
     const sortService = (0, services_manager_react_1.useService)(sort_service_1.SortServiceDefinition);
-    const [currentSort, setCurrentSort] = (0, react_1.useState)("");
-    (0, react_1.useEffect)(() => {
-        const unsubscribe = sortService.currentSort.subscribe((sort) => {
-            setCurrentSort(sort);
-        });
-        // Initialize with current value
-        setCurrentSort(sortService.currentSort.get());
-        return unsubscribe;
-    }, [sortService]);
-    const setSortBy = (sortBy) => {
-        sortService.setSortBy(sortBy);
-    };
-    const contextValue = {
-        currentSort,
-        setSortBy,
-    };
-    return ((0, jsx_runtime_1.jsx)(SortContext.Provider, { value: contextValue, children: children }));
-}
-function Controller({ children }) {
-    const context = useSortContext();
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children(context) });
+    const currentSort = sortService.currentSort.get();
+    const setSortBy = sortService.setSortBy;
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({ currentSort, setSortBy }) });
 }