diff --git a/apps/remix/app/components/dialogs/envelope-cancel-dialog.tsx b/apps/remix/app/components/dialogs/envelope-cancel-dialog.tsx new file mode 100644 index 000000000..8cb90cfa0 --- /dev/null +++ b/apps/remix/app/components/dialogs/envelope-cancel-dialog.tsx @@ -0,0 +1,134 @@ +import { trpc as trpcReact } from '@documenso/trpc/react'; +import { Alert, AlertDescription } from '@documenso/ui/primitives/alert'; +import { Button } from '@documenso/ui/primitives/button'; +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from '@documenso/ui/primitives/dialog'; +import { Label } from '@documenso/ui/primitives/label'; +import { Textarea } from '@documenso/ui/primitives/textarea'; +import { useToast } from '@documenso/ui/primitives/use-toast'; +import { Trans, useLingui } from '@lingui/react/macro'; +import { useEffect, useState } from 'react'; + +export type EnvelopeCancelDialogProps = { + id: string; + title: string; + trigger?: React.ReactNode; + onCancel?: () => Promise | void; +}; + +export const EnvelopeCancelDialog = ({ id, title, trigger, onCancel }: EnvelopeCancelDialogProps) => { + const { toast } = useToast(); + const { t } = useLingui(); + const trpcUtils = trpcReact.useUtils(); + + const [open, setOpen] = useState(false); + const [reason, setReason] = useState(''); + + const { mutateAsync: cancelEnvelope, isPending } = trpcReact.envelope.cancel.useMutation({ + onSuccess: async () => { + toast({ + title: t`Document cancelled`, + description: t`"${title}" has been successfully cancelled`, + duration: 5000, + }); + + await trpcUtils.document.findDocumentsInternal.invalidate(); + + await onCancel?.(); + + setOpen(false); + }, + onError: () => { + toast({ + title: t`Something went wrong`, + description: t`This document could not be cancelled at this time. Please try again.`, + variant: 'destructive', + duration: 7500, + }); + }, + }); + + useEffect(() => { + if (open) { + setReason(''); + } + }, [open]); + + return ( + !isPending && setOpen(value)}> + {trigger} + + + + + Are you sure? + + + + + You are about to cancel "{title}" + + + + + + +

+ Once confirmed, the following will occur: +

+ +
    +
  • + The document signing process will be stopped +
  • +
  • + Recipients will be notified that the document was cancelled +
  • +
  • + The document will remain in your dashboard marked as Cancelled +
  • +
+
+
+ +
+ + +