@dainamite/cpq 0.6.0 → 0.7.0

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>

package/src/modules/cpq/workflows/steps/OfferingSelectStep.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 { NumberInput } from '../../components/NumberInput'
 
@@ -43,6 +44,7 @@ function ConfigPanel({
   onChange: (code: string, value: unknown) => void
   onRemove: () => void
 }) {
+  const t = useT()
   const [attributes, setAttributes] = useState<ConstrainedAttribute[]>([])
   const [loading, setLoading] = useState(true)
   const [configVersion, setConfigVersion] = useState(0)
@@ -89,7 +91,7 @@ function ConfigPanel({
     if (attr.attributeType === 'select' || attr.attributeType === 'enum') {
       return (
         <select value={String(value)} onChange={(e) => handleChange(attr.code, e.target.value)} className="w-full rounded-md border px-3 py-2 text-sm">
-          <option value="">Select...</option>
+          <option value="">{t('cpq.wizard.selectPlaceholder', 'Select...')}</option>
           {attr.options?.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
         </select>
       )
@@ -117,12 +119,12 @@ function ConfigPanel({
     <div className="rounded-lg border p-4 space-y-3">
       <div className="flex items-center justify-between border-b pb-2">
         <h4 className="text-sm font-medium">{offering.name}</h4>
-        <button type="button" onClick={onRemove} className="text-xs text-muted-foreground hover:text-foreground">Remove</button>
+        <button type="button" onClick={onRemove} className="text-xs text-muted-foreground hover:text-foreground">{t('cpq.wizard.remove', 'Remove')}</button>
       </div>
       {loading ? (
-        <div className="text-sm text-muted-foreground">Loading attributes...</div>
+        <div className="text-sm text-muted-foreground">{t('cpq.wizard.loadingAttributes', 'Loading attributes...')}</div>
       ) : attributes.length === 0 ? (
-        <div className="text-sm text-muted-foreground">No configurable attributes.</div>
+        <div className="text-sm text-muted-foreground">{t('cpq.wizard.steps.offeringSelect.noAttributes', 'No configurable attributes.')}</div>
       ) : (
         <div className="space-y-3">
           {attributes.map((attr) => (
@@ -150,6 +152,7 @@ function BandwidthIndicator({
   portCapacityMb: number
   items: SelectedItem[]
 }) {
+  const t = useT()
   const totalBandwidth = items.reduce((sum, item) => {
     const bw = Number(item.configuration.bandwidth_mb) || 0
     return sum + bw
@@ -161,9 +164,9 @@ function BandwidthIndicator({
   return (
     <div className="rounded-lg border p-3 space-y-2">
       <div className="flex items-center justify-between text-xs">
-        <span className="font-medium">Bandwidth Utilization</span>
+        <span className="font-medium">{t('cpq.wizard.steps.offeringSelect.bandwidth.title', 'Bandwidth Utilization')}</span>
         <span className={overCapacity ? 'text-destructive font-medium' : 'text-muted-foreground'}>
-          {totalBandwidth} / {portCapacityMb} MB
+          {t('cpq.wizard.steps.offeringSelect.bandwidth.usage', '{used} / {capacity} MB', { used: totalBandwidth, capacity: portCapacityMb })}
         </span>
       </div>
       <div className="h-2 rounded-full bg-muted overflow-hidden">
@@ -174,7 +177,7 @@ function BandwidthIndicator({
       </div>
       {overCapacity && (
         <p className="text-xs text-destructive">
-          Total bandwidth exceeds port capacity by {totalBandwidth - portCapacityMb} MB
+          {t('cpq.wizard.steps.offeringSelect.bandwidth.exceeded', 'Total bandwidth exceeds port capacity by {excess} MB', { excess: totalBandwidth - portCapacityMb })}
         </p>
       )}
     </div>
@@ -186,6 +189,7 @@ function BandwidthIndicator({
 const PORT_SIZE_MB: Record<string, number> = { '1G': 1000, '10G': 10000, '100G': 100000 }
 
 export function OfferingSelectStep({ config, onComplete, onBack, stepData, currentStepId, completedSteps, quoteId, customerId }: WizardStepProps) {
+  const t = useT()
   const [offerings, setOfferings] = useState<Offering[]>([])
   const [selectedItems, setSelectedItems] = useState<SelectedItem[]>([])
   const [loading, setLoading] = useState(true)
@@ -336,7 +340,7 @@ export function OfferingSelectStep({ config, onComplete, onBack, stepData, curre
   }, [selectedItems, enableConfiguration, quoteId, resolvedCustomerId, onComplete])
 
   if (loading) {
-    return <div className="text-sm text-muted-foreground">Loading offerings...</div>
+    return <div className="text-sm text-muted-foreground">{t('cpq.wizard.steps.offeringSelect.loading', 'Loading offerings...')}</div>
   }
 
   // Offerings not yet added
@@ -368,18 +372,18 @@ export function OfferingSelectStep({ config, onComplete, onBack, stepData, curre
             >
               <div className="flex items-center justify-between">
                 <h4 className="text-sm font-medium">{o.name}</h4>
-                {isAdded && <span className="text-xs text-primary font-medium">Added</span>}
+                {isAdded && <span className="text-xs text-primary font-medium">{t('cpq.wizard.steps.offeringSelect.added', 'Added')}</span>}
               </div>
               <p className="text-xs text-muted-foreground mt-1">{o.description || o.code}</p>
               {!isAdded && (
-                <span className="text-xs text-primary mt-2 inline-block">+ Add</span>
+                <span className="text-xs text-primary mt-2 inline-block">{t('cpq.wizard.steps.offeringSelect.add', '+ Add')}</span>
               )}
             </div>
           )
         })}
         {offerings.length === 0 && (
           <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">
-            No offerings available.
+            {t('cpq.wizard.steps.offeringSelect.empty', 'No offerings available.')}
           </div>
         )}
       </div>
@@ -392,7 +396,7 @@ export function OfferingSelectStep({ config, onComplete, onBack, stepData, curre
       {/* Configuration panels for selected items */}
       {enableConfiguration && selectedItems.length > 0 && (
         <div className="space-y-3">
-          <h4 className="text-sm font-medium">Selected Services ({selectedItems.length})</h4>
+          <h4 className="text-sm font-medium">{t('cpq.wizard.steps.offeringSelect.selectedServices', 'Selected Services ({count})', { count: selectedItems.length })}</h4>
           {selectedItems.map((item, index) => (
             <ConfigPanel
               key={`${item.offering.id}-${index}`}
@@ -408,11 +412,11 @@ export function OfferingSelectStep({ config, onComplete, onBack, stepData, curre
       {/* No configuration — just show selected list */}
       {!enableConfiguration && selectedItems.length > 0 && (
         <div className="space-y-2">
-          <h4 className="text-sm font-medium">Selected ({selectedItems.length})</h4>
+          <h4 className="text-sm font-medium">{t('cpq.wizard.steps.offeringSelect.selected', 'Selected ({count})', { count: selectedItems.length })}</h4>
           {selectedItems.map((item, index) => (
             <div key={`${item.offering.id}-${index}`} className="flex items-center justify-between rounded-md border p-3">
               <span className="text-sm font-medium">{item.offering.name}</span>
-              <button type="button" onClick={() => removeItem(index)} className="text-xs text-muted-foreground hover:text-foreground">Remove</button>
+              <button type="button" onClick={() => removeItem(index)} className="text-xs text-muted-foreground hover:text-foreground">{t('cpq.wizard.remove', 'Remove')}</button>
             </div>
           ))}
         </div>
@@ -421,7 +425,7 @@ export function OfferingSelectStep({ 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
@@ -430,7 +434,7 @@ export function OfferingSelectStep({ config, onComplete, onBack, stepData, curre
           disabled={selectedItems.length === 0 || saving}
           className="inline-flex items-center justify-center rounded-md bg-primary px-5 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
         >
-          {saving ? 'Saving...' : 'Next'}
+          {saving ? t('cpq.common.saving', 'Saving...') : t('cpq.wizard.next', 'Next')}
         </button>
       </div>
     </div>

package/src/modules/cpq/workflows/steps/ProductConfigureStep.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 { NumberInput } from '../../components/NumberInput'
 
@@ -34,6 +35,7 @@ function resolveOfferingId(config: Record<string, unknown>, stepData: Record<str
 }
 
 export function ProductConfigureStep({ config, onComplete, onBack, stepData, currentStepId, completedSteps, quoteId, customerId }: WizardStepProps) {
+  const t = useT()
   const [attributes, setAttributes] = useState<ConstrainedAttribute[]>([])
   const [values, setValues] = useState<Record<string, unknown>>({})
   const [loading, setLoading] = useState(true)
@@ -181,7 +183,7 @@ export function ProductConfigureStep({ config, onComplete, onBack, stepData, cur
           disabled={isReadonly}
           className="w-full rounded-md border px-3 py-2 text-sm disabled:opacity-50"
         >
-          <option value="">Select...</option>
+          <option value="">{t('cpq.wizard.selectPlaceholder', 'Select...')}</option>
           {attr.options?.map((opt) => (
             <option key={opt.value} value={opt.value}>{opt.label}</option>
           ))}
@@ -226,13 +228,13 @@ export function ProductConfigureStep({ config, onComplete, onBack, stepData, cur
   }
 
   if (loading) {
-    return <div className="text-sm text-muted-foreground">Loading attributes...</div>
+    return <div className="text-sm text-muted-foreground">{t('cpq.wizard.loadingAttributes', 'Loading attributes...')}</div>
   }
 
   if (!offeringId) {
     return (
       <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">
-        No offering selected. Please go back and select an offering.
+        {t('cpq.wizard.steps.productConfigure.noOffering', 'No offering selected. Please go back and select an offering.')}
       </div>
     )
   }
@@ -264,13 +266,13 @@ export function ProductConfigureStep({ config, onComplete, onBack, stepData, cur
           return renderGroup(group.label, groupAttrs)
         })
       ) : (
-        renderGroup('Configuration', attributes)
+        renderGroup(t('cpq.lines.configuration', 'Configuration'), attributes)
       )}
 
       <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
@@ -279,7 +281,7 @@ export function ProductConfigureStep({ config, onComplete, onBack, stepData, cur
           disabled={saving}
           className="inline-flex items-center justify-center rounded-md bg-primary px-5 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
         >
-          {saving ? 'Saving...' : 'Next'}
+          {saving ? t('cpq.common.saving', 'Saving...') : t('cpq.wizard.next', 'Next')}
         </button>
       </div>
     </div>

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

@@ -1,6 +1,7 @@
 'use client'
 
 import React, { useState, useEffect, useCallback } from 'react'
+import { useT, type TranslateFn } from '@open-mercato/shared/lib/i18n/context'
 import type { WizardStepProps } from '../types'
 
 type ResolvedCharge = {
@@ -47,7 +48,21 @@ function fmt(n: number, currency = 'USD') {
   return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(n)
 }
 
+function chargeTypeLabel(t: TranslateFn, chargeType: string): 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
+  }
+}
+
 export function ReviewStep({ config, onComplete, onBack, completedSteps, quoteId }: WizardStepProps) {
+  const t = useT()
   const [quote, setQuote] = useState<QuoteData | null>(null)
   const [loading, setLoading] = useState(true)
   const [submitting, setSubmitting] = useState(false)
@@ -55,7 +70,7 @@ export function ReviewStep({ config, onComplete, onBack, completedSteps, quoteId
   const showChargeBreakdown = config.showChargeBreakdown !== false
   const showAdjustments = config.showAdjustments !== false
   const submitAction = (config.submitAction as string) ?? 'save'
-  const submitLabel = (config.submitLabel as string) ?? 'Complete'
+  const submitLabel = (config.submitLabel as string) ?? t('cpq.wizard.steps.review.complete', 'Complete')
 
   const loadQuote = useCallback(async () => {
     if (!quoteId) { setLoading(false); return }
@@ -102,13 +117,13 @@ export function ReviewStep({ config, onComplete, onBack, completedSteps, quoteId
   }, [quoteId, submitAction, quote, onComplete])
 
   if (loading) {
-    return <div className="text-sm text-muted-foreground">Loading quote summary...</div>
+    return <div className="text-sm text-muted-foreground">{t('cpq.wizard.steps.review.loading', 'Loading quote summary...')}</div>
   }
 
   if (!quote) {
     return (
       <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">
-        No quote data available. Please go back and configure items.
+        {t('cpq.wizard.steps.review.noData', 'No quote data available. Please go back and configure items.')}
       </div>
     )
   }
@@ -119,25 +134,25 @@ export function ReviewStep({ config, onComplete, onBack, completedSteps, quoteId
     <div className="space-y-5">
       {/* Quote summary */}
       <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
-        <h4 className="text-sm font-medium">Quote Summary</h4>
+        <h4 className="text-sm font-medium">{t('cpq.wizard.steps.review.summaryTitle', 'Quote Summary')}</h4>
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <span className="text-xs text-muted-foreground">NRC Total</span>
+            <span className="text-xs text-muted-foreground">{t('cpq.wizard.steps.review.nrcTotal', 'NRC Total')}</span>
             <p className="text-lg font-semibold">{fmt(pricingSummary.nrcTotal, pricingSummary.currencyCode)}</p>
           </div>
           <div>
-            <span className="text-xs text-muted-foreground">MRC Total</span>
+            <span className="text-xs text-muted-foreground">{t('cpq.wizard.steps.review.mrcTotal', 'MRC Total')}</span>
             <p className="text-lg font-semibold">{fmt(pricingSummary.mrcTotal, pricingSummary.currencyCode)}</p>
           </div>
           {pricingSummary.discountTotal > 0 && (
             <div>
-              <span className="text-xs text-muted-foreground">Discounts</span>
+              <span className="text-xs text-muted-foreground">{t('cpq.wizard.steps.review.discounts', 'Discounts')}</span>
               <p className="text-sm">-{fmt(pricingSummary.discountTotal, pricingSummary.currencyCode)}</p>
             </div>
           )}
           {pricingSummary.surchargeTotal > 0 && (
             <div>
-              <span className="text-xs text-muted-foreground">Surcharges</span>
+              <span className="text-xs text-muted-foreground">{t('cpq.wizard.steps.review.surcharges', 'Surcharges')}</span>
               <p className="text-sm">+{fmt(pricingSummary.surchargeTotal, pricingSummary.currencyCode)}</p>
             </div>
           )}
@@ -146,18 +161,18 @@ export function ReviewStep({ config, onComplete, onBack, completedSteps, quoteId
 
       {/* Line items */}
       <div className="space-y-3">
-        <h4 className="text-sm font-medium">Items ({lines.length})</h4>
+        <h4 className="text-sm font-medium">{t('cpq.wizard.steps.review.items', 'Items ({count})', { count: lines.length })}</h4>
         <div className="space-y-2">
           {lines.map((line) => (
             <div key={line.lineId} className="rounded-lg border p-3 space-y-2">
               <div className="flex items-center justify-between">
                 <strong className="text-sm">{line.offeringName}</strong>
                 <span className="text-sm">
-                  {fmt(line.nrcTotal, pricingSummary.currencyCode)} NRC / {fmt(line.mrcTotal, pricingSummary.currencyCode)} MRC
+                  {t('cpq.wizard.linePricing', '{nrc} NRC / {mrc} MRC', { nrc: fmt(line.nrcTotal, pricingSummary.currencyCode), mrc: fmt(line.mrcTotal, pricingSummary.currencyCode) })}
                 </span>
               </div>
               {line.quantity > 1 && (
-                <span className="text-xs text-muted-foreground">Quantity: {line.quantity}</span>
+                <span className="text-xs text-muted-foreground">{t('cpq.wizard.steps.review.quantity', 'Quantity: {quantity}', { quantity: line.quantity })}</span>
               )}
 
               {showChargeBreakdown && line.charges?.length > 0 && (
@@ -165,9 +180,9 @@ export function ReviewStep({ config, onComplete, onBack, completedSteps, quoteId
                   <table className="w-full text-xs">
                     <thead>
                       <tr className="border-b bg-muted/30">
-                        <th className="px-3 py-1.5 text-left font-medium">Charge</th>
-                        <th className="px-3 py-1.5 text-left font-medium">Type</th>
-                        <th className="px-3 py-1.5 text-right font-medium">Price</th>
+                        <th className="px-3 py-1.5 text-left font-medium">{t('cpq.wizard.steps.review.charges.charge', 'Charge')}</th>
+                        <th className="px-3 py-1.5 text-left font-medium">{t('cpq.wizard.steps.review.charges.type', 'Type')}</th>
+                        <th className="px-3 py-1.5 text-right font-medium">{t('cpq.wizard.steps.review.charges.price', 'Price')}</th>
                       </tr>
                     </thead>
                     <tbody>
@@ -175,9 +190,9 @@ export function ReviewStep({ config, onComplete, onBack, completedSteps, quoteId
                         <React.Fragment key={charge.chargeCode}>
                           <tr className="border-b last:border-0">
                             <td className="px-3 py-1.5">{charge.chargeName}</td>
-                            <td className="px-3 py-1.5 uppercase">{charge.chargeType}</td>
+                            <td className="px-3 py-1.5 uppercase">{chargeTypeLabel(t, charge.chargeType)}</td>
                             <td className="px-3 py-1.5 text-right">
-                              {charge.totalPrice != null ? fmt(charge.totalPrice, charge.currencyCode) : `${fmt(charge.unitPrice, charge.currencyCode)}/unit`}
+                              {charge.totalPrice != null ? fmt(charge.totalPrice, charge.currencyCode) : t('cpq.lines.perUnit', '{price}/unit', { price: fmt(charge.unitPrice, charge.currencyCode) })}
                             </td>
                           </tr>
                           {showAdjustments && charge.adjustments?.map((adj) => (
@@ -202,7 +217,7 @@ export function ReviewStep({ config, onComplete, onBack, completedSteps, quoteId
       <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
@@ -211,7 +226,7 @@ export function ReviewStep({ config, onComplete, onBack, completedSteps, quoteId
           disabled={submitting}
           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"
         >
-          {submitting ? 'Submitting...' : submitLabel}
+          {submitting ? t('cpq.wizard.steps.review.submitting', 'Submitting...') : submitLabel}
         </button>
       </div>
     </div>

package/src/modules/cpq/workflows/steps/index.ts

@@ -9,6 +9,8 @@ import { InventorySelectStep } from './InventorySelectStep'
 export function registerBuiltInStepTypes() {
   registerStepType({
     type: 'customer_select',
+    labelKey: 'cpq.wizard.steps.customerSelect.label',
+    descriptionKey: 'cpq.wizard.steps.customerSelect.description',
     label: 'Customer Selection',
     description: 'Search and select a customer for the quote.',
     component: CustomerSelectStep,
@@ -16,6 +18,8 @@ export function registerBuiltInStepTypes() {
 
   registerStepType({
     type: 'offering_select',
+    labelKey: 'cpq.wizard.steps.offeringSelect.label',
+    descriptionKey: 'cpq.wizard.steps.offeringSelect.description',
     label: 'Offering Selection',
     description: 'Browse and select a product offering from the catalog.',
     component: OfferingSelectStep,
@@ -23,6 +27,8 @@ export function registerBuiltInStepTypes() {
 
   registerStepType({
     type: 'product_configure',
+    labelKey: 'cpq.wizard.steps.productConfigure.label',
+    descriptionKey: 'cpq.wizard.steps.productConfigure.description',
     label: 'Product Configuration',
     description: 'Configure run-time attributes for the selected offering.',
     component: ProductConfigureStep,
@@ -30,6 +36,8 @@ export function registerBuiltInStepTypes() {
 
   registerStepType({
     type: 'item_list',
+    labelKey: 'cpq.wizard.steps.itemList.label',
+    descriptionKey: 'cpq.wizard.steps.itemList.description',
     label: 'Item List',
     description: 'View and manage child items on the quote.',
     component: ItemListStep,
@@ -37,6 +45,8 @@ export function registerBuiltInStepTypes() {
 
   registerStepType({
     type: 'review',
+    labelKey: 'cpq.wizard.steps.review.label',
+    descriptionKey: 'cpq.wizard.steps.review.description',
     label: 'Review & Submit',
     description: 'Review the quote summary and submit.',
     component: ReviewStep,
@@ -44,6 +54,8 @@ export function registerBuiltInStepTypes() {
 
   registerStepType({
     type: 'inventory_select',
+    labelKey: 'cpq.wizard.steps.inventorySelect.label',
+    descriptionKey: 'cpq.wizard.steps.inventorySelect.description',
     label: 'Inventory Selection',
     description: 'Select existing customer inventory items (stub — pending inventory domain).',
     component: InventorySelectStep,

package/src/modules/cpq/workflows/types.ts

@@ -97,6 +97,10 @@ export interface WizardStepProps {
 export interface WizardStepType {
   type: string
   label: string
+  /** i18n key for `label`; the English `label` is the fallback. */
+  labelKey?: string
   description: string
+  /** i18n key for `description`; the English `description` is the fallback. */
+  descriptionKey?: string
   component: React.ComponentType<WizardStepProps>
 }