@dainamite/cpq 0.6.0 → 0.7.0

package/src/modules/cpq/widgets/injection/customer-inventory/widget.client.tsx

@@ -2,14 +2,15 @@
 import * as React from 'react'
 import type { InjectionWidgetComponentProps } from '@open-mercato/shared/modules/widgets/injection'
 import { useRouter } from 'next/navigation'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Tag } from '@open-mercato/ui/primitives/tag'
 import {
   assetStatusMap,
-  formatStatusLabel,
   subscriptionStatusMap,
   type AssetStatus,
   type SubscriptionStatus,
 } from '../../../components/statusMaps'
+import { inventoryStatusLabel } from '../../../backend/cpq/inventory/shared'
 
 // ─── Types ───────────────────────────────────────────────────────
 
@@ -79,13 +80,14 @@ function fmt(amount: number, currency: string): string {
 }
 
 function StatusBadge({ status }: { status: string }) {
+  const t = useT()
   const variant =
     subscriptionStatusMap[status as SubscriptionStatus] ??
     assetStatusMap[status as AssetStatus] ??
     'neutral'
   return (
     <Tag variant={variant} dot>
-      {formatStatusLabel(status)}
+      {inventoryStatusLabel(t, status)}
     </Tag>
   )
 }
@@ -93,6 +95,7 @@ function StatusBadge({ status }: { status: string }) {
 // ─── Main Widget ─────────────────────────────────────────────────
 
 export default function CustomerInventoryWidget({ data, context }: InjectionWidgetComponentProps & { context?: Record<string, unknown> }) {
+  const t = useT()
   const router = useRouter()
   const record = data as Record<string, unknown> | null
   const companyRecord = record?.company as Record<string, unknown> | undefined
@@ -121,12 +124,12 @@ export default function CustomerInventoryWidget({ data, context }: InjectionWidg
     return () => { cancelled = true }
   }, [customerId])
 
-  if (!customerId) return <div className="p-4 text-sm text-muted-foreground">No customer context available.</div>
+  if (!customerId) return <div className="p-4 text-sm text-muted-foreground">{t('cpq.widgets.customerInventory.noContext', 'No customer context available.')}</div>
 
   if (loading) {
     return (
       <div className="flex items-center gap-2 p-6 text-sm text-muted-foreground">
-        <Spinner /> Loading inventory…
+        <Spinner /> {t('cpq.widgets.customerInventory.loading', 'Loading inventory…')}
       </div>
     )
   }
@@ -139,7 +142,7 @@ export default function CustomerInventoryWidget({ data, context }: InjectionWidg
             <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
           </svg>
         </div>
-        <p className="text-sm text-muted-foreground">No inventory records found.</p>
+        <p className="text-sm text-muted-foreground">{t('cpq.widgets.customerInventory.empty', 'No inventory records found.')}</p>
       </div>
     )
   }
@@ -148,19 +151,19 @@ export default function CustomerInventoryWidget({ data, context }: InjectionWidg
   const currency = summary.currencyCode || 'USD'
 
   const tabs: { key: TabKey; label: string; count: number }[] = [
-    { key: 'subscriptions', label: 'Subscriptions', count: inventory.subscriptions.length },
-    { key: 'items', label: 'Subscription Items', count: inventory.subscriptionItems.length },
-    { key: 'assets', label: 'Assets', count: inventory.assets.length },
+    { key: 'subscriptions', label: t('cpq.widgets.customerInventory.tabs.subscriptions', 'Subscriptions'), count: inventory.subscriptions.length },
+    { key: 'items', label: t('cpq.widgets.customerInventory.tabs.items', 'Subscription Items'), count: inventory.subscriptionItems.length },
+    { key: 'assets', label: t('cpq.widgets.customerInventory.tabs.assets', 'Assets'), count: inventory.assets.length },
   ]
 
   return (
     <div className="space-y-4">
       {/* Summary Cards */}
       <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-        <SummaryCard label="Active Subscriptions" value={String(summary.activeSubscriptions)} />
-        <SummaryCard label="Total MRC" value={fmt(summary.totalMrc, currency)} mono />
-        <SummaryCard label="Active Assets" value={String(summary.activeAssets)} />
-        <SummaryCard label="Pending Items" value={String(summary.pendingItems)} />
+        <SummaryCard label={t('cpq.widgets.customerInventory.summary.activeSubscriptions', 'Active Subscriptions')} value={String(summary.activeSubscriptions)} />
+        <SummaryCard label={t('cpq.widgets.customerInventory.summary.totalMrc', 'Total MRC')} value={fmt(summary.totalMrc, currency)} mono />
+        <SummaryCard label={t('cpq.widgets.customerInventory.summary.activeAssets', 'Active Assets')} value={String(summary.activeAssets)} />
+        <SummaryCard label={t('cpq.widgets.customerInventory.summary.pendingItems', 'Pending Items')} value={String(summary.pendingItems)} />
       </div>
 
       {/* Tab Switcher */}
@@ -189,7 +192,7 @@ export default function CustomerInventoryWidget({ data, context }: InjectionWidg
       {/* Link to full page */}
       <div className="pt-2 text-right">
         <a href="/backend/cpq/inventory" className="text-sm text-primary hover:underline">
-          View full inventory →
+          {t('cpq.widgets.customerInventory.viewFull', 'View full inventory →')}
         </a>
       </div>
     </div>
@@ -210,18 +213,19 @@ function SummaryCard({ label, value, mono }: { label: string; value: string; mon
 // ─── Subscriptions Table ─────────────────────────────────────────
 
 function SubscriptionsTable({ items, currency, onOpen }: { items: Subscription[]; currency: string; onOpen: (id: string) => void }) {
+  const t = useT()
   if (items.length === 0) return <EmptyTab />
   return (
     <div className="rounded-lg border bg-card overflow-hidden">
       <table className="w-full text-sm">
         <thead>
           <tr className="border-b border-border bg-muted/40 text-muted-foreground">
-            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">Name</th>
-            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">Status</th>
-            <th className="px-4 py-2.5 text-right text-xs font-medium uppercase tracking-wide">MRC</th>
-            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">Billing</th>
-            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">Start Date</th>
-            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">Term End</th>
+            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.name', 'Name')}</th>
+            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.status', 'Status')}</th>
+            <th className="px-4 py-2.5 text-right text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.mrc', 'MRC')}</th>
+            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.billing', 'Billing')}</th>
+            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.startDate', 'Start Date')}</th>
+            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.termEnd', 'Term End')}</th>
           </tr>
         </thead>
         <tbody>
@@ -248,17 +252,18 @@ function SubscriptionsTable({ items, currency, onOpen }: { items: Subscription[]
 // ─── Subscription Items Table ────────────────────────────────────
 
 function SubscriptionItemsTable({ items, currency, onOpen }: { items: SubscriptionItem[]; currency: string; onOpen: (subscriptionId: string) => void }) {
+  const t = useT()
   if (items.length === 0) return <EmptyTab />
   return (
     <div className="rounded-lg border bg-card overflow-hidden">
       <table className="w-full text-sm">
         <thead>
           <tr className="border-b border-border bg-muted/40 text-muted-foreground">
-            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">Name</th>
-            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">Status</th>
-            <th className="px-4 py-2.5 text-right text-xs font-medium uppercase tracking-wide">MRC</th>
-            <th className="px-4 py-2.5 text-right text-xs font-medium uppercase tracking-wide">NRC</th>
-            <th className="px-4 py-2.5 text-right text-xs font-medium uppercase tracking-wide">Qty</th>
+            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.name', 'Name')}</th>
+            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.status', 'Status')}</th>
+            <th className="px-4 py-2.5 text-right text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.mrc', 'MRC')}</th>
+            <th className="px-4 py-2.5 text-right text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.nrc', 'NRC')}</th>
+            <th className="px-4 py-2.5 text-right text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.qty', 'Qty')}</th>
           </tr>
         </thead>
         <tbody>
@@ -284,17 +289,18 @@ function SubscriptionItemsTable({ items, currency, onOpen }: { items: Subscripti
 // ─── Assets Table ────────────────────────────────────────────────
 
 function AssetsTable({ items, currency, onOpen }: { items: Asset[]; currency: string; onOpen: (id: string) => void }) {
+  const t = useT()
   if (items.length === 0) return <EmptyTab />
   return (
     <div className="rounded-lg border bg-card overflow-hidden">
       <table className="w-full text-sm">
         <thead>
           <tr className="border-b border-border bg-muted/40 text-muted-foreground">
-            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">Name</th>
-            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">Type</th>
-            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">Status</th>
-            <th className="px-4 py-2.5 text-right text-xs font-medium uppercase tracking-wide">Price</th>
-            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">Linked To</th>
+            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.name', 'Name')}</th>
+            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.type', 'Type')}</th>
+            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.status', 'Status')}</th>
+            <th className="px-4 py-2.5 text-right text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.price', 'Price')}</th>
+            <th className="px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide">{t('cpq.widgets.customerInventory.table.linkedTo', 'Linked To')}</th>
           </tr>
         </thead>
         <tbody>
@@ -309,7 +315,7 @@ function AssetsTable({ items, currency, onOpen }: { items: Asset[]; currency: st
               <td className="px-4 py-3"><StatusBadge status={a.status} /></td>
               <td className="px-4 py-3 text-right font-mono">{fmt(a.purchasePrice, a.currencyCode || currency)}</td>
               <td className="px-4 py-3 text-muted-foreground">
-                {a.subscriptionId ? `Sub ${a.subscriptionId.slice(0, 8)}…` : '—'}
+                {a.subscriptionId ? t('cpq.widgets.customerInventory.table.linkedSubscription', 'Sub {id}…', { id: a.subscriptionId.slice(0, 8) }) : '—'}
               </td>
             </tr>
           ))}
@@ -322,9 +328,10 @@ function AssetsTable({ items, currency, onOpen }: { items: Asset[]; currency: st
 // ─── Shared ──────────────────────────────────────────────────────
 
 function EmptyTab() {
+  const t = useT()
   return (
     <div className="rounded-lg border bg-card py-8 text-center text-sm text-muted-foreground">
-      No records in this category.
+      {t('cpq.widgets.customerInventory.emptyTab', 'No records in this category.')}
     </div>
   )
 }

package/src/modules/cpq/widgets/injection/order-cpq-tab/widget.client.tsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 import type { InjectionWidgetComponentProps } from '@open-mercato/shared/modules/widgets/injection'
 import { useRouter } from 'next/navigation'
 import { Tag } from '@open-mercato/ui/primitives/tag'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import {
   formatStatusLabel,
   orderCpqStatusMap,
@@ -28,6 +29,7 @@ function fmt(amount: number | undefined | null, currency: string): string {
 
 export default function OrderCpqTabWidget({ data }: InjectionWidgetComponentProps<any, any>) {
   const router = useRouter()
+  const t = useT()
   const salesOrderId = data?.id as string | undefined
   const [cpqOrders, setCpqOrders] = React.useState<CpqOrderSummary[]>([])
   const [loading, setLoading] = React.useState(true)
@@ -52,7 +54,7 @@ export default function OrderCpqTabWidget({ data }: InjectionWidgetComponentProp
           <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
           <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
         </svg>
-        Loading CPQ orders…
+        {t('cpq.widgets.orderCpqTab.loading', 'Loading CPQ orders…')}
       </div>
     )
   }
@@ -60,7 +62,7 @@ export default function OrderCpqTabWidget({ data }: InjectionWidgetComponentProp
   if (cpqOrders.length === 0) {
     return (
       <div className="py-8 text-center text-sm text-muted-foreground">
-        No CPQ orders linked to this sales order.
+        {t('cpq.widgets.orderCpqTab.empty', 'No CPQ orders linked to this sales order.')}
       </div>
     )
   }
@@ -82,12 +84,12 @@ export default function OrderCpqTabWidget({ data }: InjectionWidgetComponentProp
           <div className="flex items-center gap-4 text-xs">
             {o.pricingSummary && (
               <>
-                <span><span className="text-muted-foreground">NRC </span><span className="font-mono font-medium">{fmt(o.pricingSummary.nrcTotal, o.currencyCode)}</span></span>
-                <span><span className="text-muted-foreground">MRC </span><span className="font-mono font-medium">{fmt(o.pricingSummary.mrcTotal, o.currencyCode)}</span></span>
+                <span><span className="text-muted-foreground">{t('cpq.lines.nrc', 'NRC')} </span><span className="font-mono font-medium">{fmt(o.pricingSummary.nrcTotal, o.currencyCode)}</span></span>
+                <span><span className="text-muted-foreground">{t('cpq.lines.mrc', 'MRC')} </span><span className="font-mono font-medium">{fmt(o.pricingSummary.mrcTotal, o.currencyCode)}</span></span>
               </>
             )}
             <span className="text-muted-foreground">{new Date(o.createdAt).toLocaleDateString()}</span>
-            <span className="text-primary font-medium">Open →</span>
+            <span className="text-primary font-medium">{t('cpq.widgets.orderCpqTab.open', 'Open →')}</span>
           </div>
         </div>
       ))}

package/src/modules/cpq/widgets/injection/quote-configurator/widget.client.tsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 import type { InjectionWidgetComponentProps } from '@open-mercato/shared/modules/widgets/injection'
 import { useRouter } from 'next/navigation'
 import { Tag } from '@open-mercato/ui/primitives/tag'
+import { useT, type TranslateFn } from '@open-mercato/shared/lib/i18n/context'
 import {
   formatStatusLabel,
   quoteCpqStatusMap,
@@ -58,10 +59,24 @@ function fmt(amount: number, currency: string): string {
   return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount)
 }
 
+function chargeTypeLabel(t: TranslateFn, chargeType: ResolvedCharge['chargeType']): string {
+  switch (chargeType) {
+    case 'nrc':
+      return t('cpq.lines.chargeType.nrc', 'nrc')
+    case 'mrc':
+      return t('cpq.lines.chargeType.mrc', 'mrc')
+    case 'usage':
+      return t('cpq.lines.chargeType.usage', 'usage')
+    default:
+      return chargeType
+  }
+}
+
 // ─── Main Widget (read-only) ─────────────────────────────────────
 
 export default function QuoteConfiguratorWidget({ data }: InjectionWidgetComponentProps) {
   const router = useRouter()
+  const t = useT()
   const record = data as Record<string, unknown> | null
   const quoteId = (record?.id as string) ?? null
 
@@ -83,12 +98,12 @@ export default function QuoteConfiguratorWidget({ data }: InjectionWidgetCompone
     return () => { cancelled = true }
   }, [quoteId])
 
-  if (!quoteId) return <div className="p-4 text-sm text-muted-foreground">No quote context available.</div>
+  if (!quoteId) return <div className="p-4 text-sm text-muted-foreground">{t('cpq.widgets.quoteConfigurator.noContext', 'No quote context available.')}</div>
 
   if (loading) {
     return (
       <div className="flex items-center gap-2 p-6 text-sm text-muted-foreground">
-        <Spinner /> Loading CPQ configuration…
+        <Spinner /> {t('cpq.widgets.quoteConfigurator.loading', 'Loading CPQ configuration…')}
       </div>
     )
   }
@@ -105,7 +120,7 @@ export default function QuoteConfiguratorWidget({ data }: InjectionWidgetCompone
             <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
           </svg>
         </div>
-        <p className="text-sm text-muted-foreground mb-4">This quote has no CPQ configuration yet.</p>
+        <p className="text-sm text-muted-foreground mb-4">{t('cpq.widgets.quoteConfigurator.noConfig', 'This quote has no CPQ configuration yet.')}</p>
         <button
           onClick={() => router.push(`/backend/cpq/quotes/new?quoteId=${quoteId}&customerId=${custId}`)}
           className="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm hover:bg-primary/90 transition-colors"
@@ -113,9 +128,9 @@ export default function QuoteConfiguratorWidget({ data }: InjectionWidgetCompone
           <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
           </svg>
-          Create CPQ Quote
+          {t('cpq.widgets.quoteConfigurator.create', 'Create CPQ Quote')}
         </button>
-        {!custId && <p className="mt-2 text-xs text-status-warning-text">Assign a customer to this quote first.</p>}
+        {!custId && <p className="mt-2 text-xs text-status-warning-text">{t('cpq.widgets.quoteConfigurator.assignCustomer', 'Assign a customer to this quote first.')}</p>}
       </div>
     )
   }
@@ -146,7 +161,7 @@ export default function QuoteConfiguratorWidget({ data }: InjectionWidgetCompone
           onClick={() => router.push(`/backend/cpq/quotes/${cpqQuote.id}`)}
           className="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground shadow-sm hover:bg-primary/90 transition-colors"
         >
-          Open CPQ Configurator
+          {t('cpq.widgets.quoteConfigurator.open', 'Open CPQ Configurator')}
           <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
           </svg>
@@ -156,7 +171,7 @@ export default function QuoteConfiguratorWidget({ data }: InjectionWidgetCompone
       {/* Lines */}
       {cpqQuote.lines.length === 0 ? (
         <div className="rounded-lg border bg-card py-8 text-center text-sm text-muted-foreground">
-          No items configured yet.
+          {t('cpq.widgets.quoteConfigurator.noLines', 'No items configured yet.')}
         </div>
       ) : (
         <div className="rounded-lg border bg-card divide-y">
@@ -178,9 +193,9 @@ export default function QuoteConfiguratorWidget({ data }: InjectionWidgetCompone
                       <span className="font-medium text-sm">{line.offeringName}</span>
                       {line.quantity > 1 && <span className="rounded bg-muted px-1.5 py-0.5 text-xs font-medium">×{line.quantity}</span>}
                       {line.isConfigured ? (
-                        <Tag variant="success" className="px-1.5 text-xs">configured</Tag>
+                        <Tag variant="success" className="px-1.5 text-xs">{t('cpq.quotes.detail.lineConfigured', 'configured')}</Tag>
                       ) : (
-                        <Tag variant="warning" className="px-1.5 text-xs">incomplete</Tag>
+                        <Tag variant="warning" className="px-1.5 text-xs">{t('cpq.quotes.detail.lineIncomplete', 'incomplete')}</Tag>
                       )}
                     </div>
                     {line.validationErrors && line.validationErrors.length > 0 && (
@@ -188,8 +203,8 @@ export default function QuoteConfiguratorWidget({ data }: InjectionWidgetCompone
                     )}
                   </div>
                   <div className="shrink-0 text-right text-xs space-y-0.5">
-                    {line.nrcTotal > 0 && <div><span className="text-muted-foreground">NRC </span><span className="font-mono font-medium">{fmt(line.nrcTotal, currency)}</span></div>}
-                    {line.mrcTotal > 0 && <div><span className="text-muted-foreground">MRC </span><span className="font-mono font-medium">{fmt(line.mrcTotal, currency)}</span></div>}
+                    {line.nrcTotal > 0 && <div><span className="text-muted-foreground">{t('cpq.lines.nrc', 'NRC')} </span><span className="font-mono font-medium">{fmt(line.nrcTotal, currency)}</span></div>}
+                    {line.mrcTotal > 0 && <div><span className="text-muted-foreground">{t('cpq.lines.mrc', 'MRC')} </span><span className="font-mono font-medium">{fmt(line.mrcTotal, currency)}</span></div>}
                   </div>
                 </div>
 
@@ -199,18 +214,18 @@ export default function QuoteConfiguratorWidget({ data }: InjectionWidgetCompone
                     <table className="w-full text-xs">
                       <thead>
                         <tr className="text-muted-foreground">
-                          <th className="text-left py-1 font-medium">Charge</th>
-                          <th className="text-left py-1 font-medium">Type</th>
-                          <th className="text-right py-1 font-medium">Unit Price</th>
-                          <th className="text-right py-1 font-medium">Qty</th>
-                          <th className="text-right py-1 font-medium">Total</th>
+                          <th className="text-left py-1 font-medium">{t('cpq.widgets.quoteConfigurator.charges.charge', 'Charge')}</th>
+                          <th className="text-left py-1 font-medium">{t('cpq.widgets.quoteConfigurator.charges.type', 'Type')}</th>
+                          <th className="text-right py-1 font-medium">{t('cpq.widgets.quoteConfigurator.charges.unitPrice', 'Unit Price')}</th>
+                          <th className="text-right py-1 font-medium">{t('cpq.widgets.quoteConfigurator.charges.qty', 'Qty')}</th>
+                          <th className="text-right py-1 font-medium">{t('cpq.widgets.quoteConfigurator.charges.total', 'Total')}</th>
                         </tr>
                       </thead>
                       <tbody>
                         {line.charges.map((c, i) => (
                           <tr key={i} className="border-t border-dashed border-border/50">
                             <td className="py-1">{c.chargeName}</td>
-                            <td className="py-1 uppercase">{c.chargeType}</td>
+                            <td className="py-1 uppercase">{chargeTypeLabel(t, c.chargeType)}</td>
                             <td className="py-1 text-right font-mono">{fmt(c.unitPrice, currency)}</td>
                             <td className="py-1 text-right font-mono">{c.quantity ?? '—'}</td>
                             <td className="py-1 text-right font-mono">{c.totalPrice != null ? fmt(c.totalPrice, currency) : c.note ?? '—'}</td>
@@ -231,19 +246,19 @@ export default function QuoteConfiguratorWidget({ data }: InjectionWidgetCompone
         <div className="rounded-lg border bg-card p-4">
           <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
             <div>
-              <p className="text-xs text-muted-foreground">Non-Recurring (NRC)</p>
+              <p className="text-xs text-muted-foreground">{t('cpq.quotes.summary.nrc', 'Non-Recurring (NRC)')}</p>
               <p className="text-lg font-semibold font-mono">{fmt(summary.nrcTotal, currency)}</p>
             </div>
             <div>
-              <p className="text-xs text-muted-foreground">Monthly Recurring (MRC)</p>
+              <p className="text-xs text-muted-foreground">{t('cpq.quotes.summary.mrc', 'Monthly Recurring (MRC)')}</p>
               <p className="text-lg font-semibold font-mono">{fmt(summary.mrcTotal, currency)}</p>
             </div>
             {summary.usageCharges.length > 0 && (
               <div>
-                <p className="text-xs text-muted-foreground">Usage Charges</p>
+                <p className="text-xs text-muted-foreground">{t('cpq.quotes.summary.usageCharges', 'Usage Charges')}</p>
                 <div className="mt-1 space-y-0.5">
                   {summary.usageCharges.map((uc, i) => (
-                    <p key={i} className="text-xs">{uc.chargeName}: {fmt(uc.unitPrice, currency)}/unit</p>
+                    <p key={i} className="text-xs">{uc.chargeName}: {t('cpq.lines.perUnit', '{price}/unit', { price: fmt(uc.unitPrice, currency) })}</p>
                   ))}
                 </div>
               </div>

package/src/modules/cpq/widgets/injection-table.ts

@@ -1,11 +1,17 @@
 import type { ModuleInjectionTable } from '@open-mercato/shared/modules/widgets/injection'
 
+// Tab labels: the sales document page translates `groupLabel` as an i18n key
+// (`t(groupLabel, metadata.title)`), so the sales tabs use CPQ keys. The
+// customers detail pages (legacy v1) render `groupLabel` verbatim, so the
+// customer-inventory tab keeps plain English until the host translates it
+// (spec 2026-11-15-cpq-multi-language, Risks).
+
 export const injectionTable: ModuleInjectionTable = {
   'sales.document.detail.quote:tabs': [
     {
       widgetId: 'cpq.injection.quote-configurator',
       kind: 'tab',
-      groupLabel: 'CPQ Configuration',
+      groupLabel: 'cpq.widgets.quoteConfigurator.tab',
       groupDescription: 'Configure, price, and manage quote offerings',
       priority: 70,
     },
@@ -14,7 +20,7 @@ export const injectionTable: ModuleInjectionTable = {
     {
       widgetId: 'cpq.injection.order-cpq-tab',
       kind: 'tab',
-      groupLabel: 'CPQ Order',
+      groupLabel: 'cpq.widgets.orderCpqTab.tab',
       groupDescription: 'View the CPQ order associated with this sales order',
       priority: 60,
     },

package/src/modules/cpq/workflows/WizardRunner.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { WizardEngineProvider, useWizardEngine } from './engine'
 import { getStepType } from './registry'
 import type { WizardDefinitionResult, WizardStepProps } from './types'
@@ -9,6 +10,7 @@ import type { TenantScope } from '../services/types'
 // ─── Step renderer ──────────────────────────────────────────────
 
 function StepRenderer({ scope }: { scope: TenantScope }) {
+  const t = useT()
   const { state, completeStep, goBack, skipStep } = useWizardEngine()
   const { currentStep, stepData, completedSteps, currentStepId, params, quoteId, customerId } = state
 
@@ -33,18 +35,18 @@ function StepRenderer({ scope }: { scope: TenantScope }) {
     return (
       <div className="rounded-lg border bg-card p-6 text-center space-y-3">
         <p className="text-sm text-destructive">
-          Unknown step type: <strong>{currentStep.type}</strong>
+          {t('cpq.wizard.runner.unknownStepType', 'Unknown step type:')} <strong>{currentStep.type}</strong>
         </p>
-        <p className="text-sm text-muted-foreground">This step type is not registered. Register it via <code className="font-mono text-xs bg-muted px-1 py-0.5 rounded">registerStepType()</code>.</p>
+        <p className="text-sm text-muted-foreground">{t('cpq.wizard.runner.notRegistered', 'This step type is not registered. Register it via')} <code className="font-mono text-xs bg-muted px-1 py-0.5 rounded">{'registerStepType()'}</code>.</p>
         <div className="flex gap-2 justify-center pt-2">
           {state.canGoBack && (
             <button type="button" onClick={goBack} className="inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted">
-              Back
+              {t('cpq.common.back', 'Back')}
             </button>
           )}
           {state.canSkip && (
             <button type="button" onClick={skipStep} className="inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted">
-              Skip
+              {t('cpq.wizard.skip', 'Skip')}
             </button>
           )}
         </div>
@@ -98,6 +100,7 @@ function WizardProgress() {
 // ─── Header ─────────────────────────────────────────────────────
 
 function WizardHeader() {
+  const t = useT()
   const { state } = useWizardEngine()
 
   return (
@@ -105,7 +108,7 @@ function WizardHeader() {
       <div>
         <h2 className="text-lg font-semibold">{state.definition.name}</h2>
         <p className="text-sm text-muted-foreground">
-          Step: {state.currentStep.title}
+          {t('cpq.wizard.runner.currentStep', 'Step: {title}', { title: state.currentStep.title })}
         </p>
       </div>
     </div>

package/src/modules/cpq/workflows/WizardTrigger.tsx

@@ -2,15 +2,16 @@
 
 import React, { useCallback, useState } from 'react'
 import { useRouter } from 'next/navigation'
+import { useT, type TranslateFn } from '@open-mercato/shared/lib/i18n/context'
 import type { WizardDefinitionResult } from './types'
 
 // ─── API helper ─────────────────────────────────────────────────
 
-async function apiJson<T>(url: string): Promise<T> {
+async function apiJson<T>(t: TranslateFn, url: string): Promise<T> {
   const res = await fetch(url)
   if (!res.ok) {
     const body = await res.json().catch(() => ({}))
-    throw new Error(body.error ?? `API error ${res.status}`)
+    throw new Error(body.error ?? t('cpq.wizard.trigger.apiError', 'API error {status}', { status: res.status }))
   }
   return res.json() as Promise<T>
 }
@@ -43,13 +44,16 @@ export function WizardTrigger({
   offeringCode,
   params: wizardParams = {},
   surface = 'backend',
-  label = 'Start Wizard',
+  label,
   variant = 'button',
   className,
   basePath,
   onStart,
 }: WizardTriggerProps) {
   const router = useRouter()
+  const t = useT()
+  const buttonLabel = label ?? t('cpq.wizard.trigger.start', 'Start Wizard')
+  const startingLabel = t('cpq.wizard.trigger.starting', 'Starting...')
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
@@ -63,18 +67,20 @@ export function WizardTrigger({
 
       if (wizardCode) {
         definition = await apiJson<WizardDefinitionResult>(
+          t,
           `/api/cpq/wizards?code=${encodeURIComponent(wizardCode)}`,
         )
       } else {
         const resolveParams = new URLSearchParams({ surface })
         if (offeringCode) resolveParams.set('offeringCode', offeringCode)
         definition = await apiJson<WizardDefinitionResult>(
+          t,
           `/api/cpq/wizards/resolve?${resolveParams}`,
         )
       }
 
       if (!definition) {
-        setError('No matching wizard found')
+        setError(t('cpq.wizard.trigger.notFound', 'No matching wizard found'))
         return
       }
 
@@ -90,11 +96,11 @@ export function WizardTrigger({
         router.push(`${path}/${definition.code}${qs ? `?${qs}` : ''}`)
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to start wizard')
+      setError(err instanceof Error ? err.message : t('cpq.wizard.trigger.failed', 'Failed to start wizard'))
     } finally {
       setLoading(false)
     }
-  }, [wizardCode, offeringCode, wizardParams, surface, basePath, onStart, router])
+  }, [wizardCode, offeringCode, wizardParams, surface, basePath, onStart, router, t])
 
   if (variant === 'link') {
     return (
@@ -106,7 +112,7 @@ export function WizardTrigger({
           handleClick()
         }}
       >
-        {loading ? 'Starting...' : label}
+        {loading ? startingLabel : buttonLabel}
         {error && <span className="ml-2 text-xs text-destructive">{error}</span>}
       </a>
     )
@@ -121,7 +127,7 @@ export function WizardTrigger({
         tabIndex={0}
         onKeyDown={(e) => { if (e.key === 'Enter') handleClick() }}
       >
-        <p className="font-semibold text-sm">{label}</p>
+        <p className="font-semibold text-sm">{buttonLabel}</p>
         {error && <p className="mt-1 text-xs text-destructive">{error}</p>}
       </div>
     )
@@ -135,7 +141,7 @@ export function WizardTrigger({
       onClick={handleClick}
       disabled={loading}
     >
-      {loading ? 'Starting...' : label}
+      {loading ? startingLabel : buttonLabel}
       {error && <span className="ml-2 text-xs text-destructive/70">{error}</span>}
     </button>
   )