@wix/headless-stores 0.0.52 → 0.0.53

package/dist/react/Product.js

@@ -1,10 +1,52 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useService, WixServices } from "@wix/services-manager-react";
-import { ProductServiceDefinition, ProductService, } from "../services/product-service.js";
-import { createServicesMap } from "@wix/services-manager";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { renderAsChild } from '../utils/index.js';
+import * as CoreProduct from './core/Product.js';
+import * as ProductVariantSelector from './core/ProductVariantSelector.js';
+import * as ProductModifiers from './core/ProductModifiers.js';
+import * as SelectedVariant from './core/SelectedVariant.js';
+import * as Option from './Option.js';
+import { AsContent } from './types.js';
+const VariantsContext = React.createContext(null);
 /**
- * Root component that provides the Product service context to its children.
- * This component sets up the necessary services for rendering and managing a single product's data.
+ * Hook to access variants context
+ */
+export function useVariantsContext() {
+    const context = React.useContext(VariantsContext);
+    if (!context) {
+        throw new Error('useVariantsContext must be used within a Product.Variants component');
+    }
+    return context;
+}
+const ModifiersContext = React.createContext(null);
+/**
+ * Hook to access modifiers context
+ */
+export function useModifiersContext() {
+    const context = React.useContext(ModifiersContext);
+    if (!context) {
+        throw new Error('useModifiersContext must be used within a Product.Modifiers component');
+    }
+    return context;
+}
+var TestIds;
+(function (TestIds) {
+    TestIds["productRoot"] = "product-root";
+    TestIds["productName"] = "product-name";
+    TestIds["productDescription"] = "product-description";
+    TestIds["productPrice"] = "product-price";
+    TestIds["productCompareAtPrice"] = "product-compare-at-price";
+    TestIds["productVariants"] = "product-variants";
+    TestIds["productVariantOptions"] = "product-variant-options";
+    TestIds["productVariantOption"] = "product-variant-option";
+    TestIds["productModifiers"] = "product-modifiers";
+    TestIds["productModifierOptions"] = "product-modifier-options";
+    TestIds["productModifierOption"] = "product-modifier-option";
+})(TestIds || (TestIds = {}));
+/**
+ * Root component that provides all necessary service contexts for a complete product experience.
+ * This composite component combines Product, ProductVariantSelector, ProductModifiers, and SelectedVariant
+ * functionality following the documented API patterns with proper data attributes.
  *
  * @order 1
  * @component
@@ -12,115 +54,486 @@ import { createServicesMap } from "@wix/services-manager";
  * ```tsx
  * import { Product } from '@wix/stores/components';
  *
- * function ProductPage() {
+ * function ProductPage({ product }) {
  *   return (
- *     <Product.Root productServiceConfig={{ product: myProduct }}>
- *       <div>
- *         <Product.Name>
- *           {({ name }) => (
- *             <h1
- *               className="text-4xl font-bold text-content-primary mb-4"
- *               data-testid="product-name"
- *             >
- *               {name}
- *             </h1>
- *           )}
- *         </Product.Name>
- *       </div>
+ *     <Product.Root product={product}>
+ *       <Product.Name className="text-4xl font-bold" />
  *     </Product.Root>
  *   );
  * }
  * ```
  */
 export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductServiceDefinition, ProductService, props.productServiceConfig), children: props.children }));
+    return (_jsx(CoreProduct.Root, { productServiceConfig: { product: props.product }, "data-testid": TestIds.productRoot, children: _jsx(ProductVariantSelector.Root, { children: _jsx(ProductModifiers.Root, { children: _jsx(SelectedVariant.Root, { children: props.children }) }) }) }));
 }
 /**
- * Headless component for product name display
+ * Displays the product name with customizable rendering following the documented API.
  *
  * @component
  * @example
  * ```tsx
- * import { Product } from '@wix/stores/components';
+ * // Default usage
+ * <Product.Name className="text-4xl font-bold" />
  *
- * function ProductHeader() {
- *   return (
- *     <Product.Name>
- *       {({ name }) => (
- *         <h1>{name}</h1>
- *       )}
- *     </Product.Name>
- *   );
- * }
+ * // asChild with primitive
+ * <Product.Name asChild>
+ *   <h1 className="text-4xl font-bold" />
+ * </Product.Name>
+ *
+ * // asChild with react component
+ * <Product.Name asChild>
+ *   {React.forwardRef(({name, ...props}, ref) => (
+ *     <h1 ref={ref} {...props} className="text-4xl font-bold">
+ *       {name}
+ *     </h1>
+ *   ))}
+ * </Product.Name>
  * ```
  */
-export function Name(props) {
-    const service = useService(ProductServiceDefinition);
-    const product = service.product.get();
-    const name = product.name;
-    return props.children({
-        name,
-    });
-}
+export const Name = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreProduct.Name, { children: ({ name }) => {
+            const attributes = {
+                'data-testid': TestIds.productName,
+            };
+            if (asChild) {
+                const rendered = renderAsChild({
+                    children,
+                    props: { name },
+                    ref,
+                    content: name,
+                    attributes,
+                });
+                if (rendered)
+                    return rendered;
+            }
+            return (_jsx("div", { className: className, ...attributes, children: name }));
+        } }));
+});
 /**
- * Headless component for product description display
+ * Displays the product description with customizable rendering and format options following the documented API.
  *
  * @component
  * @example
  * ```tsx
- * import { Product } from '@wix/stores/components';
+ * // Default usage (plain text)
+ * <Product.Description className="text-content-secondary" />
  *
- * function ProductDescription() {
- *   return (
- *     <Product.Description>
- *       {({ plainDescription, description }) => (
- *         <div>
- *           {plainDescription && (
- *             <div
- *               dangerouslySetInnerHTML={{
- *                 __html: plainDescription,
- *               }}
- *             />
- *           )}
- *           {description && (
- *             <div>Rich content description available</div>
- *           )}
- *         </div>
- *       )}
- *     </Product.Description>
- *   );
- * }
+ * // HTML content
+ * <Product.Description as="html" className="prose" />
+ *
+ * // asChild with custom rendering
+ * <Product.Description as="html" asChild>
+ *   {({ description }) => (
+ *     <div
+ *       className="text-content-secondary"
+ *       dangerouslySetInnerHTML={{ __html: description }}
+ *     />
+ *   )}
+ * </Product.Description>
  * ```
  */
-export function Description(props) {
-    const service = useService(ProductServiceDefinition);
-    const product = service.product.get();
-    const descriptionRichContent = product.description;
-    const plainDescription = product.plainDescription;
-    return props.children({
-        description: descriptionRichContent,
-        plainDescription: plainDescription,
-    });
-}
-export function Media(props) {
-    const service = useService(ProductServiceDefinition);
-    const product = service.product.get();
-    const media = product.media?.itemsInfo?.items ?? [];
-    return props.children({
-        media,
-    });
-}
-export function Content(props) {
-    const service = useService(ProductServiceDefinition);
-    const product = service.product.get();
-    return props.children({
-        product,
-    });
-}
-export function Loading(props) {
-    const service = useService(ProductServiceDefinition);
-    const isLoading = service.isLoading.get();
-    return props.children({
-        isLoading,
-    });
-}
+export const Description = React.forwardRef((props, ref) => {
+    const { asChild, children, className, as = AsContent.Plain } = props;
+    return (_jsx(CoreProduct.Description, { children: ({ description: richDescription, plainDescription }) => {
+            const attributes = {
+                'data-testid': TestIds.productDescription,
+            };
+            // Determine which description to use based on the 'as' prop
+            let description;
+            switch (as) {
+                case AsContent.Html:
+                    description = plainDescription || '';
+                    break;
+                case AsContent.Ricos:
+                    description = JSON.stringify(richDescription) || '';
+                    break;
+                case AsContent.Plain:
+                default:
+                    // For plain text, we'll strip HTML tags from plainDescription
+                    description = plainDescription
+                        ? plainDescription.replace(/<[^>]*>/g, '')
+                        : '';
+                    break;
+            }
+            if (asChild) {
+                const rendered = renderAsChild({
+                    children,
+                    props: { description },
+                    ref,
+                    content: description,
+                    attributes,
+                });
+                if (rendered)
+                    return rendered;
+            }
+            // Default rendering based on format
+            if (as === AsContent.Html) {
+                return (_jsx("div", { className: className, ...attributes, dangerouslySetInnerHTML: { __html: description } }));
+            }
+            return (_jsx("div", { className: className, ...attributes, children: description }));
+        } }));
+});
+/**
+ * Displays the current product price with customizable rendering following the documented API.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.Price className="text-3xl font-bold text-content-primary data-[discounted]:text-brand-primary" />
+ *
+ * // asChild with primitive
+ * <Product.Price asChild>
+ *   <span className="text-3xl font-bold text-content-primary" />
+ * </Product.Price>
+ *
+ * // asChild with react component
+ * <Product.Price asChild>
+ *   {React.forwardRef(({price, formattedPrice, ...props}, ref) => (
+ *     <span ref={ref} {...props} className="text-3xl font-bold text-content-primary">
+ *       {formattedPrice}
+ *     </span>
+ *   ))}
+ * </Product.Price>
+ * ```
+ */
+export const Price = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(SelectedVariant.Price, { children: ({ price, compareAtPrice }) => {
+            const attributes = {
+                'data-testid': TestIds.productPrice,
+                'data-discounted': compareAtPrice !== null,
+            };
+            const priceData = {
+                price,
+                formattedPrice: price,
+            };
+            if (asChild) {
+                const rendered = renderAsChild({
+                    children,
+                    props: priceData,
+                    ref,
+                    content: price,
+                    attributes,
+                });
+                if (rendered)
+                    return rendered;
+            }
+            return (_jsx("span", { className: className, ...attributes, ref: ref, children: price }));
+        } }));
+});
+/**
+ * Displays the compare-at (original) price when on sale with customizable rendering following the documented API.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage (only shows when on sale)
+ * <Product.CompareAtPrice className="text-lg text-content-faded line-through hidden data-[discounted]:inline" />
+ *
+ * // asChild with primitive
+ * <Product.CompareAtPrice asChild>
+ *   <span className="text-lg text-content-faded line-through" />
+ * </Product.CompareAtPrice>
+ *
+ * // asChild with react component
+ * <Product.CompareAtPrice asChild>
+ *   {React.forwardRef(({formattedPrice, ...props}, ref) => (
+ *     <span
+ *       ref={ref}
+ *       {...props}
+ *       className="hidden data-[discounted]:inline text-lg text-content-faded line-through"
+ *     >
+ *       Was: {formattedPrice}
+ *     </span>
+ *   ))}
+ * </Product.CompareAtPrice>
+ * ```
+ */
+export const CompareAtPrice = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const testId = TestIds.productCompareAtPrice;
+    return (_jsx(SelectedVariant.Price, { children: ({ compareAtPrice }) => {
+            const attributes = {
+                'data-testid': testId,
+                'data-discounted': compareAtPrice !== null,
+            };
+            // Don't render anything if there's no compare-at price
+            if (!compareAtPrice) {
+                return null;
+            }
+            const priceData = {
+                price: compareAtPrice,
+                formattedPrice: compareAtPrice,
+            };
+            if (asChild) {
+                const rendered = renderAsChild({
+                    children,
+                    props: priceData,
+                    ref,
+                    content: compareAtPrice,
+                    attributes,
+                });
+                if (rendered)
+                    return rendered;
+            }
+            return (_jsx("span", { className: className, ...attributes, ref: ref, children: compareAtPrice }));
+        } }));
+});
+/**
+ * Container for product variant selection system.
+ * Does not render when there are no variants.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.Variants>
+ *   <Product.VariantOptions>
+ *     <Product.VariantOptionRepeater>
+ *       <Option.Name className="text-lg font-medium mb-3" />
+ *       <Option.Choices>
+ *         <Option.ChoiceRepeater>
+ *           <Choice.Text className="px-4 py-2 border rounded-lg" />
+ *           <Choice.Color className="w-10 h-10 rounded-full border-4" />
+ *         </Option.ChoiceRepeater>
+ *       </Option.Choices>
+ *     </Product.VariantOptionRepeater>
+ *   </Product.VariantOptions>
+ * </Product.Variants>
+ *
+ * // asChild with primitive
+ * <Product.Variants asChild>
+ *   <section className="variant-section">
+ *     <Product.VariantOptions>
+ *       // variant options
+ *     </Product.VariantOptions>
+ *   </section>
+ * </Product.Variants>
+ *
+ * // asChild with react component
+ * <Product.Variants asChild>
+ *   {React.forwardRef(({hasOptions, ...props}, ref) => (
+ *     <section ref={ref} {...props} className="variant-section">
+ *       {hasOptions && <h3>Choose Options</h3>}
+ *       {props.children}
+ *     </section>
+ *   ))}
+ * </Product.Variants>
+ * ```
+ */
+export const Variants = React.forwardRef((props, ref) => {
+    const { asChild, children } = props;
+    return (_jsx(ProductVariantSelector.Options, { children: ({ hasOptions, options }) => {
+            if (!hasOptions)
+                return null;
+            const contextValue = {
+                hasOptions,
+                options,
+            };
+            const attributes = {
+                'data-testid': TestIds.productVariants,
+            };
+            const content = (_jsx(VariantsContext.Provider, { value: contextValue, children: typeof children === 'function'
+                    ? null
+                    : children }));
+            if (asChild) {
+                const rendered = renderAsChild({
+                    children,
+                    props: { hasOptions },
+                    ref,
+                    content,
+                    attributes,
+                });
+                if (rendered)
+                    return rendered;
+            }
+            return (_jsx("div", { ...attributes, ref: ref, children: content }));
+        } }));
+});
+/**
+ * Component that provides access to variant options.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.VariantOptions emptyState={<div>No options available</div>}>
+ *   <Product.VariantOptionRepeater>
+ *     <Option.Name />
+ *     <Option.Choices>
+ *       <Option.ChoiceRepeater>
+ *         <Choice.Text />
+ *       </Option.ChoiceRepeater>
+ *     </Option.Choices>
+ *   </Product.VariantOptionRepeater>
+ * </Product.VariantOptions>
+ *
+ * // Simple container usage
+ * <Product.VariantOptions emptyState={<div>No options</div>}>
+ *   <div className="options-container">
+ *     <Product.VariantOptionRepeater>
+ *       // option content
+ *     </Product.VariantOptionRepeater>
+ *   </div>
+ * </Product.VariantOptions>
+ * ```
+ */
+export const VariantOptions = React.forwardRef((props, ref) => {
+    const { children, emptyState } = props;
+    const { hasOptions } = useVariantsContext();
+    if (!hasOptions) {
+        return emptyState || null;
+    }
+    const attributes = {
+        'data-testid': TestIds.productVariantOptions,
+    };
+    return (_jsx("div", { ...attributes, ref: ref, children: children }));
+});
+/**
+ * Repeater component that renders children for each variant option.
+ *
+ * @component
+ */
+export const VariantOptionRepeater = React.forwardRef((props, _ref) => {
+    const { children } = props;
+    const { hasOptions, options } = useVariantsContext();
+    if (!hasOptions)
+        return null;
+    return (_jsx(_Fragment, { children: options.map((option) => {
+            return (_jsx(ProductVariantSelector.Option, { option: option, children: (optionData) => (_jsx(Option.Root, { option: {
+                        ...optionData,
+                        mandatory: false,
+                    }, children: children })) }, option._id));
+        }) }));
+});
+/**
+ * Container for product modifier system.
+ * Does not render when there are no modifiers.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.Modifiers>
+ *   <Product.ModifierOptions>
+ *     <Product.ModifierOptionRepeater>
+ *       <Option.Name className="text-lg font-medium mb-3" />
+ *       <Option.Choices>
+ *         <Option.ChoiceRepeater>
+ *           <Choice.Text className="px-4 py-2 border rounded-lg" />
+ *           <Choice.Color className="w-10 h-10 rounded-full border-4" />
+ *           <Choice.FreeText className="w-full p-3 border rounded-lg resize-none" />
+ *         </Option.ChoiceRepeater>
+ *       </Option.Choices>
+ *     </Product.ModifierOptionRepeater>
+ *   </Product.ModifierOptions>
+ * </Product.Modifiers>
+ *
+ * // asChild with primitive
+ * <Product.Modifiers asChild>
+ *   <section className="modifier-section">
+ *     <Product.ModifierOptions>
+ *       // modifier options
+ *     </Product.ModifierOptions>
+ *   </section>
+ * </Product.Modifiers>
+ *
+ * // asChild with react component
+ * <Product.Modifiers asChild>
+ *   {React.forwardRef(({hasModifiers, ...props}, ref) => (
+ *     <section ref={ref} {...props} className="modifier-section">
+ *       {hasModifiers && <h3>Customize Your Product</h3>}
+ *       {props.children}
+ *     </section>
+ *   ))}
+ * </Product.Modifiers>
+ * ```
+ */
+export const Modifiers = React.forwardRef((props, ref) => {
+    const { asChild, children } = props;
+    return (_jsx(ProductModifiers.Modifiers, { children: ({ hasModifiers, modifiers }) => {
+            if (!hasModifiers)
+                return null;
+            const contextValue = {
+                hasModifiers,
+                modifiers,
+            };
+            const attributes = {
+                'data-testid': TestIds.productModifiers,
+            };
+            const content = (_jsx(ModifiersContext.Provider, { value: contextValue, children: typeof children === 'function'
+                    ? null
+                    : children }));
+            if (asChild) {
+                const rendered = renderAsChild({
+                    children,
+                    props: { hasModifiers },
+                    ref,
+                    content,
+                    attributes,
+                });
+                if (rendered)
+                    return rendered;
+            }
+            return (_jsx("div", { ...attributes, ref: ref, children: content }));
+        } }));
+});
+/**
+ * Component that provides access to modifier options.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.ModifierOptions emptyState={<div>No options available</div>}>
+ *   <Product.ModifierOptionRepeater>
+ *     <Option.Name />
+ *     <Option.Choices>
+ *       <Option.ChoiceRepeater>
+ *         <Choice.Text />
+ *         <Choice.Color />
+ *         <Choice.FreeText />
+ *       </Option.ChoiceRepeater>
+ *     </Option.Choices>
+ *   </Product.ModifierOptionRepeater>
+ * </Product.ModifierOptions>
+ *
+ * // Simple container usage
+ * <Product.ModifierOptions emptyState={<div>No options</div>}>
+ *   <div className="options-container">
+ *     <Product.ModifierOptionRepeater>
+ *       // option content
+ *     </Product.ModifierOptionRepeater>
+ *   </div>
+ * </Product.ModifierOptions>
+ * ```
+ */
+export const ModifierOptions = React.forwardRef((props, ref) => {
+    const { children, emptyState } = props;
+    const { hasModifiers } = useModifiersContext();
+    if (!hasModifiers) {
+        return emptyState || null;
+    }
+    const attributes = {
+        'data-testid': TestIds.productModifierOptions,
+    };
+    return (_jsx("div", { ...attributes, ref: ref, children: children }));
+});
+/**
+ * Repeater component that renders children for each modifier option.
+ *
+ * @component
+ */
+export const ModifierOptionRepeater = React.forwardRef((props, _ref) => {
+    const { children, allowedTypes = ['color', 'text', 'free-text'] } = props;
+    const { hasModifiers, modifiers } = useModifiersContext();
+    if (!hasModifiers)
+        return null;
+    return (_jsx(_Fragment, { children: modifiers.map((modifier) => {
+            return (_jsx(ProductModifiers.Modifier, { modifier: modifier, children: (modifierData) => (_jsx(Option.Root, { option: {
+                        ...modifierData,
+                    }, allowedTypes: allowedTypes, children: children })) }, modifier._id));
+        }) }));
+});

package/dist/react/{BuyNow.js → core/BuyNow.js}

@@ -1,5 +1,5 @@
-import { useService } from "@wix/services-manager-react";
-import { BuyNowServiceDefinition } from "../services/buy-now-service.js";
+import { useService } from '@wix/services-manager-react';
+import { BuyNowServiceDefinition } from '../../services/buy-now-service.js';
 /**
  * A headless component that provides buy now functionality using the render props pattern.
  *