@dainamite/cpq 0.5.0 → 0.7.0

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

@@ -2,23 +2,36 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useRouter, useParams } from "next/navigation";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
 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 { FormHeader } from "@open-mercato/ui/backend/forms";
 import {
-  formatStatusLabel,
   subscriptionStatusMap
 } from "../../../../../components/statusMaps.js";
 import { StatusPath } from "../../../../../components/StatusPath.js";
-const CHANGE_TYPE_LABELS = {
-  created: "Created",
-  amend: "Amended",
-  renew: "Renewed",
-  cancel: "Cancelled",
-  "merge-result": "Created from merging contracts",
-  "merge-source": "Merged into a new contract"
-};
+import { DepthBadge, PriceWaterfall } from "../../../../../components/PriceWaterfall.js";
+import { parseStoredCharge } from "../../../../../lib/priceAdjustmentView.js";
+import { buildInventoryStatusLabels, inventoryStatusLabel } from "../../shared.js";
+function changeTypeLabel(t, changeType) {
+  switch (changeType) {
+    case "created":
+      return t("cpq.inventory.subscriptions.detail.changeType.created", "Created");
+    case "amend":
+      return t("cpq.inventory.subscriptions.detail.changeType.amend", "Amended");
+    case "renew":
+      return t("cpq.inventory.subscriptions.detail.changeType.renew", "Renewed");
+    case "cancel":
+      return t("cpq.inventory.subscriptions.detail.changeType.cancel", "Cancelled");
+    case "merge-result":
+      return t("cpq.inventory.subscriptions.detail.changeType.mergeResult", "Created from merging contracts");
+    case "merge-source":
+      return t("cpq.inventory.subscriptions.detail.changeType.mergeSource", "Merged into a new contract");
+    default:
+      return changeType;
+  }
+}
 const CHANGE_TYPE_VARIANTS = {
   created: "neutral",
   amend: "info",
@@ -34,20 +47,16 @@ const ALLOWED_TRANSITIONS = {
   terminated: [],
   expired: []
 };
-const STATUS_LABELS = {
-  pending: "Pending",
-  active: "Active",
-  suspended: "Suspended",
-  terminated: "Terminated",
-  expired: "Expired"
-};
+const SUBSCRIPTION_STATUSES = ["pending", "active", "suspended", "terminated", "expired"];
 function fmt(amount, currency) {
   return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(Number(amount));
 }
 function StatusBadge({ status }) {
-  return /* @__PURE__ */ jsx(Tag, { variant: subscriptionStatusMap[status] ?? "neutral", dot: true, children: formatStatusLabel(status) });
+  const t = useT();
+  return /* @__PURE__ */ jsx(Tag, { variant: subscriptionStatusMap[status] ?? "neutral", dot: true, children: inventoryStatusLabel(t, status) });
 }
 function SubscriptionDetailPage(props) {
+  const t = useT();
   const router = useRouter();
   const urlParams = useParams();
   const subId = props.params?.id ?? urlParams?.id;
@@ -82,16 +91,16 @@ function SubscriptionDetailPage(props) {
           const body = await res.json().catch(() => ({}));
           if (body.existingQuoteId) {
             const ok = window.confirm(
-              `${body.error ?? "Subscription has another ARC quote in progress."}
-
-Open the existing quote now?`
+              t("cpq.inventory.subscriptions.detail.arc.existingQuoteConfirm", "{error}\n\nOpen the existing quote now?", {
+                error: body.error ?? t("cpq.inventory.subscriptions.detail.arc.existingQuoteInProgress", "Subscription has another ARC quote in progress.")
+              })
             );
             if (ok) {
               router.push(`/backend/cpq/quotes/${body.existingQuoteId}`);
             }
             return;
           }
-          alert(`Failed to start ${type} quote: ${body.error ?? res.statusText}`);
+          alert(t("cpq.inventory.subscriptions.detail.arc.startFailed", "Failed to start {type} quote: {error}", { type, error: body.error ?? res.statusText }));
           return;
         }
         const data = await res.json();
@@ -100,7 +109,7 @@ Open the existing quote now?`
         setArcInFlight(null);
       }
     },
-    [router, sub]
+    [router, sub, t]
   );
   const transitionStatus = async (targetStatus) => {
     if (!sub) return;
@@ -113,7 +122,7 @@ Open the existing quote now?`
         body: JSON.stringify({ id: sub.id, targetStatus })
       });
       const data = await res.json();
-      if (!res.ok) throw new Error(data?.error ?? "Status transition failed");
+      if (!res.ok) throw new Error(data?.error ?? t("cpq.inventory.subscriptions.detail.error.transitionFailed", "Status transition failed"));
       const [freshSub, freshAssets] = await Promise.all([
         fetch(`/api/cpq/inventory/subscriptions?id=${sub.id}`).then((r) => r.ok ? r.json() : null),
         fetch(`/api/cpq/inventory/assets?subscriptionId=${sub.id}&pageSize=50`).then((r) => r.ok ? r.json() : null).then((r) => r?.items ?? [])
@@ -173,7 +182,7 @@ Open the existing quote now?`
     async function load() {
       try {
         const res = await fetch(`/api/cpq/inventory/subscriptions?id=${subId}`);
-        if (!res.ok) throw new Error("Subscription not found");
+        if (!res.ok) throw new Error(t("cpq.inventory.subscriptions.detail.error.notFound", "Subscription not found"));
         const data = await res.json();
         if (!cancelled) {
           setSub(data);
@@ -238,7 +247,7 @@ Open the existing quote now?`
     return () => {
       cancelled = true;
     };
-  }, [subId]);
+  }, [subId, t]);
   const toggleItem = (id) => {
     setExpandedItems((prev) => {
       const n = new Set(prev);
@@ -249,31 +258,36 @@ Open the existing quote now?`
   if (loading) {
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-12 justify-center text-sm text-muted-foreground", children: [
       /* @__PURE__ */ jsx(Spinner, {}),
-      " Loading\u2026"
+      " ",
+      t("cpq.inventory.subscriptions.detail.loading", "Loading\u2026")
     ] });
   }
   if (!sub) {
     return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx("button", { onClick: () => router.push("/backend/cpq/inventory"), className: "text-sm text-muted-foreground hover:text-foreground", children: "\u2190 Back" }),
+      /* @__PURE__ */ jsxs("button", { onClick: () => router.push("/backend/cpq/inventory"), className: "text-sm text-muted-foreground hover:text-foreground", children: [
+        "\u2190 ",
+        t("cpq.common.back", "Back")
+      ] }),
       error && /* @__PURE__ */ jsx(ErrorBanner, { message: error }),
-      /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", children: "Subscription not found." })
+      /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.notFound", "Subscription not found.") })
     ] });
   }
   const currency = sub.currencyCode || "USD";
   const flatItems = flattenItems(sub.items);
   const canArc = sub.status === "active" || sub.status === "suspended";
   const statusTransitions = ALLOWED_TRANSITIONS[sub.status] ?? [];
+  const statusLabels = buildInventoryStatusLabels(t, SUBSCRIPTION_STATUSES);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
     /* @__PURE__ */ jsx(
       FormHeader,
       {
         mode: "detail",
         backHref: "/backend/cpq/inventory",
-        backLabel: "Back to Customer Inventory",
-        entityTypeLabel: "Subscription",
+        backLabel: t("cpq.inventory.detail.backToInventory", "Back to Customer Inventory"),
+        entityTypeLabel: t("cpq.inventory.subscriptions.detail.entityType", "Subscription"),
         title: sub.name,
         statusBadge: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-1", children: [
-          /* @__PURE__ */ jsx(Tag, { variant: subscriptionStatusMap[sub.status] ?? "neutral", dot: true, children: STATUS_LABELS[sub.status] ?? formatStatusLabel(sub.status) }),
+          /* @__PURE__ */ jsx(Tag, { variant: subscriptionStatusMap[sub.status] ?? "neutral", dot: true, children: inventoryStatusLabel(t, sub.status) }),
           /* @__PURE__ */ jsx(Tag, { variant: "neutral", className: "capitalize", children: sub.billingCycle }),
           transitioning && /* @__PURE__ */ jsx(Spinner, {})
         ] }),
@@ -285,7 +299,7 @@ Open the existing quote now?`
               variant: "outline",
               disabled: arcInFlight !== null,
               onClick: () => startArcQuote("amend"),
-              children: "Amend"
+              children: t("cpq.inventory.subscriptions.detail.arc.amend", "Amend")
             }
           ),
           /* @__PURE__ */ jsx(
@@ -295,7 +309,7 @@ Open the existing quote now?`
               variant: "outline",
               disabled: arcInFlight !== null,
               onClick: () => startArcQuote("renew"),
-              children: "Renew"
+              children: t("cpq.inventory.subscriptions.detail.arc.renew", "Renew")
             }
           ),
           /* @__PURE__ */ jsx(
@@ -305,7 +319,7 @@ Open the existing quote now?`
               variant: "destructive-outline",
               disabled: arcInFlight !== null,
               onClick: () => startArcQuote("cancel"),
-              children: "Cancel"
+              children: t("cpq.inventory.subscriptions.detail.arc.cancel", "Cancel")
             }
           )
         ] }) : null
@@ -318,52 +332,52 @@ Open the existing quote now?`
         path: ["pending", "active"],
         terminals: ["suspended", "terminated", "expired"],
         statusMap: subscriptionStatusMap,
-        labels: STATUS_LABELS,
+        labels: statusLabels,
         onTransition: transitionStatus,
         allowedTransitions: statusTransitions,
         disabled: transitioning,
-        ariaLabel: "Subscription status path"
+        ariaLabel: t("cpq.inventory.subscriptions.detail.statusPath", "Subscription status path")
       }
     ) }),
     error && /* @__PURE__ */ jsx(ErrorBanner, { message: error }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4 space-y-3", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Subscription Details" }),
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: t("cpq.inventory.subscriptions.detail.sections.details", "Subscription Details") }),
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2", children: [
-          /* @__PURE__ */ jsx(Field, { label: "Code", value: sub.code, mono: true }),
-          /* @__PURE__ */ jsx(Field, { label: "Status", value: sub.status }),
-          /* @__PURE__ */ jsx(Field, { label: "Billing Cycle", value: sub.billingCycle }),
-          /* @__PURE__ */ jsx(Field, { label: "Currency", value: currency }),
-          /* @__PURE__ */ jsx(Field, { label: "Auto-Renew", value: sub.autoRenew ? "Yes" : "No" }),
-          sub.termMonths != null && /* @__PURE__ */ jsx(Field, { label: "Term", value: `${sub.termMonths} months` }),
-          sub.startDate && /* @__PURE__ */ jsx(Field, { label: "Start Date", value: new Date(sub.startDate).toLocaleDateString() }),
-          sub.currentTermEnd && /* @__PURE__ */ jsx(Field, { label: "Term End", value: new Date(sub.currentTermEnd).toLocaleDateString() }),
-          sub.activatedAt && /* @__PURE__ */ jsx(Field, { label: "Activated", value: new Date(sub.activatedAt).toLocaleString() }),
-          sub.suspendedAt && /* @__PURE__ */ jsx(Field, { label: "Suspended", value: new Date(sub.suspendedAt).toLocaleString() }),
-          sub.terminatedAt && /* @__PURE__ */ jsx(Field, { label: "Terminated", value: new Date(sub.terminatedAt).toLocaleString() })
+          /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.code", "Code"), value: sub.code, mono: true }),
+          /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.status", "Status"), value: sub.status }),
+          /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.billingCycle", "Billing Cycle"), value: sub.billingCycle }),
+          /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.currency", "Currency"), value: currency }),
+          /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.autoRenew", "Auto-Renew"), value: sub.autoRenew ? t("cpq.common.yes", "Yes") : t("cpq.common.no", "No") }),
+          sub.termMonths != null && /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.term", "Term"), value: t("cpq.inventory.subscriptions.detail.fields.termMonths", "{count} months", { count: sub.termMonths }) }),
+          sub.startDate && /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.startDate", "Start Date"), value: new Date(sub.startDate).toLocaleDateString() }),
+          sub.currentTermEnd && /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.termEnd", "Term End"), value: new Date(sub.currentTermEnd).toLocaleDateString() }),
+          sub.activatedAt && /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.activated", "Activated"), value: new Date(sub.activatedAt).toLocaleString() }),
+          sub.suspendedAt && /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.suspended", "Suspended"), value: new Date(sub.suspendedAt).toLocaleString() }),
+          sub.terminatedAt && /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.terminated", "Terminated"), value: new Date(sub.terminatedAt).toLocaleString() })
         ] }),
         sub.description && /* @__PURE__ */ jsxs("div", { className: "pt-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Description" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.fields.description", "Description") }),
           /* @__PURE__ */ jsx("p", { className: "text-sm", children: sub.description })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4 space-y-3", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Pricing & References" }),
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: t("cpq.inventory.subscriptions.detail.sections.pricing", "Pricing & References") }),
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Monthly Recurring (MRC)" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.fields.mrc", "Monthly Recurring (MRC)") }),
             /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold font-mono", children: fmt(sub.mrcAmount, currency) })
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Non-Recurring (NRC)" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.fields.nrc", "Non-Recurring (NRC)") }),
             /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold font-mono", children: fmt(sub.nrcAmount, currency) })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 pt-1", children: [
-          /* @__PURE__ */ jsx(Field, { label: "Customer", value: customerName ?? sub.customerId.slice(0, 12) + "\u2026" }),
-          /* @__PURE__ */ jsx(Field, { label: "Created", value: new Date(sub.createdAt).toLocaleString() }),
+          /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.customer", "Customer"), value: customerName ?? sub.customerId.slice(0, 12) + "\u2026" }),
+          /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.created", "Created"), value: new Date(sub.createdAt).toLocaleString() }),
           sub.sourceQuoteId && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Source Quote" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.fields.sourceQuote", "Source Quote") }),
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -374,7 +388,7 @@ Open the existing quote now?`
             )
           ] }),
           sub.sourceOrderId && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Source Order" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.fields.sourceOrder", "Source Order") }),
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -388,7 +402,7 @@ Open the existing quote now?`
       ] })
     ] }),
     sub.metadata && Object.keys(sub.metadata).length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium mb-2", children: "Metadata" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium mb-2", children: t("cpq.inventory.subscriptions.detail.sections.metadata", "Metadata") }),
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-1", children: Object.entries(sub.metadata).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "text-xs", children: [
         /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
           key,
@@ -398,12 +412,8 @@ Open the existing quote now?`
       ] }, key)) })
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("h3", { className: "text-sm font-medium mb-2 px-1", children: [
-        "Subscription Items (",
-        flatItems.length,
-        ")"
-      ] }),
-      flatItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card py-8 text-center text-sm text-muted-foreground", children: "No items." }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card divide-y", children: flatItems.map((item) => {
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium mb-2 px-1", children: t("cpq.inventory.subscriptions.detail.items.title", "Subscription Items ({count})", { count: flatItems.length }) }),
+      flatItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card py-8 text-center text-sm text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.items.empty", "No items.") }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card divide-y", children: flatItems.map((item) => {
         const isExpanded = expandedItems.has(item.id);
         const indent = item._depth ?? 0;
         return /* @__PURE__ */ jsxs("div", { children: [
@@ -425,11 +435,17 @@ Open the existing quote now?`
                 ] }) }),
                 /* @__PURE__ */ jsxs("div", { className: "shrink-0 text-right text-xs space-y-0.5", children: [
                   Number(item.mrcAmount) > 0 && /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "MRC " }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                      t("cpq.inventory.subscriptions.detail.items.mrc", "MRC"),
+                      " "
+                    ] }),
                     /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: fmt(item.mrcAmount, item.currencyCode || currency) })
                   ] }),
                   Number(item.nrcAmount) > 0 && /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "NRC " }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                      t("cpq.inventory.subscriptions.detail.items.nrc", "NRC"),
+                      " "
+                    ] }),
                     /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: fmt(item.nrcAmount, item.currencyCode || currency) })
                   ] })
                 ] })
@@ -441,7 +457,7 @@ Open the existing quote now?`
               item.offeringId && /* @__PURE__ */ jsx(
                 RefField,
                 {
-                  label: "Offering",
+                  label: t("cpq.inventory.subscriptions.detail.fields.offering", "Offering"),
                   name: offeringNames[item.offeringId],
                   fallback: item.offeringId,
                   onClick: () => router.push(`/backend/cpq/offerings/${item.offeringId}`)
@@ -450,7 +466,7 @@ Open the existing quote now?`
               item.specId && /* @__PURE__ */ jsx(
                 RefField,
                 {
-                  label: "Specification",
+                  label: t("cpq.inventory.subscriptions.detail.fields.specification", "Specification"),
                   name: specNames[item.specId],
                   fallback: item.specId,
                   onClick: () => router.push(`/backend/cpq/specifications/${item.specId}`)
@@ -459,18 +475,18 @@ Open the existing quote now?`
               item.productId && /* @__PURE__ */ jsx(
                 RefField,
                 {
-                  label: "Product",
+                  label: t("cpq.inventory.subscriptions.detail.fields.product", "Product"),
                   name: productNames[item.productId],
                   fallback: item.productId,
                   onClick: () => router.push(`/backend/catalog/products/${item.productId}`)
                 }
               ),
-              /* @__PURE__ */ jsx(Field, { label: "Currency", value: item.currencyCode || currency }),
-              /* @__PURE__ */ jsx(Field, { label: "Quantity", value: String(item.quantity) }),
-              item.capacityTotal && /* @__PURE__ */ jsx(Field, { label: "Capacity", value: `${item.capacityUsed ?? "0"} / ${item.capacityTotal} ${item.capacityUnit ?? ""}` })
+              /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.currency", "Currency"), value: item.currencyCode || currency }),
+              /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.quantity", "Quantity"), value: String(item.quantity) }),
+              item.capacityTotal && /* @__PURE__ */ jsx(Field, { label: t("cpq.inventory.subscriptions.detail.fields.capacity", "Capacity"), value: `${item.capacityUsed ?? "0"} / ${item.capacityTotal} ${item.capacityUnit ?? ""}` })
             ] }),
             item.configuration && Object.keys(item.configuration).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Configuration" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: t("cpq.inventory.subscriptions.detail.items.configuration", "Configuration") }),
               /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-1", children: Object.entries(item.configuration).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "text-xs", children: [
                 /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
                   key,
@@ -480,26 +496,38 @@ Open the existing quote now?`
               ] }, key)) })
             ] }),
             item.charges && item.charges.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Charges" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: t("cpq.inventory.subscriptions.detail.items.charges", "Charges") }),
               /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", children: [
                 /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-muted-foreground", children: [
-                  /* @__PURE__ */ jsx("th", { className: "text-left py-1 font-medium", children: "Charge" }),
-                  /* @__PURE__ */ jsx("th", { className: "text-left py-1 font-medium", children: "Type" }),
-                  /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: "Unit Price" }),
-                  /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: "Qty" }),
-                  /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: "Total" })
+                  /* @__PURE__ */ jsx("th", { className: "text-left py-1 font-medium", children: t("cpq.inventory.subscriptions.detail.charges.charge", "Charge") }),
+                  /* @__PURE__ */ jsx("th", { className: "text-left py-1 font-medium", children: t("cpq.inventory.subscriptions.detail.charges.type", "Type") }),
+                  /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: t("cpq.inventory.subscriptions.detail.charges.list", "List") }),
+                  /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: t("cpq.inventory.subscriptions.detail.charges.offer", "Offer") }),
+                  /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: t("cpq.inventory.subscriptions.detail.charges.qty", "Qty") }),
+                  /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: t("cpq.inventory.subscriptions.detail.charges.total", "Total") })
                 ] }) }),
-                /* @__PURE__ */ jsx("tbody", { children: item.charges.map((c, i) => /* @__PURE__ */ jsxs("tr", { className: "border-t border-dashed border-border/50", children: [
-                  /* @__PURE__ */ jsx("td", { className: "py-1", children: c.chargeName ?? "\u2014" }),
-                  /* @__PURE__ */ jsx("td", { className: "py-1 uppercase", children: c.chargeType ?? "\u2014" }),
-                  /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono", children: c.unitPrice != null ? fmt(c.unitPrice, currency) : "\u2014" }),
-                  /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono", children: c.quantity ?? "\u2014" }),
-                  /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono", children: c.totalPrice != null ? fmt(c.totalPrice, currency) : "\u2014" })
-                ] }, i)) })
+                /* @__PURE__ */ jsx("tbody", { children: item.charges.map((raw, i) => {
+                  const c = parseStoredCharge(raw);
+                  if (!c) return null;
+                  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                    /* @__PURE__ */ jsxs("tr", { className: "border-t border-dashed border-border/50", children: [
+                      /* @__PURE__ */ jsx("td", { className: "py-1", children: c.chargeName }),
+                      /* @__PURE__ */ jsx("td", { className: "py-1 uppercase", children: c.chargeType }),
+                      /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono text-muted-foreground", children: fmt(c.listUnitPrice ?? c.unitPrice, currency) }),
+                      /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx(DepthBadge, { before: c.listUnitPrice ?? c.unitPrice, after: c.unitPrice }),
+                        fmt(c.unitPrice, currency)
+                      ] }) }),
+                      /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono", children: c.quantity ?? "\u2014" }),
+                      /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono", children: c.totalPrice != null ? fmt(c.totalPrice, currency) : "\u2014" })
+                    ] }),
+                    (c.adjustments?.length ?? 0) > 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 6, className: "pb-2 pl-4", children: /* @__PURE__ */ jsx(PriceWaterfall, { charge: c, currency }) }) })
+                  ] }, i);
+                }) })
               ] })
             ] }),
             item.metadata && Object.keys(item.metadata).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Metadata" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: t("cpq.inventory.subscriptions.detail.items.metadata", "Metadata") }),
               /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-1", children: Object.entries(item.metadata).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "text-xs", children: [
                 /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
                   key,
@@ -509,107 +537,68 @@ Open the existing quote now?`
               ] }, key)) })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex gap-4 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsxs("span", { children: [
-                "Created: ",
-                new Date(item.createdAt).toLocaleString()
-              ] }),
-              /* @__PURE__ */ jsxs("span", { children: [
-                "Updated: ",
-                new Date(item.updatedAt).toLocaleString()
-              ] })
+              /* @__PURE__ */ jsx("span", { children: t("cpq.inventory.subscriptions.detail.items.createdAt", "Created: {date}", { date: new Date(item.createdAt).toLocaleString() }) }),
+              /* @__PURE__ */ jsx("span", { children: t("cpq.inventory.subscriptions.detail.items.updatedAt", "Updated: {date}", { date: new Date(item.updatedAt).toLocaleString() }) })
             ] })
           ] })
         ] }, item.id);
       }) })
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("h3", { className: "text-sm font-medium mb-2 px-1", children: [
-        "Change History (",
-        changeLog.length,
-        ")"
-      ] }),
-      changeLogLoading ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card py-6 text-center text-sm text-muted-foreground", children: "Loading\u2026" }) : changeLog.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card py-6 text-center text-sm text-muted-foreground", children: "No ARC changes yet." }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card divide-y", children: changeLog.map((row) => /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 space-y-1", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium mb-2 px-1", children: t("cpq.inventory.subscriptions.detail.changeLog.title", "Change History ({count})", { count: changeLog.length }) }),
+      changeLogLoading ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card py-6 text-center text-sm text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.loading", "Loading\u2026") }) : changeLog.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card py-6 text-center text-sm text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.changeLog.empty", "No ARC changes yet.") }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card divide-y", children: changeLog.map((row) => /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 space-y-1", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Tag, { variant: CHANGE_TYPE_VARIANTS[row.changeType] ?? "neutral", children: CHANGE_TYPE_LABELS[row.changeType] ?? row.changeType }),
+          /* @__PURE__ */ jsx(Tag, { variant: CHANGE_TYPE_VARIANTS[row.changeType] ?? "neutral", children: changeTypeLabel(t, row.changeType) }),
           /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: new Date(row.effectiveAt).toLocaleString() }),
-          row.sourceQuoteId && /* @__PURE__ */ jsxs(
+          row.sourceQuoteId && /* @__PURE__ */ jsx(
             "button",
             {
               onClick: () => router.push(`/backend/cpq/quotes/${row.sourceQuoteId}`),
               className: "text-xs text-primary hover:underline",
-              children: [
-                "Quote ",
-                logQuoteNumbers[row.sourceQuoteId] ?? `${row.sourceQuoteId.slice(0, 8)}\u2026`
-              ]
+              children: t("cpq.inventory.subscriptions.detail.changeLog.quote", "Quote {number}", { number: logQuoteNumbers[row.sourceQuoteId] ?? `${row.sourceQuoteId.slice(0, 8)}\u2026` })
             }
           ),
-          row.sourceOrderId && /* @__PURE__ */ jsxs(
+          row.sourceOrderId && /* @__PURE__ */ jsx(
             "button",
             {
               onClick: () => router.push(`/backend/cpq/orders/${row.sourceOrderId}`),
               className: "text-xs text-primary hover:underline",
-              children: [
-                "Order ",
-                logOrderNumbers[row.sourceOrderId] ?? `${row.sourceOrderId.slice(0, 8)}\u2026`
-              ]
+              children: t("cpq.inventory.subscriptions.detail.changeLog.order", "Order {number}", { number: logOrderNumbers[row.sourceOrderId] ?? `${row.sourceOrderId.slice(0, 8)}\u2026` })
             }
           )
         ] }),
         /* @__PURE__ */ jsx(ChangeLogLineDetails, { row, currency }),
-        row.termChange && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
-          "Term: ",
-          String(row.termChange.oldTermEnd ?? "\u2014"),
-          " \u2192 ",
-          String(row.termChange.newTermEnd ?? "\u2014")
-        ] }),
-        row.reasonCode && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
-          "Reason: ",
-          row.reasonCode,
-          row.reasonText ? ` \u2014 ${row.reasonText}` : ""
-        ] }),
-        row.etfAmount && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
-          "ETF: ",
-          row.etfAmount,
-          " ",
-          row.etfCurrency ?? ""
-        ] }),
+        row.termChange && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.changeLog.term", "Term: {from} \u2192 {to}", {
+          from: String(row.termChange.oldTermEnd ?? "\u2014"),
+          to: String(row.termChange.newTermEnd ?? "\u2014")
+        }) }),
+        row.reasonCode && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: row.reasonText ? t("cpq.inventory.subscriptions.detail.changeLog.reasonWithText", "Reason: {code} \u2014 {text}", { code: row.reasonCode, text: row.reasonText }) : t("cpq.inventory.subscriptions.detail.changeLog.reason", "Reason: {code}", { code: row.reasonCode }) }),
+        row.etfAmount && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.changeLog.etf", "ETF: {amount} {currency}", { amount: row.etfAmount, currency: row.etfCurrency ?? "" }) }),
         row.mergedIntoSubscriptionId && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
-          "Merged into",
+          t("cpq.inventory.subscriptions.detail.changeLog.mergedInto", "Merged into"),
           " ",
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             "button",
             {
               onClick: () => router.push(`/backend/cpq/inventory/subscriptions/${row.mergedIntoSubscriptionId}`),
               className: "text-primary hover:underline",
-              children: [
-                "subscription ",
-                row.mergedIntoSubscriptionId.slice(0, 8),
-                "\u2026"
-              ]
+              children: t("cpq.inventory.subscriptions.detail.changeLog.mergedIntoSubscription", "subscription {id}\u2026", { id: row.mergedIntoSubscriptionId.slice(0, 8) })
             }
           )
         ] }),
-        row.mergedFromSubscriptionIds && row.mergedFromSubscriptionIds.length > 0 && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
-          "Merged from ",
-          row.mergedFromSubscriptionIds.length,
-          " subscriptions"
-        ] })
+        row.mergedFromSubscriptionIds && row.mergedFromSubscriptionIds.length > 0 && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.changeLog.mergedFrom", "Merged from {count} subscriptions", { count: row.mergedFromSubscriptionIds.length }) })
       ] }, row.id)) })
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("h3", { className: "text-sm font-medium mb-2 px-1", children: [
-        "Linked Assets (",
-        assets.length,
-        ")"
-      ] }),
-      assets.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card py-8 text-center text-sm text-muted-foreground", children: "No assets linked to this subscription." }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium mb-2 px-1", children: t("cpq.inventory.subscriptions.detail.assets.title", "Linked Assets ({count})", { count: assets.length }) }),
+      assets.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card py-8 text-center text-sm text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.assets.empty", "No assets linked to this subscription.") }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
         /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b bg-muted/50", children: [
-          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Code" }),
-          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Name" }),
-          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Type" }),
-          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: "Status" }),
-          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-right font-medium", children: "Price" }),
-          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-right font-medium", children: "Qty" })
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: t("cpq.inventory.subscriptions.detail.assets.table.code", "Code") }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: t("cpq.inventory.subscriptions.detail.assets.table.name", "Name") }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: t("cpq.inventory.subscriptions.detail.assets.table.type", "Type") }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium", children: t("cpq.inventory.subscriptions.detail.assets.table.status", "Status") }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-right font-medium", children: t("cpq.inventory.subscriptions.detail.assets.table.price", "Price") }),
+          /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-right font-medium", children: t("cpq.inventory.subscriptions.detail.assets.table.qty", "Qty") })
         ] }) }),
         /* @__PURE__ */ jsx("tbody", { children: assets.map((a) => /* @__PURE__ */ jsxs("tr", { onClick: () => router.push(`/backend/cpq/inventory/assets/${a.id}`), className: "border-b cursor-pointer hover:bg-muted/30 transition-colors", children: [
           /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-muted-foreground", children: a.code }),
@@ -669,6 +658,8 @@ function ErrorBanner({ message }) {
   return /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: message });
 }
 function ChangeLogLineDetails({ row, currency }) {
+  const t = useT();
+  const itemFallback = t("cpq.inventory.subscriptions.detail.changeLog.item", "Item");
   const beforeItems = new Map(
     (row.beforeSnapshot?.items ?? []).map((it) => [it.id, it])
   );
@@ -690,7 +681,7 @@ function ChangeLogLineDetails({ row, currency }) {
       derived.push({
         key: `${itemId}-${i}`,
         action: lc.action,
-        name: item?.name ?? (lc.action === "add" ? "New item" : "Item"),
+        name: item?.name ?? (lc.action === "add" ? t("cpq.inventory.subscriptions.detail.changeLog.newItem", "New item") : itemFallback),
         beforeMrc,
         afterMrc: lc.action === "add" && afterMrc == null && lc.mrcAmount != null ? Number(lc.mrcAmount) : afterMrc,
         delta: explicitDelta ?? computedDelta
@@ -702,7 +693,7 @@ function ChangeLogLineDetails({ row, currency }) {
       derived.push({
         key: it.id,
         action: "cancel",
-        name: it.name ?? "Item",
+        name: it.name ?? itemFallback,
         beforeMrc: mrc,
         afterMrc: 0,
         delta: -mrc
@@ -714,7 +705,7 @@ function ChangeLogLineDetails({ row, currency }) {
       derived.push({
         key: it.id,
         action: "add",
-        name: it.name ?? "Item",
+        name: it.name ?? itemFallback,
         beforeMrc: null,
         afterMrc: mrc,
         delta: null
@@ -726,7 +717,7 @@ function ChangeLogLineDetails({ row, currency }) {
       derived.push({
         key: it.id,
         action: "cancel",
-        name: it.name ?? "Item",
+        name: it.name ?? itemFallback,
         beforeMrc: mrc,
         afterMrc: 0,
         delta: -mrc
@@ -735,57 +726,56 @@ function ChangeLogLineDetails({ row, currency }) {
   }
   if (derived.length === 0) {
     if (row.changeType === "amend" || row.changeType === "renew") {
-      return /* @__PURE__ */ jsx("div", { className: "mt-1.5 text-xs text-muted-foreground italic", children: "No item-level changes recorded." });
+      return /* @__PURE__ */ jsx("div", { className: "mt-1.5 text-xs text-muted-foreground italic", children: t("cpq.inventory.subscriptions.detail.changeLog.noItemChanges", "No item-level changes recorded.") });
     }
     return null;
   }
   return /* @__PURE__ */ jsx("div", { className: "mt-1.5 rounded border bg-muted/20 px-3 py-2 space-y-1", children: derived.map((d) => /* @__PURE__ */ jsx(ChangeLogLineRow, { change: d, currency }, d.key)) });
 }
 const ACTION_GLYPH = {
-  add: { sign: "+", color: "text-status-success-text", label: "added" },
-  modify: { sign: "~", color: "text-status-info-text", label: "modified" },
-  cancel: { sign: "\u2212", color: "text-destructive", label: "removed" }
+  add: { sign: "+", color: "text-status-success-text" },
+  modify: { sign: "~", color: "text-status-info-text" },
+  cancel: { sign: "\u2212", color: "text-destructive" }
 };
+function actionGlyphLabel(t, action) {
+  switch (action) {
+    case "add":
+      return t("cpq.inventory.subscriptions.detail.changeLog.action.add", "added");
+    case "modify":
+      return t("cpq.inventory.subscriptions.detail.changeLog.action.modify", "modified");
+    case "cancel":
+      return t("cpq.inventory.subscriptions.detail.changeLog.action.cancel", "removed");
+  }
+}
 function ChangeLogLineRow({
   change,
   currency
 }) {
+  const t = useT();
   const glyph = ACTION_GLYPH[change.action];
   const showPriceChange = change.action === "modify" && change.beforeMrc != null && change.afterMrc != null && change.beforeMrc !== change.afterMrc;
   const showSinglePrice = !showPriceChange && (change.action === "add" && change.afterMrc != null && change.afterMrc > 0 || change.action === "cancel" && change.beforeMrc != null && change.beforeMrc > 0);
   const showDelta = change.delta != null && change.delta !== 0;
   const isNoopModify = change.action === "modify" && !showPriceChange && !showDelta;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs", children: [
-    /* @__PURE__ */ jsx("span", { className: `font-bold w-3 text-center ${glyph.color}`, title: glyph.label, children: glyph.sign }),
+    /* @__PURE__ */ jsx("span", { className: `font-bold w-3 text-center ${glyph.color}`, title: actionGlyphLabel(t, change.action), children: glyph.sign }),
     /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: change.name }),
-    showPriceChange && /* @__PURE__ */ jsxs("span", { className: "font-mono text-muted-foreground", children: [
-      fmt(change.beforeMrc, currency),
-      " \u2192 ",
-      fmt(change.afterMrc, currency),
-      "/mo"
-    ] }),
-    showSinglePrice && change.action === "add" && /* @__PURE__ */ jsxs("span", { className: "font-mono text-muted-foreground", children: [
-      fmt(change.afterMrc, currency),
-      "/mo"
-    ] }),
-    showSinglePrice && change.action === "cancel" && /* @__PURE__ */ jsxs("span", { className: "font-mono text-muted-foreground", children: [
-      "was ",
-      fmt(change.beforeMrc, currency),
-      "/mo"
-    ] }),
-    showDelta && /* @__PURE__ */ jsxs(
+    showPriceChange && /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.changeLog.priceChangePerMonth", "{before} \u2192 {after}/mo", {
+      before: fmt(change.beforeMrc, currency),
+      after: fmt(change.afterMrc, currency)
+    }) }),
+    showSinglePrice && change.action === "add" && /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.changeLog.pricePerMonth", "{price}/mo", { price: fmt(change.afterMrc, currency) }) }),
+    showSinglePrice && change.action === "cancel" && /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground", children: t("cpq.inventory.subscriptions.detail.changeLog.wasPricePerMonth", "was {price}/mo", { price: fmt(change.beforeMrc, currency) }) }),
+    showDelta && /* @__PURE__ */ jsx(
       "span",
       {
         className: `font-mono font-medium ${change.delta > 0 ? "text-status-success-text" : "text-destructive"}`,
-        children: [
-          "(",
-          change.delta > 0 ? "+" : "",
-          fmt(change.delta, currency),
-          "/mo)"
-        ]
+        children: t("cpq.inventory.subscriptions.detail.changeLog.deltaPerMonth", "({delta}/mo)", {
+          delta: `${change.delta > 0 ? "+" : ""}${fmt(change.delta, currency)}`
+        })
       }
     ),
-    isNoopModify && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground italic", children: "no price change" })
+    isNoopModify && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground italic", children: t("cpq.inventory.subscriptions.detail.changeLog.noPriceChange", "no price change") })
   ] });
 }
 export {