feat: add ability to save documents as template (#2661)

apps/remix/app/components/dialogs/envelope-save-as-template-dialog.tsx

@@ -0,0 +1,174 @@
+import { useState } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+import { Controller, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+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 { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+type EnvelopeSaveAsTemplateDialogProps = {
+  envelopeId: string;
+  trigger?: React.ReactNode;
+};
+
+export const EnvelopeSaveAsTemplateDialog = ({
+  envelopeId,
+  trigger,
+}: EnvelopeSaveAsTemplateDialogProps) => {
+  const navigate = useNavigate();
+
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const team = useCurrentTeam();
+
+  const templatesPath = formatTemplatesPath(team.url);
+
+  const form = useForm({
+    defaultValues: {
+      includeRecipients: true,
+      includeFields: true,
+    },
+  });
+
+  const includeRecipients = form.watch('includeRecipients');
+
+  const { mutateAsync: saveAsTemplate, isPending } = trpc.envelope.saveAsTemplate.useMutation({
+    onSuccess: async ({ id }) => {
+      toast({
+        title: t`Template Created`,
+        description: t`Your document has been saved as a template.`,
+        duration: 5000,
+      });
+
+      await navigate(`${templatesPath}/${id}/edit`);
+      setOpen(false);
+    },
+  });
+
+  const onSubmit = async () => {
+    const { includeRecipients, includeFields } = form.getValues();
+
+    try {
+      await saveAsTemplate({
+        envelopeId,
+        includeRecipients,
+        includeFields: includeRecipients && includeFields,
+      });
+    } catch {
+      toast({
+        title: t`Something went wrong`,
+        description: t`This document could not be saved as a template at this time. Please try again.`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(value) => {
+        if (isPending) {
+          return;
+        }
+
+        setOpen(value);
+
+        if (!value) {
+          form.reset();
+        }
+      }}
+    >
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Save as Template</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Create a template from this document.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <Controller
+            control={form.control}
+            name="includeRecipients"
+            render={({ field }) => (
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="envelopeIncludeRecipients"
+                  checked={field.value}
+                  onCheckedChange={(checked) => {
+                    field.onChange(checked === true);
+
+                    if (!checked) {
+                      form.setValue('includeFields', false);
+                    }
+                  }}
+                />
+                <Label htmlFor="envelopeIncludeRecipients">
+                  <Trans>Include Recipients</Trans>
+                </Label>
+              </div>
+            )}
+          />
+
+          <Controller
+            control={form.control}
+            name="includeFields"
+            render={({ field }) => (
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="envelopeIncludeFields"
+                  checked={field.value}
+                  disabled={!includeRecipients}
+                  onCheckedChange={(checked) => field.onChange(checked === true)}
+                />
+                <Label
+                  htmlFor="envelopeIncludeFields"
+                  className={!includeRecipients ? 'opacity-50' : ''}
+                >
+                  <Trans>Include Fields</Trans>
+                </Label>
+              </div>
+            )}
+          />
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isPending}>
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
+
+          <Button type="button" loading={isPending} onClick={onSubmit}>
+            <Trans>Save as Template</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/general/document/document-page-view-dropdown.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 
-import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus } from '@prisma/client';
 import {
   Copy,
   Download,
   Edit,
+  FileOutputIcon,
   Loader,
   MoreHorizontal,
   ScrollTextIcon,
@@ -28,12 +28,12 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
+import { EnvelopeSaveAsTemplateDialog } from '~/components/dialogs/envelope-save-as-template-dialog';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import { useCurrentTeam } from '~/providers/team';
 
@@ -43,8 +43,6 @@ export type DocumentPageViewDropdownProps = {
 
 export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownProps) => {
   const { user } = useSession();
-  const { toast } = useToast();
-  const { _ } = useLingui();
 
   const navigate = useNavigate();
   const team = useCurrentTeam();
@@ -68,8 +66,8 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger>
-        <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+      <DropdownMenuTrigger data-testid="document-page-view-action-btn">
+        <MoreHorizontal className="h-5 w-5 text-muted-foreground" />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="end" forceMount>
@@ -113,6 +111,18 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
           <Trans>Duplicate</Trans>
         </DropdownMenuItem>
 
+        <EnvelopeSaveAsTemplateDialog
+          envelopeId={envelope.id}
+          trigger={
+            <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+              <div>
+                <FileOutputIcon className="mr-2 h-4 w-4" />
+                <Trans>Save as Template</Trans>
+              </div>
+            </DropdownMenuItem>
+          }
+        />
+
         <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)} disabled={isDeleted}>
           <Trash2 className="mr-2 h-4 w-4" />
           <Trans>Delete</Trans>

apps/remix/app/components/general/envelope-editor/envelope-editor.tsx

@@ -10,6 +10,7 @@ import {
   CopyPlusIcon,
   DownloadCloudIcon,
   EyeIcon,
+  FileOutputIcon,
   LinkIcon,
   type LucideIcon,
   MousePointerIcon,
@@ -35,6 +36,7 @@ import { EnvelopeDistributeDialog } from '~/components/dialogs/envelope-distribu
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 import { EnvelopeDuplicateDialog } from '~/components/dialogs/envelope-duplicate-dialog';
 import { EnvelopeRedistributeDialog } from '~/components/dialogs/envelope-redistribute-dialog';
+import { EnvelopeSaveAsTemplateDialog } from '~/components/dialogs/envelope-save-as-template-dialog';
 import { TemplateDirectLinkDialog } from '~/components/dialogs/template-direct-link-dialog';
 import { EnvelopeEditorSettingsDialog } from '~/components/general/envelope-editor/envelope-editor-settings-dialog';
 
@@ -101,6 +103,7 @@ export const EnvelopeEditor = () => {
       allowDistributing,
       allowDirectLink,
       allowDuplication,
+      allowSaveAsTemplate,
       allowDownloadPDF,
       allowDeletion,
     },
@@ -466,6 +469,28 @@ export const EnvelopeEditor = () => {
               />
             )}
 
+            {allowSaveAsTemplate && isDocument && (
+              <EnvelopeSaveAsTemplateDialog
+                envelopeId={envelope.id}
+                trigger={
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-start"
+                    title={t(msg`Save as Template`)}
+                  >
+                    <FileOutputIcon className="h-4 w-4" />
+
+                    {!minimizeLeftSidebar && (
+                      <span className="ml-2">
+                        <Trans>Save as Template</Trans>
+                      </span>
+                    )}
+                  </Button>
+                }
+              />
+            )}
+
             {allowDownloadPDF && (
               <EnvelopeDownloadDialog
                 envelopeId={envelope.id}

apps/remix/app/components/tables/documents-table-action-dropdown.tsx

@@ -10,6 +10,7 @@ import {
   Download,
   Edit,
   EyeIcon,
+  FileOutputIcon,
   FolderInput,
   Loader,
   MoreHorizontal,
@@ -35,6 +36,7 @@ import {
 import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
+import { EnvelopeSaveAsTemplateDialog } from '~/components/dialogs/envelope-save-as-template-dialog';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import { useCurrentTeam } from '~/providers/team';
 
@@ -76,7 +78,7 @@ export const DocumentsTableActionDropdown = ({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger data-testid="document-table-action-btn">
-        <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+        <MoreHorizontal className="h-5 w-5 text-muted-foreground" />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="start" forceMount>
@@ -140,6 +142,18 @@ export const DocumentsTableActionDropdown = ({
           <Trans>Duplicate</Trans>
         </DropdownMenuItem>
 
+        <EnvelopeSaveAsTemplateDialog
+          envelopeId={row.envelopeId}
+          trigger={
+            <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+              <div>
+                <FileOutputIcon className="mr-2 h-4 w-4" />
+                <Trans>Save as Template</Trans>
+              </div>
+            </DropdownMenuItem>
+          }
+        />
+
         {onMoveDocument && canManageDocument && (
           <DropdownMenuItem onClick={onMoveDocument} onSelect={(e) => e.preventDefault()}>
             <FolderInput className="mr-2 h-4 w-4" />

apps/remix/app/routes/embed+/playground.tsx

@@ -70,6 +70,7 @@ export default function EmbedPlaygroundPage() {
     allowDistributing: false,
     allowDirectLink: false,
     allowDuplication: false,
+    allowSaveAsTemplate: false,
     allowDownloadPDF: false,
     allowDeletion: false,
   });