@wix/headless-stores 0.0.9 → 0.0.11

package/dist/react/ProductModifiers.d.ts

@@ -0,0 +1,164 @@
+import { type ConnectedModifier, type ConnectedModifierChoice } from '@wix/auto_sdk_stores_products-v-3';
+/**
+ * Props for Modifiers headless component
+ */
+export interface ModifiersProps {
+    /** Render prop function that receives modifiers data */
+    children: (props: ModifiersRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Modifiers component
+ */
+export interface ModifiersRenderProps {
+    /** Array of product modifiers */
+    modifiers: ConnectedModifier[];
+    /** Whether product has modifiers */
+    hasModifiers: boolean;
+    /** Currently selected modifier values */
+    selectedModifiers: Record<string, any>;
+    /** Whether all required modifiers are filled */
+    areAllRequiredModifiersFilled: boolean;
+}
+/**
+ * Headless component for all product modifiers
+ */
+export declare const Modifiers: (props: ModifiersProps) => import("react").ReactNode;
+/**
+ * Props for Modifier headless component
+ */
+export interface ModifierProps {
+    /** Product modifier data */
+    modifier: ConnectedModifier;
+    /** Render prop function that receives modifier data */
+    children: (props: ModifierRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Modifier component
+ */
+export interface ModifierRenderProps {
+    /** Modifier name */
+    name: string;
+    /** Modifier type */
+    type: any;
+    /** Whether this modifier is mandatory */
+    mandatory: boolean;
+    /** Array of choices for this modifier (for choice-based modifiers) */
+    choices: ConnectedModifierChoice[];
+    /** Currently selected value for this modifier */
+    selectedValue: any;
+    /** Whether this modifier has choices */
+    hasChoices: boolean;
+    /** Whether this modifier is a free text type */
+    isFreeText: boolean;
+    /** Maximum characters for free text */
+    maxChars?: number;
+    /** Placeholder text for free text */
+    placeholder?: string;
+}
+/**
+ * Headless component for a specific product modifier
+ *
+ * @component
+ */
+export declare const Modifier: (props: ModifierProps) => import("react").ReactNode;
+/**
+ * Props for ModifierChoice headless component
+ */
+export interface ChoiceProps {
+    /** Product modifier data */
+    modifier: ConnectedModifier;
+    /** Choice data */
+    choice: ConnectedModifierChoice;
+    /** Render prop function that receives choice data */
+    children: (props: ChoiceRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ModifierChoice 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;
+    /** Function to select this choice */
+    onSelect: () => void;
+    /** Modifier name */
+    modifierName: string;
+    /** Choice value */
+    choiceValue: string;
+    /** Color code for swatch choices */
+    colorCode?: string;
+}
+/**
+ * Headless component for individual modifier choice selection
+ *
+ * @component
+ */
+export declare const Choice: (props: ChoiceProps) => import("react").ReactNode;
+/**
+ * Props for ModifierFreeText headless component
+ */
+export interface FreeTextProps {
+    /** Product modifier data */
+    modifier: ConnectedModifier;
+    /** Render prop function that receives free text data */
+    children: (props: FreeTextRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ModifierFreeText component
+ */
+export interface FreeTextRenderProps {
+    /** Current text value */
+    value: string;
+    /** Function to update text value */
+    onChange: (value: string) => void;
+    /** Whether this modifier is mandatory */
+    mandatory: boolean;
+    /** Maximum characters allowed */
+    maxChars?: number;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Character count */
+    charCount: number;
+    /** Whether character limit is exceeded */
+    isOverLimit: boolean;
+    /** Modifier name */
+    modifierName: string;
+}
+/**
+ * Headless component for free text modifier input
+ *
+ * @component
+ */
+export declare const FreeText: (props: FreeTextProps) => import("react").ReactNode;
+/**
+ * Props for ModifierToggleFreeText headless component
+ */
+export interface ToggleFreeTextProps {
+    /** Product modifier data */
+    modifier: ConnectedModifier;
+    /** Render prop function that receives toggle data */
+    children: (props: ToggleFreeTextRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ModifierToggleFreeText component
+ */
+export interface ToggleFreeTextRenderProps {
+    /** Whether the text input is shown */
+    isTextInputShown: boolean;
+    /** Function to toggle text input visibility */
+    onToggle: () => void;
+    /** Whether this modifier is mandatory */
+    mandatory: boolean;
+    /** Modifier name */
+    modifierName: string;
+}
+/**
+ * Headless component for toggling free text modifier input
+ * Used for optional free text modifiers where a checkbox shows/hides the input
+ *
+ * @component
+ */
+export declare const ToggleFreeText: (props: ToggleFreeTextProps) => import("react").ReactNode;

package/dist/react/ProductModifiers.js

@@ -0,0 +1,160 @@
+import { useState } from 'react';
+import { useService } from '@wix/services-manager-react';
+import { ProductModifiersServiceDefinition } from '../services/product-modifiers-service';
+import { ModifierRenderType, } from '@wix/auto_sdk_stores_products-v-3';
+/**
+ * Custom hook to safely get the modifiers service
+ */
+function useModifiersService() {
+    try {
+        return useService(ProductModifiersServiceDefinition);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Headless component for all product modifiers
+ */
+export 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,
+    });
+};
+/**
+ * Headless component for a specific product modifier
+ *
+ * @component
+ */
+export 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 === 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,
+    });
+};
+/**
+ * Headless component for individual modifier choice selection
+ *
+ * @component
+ */
+export 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 === 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,
+    });
+};
+/**
+ * Headless component for free text modifier input
+ *
+ * @component
+ */
+export 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,
+    });
+};
+/**
+ * Headless component for toggling free text modifier input
+ * Used for optional free text modifiers where a checkbox shows/hides the input
+ *
+ * @component
+ */
+export const ToggleFreeText = (props) => {
+    const modifiersService = useModifiersService();
+    const { modifier } = props;
+    const modifierName = modifier.name || '';
+    const mandatory = modifier.mandatory || false;
+    const [isTextInputShown, setIsTextInputShown] = useState(mandatory);
+    const onToggle = () => {
+        const newState = !isTextInputShown;
+        setIsTextInputShown(newState);
+        if (!newState) {
+            modifiersService?.clearModifier(modifierName);
+        }
+    };
+    return props.children({
+        isTextInputShown,
+        onToggle,
+        mandatory,
+        modifierName,
+    });
+};

package/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/dist/react/ProductVariantSelector.js

@@ -0,0 +1,130 @@
+import { useService } from '@wix/services-manager-react';
+import { SelectedVariantServiceDefinition } from '../services/selected-variant-service';
+import { InventoryAvailabilityStatus, } from '@wix/auto_sdk_stores_products-v-3';
+/**
+ * Headless component for all product options
+ *
+ * @component
+ */
+export const Options = (props) => {
+    const variantService = useService(SelectedVariantServiceDefinition);
+    const selectedChoices = variantService.selectedChoices.get();
+    const options = variantService.productOptions.get();
+    return props.children({
+        options,
+        hasOptions: options.length > 0,
+        selectedChoices,
+    });
+};
+/**
+ * Headless component for choices within a specific product option
+ *
+ * @component
+ */
+export const Option = (props) => {
+    const variantService = useService(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,
+    });
+};
+/**
+ * Headless component for individual choice selection
+ *
+ * @component
+ */
+export const Choice = (props) => {
+    const variantService = useService(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,
+    });
+};
+/**
+ * Headless component for product stock status
+ *
+ * @component
+ */
+export const Stock = (props) => {
+    const variantService = useService(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
+        ? InventoryAvailabilityStatus.IN_STOCK
+        : InventoryAvailabilityStatus.OUT_OF_STOCK;
+    const incrementQuantity = () => {
+        variantService.incrementQuantity();
+    };
+    const decrementQuantity = () => {
+        variantService.decrementQuantity();
+    };
+    return props.children({
+        inStock,
+        availableQuantity,
+        isPreOrderEnabled,
+        currentVariantId,
+        availabilityStatus,
+        trackInventory,
+        selectedQuantity,
+        incrementQuantity,
+        decrementQuantity,
+    });
+};
+/**
+ * Headless component for resetting variant selections
+ *
+ * @component
+ */
+export const Reset = (props) => {
+    const variantService = useService(SelectedVariantServiceDefinition);
+    const selectedChoices = variantService.selectedChoices.get();
+    const hasSelections = Object.keys(selectedChoices).length > 0;
+    const onReset = () => {
+        variantService.resetSelections();
+    };
+    return props.children({
+        onReset,
+        hasSelections,
+    });
+};

package/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;