59 lines
2.4 KiB
TypeScript
59 lines
2.4 KiB
TypeScript
import {Label, Select, SelectContent, SelectItemWithDescription, SelectTrigger, SelectValue} from '@plunk/ui';
|
|
import {useState} from 'react';
|
|
|
|
import {type EditStepDialogProps, getStepConfig, StepDialogShell, useStepUpdate} from './shared';
|
|
|
|
export function ExitStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditStepDialogProps) {
|
|
const config = getStepConfig(step);
|
|
|
|
const [name, setName] = useState(step.name);
|
|
const [exitReason, setExitReason] = useState(String(config.reason ?? 'completed'));
|
|
|
|
const {update, isSubmitting} = useStepUpdate(workflowId, step.id);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
const ok = await update({
|
|
name,
|
|
config: {reason: exitReason},
|
|
});
|
|
|
|
if (ok) {
|
|
onOpenChange(false);
|
|
onSuccess();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<StepDialogShell
|
|
step={step}
|
|
open={open}
|
|
onOpenChange={onOpenChange}
|
|
name={name}
|
|
onNameChange={setName}
|
|
onSubmit={handleSubmit}
|
|
isSubmitting={isSubmitting}
|
|
>
|
|
<div>
|
|
<Label htmlFor="editExitReason">Exit Reason (optional)</Label>
|
|
<Select value={exitReason} onValueChange={setExitReason}>
|
|
<SelectTrigger id="editExitReason" className="mt-1.5">
|
|
<SelectValue placeholder="Select exit reason..." />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItemWithDescription value="completed" title="Completed" description="Contact finished the workflow successfully" />
|
|
<SelectItemWithDescription value="unsubscribed" title="Unsubscribed" description="Contact unsubscribed from communications" />
|
|
<SelectItemWithDescription value="not_eligible" title="Not Eligible" description="Contact doesn't meet the required criteria" />
|
|
<SelectItemWithDescription value="opted_out" title="Opted Out" description="Contact opted out of this workflow" />
|
|
<SelectItemWithDescription value="goal_achieved" title="Goal Achieved" description="Workflow goal was met before completion" />
|
|
<SelectItemWithDescription value="duplicate" title="Duplicate" description="Contact was already in this workflow" />
|
|
<SelectItemWithDescription value="error" title="Error" description="A technical issue occurred" />
|
|
<SelectItemWithDescription value="other" title="Other" description="Custom or unlisted reason" />
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</StepDialogShell>
|
|
);
|
|
}
|