feat: add template meta for templates

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

packages/lib/server-only/document/send-completed-email.ts

@@ -80,7 +80,7 @@ export const sendCompletedEmail = async ({ documentId, requestMetadata }: SendDo
       text: render(template, { plainText: true }),
       attachments: [
         {
-          filename: document.title,
+          filename: document.title.endsWith('.pdf') ? document.title : document.title + '.pdf',
           content: Buffer.from(completedDocument),
         },
       ],

packages/lib/server-only/template-document-meta/upsert-template-document-meta.ts

@@ -0,0 +1,50 @@
+'use server';
+
+import { prisma } from '@documenso/prisma';
+
+export type CreateTemplateDocumentMetaOptions = {
+  templateId: number;
+  subject?: string;
+  message?: string;
+  timezone?: string;
+  password?: string;
+  dateFormat?: string;
+  redirectUrl?: string;
+};
+
+export const upsertTemplateDocumentMeta = async ({
+  subject,
+  message,
+  timezone,
+  dateFormat,
+  templateId,
+  password,
+  redirectUrl,
+}: CreateTemplateDocumentMetaOptions) => {
+  return await prisma.$transaction(async (tx) => {
+    const upsertedTemplateDocumentMeta = await tx.templateDocumentMeta.upsert({
+      where: {
+        templateId,
+      },
+      update: {
+        subject,
+        message,
+        timezone,
+        password,
+        dateFormat,
+        redirectUrl,
+      },
+      create: {
+        templateId,
+        subject,
+        message,
+        timezone,
+        password,
+        dateFormat,
+        redirectUrl,
+      },
+    });
+
+    return upsertedTemplateDocumentMeta;
+  });
+};

packages/lib/server-only/template/create-document-from-template.ts

@@ -42,6 +42,7 @@ export const createDocumentFromTemplate = async ({
       Recipient: true,
       Field: true,
       templateDocumentData: true,
+      templateDocumentMeta: true,
     },
   });
 
@@ -57,12 +58,24 @@ export const createDocumentFromTemplate = async ({
     },
   });
 
+  // const templateDocumentMeta = await prisma.documentMeta.create({
+  //   data: {
+  //     subject: template.templateDocumentMeta.subject,
+  //     message: template.templateDocumentMeta.message,
+  //     timezone: template.templateDocumentMeta.timezone,
+  //     password: template.templateDocumentMeta.password,
+  //     dateFormat: template.templateDocumentMeta.dateFormat,
+  //     redirectUrl: template.templateDocumentMeta.redirectUrl,
+  //   },
+  // });
+
   const document = await prisma.document.create({
     data: {
       userId,
       teamId: template.teamId,
       title: template.title,
       documentDataId: documentData.id,
+      // documentMeta: templateDocumentMeta,
       Recipient: {
         create: template.Recipient.map((recipient) => ({
           email: recipient.email,

packages/lib/server-only/template/duplicate-template.ts

@@ -38,6 +38,7 @@ export const duplicateTemplate = async ({
       Recipient: true,
       Field: true,
       templateDocumentData: true,
+      templateDocumentMeta: true,
     },
   });
 

packages/lib/server-only/template/find-templates.ts

@@ -37,6 +37,7 @@ export const findTemplates = async ({
       where: whereFilter,
       include: {
         templateDocumentData: true,
+        templateDocumentMeta: true,
         team: {
           select: {
             id: true,

packages/lib/server-only/template/get-template-by-id.ts

@@ -29,6 +29,7 @@ export const getTemplateById = async ({ id, userId }: GetTemplateByIdOptions) =>
     where: whereFilter,
     include: {
       templateDocumentData: true,
+      templateDocumentMeta: true,
     },
   });
 };

packages/prisma/migrations/20240416212742_create_template_document_meta/migration.sql

@@ -0,0 +1,19 @@
+-- CreateTable
+CREATE TABLE "TemplateDocumentMeta" (
+    "id" TEXT NOT NULL,
+    "subject" TEXT,
+    "message" TEXT,
+    "timezone" TEXT DEFAULT 'Etc/UTC',
+    "password" TEXT,
+    "dateFormat" TEXT DEFAULT 'yyyy-MM-dd hh:mm a',
+    "templateId" INTEGER NOT NULL,
+    "redirectUrl" TEXT,
+
+    CONSTRAINT "TemplateDocumentMeta_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TemplateDocumentMeta_templateId_key" ON "TemplateDocumentMeta"("templateId");
+
+-- AddForeignKey
+ALTER TABLE "TemplateDocumentMeta" ADD CONSTRAINT "TemplateDocumentMeta_templateId_fkey" FOREIGN KEY ("templateId") REFERENCES "Template"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/schema.prisma

@@ -324,6 +324,18 @@ model DocumentMeta {
   redirectUrl String?
 }
 
+model TemplateDocumentMeta {
+  id          String   @id @default(cuid())
+  subject     String?
+  message     String?
+  timezone    String?  @default("Etc/UTC") @db.Text
+  password    String?
+  dateFormat  String?  @default("yyyy-MM-dd hh:mm a") @db.Text
+  templateId  Int      @unique
+  template    Template @relation(fields: [templateId], references: [id], onDelete: Cascade)
+  redirectUrl String?
+}
+
 enum ReadStatus {
   NOT_OPENED
   OPENED
@@ -550,6 +562,7 @@ model Template {
 
   team                 Team?        @relation(fields: [teamId], references: [id], onDelete: Cascade)
   templateDocumentData DocumentData @relation(fields: [templateDocumentDataId], references: [id], onDelete: Cascade)
+  templateDocumentMeta TemplateDocumentMeta?
   User                 User         @relation(fields: [userId], references: [id], onDelete: Cascade)
   Recipient            Recipient[]
   Field                Field[]

packages/ui/primitives/template-flow/add-template-settings.tsx

@@ -0,0 +1,369 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { InfoIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+
+import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { DOCUMENT_AUTH_TYPES } from '@documenso/lib/constants/document-auth';
+import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
+import { DocumentAccessAuth, DocumentActionAuth } from '@documenso/lib/types/document-auth';
+import { DocumentStatus, type Field, type Recipient, SendStatus } from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@documenso/ui/primitives/accordion';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+
+import { Combobox } from '../combobox';
+import {
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
+  DocumentFlowFormContainerStep,
+} from '../document-flow/document-flow-root';
+import { ShowFieldItem } from '../document-flow/show-field-item';
+import type { DocumentFlowStep } from '../document-flow/types';
+import { Input } from '../input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
+import { useStep } from '../stepper';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
+import type { TTemplateSettingsFormSchema } from './add-template-settings.types';
+import { ZTemplateSettingsFormSchema } from './add-template-settings.types';
+
+export type AddSettingsFormProps = {
+  documentFlow: DocumentFlowStep;
+  recipients: Recipient[];
+  fields: Field[];
+  isDocumentEnterprise: boolean;
+  isDocumentPdfLoaded: boolean;
+  document: DocumentWithData;
+  onSubmit: (_data: TTemplateSettingsFormSchema) => void;
+};
+
+export const AddTemplateSettingsFormPartial = ({
+  documentFlow,
+  recipients,
+  fields,
+  isDocumentEnterprise,
+  isDocumentPdfLoaded,
+  document,
+  onSubmit,
+}: AddSettingsFormProps) => {
+  const form = useForm<TTemplateSettingsFormSchema>({
+    resolver: zodResolver(ZTemplateSettingsFormSchema),
+    defaultValues: {
+      title: document.title,
+      globalAccessAuth: documentAuthOption?.globalAccessAuth || undefined,
+      globalActionAuth: documentAuthOption?.globalActionAuth || undefined,
+      meta: {
+        timezone: document.documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
+        dateFormat: document.documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
+        redirectUrl: document.documentMeta?.redirectUrl ?? '',
+      },
+    },
+  });
+
+  const { stepIndex, currentStep, totalSteps, previousStep } = useStep();
+
+  const documentHasBeenSent = recipients.some(
+    (recipient) => recipient.sendStatus === SendStatus.SENT,
+  );
+
+  // We almost always want to set the timezone to the user's local timezone to avoid confusion
+  // when the document is signed.
+  useEffect(() => {
+    if (!form.formState.touchedFields.meta?.timezone && !documentHasBeenSent) {
+      form.setValue('meta.timezone', Intl.DateTimeFormat().resolvedOptions().timeZone);
+    }
+  }, [documentHasBeenSent, form, form.setValue, form.formState.touchedFields.meta?.timezone]);
+
+  return (
+    <>
+      <DocumentFlowFormContainerHeader
+        title={documentFlow.title}
+        description={documentFlow.description}
+      />
+
+      <DocumentFlowFormContainerContent>
+        {isDocumentPdfLoaded &&
+          fields.map((field, index) => (
+            <ShowFieldItem key={index} field={field} recipients={recipients} />
+          ))}
+
+        <Form {...form}>
+          <fieldset
+            className="flex h-full flex-col space-y-6"
+            disabled={form.formState.isSubmitting}
+          >
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>Title</FormLabel>
+
+                  <FormControl>
+                    <Input
+                      className="bg-background"
+                      {...field}
+                      disabled={document.status !== DocumentStatus.DRAFT || field.disabled}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="globalAccessAuth"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="flex flex-row items-center">
+                    Document access
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <InfoIcon className="mx-2 h-4 w-4" />
+                      </TooltipTrigger>
+
+                      <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+                        <h2>
+                          <strong>Document access</strong>
+                        </h2>
+
+                        <p>The authentication required for recipients to view the document.</p>
+
+                        <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
+                          <li>
+                            <strong>Require account</strong> - The recipient must be signed in to
+                            view the document
+                          </li>
+                          <li>
+                            <strong>None</strong> - The document can be accessed directly by the URL
+                            sent to the recipient
+                          </li>
+                        </ul>
+                      </TooltipContent>
+                    </Tooltip>
+                  </FormLabel>
+
+                  <FormControl>
+                    <Select {...field} onValueChange={field.onChange}>
+                      <SelectTrigger className="bg-background text-muted-foreground">
+                        <SelectValue data-testid="documentAccessSelectValue" placeholder="None" />
+                      </SelectTrigger>
+
+                      <SelectContent position="popper">
+                        {Object.values(DocumentAccessAuth).map((authType) => (
+                          <SelectItem key={authType} value={authType}>
+                            {DOCUMENT_AUTH_TYPES[authType].value}
+                          </SelectItem>
+                        ))}
+
+                        {/* Note: -1 is remapped in the Zod schema to the required value. */}
+                        <SelectItem value={'-1'}>None</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            {isDocumentEnterprise && (
+              <FormField
+                control={form.control}
+                name="globalActionAuth"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="flex flex-row items-center">
+                      Recipient action authentication
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <InfoIcon className="mx-2 h-4 w-4" />
+                        </TooltipTrigger>
+
+                        <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+                          <h2>
+                            <strong>Global recipient action authentication</strong>
+                          </h2>
+
+                          <p>
+                            The authentication required for recipients to sign the signature field.
+                          </p>
+
+                          <p>
+                            This can be overriden by setting the authentication requirements
+                            directly on each recipient in the next step.
+                          </p>
+
+                          <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
+                            <li>
+                              <strong>Require account</strong> - The recipient must be signed in
+                            </li>
+                            <li>
+                              <strong>Require passkey</strong> - The recipient must have an account
+                              and passkey configured via their settings
+                            </li>
+                            <li>
+                              <strong>Require 2FA</strong> - The recipient must have an account and
+                              2FA enabled via their settings
+                            </li>
+                            <li>
+                              <strong>None</strong> - No authentication required
+                            </li>
+                          </ul>
+                        </TooltipContent>
+                      </Tooltip>
+                    </FormLabel>
+
+                    <FormControl>
+                      <Select {...field} onValueChange={field.onChange}>
+                        <SelectTrigger className="bg-background text-muted-foreground">
+                          <SelectValue data-testid="documentActionSelectValue" placeholder="None" />
+                        </SelectTrigger>
+
+                        <SelectContent position="popper">
+                          {Object.values(DocumentActionAuth).map((authType) => (
+                            <SelectItem key={authType} value={authType}>
+                              {DOCUMENT_AUTH_TYPES[authType].value}
+                            </SelectItem>
+                          ))}
+
+                          {/* Note: -1 is remapped in the Zod schema to the required value. */}
+                          <SelectItem value={'-1'}>None</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <Accordion type="multiple" className="mt-6">
+              <AccordionItem value="advanced-options" className="border-none">
+                <AccordionTrigger className="text-foreground mb-2 rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
+                  Advanced Options
+                </AccordionTrigger>
+
+                <AccordionContent className="text-muted-foreground -mx-1 px-1 pt-2 text-sm leading-relaxed">
+                  <div className="flex flex-col space-y-6 ">
+                    <FormField
+                      control={form.control}
+                      name="meta.dateFormat"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Date Format</FormLabel>
+
+                          <FormControl>
+                            <Select
+                              {...field}
+                              onValueChange={field.onChange}
+                              disabled={documentHasBeenSent}
+                            >
+                              <SelectTrigger className="bg-background">
+                                <SelectValue />
+                              </SelectTrigger>
+
+                              <SelectContent>
+                                {DATE_FORMATS.map((format) => (
+                                  <SelectItem key={format.key} value={format.value}>
+                                    {format.label}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="meta.timezone"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Time Zone</FormLabel>
+
+                          <FormControl>
+                            <Combobox
+                              className="bg-background"
+                              options={TIME_ZONES}
+                              {...field}
+                              onChange={(value) => value && field.onChange(value)}
+                              disabled={documentHasBeenSent}
+                            />
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="meta.redirectUrl"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="flex flex-row items-center">
+                            Redirect URL{' '}
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <InfoIcon className="mx-2 h-4 w-4" />
+                              </TooltipTrigger>
+
+                              <TooltipContent className="text-muted-foreground max-w-xs">
+                                Add a URL to redirect the user to once the document is signed
+                              </TooltipContent>
+                            </Tooltip>
+                          </FormLabel>
+
+                          <FormControl>
+                            <Input className="bg-background" {...field} />
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </fieldset>
+        </Form>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep
+          title={documentFlow.title}
+          step={currentStep}
+          maxStep={totalSteps}
+        />
+
+        <DocumentFlowFormContainerActions
+          loading={form.formState.isSubmitting}
+          disabled={form.formState.isSubmitting}
+          canGoBack={stepIndex !== 0}
+          onGoBackClick={previousStep}
+          onGoNextClick={form.handleSubmit(onSubmit)}
+        />
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

packages/ui/primitives/template-flow/add-template-settings.types.ts

@@ -0,0 +1,42 @@
+import { z } from 'zod';
+
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import { URL_REGEX } from '@documenso/lib/constants/url-regex';
+import {
+  ZDocumentAccessAuthTypesSchema,
+  ZDocumentActionAuthTypesSchema,
+} from '@documenso/lib/types/document-auth';
+
+export const ZMapNegativeOneToUndefinedSchema = z
+  .string()
+  .optional()
+  .transform((val) => {
+    if (val === '-1') {
+      return undefined;
+    }
+
+    return val;
+  });
+
+export const ZTemplateSettingsFormSchema = z.object({
+  title: z.string().trim().min(1, { message: "Title can't be empty" }),
+  globalAccessAuth: ZMapNegativeOneToUndefinedSchema.pipe(
+    ZDocumentAccessAuthTypesSchema.optional(),
+  ),
+  globalActionAuth: ZMapNegativeOneToUndefinedSchema.pipe(
+    ZDocumentActionAuthTypesSchema.optional(),
+  ),
+  meta: z.object({
+    timezone: z.string().optional().default(DEFAULT_DOCUMENT_TIME_ZONE),
+    dateFormat: z.string().optional().default(DEFAULT_DOCUMENT_DATE_FORMAT),
+    redirectUrl: z
+      .string()
+      .optional()
+      .refine((value) => value === undefined || value === '' || URL_REGEX.test(value), {
+        message: 'Please enter a valid URL',
+      }),
+  }),
+});
+
+export type TTemplateSettingsFormSchema = z.infer<typeof ZTemplateSettingsFormSchema>;