|
| 1 | +import { useCallback, useState } from 'react' |
| 2 | +import { useTheme } from 'next-themes' |
| 3 | +import { |
| 4 | + ValidationStation, |
| 5 | + ValidationStationLanguage, |
| 6 | + type ValidationStationProps, |
| 7 | +} from '@uipath/ui-widgets-validation-station' |
| 8 | +import { TaskType } from '@uipath/uipath-typescript/tasks' |
| 9 | +import type { DuFramework } from '@uipath/uipath-typescript/document-understanding' |
| 10 | +import { UiPathError } from '@uipath/uipath-typescript/core' |
| 11 | +import { Alert, AlertDescription } from '@uipath/apollo-wind/components/ui/alert' |
| 12 | +import { Badge } from '@uipath/apollo-wind/components/ui/badge' |
| 13 | +import { Button } from '@uipath/apollo-wind/components/ui/button' |
| 14 | +import { |
| 15 | + Dialog, |
| 16 | + DialogContent, |
| 17 | + DialogHeader, |
| 18 | + DialogTitle, |
| 19 | +} from '@uipath/apollo-wind/components/ui/dialog' |
| 20 | +import { Spinner } from '@uipath/apollo-wind/components/ui/spinner' |
| 21 | +import { toast } from '@uipath/apollo-wind/components/ui/sonner' |
| 22 | +import { useAuth } from '../context/AuthContext' |
| 23 | +import { useTask } from '../hooks/useTasks' |
| 24 | +import { priorityBadge, statusBadge } from '../taskUtils' |
| 25 | + |
| 26 | +/** |
| 27 | + * The single argument the validation station hands back to `onSaveComplete`. |
| 28 | + * Derived from the widget's own prop type so it tracks the package version. |
| 29 | + */ |
| 30 | +type SaveValidatedDataResult = Parameters< |
| 31 | + NonNullable<ValidationStationProps['onSaveComplete']> |
| 32 | +>[0] |
| 33 | + |
| 34 | +/** Which button kicked off the in-flight save. */ |
| 35 | +type PendingAction = 'save' | 'submit' |
| 36 | + |
| 37 | +interface Props { |
| 38 | + /** Lightweight task from the list — used for the header before the full payload loads. */ |
| 39 | + taskId: number |
| 40 | + folderId: number |
| 41 | + title: string |
| 42 | + onClose: () => void |
| 43 | + /** Called after the task is submitted (completed) so the list can refresh. */ |
| 44 | + onCompleted: () => void |
| 45 | +} |
| 46 | + |
| 47 | +/** |
| 48 | + * Near-fullscreen host for `@uipath/ui-widgets-validation-station`, shown when |
| 49 | + * a selected task is a Document Validation task. The widget renders the source |
| 50 | + * document alongside the extracted fields; the reviewer edits, then **Save** |
| 51 | + * (validate + keep open) or **Submit** (validate + complete the task). |
| 52 | + * |
| 53 | + * Both buttons go through the widget's validated-save path: we flip the `save` |
| 54 | + * prop to `{ validate: true }`, and the widget reports back via |
| 55 | + * `onSaveComplete`. Only the `submit` flow then completes the Action Center task. |
| 56 | + */ |
| 57 | +export function DocumentValidationDialog({ |
| 58 | + taskId, |
| 59 | + folderId, |
| 60 | + title, |
| 61 | + onClose, |
| 62 | + onCompleted, |
| 63 | +}: Props) { |
| 64 | + const { sdk } = useAuth() |
| 65 | + const { resolvedTheme } = useTheme() |
| 66 | + |
| 67 | + // Full DU payload — `getById` with the task type returns the validation data |
| 68 | + // the widget needs (the list response carries only summary fields). |
| 69 | + const { task, loading, error } = useTask(taskId, folderId, TaskType.DocumentValidation) |
| 70 | + |
| 71 | + const [save, setSave] = useState<{ validate: boolean } | undefined>(undefined) |
| 72 | + const [pendingAction, setPendingAction] = useState<PendingAction | null>(null) |
| 73 | + const [actionError, setActionError] = useState<string | null>(null) |
| 74 | + |
| 75 | + const handleSaveComplete = useCallback( |
| 76 | + async (result: SaveValidatedDataResult) => { |
| 77 | + // Always clear the trigger so a later Save/Submit re-arms the widget. |
| 78 | + setSave(undefined) |
| 79 | + const action = pendingAction |
| 80 | + setPendingAction(null) |
| 81 | + |
| 82 | + // Widget validation failed, the payload is missing, or this was a plain |
| 83 | + // Save — nothing further to do; the widget keeps the edits in view. |
| 84 | + if (!result.success || !task || action !== 'submit') return |
| 85 | + |
| 86 | + try { |
| 87 | + await task.complete({ |
| 88 | + type: TaskType.DocumentValidation, |
| 89 | + action: 'Completed', |
| 90 | + data: task.data ?? {}, |
| 91 | + }) |
| 92 | + toast.success('Document validated and submitted') |
| 93 | + onCompleted() |
| 94 | + } catch (err) { |
| 95 | + setActionError( |
| 96 | + err instanceof UiPathError ? err.message : 'Failed to submit the task', |
| 97 | + ) |
| 98 | + } |
| 99 | + }, |
| 100 | + [pendingAction, task, onCompleted], |
| 101 | + ) |
| 102 | + |
| 103 | + const trigger = (action: PendingAction) => { |
| 104 | + setActionError(null) |
| 105 | + setPendingAction(action) |
| 106 | + setSave({ validate: true }) |
| 107 | + } |
| 108 | + |
| 109 | + // Widget needs a loaded payload, and we block re-entry while a save is in flight. |
| 110 | + const canAct = !!task?.data && pendingAction === null |
| 111 | + |
| 112 | + return ( |
| 113 | + <Dialog open onOpenChange={(open) => !open && onClose()}> |
| 114 | + <DialogContent |
| 115 | + className="flex h-[92vh] w-[96vw] max-w-[96vw] flex-col gap-0 p-0 sm:max-w-[96vw]" |
| 116 | + // The widget owns scrolling/focus inside the document viewer. |
| 117 | + onInteractOutside={(e) => e.preventDefault()} |
| 118 | + > |
| 119 | + <DialogHeader className="flex-row items-center justify-between gap-4 space-y-0 border-b px-6 py-4"> |
| 120 | + <div className="flex min-w-0 items-center gap-2"> |
| 121 | + <DialogTitle className="truncate">{task?.title ?? title}</DialogTitle> |
| 122 | + {task && ( |
| 123 | + <div className="flex shrink-0 items-center gap-1.5"> |
| 124 | + <Badge variant={statusBadge(task.status).variant}> |
| 125 | + {statusBadge(task.status).label} |
| 126 | + </Badge> |
| 127 | + <Badge variant={priorityBadge(task.priority).variant}> |
| 128 | + {priorityBadge(task.priority).label} |
| 129 | + </Badge> |
| 130 | + </div> |
| 131 | + )} |
| 132 | + </div> |
| 133 | + <div className="flex shrink-0 items-center gap-2 pr-8"> |
| 134 | + <Button variant="outline" onClick={() => trigger('save')} disabled={!canAct}> |
| 135 | + {pendingAction === 'save' ? 'Saving…' : 'Save'} |
| 136 | + </Button> |
| 137 | + <Button onClick={() => trigger('submit')} disabled={!canAct}> |
| 138 | + {pendingAction === 'submit' ? 'Submitting…' : 'Submit'} |
| 139 | + </Button> |
| 140 | + </div> |
| 141 | + </DialogHeader> |
| 142 | + |
| 143 | + {actionError && ( |
| 144 | + <Alert variant="destructive" className="mx-6 mt-3 w-auto"> |
| 145 | + <AlertDescription>{actionError}</AlertDescription> |
| 146 | + </Alert> |
| 147 | + )} |
| 148 | + |
| 149 | + <div className="min-h-0 flex-1 overflow-hidden"> |
| 150 | + {loading ? ( |
| 151 | + <div className="flex h-full items-center justify-center"> |
| 152 | + <Spinner label="Loading document…" showLabel /> |
| 153 | + </div> |
| 154 | + ) : error ? ( |
| 155 | + <Alert variant="destructive" className="m-6 w-auto"> |
| 156 | + <AlertDescription>{error}</AlertDescription> |
| 157 | + </Alert> |
| 158 | + ) : !task?.data ? ( |
| 159 | + <div className="flex h-full items-center justify-center p-6 text-sm text-muted-foreground"> |
| 160 | + This task has no validation payload to display. |
| 161 | + </div> |
| 162 | + ) : ( |
| 163 | + <ValidationStation |
| 164 | + sdk={sdk} |
| 165 | + data={task.data as DuFramework.ContentValidationData} |
| 166 | + folderId={task.folderId} |
| 167 | + theme={resolvedTheme === 'dark' ? 'dark' : 'light'} |
| 168 | + language={ValidationStationLanguage.English} |
| 169 | + save={save} |
| 170 | + onSaveComplete={handleSaveComplete} |
| 171 | + /> |
| 172 | + )} |
| 173 | + </div> |
| 174 | + </DialogContent> |
| 175 | + </Dialog> |
| 176 | + ) |
| 177 | +} |
0 commit comments