@handled-ai/design-system 0.18.44 → 0.18.46

package/src/components/__tests__/case-panel-why.test.tsx

@@ -149,4 +149,63 @@ describe("CasePanelSignalApprovalActions", () => {
     expect(screen.getByText(/this will approve this action for/i)).toBeInTheDocument()
     expect(screen.getByRole("button", { name: /confirm/i }).className).toContain("h-7")
   })
+
+  it("lets callers collect edited opportunity preview fields before approval", async () => {
+    const onApprove = vi.fn()
+
+    renderApprovalActions({
+      initialApprovalState: "confirming",
+      onApprove,
+      opportunityPreview: {
+        name: "Churn Risk - Northwind Systems",
+        accountName: "Northwind Systems",
+        stage: "Prospecting",
+        closeDate: "Jun 30, 2026",
+        closeDateValue: "2026-06-30",
+        amount: "$75,000",
+        amountValue: 75000,
+        description: "Initial description",
+        churnType: "Churn Risk",
+        churnTypeOptions: ["Churn Risk", { value: "Win Back", label: "Win-back" }],
+      },
+    })
+
+    fireEvent.change(screen.getByLabelText("Close Date"), { target: { value: "2026-07-15" } })
+    expect(screen.getByLabelText("Amount")).toHaveValue("$75,000")
+    fireEvent.change(screen.getByLabelText("Amount"), { target: { value: "90000" } })
+    fireEvent.change(screen.getByLabelText("Churn Type"), { target: { value: "Win Back" } })
+    fireEvent.change(screen.getByLabelText("Description"), { target: { value: "Updated before create" } })
+    fireEvent.click(screen.getByRole("button", { name: /confirm/i }))
+
+    expect(onApprove).toHaveBeenCalledWith({
+      closeDate: "2026-07-15",
+      amount: "90000",
+      churnType: "Win Back",
+      description: "Updated before create",
+    })
+  })
+
+  it("blocks confirmation until the close date is valid", () => {
+    const onApprove = vi.fn()
+
+    renderApprovalActions({
+      initialApprovalState: "confirming",
+      onApprove,
+      opportunityPreview: {
+        name: "Churn Risk - Northwind Systems",
+        accountName: "Northwind Systems",
+        stage: "Prospecting",
+        closeDate: "Jun 30, 2026",
+        closeDateValue: "2026-06-30",
+        amount: "$75,000",
+      },
+    })
+
+    fireEvent.change(screen.getByLabelText("Close Date"), { target: { value: "" } })
+    expect(screen.getByRole("button", { name: /confirm/i })).toBeDisabled()
+    expect(screen.getByText("Enter a valid close date.")).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole("button", { name: /confirm/i }))
+    expect(onApprove).not.toHaveBeenCalled()
+  })
 })

package/src/components/signal-feedback-inline.tsx

@@ -73,6 +73,32 @@ const approveReasons = [
 
 type ApprovalState = "pending" | "confirming" | "creating" | "approving-feedback" | "dismissing" | "approved" | "dismissed" | "auto-approved"
 
+interface OpportunityPreviewOption {
+  value: string
+  label: string
+}
+
+interface OpportunityPreview {
+  name: string
+  stage: string
+  closeDate: string
+  closeDateValue?: string
+  amount: string
+  /** Raw draft input value. Numeric values render as currency in the editable field. */
+  amountValue?: string | number | null
+  accountName: string
+  description?: string | null
+  churnType?: string | null
+  churnTypeOptions?: Array<string | OpportunityPreviewOption>
+}
+
+interface OpportunityDraft {
+  closeDate: string
+  amount: string
+  description: string
+  churnType: string
+}
+
 interface SignalApprovalLabels {
   approveButton?: string
   dismissButton?: string
@@ -106,9 +132,9 @@ interface SignalApprovalContextValue {
   labels: Required<SignalApprovalLabels>
   hideApproveButton?: boolean
   approveButtonIconUrl?: string
-  opportunityPreview?: RootProps['opportunityPreview']
+  opportunityPreview?: OpportunityPreview
   requestingApproval: boolean
-  approve: () => void
+  approve: (draft?: OpportunityDraft) => void
   submitApproveFeedback: (reasons: string[], detail: string) => void
   skipApproveFeedback: () => void
   dismiss: (reasons: string[], detail: string, subReason?: string) => void
@@ -137,13 +163,7 @@ interface RootProps {
   /** Optional icon URL for the approve button. Renders an img instead of CirclePlus when provided. */
   approveButtonIconUrl?: string
   /** Optional structured preview data shown in the confirmation dialog. */
-  opportunityPreview?: {
-    name: string
-    stage: string
-    closeDate: string
-    amount: string
-    accountName: string
-  }
+  opportunityPreview?: OpportunityPreview
   /**
    * Async callback fired when the user clicks the approve button, BEFORE
    * transitioning to the "confirming" state. While the promise is pending,
@@ -160,7 +180,7 @@ interface RootProps {
    *   "creating" loading state while the promise is pending. On `true` it
    *   transitions to the feedback step; on `false` it reverts to "pending".
    */
-  onApprove?: () => void | Promise<boolean>
+  onApprove?: (draft?: OpportunityDraft) => void | Promise<boolean>
   onApproveFeedback?: (reasons: string[], detail: string) => void
   onDismiss?: (reasons: string[], detail: string, subReason?: string) => void
 }
@@ -205,8 +225,8 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
     setApprovalState("pending")
   }, [])
 
-  const approve = React.useCallback(() => {
-    const result = onApprove?.()
+  const approve = React.useCallback((draft?: OpportunityDraft) => {
+    const result = onApprove?.(draft)
     // If the callback returns a Promise, show a loading state and wait for it.
     if (result && typeof (result as Promise<boolean>).then === "function") {
       setApprovalState("creating")
@@ -417,6 +437,43 @@ function SubmittedFeedback({
   )
 }
 
+function optionValue(option: string | OpportunityPreviewOption): string {
+  return typeof option === "string" ? option : option.value
+}
+
+function optionLabel(option: string | OpportunityPreviewOption): string {
+  return typeof option === "string" ? option : option.label
+}
+
+function formatAmountDraftValue(value: string | number | null | undefined): string {
+  if (value == null || value === "") return ""
+  if (typeof value === "number") {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 0,
+    }).format(value)
+  }
+  return value
+}
+
+function buildOpportunityDraft(preview?: OpportunityPreview): OpportunityDraft {
+  return {
+    closeDate: preview?.closeDateValue ?? preview?.closeDate ?? "",
+    amount: preview?.amountValue == null ? "" : formatAmountDraftValue(preview.amountValue),
+    description: preview?.description ?? "",
+    churnType: preview?.churnType ?? "",
+  }
+}
+
+function isValidDateInput(value: string): boolean {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
+  if (!match) return false
+  const parsed = new Date(`${value}T00:00:00Z`)
+  if (Number.isNaN(parsed.getTime())) return false
+  return parsed.toISOString().slice(0, 10) === value
+}
+
 function Actions() {
   const { approvalState, companyName, opportunityUrl, scheduledTime, labels, hideApproveButton, approveButtonIconUrl, opportunityPreview, requestingApproval, approve, submitApproveFeedback, skipApproveFeedback, dismiss, requestApproval, requestDismiss, cancel } =
     useSignalApproval()
@@ -426,6 +483,16 @@ function Actions() {
   const [detailText, setDetailText] = React.useState("")
   const [submittedFeedback, setSubmittedFeedback] = React.useState<{ reasons: string[]; detail: string; subReason?: string } | null>(null)
   const [isEditing, setIsEditing] = React.useState(false)
+  const [opportunityDraft, setOpportunityDraft] = React.useState<OpportunityDraft>(() => buildOpportunityDraft(opportunityPreview))
+
+  React.useEffect(() => {
+    if (approvalState === "confirming") {
+      setOpportunityDraft(buildOpportunityDraft(opportunityPreview))
+    }
+  }, [approvalState, opportunityPreview])
+
+  const churnTypeOptions = opportunityPreview?.churnTypeOptions ?? []
+  const hasChurnTypeOptions = churnTypeOptions.length > 0
 
   const topNode = dismissReasonTree.find((n) => n.label === selectedTopReason)
   const hasSubOptions = !!(topNode?.subOptions && topNode.subOptions.length > 0)
@@ -438,6 +505,7 @@ function Actions() {
     (!needsText || detailText.trim().length > 0)
 
   const canSubmitApprove = selectedReasons.length > 0 || detailText.trim().length > 0
+  const canConfirmOpportunity = !opportunityPreview || isValidDateInput(opportunityDraft.closeDate)
 
   const selectTopReason = (label: string) => {
     if (selectedTopReason === label) {
@@ -740,27 +808,91 @@ function Actions() {
             {labels.confirmPrompt} <strong>{companyName}</strong>. Confirm?
           </p>
           {opportunityPreview && (
-            <div className="mt-3 space-y-1.5 border-t border-border/50 pt-3">
+            <div className="mt-3 space-y-3 border-t border-border/50 pt-3">
               {[
                 { label: "Opportunity", value: opportunityPreview.name },
                 { label: "Account", value: opportunityPreview.accountName },
                 { label: "Stage", value: opportunityPreview.stage },
-                { label: "Close Date", value: opportunityPreview.closeDate },
-                { label: "Amount", value: opportunityPreview.amount },
               ].map(({ label, value }) => (
-                <div key={label} className="flex items-center justify-between text-xs">
+                <div key={label} className="flex items-center justify-between gap-3 text-xs">
                   <span className="text-muted-foreground">{label}</span>
-                  <span className="font-medium text-foreground">{value}</span>
+                  <span className="text-right font-medium text-foreground">{value}</span>
                 </div>
               ))}
+
+              <div className="grid gap-2 sm:grid-cols-2">
+                <label className="space-y-1 text-xs">
+                  <span className="font-medium text-muted-foreground">Close Date</span>
+                  <input
+                    type="date"
+                    value={opportunityDraft.closeDate}
+                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, closeDate: event.target.value }))}
+                    aria-invalid={!canConfirmOpportunity}
+                    className="h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+                  />
+                  {!canConfirmOpportunity && (
+                    <span className="text-[11px] text-red-600">Enter a valid close date.</span>
+                  )}
+                </label>
+
+                <label className="space-y-1 text-xs">
+                  <span className="font-medium text-muted-foreground">Amount</span>
+                  <input
+                    type="text"
+                    inputMode="decimal"
+                    value={opportunityDraft.amount}
+                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, amount: event.target.value }))}
+                    placeholder={opportunityPreview.amount}
+                    className="h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
+                  />
+                </label>
+              </div>
+
+              <label className="space-y-1 text-xs">
+                <span className="font-medium text-muted-foreground">Churn Type</span>
+                {hasChurnTypeOptions ? (
+                  <select
+                    value={opportunityDraft.churnType}
+                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, churnType: event.target.value }))}
+                    className="h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+                  >
+                    <option value="">No churn type</option>
+                    {churnTypeOptions.map((option) => (
+                      <option key={optionValue(option)} value={optionValue(option)}>
+                        {optionLabel(option)}
+                      </option>
+                    ))}
+                  </select>
+                ) : (
+                  <input
+                    type="text"
+                    value={opportunityDraft.churnType}
+                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, churnType: event.target.value }))}
+                    placeholder="No churn type"
+                    className="h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
+                  />
+                )}
+              </label>
+
+              <label className="space-y-1 text-xs">
+                <span className="font-medium text-muted-foreground">Description</span>
+                <textarea
+                  value={opportunityDraft.description}
+                  onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, description: event.target.value }))}
+                  rows={3}
+                  placeholder="Add a short description"
+                  className="w-full resize-none rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
+                />
+              </label>
             </div>
           )}
         </div>
         <div className="flex items-center gap-2">
           <button
             type="button"
-            onClick={approve}
-            className="inline-flex h-7 items-center gap-1.5 rounded-md bg-foreground px-3 text-xs font-semibold text-background transition-colors hover:bg-foreground/90"
+            onClick={() => approve(opportunityDraft)}
+            disabled={!canConfirmOpportunity}
+            className="inline-flex h-7 items-center gap-1.5 rounded-md bg-foreground px-3 text-xs font-semibold text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground"
           >
             <Check className="h-3 w-3" />
             Confirm
@@ -861,5 +993,4 @@ export {
   Gate as SignalApprovalGate,
 }
 export const SignalApproval = { Root, Actions, Gate }
-export type OpportunityPreview = NonNullable<RootProps['opportunityPreview']>
-export type { ApprovalState, SignalApprovalLabels, SignalApprovalContextValue, RootProps as SignalApprovalRootProps }
+export type { ApprovalState, OpportunityPreview, OpportunityDraft, SignalApprovalLabels, SignalApprovalContextValue, RootProps as SignalApprovalRootProps }

package/src/prototype/prototype-config.ts

@@ -180,7 +180,7 @@ export interface InboxViewConfig {
   quickFilterTabs?: Array<{ id: string; label: string; matchValue?: string; count?: number }>
   hideAccountsButton?: boolean
   accountDetailsLabel?: string
-  onSignalApprove?: (item: QueueItem) => void | Promise<boolean>
+  onSignalApprove?: (item: QueueItem, draft?: import("../components/signal-feedback-inline").OpportunityDraft) => void | Promise<boolean>
   getSignalApprovalState?: (item: QueueItem) => ApprovalState | undefined
   signalLabels?: {
     approveButton?: string

package/src/prototype/prototype-inbox-view.tsx

@@ -38,7 +38,7 @@ import {
   type InboxFilterCategory,
 } from "../components/inbox-toolbar"
 import { GroupedListView, type GroupedListGroup } from "../components/item-list"
-import { SignalApproval, type ApprovalState, type OpportunityPreview } from "../components/signal-feedback-inline"
+import { SignalApproval, type ApprovalState, type OpportunityDraft, type OpportunityPreview } from "../components/signal-feedback-inline"
 import { ScoreWhyChips } from "../components/score-why-chips"
 import { SignalPriorityPopover } from "../components/signal-priority-popover"
 import { type SourceDef } from "../components/detail-view"
@@ -149,7 +149,7 @@ export interface DetailViewProps {
   onSuggestedActionFeedback?: (actionId: number | string, feedback: string, actionTitle?: string) => void
   /** @deprecated The compact score UX no longer renders score-level thumbs by default. */
   onScoreFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
-  onSignalApprove?: (item: QueueItem) => void | Promise<boolean>
+  onSignalApprove?: (item: QueueItem, draft?: OpportunityDraft) => void | Promise<boolean>
   getSignalApprovalState?: (item: QueueItem) => ApprovalState | undefined
   signalLabels?: InboxViewConfig["signalLabels"]
   hideApproveButton?: boolean
@@ -475,7 +475,7 @@ export function DetailView({
       opportunityPreview={opportunityPreview}
       onRequestApproval={onRequestApproval}
       initialApprovalState={getSignalApprovalState?.(item)}
-      onApprove={() => onSignalApprove?.(item)}
+      onApprove={(draft) => onSignalApprove?.(item, draft)}
       onApproveFeedback={(reasons, detail) => {
         signalData.onApproveFeedback?.(reasons, detail)
         console.log("Approval feedback:", { taskId: item.id, company: item.company, reasons, detail })