@wix/headless-stores 0.0.0

package/dist/react/core/ProductModifiers.js

@@ -0,0 +1,413 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useService, WixServices } from '@wix/services-manager-react';
+import { ProductModifiersServiceDefinition, ProductModifiersService, } from '../../services/product-modifiers-service.js';
+import { ModifierRenderType, } from '@wix/auto_sdk_stores_products-v-3';
+import { createServicesMap } from '@wix/services-manager';
+/**
+ * Root component that provides the ProductModifiers service context to its children.
+ * This component sets up the necessary services for managing product modifier functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ProductCustomization() {
+ *   return (
+ *     <ProductModifiers.Root>
+ *       <div>
+ *         <ProductModifiers.Modifiers>
+ *           {({ modifiers, hasModifiers, selectedModifiers, areAllRequiredModifiersFilled }) => (
+ *             <div>
+ *               {hasModifiers && (
+ *                 <div>
+ *                   <h3>Customize your product</h3>
+ *                   {modifiers.map(modifier => (
+ *                     <ProductModifiers.Modifier key={modifier.id} modifier={modifier}>
+ *                       {({ name, mandatory, hasChoices, choices, isFreeText }) => (
+ *                         <div className="modifier-field">
+ *                           <label>
+ *                             {name} {mandatory && <span className="required">*</span>}
+ *                           </label>
+ *                           {hasChoices && (
+ *                             <div className="choices">
+ *                               {choices.map(choice => (
+ *                                 <ProductModifiers.Choice key={choice.id} modifier={modifier} choice={choice}>
+ *                                   {({ value, isSelected, select }) => (
+ *                                     <button
+ *                                       onClick={select}
+ *                                       className={isSelected ? 'selected' : ''}
+ *                                     >
+ *                                       {value}
+ *                                     </button>
+ *                                   )}
+ *                                 </ProductModifiers.Choice>
+ *                               ))}
+ *                             </div>
+ *                           )}
+ *                           {isFreeText && (
+ *                             <ProductModifiers.FreeText modifier={modifier}>
+ *                               {({ value, onChange, placeholder, maxChars }) => (
+ *                                 <input
+ *                                   type="text"
+ *                                   value={value}
+ *                                   onChange={(e) => onChange(e.target.value)}
+ *                                   placeholder={placeholder}
+ *                                   maxLength={maxChars}
+ *                                 />
+ *                               )}
+ *                             </ProductModifiers.FreeText>
+ *                           )}
+ *                         </div>
+ *                       )}
+ *                     </ProductModifiers.Modifier>
+ *                   ))}
+ *                   {!areAllRequiredModifiersFilled && (
+ *                     <div className="warning">Please fill all required options</div>
+ *                   )}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </ProductModifiers.Modifiers>
+ *       </div>
+ *     </ProductModifiers.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductModifiersServiceDefinition, ProductModifiersService, {}), children: props.children }));
+}
+/**
+ * Custom hook to safely get the modifiers service
+ */
+function useModifiersService() {
+    try {
+        return useService(ProductModifiersServiceDefinition);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Headless component for all product modifiers
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ModifiersSelector() {
+ *   return (
+ *     <ProductModifiers.Modifiers>
+ *       {({ modifiers, hasModifiers, selectedModifiers, areAllRequiredModifiersFilled }) => (
+ *         <div>
+ *           {hasModifiers && (
+ *             <div>
+ *               <h3>Customize your product</h3>
+ *               {modifiers.map(modifier => (
+ *                 <div key={modifier.id}>
+ *                   <label>{modifier.name}</label>
+ *                   {modifier.required && <span>*</span>}
+ *                   {modifier.choices?.map(choice => (
+ *                     <label key={choice.id}>
+ *                       <input
+ *                         type={modifier.multiple ? 'checkbox' : 'radio'}
+ *                         name={modifier.id}
+ *                         value={choice.id}
+ *                         checked={selectedModifiers[modifier.id] === choice.id}
+ *                       />
+ *                       {choice.description} (+{choice.priceChange?.price})
+ *                     </label>
+ *                   ))}
+ *                 </div>
+ *               ))}
+ *               {!areAllRequiredModifiersFilled && (
+ *                 <div className="warning">Please fill all required options</div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </ProductModifiers.Modifiers>
+ *   );
+ * }
+ * ```
+ */
+export function 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
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ModifierField({ modifier }) {
+ *   return (
+ *     <ProductModifiers.Modifier modifier={modifier}>
+ *       {({ name, mandatory, hasChoices, choices, selectedValue, isFreeText, placeholder, maxChars }) => (
+ *         <div className="modifier-field">
+ *           <label>
+ *             {name} {mandatory && <span className="required">*</span>}
+ *           </label>
+ *           {hasChoices && (
+ *             <div className="choices">
+ *               {choices.map(choice => (
+ *                 <label key={choice.id}>
+ *                   <input
+ *                     type="radio"
+ *                     name={name}
+ *                     value={choice.name}
+ *                     checked={selectedValue?.choiceValue === choice.name}
+ *                   />
+ *                   {choice.description} (+{choice.priceChange?.price || '0'})
+ *                 </label>
+ *               ))}
+ *             </div>
+ *           )}
+ *           {isFreeText && (
+ *             <input
+ *               type="text"
+ *               placeholder={placeholder}
+ *               maxLength={maxChars}
+ *               value={selectedValue?.freeTextValue || ''}
+ *             />
+ *           )}
+ *         </div>
+ *       )}
+ *     </ProductModifiers.Modifier>
+ *   );
+ * }
+ * ```
+ */
+export function 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
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ModifierChoiceButton({ modifier, choice }) {
+ *   return (
+ *     <ProductModifiers.Choice modifier={modifier} choice={choice}>
+ *       {({ value, description, isSelected, select, colorCode }) => (
+ *         <button
+ *           onClick={select}
+ *           className={`choice-button ${isSelected ? 'selected' : ''}`}
+ *           style={colorCode ? { backgroundColor: colorCode } : {}}
+ *         >
+ *           {colorCode ? (
+ *             <div className="color-swatch" title={value} />
+ *           ) : (
+ *             <span>{value}</span>
+ *           )}
+ *           {description && <span className="description">{description}</span>}
+ *         </button>
+ *       )}
+ *     </ProductModifiers.Choice>
+ *   );
+ * }
+ * ```
+ */
+export function 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 select = () => {
+        modifiersService?.setModifierChoice(modifierName, choiceValue);
+    };
+    return props.children({
+        value,
+        description,
+        isSelected,
+        select,
+        modifierName,
+        choiceValue,
+        colorCode,
+    });
+}
+/**
+ * Headless component for free text modifier input
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function FreeTextModifier({ modifier }) {
+ *   return (
+ *     <ProductModifiers.FreeText modifier={modifier}>
+ *       {({ value, setText, mandatory, maxChars, placeholder, charCount, isOverLimit, modifierName }) => (
+ *         <div className="free-text-modifier">
+ *           <label>
+ *             {modifierName} {mandatory && <span className="required">*</span>}
+ *           </label>
+ *           <textarea
+ *             value={value}
+ *             setText={(e) => setText(e.target.value)}
+ *             placeholder={placeholder}
+ *             maxLength={maxChars}
+ *             className={isOverLimit ? 'over-limit' : ''}
+ *           />
+ *           {maxChars && (
+ *             <div className={`char-count ${isOverLimit ? 'over-limit' : ''}`}>
+ *               {charCount}/{maxChars}
+ *             </div>
+ *           )}
+ *         </div>
+ *       )}
+ *     </ProductModifiers.FreeText>
+ *   );
+ * }
+ * ```
+ */
+export function 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 setText = (newValue) => {
+        if (maxChars && newValue.length > maxChars)
+            return;
+        modifiersService?.setModifierFreeText(modifierName, newValue);
+    };
+    return props.children({
+        value,
+        setText,
+        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
+ * @example
+ * ```tsx
+ * import { ProductModifiers } from '@wix/stores/components';
+ *
+ * function ToggleFreeTextModifier({ modifier }) {
+ *   return (
+ *     <ProductModifiers.ToggleFreeText modifier={modifier}>
+ *       {({ isTextInputShown, toggle, mandatory, modifierName }) => (
+ *         <div className="toggle-free-text">
+ *           {!mandatory && (
+ *             <label>
+ *               <input
+ *                 type="checkbox"
+ *                 checked={isTextInputShown}
+ *                 onChange={toggle}
+ *               />
+ *               Add {modifierName}
+ *             </label>
+ *           )}
+ *           {isTextInputShown && (
+ *             <ProductModifiers.FreeText modifier={modifier}>
+ *               {(props) => (
+ *                 <textarea
+ *                   value={props.value}
+ *                   onChange={(e) => props.onChange(e.target.value)}
+ *                   placeholder={props.placeholder}
+ *                 />
+ *               )}
+ *             </ProductModifiers.FreeText>
+ *           )}
+ *         </div>
+ *       )}
+ *     </ProductModifiers.ToggleFreeText>
+ *   );
+ * }
+ * ```
+ */
+export function ToggleFreeText(props) {
+    const modifiersService = useModifiersService();
+    const { modifier } = props;
+    const modifierName = modifier.name || '';
+    const mandatory = modifier.mandatory || false;
+    const [isTextInputShown, setIsTextInputShown] = useState(mandatory);
+    const toggle = () => {
+        const newState = !isTextInputShown;
+        setIsTextInputShown(newState);
+        if (!newState) {
+            modifiersService?.clearModifier(modifierName);
+        }
+    };
+    return props.children({
+        isTextInputShown,
+        toggle,
+        mandatory,
+        modifierName,
+    });
+}