feat: add envelope editor

apps/remix/app/components/dialogs/document-duplicate-dialog.tsx

@@ -57,14 +57,14 @@ export const DocumentDuplicateDialog = ({
 
   const { mutateAsync: duplicateDocument, isPending: isDuplicateLoading } =
     trpcReact.document.duplicate.useMutation({
-      onSuccess: async ({ documentId }) => {
+      onSuccess: async ({ id }) => {
         toast({
           title: _(msg`Document Duplicated`),
           description: _(msg`Your document has been successfully duplicated.`),
           duration: 5000,
         });
 
-        await navigate(`${documentsPath}/${documentId}/edit`);
+        await navigate(`${documentsPath}/${id}/edit`);
         onOpenChange(false);
       },
     });

apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx

@@ -0,0 +1,449 @@
+import { useMemo, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  DocumentDistributionMethod,
+  DocumentStatus,
+  EnvelopeType,
+  type Field,
+  FieldType,
+  type Recipient,
+  RecipientRole,
+} from '@prisma/client';
+import { AnimatePresence, motion } from 'framer-motion';
+import { InfoIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { TEnvelope } from '@documenso/lib/types/envelope';
+import { formatSigningLink } from '@documenso/lib/utils/recipients';
+import { trpc, trpc as trpcReact } from '@documenso/trpc/react';
+import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
+import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type EnvelopeDistributeDialogProps = {
+  envelope: Pick<TEnvelope, 'id' | 'userId' | 'teamId' | 'status' | 'type' | 'documentMeta'> & {
+    recipients: Recipient[];
+    fields: Field[];
+  };
+  trigger?: React.ReactNode;
+};
+
+export const ZEnvelopeDistributeFormSchema = z.object({
+  meta: z.object({
+    emailId: z.string().nullable(),
+    emailReplyTo: z.preprocess(
+      (val) => (val === '' ? undefined : val),
+      z.string().email().optional(),
+    ),
+    subject: z.string(),
+    message: z.string(),
+    distributionMethod: z
+      .nativeEnum(DocumentDistributionMethod)
+      .optional()
+      .default(DocumentDistributionMethod.EMAIL),
+  }),
+});
+
+export type TEnvelopeDistributeFormSchema = z.infer<typeof ZEnvelopeDistributeFormSchema>;
+
+export const EnvelopeDistributeDialog = ({ envelope, trigger }: EnvelopeDistributeDialogProps) => {
+  const organisation = useCurrentOrganisation();
+
+  const recipients = envelope.recipients;
+
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { mutateAsync: distributeEnvelope } = trpcReact.envelope.distribute.useMutation();
+
+  const form = useForm<TEnvelopeDistributeFormSchema>({
+    defaultValues: {
+      meta: {
+        emailId: envelope.documentMeta?.emailId ?? null,
+        emailReplyTo: envelope.documentMeta?.emailReplyTo || undefined,
+        subject: envelope.documentMeta?.subject ?? '',
+        message: envelope.documentMeta?.message ?? '',
+        distributionMethod:
+          envelope.documentMeta?.distributionMethod || DocumentDistributionMethod.EMAIL,
+      },
+    },
+    resolver: zodResolver(ZEnvelopeDistributeFormSchema),
+  });
+
+  const {
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { isSubmitting },
+  } = form;
+
+  const { data: emailData, isLoading: isLoadingEmails } =
+    trpc.enterprise.organisation.email.find.useQuery({
+      organisationId: organisation.id,
+      perPage: 100,
+    });
+
+  const emails = emailData?.data || [];
+
+  const distributionMethod = watch('meta.distributionMethod');
+
+  const everySignerHasSignature = useMemo(
+    () =>
+      envelope.recipients
+        .filter((recipient) => recipient.role === RecipientRole.SIGNER)
+        .every((recipient) =>
+          envelope.fields.some(
+            (field) => field.type === FieldType.SIGNATURE && field.recipientId === recipient.id,
+          ),
+        ),
+    [envelope.recipients, envelope.fields],
+  );
+
+  const onFormSubmit = async ({ meta }: TEnvelopeDistributeFormSchema) => {
+    try {
+      await distributeEnvelope({ envelopeId: envelope.id, meta });
+
+      toast({
+        title: t`Envelope distributed`,
+        description: t`Your envelope has been distributed successfully.`,
+        duration: 5000,
+      });
+
+      setIsOpen(false);
+    } catch (err) {
+      toast({
+        title: t`Something went wrong`,
+        description: t`This envelope could not be distributed at this time. Please try again.`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  if (envelope.status !== DocumentStatus.DRAFT || envelope.type !== EnvelopeType.DOCUMENT) {
+    return null;
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+
+      <DialogContent className="max-w-md" hideClose>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Send Document</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>Recipients will be able to sign the document once sent</Trans>
+          </DialogDescription>
+        </DialogHeader>
+        {everySignerHasSignature ? (
+          <Form {...form}>
+            <form onSubmit={handleSubmit(onFormSubmit)}>
+              <fieldset disabled={isSubmitting}>
+                <Tabs
+                  onValueChange={(value) =>
+                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                    setValue('meta.distributionMethod', value as DocumentDistributionMethod)
+                  }
+                  value={distributionMethod}
+                  className="mb-2"
+                >
+                  <TabsList className="w-full">
+                    <TabsTrigger className="w-full" value={DocumentDistributionMethod.EMAIL}>
+                      Email
+                    </TabsTrigger>
+                    <TabsTrigger className="w-full" value={DocumentDistributionMethod.NONE}>
+                      None
+                    </TabsTrigger>
+                  </TabsList>
+                </Tabs>
+
+                <div className="min-h-72">
+                  <AnimatePresence initial={false} mode="wait">
+                    {distributionMethod === DocumentDistributionMethod.EMAIL && (
+                      <motion.div
+                        key={'Emails'}
+                        initial={{ opacity: 0, y: 5 }}
+                        animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
+                        exit={{ opacity: 0, transition: { duration: 0.15 } }}
+                      >
+                        <Form {...form}>
+                          <fieldset
+                            className="mt-2 flex flex-col gap-y-4 rounded-lg"
+                            disabled={form.formState.isSubmitting}
+                          >
+                            {organisation.organisationClaim.flags.emailDomains && (
+                              <FormField
+                                control={form.control}
+                                name="meta.emailId"
+                                render={({ field }) => (
+                                  <FormItem>
+                                    <FormLabel>
+                                      <Trans>Email Sender</Trans>
+                                    </FormLabel>
+                                    <FormControl>
+                                      <Select
+                                        {...field}
+                                        value={field.value === null ? '-1' : field.value}
+                                        onValueChange={(value) =>
+                                          field.onChange(value === '-1' ? null : value)
+                                        }
+                                      >
+                                        <SelectTrigger
+                                          loading={isLoadingEmails}
+                                          className="bg-background"
+                                        >
+                                          <SelectValue />
+                                        </SelectTrigger>
+
+                                        <SelectContent>
+                                          {emails.map((email) => (
+                                            <SelectItem key={email.id} value={email.id}>
+                                              {email.email}
+                                            </SelectItem>
+                                          ))}
+
+                                          <SelectItem value={'-1'}>Documenso</SelectItem>
+                                        </SelectContent>
+                                      </Select>
+                                    </FormControl>
+
+                                    <FormMessage />
+                                  </FormItem>
+                                )}
+                              />
+                            )}
+
+                            <FormField
+                              control={form.control}
+                              name="meta.emailReplyTo"
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormLabel>
+                                    <Trans>Reply To Email</Trans>{' '}
+                                    <span className="text-muted-foreground">(Optional)</span>
+                                  </FormLabel>
+
+                                  <FormControl>
+                                    <Input {...field} maxLength={254} />
+                                  </FormControl>
+
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+
+                            <FormField
+                              control={form.control}
+                              name="meta.subject"
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormLabel>
+                                    <Trans>Subject</Trans>{' '}
+                                    <span className="text-muted-foreground">(Optional)</span>
+                                  </FormLabel>
+
+                                  <FormControl>
+                                    <Input {...field} maxLength={255} />
+                                  </FormControl>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+
+                            <FormField
+                              control={form.control}
+                              name="meta.message"
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormLabel className="flex flex-row items-center">
+                                    <Trans>Message</Trans>{' '}
+                                    <span className="text-muted-foreground">(Optional)</span>
+                                    <Tooltip>
+                                      <TooltipTrigger>
+                                        <InfoIcon className="mx-2 h-4 w-4" />
+                                      </TooltipTrigger>
+                                      <TooltipContent className="text-muted-foreground p-4">
+                                        <DocumentSendEmailMessageHelper />
+                                      </TooltipContent>
+                                    </Tooltip>
+                                  </FormLabel>
+
+                                  <FormControl>
+                                    <Textarea
+                                      className="bg-background mt-2 h-16 resize-none"
+                                      {...field}
+                                      maxLength={5000}
+                                    />
+                                  </FormControl>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+                          </fieldset>
+                        </Form>
+                      </motion.div>
+                    )}
+
+                    {distributionMethod === DocumentDistributionMethod.NONE && (
+                      <motion.div
+                        key={'Links'}
+                        initial={{ opacity: 0, y: 5 }}
+                        animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
+                        exit={{ opacity: 0, transition: { duration: 0.15 } }}
+                        className="min-h-60 rounded-lg border"
+                      >
+                        {envelope.status === DocumentStatus.DRAFT ? (
+                          <div className="text-muted-foreground py-24 text-center text-sm">
+                            <p>
+                              <Trans>We won't send anything to notify recipients.</Trans>
+                            </p>
+
+                            <p className="mt-2">
+                              <Trans>
+                                We will generate signing links for you, which you can send to the
+                                recipients through your method of choice.
+                              </Trans>
+                            </p>
+                          </div>
+                        ) : (
+                          <ul className="text-muted-foreground divide-y">
+                            {recipients.length === 0 && (
+                              <li className="flex flex-col items-center justify-center py-6 text-sm">
+                                <Trans>No recipients</Trans>
+                              </li>
+                            )}
+
+                            {recipients.map((recipient) => (
+                              <li
+                                key={recipient.id}
+                                className="flex items-center justify-between px-4 py-3 text-sm"
+                              >
+                                <AvatarWithText
+                                  avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
+                                  primaryText={
+                                    <p className="text-muted-foreground text-sm">
+                                      {recipient.email}
+                                    </p>
+                                  }
+                                  secondaryText={
+                                    <p className="text-muted-foreground/70 text-xs">
+                                      {t(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
+                                    </p>
+                                  }
+                                />
+
+                                {recipient.role !== RecipientRole.CC && (
+                                  <CopyTextButton
+                                    value={formatSigningLink(recipient.token)}
+                                    onCopySuccess={() => {
+                                      toast({
+                                        title: t`Copied to clipboard`,
+                                        description: t`The signing link has been copied to your clipboard.`,
+                                      });
+                                    }}
+                                    badgeContentUncopied={
+                                      <p className="ml-1 text-xs">
+                                        <Trans>Copy</Trans>
+                                      </p>
+                                    }
+                                    badgeContentCopied={
+                                      <p className="ml-1 text-xs">
+                                        <Trans>Copied</Trans>
+                                      </p>
+                                    }
+                                  />
+                                )}
+                              </li>
+                            ))}
+                          </ul>
+                        )}
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button type="button" variant="secondary" disabled={isSubmitting}>
+                      <Trans>Cancel</Trans>
+                    </Button>
+                  </DialogClose>
+
+                  <Button loading={isSubmitting} type="submit">
+                    {distributionMethod === DocumentDistributionMethod.EMAIL ? (
+                      <Trans>Send</Trans>
+                    ) : (
+                      <Trans>Generate Links</Trans>
+                    )}
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        ) : (
+          <>
+            <Alert variant="warning">
+              <AlertDescription>
+                <Trans>
+                  Some signers have not been assigned a signature field. Please assign at least 1
+                  signature field to each signer before proceeding.
+                </Trans>
+              </AlertDescription>
+            </Alert>
+
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button type="button" variant="secondary">
+                  <Trans>Close</Trans>
+                </Button>
+              </DialogClose>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/envelope-duplicate-dialog.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { EnvelopeType } from '@prisma/client';
+import { useNavigate } from 'react-router';
+
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+type EnvelopeDuplicateDialogProps = {
+  envelopeId: string;
+  envelopeType: EnvelopeType;
+  trigger?: React.ReactNode;
+};
+
+export const EnvelopeDuplicateDialog = ({
+  envelopeId,
+  envelopeType,
+  trigger,
+}: EnvelopeDuplicateDialogProps) => {
+  const navigate = useNavigate();
+
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const team = useCurrentTeam();
+
+  const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
+    trpc.envelope.duplicate.useMutation({
+      onSuccess: async ({ duplicatedEnvelopeId }) => {
+        toast({
+          title: t`Envelope Duplicated`,
+          description: t`Your envelope has been successfully duplicated.`,
+          duration: 5000,
+        });
+
+        const path =
+          envelopeType === EnvelopeType.DOCUMENT
+            ? formatDocumentsPath(team.url)
+            : formatTemplatesPath(team.url);
+
+        await navigate(`${path}/${duplicatedEnvelopeId}/edit`);
+        setOpen(false);
+      },
+    });
+
+  const onDuplicate = async () => {
+    try {
+      await duplicateEnvelope({ envelopeId });
+    } catch {
+      toast({
+        title: t`Something went wrong`,
+        description: t`This document could not be duplicated at this time. Please try again.`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isDuplicating && setOpen(value)}>
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+
+      <DialogContent>
+        {envelopeType === EnvelopeType.DOCUMENT ? (
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Duplicate Document</Trans>
+            </DialogTitle>
+            <DialogDescription>
+              <Trans>This document will be duplicated.</Trans>
+            </DialogDescription>
+          </DialogHeader>
+        ) : (
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Duplicate Template</Trans>
+            </DialogTitle>
+            <DialogDescription>
+              <Trans>This template will be duplicated.</Trans>
+            </DialogDescription>
+          </DialogHeader>
+        )}
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" disabled={isDuplicating}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <Button type="button" loading={isDuplicating} onClick={onDuplicate}>
+            <Trans>Duplicate</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/envelope-item-delete-dialog.tsx

@@ -0,0 +1,134 @@
+import { useState } from 'react';
+
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type EnvelopeItemDeleteDialogProps = {
+  canItemBeDeleted: boolean;
+  envelopeId: string;
+  envelopeItemId: string;
+  envelopeItemTitle: string;
+  onDelete?: (envelopeItemId: string) => void;
+  trigger?: React.ReactNode;
+};
+
+export const EnvelopeItemDeleteDialog = ({
+  trigger,
+  canItemBeDeleted,
+  envelopeId,
+  envelopeItemId,
+  envelopeItemTitle,
+  onDelete,
+}: EnvelopeItemDeleteDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const { mutateAsync: deleteEnvelopeItem, isPending: isDeleting } =
+    trpc.envelope.item.delete.useMutation({
+      onSuccess: () => {
+        toast({
+          title: t`Success`,
+          description: t`You have successfully removed this envelope item.`,
+          duration: 5000,
+        });
+
+        onDelete?.(envelopeItemId);
+
+        setOpen(false);
+      },
+      onError: () => {
+        toast({
+          title: t`An unknown error occurred`,
+          description: t`We encountered an unknown error while attempting to remove this envelope item. Please try again later.`,
+          variant: 'destructive',
+          duration: 10000,
+        });
+      },
+    });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isDeleting && setOpen(value)}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+
+      {canItemBeDeleted ? (
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Are you sure?</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>
+                You are about to remove the following document and all associated fields
+              </Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Alert variant="neutral">
+            <AlertDescription className="text-center font-semibold">
+              {envelopeItemTitle}
+            </AlertDescription>
+          </Alert>
+
+          <fieldset disabled={isDeleting}>
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="submit"
+                variant="destructive"
+                loading={isDeleting}
+                onClick={async () =>
+                  deleteEnvelopeItem({
+                    envelopeId,
+                    envelopeItemId,
+                  })
+                }
+              >
+                <Trans>Delete</Trans>
+              </Button>
+            </DialogFooter>
+          </fieldset>
+        </DialogContent>
+      ) : (
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>This item cannot be deleted</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>
+                You cannot delete this item because the document has been sent to recipients
+              </Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              <Trans>Close</Trans>
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      )}
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/envelope-redistribute-dialog.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { DocumentStatus, EnvelopeType, type Recipient, SigningStatus } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+
+import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import type { TEnvelope } from '@documenso/lib/types/envelope';
+import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { StackAvatar } from '../general/stack-avatar';
+
+export type EnvelopeRedistributeDialogProps = {
+  envelope: Pick<TEnvelope, 'id' | 'userId' | 'teamId' | 'status' | 'type' | 'documentMeta'> & {
+    recipients: Recipient[];
+  };
+  trigger?: React.ReactNode;
+};
+
+export const ZEnvelopeRedistributeFormSchema = z.object({
+  recipients: z.array(z.number()).min(1, {
+    message: msg`You must select at least one item`.id,
+  }),
+});
+
+export type TEnvelopeRedistributeFormSchema = z.infer<typeof ZEnvelopeRedistributeFormSchema>;
+
+export const EnvelopeRedistributeDialog = ({
+  envelope,
+  trigger,
+}: EnvelopeRedistributeDialogProps) => {
+  const recipients = envelope.recipients;
+
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { mutateAsync: redistributeEnvelope } = trpcReact.envelope.redistribute.useMutation();
+
+  const form = useForm<TEnvelopeRedistributeFormSchema>({
+    defaultValues: {
+      recipients: [],
+    },
+    resolver: zodResolver(ZEnvelopeRedistributeFormSchema),
+  });
+
+  const {
+    handleSubmit,
+    formState: { isSubmitting },
+  } = form;
+
+  const onFormSubmit = async ({ recipients }: TEnvelopeRedistributeFormSchema) => {
+    try {
+      await redistributeEnvelope({ envelopeId: envelope.id, recipients });
+
+      toast({
+        title: t`Envelope resent`,
+        description: t`Your envelope has been resent successfully.`,
+        duration: 5000,
+      });
+
+      setIsOpen(false);
+    } catch (err) {
+      toast({
+        title: t`Something went wrong`,
+        description: t`This envelope could not be resent at this time. Please try again.`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset();
+    }
+  }, [isOpen]);
+
+  if (envelope.status !== DocumentStatus.PENDING || envelope.type !== EnvelopeType.DOCUMENT) {
+    return null;
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+
+      <DialogContent className="max-w-md" hideClose>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Resend Document</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>Send reminders to the following recipients</Trans>
+          </DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={handleSubmit(onFormSubmit)}>
+            <fieldset disabled={isSubmitting}>
+              <FormField
+                control={form.control}
+                name="recipients"
+                render={({ field: { value, onChange } }) => (
+                  <>
+                    {recipients
+                      .filter((recipient) => recipient.signingStatus === SigningStatus.NOT_SIGNED)
+                      .map((recipient) => (
+                        <FormItem
+                          key={recipient.id}
+                          className="flex flex-row items-center justify-between gap-x-3 px-3"
+                        >
+                          <FormLabel
+                            className={cn('my-2 flex items-center gap-2 font-normal', {
+                              'opacity-50': !value.includes(recipient.id),
+                            })}
+                          >
+                            <StackAvatar
+                              key={recipient.id}
+                              type={getRecipientType(recipient)}
+                              fallbackText={recipientAbbreviation(recipient)}
+                            />
+                            {recipient.email}
+                          </FormLabel>
+
+                          <FormControl>
+                            <Checkbox
+                              className="h-5 w-5 rounded-full"
+                              value={recipient.id}
+                              checked={value.includes(recipient.id)}
+                              onCheckedChange={(checked: boolean) =>
+                                checked
+                                  ? onChange([...value, recipient.id])
+                                  : onChange(value.filter((v) => v !== recipient.id))
+                              }
+                            />
+                          </FormControl>
+                        </FormItem>
+                      ))}
+                  </>
+                )}
+              />
+
+              <DialogFooter className="mt-4">
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary" disabled={isSubmitting}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+                </DialogClose>
+
+                <Button loading={isSubmitting} type="submit">
+                  <Trans>Send reminder</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/public-profile-template-manage-dialog.tsx

@@ -52,7 +52,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { useCurrentTeam } from '~/providers/team';
 
 export type ManagePublicTemplateDialogProps = {
-  directTemplates: (Template & {
+  directTemplates: (Omit<Template, 'templateDocumentDataId'> & {
     directLink: Pick<TemplateDirectLink, 'token' | 'enabled'>;
   })[];
   initialTemplateId?: number | null;

apps/remix/app/components/dialogs/sign-field-dropdown-dialog.tsx

@@ -0,0 +1,117 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { createCallable } from 'react-call';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { TDropdownFieldMeta } from '@documenso/lib/types/field-meta';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+
+const ZSignFieldDropdownFormSchema = z.object({
+  dropdown: z.string().min(1, { message: msg`Option is required`.id }),
+});
+
+type TSignFieldDropdownFormSchema = z.infer<typeof ZSignFieldDropdownFormSchema>;
+
+export type SignFieldDropdownDialogProps = {
+  fieldMeta: TDropdownFieldMeta;
+};
+
+export const SignFieldDropdownDialog = createCallable<SignFieldDropdownDialogProps, string | null>(
+  ({ call, fieldMeta }) => {
+    const { t } = useLingui();
+
+    const values = fieldMeta.values?.map((value) => value.value) ?? [];
+
+    const form = useForm<TSignFieldDropdownFormSchema>({
+      resolver: zodResolver(ZSignFieldDropdownFormSchema),
+      defaultValues: {
+        dropdown: fieldMeta.defaultValue,
+      },
+    });
+
+    return (
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Sign Dropdown Field</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>Select a value to sign into the field</Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit((data) => call.end(data.dropdown))}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="dropdown"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Select {...field} onValueChange={field.onChange}>
+                          <SelectTrigger className="bg-background">
+                            <SelectValue placeholder={t`Select an option`} />
+                          </SelectTrigger>
+
+                          <SelectContent>
+                            {values.map((value, i) => (
+                              <SelectItem key={i} value={value}>
+                                {value}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => call.end(null)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit">
+                    <Trans>Sign</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);

apps/remix/app/components/dialogs/sign-field-email-dialog.tsx

@@ -0,0 +1,91 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { createCallable } from 'react-call';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+
+const ZSignFieldEmailFormSchema = z.object({
+  email: z.string().min(1, { message: msg`Email is required`.id }),
+});
+
+type TSignFieldEmailFormSchema = z.infer<typeof ZSignFieldEmailFormSchema>;
+
+export type SignFieldEmailDialogProps = Record<string, never>;
+
+export const SignFieldEmailDialog = createCallable<SignFieldEmailDialogProps, string | null>(
+  ({ call }) => {
+    const form = useForm<TSignFieldEmailFormSchema>({
+      resolver: zodResolver(ZSignFieldEmailFormSchema),
+      defaultValues: {
+        email: '',
+      },
+    });
+
+    return (
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Sign Email</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>Sign your email into the field</Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit((data) => call.end(data.email))}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => call.end(null)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit">
+                    <Trans>Sign</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);

apps/remix/app/components/dialogs/sign-field-initials-dialog.tsx

@@ -0,0 +1,97 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { createCallable } from 'react-call';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+
+const ZSignFieldInitialsFormSchema = z.object({
+  initials: z.string().min(1, { message: msg`Initials are required`.id }),
+});
+
+type TSignFieldInitialsFormSchema = z.infer<typeof ZSignFieldInitialsFormSchema>;
+
+export type SignFieldInitialsDialogProps = {
+  //
+};
+
+export const SignFieldInitialsDialog = createCallable<SignFieldInitialsDialogProps, string | null>(
+  ({ call }) => {
+    const form = useForm<TSignFieldInitialsFormSchema>({
+      resolver: zodResolver(ZSignFieldInitialsFormSchema),
+      defaultValues: {
+        initials: '',
+      },
+    });
+
+    return (
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Sign Initials</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>Sign your initials into the field</Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit((data) => call.end(data.initials))}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="initials"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel required>
+                        <Trans>Initials</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => call.end(null)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit">
+                    <Trans>Sign</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);

apps/remix/app/components/dialogs/sign-field-name-dialog.tsx

@@ -0,0 +1,93 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { createCallable } from 'react-call';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+
+const ZSignFieldNameFormSchema = z.object({
+  name: z.string().min(1, { message: msg`Name is required`.id }),
+});
+
+type TSignFieldNameFormSchema = z.infer<typeof ZSignFieldNameFormSchema>;
+
+export type SignFieldNameDialogProps = {
+  //
+};
+
+export const SignFieldNameDialog = createCallable<SignFieldNameDialogProps, string | null>(
+  ({ call }) => {
+    const form = useForm<TSignFieldNameFormSchema>({
+      resolver: zodResolver(ZSignFieldNameFormSchema),
+      defaultValues: {
+        name: '',
+      },
+    });
+
+    return (
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Sign Name</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>Sign your full name into the field</Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit((data) => call.end(data.name))}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => call.end(null)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit">
+                    <Trans>Sign</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);

apps/remix/app/components/dialogs/sign-field-number-dialog.tsx

@@ -0,0 +1,144 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { createCallable } from 'react-call';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { TNumberFieldMeta } from '@documenso/lib/types/field-meta';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { numberFormatValues } from '@documenso/ui/primitives/document-flow/field-items-advanced-settings/constants';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+
+const createNumberFieldSchema = (fieldMeta: TNumberFieldMeta) => {
+  let schema = z.coerce.number({
+    invalid_type_error: msg`Please enter a valid number`.id, // Todo: Envelopes - Check that this works
+  });
+
+  const { numberFormat, minValue, maxValue } = fieldMeta;
+
+  if (typeof minValue === 'number') {
+    schema = schema.min(minValue);
+  }
+
+  if (typeof maxValue === 'number') {
+    schema = schema.max(maxValue);
+  }
+
+  if (numberFormat) {
+    const foundRegex = numberFormatValues.find((item) => item.value === numberFormat)?.regex;
+
+    if (!foundRegex) {
+      return schema;
+    }
+
+    return schema.refine(
+      (value) => {
+        return foundRegex.test(value.toString());
+      },
+      {
+        message: `Number needs to be formatted as ${numberFormat}`,
+        // Todo: Envelopes
+        // message: msg`Number needs to be formatted as ${numberFormat}`.id,
+      },
+    );
+  }
+
+  return schema;
+};
+
+export type SignFieldNumberDialogProps = {
+  fieldMeta: TNumberFieldMeta;
+};
+
+export const SignFieldNumberDialog = createCallable<SignFieldNumberDialogProps, number | null>(
+  ({ call, fieldMeta }) => {
+    const { t } = useLingui();
+
+    const ZSignFieldNumberFormSchema = z.object({
+      number: createNumberFieldSchema(fieldMeta),
+    });
+
+    const form = useForm<z.infer<typeof ZSignFieldNumberFormSchema>>({
+      resolver: zodResolver(ZSignFieldNumberFormSchema),
+      defaultValues: {
+        number: undefined,
+      },
+    });
+
+    return (
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Sign Number Field</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>Insert a value into the number field</Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit((data) => call.end(data.number))}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="number"
+                  render={({ field, fieldState }) => (
+                    <FormItem>
+                      {fieldMeta.label && <FormLabel>{fieldMeta.label}</FormLabel>}
+
+                      <FormControl>
+                        <Input
+                          placeholder={fieldMeta.placeholder ?? t`Enter your number here`}
+                          className={cn('w-full rounded-md', {
+                            'border-2 border-red-300 text-left ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
+                              fieldState.error,
+                          })}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => call.end(null)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit">
+                    <Trans>Sign</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);

apps/remix/app/components/dialogs/sign-field-signature-dialog.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { createCallable } from 'react-call';
+
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+
+import { DocumentSigningDisclosure } from '../general/document-signing/document-signing-disclosure';
+
+export type SignFieldSignatureDialogProps = {
+  initialSignature?: string;
+  typedSignatureEnabled?: boolean;
+  uploadSignatureEnabled?: boolean;
+  drawSignatureEnabled?: boolean;
+};
+
+export const SignFieldSignatureDialog = createCallable<
+  SignFieldSignatureDialogProps,
+  string | null
+>(
+  ({
+    call,
+    typedSignatureEnabled,
+    uploadSignatureEnabled,
+    drawSignatureEnabled,
+    initialSignature,
+  }) => {
+    const [localSignature, setLocalSignature] = useState(initialSignature);
+
+    return (
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <DialogContent position="center">
+          <div>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Sign Signature Field</Trans>
+              </DialogTitle>
+            </DialogHeader>
+
+            <SignaturePad
+              value={localSignature ?? ''}
+              onChange={({ value }) => setLocalSignature(value)}
+              typedSignatureEnabled={typedSignatureEnabled}
+              uploadSignatureEnabled={uploadSignatureEnabled}
+              drawSignatureEnabled={drawSignatureEnabled}
+            />
+          </div>
+
+          <DocumentSigningDisclosure />
+
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => call.end(null)}>
+              <Trans>Cancel</Trans>
+            </Button>
+
+            <Button
+              type="button"
+              disabled={!localSignature}
+              onClick={() => call.end(localSignature || null)}
+            >
+              <Trans>Sign</Trans>
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);

apps/remix/app/components/dialogs/sign-field-text-dialog.tsx

@@ -0,0 +1,120 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { Plural, useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { createCallable } from 'react-call';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { TTextFieldMeta } from '@documenso/lib/types/field-meta';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+
+const ZSignFieldTextFormSchema = z.object({
+  text: z.string().min(1, { message: msg`Text is required`.id }),
+});
+
+type TSignFieldTextFormSchema = z.infer<typeof ZSignFieldTextFormSchema>;
+
+export type SignFieldTextDialogProps = {
+  fieldMeta?: TTextFieldMeta;
+};
+
+export const SignFieldTextDialog = createCallable<SignFieldTextDialogProps, string | null>(
+  ({ call, fieldMeta }) => {
+    const { t } = useLingui();
+
+    const form = useForm<TSignFieldTextFormSchema>({
+      resolver: zodResolver(ZSignFieldTextFormSchema),
+      defaultValues: {
+        text: '',
+      },
+    });
+
+    return (
+      <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Sign Text Field</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>Insert a value into the text field</Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit((data) => call.end(data.text))}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="text"
+                  render={({ field, fieldState }) => (
+                    <FormItem>
+                      {fieldMeta?.label && <FormLabel>{fieldMeta?.label}</FormLabel>}
+
+                      <FormControl>
+                        <Textarea
+                          id="custom-text"
+                          placeholder={fieldMeta?.placeholder ?? t`Enter your text here`}
+                          className={cn('w-full rounded-md', {
+                            'border-2 border-red-300 text-left ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
+                              fieldState.error,
+                          })}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                      {fieldMeta?.characterLimit !== undefined &&
+                        fieldMeta?.characterLimit > 0 &&
+                        !fieldState.error && (
+                          <div className="text-muted-foreground text-sm">
+                            <Plural
+                              value={fieldMeta?.characterLimit - (field.value?.length ?? 0)}
+                              one="# character remaining"
+                              other="# characters remaining"
+                            />
+                          </div>
+                        )}
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => call.end(null)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit">
+                    <Trans>Sign</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);

apps/remix/app/components/dialogs/template-create-dialog.tsx

@@ -44,7 +44,9 @@ export const TemplateCreateDialog = ({ folderId }: TemplateCreateDialogProps) =>
   const [showTemplateCreateDialog, setShowTemplateCreateDialog] = useState(false);
   const [isUploadingFile, setIsUploadingFile] = useState(false);
 
-  const onFileDrop = async (file: File) => {
+  const onFileDrop = async (files: File[]) => {
+    const file = files[0];
+
     if (isUploadingFile) {
       return;
     }

apps/remix/app/components/dialogs/template-direct-link-dialog-wrapper.tsx

@@ -1,47 +0,0 @@
-import { useState } from 'react';
-
-import { Trans } from '@lingui/react/macro';
-import type { Recipient, TemplateDirectLink } from '@prisma/client';
-import { LinkIcon } from 'lucide-react';
-
-import type { Template } from '@documenso/prisma/types/template-legacy-schema';
-import { Button } from '@documenso/ui/primitives/button';
-
-import { TemplateDirectLinkDialog } from '~/components/dialogs/template-direct-link-dialog';
-
-export type TemplateDirectLinkDialogWrapperProps = {
-  template: Template & { directLink?: TemplateDirectLink | null; recipients: Recipient[] };
-};
-
-export const TemplateDirectLinkDialogWrapper = ({
-  template,
-}: TemplateDirectLinkDialogWrapperProps) => {
-  const [isTemplateDirectLinkOpen, setTemplateDirectLinkOpen] = useState(false);
-
-  return (
-    <div>
-      <Button
-        variant="outline"
-        className="px-3"
-        onClick={(e) => {
-          e.preventDefault();
-          setTemplateDirectLinkOpen(true);
-        }}
-      >
-        <LinkIcon className="mr-1.5 h-3.5 w-3.5" />
-
-        {template.directLink ? (
-          <Trans>Manage Direct Link</Trans>
-        ) : (
-          <Trans>Create Direct Link</Trans>
-        )}
-      </Button>
-
-      <TemplateDirectLinkDialog
-        template={template}
-        open={isTemplateDirectLinkOpen}
-        onOpenChange={setTemplateDirectLinkOpen}
-      />
-    </div>
-  );
-};

apps/remix/app/components/dialogs/template-direct-link-dialog.tsx

@@ -4,7 +4,14 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { type Recipient, RecipientRole, type TemplateDirectLink } from '@prisma/client';
-import { CircleDotIcon, CircleIcon, ClipboardCopyIcon, InfoIcon, LoaderIcon } from 'lucide-react';
+import {
+  CircleDotIcon,
+  CircleIcon,
+  ClipboardCopyIcon,
+  InfoIcon,
+  LinkIcon,
+  LoaderIcon,
+} from 'lucide-react';
 import { Link, useRevalidator } from 'react-router';
 import { P, match } from 'ts-pattern';
 
@@ -15,7 +22,6 @@ import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { DIRECT_TEMPLATE_DOCUMENTATION } from '@documenso/lib/constants/template';
 import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
-import type { Template } from '@documenso/prisma/types/template-legacy-schema';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
@@ -27,6 +33,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
@@ -43,20 +50,19 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitive
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 type TemplateDirectLinkDialogProps = {
-  template: Template & {
-    directLink?: Pick<TemplateDirectLink, 'token' | 'enabled'> | null;
-    recipients: Recipient[];
-  };
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
+  templateId: number;
+  directLink?: Pick<TemplateDirectLink, 'token' | 'enabled'> | null;
+  recipients: Recipient[];
+  trigger?: React.ReactNode;
 };
 
 type TemplateDirectLinkStep = 'ONBOARD' | 'SELECT_RECIPIENT' | 'MANAGE' | 'CONFIRM_DELETE';
 
 export const TemplateDirectLinkDialog = ({
-  template,
-  open,
-  onOpenChange,
+  templateId,
+  directLink,
+  recipients,
+  trigger,
 }: TemplateDirectLinkDialogProps) => {
   const { toast } = useToast();
   const { quota, remaining } = useLimits();
@@ -65,8 +71,9 @@ export const TemplateDirectLinkDialog = ({
 
   const [, copy] = useCopyToClipboard();
 
-  const [isEnabled, setIsEnabled] = useState(template.directLink?.enabled ?? false);
-  const [token, setToken] = useState(template.directLink?.token ?? null);
+  const [open, setOpen] = useState(false);
+  const [isEnabled, setIsEnabled] = useState(directLink?.enabled ?? false);
+  const [token, setToken] = useState(directLink?.token ?? null);
   const [selectedRecipientId, setSelectedRecipientId] = useState<number | null>(null);
   const [currentStep, setCurrentStep] = useState<TemplateDirectLinkStep>(
     token ? 'MANAGE' : 'ONBOARD',
@@ -76,11 +83,11 @@ export const TemplateDirectLinkDialog = ({
 
   const validDirectTemplateRecipients = useMemo(
     () =>
-      template.recipients.filter(
+      recipients.filter(
         (recipient) =>
           recipient.role !== RecipientRole.CC && recipient.role !== RecipientRole.ASSISTANT,
       ),
-    [template.recipients],
+    [recipients],
   );
 
   const {
@@ -136,7 +143,7 @@ export const TemplateDirectLinkDialog = ({
       onSuccess: async () => {
         await revalidate();
 
-        onOpenChange(false);
+        setOpen(false);
         setToken(null);
 
         toast({
@@ -174,7 +181,7 @@ export const TemplateDirectLinkDialog = ({
     setSelectedRecipientId(recipientId);
 
     await createTemplateDirectLink({
-      templateId: template.id,
+      templateId,
       directRecipientId: recipientId,
     });
   };
@@ -191,300 +198,311 @@ export const TemplateDirectLinkDialog = ({
   }, [open]);
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
-      <fieldset disabled={isLoading} className="relative">
-        <AnimateGenericFadeInOut motionKey={currentStep}>
-          {match({ token, currentStep })
-            .with({ token: P.nullish, currentStep: 'ONBOARD' }, () => (
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>
-                    <Trans>Create Direct Signing Link</Trans>
-                  </DialogTitle>
+    <Dialog open={open} onOpenChange={(value) => !isLoading && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="outline" className="px-3">
+            <LinkIcon className="mr-1.5 h-3.5 w-3.5" />
 
-                  <DialogDescription>
-                    <Trans>Here's how it works:</Trans>
-                  </DialogDescription>
-                </DialogHeader>
+            {directLink ? <Trans>Manage Direct Link</Trans> : <Trans>Create Direct Link</Trans>}
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent hideClose>
+        <fieldset disabled={isLoading} className="relative">
+          <AnimateGenericFadeInOut motionKey={currentStep}>
+            {match({ token, currentStep })
+              .with({ token: P.nullish, currentStep: 'ONBOARD' }, () => (
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>
+                      <Trans>Create Direct Signing Link</Trans>
+                    </DialogTitle>
 
-                <ul className="mt-4 space-y-4 pl-12">
-                  {DIRECT_TEMPLATE_DOCUMENTATION.map((step, index) => (
-                    <li className="relative" key={index}>
-                      <div className="absolute -left-12">
-                        <div className="flex h-8 w-8 items-center justify-center rounded-full border-[3px] border-neutral-200 text-sm font-bold">
-                          {index + 1}
+                    <DialogDescription>
+                      <Trans>Here's how it works:</Trans>
+                    </DialogDescription>
+                  </DialogHeader>
+
+                  <ul className="mt-4 space-y-4 pl-12">
+                    {DIRECT_TEMPLATE_DOCUMENTATION.map((step, index) => (
+                      <li className="relative" key={index}>
+                        <div className="absolute -left-12">
+                          <div className="flex h-8 w-8 items-center justify-center rounded-full border-[3px] border-neutral-200 text-sm font-bold">
+                            {index + 1}
+                          </div>
                         </div>
-                      </div>
 
-                      <h3 className="font-semibold">{_(step.title)}</h3>
-                      <p className="text-muted-foreground mt-1 text-sm">{_(step.description)}</p>
-                    </li>
-                  ))}
-                </ul>
+                        <h3 className="font-semibold">{_(step.title)}</h3>
+                        <p className="text-muted-foreground mt-1 text-sm">{_(step.description)}</p>
+                      </li>
+                    ))}
+                  </ul>
 
-                {remaining.directTemplates === 0 && (
-                  <Alert variant="warning">
-                    <AlertTitle>
-                      <Trans>
-                        Direct template link usage exceeded ({quota.directTemplates}/
-                        {quota.directTemplates})
-                      </Trans>
-                    </AlertTitle>
-                    <AlertDescription>
-                      <Trans>
-                        You have reached the maximum limit of {quota.directTemplates} direct
-                        templates.{' '}
-                        <Link
-                          className="mt-1 block underline underline-offset-4"
-                          to={`/o/${organisation.url}/settings/billing`}
-                        >
-                          Upgrade your account to continue!
-                        </Link>
-                      </Trans>
-                    </AlertDescription>
-                  </Alert>
-                )}
+                  {remaining.directTemplates === 0 && (
+                    <Alert variant="warning">
+                      <AlertTitle>
+                        <Trans>
+                          Direct template link usage exceeded ({quota.directTemplates}/
+                          {quota.directTemplates})
+                        </Trans>
+                      </AlertTitle>
+                      <AlertDescription>
+                        <Trans>
+                          You have reached the maximum limit of {quota.directTemplates} direct
+                          templates.{' '}
+                          <Link
+                            className="mt-1 block underline underline-offset-4"
+                            to={`/o/${organisation.url}/settings/billing`}
+                          >
+                            Upgrade your account to continue!
+                          </Link>
+                        </Trans>
+                      </AlertDescription>
+                    </Alert>
+                  )}
 
-                {remaining.directTemplates !== 0 && (
-                  <DialogFooter className="mx-auto mt-4">
-                    <Button type="button" onClick={() => setCurrentStep('SELECT_RECIPIENT')}>
-                      <Trans> Enable direct link signing</Trans>
-                    </Button>
-                  </DialogFooter>
-                )}
-              </DialogContent>
-            ))
-            .with({ token: P.nullish, currentStep: 'SELECT_RECIPIENT' }, () => (
-              <DialogContent className="relative">
-                {isCreatingTemplateDirectLink && validDirectTemplateRecipients.length !== 0 && (
-                  <div className="absolute inset-0 z-50 flex items-center justify-center rounded bg-white/50 dark:bg-black/50">
-                    <LoaderIcon className="h-6 w-6 animate-spin text-gray-500" />
-                  </div>
-                )}
-
-                <DialogHeader>
-                  <DialogTitle>
-                    <Trans>Choose Direct Link Recipient</Trans>
-                  </DialogTitle>
-
-                  <DialogDescription>
-                    <Trans>Choose an existing recipient from below to continue</Trans>
-                  </DialogDescription>
-                </DialogHeader>
-
-                <div className="custom-scrollbar max-h-[60vh] overflow-y-auto rounded-md border">
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead>
-                          <Trans>Recipient</Trans>
-                        </TableHead>
-                        <TableHead>
-                          <Trans>Role</Trans>
-                        </TableHead>
-                        <TableHead></TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {validDirectTemplateRecipients.length === 0 && (
-                        <TableRow>
-                          <TableCell colSpan={3} className="h-16 text-center">
-                            <p className="text-muted-foreground">
-                              <Trans>No valid recipients found</Trans>
-                            </p>
-                          </TableCell>
-                        </TableRow>
-                      )}
-
-                      {validDirectTemplateRecipients.map((row) => (
-                        <TableRow
-                          className="cursor-pointer"
-                          key={row.id}
-                          onClick={async () => onRecipientTableRowClick(row.id)}
-                        >
-                          <TableCell>
-                            <div className="text-muted-foreground text-sm">
-                              <p>{row.name}</p>
-                              <p className="text-muted-foreground/70 text-xs">{row.email}</p>
-                            </div>
-                          </TableCell>
-
-                          <TableCell className="text-muted-foreground text-sm">
-                            {_(RECIPIENT_ROLES_DESCRIPTION[row.role].roleName)}
-                          </TableCell>
-
-                          <TableCell>
-                            {selectedRecipientId === row.id ? (
-                              <CircleDotIcon className="h-5 w-5 text-neutral-300" />
-                            ) : (
-                              <CircleIcon className="h-5 w-5 text-neutral-300" />
-                            )}
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </div>
-
-                {/* Prevent creating placeholder direct template recipient if the email already exists. */}
-                {!template.recipients.some(
-                  (recipient) => recipient.email === DIRECT_TEMPLATE_RECIPIENT_EMAIL,
-                ) && (
-                  <DialogFooter className="mx-auto">
-                    <div className="flex flex-col items-center justify-center">
-                      {validDirectTemplateRecipients.length !== 0 && (
-                        <p className="text-muted-foreground text-sm">
-                          <Trans>Or</Trans>
-                        </p>
-                      )}
-
-                      <Button
-                        type="button"
-                        className="mt-2"
-                        loading={isCreatingTemplateDirectLink && !selectedRecipientId}
-                        onClick={async () =>
-                          createTemplateDirectLink({
-                            templateId: template.id,
-                          })
-                        }
-                      >
-                        <Trans>Create one automatically</Trans>
+                  {remaining.directTemplates !== 0 && (
+                    <DialogFooter className="mx-auto mt-4">
+                      <Button type="button" onClick={() => setCurrentStep('SELECT_RECIPIENT')}>
+                        <Trans> Enable direct link signing</Trans>
                       </Button>
+                    </DialogFooter>
+                  )}
+                </DialogContent>
+              ))
+              .with({ token: P.nullish, currentStep: 'SELECT_RECIPIENT' }, () => (
+                <DialogContent className="relative">
+                  {isCreatingTemplateDirectLink && validDirectTemplateRecipients.length !== 0 && (
+                    <div className="absolute inset-0 z-50 flex items-center justify-center rounded bg-white/50 dark:bg-black/50">
+                      <LoaderIcon className="h-6 w-6 animate-spin text-gray-500" />
                     </div>
-                  </DialogFooter>
-                )}
-              </DialogContent>
-            ))
-            .with({ token: P.string, currentStep: 'MANAGE' }, ({ token }) => (
-              <DialogContent className="relative">
-                <DialogHeader>
-                  <DialogTitle>
-                    <Trans>Direct Link Signing</Trans>
-                  </DialogTitle>
+                  )}
 
-                  <DialogDescription>
-                    <Trans>Manage the direct link signing for this template</Trans>
-                  </DialogDescription>
-                </DialogHeader>
+                  <DialogHeader>
+                    <DialogTitle>
+                      <Trans>Choose Direct Link Recipient</Trans>
+                    </DialogTitle>
 
-                <div>
-                  <div className="flex flex-row items-center justify-between">
-                    <Label className="flex flex-row">
-                      <Trans>Enable Direct Link Signing</Trans>
-                      <Tooltip>
-                        <TooltipTrigger tabIndex={-1} className="ml-2">
-                          <InfoIcon className="h-4 w-4" />
-                        </TooltipTrigger>
-                        <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-                          <Trans>
-                            Disabling direct link signing will prevent anyone from accessing the
-                            link.
-                          </Trans>
-                        </TooltipContent>
-                      </Tooltip>
-                    </Label>
+                    <DialogDescription>
+                      <Trans>Choose an existing recipient from below to continue</Trans>
+                    </DialogDescription>
+                  </DialogHeader>
 
-                    <Switch
-                      className="mt-2"
-                      checked={isEnabled}
-                      onCheckedChange={(value) => setIsEnabled(value)}
-                    />
+                  <div className="custom-scrollbar max-h-[60vh] overflow-y-auto rounded-md border">
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>
+                            <Trans>Recipient</Trans>
+                          </TableHead>
+                          <TableHead>
+                            <Trans>Role</Trans>
+                          </TableHead>
+                          <TableHead></TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {validDirectTemplateRecipients.length === 0 && (
+                          <TableRow>
+                            <TableCell colSpan={3} className="h-16 text-center">
+                              <p className="text-muted-foreground">
+                                <Trans>No valid recipients found</Trans>
+                              </p>
+                            </TableCell>
+                          </TableRow>
+                        )}
+
+                        {validDirectTemplateRecipients.map((row) => (
+                          <TableRow
+                            className="cursor-pointer"
+                            key={row.id}
+                            onClick={async () => onRecipientTableRowClick(row.id)}
+                          >
+                            <TableCell>
+                              <div className="text-muted-foreground text-sm">
+                                <p>{row.name}</p>
+                                <p className="text-muted-foreground/70 text-xs">{row.email}</p>
+                              </div>
+                            </TableCell>
+
+                            <TableCell className="text-muted-foreground text-sm">
+                              {_(RECIPIENT_ROLES_DESCRIPTION[row.role].roleName)}
+                            </TableCell>
+
+                            <TableCell>
+                              {selectedRecipientId === row.id ? (
+                                <CircleDotIcon className="h-5 w-5 text-neutral-300" />
+                              ) : (
+                                <CircleIcon className="h-5 w-5 text-neutral-300" />
+                              )}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
                   </div>
 
-                  <div className="mt-2">
-                    <Label htmlFor="copy-direct-link">
-                      <Trans>Copy Shareable Link</Trans>
-                    </Label>
+                  {/* Prevent creating placeholder direct template recipient if the email already exists. */}
+                  {!recipients.some(
+                    (recipient) => recipient.email === DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+                  ) && (
+                    <DialogFooter className="mx-auto">
+                      <div className="flex flex-col items-center justify-center">
+                        {validDirectTemplateRecipients.length !== 0 && (
+                          <p className="text-muted-foreground text-sm">
+                            <Trans>Or</Trans>
+                          </p>
+                        )}
 
-                    <div className="relative mt-1">
-                      <Input
-                        id="copy-direct-link"
-                        disabled
-                        value={formatDirectTemplatePath(token).replace(/https?:\/\//, '')}
-                        readOnly
-                        className="pr-12"
-                      />
-
-                      <div className="absolute bottom-0 right-1 top-0 flex items-center justify-center">
                         <Button
-                          variant="none"
                           type="button"
-                          className="h-8 w-8"
-                          onClick={() => void onCopyClick(token)}
+                          className="mt-2"
+                          loading={isCreatingTemplateDirectLink && !selectedRecipientId}
+                          onClick={async () =>
+                            createTemplateDirectLink({
+                              templateId,
+                            })
+                          }
                         >
-                          <ClipboardCopyIcon className="h-4 w-4 flex-shrink-0" />
+                          <Trans>Create one automatically</Trans>
                         </Button>
                       </div>
+                    </DialogFooter>
+                  )}
+                </DialogContent>
+              ))
+              .with({ token: P.string, currentStep: 'MANAGE' }, ({ token }) => (
+                <DialogContent className="relative">
+                  <DialogHeader>
+                    <DialogTitle>
+                      <Trans>Direct Link Signing</Trans>
+                    </DialogTitle>
+
+                    <DialogDescription>
+                      <Trans>Manage the direct link signing for this template</Trans>
+                    </DialogDescription>
+                  </DialogHeader>
+
+                  <div>
+                    <div className="flex flex-row items-center justify-between">
+                      <Label className="flex flex-row">
+                        <Trans>Enable Direct Link Signing</Trans>
+                        <Tooltip>
+                          <TooltipTrigger tabIndex={-1} className="ml-2">
+                            <InfoIcon className="h-4 w-4" />
+                          </TooltipTrigger>
+                          <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                            <Trans>
+                              Disabling direct link signing will prevent anyone from accessing the
+                              link.
+                            </Trans>
+                          </TooltipContent>
+                        </Tooltip>
+                      </Label>
+
+                      <Switch
+                        className="mt-2"
+                        checked={isEnabled}
+                        onCheckedChange={(value) => setIsEnabled(value)}
+                      />
+                    </div>
+
+                    <div className="mt-2">
+                      <Label htmlFor="copy-direct-link">
+                        <Trans>Copy Shareable Link</Trans>
+                      </Label>
+
+                      <div className="relative mt-1">
+                        <Input
+                          id="copy-direct-link"
+                          disabled
+                          value={formatDirectTemplatePath(token).replace(/https?:\/\//, '')}
+                          readOnly
+                          className="pr-12"
+                        />
+
+                        <div className="absolute bottom-0 right-1 top-0 flex items-center justify-center">
+                          <Button
+                            variant="none"
+                            type="button"
+                            className="h-8 w-8"
+                            onClick={() => void onCopyClick(token)}
+                          >
+                            <ClipboardCopyIcon className="h-4 w-4 flex-shrink-0" />
+                          </Button>
+                        </div>
+                      </div>
                     </div>
                   </div>
-                </div>
 
-                <DialogFooter className="mt-4">
-                  <Button
-                    type="button"
-                    variant="destructive"
-                    className="mr-auto w-full sm:w-auto"
-                    loading={isDeletingTemplateDirectLink}
-                    onClick={() => setCurrentStep('CONFIRM_DELETE')}
-                  >
-                    <Trans>Remove</Trans>
-                  </Button>
+                  <DialogFooter className="mt-4">
+                    <Button
+                      type="button"
+                      variant="destructive"
+                      className="mr-auto w-full sm:w-auto"
+                      loading={isDeletingTemplateDirectLink}
+                      onClick={() => setCurrentStep('CONFIRM_DELETE')}
+                    >
+                      <Trans>Remove</Trans>
+                    </Button>
 
-                  <Button
-                    type="button"
-                    loading={isTogglingTemplateAccess}
-                    onClick={async () => {
-                      await toggleTemplateDirectLink({
-                        templateId: template.id,
-                        enabled: isEnabled,
-                      }).catch(() => null);
+                    <Button
+                      type="button"
+                      loading={isTogglingTemplateAccess}
+                      onClick={async () => {
+                        await toggleTemplateDirectLink({
+                          templateId,
+                          enabled: isEnabled,
+                        }).catch(() => null);
 
-                      onOpenChange(false);
-                    }}
-                  >
-                    <Trans>Save</Trans>
-                  </Button>
-                </DialogFooter>
-              </DialogContent>
-            ))
-            .with({ token: P.string, currentStep: 'CONFIRM_DELETE' }, () => (
-              <DialogContent className="relative">
-                <DialogHeader>
-                  <DialogTitle>
-                    <Trans>Are you sure?</Trans>
-                  </DialogTitle>
+                        setOpen(false);
+                      }}
+                    >
+                      <Trans>Save</Trans>
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              ))
+              .with({ token: P.string, currentStep: 'CONFIRM_DELETE' }, () => (
+                <DialogContent className="relative">
+                  <DialogHeader>
+                    <DialogTitle>
+                      <Trans>Are you sure?</Trans>
+                    </DialogTitle>
 
-                  <DialogDescription>
-                    <Trans>
-                      Please note that proceeding will remove direct linking recipient and turn it
-                      into a placeholder.
-                    </Trans>
-                  </DialogDescription>
-                </DialogHeader>
+                    <DialogDescription>
+                      <Trans>
+                        Please note that proceeding will remove direct linking recipient and turn it
+                        into a placeholder.
+                      </Trans>
+                    </DialogDescription>
+                  </DialogHeader>
 
-                <DialogFooter>
-                  <Button
-                    type="button"
-                    variant="secondary"
-                    onClick={() => setCurrentStep('MANAGE')}
-                  >
-                    <Trans>Cancel</Trans>
-                  </Button>
+                  <DialogFooter>
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      onClick={() => setCurrentStep('MANAGE')}
+                    >
+                      <Trans>Cancel</Trans>
+                    </Button>
 
-                  <Button
-                    type="button"
-                    variant="destructive"
-                    loading={isDeletingTemplateDirectLink}
-                    onClick={() => void deleteTemplateDirectLink({ templateId: template.id })}
-                  >
-                    <Trans>Confirm</Trans>
-                  </Button>
-                </DialogFooter>
-              </DialogContent>
-            ))
-            .otherwise(() => null)}
-        </AnimateGenericFadeInOut>
-      </fieldset>
+                    <Button
+                      type="button"
+                      variant="destructive"
+                      loading={isDeletingTemplateDirectLink}
+                      onClick={() => void deleteTemplateDirectLink({ templateId })}
+                    >
+                      <Trans>Confirm</Trans>
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              ))
+              .otherwise(() => null)}
+          </AnimateGenericFadeInOut>
+        </fieldset>
+      </DialogContent>
     </Dialog>
   );
 };

apps/remix/app/components/dialogs/template-use-dialog.tsx

@@ -384,6 +384,7 @@ export function TemplateUseDialog({
                           className="text-muted-foreground ml-2 flex items-center text-sm"
                           htmlFor="useCustomDocument"
                         >
+                          {/* Todo: Envelopes - How will this work? */}
                           <Trans>Upload custom document</Trans>
                           <Tooltip>
                             <TooltipTrigger type="button">