@dainamite/cpq 0.6.0 → 0.7.0

package/src/modules/cpq/backend/cpq/quotes/page.tsx

@@ -70,8 +70,8 @@ type CustomerPickerProps = {
   error: string | null
 }
 
-function getCustomerLabel(c: Customer) {
-  return c.display_name || c.displayName || c.name || c.companyName || 'Unnamed'
+function getCustomerLabel(c: Customer, unnamedLabel: string) {
+  return c.display_name || c.displayName || c.name || c.companyName || unnamedLabel
 }
 
 function getCustomerEmail(c: Customer) {
@@ -79,6 +79,8 @@ function getCustomerEmail(c: Customer) {
 }
 
 function CustomerPickerModal({ open, onClose, onSelect, creating, error }: CustomerPickerProps) {
+  const t = useT()
+  const unnamedLabel = t('cpq.quotes.customerPicker.unnamed', 'Unnamed')
   const [customers, setCustomers] = React.useState<Customer[]>([])
   const [customersLoading, setCustomersLoading] = React.useState(false)
   const [search, setSearch] = React.useState('')
@@ -110,7 +112,7 @@ function CustomerPickerModal({ open, onClose, onSelect, creating, error }: Custo
     if (!search.trim()) return true
     const q = search.toLowerCase()
     return (
-      getCustomerLabel(c).toLowerCase().includes(q) ||
+      getCustomerLabel(c, unnamedLabel).toLowerCase().includes(q) ||
       getCustomerEmail(c).toLowerCase().includes(q) ||
       c.id.toLowerCase().includes(q)
     )
@@ -126,14 +128,16 @@ function CustomerPickerModal({ open, onClose, onSelect, creating, error }: Custo
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between border-b px-4 py-3">
-          <h3 className="text-sm font-medium">Select Customer for New Quote</h3>
+          <h3 className="text-sm font-medium">
+            {t('cpq.quotes.customerPicker.title', 'Select Customer for New Quote')}
+          </h3>
           <button
             type="button"
             onClick={onClose}
             disabled={creating}
             className="text-muted-foreground hover:text-foreground text-lg font-bold leading-none cursor-pointer disabled:cursor-not-allowed"
           >
-            &times;
+            {'\u00d7'}
           </button>
         </div>
         <div className="p-4 space-y-3">
@@ -141,7 +145,7 @@ function CustomerPickerModal({ open, onClose, onSelect, creating, error }: Custo
           <div className="relative">
             <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
             <Input
-              placeholder="Search customers…"
+              placeholder={t('cpq.quotes.customerPicker.searchPlaceholder', 'Search customers…')}
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               autoFocus
@@ -151,11 +155,13 @@ function CustomerPickerModal({ open, onClose, onSelect, creating, error }: Custo
           <div className="max-h-72 overflow-y-auto space-y-1">
             {customersLoading ? (
               <div className="py-8 text-center text-sm text-muted-foreground">
-                Loading customers…
+                {t('cpq.quotes.customerPicker.loading', 'Loading customers…')}
               </div>
             ) : filtered.length === 0 ? (
               <div className="py-8 text-center text-sm text-muted-foreground">
-                {search ? 'No customers match your search.' : 'No customers found.'}
+                {search
+                  ? t('cpq.quotes.customerPicker.noMatch', 'No customers match your search.')
+                  : t('cpq.quotes.customerPicker.empty', 'No customers found.')}
               </div>
             ) : (
               filtered.map((c) => (
@@ -166,7 +172,7 @@ function CustomerPickerModal({ open, onClose, onSelect, creating, error }: Custo
                   disabled={creating}
                   className="w-full rounded-md border px-3 py-2.5 text-left hover:border-primary hover:bg-primary/5 transition-colors disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed"
                 >
-                  <p className="text-sm font-medium">{getCustomerLabel(c)}</p>
+                  <p className="text-sm font-medium">{getCustomerLabel(c, unnamedLabel)}</p>
                   {getCustomerEmail(c) && (
                     <p className="text-xs text-muted-foreground mt-0.5">{getCustomerEmail(c)}</p>
                   )}
@@ -200,17 +206,17 @@ export default function CpqQuotesListPage() {
 
   const statusOptions = React.useMemo(
     () => [
-      { value: 'new', label: 'New' },
-      { value: 'incomplete', label: 'Incomplete' },
-      { value: 'ready', label: 'Ready' },
-      { value: 'in_approval', label: 'In Approval' },
-      { value: 'approved', label: 'Approved' },
-      { value: 'with_customer', label: 'With Customer' },
-      { value: 'accepted', label: 'Accepted' },
-      { value: 'rejected', label: 'Rejected' },
-      { value: 'cancelled', label: 'Cancelled' },
+      { value: 'new', label: t('cpq.quotes.status.new', 'New') },
+      { value: 'incomplete', label: t('cpq.quotes.status.incomplete', 'Incomplete') },
+      { value: 'ready', label: t('cpq.quotes.status.ready', 'Ready') },
+      { value: 'in_approval', label: t('cpq.quotes.status.in_approval', 'In Approval') },
+      { value: 'approved', label: t('cpq.quotes.status.approved', 'Approved') },
+      { value: 'with_customer', label: t('cpq.quotes.status.with_customer', 'With Customer') },
+      { value: 'accepted', label: t('cpq.quotes.status.accepted', 'Accepted') },
+      { value: 'rejected', label: t('cpq.quotes.status.rejected', 'Rejected') },
+      { value: 'cancelled', label: t('cpq.quotes.status.cancelled', 'Cancelled') },
     ],
-    [],
+    [t],
   )
 
   const filters = React.useMemo<FilterDef[]>(
@@ -245,7 +251,9 @@ export default function CpqQuotesListPage() {
           setShowCustomerPicker(false)
           router.push(`/backend/cpq/quotes/${body.id}`)
         } else {
-          setCreateError(body.error ?? `Failed to create quote (${res.status})`)
+          setCreateError(
+            body.error ?? t('cpq.quotes.create.error', 'Failed to create quote ({status})', { status: res.status }),
+          )
         }
       } catch (err) {
         setCreateError((err as Error).message)
@@ -253,7 +261,7 @@ export default function CpqQuotesListPage() {
         setCreating(false)
       }
     },
-    [router],
+    [router, t],
   )
 
   const columns = React.useMemo<ColumnDef<QuoteConfig>[]>(

package/src/modules/cpq/backend/cpq/specifications/[id]/DependsOnRulesEditor.tsx

@@ -5,6 +5,7 @@ import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
 import { Tag } from '@open-mercato/ui/primitives/tag'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import type { DependsOnEffect, DependsOnRule } from './page'
 
 // ─── Helpers ─────────────────────────────────────────────────────
@@ -68,6 +69,7 @@ export function DependsOnRulesEditor({
   parentOptions,
   childOptions,
 }: DependsOnRulesEditorProps) {
+  const t = useT()
   const updateRule = (index: number, patch: Partial<DependsOnRule>) => {
     const next = rules.map((r, i) => (i === index ? { ...r, ...patch } : r))
     onChange(next)
@@ -85,11 +87,11 @@ export function DependsOnRulesEditor({
     return (
       <div className="space-y-2">
         <p className="text-xs text-muted-foreground">
-          No rules yet. Add at least one to make this dependency effective.
+          {t('cpq.specifications.dependsOn.empty', 'No rules yet. Add at least one to make this dependency effective.')}
         </p>
         <Button type="button" variant="outline" size="sm" onClick={addRule}>
           <Plus className="h-3.5 w-3.5" />
-          Add rule
+          {t('cpq.specifications.dependsOn.addRule', 'Add rule')}
         </Button>
       </div>
     )
@@ -113,7 +115,7 @@ export function DependsOnRulesEditor({
       </div>
       <Button type="button" variant="outline" size="sm" onClick={addRule}>
         <Plus className="h-3.5 w-3.5" />
-        Add rule
+        {t('cpq.specifications.dependsOn.addRule', 'Add rule')}
       </Button>
     </div>
   )
@@ -140,11 +142,12 @@ function RuleRow({
   onThenChange,
   onRemove,
 }: RuleRowProps) {
+  const t = useT()
   return (
     <div className="grid grid-cols-[1fr_auto_1fr_auto] items-start gap-2 rounded-md border bg-muted/20 p-2">
       <div>
         <label className="block text-[10px] font-medium uppercase tracking-wide text-muted-foreground mb-0.5">
-          When parent =
+          {t('cpq.specifications.dependsOn.whenParent', 'When parent =')}
         </label>
         {parentOptions && parentOptions.length > 0 ? (
           <select
@@ -152,7 +155,7 @@ function RuleRow({
             onChange={(e) => onWhenChange(e.target.value)}
             className="w-full rounded-md border bg-background px-2 py-1.5 text-sm"
           >
-            <option value="">— Select value —</option>
+            <option value="">{t('cpq.specifications.dependsOn.selectValue', '— Select value —')}</option>
             {parentOptions.map((opt) => (
               <option key={opt.value} value={opt.value}>
                 {opt.label}
@@ -163,7 +166,7 @@ function RuleRow({
           <Input
             value={rule.when}
             onChange={(e) => onWhenChange(e.target.value)}
-            placeholder="Parent value"
+            placeholder={t('cpq.specifications.dependsOn.parentValuePlaceholder', 'Parent value')}
           />
         )}
       </div>
@@ -178,7 +181,7 @@ function RuleRow({
         type="button"
         onClick={onRemove}
         className="mt-5 self-start rounded p-1.5 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
-        title="Remove rule"
+        title={t('cpq.specifications.dependsOn.removeRule', 'Remove rule')}
       >
         <X className="h-4 w-4" />
       </button>
@@ -196,19 +199,20 @@ type ThenInputProps = {
 }
 
 function ThenInput({ effect, value, childOptions, onChange }: ThenInputProps) {
+  const t = useT()
   if (effect === 'toggle_required') {
     const isRequired = value === true
     return (
       <div>
         <label className="block text-[10px] font-medium uppercase tracking-wide text-muted-foreground mb-0.5">
-          Then required is
+          {t('cpq.specifications.dependsOn.thenRequiredIs', 'Then required is')}
         </label>
         <label className="flex items-center gap-2 rounded-md border bg-background px-2 py-1.5 text-sm cursor-pointer">
           <Checkbox
             checked={isRequired}
             onCheckedChange={(checked) => onChange(checked === true)}
           />
-          <span>{isRequired ? 'Required' : 'Optional'}</span>
+          <span>{isRequired ? t('cpq.specifications.dependsOn.required', 'Required') : t('cpq.specifications.dependsOn.optional', 'Optional')}</span>
         </label>
       </div>
     )
@@ -218,7 +222,7 @@ function ThenInput({ effect, value, childOptions, onChange }: ThenInputProps) {
     return (
       <div>
         <label className="block text-[10px] font-medium uppercase tracking-wide text-muted-foreground mb-0.5">
-          Then set value to
+          {t('cpq.specifications.dependsOn.thenSetValueTo', 'Then set value to')}
         </label>
         {childOptions && childOptions.length > 0 ? (
           <select
@@ -226,7 +230,7 @@ function ThenInput({ effect, value, childOptions, onChange }: ThenInputProps) {
             onChange={(e) => onChange(e.target.value)}
             className="w-full rounded-md border bg-background px-2 py-1.5 text-sm"
           >
-            <option value="">— Select value —</option>
+            <option value="">{t('cpq.specifications.dependsOn.selectValue', '— Select value —')}</option>
             {childOptions.map((opt) => (
               <option key={opt.value} value={opt.value}>
                 {opt.label}
@@ -237,7 +241,7 @@ function ThenInput({ effect, value, childOptions, onChange }: ThenInputProps) {
           <Input
             value={typeof value === 'string' ? value : ''}
             onChange={(e) => onChange(e.target.value)}
-            placeholder="Value"
+            placeholder={t('cpq.specifications.dependsOn.valuePlaceholder', 'Value')}
           />
         )}
       </div>
@@ -257,7 +261,7 @@ function ThenInput({ effect, value, childOptions, onChange }: ThenInputProps) {
     return (
       <div>
         <label className="block text-[10px] font-medium uppercase tracking-wide text-muted-foreground mb-0.5">
-          Then allow only
+          {t('cpq.specifications.dependsOn.thenAllowOnly', 'Then allow only')}
         </label>
         <div className="flex flex-wrap gap-1.5 rounded-md border bg-background px-2 py-1.5 text-sm min-h-[34px]">
           {childOptions.map((opt) => {
@@ -288,12 +292,12 @@ function ThenInput({ effect, value, childOptions, onChange }: ThenInputProps) {
   return (
     <div>
       <label className="block text-[10px] font-medium uppercase tracking-wide text-muted-foreground mb-0.5">
-        Then allow only (comma-separated)
+        {t('cpq.specifications.dependsOn.thenAllowOnlyCsv', 'Then allow only (comma-separated)')}
       </label>
       <Input
         value={thenAsCsv(value)}
         onChange={(e) => onChange(csvAsArray(e.target.value))}
-        placeholder="value1, value2, value3"
+        placeholder={t('cpq.specifications.dependsOn.csvPlaceholder', 'value1, value2, value3')}
       />
     </div>
   )