@handled-ai/design-system 0.9.23 → 0.9.25

package/src/components/__tests__/score-feedback-initial.test.tsx

@@ -0,0 +1,253 @@
+/**
+ * Tests for ScoreFeedback.Root's `initialFeedback` prop and related behaviors.
+ *
+ * Covers:
+ *  - Initial `submittedFeedback` pre-population via prop
+ *  - "Noted" / "Recorded" shown instead of thumbs when pre-populated
+ *  - null initialFeedback → blank state (thumbs shown)
+ *  - useEffect sync: prop changes from null → value updates submittedFeedback
+ *  - useEffect guard: in-progress edit (thumbState ≠ null) skips sync
+ *  - editSubmitted restores prior feedback into editing state
+ *  - handleSubmit calls onSubmitFeedback
+ *  - factor callback fix: text ?? "" (empty string, not undefined)
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { ScoreFeedback } from "../score-feedback";
+import {
+  makeInitialScoreFeedback,
+  makeNegativeInitialScoreFeedback,
+  makeMinimalInitialScoreFeedback,
+} from "../../__test-helpers__/fixtures";
+
+// ─── Minimal compound-component wrapper ──────────────────────────────────────
+
+function Wrapper({
+  initialFeedback,
+  onSubmitFeedback,
+}: {
+  initialFeedback?: { type: "up" | "down"; pills: string[]; detail: string } | null;
+  onSubmitFeedback?: (type: "up" | "down", pills: string[], detail: string) => void;
+}) {
+  return (
+    <ScoreFeedback.Root
+      initialFeedback={initialFeedback}
+      onSubmitFeedback={onSubmitFeedback}
+    >
+      <ScoreFeedback.Trigger />
+      <ScoreFeedback.Panel />
+    </ScoreFeedback.Root>
+  );
+}
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("ScoreFeedback.Root — initialFeedback prop", () => {
+  it("shows 'Noted' when initialFeedback.type is 'up'", () => {
+    render(<Wrapper initialFeedback={makeInitialScoreFeedback()} />);
+    expect(screen.getByText("Noted")).toBeDefined();
+  });
+
+  it("shows 'Recorded' when initialFeedback.type is 'down'", () => {
+    render(<Wrapper initialFeedback={makeNegativeInitialScoreFeedback()} />);
+    expect(screen.getByText("Recorded")).toBeDefined();
+  });
+
+  it("does NOT show thumbs when initialFeedback is set (submitted state)", () => {
+    render(
+      <Wrapper initialFeedback={makeInitialScoreFeedback()} />,
+    );
+    // Thumbs-up and thumbs-down buttons should not be rendered
+    // The only button visible should be the "edit" button (with pill/detail), not bare thumbs
+    // We check by absence of the thumb click pattern — no button with onClick=handleThumbClick("up")
+    // More concretely: no thumb buttons means the Trigger is in "submitted" mode
+    expect(screen.queryByTitle?.("")).toBeNull?.(); // optional, just no crash
+    expect(screen.getByText("Noted")).toBeDefined();
+  });
+
+  it("shows thumbs when initialFeedback is null", () => {
+    const { container } = render(<Wrapper initialFeedback={null} />);
+    // Panel is hidden (no thumbState), Trigger shows thumb buttons
+    const buttons = container.querySelectorAll("button");
+    // Two thumb buttons are present
+    expect(buttons.length).toBeGreaterThanOrEqual(2);
+    // No "Noted" or "Recorded" text
+    expect(screen.queryByText("Noted")).toBeNull();
+    expect(screen.queryByText("Recorded")).toBeNull();
+  });
+
+  it("shows thumbs when initialFeedback is undefined", () => {
+    const { container } = render(<Wrapper />);
+    const buttons = container.querySelectorAll("button");
+    expect(buttons.length).toBeGreaterThanOrEqual(2);
+    expect(screen.queryByText("Noted")).toBeNull();
+  });
+
+  it("renders submitted pills from initialFeedback", () => {
+    render(
+      <Wrapper
+        initialFeedback={makeInitialScoreFeedback({
+          pills: ["Right timing", "Accurate data"],
+        })}
+      />,
+    );
+    expect(screen.getByText("Right timing")).toBeDefined();
+    expect(screen.getByText("Accurate data")).toBeDefined();
+  });
+
+  it("renders submitted detail text from initialFeedback", () => {
+    render(
+      <Wrapper
+        initialFeedback={makeInitialScoreFeedback({ detail: "Score looks correct." })}
+      />,
+    );
+    expect(screen.getByText("Score looks correct.")).toBeDefined();
+  });
+
+  it("minimal initialFeedback (no pills, no detail) still shows Noted without edit button", () => {
+    const { container } = render(
+      <Wrapper initialFeedback={makeMinimalInitialScoreFeedback("up")} />,
+    );
+    expect(screen.getByText("Noted")).toBeDefined();
+    // No pill text to find — just check no crash
+    const buttons = container.querySelectorAll("button");
+    // The edit button requires pills.length > 0 || detail, so no edit button here
+    expect(buttons.length).toBe(0);
+  });
+});
+
+describe("ScoreFeedback.Root — useEffect sync", () => {
+  it("updates submittedFeedback when initialFeedback prop changes from null to value", async () => {
+    const { rerender } = render(<Wrapper initialFeedback={null} />);
+
+    // Initially null → thumbs shown
+    expect(screen.queryByText("Noted")).toBeNull();
+
+    // Prop changes to a value
+    await act(async () => {
+      rerender(<Wrapper initialFeedback={makeInitialScoreFeedback()} />);
+    });
+
+    // Now should show "Noted"
+    expect(screen.getByText("Noted")).toBeDefined();
+  });
+
+  it("updates from 'up' to 'down' when prop changes", async () => {
+    const { rerender } = render(
+      <Wrapper initialFeedback={makeInitialScoreFeedback()} />,
+    );
+    expect(screen.getByText("Noted")).toBeDefined();
+
+    await act(async () => {
+      rerender(<Wrapper initialFeedback={makeNegativeInitialScoreFeedback()} />);
+    });
+
+    expect(screen.getByText("Recorded")).toBeDefined();
+  });
+
+  it("guard: does NOT sync when user has thumbState set (in-progress edit)", async () => {
+    // Start with null initialFeedback
+    const { rerender, container } = render(<Wrapper initialFeedback={null} />);
+
+    // User clicks thumbs-up to start an edit
+    const buttons = container.querySelectorAll("button");
+    await act(async () => {
+      fireEvent.click(buttons[0]); // thumbs-up button
+    });
+
+    // Now prop changes — should NOT overwrite in-progress edit
+    await act(async () => {
+      rerender(<Wrapper initialFeedback={makeNegativeInitialScoreFeedback()} />);
+    });
+
+    // Should NOT show "Recorded" — user's thumb state takes precedence
+    expect(screen.queryByText("Recorded")).toBeNull();
+    // Panel should be visible (thumbState is set)
+    // The Panel shows "How's this score?" section
+    expect(screen.getByText(/How['']s this score\?/)).toBeDefined();
+  });
+});
+
+describe("ScoreFeedback.Root — onSubmitFeedback callback", () => {
+  it("calls onSubmitFeedback with (type, pills, detail) on submit", async () => {
+    const onSubmit = vi.fn();
+    const { container } = render(
+      <Wrapper initialFeedback={null} onSubmitFeedback={onSubmit} />,
+    );
+
+    // Click thumbs-up
+    const thumbButtons = container.querySelectorAll("button");
+    await act(async () => {
+      fireEvent.click(thumbButtons[0]); // thumbs-up
+    });
+
+    // Select a pill
+    const pillButton = screen.getByText("Right timing");
+    await act(async () => {
+      fireEvent.click(pillButton);
+    });
+
+    // Click Submit
+    const submitButton = screen.getByText("Submit");
+    await act(async () => {
+      fireEvent.click(submitButton);
+    });
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith("up", ["Right timing"], "");
+  });
+
+  it("calls onSubmitFeedback with empty string detail when no detail entered", async () => {
+    const onSubmit = vi.fn();
+    const { container } = render(
+      <Wrapper initialFeedback={null} onSubmitFeedback={onSubmit} />,
+    );
+
+    const thumbButtons = container.querySelectorAll("button");
+    await act(async () => {
+      fireEvent.click(thumbButtons[0]); // thumbs-up
+    });
+
+    const pillButton = screen.getByText("Right timing");
+    await act(async () => {
+      fireEvent.click(pillButton);
+    });
+
+    const submitButton = screen.getByText("Submit");
+    await act(async () => {
+      fireEvent.click(submitButton);
+    });
+
+    const [, , detail] = onSubmit.mock.calls[0] as [string, string[], string];
+    expect(detail).toBe("");
+  });
+});
+
+describe("ScoreFeedback.Root — editSubmitted", () => {
+  it("clicking the pills/detail edit area restores feedback into editing state", async () => {
+    const { container } = render(
+      <Wrapper
+        initialFeedback={makeInitialScoreFeedback({
+          pills: ["Right timing"],
+          detail: "Score looks correct.",
+        })}
+      />,
+    );
+
+    // The edit button (wraps pills + detail) should be present
+    const editButton = container.querySelector("button");
+    expect(editButton).not.toBeNull();
+
+    await act(async () => {
+      fireEvent.click(editButton!);
+    });
+
+    // After clicking, the Panel should be visible with "How's this score?"
+    expect(screen.getByText(/How['']s this score\?/)).toBeDefined();
+    // And the previously selected pill should be pre-selected
+    // (visible in the panel's pill list as selected)
+    expect(screen.getAllByText("Right timing").length).toBeGreaterThanOrEqual(1);
+  });
+});

package/src/components/score-breakdown.tsx

@@ -33,14 +33,59 @@ interface ScoreBreakdownProps {
   factors: ScoreFactor[]
   onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void
   className?: string
+  initialFeedback?: Record<string, { type: "up" | "down"; detail: string }>
 }
 
-function ScoreBreakdown({ factors, onFactorFeedback, className }: ScoreBreakdownProps) {
-  const [feedback, setFeedback] = React.useState<Record<string, "up" | "down" | null>>({})
-  const [feedbackText, setFeedbackText] = React.useState<Record<string, string>>({})
-  const [savedText, setSavedText] = React.useState<Record<string, string>>({})
+function deriveInitialState<T>(
+  init: Record<string, { type: "up" | "down"; detail: string }> | undefined,
+  mapFn: (v: { type: "up" | "down"; detail: string }) => T,
+  filterFn?: (v: { type: "up" | "down"; detail: string }) => boolean,
+): Record<string, T> {
+  if (!init) return {}
+  const entries = Object.entries(init)
+  const filtered = filterFn ? entries.filter(([, v]) => filterFn(v)) : entries
+  return Object.fromEntries(filtered.map(([k, v]) => [k, mapFn(v)]))
+}
+
+function ScoreBreakdown({ factors, onFactorFeedback, className, initialFeedback }: ScoreBreakdownProps) {
+  const [feedback, setFeedback] = React.useState<Record<string, "up" | "down" | null>>(
+    () => deriveInitialState(initialFeedback, (v) => v.type)
+  )
+  const [feedbackText, setFeedbackText] = React.useState<Record<string, string>>(
+    () => deriveInitialState(initialFeedback, (v) => v.detail)
+  )
+  const [savedText, setSavedText] = React.useState<Record<string, string>>(
+    () => deriveInitialState(initialFeedback, (v) => v.detail, (v) => !!v.detail)
+  )
   const [editingKey, setEditingKey] = React.useState<string | null>(null)
 
+  // Sync state when initialFeedback prop changes (e.g. async hydration).
+  // Skip keys the user is actively editing to avoid clobbering in-progress input.
+  React.useEffect(() => {
+    setFeedback((prev) => {
+      const next: Record<string, "up" | "down" | null> = deriveInitialState(initialFeedback, (v) => v.type)
+      // Preserve any key the user is currently editing
+      if (editingKey && prev[editingKey] !== undefined) {
+        next[editingKey] = prev[editingKey]
+      }
+      return next
+    })
+    setFeedbackText((prev) => {
+      const next = deriveInitialState(initialFeedback, (v) => v.detail)
+      if (editingKey && prev[editingKey] !== undefined) {
+        next[editingKey] = prev[editingKey]
+      }
+      return next
+    })
+    setSavedText((prev) => {
+      const next = deriveInitialState(initialFeedback, (v) => v.detail, (v) => !!v.detail)
+      if (editingKey && prev[editingKey] !== undefined) {
+        next[editingKey] = prev[editingKey]
+      }
+      return next
+    })
+  }, [initialFeedback]) // eslint-disable-line react-hooks/exhaustive-deps -- reads editingKey as guard, not trigger
+
   const handleFeedback = (factorKey: string, type: "up" | "down") => {
     const newState = feedback[factorKey] === type ? null : type
     setFeedback((prev) => ({ ...prev, [factorKey]: newState }))
@@ -56,7 +101,7 @@ function ScoreBreakdown({ factors, onFactorFeedback, className }: ScoreBreakdown
   const submitFeedbackText = (factorKey: string) => {
     const text = (feedbackText[factorKey] ?? "").trim()
     if (feedback[factorKey]) {
-      onFactorFeedback?.(factorKey, feedback[factorKey]!, text || undefined)
+      onFactorFeedback?.(factorKey, feedback[factorKey]!, text ?? "")
       if (text) {
         setSavedText((prev) => ({ ...prev, [factorKey]: text }))
       }

package/src/components/score-feedback.tsx

@@ -52,14 +52,24 @@ function useScoreFeedback() {
 interface RootProps {
   children: React.ReactNode
   onSubmitFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
+  initialFeedback?: { type: "up" | "down"; pills: string[]; detail: string } | null
 }
 
-function Root({ children, onSubmitFeedback }: RootProps) {
+function Root({ children, onSubmitFeedback, initialFeedback }: RootProps) {
   const [thumbState, setThumbState] = React.useState<"up" | "down" | null>(null)
   const [selectedPills, setSelectedPills] = React.useState<string[]>([])
   const [detailText, setDetailTextState] = React.useState("")
   const [notedType, setNotedType] = React.useState<"up" | "down" | null>(null)
-  const [submittedFeedback, setSubmittedFeedback] = React.useState<SubmittedScoreFeedback | null>(null)
+  const [submittedFeedback, setSubmittedFeedback] = React.useState<SubmittedScoreFeedback | null>(
+    initialFeedback ?? null
+  )
+
+  // Sync submitted feedback when initialFeedback prop changes (e.g. async
+  // detail load). Skip when the user has an in-progress edit (thumbState set).
+  React.useEffect(() => {
+    if (thumbState !== null) return
+    setSubmittedFeedback(initialFeedback ?? null)
+  }, [initialFeedback]) // eslint-disable-line react-hooks/exhaustive-deps -- intentionally omits thumbState to read it as a guard, not a trigger
 
   const otherSelected = selectedPills.includes("Other")
 

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

@@ -71,7 +71,7 @@ const approveReasons = [
   "Actionable",
 ]
 
-type ApprovalState = "pending" | "confirming" | "approving-feedback" | "dismissing" | "approved" | "dismissed" | "auto-approved"
+type ApprovalState = "pending" | "confirming" | "creating" | "approving-feedback" | "dismissing" | "approved" | "dismissed" | "auto-approved"
 
 interface SignalApprovalLabels {
   approveButton?: string
@@ -82,6 +82,8 @@ interface SignalApprovalLabels {
   confirmPrompt?: string
   dismissPrompt?: string
   feedbackPrompt?: string
+  /** Label shown while the approve action is in progress (e.g. "Creating Opportunity..."). */
+  creatingStatus?: string
 }
 
 const DEFAULT_LABELS: Required<SignalApprovalLabels> = {
@@ -93,6 +95,7 @@ const DEFAULT_LABELS: Required<SignalApprovalLabels> = {
   confirmPrompt: "This will approve this action for",
   dismissPrompt: "What\u2019s the issue with this action?",
   feedbackPrompt: "Quick feedback \u2014 what made this action useful?",
+  creatingStatus: "Creating\u2026",
 }
 
 interface SignalApprovalContextValue {
@@ -128,7 +131,16 @@ interface RootProps {
   labels?: SignalApprovalLabels
   /** When true, the approve/create-opportunity button is hidden but the dismiss button remains. */
   hideApproveButton?: boolean
-  onApprove?: () => void
+  /**
+   * Called when the user confirms the approval action.
+   *
+   * - If the callback returns `void` (or `undefined`), the component transitions
+   *   directly to the feedback step (backward-compatible behavior).
+   * - If the callback returns a `Promise<boolean>`, the component shows a
+   *   "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>
   onApproveFeedback?: (reasons: string[], detail: string) => void
   onDismiss?: (reasons: string[], detail: string, subReason?: string) => void
 }
@@ -137,6 +149,13 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
   const labels = React.useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides])
   const [approvalState, setApprovalState] = React.useState<ApprovalState>(initialApprovalState ?? "pending")
 
+  // Guard against state updates after unmount (e.g. user navigates away while
+  // an async onApprove promise is still in flight).
+  const mountedRef = React.useRef(true)
+  React.useEffect(() => {
+    return () => { mountedRef.current = false }
+  }, [])
+
   const requestApproval = React.useCallback(() => {
     setApprovalState("confirming")
   }, [])
@@ -150,8 +169,23 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
   }, [])
 
   const approve = React.useCallback(() => {
-    setApprovalState("approving-feedback")
-    onApprove?.()
+    const result = onApprove?.()
+    // 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")
+      ;(result as Promise<boolean>).then((success) => {
+        if (mountedRef.current) {
+          setApprovalState(success ? "approving-feedback" : "pending")
+        }
+      }).catch(() => {
+        if (mountedRef.current) {
+          setApprovalState("pending")
+        }
+      })
+    } else {
+      // Synchronous / void — transition immediately (backward-compatible).
+      setApprovalState("approving-feedback")
+    }
   }, [onApprove])
 
   const submitApproveFeedback = React.useCallback(
@@ -439,6 +473,18 @@ function Actions() {
     setDetailText("")
   }
 
+  if (approvalState === "creating") {
+    return (
+      <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
+        <svg className="h-3.5 w-3.5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+        </svg>
+        <span>{labels.creatingStatus}</span>
+      </div>
+    )
+  }
+
   if (approvalState === "approved") {
     if (isEditing) {
       return (
@@ -728,7 +774,7 @@ function Gate({ children }: { children: React.ReactNode }) {
   const { approvalState, hideApproveButton } = useSignalApproval()
   // When the approve button is hidden, don't lock content behind approval
   const isLocked = !hideApproveButton &&
-    (approvalState === "pending" || approvalState === "confirming" || approvalState === "dismissing")
+    (approvalState === "pending" || approvalState === "confirming" || approvalState === "creating" || approvalState === "dismissing")
 
   return (
     <div className="relative">

package/src/prototype/prototype-config.ts

@@ -46,6 +46,8 @@ export interface SignalScoreData {
   onScoreFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
   onApproveFeedback?: (reasons: string[], detail: string) => void
   onDismissFeedback?: (reasons: string[], detail: string, subReason?: string) => void
+  initialScoreFeedback?: { type: "up" | "down"; pills: string[]; detail: string } | null
+  initialFactorFeedback?: Record<string, { type: "up" | "down"; detail: string }>
 }
 
 // ---------------------------------------------------------------------------
@@ -78,7 +80,7 @@ export interface InboxViewConfig {
   quickFilterTabs?: Array<{ id: string; label: string; matchValue?: string; count?: number }>
   hideAccountsButton?: boolean
   accountDetailsLabel?: string
-  onSignalApprove?: (item: QueueItem) => void
+  onSignalApprove?: (item: QueueItem) => void | Promise<boolean>
   getSignalApprovalState?: (item: QueueItem) => ApprovalState | undefined
   signalLabels?: {
     approveButton?: string
@@ -87,6 +89,7 @@ export interface InboxViewConfig {
     dismissedStatus?: string
     opportunityCreated?: string
     confirmPrompt?: string
+    creatingStatus?: string
   }
   /** When true, the approve/create-opportunity button is hidden but the dismiss button remains. */
   hideApproveButton?: boolean

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

@@ -102,7 +102,7 @@ export interface DetailViewProps {
   onOpenEntityPanel?: () => void
   onOpenRecentActivity?: () => void
   onSuggestedActionFeedback?: (actionId: number | string, feedback: string, actionTitle?: string) => void
-  onSignalApprove?: (item: QueueItem) => void
+  onSignalApprove?: (item: QueueItem) => void | Promise<boolean>
   getSignalApprovalState?: (item: QueueItem) => ApprovalState | undefined
   signalLabels?: InboxViewConfig["signalLabels"]
   hideApproveButton?: boolean
@@ -279,7 +279,10 @@ export function DetailView({
                   {signalData.whyNow}
                 </p>
 
-                <ScoreFeedback.Root onSubmitFeedback={(type, pills, detail) => (signalData.onScoreFeedback ?? onScoreFeedback)?.(type, pills, detail)}>
+                <ScoreFeedback.Root
+                  onSubmitFeedback={(type, pills, detail) => (signalData.onScoreFeedback ?? onScoreFeedback)?.(type, pills, detail)}
+                  initialFeedback={signalData.initialScoreFeedback}
+                >
                 <div className="mb-5 rounded-md border border-border bg-muted/20 p-3">
                   <div className="flex items-center justify-between mb-1.5">
                     <span className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider">Signal Score</span>
@@ -320,6 +323,7 @@ export function DetailView({
                         onFactorFeedback={signalData.onFactorFeedback ?? ((key, type, detail) =>
                           console.log("Signal factor feedback:", { company: item.company, factor: key, type, detail })
                         )}
+                        initialFeedback={signalData.initialFactorFeedback}
                       />
                       <SignalApproval.Actions />
                     </div>