@dainamite/cpq 0.2.2

package/dist/modules/cpq/workflows/steps/OfferingSelectStep.js

@@ -0,0 +1,327 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { NumberInput } from "../../components/NumberInput.js";
+function ConfigPanel({
+  offering,
+  configuration,
+  onChange,
+  onRemove
+}) {
+  const [attributes, setAttributes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [configVersion, setConfigVersion] = useState(0);
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      setLoading(true);
+      try {
+        const params = new URLSearchParams({ offeringId: offering.id });
+        if (Object.keys(configuration).length > 0) {
+          params.set("configuration", JSON.stringify(configuration));
+        }
+        const res = await fetch(`/api/cpq/quotes/attributes?${params}`);
+        if (res.ok && !cancelled) {
+          const data = await res.json();
+          const attrs = data.attributes ?? [];
+          setAttributes(attrs.filter((a) => !a.resolutionTime || a.resolutionTime === "run_time"));
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [offering.id, configVersion]);
+  const handleChange = useCallback((code, value) => {
+    onChange(code, value);
+    const hasDependents = attributes.some((a) => {
+      const dep = a.constraints;
+      const depOn = dep?.dependsOn;
+      const dynSrc = dep?.dynamicOptionsSource;
+      return depOn?.attributeCode === code || dynSrc?.filterByDimension && Object.values(dynSrc.filterByDimension).some((v) => v === `$${code}`);
+    });
+    if (hasDependents) setConfigVersion((v) => v + 1);
+  }, [onChange, attributes]);
+  const renderAttribute = (attr) => {
+    const value = configuration[attr.code] ?? "";
+    if (attr.attributeType === "select" || attr.attributeType === "enum") {
+      return /* @__PURE__ */ jsxs("select", { value: String(value), onChange: (e) => handleChange(attr.code, e.target.value), className: "w-full rounded-md border px-3 py-2 text-sm", children: [
+        /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
+        attr.options?.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+      ] });
+    }
+    if (attr.attributeType === "boolean") {
+      return /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("input", { type: "checkbox", checked: Boolean(value), onChange: (e) => handleChange(attr.code, e.target.checked), className: "rounded border" }),
+        attr.name
+      ] });
+    }
+    if (attr.attributeType === "number") {
+      return /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          value: value === "" || value == null ? null : Number(value),
+          onChange: (n) => handleChange(attr.code, n ?? "")
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("input", { type: "text", value: String(value), onChange: (e) => handleChange(attr.code, e.target.value), className: "w-full rounded-md border px-3 py-2 text-sm" });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border p-4 space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b pb-2", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: offering.name }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: onRemove, className: "text-xs text-muted-foreground hover:text-foreground", children: "Remove" })
+    ] }),
+    loading ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Loading attributes..." }) : attributes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "No configurable attributes." }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: attributes.map((attr) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium mb-1", children: [
+        attr.name,
+        attr.isRequired && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-0.5", children: "*" })
+      ] }),
+      renderAttribute(attr),
+      attr.helpText && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: attr.helpText })
+    ] }, attr.code)) })
+  ] });
+}
+function BandwidthIndicator({
+  portCapacityMb,
+  items
+}) {
+  const totalBandwidth = items.reduce((sum, item) => {
+    const bw = Number(item.configuration.bandwidth_mb) || 0;
+    return sum + bw;
+  }, 0);
+  const pct = portCapacityMb > 0 ? Math.min(100, totalBandwidth / portCapacityMb * 100) : 0;
+  const overCapacity = totalBandwidth > portCapacityMb;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border p-3 space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Bandwidth Utilization" }),
+      /* @__PURE__ */ jsxs("span", { className: overCapacity ? "text-destructive font-medium" : "text-muted-foreground", children: [
+        totalBandwidth,
+        " / ",
+        portCapacityMb,
+        " MB"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-2 rounded-full bg-muted overflow-hidden", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `h-full rounded-full transition-all ${overCapacity ? "bg-destructive" : "bg-primary"}`,
+        style: { width: `${Math.min(100, pct)}%` }
+      }
+    ) }),
+    overCapacity && /* @__PURE__ */ jsxs("p", { className: "text-xs text-destructive", children: [
+      "Total bandwidth exceeds port capacity by ",
+      totalBandwidth - portCapacityMb,
+      " MB"
+    ] })
+  ] });
+}
+const PORT_SIZE_MB = { "1G": 1e3, "10G": 1e4, "100G": 1e5 };
+function OfferingSelectStep({ config, onComplete, onBack, stepData, currentStepId, completedSteps, quoteId, customerId }) {
+  const [offerings, setOfferings] = useState([]);
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const enableConfiguration = config.enableConfiguration === true;
+  const multiSelect = config.multiSelect !== false;
+  const offeringFilter = config.offeringFilter;
+  const displayMode = config.displayMode ?? "grid";
+  const portCapacityMb = (() => {
+    for (const data of Object.values(stepData)) {
+      const cfg = data.configuration;
+      if (cfg?.port_size) return PORT_SIZE_MB[String(cfg.port_size)] ?? 0;
+    }
+    return 0;
+  })();
+  const previousData = stepData[currentStepId];
+  useEffect(() => {
+    async function load() {
+      setLoading(true);
+      try {
+        const params = new URLSearchParams({ page: "1", pageSize: "100" });
+        const res = await fetch(`/api/cpq/product-offerings?${params}`);
+        if (res.ok) {
+          const data = await res.json();
+          let items = data.items ?? [];
+          if (offeringFilter?.offeringCodes?.length) {
+            const codeOrder = offeringFilter.offeringCodes;
+            items = items.filter((o) => codeOrder.includes(o.code)).sort((a, b) => codeOrder.indexOf(a.code) - codeOrder.indexOf(b.code));
+          }
+          items = items.filter((o) => o.isActive);
+          setOfferings(items);
+          if (previousData?.items?.length) {
+            const restored = previousData.items.map((prev) => {
+              const o = items.find((i) => i.id === prev.offering.id);
+              return o ? { offering: o, configuration: prev.configuration, lineId: prev.lineId } : null;
+            }).filter(Boolean);
+            setSelectedItems(restored);
+          }
+        }
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+  const addItem = useCallback((offering) => {
+    setSelectedItems((prev) => {
+      if (!multiSelect) return [{ offering, configuration: {} }];
+      return [...prev, { offering, configuration: {} }];
+    });
+  }, [multiSelect]);
+  const removeItem = useCallback((index) => {
+    setSelectedItems((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+  const updateItemConfig = useCallback((index, code, value) => {
+    setSelectedItems((prev) => prev.map(
+      (item, i) => i === index ? { ...item, configuration: { ...item.configuration, [code]: value } } : item
+    ));
+  }, []);
+  const resolvedCustomerId = customerId ?? (() => {
+    for (const data of Object.values(stepData)) {
+      if (data.customerId) return data.customerId;
+    }
+    return null;
+  })();
+  const handleNext = useCallback(async () => {
+    if (selectedItems.length === 0) return;
+    setSaving(true);
+    try {
+      let activeQuoteId = quoteId;
+      const output = { items: selectedItems };
+      if (enableConfiguration) {
+        if (!activeQuoteId && resolvedCustomerId) {
+          const createRes = await fetch("/api/cpq/quotes", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ customerId: resolvedCustomerId })
+          });
+          if (createRes.ok) {
+            const quoteData = await createRes.json();
+            activeQuoteId = quoteData.id;
+            output.quoteId = activeQuoteId;
+          }
+        }
+        if (activeQuoteId) {
+          for (const item of selectedItems) {
+            if (item.lineId) {
+              await fetch(`/api/cpq/quotes/${activeQuoteId}/items/${item.lineId}`, {
+                method: "PUT",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ configuration: item.configuration })
+              });
+            } else {
+              const res = await fetch(`/api/cpq/quotes/${activeQuoteId}/items`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ offeringId: item.offering.id, configuration: item.configuration })
+              });
+              if (res.ok) {
+                const data = await res.json();
+                const line = data.lines?.find((l) => l.offeringId === item.offering.id);
+                item.lineId = line?.lineId;
+              }
+            }
+          }
+          output.quoteId = activeQuoteId;
+        }
+      }
+      if (selectedItems.length === 1) {
+        const first = selectedItems[0];
+        output.offeringId = first.offering.id;
+        output.offeringCode = first.offering.code;
+        output.offeringName = first.offering.name;
+        output.specId = first.offering.specId;
+        if (enableConfiguration) output.configuration = first.configuration;
+      }
+      onComplete(output);
+    } finally {
+      setSaving(false);
+    }
+  }, [selectedItems, enableConfiguration, quoteId, resolvedCustomerId, onComplete]);
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Loading offerings..." });
+  }
+  const availableOfferings = offerings.filter(
+    (o) => multiSelect ? true : !selectedItems.some((s) => s.offering.id === o.id)
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: displayMode === "grid" ? "grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-3" : "flex flex-col gap-2",
+        children: [
+          availableOfferings.map((o) => {
+            const isAdded = selectedItems.some((s) => s.offering.id === o.id);
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                onClick: () => !isAdded && addItem(o),
+                className: `rounded-lg border-2 p-4 transition-colors ${isAdded ? "border-primary/30 bg-primary/5 opacity-60 cursor-default" : "border-muted cursor-pointer hover:bg-muted/30"}`,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: o.name }),
+                    isAdded && /* @__PURE__ */ jsx("span", { className: "text-xs text-primary font-medium", children: "Added" })
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: o.description || o.code }),
+                  !isAdded && /* @__PURE__ */ jsx("span", { className: "text-xs text-primary mt-2 inline-block", children: "+ Add" })
+                ]
+              },
+              o.id
+            );
+          }),
+          offerings.length === 0 && /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", children: "No offerings available." })
+        ]
+      }
+    ),
+    portCapacityMb > 0 && selectedItems.length > 0 && /* @__PURE__ */ jsx(BandwidthIndicator, { portCapacityMb, items: selectedItems }),
+    enableConfiguration && selectedItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs("h4", { className: "text-sm font-medium", children: [
+        "Selected Services (",
+        selectedItems.length,
+        ")"
+      ] }),
+      selectedItems.map((item, index) => /* @__PURE__ */ jsx(
+        ConfigPanel,
+        {
+          offering: item.offering,
+          configuration: item.configuration,
+          onChange: (code, value) => updateItemConfig(index, code, value),
+          onRemove: () => removeItem(index)
+        },
+        `${item.offering.id}-${index}`
+      ))
+    ] }),
+    !enableConfiguration && selectedItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("h4", { className: "text-sm font-medium", children: [
+        "Selected (",
+        selectedItems.length,
+        ")"
+      ] }),
+      selectedItems.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-md border p-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: item.offering.name }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => removeItem(index), className: "text-xs text-muted-foreground hover:text-foreground", children: "Remove" })
+      ] }, `${item.offering.id}-${index}`))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-end pt-2", children: [
+      completedSteps.length > 0 && /* @__PURE__ */ jsx("button", { type: "button", onClick: onBack, className: "inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted", children: "Back" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleNext,
+          disabled: selectedItems.length === 0 || saving,
+          className: "inline-flex items-center justify-center rounded-md bg-primary px-5 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed",
+          children: saving ? "Saving..." : "Next"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  OfferingSelectStep
+};
+//# sourceMappingURL=OfferingSelectStep.js.map

package/dist/modules/cpq/workflows/steps/OfferingSelectStep.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/cpq/workflows/steps/OfferingSelectStep.tsx"],
+  "sourcesContent": ["'use client'\n\nimport React, { useState, useEffect, useCallback } from 'react'\nimport type { WizardStepProps } from '../types'\nimport { NumberInput } from '../../components/NumberInput'\n\ntype Offering = {\n  id: string\n  code: string\n  name: string\n  description: string | null\n  specId: string\n  isActive: boolean\n}\n\ntype ConstrainedAttribute = {\n  code: string\n  name: string\n  attributeType: string\n  isRequired: boolean\n  options: Array<{ value: string; label: string }> | null\n  constraints: Record<string, unknown> | null\n  defaultValue: unknown | null\n  helpText: string | null\n}\n\ntype SelectedItem = {\n  offering: Offering\n  configuration: Record<string, unknown>\n  lineId?: string\n}\n\n// \u2500\u2500\u2500 Inline configuration panel for a single offering \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nfunction ConfigPanel({\n  offering,\n  configuration,\n  onChange,\n  onRemove,\n}: {\n  offering: Offering\n  configuration: Record<string, unknown>\n  onChange: (code: string, value: unknown) => void\n  onRemove: () => void\n}) {\n  const [attributes, setAttributes] = useState<ConstrainedAttribute[]>([])\n  const [loading, setLoading] = useState(true)\n  const [configVersion, setConfigVersion] = useState(0)\n\n  useEffect(() => {\n    let cancelled = false\n    async function load() {\n      setLoading(true)\n      try {\n        const params = new URLSearchParams({ offeringId: offering.id })\n        if (Object.keys(configuration).length > 0) {\n          params.set('configuration', JSON.stringify(configuration))\n        }\n        const res = await fetch(`/api/cpq/quotes/attributes?${params}`)\n        if (res.ok && !cancelled) {\n          const data = await res.json()\n          const attrs = (data.attributes ?? []) as ConstrainedAttribute[]\n          setAttributes(attrs.filter((a: ConstrainedAttribute & { resolutionTime?: string }) => !a.resolutionTime || a.resolutionTime === 'run_time'))\n        }\n      } finally {\n        if (!cancelled) setLoading(false)\n      }\n    }\n    load()\n    return () => { cancelled = true }\n  }, [offering.id, configVersion]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleChange = useCallback((code: string, value: unknown) => {\n    onChange(code, value)\n    // Check for dependent attributes\n    const hasDependents = attributes.some((a) => {\n      const dep = a.constraints as Record<string, unknown> | null\n      const depOn = dep?.dependsOn as { attributeCode?: string } | undefined\n      const dynSrc = dep?.dynamicOptionsSource as { filterByDimension?: Record<string, string> } | undefined\n      return depOn?.attributeCode === code ||\n        (dynSrc?.filterByDimension && Object.values(dynSrc.filterByDimension).some((v) => v === `$${code}`))\n    })\n    if (hasDependents) setConfigVersion((v) => v + 1)\n  }, [onChange, attributes])\n\n  const renderAttribute = (attr: ConstrainedAttribute) => {\n    const value = configuration[attr.code] ?? ''\n\n    if (attr.attributeType === 'select' || attr.attributeType === 'enum') {\n      return (\n        <select value={String(value)} onChange={(e) => handleChange(attr.code, e.target.value)} className=\"w-full rounded-md border px-3 py-2 text-sm\">\n          <option value=\"\">Select...</option>\n          {attr.options?.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}\n        </select>\n      )\n    }\n    if (attr.attributeType === 'boolean') {\n      return (\n        <label className=\"flex items-center gap-2 text-sm\">\n          <input type=\"checkbox\" checked={Boolean(value)} onChange={(e) => handleChange(attr.code, e.target.checked)} className=\"rounded border\" />\n          {attr.name}\n        </label>\n      )\n    }\n    if (attr.attributeType === 'number') {\n      return (\n        <NumberInput\n          value={value === '' || value == null ? null : Number(value)}\n          onChange={(n) => handleChange(attr.code, n ?? '')}\n        />\n      )\n    }\n    return <input type=\"text\" value={String(value)} onChange={(e) => handleChange(attr.code, e.target.value)} className=\"w-full rounded-md border px-3 py-2 text-sm\" />\n  }\n\n  return (\n    <div className=\"rounded-lg border p-4 space-y-3\">\n      <div className=\"flex items-center justify-between border-b pb-2\">\n        <h4 className=\"text-sm font-medium\">{offering.name}</h4>\n        <button type=\"button\" onClick={onRemove} className=\"text-xs text-muted-foreground hover:text-foreground\">Remove</button>\n      </div>\n      {loading ? (\n        <div className=\"text-sm text-muted-foreground\">Loading attributes...</div>\n      ) : attributes.length === 0 ? (\n        <div className=\"text-sm text-muted-foreground\">No configurable attributes.</div>\n      ) : (\n        <div className=\"space-y-3\">\n          {attributes.map((attr) => (\n            <div key={attr.code}>\n              <label className=\"block text-sm font-medium mb-1\">\n                {attr.name}\n                {attr.isRequired && <span className=\"text-destructive ml-0.5\">*</span>}\n              </label>\n              {renderAttribute(attr)}\n              {attr.helpText && <p className=\"text-xs text-muted-foreground mt-1\">{attr.helpText}</p>}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\n// \u2500\u2500\u2500 Port capacity indicator \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nfunction BandwidthIndicator({\n  portCapacityMb,\n  items,\n}: {\n  portCapacityMb: number\n  items: SelectedItem[]\n}) {\n  const totalBandwidth = items.reduce((sum, item) => {\n    const bw = Number(item.configuration.bandwidth_mb) || 0\n    return sum + bw\n  }, 0)\n\n  const pct = portCapacityMb > 0 ? Math.min(100, (totalBandwidth / portCapacityMb) * 100) : 0\n  const overCapacity = totalBandwidth > portCapacityMb\n\n  return (\n    <div className=\"rounded-lg border p-3 space-y-2\">\n      <div className=\"flex items-center justify-between text-xs\">\n        <span className=\"font-medium\">Bandwidth Utilization</span>\n        <span className={overCapacity ? 'text-destructive font-medium' : 'text-muted-foreground'}>\n          {totalBandwidth} / {portCapacityMb} MB\n        </span>\n      </div>\n      <div className=\"h-2 rounded-full bg-muted overflow-hidden\">\n        <div\n          className={`h-full rounded-full transition-all ${overCapacity ? 'bg-destructive' : 'bg-primary'}`}\n          style={{ width: `${Math.min(100, pct)}%` }}\n        />\n      </div>\n      {overCapacity && (\n        <p className=\"text-xs text-destructive\">\n          Total bandwidth exceeds port capacity by {totalBandwidth - portCapacityMb} MB\n        </p>\n      )}\n    </div>\n  )\n}\n\n// \u2500\u2500\u2500 Main component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PORT_SIZE_MB: Record<string, number> = { '1G': 1000, '10G': 10000, '100G': 100000 }\n\nexport function OfferingSelectStep({ config, onComplete, onBack, stepData, currentStepId, completedSteps, quoteId, customerId }: WizardStepProps) {\n  const [offerings, setOfferings] = useState<Offering[]>([])\n  const [selectedItems, setSelectedItems] = useState<SelectedItem[]>([])\n  const [loading, setLoading] = useState(true)\n  const [saving, setSaving] = useState(false)\n\n  const enableConfiguration = config.enableConfiguration === true\n  const multiSelect = config.multiSelect !== false // default true for offering_select\n  const offeringFilter = config.offeringFilter as { specCodes?: string[]; offeringCodes?: string[] } | undefined\n  const displayMode = (config.displayMode as string) ?? 'grid'\n\n  // Resolve port capacity from prior step data\n  const portCapacityMb = (() => {\n    for (const data of Object.values(stepData)) {\n      const cfg = data.configuration as Record<string, unknown> | undefined\n      if (cfg?.port_size) return PORT_SIZE_MB[String(cfg.port_size)] ?? 0\n    }\n    return 0\n  })()\n\n  // Restore previous selections\n  const previousData = stepData[currentStepId] as { items?: SelectedItem[] } | undefined\n\n  useEffect(() => {\n    async function load() {\n      setLoading(true)\n      try {\n        const params = new URLSearchParams({ page: '1', pageSize: '100' })\n        const res = await fetch(`/api/cpq/product-offerings?${params}`)\n        if (res.ok) {\n          const data = await res.json()\n          let items = (data.items ?? []) as Offering[]\n          if (offeringFilter?.offeringCodes?.length) {\n            const codeOrder = offeringFilter.offeringCodes!\n            items = items\n              .filter((o) => codeOrder.includes(o.code))\n              .sort((a, b) => codeOrder.indexOf(a.code) - codeOrder.indexOf(b.code))\n          }\n          items = items.filter((o) => o.isActive)\n          setOfferings(items)\n\n          // Restore previous selections\n          if (previousData?.items?.length) {\n            const restored = previousData.items\n              .map((prev) => {\n                const o = items.find((i) => i.id === prev.offering.id)\n                return o ? { offering: o, configuration: prev.configuration, lineId: prev.lineId } : null\n              })\n              .filter(Boolean) as SelectedItem[]\n            setSelectedItems(restored)\n          }\n        }\n      } finally {\n        setLoading(false)\n      }\n    }\n    load()\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const addItem = useCallback((offering: Offering) => {\n    setSelectedItems((prev) => {\n      if (!multiSelect) return [{ offering, configuration: {} }]\n      return [...prev, { offering, configuration: {} }]\n    })\n  }, [multiSelect])\n\n  const removeItem = useCallback((index: number) => {\n    setSelectedItems((prev) => prev.filter((_, i) => i !== index))\n  }, [])\n\n  const updateItemConfig = useCallback((index: number, code: string, value: unknown) => {\n    setSelectedItems((prev) => prev.map((item, i) =>\n      i === index ? { ...item, configuration: { ...item.configuration, [code]: value } } : item\n    ))\n  }, [])\n\n  // Resolve customerId from props or stepData\n  const resolvedCustomerId = customerId ?? (() => {\n    for (const data of Object.values(stepData)) {\n      if (data.customerId) return data.customerId as string\n    }\n    return null\n  })()\n\n  const handleNext = useCallback(async () => {\n    if (selectedItems.length === 0) return\n    setSaving(true)\n    try {\n      let activeQuoteId = quoteId\n      const output: Record<string, unknown> = { items: selectedItems }\n\n      if (enableConfiguration) {\n        // Auto-create quote if needed\n        if (!activeQuoteId && resolvedCustomerId) {\n          const createRes = await fetch('/api/cpq/quotes', {\n            method: 'POST',\n            headers: { 'Content-Type': 'application/json' },\n            body: JSON.stringify({ customerId: resolvedCustomerId }),\n          })\n          if (createRes.ok) {\n            const quoteData = await createRes.json()\n            activeQuoteId = quoteData.id\n            output.quoteId = activeQuoteId\n          }\n        }\n\n        // Add or update each selected item on the quote\n        if (activeQuoteId) {\n          for (const item of selectedItems) {\n            if (item.lineId) {\n              // Update existing line\n              await fetch(`/api/cpq/quotes/${activeQuoteId}/items/${item.lineId}`, {\n                method: 'PUT',\n                headers: { 'Content-Type': 'application/json' },\n                body: JSON.stringify({ configuration: item.configuration }),\n              })\n            } else {\n              // Create new line\n              const res = await fetch(`/api/cpq/quotes/${activeQuoteId}/items`, {\n                method: 'POST',\n                headers: { 'Content-Type': 'application/json' },\n                body: JSON.stringify({ offeringId: item.offering.id, configuration: item.configuration }),\n              })\n              if (res.ok) {\n                const data = await res.json()\n                const line = data.lines?.find((l: { offeringId: string }) => l.offeringId === item.offering.id)\n                item.lineId = line?.lineId\n              }\n            }\n          }\n          output.quoteId = activeQuoteId\n        }\n      }\n\n      // Also set single-item compat fields\n      if (selectedItems.length === 1) {\n        const first = selectedItems[0]\n        output.offeringId = first.offering.id\n        output.offeringCode = first.offering.code\n        output.offeringName = first.offering.name\n        output.specId = first.offering.specId\n        if (enableConfiguration) output.configuration = first.configuration\n      }\n\n      onComplete(output)\n    } finally {\n      setSaving(false)\n    }\n  }, [selectedItems, enableConfiguration, quoteId, resolvedCustomerId, onComplete])\n\n  if (loading) {\n    return <div className=\"text-sm text-muted-foreground\">Loading offerings...</div>\n  }\n\n  // Offerings not yet added\n  const availableOfferings = offerings.filter((o) =>\n    multiSelect ? true : !selectedItems.some((s) => s.offering.id === o.id)\n  )\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Offering cards */}\n      <div\n        className={\n          displayMode === 'grid'\n            ? 'grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-3'\n            : 'flex flex-col gap-2'\n        }\n      >\n        {availableOfferings.map((o) => {\n          const isAdded = selectedItems.some((s) => s.offering.id === o.id)\n          return (\n            <div\n              key={o.id}\n              onClick={() => !isAdded && addItem(o)}\n              className={`rounded-lg border-2 p-4 transition-colors ${\n                isAdded\n                  ? 'border-primary/30 bg-primary/5 opacity-60 cursor-default'\n                  : 'border-muted cursor-pointer hover:bg-muted/30'\n              }`}\n            >\n              <div className=\"flex items-center justify-between\">\n                <h4 className=\"text-sm font-medium\">{o.name}</h4>\n                {isAdded && <span className=\"text-xs text-primary font-medium\">Added</span>}\n              </div>\n              <p className=\"text-xs text-muted-foreground mt-1\">{o.description || o.code}</p>\n              {!isAdded && (\n                <span className=\"text-xs text-primary mt-2 inline-block\">+ Add</span>\n              )}\n            </div>\n          )\n        })}\n        {offerings.length === 0 && (\n          <div className=\"rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground\">\n            No offerings available.\n          </div>\n        )}\n      </div>\n\n      {/* Bandwidth indicator */}\n      {portCapacityMb > 0 && selectedItems.length > 0 && (\n        <BandwidthIndicator portCapacityMb={portCapacityMb} items={selectedItems} />\n      )}\n\n      {/* Configuration panels for selected items */}\n      {enableConfiguration && selectedItems.length > 0 && (\n        <div className=\"space-y-3\">\n          <h4 className=\"text-sm font-medium\">Selected Services ({selectedItems.length})</h4>\n          {selectedItems.map((item, index) => (\n            <ConfigPanel\n              key={`${item.offering.id}-${index}`}\n              offering={item.offering}\n              configuration={item.configuration}\n              onChange={(code, value) => updateItemConfig(index, code, value)}\n              onRemove={() => removeItem(index)}\n            />\n          ))}\n        </div>\n      )}\n\n      {/* No configuration \u2014 just show selected list */}\n      {!enableConfiguration && selectedItems.length > 0 && (\n        <div className=\"space-y-2\">\n          <h4 className=\"text-sm font-medium\">Selected ({selectedItems.length})</h4>\n          {selectedItems.map((item, index) => (\n            <div key={`${item.offering.id}-${index}`} className=\"flex items-center justify-between rounded-md border p-3\">\n              <span className=\"text-sm font-medium\">{item.offering.name}</span>\n              <button type=\"button\" onClick={() => removeItem(index)} className=\"text-xs text-muted-foreground hover:text-foreground\">Remove</button>\n            </div>\n          ))}\n        </div>\n      )}\n\n      <div className=\"flex gap-2 justify-end pt-2\">\n        {completedSteps.length > 0 && (\n          <button type=\"button\" onClick={onBack} className=\"inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted\">\n            Back\n          </button>\n        )}\n        <button\n          type=\"button\"\n          onClick={handleNext}\n          disabled={selectedItems.length === 0 || saving}\n          className=\"inline-flex items-center justify-center rounded-md bg-primary px-5 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed\"\n        >\n          {saving ? 'Saving...' : 'Next'}\n        </button>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/cpq/workflows/steps/ProductConfigureStep.js

@@ -0,0 +1,231 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { NumberInput } from "../../components/NumberInput.js";
+function resolveOfferingId(config, stepData) {
+  const source = config.offeringSource;
+  if (source && stepData[source]) {
+    return stepData[source].offeringId ?? null;
+  }
+  for (const data of Object.values(stepData)) {
+    if (data.offeringId) return data.offeringId;
+  }
+  return null;
+}
+function ProductConfigureStep({ config, onComplete, onBack, stepData, currentStepId, completedSteps, quoteId, customerId }) {
+  const [attributes, setAttributes] = useState([]);
+  const [values, setValues] = useState({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [resolvedOfferingId, setResolvedOfferingId] = useState(null);
+  const directOfferingId = resolveOfferingId(config, stepData);
+  const offeringCode = config.offeringCode;
+  const attributeGroups = config.attributeGroups;
+  useEffect(() => {
+    if (directOfferingId) {
+      setResolvedOfferingId(directOfferingId);
+      return;
+    }
+    if (!offeringCode) return;
+    async function resolve() {
+      try {
+        const res = await fetch(`/api/cpq/product-offerings?code=${encodeURIComponent(offeringCode)}`);
+        if (res.ok) {
+          const data = await res.json();
+          const items = data.items ?? data;
+          if (Array.isArray(items) && items.length > 0) {
+            setResolvedOfferingId(items[0].id);
+          }
+        }
+      } catch {
+      }
+    }
+    resolve();
+  }, [directOfferingId, offeringCode]);
+  const offeringId = resolvedOfferingId;
+  const hiddenAttributes = config.hiddenAttributes ?? [];
+  const readonlyAttributes = config.readonlyAttributes ?? [];
+  const previousData = stepData[currentStepId];
+  useEffect(() => {
+    async function loadAttributes() {
+      if (!offeringId) {
+        setLoading(false);
+        return;
+      }
+      setLoading(true);
+      try {
+        const params = new URLSearchParams({ offeringId });
+        if (Object.keys(values).length > 0) {
+          params.set("configuration", JSON.stringify(values));
+        }
+        const res = await fetch(`/api/cpq/quotes/attributes?${params}`);
+        if (res.ok) {
+          const data = await res.json();
+          const attrs = data.attributes ?? [];
+          setAttributes(attrs.filter((a) => !hiddenAttributes.includes(a.code)));
+          if (Object.keys(values).length === 0) {
+            const defaults = previousData?.configuration ?? {};
+            for (const attr of attrs) {
+              if (defaults[attr.code] === void 0 && attr.defaultValue != null) {
+                defaults[attr.code] = attr.defaultValue;
+              }
+            }
+            setValues(defaults);
+          }
+        }
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadAttributes();
+  }, [offeringId]);
+  const handleChange = useCallback((code, value) => {
+    setValues((prev) => ({ ...prev, [code]: value }));
+  }, []);
+  const resolvedCustomerId = customerId ?? (() => {
+    for (const data of Object.values(stepData)) {
+      if (data.customerId) return data.customerId;
+    }
+    return null;
+  })();
+  const handleComplete = useCallback(async () => {
+    setSaving(true);
+    try {
+      let activeQuoteId = quoteId;
+      if (!activeQuoteId && resolvedCustomerId && offeringId) {
+        const createRes = await fetch("/api/cpq/quotes", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ customerId: resolvedCustomerId })
+        });
+        if (createRes.ok) {
+          const quoteData = await createRes.json();
+          activeQuoteId = quoteData.id;
+        }
+      }
+      if (activeQuoteId && offeringId) {
+        const existingLineId = stepData[currentStepId]?.lineId;
+        if (existingLineId) {
+          await fetch(`/api/cpq/quotes/${activeQuoteId}/items/${existingLineId}`, {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ configuration: values })
+          });
+          onComplete({ configuration: values, offeringId, lineId: existingLineId, quoteId: activeQuoteId });
+        } else {
+          const res = await fetch(`/api/cpq/quotes/${activeQuoteId}/items`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ offeringId, configuration: values })
+          });
+          if (res.ok) {
+            const data = await res.json();
+            const line = data.lines?.find((l) => l.offeringId === offeringId);
+            onComplete({ configuration: values, offeringId, lineId: line?.lineId, quoteId: activeQuoteId });
+          } else {
+            onComplete({ configuration: values, offeringId, quoteId: activeQuoteId });
+          }
+        }
+      } else {
+        onComplete({ configuration: values, offeringId });
+      }
+    } finally {
+      setSaving(false);
+    }
+  }, [values, quoteId, offeringId, stepData, currentStepId, onComplete, resolvedCustomerId]);
+  const renderAttribute = (attr) => {
+    const isReadonly = readonlyAttributes.includes(attr.code);
+    const value = values[attr.code] ?? "";
+    if (attr.attributeType === "select" || attr.attributeType === "enum") {
+      return /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: String(value),
+          onChange: (e) => handleChange(attr.code, e.target.value),
+          disabled: isReadonly,
+          className: "w-full rounded-md border px-3 py-2 text-sm disabled:opacity-50",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
+            attr.options?.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+          ]
+        }
+      );
+    }
+    if (attr.attributeType === "boolean") {
+      return /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: Boolean(value),
+            onChange: (e) => handleChange(attr.code, e.target.checked),
+            disabled: isReadonly,
+            className: "rounded border"
+          }
+        ),
+        attr.name
+      ] });
+    }
+    if (attr.attributeType === "number") {
+      return /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          value: value === "" || value == null ? null : Number(value),
+          onChange: (n) => handleChange(attr.code, n ?? ""),
+          disabled: isReadonly
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value: String(value),
+        onChange: (e) => handleChange(attr.code, e.target.value),
+        disabled: isReadonly,
+        className: "w-full rounded-md border px-3 py-2 text-sm disabled:opacity-50"
+      }
+    );
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Loading attributes..." });
+  }
+  if (!offeringId) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", children: "No offering selected. Please go back and select an offering." });
+  }
+  const renderGroup = (label, attrs) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium border-b pb-2", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: attrs.map((attr) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium mb-1", children: [
+        attr.name,
+        attr.isRequired && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-0.5", children: "*" })
+      ] }),
+      renderAttribute(attr),
+      attr.helpText && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: attr.helpText })
+    ] }, attr.code)) })
+  ] }, label);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    attributeGroups?.length ? attributeGroups.map((group) => {
+      const groupAttrs = attributes.filter((a) => group.attributeCodes.includes(a.code));
+      if (groupAttrs.length === 0) return null;
+      return renderGroup(group.label, groupAttrs);
+    }) : renderGroup("Configuration", attributes),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-end pt-2", children: [
+      completedSteps.length > 0 && /* @__PURE__ */ jsx("button", { type: "button", onClick: onBack, className: "inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted", children: "Back" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleComplete,
+          disabled: saving,
+          className: "inline-flex items-center justify-center rounded-md bg-primary px-5 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50",
+          children: saving ? "Saving..." : "Next"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ProductConfigureStep
+};
+//# sourceMappingURL=ProductConfigureStep.js.map