@cimplify/sdk 0.9.8 → 0.9.10

package/dist/react.js

@@ -6752,6 +6752,525 @@ function AddOnSelector({
     ] }, addOn.id);
   }) });
 }
+function BundleSelector({
+  components,
+  bundlePrice,
+  discountValue,
+  onSelectionsChange,
+  onReady,
+  className
+}) {
+  const [variantChoices, setVariantChoices] = React3.useState({});
+  React3.useEffect(() => {
+    const defaults = {};
+    for (const comp of components) {
+      if (comp.variant_id) {
+        defaults[comp.id] = comp.variant_id;
+      } else if (comp.available_variants.length > 0) {
+        const defaultVariant = comp.available_variants.find((v) => v.is_default) || comp.available_variants[0];
+        if (defaultVariant) {
+          defaults[comp.id] = defaultVariant.id;
+        }
+      }
+    }
+    setVariantChoices(defaults);
+  }, [components]);
+  const selections = React3.useMemo(() => {
+    return components.map((comp) => ({
+      component_id: comp.id,
+      variant_id: variantChoices[comp.id],
+      quantity: comp.quantity
+    }));
+  }, [components, variantChoices]);
+  React3.useEffect(() => {
+    onSelectionsChange(selections);
+  }, [selections, onSelectionsChange]);
+  React3.useEffect(() => {
+    onReady?.(components.length > 0 && selections.length > 0);
+  }, [components, selections, onReady]);
+  const handleVariantChange = React3.useCallback(
+    (componentId, variantId) => {
+      setVariantChoices((prev) => ({ ...prev, [componentId]: variantId }));
+    },
+    []
+  );
+  if (components.length === 0) {
+    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: components.map((comp) => /* @__PURE__ */ jsxRuntime.jsx(
+      BundleComponentCard,
+      {
+        component: comp,
+        selectedVariantId: variantChoices[comp.id],
+        onVariantChange: (variantId) => handleVariantChange(comp.id, variantId)
+      },
+      comp.id
+    )) }),
+    bundlePrice && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-summary": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Bundle price" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: bundlePrice })
+    ] }),
+    discountValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-savings": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "You save" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: discountValue })
+    ] })
+  ] });
+}
+function BundleComponentCard({
+  component,
+  selectedVariantId,
+  onVariantChange
+}) {
+  const showVariantPicker = component.allow_variant_choice && component.available_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: component.product_name })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: component.product_default_price })
+    ] }),
+    showVariantPicker && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bundle-variant-picker": true, children: component.available_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: [
+            variant.display_name,
+            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 CompositeSelector({
+  compositeId,
+  groups,
+  onSelectionsChange,
+  onPriceChange,
+  onReady,
+  className
+}) {
+  const { client } = useCimplify();
+  const [groupSelections, setGroupSelections] = React3.useState({});
+  const [priceResult, setPriceResult] = React3.useState(null);
+  const [isPriceLoading, setIsPriceLoading] = React3.useState(false);
+  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(() => {
+    for (const group of 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;
+  }, [groups, groupSelections]);
+  React3.useEffect(() => {
+    onReady?.(allGroupsSatisfied);
+  }, [allGroupsSatisfied, onReady]);
+  React3.useEffect(() => {
+    if (!allGroupsSatisfied || selections.length === 0) return;
+    let cancelled = false;
+    setIsPriceLoading(true);
+    void client.catalogue.calculateCompositePrice(compositeId, selections).then((result) => {
+      if (cancelled) return;
+      if (result.ok) {
+        setPriceResult(result.value);
+      }
+    }).finally(() => {
+      if (!cancelled) setIsPriceLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [selections, allGroupsSatisfied, compositeId, client]);
+  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 (groups.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-selector": true, className, children: [
+    [...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.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 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.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 && product.groups && product.composite_id && /* @__PURE__ */ jsxRuntime.jsx(
+      CompositeSelector,
+      {
+        compositeId: product.composite_id,
+        groups: product.groups,
+        onSelectionsChange: setCompositeSelections,
+        onPriceChange: setCompositePrice,
+        onReady: setCompositeReady
+      }
+    ),
+    isBundle && product.components && /* @__PURE__ */ jsxRuntime.jsx(
+      BundleSelector,
+      {
+        components: product.components,
+        bundlePrice: product.bundle_price,
+        discountValue: product.discount_value,
+        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" },
@@ -6933,12 +7452,15 @@ 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;