@dainamite/cpq 0.2.2 → 0.4.0

package/dist/modules/cpq/backend/cpq/offerings/[id]/page.js

@@ -6,12 +6,27 @@ import { useParams, useRouter } from "next/navigation";
 import { Alert } from "@open-mercato/ui/primitives/alert";
 import { Button } from "@open-mercato/ui/primitives/button";
 import { Tag } from "@open-mercato/ui/primitives/tag";
+import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
 import { NumberInput } from "../../../../components/NumberInput.js";
+import { normalizeChargePricing } from "../../../../data/charge-pricing.js";
 import {
   chargeTypeMap,
   formatStatusLabel,
   lifecycleStatusMap
 } from "../../../../components/statusMaps.js";
+async function fetchPricingTables() {
+  try {
+    const { ok, result } = await apiCall("/api/cpq/pricing-tables?pageSize=100");
+    if (!ok) {
+      console.warn("[cpq] Failed to load pricing tables for the charges list");
+      return [];
+    }
+    return result?.items ?? [];
+  } catch (err) {
+    console.warn("[cpq] Failed to load pricing tables for the charges list:", err);
+    return [];
+  }
+}
 const EMPTY_FORM = {
   code: "",
   name: "",
@@ -28,7 +43,8 @@ const EMPTY_CHARGE = {
   name: "",
   description: null,
   chargeType: "mrc",
-  pricingMethod: "flat",
+  chargeModel: "flat",
+  pricingMethod: "fixed",
   pricingTableId: null,
   priceColumnKey: null,
   fixedPrice: null,
@@ -38,26 +54,30 @@ const EMPTY_CHARGE = {
   sortOrder: 0,
   isActive: true
 };
-const PRICING_METHOD_LABELS = {
-  flat: "flat price",
-  fixed: "flat price",
-  // legacy alias — see validators.ts
-  per_unit: "per unit",
-  tiered: "tiered"
+const CHARGE_MODEL_LABELS = {
+  flat: "Flat Fee",
+  per_unit: "Per Unit",
+  volume: "Volume-based",
+  tiered: "Tiered"
+};
+const PRICING_SOURCE_LABELS = {
+  fixed: "Fixed Price",
+  table: "Table Lookup"
 };
 function isChargeComplete(charge) {
   return chargeMissingFields(charge).length === 0;
 }
 function chargeMissingFields(charge) {
-  const method = charge.pricingMethod === "fixed" ? "flat" : charge.pricingMethod;
+  const { model, source } = normalizeChargePricing(charge);
   const missing = [];
-  if (method === "flat") {
+  if (source === "fixed") {
     if (!charge.fixedPrice) missing.push("Fixed Price");
     if (!charge.currencyCode) missing.push("Currency");
-  } else if (method === "per_unit" || method === "tiered") {
+    if (model === "per_unit" && !charge.quantityAttributeCode) missing.push("Quantity Attribute");
+  } else {
     if (!charge.pricingTableId) missing.push("Pricing Table");
     if (!charge.priceColumnKey) missing.push("Price Column");
-    if (!charge.quantityAttributeCode) missing.push("Quantity Attribute");
+    if (model !== "flat" && !charge.quantityAttributeCode) missing.push("Quantity Attribute");
   }
   return missing;
 }
@@ -118,6 +138,10 @@ function OfferingDetailPage(props) {
           setCharges(data.charges ?? []);
           setSpecDetail(data.specification ?? null);
           setComponents(data.components ?? []);
+          if ((data.charges ?? []).some((c) => c.pricingTableId)) {
+            const tables = await fetchPricingTables();
+            if (!cancelled) setPricingTables(tables);
+          }
           if (data.specId) {
             const attrRes = await fetch(`/api/cpq/product-attributes?specId=${encodeURIComponent(data.specId)}&pageSize=200`);
             if (attrRes.ok) {
@@ -221,15 +245,15 @@ function OfferingDetailPage(props) {
   };
   const loadPricingTables = async () => {
     if (pricingTables.length > 0) return;
-    const res = await fetch("/api/cpq/pricing-tables?pageSize=200");
-    if (res.ok) {
-      const data = await res.json();
-      setPricingTables(data.items ?? []);
-    }
+    setPricingTables(await fetchPricingTables());
   };
   const startEditCharge = (charge) => {
-    const editing = charge ? { ...charge } : { ...EMPTY_CHARGE };
-    setEditingCharge(editing);
+    if (charge) {
+      const { model, source } = normalizeChargePricing(charge);
+      setEditingCharge({ ...charge, chargeModel: model, pricingMethod: source });
+    } else {
+      setEditingCharge({ ...EMPTY_CHARGE });
+    }
     loadPricingTables();
   };
   const saveCharge = async () => {
@@ -545,22 +569,56 @@ function OfferingDetailPage(props) {
               /* @__PURE__ */ jsx("option", { value: "usage", children: "Usage" })
             ] })
           ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Charge Model" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: editingCharge.chargeModel ?? "flat",
+                onChange: (e) => {
+                  const model = e.target.value;
+                  const next = { ...editingCharge, chargeModel: model };
+                  if ((model === "volume" || model === "tiered") && editingCharge.pricingMethod !== "table") {
+                    next.pricingMethod = "table";
+                    next.fixedPrice = null;
+                  }
+                  if (model === "flat") next.quantityAttributeCode = null;
+                  setEditingCharge(next);
+                },
+                className: "w-full rounded-md border px-2 py-1.5 text-sm",
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "flat", children: "Flat Fee" }),
+                  /* @__PURE__ */ jsx("option", { value: "per_unit", children: "Per Unit" }),
+                  /* @__PURE__ */ jsx("option", { value: "volume", children: "Volume-based" }),
+                  /* @__PURE__ */ jsx("option", { value: "tiered", children: "Tiered" })
+                ]
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium mb-1", children: "Pricing Method" }),
-            /* @__PURE__ */ jsxs("select", { value: editingCharge.pricingMethod, onChange: (e) => {
-              const method = e.target.value;
-              if (method === "flat") {
-                setEditingCharge({ ...editingCharge, pricingMethod: method, pricingTableId: null, priceColumnKey: null, quantityAttributeCode: null });
-              } else {
-                setEditingCharge({ ...editingCharge, pricingMethod: method, fixedPrice: null });
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: editingCharge.pricingMethod,
+                onChange: (e) => {
+                  const source = e.target.value;
+                  if (source === "fixed") {
+                    const keepQty = editingCharge.chargeModel === "per_unit";
+                    setEditingCharge({ ...editingCharge, pricingMethod: source, pricingTableId: null, priceColumnKey: null, ...keepQty ? {} : { quantityAttributeCode: null } });
+                  } else {
+                    setEditingCharge({ ...editingCharge, pricingMethod: source, fixedPrice: null });
+                  }
+                },
+                className: "w-full rounded-md border px-2 py-1.5 text-sm",
+                children: [
+                  editingCharge.chargeModel !== "volume" && editingCharge.chargeModel !== "tiered" && /* @__PURE__ */ jsx("option", { value: "fixed", children: "Fixed Price" }),
+                  /* @__PURE__ */ jsx("option", { value: "table", children: "Table Lookup" })
+                ]
               }
-            }, className: "w-full rounded-md border px-2 py-1.5 text-sm", children: [
-              /* @__PURE__ */ jsx("option", { value: "flat", children: "Flat Price" }),
-              /* @__PURE__ */ jsx("option", { value: "per_unit", children: "Per Unit (table lookup)" }),
-              /* @__PURE__ */ jsx("option", { value: "tiered", children: "Tiered (table lookup)" })
-            ] })
+            )
           ] }),
-          editingCharge.pricingMethod === "flat" || editingCharge.pricingMethod === "fixed" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          editingCharge.pricingMethod === "fixed" ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium mb-1", children: [
                 "Fixed Price ",
@@ -595,9 +653,7 @@ function OfferingDetailPage(props) {
                 " ",
                 /* @__PURE__ */ jsx("a", { href: "/backend/cpq/pricing-tables", className: "text-primary hover:underline", children: "create one" }),
                 " ",
-                "before using ",
-                editingCharge.pricingMethod,
-                " pricing."
+                "before using Table Lookup pricing."
               ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { children: [
@@ -609,29 +665,29 @@ function OfferingDetailPage(props) {
                 /* @__PURE__ */ jsx("option", { value: "", children: "Select column..." }),
                 selectedPricingTable?.priceColumns.map((col) => /* @__PURE__ */ jsx("option", { value: col.key, children: col.label }, col.key))
               ] })
+            ] })
+          ] }),
+          (editingCharge.pricingMethod === "table" && editingCharge.chargeModel !== "flat" || editingCharge.pricingMethod === "fixed" && editingCharge.chargeModel === "per_unit") && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium mb-1", children: [
+              "Quantity Attribute ",
+              /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
             ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium mb-1", children: [
-                "Quantity Attribute ",
-                /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
-              ] }),
-              /* @__PURE__ */ jsxs("select", { value: editingCharge.quantityAttributeCode ?? "", onChange: (e) => setEditingCharge({ ...editingCharge, quantityAttributeCode: e.target.value || null }), className: "w-full rounded-md border px-2 py-1.5 text-sm", children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: "Select attribute..." }),
-                attributes.filter((a) => a.attributeType === "number").map((a) => /* @__PURE__ */ jsxs("option", { value: a.code, children: [
-                  a.name,
-                  " (",
-                  a.code,
-                  ")"
-                ] }, a.code))
-              ] }),
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Attribute whose value drives the quantity for pricing" }),
-              attributes.filter((a) => a.attributeType === "number").length === 0 && form.specId && /* @__PURE__ */ jsxs("p", { className: "text-xs text-warning mt-0.5", children: [
-                "Spec has no number attributes \u2014",
-                " ",
-                /* @__PURE__ */ jsx("a", { href: `/backend/cpq/specifications/${form.specId}`, className: "text-primary hover:underline", children: "add one to the spec" }),
-                " ",
-                "first."
-              ] })
+            /* @__PURE__ */ jsxs("select", { value: editingCharge.quantityAttributeCode ?? "", onChange: (e) => setEditingCharge({ ...editingCharge, quantityAttributeCode: e.target.value || null }), className: "w-full rounded-md border px-2 py-1.5 text-sm", children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Select attribute..." }),
+              attributes.filter((a) => a.attributeType === "number").map((a) => /* @__PURE__ */ jsxs("option", { value: a.code, children: [
+                a.name,
+                " (",
+                a.code,
+                ")"
+              ] }, a.code))
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Attribute whose value drives the quantity for pricing" }),
+            attributes.filter((a) => a.attributeType === "number").length === 0 && form.specId && /* @__PURE__ */ jsxs("p", { className: "text-xs text-warning mt-0.5", children: [
+              "Spec has no number attributes \u2014",
+              " ",
+              /* @__PURE__ */ jsx("a", { href: `/backend/cpq/specifications/${form.specId}`, className: "text-primary hover:underline", children: "add one to the spec" }),
+              " ",
+              "first."
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
@@ -687,7 +743,7 @@ function OfferingDetailPage(props) {
           const incomplete = !isChargeComplete(charge);
           const tableRef = charge.pricingTableId ? pricingTables.find((pt) => pt.id === charge.pricingTableId) : null;
           const qtyAttr = charge.quantityAttributeCode ? attributes.find((a) => a.code === charge.quantityAttributeCode) : null;
-          const isFlat = charge.pricingMethod === "flat" || charge.pricingMethod === "fixed";
+          const { model, source } = normalizeChargePricing(charge);
           return /* @__PURE__ */ jsxs("tr", { className: "border-b", children: [
             /* @__PURE__ */ jsx("td", { className: "px-4 py-3 font-mono text-xs", children: charge.code }),
             /* @__PURE__ */ jsxs("td", { className: "px-4 py-3", children: [
@@ -695,14 +751,27 @@ function OfferingDetailPage(props) {
               incomplete && /* @__PURE__ */ jsx(Tag, { variant: "error", className: "ml-2 px-2 text-[10px]", dot: true, children: "Incomplete" })
             ] }),
             /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(Tag, { variant: chargeTypeMap[charge.chargeType] ?? "neutral", className: "px-2 text-xs", children: charge.chargeType.toUpperCase() }) }),
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-xs", children: PRICING_METHOD_LABELS[charge.pricingMethod] ?? charge.pricingMethod }),
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-xs", children: isFlat ? charge.fixedPrice != null ? `${charge.currencyCode ?? "USD"} ${charge.fixedPrice}` : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsxs("td", { className: "px-4 py-3 text-xs", children: [
+              CHARGE_MODEL_LABELS[model] ?? model,
+              /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                " \xB7 ",
+                PRICING_SOURCE_LABELS[source] ?? source
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-xs", children: source === "fixed" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+              charge.fixedPrice != null ? /* @__PURE__ */ jsx("span", { children: `${charge.currencyCode ?? "USD"} ${charge.fixedPrice}` }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" }),
+              model === "per_unit" && /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\xD7 Qty:" }),
+                " ",
+                qtyAttr ? `${qtyAttr.name} (${qtyAttr.code})` : /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "missing" })
+              ] })
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
               /* @__PURE__ */ jsxs("span", { children: [
                 /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Table:" }),
                 " ",
                 tableRef ? `${tableRef.name} \u2192 ${charge.priceColumnKey ?? "?"}` : /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "missing" })
               ] }),
-              /* @__PURE__ */ jsxs("span", { children: [
+              model !== "flat" && /* @__PURE__ */ jsxs("span", { children: [
                 /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\xD7 Qty:" }),
                 " ",
                 qtyAttr ? `${qtyAttr.name} (${qtyAttr.code})` : /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "missing" })