feat: add document attachments feature

apps/remix/app/components/general/document-signing/document-signing-form.tsx

@@ -4,8 +4,9 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { type Field, FieldType, type Recipient, RecipientRole } from '@prisma/client';
+import { Link as LinkIcon } from 'lucide-react';
 import { Controller, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router';
+import { Link, useNavigate } from 'react-router';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
@@ -17,6 +18,12 @@ import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with
 import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { cn } from '@documenso/ui/lib/utils';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@documenso/ui/primitives/accordion';
 import { Button } from '@documenso/ui/primitives/button';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
@@ -370,6 +377,35 @@ export const DocumentSigningForm = ({
                       />
                     </div>
 
+                    {document.attachments && (
+                      <Accordion type="multiple" className="mt-2">
+                        <AccordionItem value="attachments" 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">
+                            <Trans>Attachments</Trans>
+                          </AccordionTrigger>
+
+                          <AccordionContent className="-mx-1 px-1 pt-2 text-sm leading-relaxed">
+                            <div className="flex flex-col space-y-2">
+                              {document.attachments.map((attachment, index) => (
+                                <div key={index}>
+                                  <Button variant="outline" asChild>
+                                    <Link
+                                      to={attachment.url}
+                                      target="_blank"
+                                      rel="noopener noreferrer"
+                                    >
+                                      <LinkIcon className="mr-2 h-4 w-4" />
+                                      {attachment.label}
+                                    </Link>
+                                  </Button>
+                                </div>
+                              ))}
+                            </div>
+                          </AccordionContent>
+                        </AccordionItem>
+                      </Accordion>
+                    )}
+
                     {hasSignatureField && (
                       <div>
                         <Label htmlFor="Signature">

packages/lib/server-only/document/get-document-by-token.ts

@@ -81,6 +81,7 @@ export const getDocumentAndSenderByToken = async ({
           token,
         },
       },
+      attachments: true,
       team: {
         select: {
           name: true,

packages/prisma/migrations/20250424072556_add_attachments/migration.sql

@@ -0,0 +1,22 @@
+-- CreateEnum
+CREATE TYPE "AttachmentType" AS ENUM ('FILE', 'VIDEO', 'AUDIO', 'IMAGE', 'LINK', 'OTHER');
+
+-- CreateTable
+CREATE TABLE "Attachment" (
+    "id" TEXT NOT NULL,
+    "type" "AttachmentType" NOT NULL,
+    "label" TEXT NOT NULL,
+    "url" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "documentId" INTEGER,
+    "templateId" INTEGER,
+
+    CONSTRAINT "Attachment_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "Attachment" ADD CONSTRAINT "Attachment_documentId_fkey" FOREIGN KEY ("documentId") REFERENCES "Document"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Attachment" ADD CONSTRAINT "Attachment_templateId_fkey" FOREIGN KEY ("templateId") REFERENCES "Template"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/schema.prisma

@@ -312,6 +312,30 @@ enum DocumentVisibility {
   ADMIN
 }
 
+enum AttachmentType {
+  FILE
+  VIDEO
+  AUDIO
+  IMAGE
+  LINK
+  OTHER
+}
+
+model Attachment {
+  id        String         @id @default(uuid())
+  type      AttachmentType
+  label     String
+  url       String
+  createdAt DateTime       @default(now())
+  updatedAt DateTime       @default(now()) @updatedAt
+
+  documentId Int?
+  document   Document? @relation(fields: [documentId], references: [id], onDelete: Cascade)
+
+  templateId Int?
+  template   Template? @relation(fields: [templateId], references: [id], onDelete: Cascade)
+}
+
 /// @zod.import(["import { ZDocumentAuthOptionsSchema } from '@documenso/lib/types/document-auth';", "import { ZDocumentFormValuesSchema } from '@documenso/lib/types/document-form-values';"])
 model Document {
   id             Int                 @id @default(autoincrement())
@@ -339,7 +363,8 @@ model Document {
   template       Template?           @relation(fields: [templateId], references: [id], onDelete: SetNull)
   source         DocumentSource
 
-  auditLogs DocumentAuditLog[]
+  auditLogs   DocumentAuditLog[]
+  attachments Attachment[]
 
   @@unique([documentDataId])
   @@index([userId])
@@ -713,6 +738,7 @@ model Template {
   fields               Field[]
   directLink           TemplateDirectLink?
   documents            Document[]
+  attachments          Attachment[]
 
   @@unique([templateDocumentDataId])
 }

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

@@ -5,8 +5,8 @@ import { Trans } from '@lingui/react/macro';
 import { useLingui } from '@lingui/react/macro';
 import { DocumentVisibility, TeamMemberRole } from '@prisma/client';
 import { DocumentStatus, type Field, type Recipient, SendStatus } from '@prisma/client';
-import { InfoIcon } from 'lucide-react';
+import { InfoIcon, Plus, Trash } from 'lucide-react';
-import { useForm } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 
 import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
@@ -14,6 +14,7 @@ import { DOCUMENT_SIGNATURE_TYPES } from '@documenso/lib/constants/document';
 import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import type { TDocument } from '@documenso/lib/types/document';
+import { nanoid } from '@documenso/lib/universal/id';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
 import {
@@ -34,6 +35,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '@documenso/ui/primitives/accordion';
+import { Button } from '@documenso/ui/primitives/button';
 import {
   Form,
   FormControl,
@@ -112,12 +114,29 @@ export const AddSettingsFormPartial = ({
     },
   });
 
+  const {
+    fields: attachments,
+    append: appendAttachment,
+    remove: removeAttachment,
+  } = useFieldArray({
+    control: form.control,
+    name: 'attachments',
+  });
+
   const { stepIndex, currentStep, totalSteps, previousStep } = useStep();
 
   const documentHasBeenSent = recipients.some(
     (recipient) => recipient.sendStatus === SendStatus.SENT,
   );
 
+  const onAddAttachment = () => {
+    appendAttachment({
+      formId: nanoid(12),
+      label: '',
+      link: '',
+    });
+  };
+
   const canUpdateVisibility = match(currentTeamMemberRole)
     .with(TeamMemberRole.ADMIN, () => true)
     .with(
@@ -443,6 +462,81 @@ export const AddSettingsFormPartial = ({
                 </AccordionContent>
               </AccordionItem>
             </Accordion>
+
+            <Accordion type="multiple" className="mt-6">
+              <AccordionItem value="attachments" 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">
+                  <Trans>Attachments</Trans>
+                </AccordionTrigger>
+
+                <AccordionContent className="text-muted-foreground -mx-1 px-1 pt-2 text-sm leading-relaxed">
+                  <div className="flex flex-col space-y-6">
+                    {attachments.map((attachment, index) => (
+                      <div key={index} className="flex items-start gap-x-3">
+                        <div className="flex-1">
+                          <FormField
+                            control={form.control}
+                            name={`attachments.${index}.label`}
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel className="flex flex-row items-center">
+                                  <Trans>Label</Trans>
+                                </FormLabel>
+
+                                <FormControl>
+                                  <Input className="bg-background" {...field} />
+                                </FormControl>
+
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        </div>
+
+                        <div className="flex-1">
+                          <FormField
+                            control={form.control}
+                            name={`attachments.${index}.link`}
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel className="flex flex-row items-center">
+                                  <Trans>Location link</Trans>
+                                </FormLabel>
+
+                                <FormControl>
+                                  <Input className="bg-background" {...field} />
+                                </FormControl>
+
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        </div>
+
+                        <div className="flex-none pt-8">
+                          <button
+                            onClick={() => removeAttachment(index)}
+                            className="hover:bg-muted rounded-md"
+                          >
+                            <Trash className="h-4 w-4" />
+                          </button>
+                        </div>
+                      </div>
+                    ))}
+
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className="w-full"
+                      onClick={onAddAttachment}
+                    >
+                      <Plus className="mr-2 h-4 w-4" />
+                      <Trans>Add Attachment</Trans>
+                    </Button>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
           </fieldset>
         </Form>
       </DocumentFlowFormContainerContent>

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

@@ -58,6 +58,13 @@ export const ZAddSettingsFormSchema = z.object({
       message: msg`At least one signature type must be enabled`.id,
     }),
   }),
+  attachments: z.array(
+    z.object({
+      formId: z.string().min(1),
+      label: z.string(),
+      link: z.string(),
+    }),
+  ),
 });
 
 export type TAddSettingsFormSchema = z.infer<typeof ZAddSettingsFormSchema>;