feat: add envelope editor

2025-11-16 09:41:35 +10:00 · 2025-10-12 23:35:54 +11:00
parent bf89bc781b
commit 0da8e7dbc6
307 changed files with 24657 additions and 3681 deletions
--- 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
@ -0,0 +1,174 @@
+import { lazy } from 'react';
+
+import { Plural, Trans } from '@lingui/react/macro';
+import { motion } from 'framer-motion';
+import { ArrowLeftIcon, BanIcon, DownloadCloudIcon } from 'lucide-react';
+import { Link } from 'react-router';
+
+import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
+import { Button } from '@documenso/ui/primitives/button';
+import { Separator } from '@documenso/ui/primitives/separator';
+
+import { SignFieldDropdownDialog } from '~/components/dialogs/sign-field-dropdown-dialog';
+import { SignFieldEmailDialog } from '~/components/dialogs/sign-field-email-dialog';
+import { SignFieldInitialsDialog } from '~/components/dialogs/sign-field-initials-dialog';
+import { SignFieldNameDialog } from '~/components/dialogs/sign-field-name-dialog';
+import { SignFieldNumberDialog } from '~/components/dialogs/sign-field-number-dialog';
+import { SignFieldSignatureDialog } from '~/components/dialogs/sign-field-signature-dialog';
+import { SignFieldTextDialog } from '~/components/dialogs/sign-field-text-dialog';
+
+import { EnvelopeItemSelector } from '../envelope-editor/envelope-file-selector';
+import EnvelopeSignerForm from '../envelope-signing/envelope-signer-form';
+import { EnvelopeSignerHeader } from '../envelope-signing/envelope-signer-header';
+import { useRequiredEnvelopeSigningContext } from './envelope-signing-provider';
+
+const EnvelopeSignerPageRenderer = lazy(
+  async () => import('../envelope-signing/envelope-signer-page-renderer'),
+);
+
+export const DocumentSigningPageViewV2 = () => {
+  const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
+
+  const { envelope, recipientFields, recipientFieldsRemaining, showPendingFieldTooltip } =
+    useRequiredEnvelopeSigningContext();
+
+  return (
+    <div className="h-screen w-screen bg-gray-50">
+      <SignFieldEmailDialog.Root />
+      <SignFieldTextDialog.Root />
+      <SignFieldNumberDialog.Root />
+      <SignFieldNameDialog.Root />
+      <SignFieldInitialsDialog.Root />
+      <SignFieldDropdownDialog.Root />
+      <SignFieldSignatureDialog.Root />
+
+      <EnvelopeSignerHeader />
+
+      {/* Main Content Area */}
+      <div className="flex h-[calc(100vh-73px)] w-screen">
+        {/* Left Section - Step Navigation */}
+        <div className="hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-gray-200 bg-white py-4 lg:flex">
+          <div className="px-4">
+            <h3 className="flex items-end justify-between text-sm font-semibold text-gray-900">
+              <Trans>Sign Document</Trans>
+
+              <span className="text-muted-foreground ml-2 rounded border bg-gray-50 px-2 py-0.5 text-xs">
+                <Trans>{recipientFieldsRemaining.length} fields remaining</Trans>
+              </span>
+            </h3>
+
+            <div className="bg-muted relative my-4 h-[4px] rounded-md">
+              <motion.div
+                layout="size"
+                layoutId="document-flow-container-step"
+                className="bg-documenso absolute inset-y-0 left-0"
+                style={{
+                  width: `${(100 / recipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
+                }}
+              />
+            </div>
+
+            <div className="mt-6 space-y-3">
+              <EnvelopeSignerForm />
+            </div>
+          </div>
+
+          <Separator className="my-6" />
+
+          {/* Quick Actions. */}
+          <div className="space-y-3 px-4">
+            <h4 className="text-sm font-semibold text-gray-900">
+              <Trans>Actions</Trans>
+            </h4>
+
+            {/* 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" />
+              <Trans>Download Original</Trans>
+            </Button>
+
+            {/* Todo: Envelopes */}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="hover:text-destructive w-full justify-start"
+            >
+              <BanIcon className="mr-2 h-4 w-4" />
+              <Trans>Reject Document</Trans>
+            </Button>
+          </div>
+
+          {/* Footer of left sidebar. */}
+          <div className="mt-auto px-4">
+            <Button asChild variant="ghost" className="w-full justify-start">
+              <Link to="/">
+                <ArrowLeftIcon className="mr-2 h-4 w-4" />
+                <Trans>Return</Trans>
+              </Link>
+            </Button>
+          </div>
+        </div>
+
+        {/* Main Content - Changes based on current step */}
+        <div className="flex-1 overflow-y-auto">
+          <div className="flex flex-col">
+            {/* Horizontal envelope item selector */}
+            <div className="flex h-fit space-x-2 overflow-x-auto p-4">
+              {envelopeItems.map((doc, i) => (
+                <EnvelopeItemSelector
+                  key={doc.id}
+                  number={i + 1}
+                  primaryText={doc.title}
+                  secondaryText={
+                    <Plural
+                      one="1 Field"
+                      other="# Fields"
+                      value={
+                        recipientFieldsRemaining.filter((field) => field.envelopeItemId === doc.id)
+                          .length
+                      }
+                    />
+                  }
+                  isSelected={currentEnvelopeItem?.id === doc.id}
+                  buttonProps={{ onClick: () => setCurrentEnvelopeItem(doc.id) }}
+                />
+              ))}
+            </div>
+
+            {/* Document View */}
+            <div className="mt-4 flex justify-center p-4">
+              {currentEnvelopeItem &&
+                showPendingFieldTooltip &&
+                recipientFieldsRemaining.length > 0 &&
+                recipientFieldsRemaining[0]?.envelopeItemId === currentEnvelopeItem?.id && (
+                  <FieldToolTip
+                    key={recipientFieldsRemaining[0].id}
+                    field={recipientFieldsRemaining[0]}
+                    color="warning"
+                  >
+                    <Trans>Click to insert field</Trans>
+                  </FieldToolTip>
+                )}
+
+              {currentEnvelopeItem ? (
+                <PDFViewerKonvaLazy
+                  key={currentEnvelopeItem.id}
+                  documentDataId={currentEnvelopeItem.documentDataId}
+                  customPageRenderer={EnvelopeSignerPageRenderer}
+                />
+              ) : (
+                <div className="flex flex-col items-center justify-center py-32">
+                  <p className="text-foreground text-sm">
+                    <Trans>No documents found</Trans>
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};