@dainamite/cpq 0.5.0 → 0.7.0

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