@wix/headless-stores 0.0.9 → 0.0.10

package/cjs/dist/react/Product.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Details = exports.Description = exports.Name = void 0;
+const services_manager_react_1 = require("@wix/services-manager-react");
+const product_service_1 = require("../services/product-service");
+const selected_variant_service_1 = require("../services/selected-variant-service");
+/**
+ * Headless component for product name display
+ */
+const Name = (props) => {
+    const service = (0, services_manager_react_1.useService)(product_service_1.ProductServiceDefinition);
+    const product = service.product.get();
+    const name = product?.name || "";
+    return props.children({
+        name,
+        hasName: !!name,
+    });
+};
+exports.Name = Name;
+/**
+ * Headless component for product description display
+ */
+const Description = (props) => {
+    const service = (0, services_manager_react_1.useService)(product_service_1.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,
+    });
+};
+exports.Description = Description;
+/**
+ * Headless component for product details display
+ */
+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;
+    let dimensions = null;
+    return props.children({
+        sku,
+        weight,
+        dimensions,
+        hasSku: !!sku,
+        hasWeight: !!weight,
+        hasDimensions: false,
+    });
+};
+exports.Details = Details;

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

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Indicator = exports.Previous = exports.Next = exports.Thumbnail = exports.Viewport = void 0;
+const services_manager_react_1 = require("@wix/services-manager-react");
+const product_media_gallery_service_1 = require("../services/product-media-gallery-service");
+/**
+ * Headless component for displaying the main viewport image
+ */
+const Viewport = (props) => {
+    const mediaService = (0, services_manager_react_1.useService)(product_media_gallery_service_1.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,
+    });
+};
+exports.Viewport = Viewport;
+/**
+ * Headless component for individual media thumbnail
+ */
+const Thumbnail = (props) => {
+    const mediaService = (0, services_manager_react_1.useService)(product_media_gallery_service_1.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,
+    });
+};
+exports.Thumbnail = Thumbnail;
+/**
+ * Headless component for next image navigation
+ */
+const Next = (props) => {
+    const mediaService = (0, services_manager_react_1.useService)(product_media_gallery_service_1.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,
+    });
+};
+exports.Next = Next;
+/**
+ * Headless component for previous image navigation
+ */
+const Previous = (props) => {
+    const mediaService = (0, services_manager_react_1.useService)(product_media_gallery_service_1.ProductMediaGalleryServiceDefinition);
+    const currentIndex = mediaService.selectedImageIndex.get();
+    const totalImages = mediaService.totalImages.get();
+    const canGoPrevious = currentIndex > 0;
+    return props.children({
+        onPrevious: mediaService.previousImage,
+        canGoPrevious,
+        currentIndex,
+        totalImages,
+    });
+};
+exports.Previous = Previous;
+/**
+ * Headless component for media gallery indicator/counter
+ */
+const Indicator = (props) => {
+    const mediaService = (0, services_manager_react_1.useService)(product_media_gallery_service_1.ProductMediaGalleryServiceDefinition);
+    const currentIndex = mediaService.selectedImageIndex.get();
+    const totalImages = mediaService.totalImages.get();
+    return props.children({
+        current: currentIndex + 1,
+        total: totalImages,
+        hasImages: totalImages > 0,
+    });
+};
+exports.Indicator = Indicator;

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

@@ -0,0 +1,159 @@
+"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");
+/**
+ * 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
+ */
+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,
+    });
+};
+exports.Modifier = Modifier;
+/**
+ * Headless component for individual modifier choice selection
+ */
+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,
+    });
+};
+exports.Choice = Choice;
+/**
+ * Headless component for free text modifier input
+ */
+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
+ */
+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;