@dainamite/cpq 0.2.2

package/src/modules/cpq/workflows/engine.tsx

@@ -0,0 +1,278 @@
+'use client'
+
+import React, { createContext, useContext, useReducer, useCallback, useMemo } from 'react'
+import type {
+  WizardDefinitionResult,
+  WizardStepDefinition,
+  TransitionCondition,
+} from './types'
+
+// ─── Engine state ───────────────────────────────────────────────
+
+export interface WizardEngineState {
+  definition: WizardDefinitionResult
+  params: Record<string, unknown>
+  currentStepId: string
+  completedSteps: string[]
+  stepData: Record<string, Record<string, unknown>>
+  currentStep: WizardStepDefinition
+  canGoBack: boolean
+  canSkip: boolean
+  isFirstStep: boolean
+  isLastStep: boolean
+  completionPercent: number
+  quoteId: string | null
+  customerId: string | null
+}
+
+type EngineAction =
+  | { type: 'COMPLETE_STEP'; stepId: string; output: Record<string, unknown>; nextStepId: string }
+  | { type: 'GO_BACK'; prevStepId: string }
+  | { type: 'SKIP_STEP'; nextStepId: string }
+  | { type: 'SET_QUOTE_ID'; quoteId: string }
+  | { type: 'SET_CUSTOMER_ID'; customerId: string }
+
+function resolveStep(definition: WizardDefinitionResult, stepId: string): WizardStepDefinition {
+  const step = definition.steps.find((s) => s.stepId === stepId)
+  if (!step) throw new Error(`Step '${stepId}' not found in wizard '${definition.code}'`)
+  return step
+}
+
+function engineReducer(state: WizardEngineState, action: EngineAction): WizardEngineState {
+  switch (action.type) {
+    case 'COMPLETE_STEP': {
+      const newCompletedSteps = [...state.completedSteps, action.stepId]
+      const newStepData = {
+        ...state.stepData,
+        [action.stepId]: action.output,
+      }
+      const nextStep = resolveStep(state.definition, action.nextStepId)
+      // Auto-propagate quoteId / customerId from step output
+      const newQuoteId = (typeof action.output.quoteId === 'string' && action.output.quoteId)
+        ? action.output.quoteId : state.quoteId
+      const newCustomerId = (typeof action.output.customerId === 'string' && action.output.customerId)
+        ? action.output.customerId : state.customerId
+      return {
+        ...state,
+        currentStepId: action.nextStepId,
+        completedSteps: newCompletedSteps,
+        stepData: newStepData,
+        currentStep: nextStep,
+        canGoBack: newCompletedSteps.length > 0,
+        isFirstStep: false,
+        isLastStep: nextStep.transitions.length === 0,
+        completionPercent: Math.round((newCompletedSteps.length / state.definition.steps.length) * 100),
+        canSkip: nextStep.isOptional === true,
+        quoteId: newQuoteId,
+        customerId: newCustomerId,
+      }
+    }
+
+    case 'GO_BACK': {
+      const newCompletedSteps = state.completedSteps.filter((s) => s !== action.prevStepId)
+      const prevStep = resolveStep(state.definition, action.prevStepId)
+      return {
+        ...state,
+        currentStepId: action.prevStepId,
+        completedSteps: newCompletedSteps,
+        currentStep: prevStep,
+        canGoBack: newCompletedSteps.length > 0,
+        isFirstStep: newCompletedSteps.length === 0,
+        isLastStep: prevStep.transitions.length === 0,
+        completionPercent: Math.round((newCompletedSteps.length / state.definition.steps.length) * 100),
+        canSkip: prevStep.isOptional === true,
+      }
+    }
+
+    case 'SKIP_STEP': {
+      const nextStep = resolveStep(state.definition, action.nextStepId)
+      return {
+        ...state,
+        currentStepId: action.nextStepId,
+        currentStep: nextStep,
+        isLastStep: nextStep.transitions.length === 0,
+        canSkip: nextStep.isOptional === true,
+      }
+    }
+
+    case 'SET_QUOTE_ID':
+      return { ...state, quoteId: action.quoteId }
+
+    case 'SET_CUSTOMER_ID':
+      return { ...state, customerId: action.customerId }
+
+    default:
+      return state
+  }
+}
+
+// ─── Transition evaluation ──────────────────────────────────────
+
+function getNestedValue(obj: Record<string, unknown>, path: string): unknown {
+  const parts = path.split('.')
+  let current: unknown = obj
+  for (const part of parts) {
+    if (current == null || typeof current !== 'object') return undefined
+    current = (current as Record<string, unknown>)[part]
+  }
+  return current
+}
+
+export function evaluateCondition(
+  condition: TransitionCondition,
+  stepData: Record<string, Record<string, unknown>>,
+  params: Record<string, unknown>,
+): boolean {
+  const context = { stepData, params }
+  const actual = getNestedValue(context as unknown as Record<string, unknown>, condition.field)
+
+  switch (condition.operator) {
+    case 'exists':
+      return actual !== undefined && actual !== null
+    case 'not_exists':
+      return actual === undefined || actual === null
+    case 'eq':
+      return actual === condition.value
+    case 'neq':
+      return actual !== condition.value
+    case 'gt':
+      return typeof actual === 'number' && typeof condition.value === 'number' && actual > condition.value
+    case 'lt':
+      return typeof actual === 'number' && typeof condition.value === 'number' && actual < condition.value
+    case 'gte':
+      return typeof actual === 'number' && typeof condition.value === 'number' && actual >= condition.value
+    case 'lte':
+      return typeof actual === 'number' && typeof condition.value === 'number' && actual <= condition.value
+    case 'in':
+      return Array.isArray(condition.value) && condition.value.includes(actual)
+    default:
+      return false
+  }
+}
+
+export function resolveNextStep(
+  step: WizardStepDefinition,
+  stepData: Record<string, Record<string, unknown>>,
+  params: Record<string, unknown>,
+): string | null {
+  // Evaluate transitions in order, first match wins
+  for (const transition of step.transitions) {
+    if (!transition.condition) {
+      if (transition.isDefault) return transition.targetStepId
+      // No condition and no default flag = unconditional transition (take it)
+      return transition.targetStepId
+    }
+    if (evaluateCondition(transition.condition, stepData, params)) {
+      return transition.targetStepId
+    }
+  }
+  // Fall back to default transition
+  const defaultTransition = step.transitions.find((t) => t.isDefault)
+  if (defaultTransition) return defaultTransition.targetStepId
+
+  // No valid transition = end of wizard
+  return null
+}
+
+// ─── Context ────────────────────────────────────────────────────
+
+interface WizardEngineContextValue {
+  state: WizardEngineState
+  completeStep: (stepOutput: Record<string, unknown>) => void
+  goBack: () => void
+  skipStep: () => void
+}
+
+const WizardEngineContext = createContext<WizardEngineContextValue | null>(null)
+
+export function useWizardEngine(): WizardEngineContextValue {
+  const ctx = useContext(WizardEngineContext)
+  if (!ctx) throw new Error('useWizardEngine must be used within a WizardEngineProvider')
+  return ctx
+}
+
+// ─── Provider ───────────────────────────────────────────────────
+
+interface WizardEngineProviderProps {
+  definition: WizardDefinitionResult
+  params?: Record<string, unknown>
+  initialQuoteId?: string | null
+  initialCustomerId?: string | null
+  children: React.ReactNode
+  onComplete?: (stepData: Record<string, Record<string, unknown>>) => void
+}
+
+export function WizardEngineProvider({
+  definition,
+  params: launchParams = {},
+  initialQuoteId = null,
+  initialCustomerId = null,
+  children,
+  onComplete,
+}: WizardEngineProviderProps) {
+  const firstStep = definition.steps[0]
+  if (!firstStep) throw new Error(`Wizard '${definition.code}' has no steps`)
+
+  const initialState: WizardEngineState = {
+    definition,
+    params: launchParams,
+    currentStepId: firstStep.stepId,
+    completedSteps: [],
+    stepData: {},
+    currentStep: firstStep,
+    canGoBack: false,
+    canSkip: firstStep.isOptional === true,
+    isFirstStep: true,
+    isLastStep: firstStep.transitions.length === 0,
+    completionPercent: 0,
+    quoteId: initialQuoteId,
+    customerId: initialCustomerId,
+  }
+
+  const [state, dispatch] = useReducer(engineReducer, initialState)
+
+  const completeStep = useCallback(
+    (stepOutput: Record<string, unknown>) => {
+      const updatedStepData = {
+        ...state.stepData,
+        [state.currentStep.stepId]: stepOutput,
+      }
+
+      const nextStepId = resolveNextStep(state.currentStep, updatedStepData, state.params)
+
+      if (!nextStepId) {
+        // Wizard complete
+        onComplete?.(updatedStepData)
+        return
+      }
+
+      dispatch({ type: 'COMPLETE_STEP', stepId: state.currentStep.stepId, output: stepOutput, nextStepId })
+    },
+    [state, onComplete],
+  )
+
+  const goBack = useCallback(() => {
+    if (state.completedSteps.length === 0) return
+    const prevStepId = state.completedSteps[state.completedSteps.length - 1]
+    dispatch({ type: 'GO_BACK', prevStepId })
+  }, [state.completedSteps])
+
+  const skipStep = useCallback(() => {
+    if (!state.currentStep.isOptional) return
+    const nextStepId = resolveNextStep(state.currentStep, state.stepData, state.params)
+    if (nextStepId) {
+      dispatch({ type: 'SKIP_STEP', nextStepId })
+    }
+  }, [state])
+
+  const value = useMemo(
+    () => ({ state, completeStep, goBack, skipStep }),
+    [state, completeStep, goBack, skipStep],
+  )
+
+  return (
+    <WizardEngineContext.Provider value={value}>
+      {children}
+    </WizardEngineContext.Provider>
+  )
+}

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

@@ -0,0 +1,15 @@
+import type { WizardStepType } from './types'
+
+const stepTypes = new Map<string, WizardStepType>()
+
+export function registerStepType(stepType: WizardStepType) {
+  stepTypes.set(stepType.type, stepType)
+}
+
+export function getStepType(type: string): WizardStepType | undefined {
+  return stepTypes.get(type)
+}
+
+export function listStepTypes(): WizardStepType[] {
+  return Array.from(stepTypes.values())
+}

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

@@ -0,0 +1,136 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react'
+import type { WizardStepProps } from '../types'
+
+type Customer = {
+  id: string
+  name: string
+  email?: string
+  segment?: string
+}
+
+export function CustomerSelectStep({ config, onComplete, onBack, stepData, currentStepId, completedSteps }: WizardStepProps) {
+  const [customers, setCustomers] = useState<Customer[]>([])
+  const [search, setSearch] = useState('')
+  const [selected, setSelected] = useState<Customer | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  // Restore previous selection if returning to this step
+  const previousData = stepData[currentStepId] as { customerId?: string; customerName?: string } | undefined
+  useEffect(() => {
+    if (previousData?.customerId && previousData?.customerName) {
+      setSelected({ id: previousData.customerId, name: previousData.customerName })
+    }
+  }, [previousData?.customerId, previousData?.customerName])
+
+  const segmentFilter = (config.segmentFilter as string[]) ?? []
+
+  const handleSearch = useCallback(async () => {
+    setLoading(true)
+    try {
+      const params = new URLSearchParams({ page: '1', pageSize: '20' })
+      if (search) params.set('search', search)
+      const res = await fetch(`/api/customers/companies?${params}`)
+      if (res.ok) {
+        const data = await res.json()
+        let items = ((data.items ?? data) as Array<Record<string, unknown>>).map((c) => ({
+          id: c.id as string,
+          name: (c.display_name ?? c.displayName ?? c.name ?? '') as string,
+          email: (c.primary_email ?? c.email ?? '') as string,
+          segment: (c.lifecycle_stage ?? c.segment ?? '') as string,
+        })) as Customer[]
+        if (segmentFilter.length > 0) {
+          items = items.filter((c) => c.segment && segmentFilter.includes(c.segment))
+        }
+        setCustomers(items)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }, [search, segmentFilter])
+
+  useEffect(() => {
+    handleSearch()
+  }, []) // Load initial list on mount
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-2">
+        <input
+          type="text"
+          placeholder="Search customers..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+          className="flex-1 rounded-md border px-3 py-2 text-sm"
+        />
+        <button
+          type="button"
+          onClick={handleSearch}
+          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'}
+        </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}
+          </span>
+          <button
+            type="button"
+            onClick={() => setSelected(null)}
+            className="text-xs text-muted-foreground hover:text-foreground underline"
+          >
+            Clear
+          </button>
+        </div>
+      )}
+
+      <div className="flex flex-col gap-1 max-h-[300px] overflow-y-auto">
+        {customers.map((c) => (
+          <div
+            key={c.id}
+            onClick={() => setSelected(c)}
+            className={`rounded-md border p-3 cursor-pointer transition-colors ${
+              selected?.id === c.id
+                ? 'border-primary bg-primary/5'
+                : 'hover:bg-muted/30'
+            }`}
+          >
+            <span className="font-medium text-sm">{c.name}</span>
+            {c.email && <span className="ml-2 text-xs text-muted-foreground">{c.email}</span>}
+          </div>
+        ))}
+        {customers.length === 0 && !loading && (
+          <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">
+            No customers found.
+          </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={() => {
+            if (selected) {
+              onComplete({ customerId: selected.id, customerName: selected.name })
+            }
+          }}
+          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
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,34 @@
+'use client'
+
+import React from 'react'
+import type { WizardStepProps } from '../types'
+
+/**
+ * Stub step type for inventory/subscription item selection.
+ * Implementation deferred until the inventory/subscription domain exists.
+ */
+export function InventorySelectStep({ onBack, onSkip, completedSteps }: WizardStepProps) {
+  return (
+    <div className="rounded-lg border bg-card p-6 text-center space-y-3">
+      <h3 className="text-lg font-semibold">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.
+      </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
+          </button>
+        )}
+        <button
+          type="button"
+          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
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,146 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react'
+import type { WizardStepProps } from '../types'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+
+type QuoteLine = {
+  lineId: string
+  offeringId: string | null
+  offeringName: string
+  quantity: number
+  nrcTotal: number
+  mrcTotal: number
+  isConfigured: boolean
+  parentLineId: string | null
+}
+
+function fmt(n: number, currency = 'USD') {
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(n)
+}
+
+export function ItemListStep({ config, onComplete, onBack, stepData, completedSteps, quoteId }: WizardStepProps) {
+  const [lines, setLines] = useState<QuoteLine[]>([])
+  const [loading, setLoading] = useState(true)
+
+  const parentLineSource = config.parentLineSource as string | undefined
+  const minItems = (config.minItems as number) ?? 0
+  const maxItems = (config.maxItems as number) ?? Infinity
+  const showPricing = config.showPricing !== false
+
+  const parentLineId = parentLineSource
+    ? (stepData[parentLineSource]?.lineId as string | undefined)
+    : undefined
+
+  const loadLines = useCallback(async () => {
+    if (!quoteId) { setLoading(false); return }
+    setLoading(true)
+    try {
+      const res = await fetch(`/api/cpq/quotes/${quoteId}`)
+      if (res.ok) {
+        const data = await res.json()
+        const allLines = (data.lines ?? []) as QuoteLine[]
+        // Filter to children of the parent line (if parentLineId set), otherwise show all
+        const filtered = parentLineId
+          ? allLines.filter((l) => l.parentLineId === parentLineId)
+          : allLines
+        setLines(filtered)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }, [quoteId, parentLineId])
+
+  useEffect(() => { loadLines() }, [loadLines])
+
+  const handleRemove = useCallback(async (lineId: string) => {
+    if (!quoteId) return
+    await fetch(`/api/cpq/quotes/${quoteId}/items/${lineId}`, { method: 'DELETE' })
+    await loadLines()
+  }, [quoteId, loadLines])
+
+  const canProceed = lines.length >= minItems
+  const canAddMore = lines.length < maxItems
+
+  return (
+    <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})`}
+        </span>
+        {canAddMore && (
+          <span className="text-xs text-muted-foreground">
+            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="space-y-2">
+          {lines.map((line) => (
+            <div
+              key={line.lineId}
+              className="flex items-center justify-between rounded-lg border p-3"
+            >
+              <div>
+                <span className="text-sm font-medium">{line.offeringName}</span>
+                {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
+                  </Tag>
+                )}
+              </div>
+              <div className="flex items-center gap-3">
+                {showPricing && (
+                  <span className="text-xs">
+                    {fmt(line.nrcTotal)} NRC / {fmt(line.mrcTotal)} MRC
+                  </span>
+                )}
+                <Button
+                  type="button"
+                  variant="destructive-outline"
+                  size="sm"
+                  onClick={() => handleRemove(line.lineId)}
+                >
+                  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.
+            </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={loadLines} className="inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted">
+          Refresh
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            onComplete({ lineCount: lines.length, lineIds: lines.map((l) => l.lineId) })
+          }}
+          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
+        </button>
+      </div>
+    </div>
+  )
+}