Use Variant Options

1// Headless data layer for product option/variant/modifier picking.
2// Normalises raw Wix product options + modifiers into flat, render-agnostic structures so you
3// can build whatever UI you want (pills, radios, dropdowns, swatches) without touching the
4// data-edge-case logic (visible filtering, color detection, modifier key resolution).
5//
6// Usage:
7//   const { optionGroups, modifierGroups } = useVariantOptions(
8//     options, modifiers, selectedOptions, modifierValues
9//   );
10//   // then map over optionGroups/modifierGroups to render your own controls and call
11//   // selectOption(optionId, choiceId) / setModifier(key, value) from useProductDetail.
12
13import { useMemo } from "react";
14
15export function useVariantOptions(options, modifiers, selectedOptions, modifierValues) {
16  const optionGroups = useMemo(() =>
17    (options || []).map((option) => {
18      const rawChoices = option.choicesSettings?.choices || [];
19      // `visible: false` = a choice the merchant retired — filter it so buyers can't select it.
20      const choices = rawChoices
21        .filter((c) => c.visible !== false)
22        .map((c) => ({
23          choiceId:   c.choiceId,
24          name:       c.name,
25          colorCode:  c.colorCode || null,
26          // true when this choice should render as a colour swatch (circle) rather than a pill.
27          isColorSwatch: !!(
28            (option.optionRenderType === "COLOR_CHOICES" ||
29             option.optionRenderType === "SWATCH_CHOICES" ||
30             c.choiceType === "ONE_COLOR") &&
31            c.colorCode
32          ),
33          inStock:  c.inStock !== false,
34          selected: selectedOptions[option.id] === c.choiceId,
35        }));
36      return {
37        id:      option.id,
38        name:    option.name,
39        // true if ANY choice in this group is a colour swatch — lets you branch on group type.
40        isColor: choices.some((c) => c.isColorSwatch),
41        choices,
42      };
43    }),
44    [options, selectedOptions]
45  );
46
47  const modifierGroups = useMemo(() =>
48    (modifiers || []).map((m) => {
49      const isText = m.modifierRenderType === "FREE_TEXT";
50      const key = isText ? m.freeTextSettings?.key : m.key;
51      if (isText) {
52        return {
53          key,
54          name:      m.name,
55          mandatory: !!m.mandatory,
56          type:      "text",
57          value:     modifierValues[key] || "",
58        };
59      }
60      return {
61        key,
62        name:      m.name,
63        mandatory: !!m.mandatory,
64        type:      "choices",
65        choices:   (m.choicesSettings?.choices || []).map((c) => ({
66          key:      c.key,
67          name:     c.name,
68          selected: modifierValues[key] === c.key,
69        })),
70      };
71    }),
72    [modifiers, modifierValues]
73  );
74
75  return { optionGroups, modifierGroups };
76}