@cimplify/sdk 0.8.14 → 0.9.0

package/dist/react.js

@@ -612,6 +612,12 @@ function normalizeCatalogueProductPayload(product) {
       if (variantAdjustment === void 0 || variantAdjustment === null || variantAdjustment === "") {
         normalizedVariant["price_adjustment"] = readFinalPrice(normalizedVariant["price_info"]) ?? "0";
       }
+      if (!normalizedVariant["name"]) {
+        const attrs = normalizedVariant["display_attributes"];
+        if (Array.isArray(attrs) && attrs.length > 0) {
+          normalizedVariant["name"] = attrs.map((a) => a.value_name).filter(Boolean).join(" / ");
+        }
+      }
       return normalizedVariant;
     });
   }
@@ -6778,16 +6784,940 @@ function useCheckout() {
   );
   return { submit, process, isLoading };
 }
+function QuantitySelector({
+  value,
+  onChange,
+  min = 1,
+  max,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-quantity": true, className, style: { display: "inline-flex", alignItems: "center", gap: "0.5rem" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(Math.max(min, value - 1)),
+        disabled: value <= min,
+        "aria-label": "Decrease quantity",
+        "data-cimplify-quantity-decrement": true,
+        children: "\u2212"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-quantity-value": true, "aria-live": "polite", children: value }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(max != null ? Math.min(max, value + 1) : value + 1),
+        disabled: max != null && value >= max,
+        "aria-label": "Increase quantity",
+        "data-cimplify-quantity-increment": true,
+        children: "+"
+      }
+    )
+  ] });
+}
+
+// src/utils/variant.ts
+function getVariantDisplayName(variant) {
+  if (variant.name) return variant.name;
+  if (variant.display_attributes?.length) {
+    return variant.display_attributes.map((a) => a.value_name).join(" / ");
+  }
+  return variant.is_default ? "Default" : "Option";
+}
+function VariantSelector({
+  variants,
+  variantAxes,
+  basePrice,
+  selectedVariantId,
+  onVariantChange,
+  className
+}) {
+  const [axisSelections, setAxisSelections] = React3.useState({});
+  const initialized = React3.useRef(false);
+  React3.useEffect(() => {
+    initialized.current = false;
+  }, [variants]);
+  React3.useEffect(() => {
+    if (initialized.current) return;
+    if (!variants || variants.length === 0) return;
+    const defaultVariant = variants.find((v) => v.is_default) || variants[0];
+    if (!defaultVariant) return;
+    initialized.current = true;
+    onVariantChange(defaultVariant.id, defaultVariant);
+    if (defaultVariant.display_attributes) {
+      const initial = {};
+      for (const attr of defaultVariant.display_attributes) {
+        initial[attr.axis_id] = attr.value_id;
+      }
+      setAxisSelections(initial);
+    }
+  }, [variants, onVariantChange]);
+  React3.useEffect(() => {
+    if (!initialized.current) return;
+    if (!variantAxes || variantAxes.length === 0) return;
+    const match = variants.find((v) => {
+      if (!v.display_attributes) return false;
+      return v.display_attributes.every(
+        (attr) => axisSelections[attr.axis_id] === attr.value_id
+      );
+    });
+    if (match && match.id !== selectedVariantId) {
+      onVariantChange(match.id, match);
+    }
+  }, [axisSelections, variants, variantAxes, selectedVariantId, onVariantChange]);
+  if (!variants || variants.length <= 1) {
+    return null;
+  }
+  const basePriceNum = basePrice != null ? parsePrice(basePrice) : 0;
+  if (variantAxes && variantAxes.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-variant-selector": true, className, children: variantAxes.map((axis) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-variant-axis": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { "data-cimplify-variant-axis-label": true, children: axis.name }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-variant-axis-options": true, children: axis.values.map((value) => {
+        const isSelected = axisSelections[axis.id] === value.id;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-selected": isSelected,
+            onClick: () => {
+              setAxisSelections((prev) => ({
+                ...prev,
+                [axis.id]: value.id
+              }));
+            },
+            "data-cimplify-variant-option": true,
+            "data-selected": isSelected || void 0,
+            children: value.name
+          },
+          value.id
+        );
+      }) })
+    ] }, axis.id)) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-variant-selector": true, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { "data-cimplify-variant-list-label": true, children: "Options" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-variant-list": true, children: variants.map((variant) => {
+      const isSelected = selectedVariantId === variant.id;
+      const adjustment = parsePrice(variant.price_adjustment);
+      const effectivePrice = basePriceNum + adjustment;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-selected": isSelected,
+          onClick: () => onVariantChange(variant.id, variant),
+          "data-cimplify-variant-option": true,
+          "data-selected": isSelected || void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-variant-name": true, children: getVariantDisplayName(variant) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-variant-pricing": true, children: [
+              adjustment !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-variant-adjustment": true, children: [
+                adjustment > 0 ? "+" : "",
+                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: effectivePrice })
+            ] })
+          ]
+        },
+        variant.id
+      );
+    }) })
+  ] });
+}
+function AddOnSelector({
+  addOns,
+  selectedOptions,
+  onOptionsChange,
+  className
+}) {
+  const isOptionSelected = React3.useCallback(
+    (optionId) => selectedOptions.includes(optionId),
+    [selectedOptions]
+  );
+  const toggleOption = React3.useCallback(
+    (addOn, optionId) => {
+      const isSelected = selectedOptions.includes(optionId);
+      if (addOn.is_mutually_exclusive || !addOn.is_multiple_allowed) {
+        const groupOptionIds = new Set(addOn.options.map((o) => o.id));
+        const withoutGroup = selectedOptions.filter((id) => !groupOptionIds.has(id));
+        if (isSelected) {
+          if (!addOn.is_required) {
+            onOptionsChange(withoutGroup);
+          }
+        } else {
+          onOptionsChange([...withoutGroup, optionId]);
+        }
+      } else {
+        if (isSelected) {
+          onOptionsChange(selectedOptions.filter((id) => id !== optionId));
+        } else {
+          const currentCount = selectedOptions.filter(
+            (id) => addOn.options.some((o) => o.id === id)
+          ).length;
+          if (addOn.max_selections && currentCount >= addOn.max_selections) {
+            return;
+          }
+          onOptionsChange([...selectedOptions, optionId]);
+        }
+      }
+    },
+    [selectedOptions, onOptionsChange]
+  );
+  if (!addOns || addOns.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-addon-selector": true, className, children: addOns.map((addOn) => {
+    const currentSelections = selectedOptions.filter(
+      (id) => addOn.options.some((o) => o.id === id)
+    ).length;
+    const minMet = !addOn.min_selections || currentSelections >= addOn.min_selections;
+    const isSingleSelect = addOn.is_mutually_exclusive || !addOn.is_multiple_allowed;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-addon-group": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-addon-header": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-addon-name": true, children: [
+            addOn.name,
+            addOn.is_required && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-addon-required": true, children: " *" })
+          ] }),
+          (addOn.min_selections || addOn.max_selections) && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-addon-constraint": true, children: addOn.min_selections && addOn.max_selections ? `Choose ${addOn.min_selections}\u2013${addOn.max_selections}` : addOn.min_selections ? `Choose at least ${addOn.min_selections}` : `Choose up to ${addOn.max_selections}` })
+        ] }),
+        !minMet && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-addon-validation": true, children: "Required" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-addon-options": true, children: addOn.options.map((option) => {
+        const isSelected = isOptionSelected(option.id);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            role: isSingleSelect ? "radio" : "checkbox",
+            "aria-checked": isSelected,
+            onClick: () => toggleOption(addOn, option.id),
+            "data-cimplify-addon-option": true,
+            "data-selected": isSelected || void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-addon-option-name": true, children: option.name }),
+              option.default_price && option.default_price !== "0" && /* @__PURE__ */ jsxRuntime.jsx(
+                Price,
+                {
+                  amount: option.default_price,
+                  prefix: "+"
+                }
+              )
+            ]
+          },
+          option.id
+        );
+      }) })
+    ] }, addOn.id);
+  }) });
+}
+function CompositeSelector({
+  productId,
+  onSelectionsChange,
+  onPriceChange,
+  onReady,
+  className
+}) {
+  const { composite, isLoading, error, calculatePrice, priceResult, isPriceLoading } = useComposite(productId);
+  const [groupSelections, setGroupSelections] = React3.useState({});
+  const selections = React3.useMemo(() => {
+    const result = [];
+    for (const groupSels of Object.values(groupSelections)) {
+      for (const [componentId, qty] of Object.entries(groupSels)) {
+        if (qty > 0) {
+          result.push({ component_id: componentId, quantity: qty });
+        }
+      }
+    }
+    return result;
+  }, [groupSelections]);
+  React3.useEffect(() => {
+    onSelectionsChange(selections);
+  }, [selections, onSelectionsChange]);
+  React3.useEffect(() => {
+    onPriceChange?.(priceResult);
+  }, [priceResult, onPriceChange]);
+  const allGroupsSatisfied = React3.useMemo(() => {
+    if (!composite) return false;
+    for (const group of composite.groups) {
+      const groupSels = groupSelections[group.id] || {};
+      const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);
+      if (totalSelected < group.min_selections) return false;
+    }
+    return true;
+  }, [composite, groupSelections]);
+  React3.useEffect(() => {
+    onReady?.(allGroupsSatisfied);
+  }, [allGroupsSatisfied, onReady]);
+  React3.useEffect(() => {
+    if (allGroupsSatisfied && selections.length > 0) {
+      void calculatePrice(selections);
+    }
+  }, [selections, allGroupsSatisfied, calculatePrice]);
+  const toggleComponent = React3.useCallback(
+    (group, component) => {
+      setGroupSelections((prev) => {
+        const groupSels = { ...prev[group.id] || {} };
+        const currentQty = groupSels[component.id] || 0;
+        if (currentQty > 0) {
+          if (group.min_selections > 0) {
+            const totalOthers = Object.entries(groupSels).filter(([id]) => id !== component.id).reduce((sum, [, q]) => sum + q, 0);
+            if (totalOthers < group.min_selections) {
+              return prev;
+            }
+          }
+          delete groupSels[component.id];
+        } else {
+          const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);
+          if (group.max_selections && totalSelected >= group.max_selections) {
+            if (group.max_selections === 1) {
+              return { ...prev, [group.id]: { [component.id]: 1 } };
+            }
+            return prev;
+          }
+          groupSels[component.id] = 1;
+        }
+        return { ...prev, [group.id]: groupSels };
+      });
+    },
+    []
+  );
+  const updateQuantity = React3.useCallback(
+    (group, componentId, delta) => {
+      setGroupSelections((prev) => {
+        const groupSels = { ...prev[group.id] || {} };
+        const current = groupSels[componentId] || 0;
+        const next = Math.max(0, current + delta);
+        if (group.max_quantity_per_component && next > group.max_quantity_per_component) {
+          return prev;
+        }
+        if (next === 0) {
+          delete groupSels[componentId];
+        } else {
+          groupSels[componentId] = next;
+        }
+        return { ...prev, [group.id]: groupSels };
+      });
+    },
+    []
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-composite-selector": true, "data-loading": true, className, children: "Loading options..." });
+  }
+  if (error || !composite) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-selector": true, className, children: [
+    composite.groups.sort((a, b) => a.display_order - b.display_order).map((group) => {
+      const groupSels = groupSelections[group.id] || {};
+      const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);
+      const minMet = totalSelected >= group.min_selections;
+      const isSingleSelect = group.max_selections === 1;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-group": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-group-header": true, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-composite-group-name": true, children: [
+              group.name,
+              group.min_selections > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-required": true, children: " *" })
+            ] }),
+            group.description && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-group-description": true, children: group.description }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-group-constraint": true, children: group.min_selections > 0 && group.max_selections ? `Choose ${group.min_selections}\u2013${group.max_selections}` : group.min_selections > 0 ? `Choose at least ${group.min_selections}` : group.max_selections ? `Choose up to ${group.max_selections}` : "Choose as many as you like" })
+          ] }),
+          !minMet && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-validation": true, children: "Required" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-composite-components": true, children: group.components.filter((c) => c.is_available && !c.is_archived).sort((a, b) => a.display_order - b.display_order).map((component) => {
+          const qty = groupSels[component.id] || 0;
+          const isSelected = qty > 0;
+          const displayName = component.display_name || component.product_id || component.id;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: isSingleSelect ? "radio" : "checkbox",
+              "aria-checked": isSelected,
+              onClick: () => toggleComponent(group, component),
+              "data-cimplify-composite-component": true,
+              "data-selected": isSelected || void 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-component-info": true, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-component-name": true, children: displayName }),
+                  component.is_popular && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-badge": "popular", children: "Popular" }),
+                  component.is_premium && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-badge": "premium", children: "Premium" }),
+                  component.display_description && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-component-description": true, children: component.display_description }),
+                  component.calories != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-composite-component-calories": true, children: [
+                    component.calories,
+                    " cal"
+                  ] })
+                ] }),
+                group.allow_quantity && isSelected && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    "data-cimplify-composite-qty": true,
+                    onClick: (e) => e.stopPropagation(),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => updateQuantity(group, component.id, -1),
+                          "aria-label": `Decrease ${displayName} quantity`,
+                          children: "\u2212"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: qty }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => updateQuantity(group, component.id, 1),
+                          "aria-label": `Increase ${displayName} quantity`,
+                          children: "+"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                component.price && component.price !== "0" && /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: component.price, prefix: "+" })
+              ]
+            },
+            component.id
+          );
+        }) })
+      ] }, group.id);
+    }),
+    priceResult && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-summary": true, children: [
+      priceResult.base_price !== "0" && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-summary-line": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Base" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.base_price })
+      ] }),
+      priceResult.components_total !== "0" && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-summary-line": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Selections" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.components_total })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-summary-total": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Total" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.final_price })
+      ] })
+    ] }),
+    isPriceLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-composite-calculating": true, children: "Calculating price..." })
+  ] });
+}
+function BundleSelector({
+  bundleIdOrSlug,
+  onSelectionsChange,
+  onReady,
+  className
+}) {
+  const { bundle, isLoading, error } = useBundle(bundleIdOrSlug);
+  const [variantChoices, setVariantChoices] = React3.useState({});
+  React3.useEffect(() => {
+    if (!bundle) return;
+    const defaults = {};
+    for (const comp of bundle.components) {
+      if (comp.component.variant_id) {
+        defaults[comp.component.id] = comp.component.variant_id;
+      } else if (comp.variants.length > 0) {
+        const defaultVariant = comp.variants.find((v) => v.is_default) || comp.variants[0];
+        if (defaultVariant) {
+          defaults[comp.component.id] = defaultVariant.id;
+        }
+      }
+    }
+    setVariantChoices(defaults);
+  }, [bundle]);
+  const selections = React3.useMemo(() => {
+    if (!bundle) return [];
+    return bundle.components.map((comp) => ({
+      component_id: comp.component.id,
+      variant_id: variantChoices[comp.component.id],
+      quantity: comp.component.quantity
+    }));
+  }, [bundle, variantChoices]);
+  React3.useEffect(() => {
+    onSelectionsChange(selections);
+  }, [selections, onSelectionsChange]);
+  React3.useEffect(() => {
+    onReady?.(bundle != null && selections.length > 0);
+  }, [bundle, selections, onReady]);
+  const handleVariantChange = React3.useCallback(
+    (componentId, variantId) => {
+      setVariantChoices((prev) => ({ ...prev, [componentId]: variantId }));
+    },
+    []
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bundle-selector": true, "data-loading": true, className, children: "Loading bundle..." });
+  }
+  if (error || !bundle) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-selector": true, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-bundle-heading": true, children: "Included in this bundle" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bundle-components": true, children: bundle.components.map((comp) => /* @__PURE__ */ jsxRuntime.jsx(
+      BundleComponentCard,
+      {
+        data: comp,
+        selectedVariantId: variantChoices[comp.component.id],
+        onVariantChange: (variantId) => handleVariantChange(comp.component.id, variantId)
+      },
+      comp.component.id
+    )) }),
+    bundle.bundle_price && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-summary": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Bundle price" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: bundle.bundle_price })
+    ] }),
+    bundle.discount_value && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-savings": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "You save" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: bundle.discount_value })
+    ] })
+  ] });
+}
+function BundleComponentCard({
+  data,
+  selectedVariantId,
+  onVariantChange
+}) {
+  const { component, product, variants } = data;
+  const showVariantPicker = component.allow_variant_choice && variants.length > 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-component": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-component-header": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        component.quantity > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-bundle-component-qty": true, children: [
+          "\xD7",
+          component.quantity
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-bundle-component-name": true, children: product.name })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price })
+    ] }),
+    showVariantPicker && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bundle-variant-picker": true, children: variants.map((variant) => {
+      const isSelected = selectedVariantId === variant.id;
+      const adjustment = parsePrice(variant.price_adjustment);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-selected": isSelected,
+          onClick: () => onVariantChange(variant.id),
+          "data-cimplify-bundle-variant-option": true,
+          "data-selected": isSelected || void 0,
+          children: [
+            getVariantDisplayName(variant),
+            adjustment !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-bundle-variant-adjustment": true, children: [
+              adjustment > 0 ? "+" : "",
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment })
+            ] })
+          ]
+        },
+        variant.id
+      );
+    }) })
+  ] });
+}
+function ProductCustomizer({
+  product,
+  onAddToCart,
+  className
+}) {
+  const [quantity, setQuantity] = React3.useState(1);
+  const [isAdded, setIsAdded] = React3.useState(false);
+  const [isSubmitting, setIsSubmitting] = React3.useState(false);
+  const [selectedVariantId, setSelectedVariantId] = React3.useState();
+  const [selectedVariant, setSelectedVariant] = React3.useState();
+  const [selectedAddOnOptionIds, setSelectedAddOnOptionIds] = React3.useState([]);
+  const [compositeSelections, setCompositeSelections] = React3.useState([]);
+  const [compositePrice, setCompositePrice] = React3.useState(null);
+  const [compositeReady, setCompositeReady] = React3.useState(false);
+  const [bundleSelections, setBundleSelections] = React3.useState([]);
+  const [bundleReady, setBundleReady] = React3.useState(false);
+  const cart = useCart();
+  const productType = product.product_type || "product";
+  const isComposite = productType === "composite";
+  const isBundle = productType === "bundle";
+  const isStandard = !isComposite && !isBundle;
+  const hasVariants = isStandard && product.variants && product.variants.length > 0;
+  const hasAddOns = isStandard && product.add_ons && product.add_ons.length > 0;
+  React3.useEffect(() => {
+    setQuantity(1);
+    setIsAdded(false);
+    setIsSubmitting(false);
+    setSelectedVariantId(void 0);
+    setSelectedVariant(void 0);
+    setSelectedAddOnOptionIds([]);
+    setCompositeSelections([]);
+    setCompositePrice(null);
+    setCompositeReady(false);
+    setBundleSelections([]);
+    setBundleReady(false);
+  }, [product.id]);
+  const selectedAddOnOptions = React3.useMemo(() => {
+    if (!product.add_ons) return [];
+    const options = [];
+    for (const addOn of product.add_ons) {
+      for (const option of addOn.options) {
+        if (selectedAddOnOptionIds.includes(option.id)) {
+          options.push(option);
+        }
+      }
+    }
+    return options;
+  }, [product.add_ons, selectedAddOnOptionIds]);
+  const normalizedAddOnOptionIds = React3.useMemo(() => {
+    if (selectedAddOnOptionIds.length === 0) return [];
+    return Array.from(new Set(selectedAddOnOptionIds.map((id) => id.trim()).filter(Boolean))).sort();
+  }, [selectedAddOnOptionIds]);
+  const localTotalPrice = React3.useMemo(() => {
+    if (isComposite && compositePrice) {
+      return parsePrice(compositePrice.final_price) * quantity;
+    }
+    let price = parsePrice(product.default_price);
+    if (selectedVariant?.price_adjustment) {
+      price += parsePrice(selectedVariant.price_adjustment);
+    }
+    for (const option of selectedAddOnOptions) {
+      if (option.default_price) {
+        price += parsePrice(option.default_price);
+      }
+    }
+    return price * quantity;
+  }, [product.default_price, selectedVariant, selectedAddOnOptions, quantity, isComposite, compositePrice]);
+  const requiredAddOnsSatisfied = React3.useMemo(() => {
+    if (!product.add_ons) return true;
+    for (const addOn of product.add_ons) {
+      if (addOn.is_required) {
+        const selectedInGroup = selectedAddOnOptionIds.filter(
+          (id) => addOn.options.some((opt) => opt.id === id)
+        ).length;
+        const minRequired = addOn.min_selections || 1;
+        if (selectedInGroup < minRequired) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }, [product.add_ons, selectedAddOnOptionIds]);
+  const quoteInput = React3.useMemo(
+    () => ({
+      productId: product.id,
+      quantity,
+      variantId: selectedVariantId,
+      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : void 0
+    }),
+    [product.id, quantity, selectedVariantId, normalizedAddOnOptionIds]
+  );
+  const { quote } = useQuote(quoteInput, {
+    enabled: isStandard && requiredAddOnsSatisfied
+  });
+  const quoteId = quote?.quote_id;
+  const quotedTotalPrice = React3.useMemo(() => {
+    if (!quote) return void 0;
+    const quotedTotal = quote.quoted_total_price_info?.final_price ?? quote.final_price_info.final_price;
+    return quotedTotal === void 0 || quotedTotal === null ? void 0 : parsePrice(quotedTotal);
+  }, [quote]);
+  const displayTotalPrice = quotedTotalPrice ?? localTotalPrice;
+  const canAddToCart = React3.useMemo(() => {
+    if (isComposite) return compositeReady;
+    if (isBundle) return bundleReady;
+    return requiredAddOnsSatisfied;
+  }, [isComposite, isBundle, compositeReady, bundleReady, requiredAddOnsSatisfied]);
+  const handleVariantChange = React3.useCallback(
+    (variantId, variant) => {
+      setSelectedVariantId(variantId);
+      setSelectedVariant(variant);
+    },
+    []
+  );
+  const handleAddToCart = async () => {
+    if (isSubmitting) return;
+    setIsSubmitting(true);
+    const options = {
+      variantId: selectedVariantId,
+      variant: selectedVariant ? { id: selectedVariant.id, name: selectedVariant.name || "", price_adjustment: selectedVariant.price_adjustment } : void 0,
+      quoteId,
+      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : void 0,
+      addOnOptions: selectedAddOnOptions.length > 0 ? selectedAddOnOptions.map((opt) => ({
+        id: opt.id,
+        name: opt.name,
+        add_on_id: opt.add_on_id,
+        default_price: opt.default_price
+      })) : void 0,
+      compositeSelections: isComposite && compositeSelections.length > 0 ? compositeSelections : void 0,
+      bundleSelections: isBundle && bundleSelections.length > 0 ? bundleSelections : void 0
+    };
+    try {
+      if (onAddToCart) {
+        await onAddToCart(product, quantity, options);
+      } else {
+        await cart.addItem(product, quantity, options);
+      }
+      setIsAdded(true);
+      setTimeout(() => {
+        setIsAdded(false);
+        setQuantity(1);
+      }, 2e3);
+    } catch {
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-customizer": true, className, children: [
+    isComposite && /* @__PURE__ */ jsxRuntime.jsx(
+      CompositeSelector,
+      {
+        productId: product.id,
+        onSelectionsChange: setCompositeSelections,
+        onPriceChange: setCompositePrice,
+        onReady: setCompositeReady
+      }
+    ),
+    isBundle && /* @__PURE__ */ jsxRuntime.jsx(
+      BundleSelector,
+      {
+        bundleIdOrSlug: product.slug,
+        onSelectionsChange: setBundleSelections,
+        onReady: setBundleReady
+      }
+    ),
+    hasVariants && /* @__PURE__ */ jsxRuntime.jsx(
+      VariantSelector,
+      {
+        variants: product.variants,
+        variantAxes: product.variant_axes,
+        basePrice: product.default_price,
+        selectedVariantId,
+        onVariantChange: handleVariantChange
+      }
+    ),
+    hasAddOns && /* @__PURE__ */ jsxRuntime.jsx(
+      AddOnSelector,
+      {
+        addOns: product.add_ons,
+        selectedOptions: selectedAddOnOptionIds,
+        onOptionsChange: setSelectedAddOnOptionIds
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-customizer-actions": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        QuantitySelector,
+        {
+          value: quantity,
+          onChange: setQuantity,
+          min: 1
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleAddToCart,
+          disabled: isAdded || isSubmitting || !canAddToCart,
+          "data-cimplify-customizer-submit": true,
+          children: isAdded ? "Added to Cart" : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            "Add to Cart \xB7 ",
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: displayTotalPrice })
+          ] })
+        }
+      )
+    ] }),
+    !canAddToCart && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-customizer-validation": true, children: "Please select all required options" })
+  ] });
+}
+var ASPECT_STYLES = {
+  square: { aspectRatio: "1/1" },
+  "4/3": { aspectRatio: "4/3" },
+  "16/10": { aspectRatio: "16/10" },
+  "3/4": { aspectRatio: "3/4" }
+};
+function ProductImageGallery({
+  images,
+  productName,
+  aspectRatio = "4/3",
+  className
+}) {
+  const normalizedImages = React3.useMemo(
+    () => images.filter(
+      (image) => typeof image === "string" && image.trim().length > 0
+    ),
+    [images]
+  );
+  const [selectedImage, setSelectedImage] = React3.useState(0);
+  React3.useEffect(() => {
+    setSelectedImage(0);
+  }, [normalizedImages.length, productName]);
+  if (normalizedImages.length === 0) {
+    return null;
+  }
+  const activeImage = normalizedImages[selectedImage] || normalizedImages[0];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-image-gallery": true, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-cimplify-image-gallery-main": true,
+        style: { position: "relative", overflow: "hidden", ...ASPECT_STYLES[aspectRatio] },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: activeImage,
+            alt: productName,
+            style: { width: "100%", height: "100%", objectFit: "cover" },
+            "data-cimplify-image-gallery-active": true
+          }
+        )
+      }
+    ),
+    normalizedImages.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-image-gallery-thumbnails": true, style: { display: "flex", gap: "0.5rem", marginTop: "0.75rem" }, children: normalizedImages.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setSelectedImage(index),
+        "aria-selected": selectedImage === index,
+        "data-cimplify-image-gallery-thumb": true,
+        "data-selected": selectedImage === index || void 0,
+        style: {
+          width: "4rem",
+          height: "4rem",
+          overflow: "hidden",
+          padding: 0,
+          border: "none",
+          cursor: "pointer"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: image,
+            alt: "",
+            style: { width: "100%", height: "100%", objectFit: "cover" }
+          }
+        )
+      },
+      `${image}-${index}`
+    )) })
+  ] });
+}
+function computeUnitPrice(item) {
+  let price = parsePrice(item.product.default_price);
+  if (item.variant?.price_adjustment) {
+    price += parsePrice(item.variant.price_adjustment);
+  }
+  for (const option of item.addOnOptions || []) {
+    if (option.default_price) {
+      price += parsePrice(option.default_price);
+    }
+  }
+  return Math.round(price * 100) / 100;
+}
+function CartSummary({
+  onCheckout,
+  onItemRemove,
+  onQuantityChange,
+  emptyMessage = "Your cart is empty",
+  className
+}) {
+  const { items, itemCount, subtotal, tax, total, isEmpty, removeItem, updateQuantity } = useCart();
+  const handleRemove = (itemId) => {
+    if (onItemRemove) {
+      onItemRemove(itemId);
+    } else {
+      void removeItem(itemId);
+    }
+  };
+  const handleQuantityChange = (itemId, qty) => {
+    if (onQuantityChange) {
+      onQuantityChange(itemId, qty);
+    } else {
+      void updateQuantity(itemId, qty);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-cart-summary": true, className, children: isEmpty ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-cart-empty": true, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: emptyMessage }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-cart-items": true, children: items.map((item) => {
+      const unitPrice = computeUnitPrice(item);
+      const hasComposite = item.compositeSelections && item.compositeSelections.length > 0;
+      const hasBundle = item.bundleSelections && item.bundleSelections.length > 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-item": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-item-info": true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-item-name": true, children: item.product.name }),
+          item.variant && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-item-variant": true, children: getVariantDisplayName(item.variant) }),
+          item.addOnOptions && item.addOnOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-cart-item-addons": true, children: [
+            "+ ",
+            item.addOnOptions.map((opt) => opt.name).join(", ")
+          ] }),
+          (hasComposite || hasBundle) && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-item-badge": true, children: hasComposite ? "Custom" : "Bundle" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: unitPrice })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-item-controls": true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            QuantitySelector,
+            {
+              value: item.quantity,
+              onChange: (qty) => handleQuantityChange(item.id, qty),
+              min: 0
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleRemove(item.id),
+              "data-cimplify-cart-item-remove": true,
+              "aria-label": `Remove ${item.product.name}`,
+              children: "Remove"
+            }
+          )
+        ] })
+      ] }, item.id);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-totals": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-subtotal": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "Subtotal (",
+          itemCount,
+          " ",
+          itemCount === 1 ? "item" : "items",
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: subtotal })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-tax": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Tax" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: tax })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-total": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Total" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: total })
+      ] })
+    ] }),
+    onCheckout && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onCheckout,
+        "data-cimplify-cart-checkout": true,
+        children: "Proceed to Checkout"
+      }
+    )
+  ] }) });
+}
 
 exports.Ad = Ad;
 exports.AdProvider = AdProvider;
+exports.AddOnSelector = AddOnSelector;
 exports.AddressElement = AddressElement;
 exports.AuthElement = AuthElement;
+exports.BundleSelector = BundleSelector;
+exports.CartSummary = CartSummary;
 exports.CimplifyCheckout = CimplifyCheckout;
 exports.CimplifyProvider = CimplifyProvider;
+exports.CompositeSelector = CompositeSelector;
 exports.ElementsProvider = ElementsProvider;
 exports.PaymentElement = PaymentElement;
 exports.Price = Price;
+exports.ProductCustomizer = ProductCustomizer;
+exports.ProductImageGallery = ProductImageGallery;
+exports.QuantitySelector = QuantitySelector;
+exports.VariantSelector = VariantSelector;
+exports.getVariantDisplayName = getVariantDisplayName;
 exports.useAds = useAds;
 exports.useBundle = useBundle;
 exports.useCart = useCart;