@handled-ai/design-system 0.9.24 → 0.9.25

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

@@ -80,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
@@ -89,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