@wix/headless-stores 0.0.8 → 0.0.10

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

package/dist/react/Product.js

@@ -0,0 +1,50 @@
+import { useService } from "@wix/services-manager-react";
+import { ProductServiceDefinition } from "../services/product-service";
+import { SelectedVariantServiceDefinition } from "../services/selected-variant-service";
+/**
+ * Headless component for product name display
+ */
+export const Name = (props) => {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    const name = product?.name || "";
+    return props.children({
+        name,
+        hasName: !!name,
+    });
+};
+/**
+ * Headless component for product description display
+ */
+export const Description = (props) => {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    // Handle v3 description which can be string or RichContent
+    const rawDescription = product?.description;
+    const description = typeof rawDescription === "string" ? rawDescription : "";
+    const hasDescription = !!description;
+    const isHtml = description.includes("<") && description.includes(">");
+    return props.children({
+        description,
+        hasDescription,
+        isHtml,
+    });
+};
+/**
+ * Headless component for product details display
+ */
+export const Details = (props) => {
+    const selectedVariantService = useService(SelectedVariantServiceDefinition);
+    const selectedVariant = selectedVariantService.currentVariant?.get();
+    let sku = selectedVariant?.sku || null;
+    let weight = selectedVariant?.physicalProperties?.weight?.toString() || null;
+    let dimensions = null;
+    return props.children({
+        sku,
+        weight,
+        dimensions,
+        hasSku: !!sku,
+        hasWeight: !!weight,
+        hasDimensions: false,
+    });
+};

package/dist/react/ProductMediaGallery.d.ts

@@ -0,0 +1,128 @@
+/**
+ * Props for Viewport headless component
+ */
+export interface ViewportProps {
+    /** Render prop function that receives viewport data */
+    children: (props: ViewportRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Viewport component
+ */
+export interface ViewportRenderProps {
+    /** Current selected image */
+    image: any | null;
+    /** Image URL */
+    src: string | null;
+    /** Alt text for image */
+    alt: string;
+    /** Whether image is loading */
+    isLoading: boolean;
+    /** Current image index */
+    currentIndex: number;
+    /** Total number of images */
+    totalImages: number;
+}
+/**
+ * Headless component for displaying the main viewport image
+ */
+export declare const Viewport: (props: ViewportProps) => import("react").ReactNode;
+/**
+ * Props for Thumbnail headless component
+ */
+export interface ThumbnailProps {
+    /** Index of the media item */
+    index: number;
+    /** Render prop function that receives thumbnail data */
+    children: (props: ThumbnailRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Thumbnail component
+ */
+export interface ThumbnailRenderProps {
+    /** Media item data */
+    item: any | null;
+    /** Thumbnail image URL */
+    src: string | null;
+    /** Whether this thumbnail is currently active */
+    isActive: boolean;
+    /** Function to select this image */
+    onSelect: () => void;
+    /** Index of this thumbnail */
+    index: number;
+    /** Alt text for thumbnail */
+    alt: string;
+}
+/**
+ * Headless component for individual media thumbnail
+ */
+export declare const Thumbnail: (props: ThumbnailProps) => import("react").ReactNode;
+/**
+ * Props for Next headless component
+ */
+export interface NextProps {
+    /** Render prop function that receives next navigation data */
+    children: (props: NextRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Next component
+ */
+export interface NextRenderProps {
+    /** Function to go to next image */
+    onNext: () => void;
+    /** Whether there is a next image available */
+    canGoNext: boolean;
+    /** Current image index */
+    currentIndex: number;
+    /** Total number of images */
+    totalImages: number;
+}
+/**
+ * Headless component for next image navigation
+ */
+export declare const Next: (props: NextProps) => import("react").ReactNode;
+/**
+ * Props for Previous headless component
+ */
+export interface PreviousProps {
+    /** Render prop function that receives previous navigation data */
+    children: (props: PreviousRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Previous component
+ */
+export interface PreviousRenderProps {
+    /** Function to go to previous image */
+    onPrevious: () => void;
+    /** Whether there is a previous image available */
+    canGoPrevious: boolean;
+    /** Current image index */
+    currentIndex: number;
+    /** Total number of images */
+    totalImages: number;
+}
+/**
+ * Headless component for previous image navigation
+ */
+export declare const Previous: (props: PreviousProps) => import("react").ReactNode;
+/**
+ * Props for Indicator headless component
+ */
+export interface IndicatorProps {
+    /** Render prop function that receives indicator data */
+    children: (props: IndicatorRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Indicator component
+ */
+export interface IndicatorRenderProps {
+    /** Current image index (1-based for display) */
+    current: number;
+    /** Total number of images */
+    total: number;
+    /** Whether gallery has images */
+    hasImages: boolean;
+}
+/**
+ * Headless component for media gallery indicator/counter
+ */
+export declare const Indicator: (props: IndicatorProps) => import("react").ReactNode;

package/dist/react/ProductMediaGallery.js

@@ -0,0 +1,92 @@
+import { useService } from "@wix/services-manager-react";
+import { ProductMediaGalleryServiceDefinition } from "../services/product-media-gallery-service";
+/**
+ * Headless component for displaying the main viewport image
+ */
+export const Viewport = (props) => {
+    const mediaService = useService(ProductMediaGalleryServiceDefinition);
+    const currentIndex = mediaService.selectedImageIndex.get();
+    const isLoading = mediaService.isLoading.get();
+    const totalImages = mediaService.totalImages.get();
+    const productName = mediaService.productName.get();
+    const relevantImages = mediaService.relevantImages.get();
+    // Get the current image from the relevant images array
+    const src = relevantImages[currentIndex] || null;
+    const alt = productName || "Product image";
+    return props.children({
+        image: src,
+        src,
+        alt,
+        isLoading,
+        currentIndex,
+        totalImages,
+    });
+};
+/**
+ * Headless component for individual media thumbnail
+ */
+export const Thumbnail = (props) => {
+    const mediaService = useService(ProductMediaGalleryServiceDefinition);
+    const product = mediaService.product.get();
+    const currentIndex = mediaService.selectedImageIndex.get();
+    const productName = mediaService.productName.get();
+    const relevantImages = mediaService.relevantImages.get();
+    // Get the image source from the centralized relevant images
+    const src = relevantImages[props.index] || null;
+    const isActive = currentIndex === props.index;
+    const alt = `${productName || "Product"} image ${props.index + 1}`;
+    const onSelect = () => {
+        mediaService.setSelectedImageIndex(props.index);
+    };
+    return props.children({
+        item: product?.media?.main || null,
+        src,
+        isActive,
+        onSelect,
+        index: props.index,
+        alt,
+    });
+};
+/**
+ * Headless component for next image navigation
+ */
+export const Next = (props) => {
+    const mediaService = useService(ProductMediaGalleryServiceDefinition);
+    const currentIndex = mediaService.selectedImageIndex.get();
+    const totalImages = mediaService.totalImages.get();
+    const canGoNext = currentIndex < totalImages - 1;
+    return props.children({
+        onNext: mediaService.nextImage,
+        canGoNext,
+        currentIndex,
+        totalImages,
+    });
+};
+/**
+ * Headless component for previous image navigation
+ */
+export const Previous = (props) => {
+    const mediaService = useService(ProductMediaGalleryServiceDefinition);
+    const currentIndex = mediaService.selectedImageIndex.get();
+    const totalImages = mediaService.totalImages.get();
+    const canGoPrevious = currentIndex > 0;
+    return props.children({
+        onPrevious: mediaService.previousImage,
+        canGoPrevious,
+        currentIndex,
+        totalImages,
+    });
+};
+/**
+ * Headless component for media gallery indicator/counter
+ */
+export const Indicator = (props) => {
+    const mediaService = useService(ProductMediaGalleryServiceDefinition);
+    const currentIndex = mediaService.selectedImageIndex.get();
+    const totalImages = mediaService.totalImages.get();
+    return props.children({
+        current: currentIndex + 1,
+        total: totalImages,
+        hasImages: totalImages > 0,
+    });
+};

package/dist/react/ProductModifiers.d.ts

@@ -0,0 +1,156 @@
+import { productsV3 } from "@wix/stores";
+/**
+ * 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: productsV3.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: productsV3.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: productsV3.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
+ */
+export declare const Modifier: (props: ModifierProps) => import("react").ReactNode;
+/**
+ * Props for ModifierChoice headless component
+ */
+export interface ChoiceProps {
+    /** Product modifier data */
+    modifier: productsV3.ConnectedModifier;
+    /** Choice data */
+    choice: productsV3.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
+ */
+export declare const Choice: (props: ChoiceProps) => import("react").ReactNode;
+/**
+ * Props for ModifierFreeText headless component
+ */
+export interface FreeTextProps {
+    /** Product modifier data */
+    modifier: productsV3.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
+ */
+export declare const FreeText: (props: FreeTextProps) => import("react").ReactNode;
+/**
+ * Props for ModifierToggleFreeText headless component
+ */
+export interface ToggleFreeTextProps {
+    /** Product modifier data */
+    modifier: productsV3.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
+ */
+export declare const ToggleFreeText: (props: ToggleFreeTextProps) => import("react").ReactNode;

package/dist/react/ProductModifiers.js

@@ -0,0 +1,151 @@
+import { useState } from "react";
+import { useService } from "@wix/services-manager-react";
+import { ProductModifiersServiceDefinition } from "../services/product-modifiers-service";
+/**
+ * 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
+ */
+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 === "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
+ */
+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 === "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
+ */
+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
+ */
+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,
+    });
+};