@dainamite/cpq 0.2.2

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

@@ -0,0 +1,287 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react'
+import type { WizardStepProps } from '../types'
+import { NumberInput } from '../../components/NumberInput'
+
+type ConstrainedAttribute = {
+  code: string
+  name: string
+  attributeType: string
+  isRequired: boolean
+  options: Array<{ value: string; label: string }> | null
+  constraints: Record<string, unknown> | null
+  defaultValue: unknown | null
+  helpText: string | null
+}
+
+type AttributeGroup = {
+  label: string
+  attributeCodes: string[]
+}
+
+function resolveOfferingId(config: Record<string, unknown>, stepData: Record<string, Record<string, unknown>>): string | null {
+  // Check explicit source
+  const source = config.offeringSource as string | undefined
+  if (source && stepData[source]) {
+    return (stepData[source].offeringId as string) ?? null
+  }
+  // Auto-detect: find first step data with offeringId
+  for (const data of Object.values(stepData)) {
+    if (data.offeringId) return data.offeringId as string
+  }
+  return null
+}
+
+export function ProductConfigureStep({ config, onComplete, onBack, stepData, currentStepId, completedSteps, quoteId, customerId }: WizardStepProps) {
+  const [attributes, setAttributes] = useState<ConstrainedAttribute[]>([])
+  const [values, setValues] = useState<Record<string, unknown>>({})
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [resolvedOfferingId, setResolvedOfferingId] = useState<string | null>(null)
+
+  const directOfferingId = resolveOfferingId(config, stepData)
+  const offeringCode = config.offeringCode as string | undefined
+  const attributeGroups = config.attributeGroups as AttributeGroup[] | undefined
+
+  // Resolve offering by code if no direct offeringId
+  useEffect(() => {
+    if (directOfferingId) {
+      setResolvedOfferingId(directOfferingId)
+      return
+    }
+    if (!offeringCode) return
+    async function resolve() {
+      try {
+        const res = await fetch(`/api/cpq/product-offerings?code=${encodeURIComponent(offeringCode!)}`)
+        if (res.ok) {
+          const data = await res.json()
+          const items = data.items ?? data
+          if (Array.isArray(items) && items.length > 0) {
+            setResolvedOfferingId(items[0].id)
+          }
+        }
+      } catch { /* ignore */ }
+    }
+    resolve()
+  }, [directOfferingId, offeringCode])
+
+  const offeringId = resolvedOfferingId
+  const hiddenAttributes = (config.hiddenAttributes as string[]) ?? []
+  const readonlyAttributes = (config.readonlyAttributes as string[]) ?? []
+
+  // Restore previous values
+  const previousData = stepData[currentStepId] as { configuration?: Record<string, unknown> } | undefined
+
+  useEffect(() => {
+    async function loadAttributes() {
+      if (!offeringId) { setLoading(false); return }
+      setLoading(true)
+      try {
+        const params = new URLSearchParams({ offeringId })
+        if (Object.keys(values).length > 0) {
+          params.set('configuration', JSON.stringify(values))
+        }
+        const res = await fetch(`/api/cpq/quotes/attributes?${params}`)
+        if (res.ok) {
+          const data = await res.json()
+          const attrs = (data.attributes ?? []) as ConstrainedAttribute[]
+          setAttributes(attrs.filter((a) => !hiddenAttributes.includes(a.code)))
+
+          // Set defaults on first load
+          if (Object.keys(values).length === 0) {
+            const defaults: Record<string, unknown> = previousData?.configuration ?? {}
+            for (const attr of attrs) {
+              if (defaults[attr.code] === undefined && attr.defaultValue != null) {
+                defaults[attr.code] = attr.defaultValue
+              }
+            }
+            setValues(defaults)
+          }
+        }
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadAttributes()
+  }, [offeringId]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleChange = useCallback((code: string, value: unknown) => {
+    setValues((prev) => ({ ...prev, [code]: value }))
+  }, [])
+
+  // Resolve customerId from props or stepData
+  const resolvedCustomerId = customerId ?? (() => {
+    for (const data of Object.values(stepData)) {
+      if (data.customerId) return data.customerId as string
+    }
+    return null
+  })()
+
+  const handleComplete = useCallback(async () => {
+    setSaving(true)
+    try {
+      let activeQuoteId = quoteId
+
+      // Auto-create a quote if none exists yet
+      if (!activeQuoteId && resolvedCustomerId && offeringId) {
+        const createRes = await fetch('/api/cpq/quotes', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ customerId: resolvedCustomerId }),
+        })
+        if (createRes.ok) {
+          const quoteData = await createRes.json()
+          activeQuoteId = quoteData.id
+        }
+      }
+
+      if (activeQuoteId && offeringId) {
+        // Check if there's already a line for this offering
+        const existingLineId = (stepData[currentStepId] as { lineId?: string })?.lineId
+
+        if (existingLineId) {
+          await fetch(`/api/cpq/quotes/${activeQuoteId}/items/${existingLineId}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ configuration: values }),
+          })
+          onComplete({ configuration: values, offeringId, lineId: existingLineId, quoteId: activeQuoteId })
+        } else {
+          const res = await fetch(`/api/cpq/quotes/${activeQuoteId}/items`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ offeringId, configuration: values }),
+          })
+          if (res.ok) {
+            const data = await res.json()
+            const line = data.lines?.find((l: { offeringId: string }) => l.offeringId === offeringId)
+            onComplete({ configuration: values, offeringId, lineId: line?.lineId, quoteId: activeQuoteId })
+          } else {
+            onComplete({ configuration: values, offeringId, quoteId: activeQuoteId })
+          }
+        }
+      } else {
+        onComplete({ configuration: values, offeringId })
+      }
+    } finally {
+      setSaving(false)
+    }
+  }, [values, quoteId, offeringId, stepData, currentStepId, onComplete, resolvedCustomerId])
+
+  const renderAttribute = (attr: ConstrainedAttribute) => {
+    const isReadonly = readonlyAttributes.includes(attr.code)
+    const value = values[attr.code] ?? ''
+
+    if (attr.attributeType === 'select' || attr.attributeType === 'enum') {
+      return (
+        <select
+          value={String(value)}
+          onChange={(e) => handleChange(attr.code, e.target.value)}
+          disabled={isReadonly}
+          className="w-full rounded-md border px-3 py-2 text-sm disabled:opacity-50"
+        >
+          <option value="">Select...</option>
+          {attr.options?.map((opt) => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+      )
+    }
+
+    if (attr.attributeType === 'boolean') {
+      return (
+        <label className="flex items-center gap-2 text-sm">
+          <input
+            type="checkbox"
+            checked={Boolean(value)}
+            onChange={(e) => handleChange(attr.code, e.target.checked)}
+            disabled={isReadonly}
+            className="rounded border"
+          />
+          {attr.name}
+        </label>
+      )
+    }
+
+    if (attr.attributeType === 'number') {
+      return (
+        <NumberInput
+          value={value === '' || value == null ? null : Number(value)}
+          onChange={(n) => handleChange(attr.code, n ?? '')}
+          disabled={isReadonly}
+        />
+      )
+    }
+
+    return (
+      <input
+        type="text"
+        value={String(value)}
+        onChange={(e) => handleChange(attr.code, e.target.value)}
+        disabled={isReadonly}
+        className="w-full rounded-md border px-3 py-2 text-sm disabled:opacity-50"
+      />
+    )
+  }
+
+  if (loading) {
+    return <div className="text-sm text-muted-foreground">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.
+      </div>
+    )
+  }
+
+  const renderGroup = (label: string, attrs: ConstrainedAttribute[]) => (
+    <div key={label} className="space-y-3">
+      <h4 className="text-sm font-medium border-b pb-2">{label}</h4>
+      <div className="space-y-3">
+        {attrs.map((attr) => (
+          <div key={attr.code}>
+            <label className="block text-sm font-medium mb-1">
+              {attr.name}
+              {attr.isRequired && <span className="text-destructive ml-0.5">*</span>}
+            </label>
+            {renderAttribute(attr)}
+            {attr.helpText && <p className="text-xs text-muted-foreground mt-1">{attr.helpText}</p>}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="space-y-4">
+      {attributeGroups?.length ? (
+        attributeGroups.map((group) => {
+          const groupAttrs = attributes.filter((a) => group.attributeCodes.includes(a.code))
+          if (groupAttrs.length === 0) return null
+          return renderGroup(group.label, groupAttrs)
+        })
+      ) : (
+        renderGroup('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
+          </button>
+        )}
+        <button
+          type="button"
+          onClick={handleComplete}
+          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'}
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,219 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react'
+import type { WizardStepProps } from '../types'
+
+type ResolvedCharge = {
+  chargeCode: string
+  chargeName: string
+  chargeType: string
+  unitPrice: number
+  totalPrice: number | null
+  currencyCode: string
+  adjustments?: Array<{
+    ruleCode: string
+    ruleName: string
+    ruleType: string
+    delta: number
+  }> | null
+}
+
+type QuoteLine = {
+  lineId: string
+  offeringName: string
+  quantity: number
+  nrcTotal: number
+  mrcTotal: number
+  charges: ResolvedCharge[]
+  isConfigured: boolean
+}
+
+type QuoteData = {
+  id: string
+  quoteNumber: string
+  cpqStatus: string
+  currencyCode: string
+  pricingSummary: {
+    nrcTotal: number
+    mrcTotal: number
+    discountTotal: number
+    surchargeTotal: number
+    currencyCode: string
+  }
+  lines: QuoteLine[]
+}
+
+function fmt(n: number, currency = 'USD') {
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(n)
+}
+
+export function ReviewStep({ config, onComplete, onBack, completedSteps, quoteId }: WizardStepProps) {
+  const [quote, setQuote] = useState<QuoteData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
+
+  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 loadQuote = useCallback(async () => {
+    if (!quoteId) { setLoading(false); return }
+    setLoading(true)
+    try {
+      const res = await fetch(`/api/cpq/quotes/${quoteId}`)
+      if (res.ok) {
+        setQuote(await res.json())
+      }
+    } finally {
+      setLoading(false)
+    }
+  }, [quoteId])
+
+  useEffect(() => { loadQuote() }, [loadQuote])
+
+  const handleSubmit = useCallback(async () => {
+    setSubmitting(true)
+    try {
+      if (quoteId && submitAction !== 'none') {
+        const targetStatus =
+          submitAction === 'submit_for_approval' ? 'in_approval'
+          : submitAction === 'send_to_customer' ? 'with_customer'
+          : undefined
+
+        if (targetStatus) {
+          await fetch(`/api/cpq/quotes/${quoteId}/status`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ targetStatus }),
+          })
+        }
+      }
+
+      onComplete({
+        quoteId,
+        action: submitAction,
+        nrcTotal: quote?.pricingSummary.nrcTotal ?? 0,
+        mrcTotal: quote?.pricingSummary.mrcTotal ?? 0,
+      })
+    } finally {
+      setSubmitting(false)
+    }
+  }, [quoteId, submitAction, quote, onComplete])
+
+  if (loading) {
+    return <div className="text-sm text-muted-foreground">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.
+      </div>
+    )
+  }
+
+  const { pricingSummary, lines } = quote
+
+  return (
+    <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>
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <span className="text-xs text-muted-foreground">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>
+            <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>
+              <p className="text-sm">-{fmt(pricingSummary.discountTotal, pricingSummary.currencyCode)}</p>
+            </div>
+          )}
+          {pricingSummary.surchargeTotal > 0 && (
+            <div>
+              <span className="text-xs text-muted-foreground">Surcharges</span>
+              <p className="text-sm">+{fmt(pricingSummary.surchargeTotal, pricingSummary.currencyCode)}</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Line items */}
+      <div className="space-y-3">
+        <h4 className="text-sm font-medium">Items ({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
+                </span>
+              </div>
+              {line.quantity > 1 && (
+                <span className="text-xs text-muted-foreground">Quantity: {line.quantity}</span>
+              )}
+
+              {showChargeBreakdown && line.charges?.length > 0 && (
+                <div className="rounded border">
+                  <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>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {line.charges.map((charge) => (
+                        <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 text-right">
+                              {charge.totalPrice != null ? fmt(charge.totalPrice, charge.currencyCode) : `${fmt(charge.unitPrice, charge.currencyCode)}/unit`}
+                            </td>
+                          </tr>
+                          {showAdjustments && charge.adjustments?.map((adj) => (
+                            <tr key={adj.ruleCode} className="text-[11px] text-muted-foreground">
+                              <td colSpan={2} className="px-3 py-0.5 pl-6">{adj.ruleName}</td>
+                              <td className="px-3 py-0.5 text-right">
+                                {adj.delta < 0 ? '' : '+'}{fmt(adj.delta, charge.currencyCode)}
+                              </td>
+                            </tr>
+                          ))}
+                        </React.Fragment>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <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
+          </button>
+        )}
+        <button
+          type="button"
+          onClick={handleSubmit}
+          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}
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,51 @@
+import { registerStepType } from '../registry'
+import { CustomerSelectStep } from './CustomerSelectStep'
+import { OfferingSelectStep } from './OfferingSelectStep'
+import { ProductConfigureStep } from './ProductConfigureStep'
+import { ItemListStep } from './ItemListStep'
+import { ReviewStep } from './ReviewStep'
+import { InventorySelectStep } from './InventorySelectStep'
+
+export function registerBuiltInStepTypes() {
+  registerStepType({
+    type: 'customer_select',
+    label: 'Customer Selection',
+    description: 'Search and select a customer for the quote.',
+    component: CustomerSelectStep,
+  })
+
+  registerStepType({
+    type: 'offering_select',
+    label: 'Offering Selection',
+    description: 'Browse and select a product offering from the catalog.',
+    component: OfferingSelectStep,
+  })
+
+  registerStepType({
+    type: 'product_configure',
+    label: 'Product Configuration',
+    description: 'Configure run-time attributes for the selected offering.',
+    component: ProductConfigureStep,
+  })
+
+  registerStepType({
+    type: 'item_list',
+    label: 'Item List',
+    description: 'View and manage child items on the quote.',
+    component: ItemListStep,
+  })
+
+  registerStepType({
+    type: 'review',
+    label: 'Review & Submit',
+    description: 'Review the quote summary and submit.',
+    component: ReviewStep,
+  })
+
+  registerStepType({
+    type: 'inventory_select',
+    label: 'Inventory Selection',
+    description: 'Select existing customer inventory items (stub — pending inventory domain).',
+    component: InventorySelectStep,
+  })
+}

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

@@ -0,0 +1,102 @@
+// ─── Wizard Domain Types ────────────────────────────────────────
+
+import type { TenantScope } from '../services/types'
+
+// ─── Step definition (stored in CpqWizardDefinition.steps JSONB) ──
+
+export interface TransitionCondition {
+  field: string
+  operator: 'eq' | 'neq' | 'gt' | 'lt' | 'gte' | 'lte' | 'exists' | 'not_exists' | 'in'
+  value?: unknown
+}
+
+export interface WizardTransition {
+  targetStepId: string
+  condition?: TransitionCondition
+  isDefault?: boolean
+  label?: string
+}
+
+export interface WizardStepValidation {
+  field: string
+  operator: 'eq' | 'neq' | 'exists' | 'not_exists'
+  value?: unknown
+  message: string
+}
+
+export interface WizardStepDefinition {
+  stepId: string
+  type: string
+  title: string
+  description?: string | null
+  config: Record<string, unknown>
+  transitions: WizardTransition[]
+  isOptional?: boolean
+  validationRules?: WizardStepValidation[]
+}
+
+// ─── Applicability ──────────────────────────────────────────────
+
+export interface WizardApplicability {
+  specCodes?: string[]
+  offeringCodes?: string[]
+  customerSegments?: string[]
+  surface?: 'backend' | 'portal'
+  priority?: number
+}
+
+// ─── Definition result ──────────────────────────────────────────
+
+export interface WizardDefinitionResult {
+  id: string
+  code: string
+  name: string
+  description: string | null
+  version: number
+  steps: WizardStepDefinition[]
+  applicability: WizardApplicability | null
+  paramsSchema: Record<string, unknown> | null
+  surface: string
+  isActive: boolean
+  metadata: Record<string, unknown> | null
+  createdAt: string
+  updatedAt: string
+}
+
+// ─── Service inputs ─────────────────────────────────────────────
+
+export interface WizardResolveContext {
+  surface: 'backend' | 'portal'
+  specCode?: string
+  offeringCode?: string
+  customerSegment?: string
+}
+
+export interface WizardDefinitionFilter {
+  surface?: string
+  isActive?: boolean
+}
+
+// ─── Step type registry ─────────────────────────────────────────
+
+export interface WizardStepProps {
+  stepData: Record<string, Record<string, unknown>>
+  completedSteps: string[]
+  currentStepId: string
+  stepDefinition: WizardStepDefinition
+  config: Record<string, unknown>
+  params: Record<string, unknown>
+  onComplete: (stepOutput: Record<string, unknown>) => void
+  onBack: () => void
+  onSkip: () => void
+  quoteId: string | null
+  customerId: string | null
+  scope: TenantScope
+}
+
+export interface WizardStepType {
+  type: string
+  label: string
+  description: string
+  component: React.ComponentType<WizardStepProps>
+}