@wix/headless-stores 0.0.9 → 0.0.11

package/cjs/dist/react/ProductModifiers.js

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleFreeText = exports.FreeText = exports.Choice = exports.Modifier = exports.Modifiers = void 0;
+const react_1 = require("react");
+const services_manager_react_1 = require("@wix/services-manager-react");
+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");
+/**
+ * Custom hook to safely get the modifiers service
+ */
+function useModifiersService() {
+    try {
+        return (0, services_manager_react_1.useService)(product_modifiers_service_1.ProductModifiersServiceDefinition);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Headless component for all product modifiers
+ */
+const Modifiers = (props) => {
+    const modifiersService = useModifiersService();
+    if (!modifiersService) {
+        return props.children({
+            modifiers: [],
+            hasModifiers: false,
+            selectedModifiers: {},
+            areAllRequiredModifiersFilled: true,
+        });
+    }
+    const modifiers = modifiersService.modifiers.get();
+    const hasModifiers = modifiersService.hasModifiers.get();
+    const selectedModifiers = modifiersService.selectedModifiers.get();
+    const areAllRequiredModifiersFilled = modifiersService.areAllRequiredModifiersFilled();
+    return props.children({
+        modifiers,
+        hasModifiers,
+        selectedModifiers,
+        areAllRequiredModifiersFilled,
+    });
+};
+exports.Modifiers = Modifiers;
+/**
+ * Headless component for a specific product modifier
+ *
+ * @component
+ */
+const Modifier = (props) => {
+    const modifiersService = useModifiersService();
+    const { modifier } = props;
+    const name = modifier.name || '';
+    const type = modifier.modifierRenderType;
+    const mandatory = modifier.mandatory || false;
+    const choices = modifier.choicesSettings?.choices || [];
+    const hasChoices = choices.length > 0;
+    const isFreeText = type === auto_sdk_stores_products_v_3_1.ModifierRenderType.FREE_TEXT;
+    const freeTextSettings = modifier.freeTextSettings;
+    const maxChars = freeTextSettings?.maxLength;
+    const placeholder = freeTextSettings?.placeholder;
+    const selectedValue = modifiersService?.selectedModifiers.get()[name] || null;
+    return props.children({
+        name,
+        type,
+        mandatory,
+        choices,
+        selectedValue,
+        hasChoices,
+        isFreeText,
+        maxChars,
+        placeholder,
+    });
+};
+exports.Modifier = Modifier;
+/**
+ * Headless component for individual modifier choice selection
+ *
+ * @component
+ */
+const Choice = (props) => {
+    const modifiersService = useModifiersService();
+    const { modifier, choice } = props;
+    const modifierName = modifier.name || '';
+    const renderType = modifier.modifierRenderType;
+    // For TEXT_CHOICES, use choice.key; for SWATCH_CHOICES, use choice.name
+    const choiceValue = renderType === auto_sdk_stores_products_v_3_1.ModifierRenderType.TEXT_CHOICES
+        ? choice.key || choice.name || ''
+        : choice.name || '';
+    const value = choice.name || ''; // Display name is always choice.name
+    const description = choice.description;
+    const colorCode = choice.colorCode;
+    const selectedValue = modifiersService?.getModifierValue(modifierName);
+    const isSelected = selectedValue?.choiceValue === choiceValue;
+    const onSelect = () => {
+        modifiersService?.setModifierChoice(modifierName, choiceValue);
+    };
+    return props.children({
+        value,
+        description,
+        isSelected,
+        onSelect,
+        modifierName,
+        choiceValue,
+        colorCode,
+    });
+};
+exports.Choice = Choice;
+/**
+ * Headless component for free text modifier input
+ *
+ * @component
+ */
+const FreeText = (props) => {
+    const modifiersService = useModifiersService();
+    const { modifier } = props;
+    const modifierName = modifier.name || '';
+    const mandatory = modifier.mandatory || false;
+    const freeTextSettings = modifier.freeTextSettings;
+    const maxChars = freeTextSettings?.maxLength;
+    const placeholder = freeTextSettings?.placeholder;
+    const selectedValue = modifiersService?.getModifierValue(modifierName);
+    const value = selectedValue?.freeTextValue || '';
+    const charCount = value.length;
+    const isOverLimit = maxChars ? charCount > maxChars : false;
+    const onChange = (newValue) => {
+        if (maxChars && newValue.length > maxChars)
+            return;
+        modifiersService?.setModifierFreeText(modifierName, newValue);
+    };
+    return props.children({
+        value,
+        onChange,
+        mandatory,
+        maxChars,
+        placeholder,
+        charCount,
+        isOverLimit,
+        modifierName,
+    });
+};
+exports.FreeText = FreeText;
+/**
+ * Headless component for toggling free text modifier input
+ * Used for optional free text modifiers where a checkbox shows/hides the input
+ *
+ * @component
+ */
+const ToggleFreeText = (props) => {
+    const modifiersService = useModifiersService();
+    const { modifier } = props;
+    const modifierName = modifier.name || '';
+    const mandatory = modifier.mandatory || false;
+    const [isTextInputShown, setIsTextInputShown] = (0, react_1.useState)(mandatory);
+    const onToggle = () => {
+        const newState = !isTextInputShown;
+        setIsTextInputShown(newState);
+        if (!newState) {
+            modifiersService?.clearModifier(modifierName);
+        }
+    };
+    return props.children({
+        isTextInputShown,
+        onToggle,
+        mandatory,
+        modifierName,
+    });
+};
+exports.ToggleFreeText = ToggleFreeText;

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

@@ -0,0 +1,153 @@
+import { type ConnectedOption, type ConnectedOptionChoice, InventoryAvailabilityStatus } from '@wix/auto_sdk_stores_products-v-3';
+/**
+ * Props for Options headless component
+ */
+export interface OptionsProps {
+    /** Render prop function that receives options data */
+    children: (props: OptionsRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Options component
+ */
+export interface OptionsRenderProps {
+    /** Array of product options */
+    options: ConnectedOption[];
+    /** Whether product has options */
+    hasOptions: boolean;
+    /** Currently selected choices */
+    selectedChoices: Record<string, string>;
+}
+/**
+ * Headless component for all product options
+ *
+ * @component
+ */
+export declare const Options: (props: OptionsProps) => import("react").ReactNode;
+/**
+ * Props for Option headless component
+ */
+export interface OptionProps {
+    /** Product option data */
+    option: ConnectedOption;
+    /** Render prop function that receives option data */
+    children: (props: OptionRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Option component
+ */
+export interface OptionRenderProps {
+    /** Option name */
+    name: string;
+    /** Option type */
+    type: any;
+    /** Array of choices for this option */
+    choices: ConnectedOptionChoice[];
+    /** Currently selected value for this option */
+    selectedValue: string | null;
+    /** Whether this option has choices */
+    hasChoices: boolean;
+}
+/**
+ * Headless component for choices within a specific product option
+ *
+ * @component
+ */
+export declare const Option: (props: OptionProps) => import("react").ReactNode;
+/**
+ * Props for Choice headless component
+ */
+export interface ChoiceProps {
+    /** Product option data */
+    option: ConnectedOption;
+    /** Choice data */
+    choice: ConnectedOptionChoice;
+    /** Render prop function that receives choice data */
+    children: (props: ChoiceRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Choice component
+ */
+export interface ChoiceRenderProps {
+    /** Choice value to display */
+    value: string;
+    /** Choice description (for color options) */
+    description: string | undefined;
+    /** Whether this choice is currently selected */
+    isSelected: boolean;
+    /** Whether this choice is visible */
+    isVisible: boolean;
+    /** Whether this choice is in stock */
+    isInStock: boolean;
+    /** Whether this choice is available for pre-order */
+    isPreOrderEnabled: boolean;
+    /** Function to select this choice */
+    onSelect: () => void;
+    /** Option name */
+    optionName: string;
+    /** Choice value */
+    choiceValue: string;
+}
+/**
+ * Headless component for individual choice selection
+ *
+ * @component
+ */
+export declare const Choice: (props: ChoiceProps) => import("react").ReactNode;
+/**
+ * Props for Stock headless component
+ */
+export interface StockProps {
+    /** Render prop function that receives stock data */
+    children: (props: StockRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Stock component
+ */
+export interface StockRenderProps {
+    /** Whether product is in stock */
+    inStock: boolean;
+    /** Whether pre-order is enabled */
+    isPreOrderEnabled: boolean;
+    /** Raw inventory availability status */
+    availabilityStatus: InventoryAvailabilityStatus | string;
+    /** Whether stock tracking is enabled */
+    trackInventory: boolean;
+    /** Current variant id */
+    currentVariantId: string | null;
+    /** Available quantity */
+    availableQuantity: number | null;
+    /** Currently selected quantity */
+    selectedQuantity: number;
+    /** Function to increment quantity */
+    incrementQuantity: () => void;
+    /** Function to decrement quantity */
+    decrementQuantity: () => void;
+}
+/**
+ * Headless component for product stock status
+ *
+ * @component
+ */
+export declare const Stock: (props: StockProps) => import("react").ReactNode;
+/**
+ * Props for Reset headless component
+ */
+export interface ResetProps {
+    /** Render prop function that receives reset data */
+    children: (props: ResetRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Reset component
+ */
+export interface ResetRenderProps {
+    /** Function to reset all selections */
+    onReset: () => void;
+    /** Whether the reset button should be rendered */
+    hasSelections: boolean;
+}
+/**
+ * Headless component for resetting variant selections
+ *
+ * @component
+ */
+export declare const Reset: (props: ResetProps) => import("react").ReactNode;

package/cjs/dist/react/ProductVariantSelector.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 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);
+    const selectedChoices = variantService.selectedChoices.get();
+    const options = variantService.productOptions.get();
+    return props.children({
+        options,
+        hasOptions: options.length > 0,
+        selectedChoices,
+    });
+};
+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 choices = option.choicesSettings?.choices || [];
+    const selectedValue = selectedChoices[name] || null;
+    return props.children({
+        name,
+        type: option.optionRenderType,
+        choices,
+        selectedValue,
+        hasChoices: choices.length > 0,
+    });
+};
+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 isSelected = selectedChoices[optionName] === choiceValue;
+    // Check if this choice is available based on current selections
+    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 = {
+            ...selectedChoices,
+            [optionName]: choiceValue,
+        };
+        variantService.setSelectedChoices(newChoices);
+    };
+    return props.children({
+        value,
+        description: undefined, // v3 choices don't have separate description field
+        isSelected,
+        isVisible,
+        isInStock,
+        isPreOrderEnabled,
+        onSelect,
+        optionName,
+        choiceValue,
+    });
+};
+exports.Choice = Choice;
+/**
+ * Headless component for product stock status
+ *
+ * @component
+ */
+const Stock = (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 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({
+        inStock,
+        availableQuantity,
+        isPreOrderEnabled,
+        currentVariantId,
+        availabilityStatus,
+        trackInventory,
+        selectedQuantity,
+        incrementQuantity,
+        decrementQuantity,
+    });
+};
+exports.Stock = Stock;
+/**
+ * Headless component for resetting variant selections
+ *
+ * @component
+ */
+const Reset = (props) => {
+    const variantService = (0, services_manager_react_1.useService)(selected_variant_service_1.SelectedVariantServiceDefinition);
+    const selectedChoices = variantService.selectedChoices.get();
+    const hasSelections = Object.keys(selectedChoices).length > 0;
+    const onReset = () => {
+        variantService.resetSelections();
+    };
+    return props.children({
+        onReset,
+        hasSelections,
+    });
+};
+exports.Reset = Reset;

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { type V3Product } from '@wix/auto_sdk_stores_products-v-3';
+/**
+ * Props for List headless component
+ */
+export interface ListProps {
+    /** Render prop function that receives list data */
+    children: (props: ListRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for List component
+ */
+export interface ListRenderProps {
+    /** Array of related products */
+    products: V3Product[];
+    /** Whether products are loading */
+    isLoading: boolean;
+    /** Error message if any */
+    error: string | null;
+    /** Whether there are products available */
+    hasProducts: boolean;
+    /** Function to refresh products */
+    refresh: () => Promise<void>;
+}
+/**
+ * Headless component for displaying related products list
+ *
+ * @component
+ */
+export declare const List: (props: ListProps) => React.ReactNode;
+/**
+ * Props for Item headless component
+ */
+export interface ItemProps {
+    /** Product data */
+    product: V3Product;
+    /** Render prop function that receives item data */
+    children: (props: ItemRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Item component
+ */
+export interface ItemRenderProps {
+    /** Product title */
+    title: string;
+    /** Product image URL */
+    image: string | null;
+    /** Formatted price */
+    price: string;
+    /** Whether product is available */
+    available: boolean;
+    /** Product page URL */
+    href: string;
+    /** Product description */
+    description: string;
+    /** Function to add product to cart quickly */
+    onQuickAdd: () => void;
+}
+/**
+ * Headless component for individual related product item
+ *
+ * @component
+ */
+export declare const Item: (props: ItemProps) => React.ReactNode;

package/cjs/dist/react/RelatedProducts.js

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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);
+    const [products, setProducts] = react_1.default.useState([]);
+    const [isLoading, setIsLoading] = react_1.default.useState(false);
+    const [error, setError] = react_1.default.useState(null);
+    const [hasProducts, setHasProducts] = react_1.default.useState(false);
+    react_1.default.useEffect(() => {
+        const unsubscribes = [
+            service.relatedProducts.subscribe(setProducts),
+            service.isLoading.subscribe(setIsLoading),
+            service.error.subscribe(setError),
+            service.hasRelatedProducts.subscribe(setHasProducts),
+        ];
+        return () => unsubscribes.forEach(fn => fn());
+    }, [service]);
+    return props.children({
+        products,
+        isLoading,
+        error,
+        hasProducts,
+        refresh: service.refreshRelatedProducts,
+    });
+};
+exports.List = List;
+/**
+ * Headless component for individual related product item
+ *
+ * @component
+ */
+const Item = (props) => {
+    const { product } = props;
+    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 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 href = `/store/example-2/${product.slug}`;
+    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);
+    };
+    return props.children({
+        title,
+        image,
+        price,
+        available,
+        href,
+        description,
+        onQuickAdd: handleQuickAdd,
+    });
+};
+exports.Item = Item;

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;