@dainamite/cpq 0.5.0 → 0.7.0

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>
   )

package/src/modules/cpq/workflows/steps/CustomerSelectStep.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import React, { useState, useEffect, useCallback } from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import type { WizardStepProps } from '../types'
 
 type Customer = {
@@ -11,6 +12,7 @@ type Customer = {
 }
 
 export function CustomerSelectStep({ config, onComplete, onBack, stepData, currentStepId, completedSteps }: WizardStepProps) {
+  const t = useT()
   const [customers, setCustomers] = useState<Customer[]>([])
   const [search, setSearch] = useState('')
   const [selected, setSelected] = useState<Customer | null>(null)
@@ -59,7 +61,7 @@ export function CustomerSelectStep({ config, onComplete, onBack, stepData, curre
       <div className="flex gap-2">
         <input
           type="text"
-          placeholder="Search customers..."
+          placeholder={t('cpq.wizard.steps.customerSelect.searchPlaceholder', 'Search customers...')}
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
@@ -71,21 +73,23 @@ export function CustomerSelectStep({ config, onComplete, onBack, stepData, curre
           disabled={loading}
           className="inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted disabled:opacity-50"
         >
-          {loading ? 'Searching...' : 'Search'}
+          {loading
+            ? t('cpq.wizard.steps.customerSelect.searching', 'Searching...')
+            : t('cpq.wizard.steps.customerSelect.search', 'Search')}
         </button>
       </div>
 
       {selected && (
         <div className="rounded-md border-2 border-primary bg-primary/5 p-3 flex items-center justify-between">
           <span className="text-sm">
-            <strong>Selected:</strong> {selected.name}
+            <strong>{t('cpq.wizard.steps.customerSelect.selected', 'Selected:')}</strong> {selected.name}
           </span>
           <button
             type="button"
             onClick={() => setSelected(null)}
             className="text-xs text-muted-foreground hover:text-foreground underline"
           >
-            Clear
+            {t('cpq.wizard.steps.customerSelect.clear', 'Clear')}
           </button>
         </div>
       )}
@@ -107,7 +111,7 @@ export function CustomerSelectStep({ config, onComplete, onBack, stepData, curre
         ))}
         {customers.length === 0 && !loading && (
           <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">
-            No customers found.
+            {t('cpq.wizard.steps.customerSelect.empty', 'No customers found.')}
           </div>
         )}
       </div>
@@ -115,7 +119,7 @@ export function CustomerSelectStep({ config, onComplete, onBack, stepData, curre
       <div className="flex gap-2 justify-end pt-2">
         {completedSteps.length > 0 && (
           <button type="button" onClick={onBack} className="inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted">
-            Back
+            {t('cpq.common.back', 'Back')}
           </button>
         )}
         <button
@@ -128,7 +132,7 @@ export function CustomerSelectStep({ config, onComplete, onBack, stepData, curre
           disabled={!selected}
           className="inline-flex items-center justify-center rounded-md bg-primary px-5 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
         >
-          Next
+          {t('cpq.wizard.next', 'Next')}
         </button>
       </div>
     </div>

package/src/modules/cpq/workflows/steps/InventorySelectStep.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import type { WizardStepProps } from '../types'
 
 /**
@@ -8,17 +9,20 @@ import type { WizardStepProps } from '../types'
  * Implementation deferred until the inventory/subscription domain exists.
  */
 export function InventorySelectStep({ onBack, onSkip, completedSteps }: WizardStepProps) {
+  const t = useT()
   return (
     <div className="rounded-lg border bg-card p-6 text-center space-y-3">
-      <h3 className="text-lg font-semibold">Inventory Selection</h3>
+      <h3 className="text-lg font-semibold">{t('cpq.wizard.steps.inventorySelect.title', 'Inventory Selection')}</h3>
       <p className="text-sm text-muted-foreground">
-        This step type is not yet implemented. It will allow selecting existing customer
-        inventory items for modification or renewal once the inventory domain is available.
+        {t(
+          'cpq.wizard.steps.inventorySelect.notImplemented',
+          'This step type is not yet implemented. It will allow selecting existing customer inventory items for modification or renewal once the inventory domain is available.',
+        )}
       </p>
       <div className="flex gap-2 justify-center pt-2">
         {completedSteps.length > 0 && (
           <button type="button" onClick={onBack} className="inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted">
-            Back
+            {t('cpq.common.back', 'Back')}
           </button>
         )}
         <button
@@ -26,7 +30,7 @@ export function InventorySelectStep({ onBack, onSkip, completedSteps }: WizardSt
           onClick={onSkip}
           className="inline-flex items-center justify-center rounded-md border border-primary px-4 py-2 text-sm font-medium text-primary hover:bg-primary/10"
         >
-          Skip
+          {t('cpq.wizard.skip', 'Skip')}
         </button>
       </div>
     </div>

package/src/modules/cpq/workflows/steps/ItemListStep.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import React, { useState, useEffect, useCallback } from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import type { WizardStepProps } from '../types'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Tag } from '@open-mercato/ui/primitives/tag'
@@ -21,6 +22,7 @@ function fmt(n: number, currency = 'USD') {
 }
 
 export function ItemListStep({ config, onComplete, onBack, stepData, completedSteps, quoteId }: WizardStepProps) {
+  const t = useT()
   const [lines, setLines] = useState<QuoteLine[]>([])
   const [loading, setLoading] = useState(true)
 
@@ -67,19 +69,23 @@ export function ItemListStep({ config, onComplete, onBack, stepData, completedSt
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <span className="text-xs text-muted-foreground">
-          {lines.length} item{lines.length !== 1 ? 's' : ''}
-          {minItems > 0 && ` (min: ${minItems})`}
-          {maxItems < Infinity && ` (max: ${maxItems})`}
+          {lines.length !== 1
+            ? t('cpq.wizard.steps.itemList.count.other', '{count} items', { count: lines.length })
+            : t('cpq.wizard.steps.itemList.count.one', '{count} item', { count: lines.length })}
+          {minItems > 0 && ' '}
+          {minItems > 0 && t('cpq.wizard.steps.itemList.min', '(min: {min})', { min: minItems })}
+          {maxItems < Infinity && ' '}
+          {maxItems < Infinity && t('cpq.wizard.steps.itemList.max', '(max: {max})', { max: maxItems })}
         </span>
         {canAddMore && (
           <span className="text-xs text-muted-foreground">
-            Use the offering browser to add items to the quote, then return here.
+            {t('cpq.wizard.steps.itemList.hint', 'Use the offering browser to add items to the quote, then return here.')}
           </span>
         )}
       </div>
 
       {loading ? (
-        <div className="text-sm text-muted-foreground">Loading items...</div>
+        <div className="text-sm text-muted-foreground">{t('cpq.wizard.steps.itemList.loading', 'Loading items...')}</div>
       ) : (
         <div className="space-y-2">
           {lines.map((line) => (
@@ -92,14 +98,14 @@ export function ItemListStep({ config, onComplete, onBack, stepData, completedSt
                 {line.quantity > 1 && <span className="ml-2 text-xs text-muted-foreground">x{line.quantity}</span>}
                 {!line.isConfigured && (
                   <Tag variant="warning" className="ml-2">
-                    Needs configuration
+                    {t('cpq.wizard.steps.itemList.needsConfiguration', 'Needs configuration')}
                   </Tag>
                 )}
               </div>
               <div className="flex items-center gap-3">
                 {showPricing && (
                   <span className="text-xs">
-                    {fmt(line.nrcTotal)} NRC / {fmt(line.mrcTotal)} MRC
+                    {t('cpq.wizard.linePricing', '{nrc} NRC / {mrc} MRC', { nrc: fmt(line.nrcTotal), mrc: fmt(line.mrcTotal) })}
                   </span>
                 )}
                 <Button
@@ -108,14 +114,14 @@ export function ItemListStep({ config, onComplete, onBack, stepData, completedSt
                   size="sm"
                   onClick={() => handleRemove(line.lineId)}
                 >
-                  Remove
+                  {t('cpq.wizard.remove', 'Remove')}
                 </Button>
               </div>
             </div>
           ))}
           {lines.length === 0 && (
             <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">
-              No items added yet.
+              {t('cpq.wizard.steps.itemList.empty', 'No items added yet.')}
             </div>
           )}
         </div>
@@ -124,11 +130,11 @@ export function ItemListStep({ config, onComplete, onBack, stepData, completedSt
       <div className="flex gap-2 justify-end pt-2">
         {completedSteps.length > 0 && (
           <button type="button" onClick={onBack} className="inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted">
-            Back
+            {t('cpq.common.back', 'Back')}
           </button>
         )}
         <button type="button" onClick={loadLines} className="inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted">
-          Refresh
+          {t('cpq.wizard.steps.itemList.refresh', 'Refresh')}
         </button>
         <button
           type="button"
@@ -138,7 +144,7 @@ export function ItemListStep({ config, onComplete, onBack, stepData, completedSt
           disabled={!canProceed}
           className="inline-flex items-center justify-center rounded-md bg-primary px-5 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
         >
-          Next
+          {t('cpq.wizard.next', 'Next')}
         </button>
       </div>
     </div>