feat: add attachments (#2091)

2025-11-13 00:03:33 +10:00 · 2025-10-23 23:07:10 +11:00
parent 4a3859ec60
commit 2eebc0e439
51 changed files with 1284 additions and 15 deletions
--- a/apps/remix/app/components/embed/embed-direct-template-client-page.tsx
+++ b/apps/remix/app/components/embed/embed-direct-template-client-page.tsx
@ -37,6 +37,7 @@ import { ZDirectTemplateEmbedDataSchema } from '~/types/embed-direct-template-sc
 import { injectCss } from '~/utils/css-vars';

 import type { DirectTemplateLocalField } from '../general/direct-template/direct-template-signing-form';
+import { DocumentSigningAttachmentsPopover } from '../general/document-signing/document-signing-attachments-popover';
 import { useRequiredDocumentSigningContext } from '../general/document-signing/document-signing-provider';
 import { EmbedClientLoading } from './embed-client-loading';
 import { EmbedDocumentCompleted } from './embed-document-completed';
@ -44,6 +45,7 @@ import { EmbedDocumentFields } from './embed-document-fields';

 export type EmbedDirectTemplateClientPageProps = {
  token: string;
+  envelopeId: string;
  updatedAt: Date;
  documentData: DocumentData;
  recipient: Recipient;
@ -55,9 +57,10 @@ export type EmbedDirectTemplateClientPageProps = {

 export const EmbedDirectTemplateClientPage = ({
  token,
+  envelopeId,
  updatedAt,
  documentData,
-  recipient: _recipient,
+  recipient,
  fields,
  metadata,
  hidePoweredBy = false,
@ -321,9 +324,13 @@ export const EmbedDirectTemplateClientPage = ({
  }

  return (
-    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+    <div className="embed--Root relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
      {(!hasFinishedInit || !hasDocumentLoaded) && <EmbedClientLoading />}

+      <div className="embed--Actions mb-4 flex w-full flex-row-reverse items-baseline justify-between">
+        <DocumentSigningAttachmentsPopover envelopeId={envelopeId} token={recipient.token} />
+      </div>
+
      <div className="relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
        {/* Viewer */}
        <div className="flex-1">
--- a/apps/remix/app/components/embed/embed-document-signing-page.tsx
+++ b/apps/remix/app/components/embed/embed-document-signing-page.tsx
@ -37,6 +37,7 @@ import { BrandingLogo } from '~/components/general/branding-logo';
 import { injectCss } from '~/utils/css-vars';

 import { ZSignDocumentEmbedDataSchema } from '../../types/embed-document-sign-schema';
+import { DocumentSigningAttachmentsPopover } from '../general/document-signing/document-signing-attachments-popover';
 import { useRequiredDocumentSigningContext } from '../general/document-signing/document-signing-provider';
 import { DocumentSigningRecipientProvider } from '../general/document-signing/document-signing-recipient-provider';
 import { DocumentSigningRejectDialog } from '../general/document-signing/document-signing-reject-dialog';
@ -48,6 +49,7 @@ import { EmbedDocumentRejected } from './embed-document-rejected';
 export type EmbedSignDocumentClientPageProps = {
  token: string;
  documentId: number;
+  envelopeId: string;
  documentData: DocumentData;
  recipient: RecipientWithFields;
  fields: Field[];
@ -62,6 +64,7 @@ export type EmbedSignDocumentClientPageProps = {
 export const EmbedSignDocumentClientPage = ({
  token,
  documentId,
+  envelopeId,
  documentData,
  recipient,
  fields,
@ -274,15 +277,17 @@ export const EmbedSignDocumentClientPage = ({
      <div className="embed--Root relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
        {(!hasFinishedInit || !hasDocumentLoaded) && <EmbedClientLoading />}

-        {allowDocumentRejection && (
-          <div className="embed--Actions mb-4 flex w-full flex-row-reverse items-baseline justify-between">
+        <div className="embed--Actions mb-4 flex w-full flex-row-reverse items-baseline justify-between">
+          <DocumentSigningAttachmentsPopover envelopeId={envelopeId} token={token} />
+
+          {allowDocumentRejection && (
            <DocumentSigningRejectDialog
              documentId={documentId}
              token={token}
              onRejected={onDocumentRejected}
            />
-          </div>
-        )}
+          )}
+        </div>

        <div className="embed--DocumentContainer relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
          {/* Viewer */}
--- a/apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
@ -0,0 +1,79 @@
+import { Trans } from '@lingui/react/macro';
+import { ExternalLink, PaperclipIcon } from 'lucide-react';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+
+export type DocumentSigningAttachmentsPopoverProps = {
+  envelopeId: string;
+  token: string;
+};
+
+export const DocumentSigningAttachmentsPopover = ({
+  envelopeId,
+  token,
+}: DocumentSigningAttachmentsPopoverProps) => {
+  const { data: attachments } = trpc.envelope.attachment.find.useQuery({
+    envelopeId,
+    token,
+  });
+
+  if (!attachments || attachments.data.length === 0) {
+    return null;
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" className="gap-2">
+          <PaperclipIcon className="h-4 w-4" />
+          <span>
+            <Trans>Attachments</Trans>{' '}
+            {attachments && attachments.data.length > 0 && (
+              <span className="ml-1">({attachments.data.length})</span>
+            )}
+          </span>
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-96" align="start">
+        <div className="space-y-4">
+          <div>
+            <h4 className="font-medium">
+              <Trans>Attachments</Trans>
+            </h4>
+            <p className="text-muted-foreground mt-1 text-sm">
+              <Trans>Documents and resources related to this envelope.</Trans>
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            {attachments?.data.map((attachment) => (
+              <a
+                key={attachment.id}
+                href={attachment.data}
+                title={attachment.data}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="border-border hover:bg-muted/50 group flex items-center justify-between rounded-md border px-3 py-2.5 transition duration-200"
+              >
+                <div className="flex flex-1 items-center gap-2.5">
+                  <div className="bg-muted rounded p-2">
+                    <PaperclipIcon className="h-4 w-4" />
+                  </div>
+
+                  <span className="text-muted-foreground hover:text-foreground block truncate text-sm underline">
+                    {attachment.label}
+                  </span>
+                </div>
+
+                <ExternalLink className="h-4 w-4 opacity-0 transition duration-200 group-hover:opacity-100" />
+              </a>
+            ))}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
--- a/apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx
@ -32,6 +32,7 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';

+import { DocumentSigningAttachmentsPopover } from '~/components/general/document-signing/document-signing-attachments-popover';
 import { DocumentSigningAutoSign } from '~/components/general/document-signing/document-signing-auto-sign';
 import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
 import { DocumentSigningDateField } from '~/components/general/document-signing/document-signing-date-field';
@ -231,7 +232,13 @@ export const DocumentSigningPageViewV1 = ({
            </span>
          </div>

-          <DocumentSigningRejectDialog documentId={document.id} token={recipient.token} />
+          <div className="flex items-center gap-x-4">
+            <DocumentSigningAttachmentsPopover
+              envelopeId={document.envelopeId}
+              token={recipient.token}
+            />
+            <DocumentSigningRejectDialog documentId={document.id} token={recipient.token} />
+          </div>
        </div>

        <div className="relative mt-4 flex w-full flex-col gap-x-6 gap-y-8 sm:mt-8 md:flex-row lg:gap-x-8 lg:gap-y-0">
--- a/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
@ -19,6 +19,7 @@ import { SignFieldNumberDialog } from '~/components/dialogs/sign-field-number-di
 import { SignFieldSignatureDialog } from '~/components/dialogs/sign-field-signature-dialog';
 import { SignFieldTextDialog } from '~/components/dialogs/sign-field-text-dialog';

+import { DocumentSigningAttachmentsPopover } from '../document-signing/document-signing-attachments-popover';
 import { EnvelopeItemSelector } from '../envelope-editor/envelope-file-selector';
 import EnvelopeSignerForm from '../envelope-signing/envelope-signer-form';
 import { EnvelopeSignerHeader } from '../envelope-signing/envelope-signer-header';
@ -31,8 +32,13 @@ const EnvelopeSignerPageRenderer = lazy(
 export const DocumentSigningPageViewV2 = () => {
  const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();

-  const { envelope, recipientFields, recipientFieldsRemaining, showPendingFieldTooltip } =
-    useRequiredEnvelopeSigningContext();
+  const {
+    envelope,
+    recipient,
+    recipientFields,
+    recipientFieldsRemaining,
+    showPendingFieldTooltip,
+  } = useRequiredEnvelopeSigningContext();

  return (
    <div className="h-screen w-screen bg-gray-50">
@ -83,6 +89,10 @@ export const DocumentSigningPageViewV2 = () => {
              <Trans>Actions</Trans>
            </h4>

+            <div className="w-full">
+              <DocumentSigningAttachmentsPopover envelopeId={envelope.id} token={recipient.token} />
+            </div>
+
            {/* Todo: Allow selecting which document to download and/or the original */}
            <Button variant="ghost" size="sm" className="w-full justify-start">
              <DownloadCloudIcon className="mr-2 h-4 w-4" />
--- a/apps/remix/app/components/general/document/document-attachments-popover.tsx
+++ b/apps/remix/app/components/general/document/document-attachments-popover.tsx
@ -0,0 +1,241 @@
+import { useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Paperclip, Plus, X } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DocumentAttachmentsPopoverProps = {
+  envelopeId: string;
+};
+
+const ZAttachmentFormSchema = z.object({
+  label: z.string().min(1, 'Label is required'),
+  url: z.string().url('Must be a valid URL'),
+});
+
+type TAttachmentFormSchema = z.infer<typeof ZAttachmentFormSchema>;
+
+export const DocumentAttachmentsPopover = ({ envelopeId }: DocumentAttachmentsPopoverProps) => {
+  const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [isAdding, setIsAdding] = useState(false);
+
+  const utils = trpc.useUtils();
+
+  const { data: attachments } = trpc.envelope.attachment.find.useQuery({
+    envelopeId,
+  });
+
+  const { mutateAsync: createAttachment, isPending: isCreating } =
+    trpc.envelope.attachment.create.useMutation({
+      onSuccess: () => {
+        void utils.envelope.attachment.find.invalidate({ envelopeId });
+      },
+    });
+
+  const { mutateAsync: deleteAttachment } = trpc.envelope.attachment.delete.useMutation({
+    onSuccess: () => {
+      void utils.envelope.attachment.find.invalidate({ envelopeId });
+    },
+  });
+
+  const form = useForm<TAttachmentFormSchema>({
+    resolver: zodResolver(ZAttachmentFormSchema),
+    defaultValues: {
+      label: '',
+      url: '',
+    },
+  });
+
+  const onSubmit = async (data: TAttachmentFormSchema) => {
+    try {
+      await createAttachment({
+        envelopeId,
+        data: {
+          label: data.label,
+          data: data.url,
+        },
+      });
+
+      form.reset();
+
+      setIsAdding(false);
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Attachment added successfully.`),
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: error.message,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onDeleteAttachment = async (id: string) => {
+    try {
+      await deleteAttachment({ id });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Attachment removed successfully.`),
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: error.message,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" className="gap-2">
+          <Paperclip className="h-4 w-4" />
+
+          <span>
+            <Trans>Attachments</Trans>
+            {attachments && attachments.data.length > 0 && (
+              <span className="ml-1">({attachments.data.length})</span>
+            )}
+          </span>
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-96" align="end">
+        <div className="space-y-4">
+          <div>
+            <h4 className="font-medium">
+              <Trans>Attachments</Trans>
+            </h4>
+            <p className="text-muted-foreground mt-1 text-sm">
+              <Trans>Add links to relevant documents or resources.</Trans>
+            </p>
+          </div>
+
+          {attachments && attachments.data.length > 0 && (
+            <div className="space-y-2">
+              {attachments?.data.map((attachment) => (
+                <div
+                  key={attachment.id}
+                  className="border-border flex items-center justify-between rounded-md border p-2"
+                >
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium">{attachment.label}</p>
+                    <a
+                      href={attachment.data}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-muted-foreground hover:text-foreground truncate text-xs underline"
+                    >
+                      {attachment.data}
+                    </a>
+                  </div>
+
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => void onDeleteAttachment(attachment.id)}
+                    className="ml-2 h-8 w-8 p-0"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {!isAdding && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="w-full"
+              onClick={() => setIsAdding(true)}
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              <Trans>Add Attachment</Trans>
+            </Button>
+          )}
+
+          {isAdding && (
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+                <FormField
+                  control={form.control}
+                  name="label"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input placeholder={_(msg`Label`)} {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="url"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input type="url" placeholder={_(msg`URL`)} {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <div className="flex gap-2">
+                  <Button type="submit" size="sm" className="flex-1" loading={isCreating}>
+                    <Trans>Add</Trans>
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="flex-1"
+                    onClick={() => {
+                      setIsAdding(false);
+                      form.reset();
+                    }}
+                  >
+                    <Trans>Cancel</Trans>
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-header.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-header.tsx
@ -22,6 +22,7 @@ import { EnvelopeDistributeDialog } from '~/components/dialogs/envelope-distribu
 import { EnvelopeRedistributeDialog } from '~/components/dialogs/envelope-redistribute-dialog';
 import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
 import { BrandingLogo } from '~/components/general/branding-logo';
+import { DocumentAttachmentsPopover } from '~/components/general/document/document-attachments-popover';
 import { EnvelopeEditorSettingsDialog } from '~/components/general/envelope-editor/envelope-editor-settings-dialog';
 import { useCurrentTeam } from '~/providers/team';

@ -131,6 +132,8 @@ export default function EnvelopeEditorHeader() {
        </div>

        <div className="flex items-center space-x-2">
+          <DocumentAttachmentsPopover envelopeId={envelope.id} />
+
          <EnvelopeEditorSettingsDialog
            trigger={
              <Button variant="outline" size="sm">
--- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.legacy_editor.tsx
+++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.legacy_editor.tsx
@ -9,6 +9,7 @@ import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { logDocumentAccess } from '@documenso/lib/utils/logger';
 import { canAccessTeamDocument, formatDocumentsPath } from '@documenso/lib/utils/teams';

+import { DocumentAttachmentsPopover } from '~/components/general/document/document-attachments-popover';
 import { DocumentEditForm } from '~/components/general/document/document-edit-form';
 import { DocumentStatus } from '~/components/general/document/document-status';
 import { LegacyFieldWarningPopover } from '~/components/general/legacy-field-warning-popover';
@ -122,11 +123,13 @@ export default function DocumentEditPage() {
          </div>
        </div>

-        {document.useLegacyFieldInsertion && (
-          <div>
+        <div className="flex items-center gap-x-4">
+          <DocumentAttachmentsPopover envelopeId={document.envelopeId} />
+
+          {document.useLegacyFieldInsertion && (
            <LegacyFieldWarningPopover type="document" documentId={document.id} />
-          </div>
-        )}
+          )}
+        </div>
      </div>

      <DocumentEditForm
--- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id.legacy_editor.tsx
+++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id.legacy_editor.tsx
@ -8,6 +8,7 @@ import { getTemplateById } from '@documenso/lib/server-only/template/get-templat
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';

 import { TemplateDirectLinkDialog } from '~/components/dialogs/template-direct-link-dialog';
+import { DocumentAttachmentsPopover } from '~/components/general/document/document-attachments-popover';
 import { LegacyFieldWarningPopover } from '~/components/general/legacy-field-warning-popover';
 import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
 import { TemplateEditForm } from '~/components/general/template/template-edit-form';
@ -87,6 +88,8 @@ export default function TemplateEditPage() {
        </div>

        <div className="mt-2 flex items-center gap-2 sm:mt-0 sm:self-end">
+          <DocumentAttachmentsPopover envelopeId={template.envelopeId} />
+
          <TemplateDirectLinkDialog
            templateId={template.id}
            directLink={template.directLink}
--- a/apps/remix/app/routes/embed+/_v0+/direct.$url.tsx
+++ b/apps/remix/app/routes/embed+/_v0+/direct.$url.tsx
@ -122,6 +122,7 @@ export default function EmbedDirectTemplatePage() {
        <DocumentSigningRecipientProvider recipient={recipient}>
          <EmbedDirectTemplateClientPage
            token={token}
+            envelopeId={template.envelopeId}
            updatedAt={template.updatedAt}
            documentData={template.templateDocumentData}
            recipient={recipient}
--- a/apps/remix/app/routes/embed+/_v0+/sign.$url.tsx
+++ b/apps/remix/app/routes/embed+/_v0+/sign.$url.tsx
@ -164,6 +164,7 @@ export default function EmbedSignDocumentPage() {
        <EmbedSignDocumentClientPage
          token={token}
          documentId={document.id}
+          envelopeId={document.envelopeId}
          documentData={document.documentData}
          recipient={recipient}
          fields={fields}