fix: build errors

The `typedSignatureEnabled` prop was removed from the `SignatureField`
component, which broke the typed signature meaning that nobody could
sign documents by typing their signature.

apps/documentation/pages/developers/embedding/css-variables.mdx

@@ -111,6 +111,83 @@ The colors will be automatically converted to the appropriate format internally.
 
 4. **Consistent Radius**: Use a consistent border radius value that matches your application's design system.
 
+## CSS Class Targets
+
+In addition to CSS variables, specific components in the embedded experience can be targeted using CSS classes for more granular styling:
+
+### Component Classes
+
+| Class Name                        | Description                                                             |
+| --------------------------------- | ----------------------------------------------------------------------- |
+| `.embed--Root`                    | Main container for the embedded signing experience                      |
+| `.embed--DocumentContainer`       | Container for the document and signing widget                           |
+| `.embed--DocumentViewer`          | Container for the document viewer                                       |
+| `.embed--DocumentWidget`          | The signing widget container                                            |
+| `.embed--DocumentWidgetContainer` | Outer container for the signing widget, handles positioning             |
+| `.embed--DocumentWidgetHeader`    | Header section of the signing widget                                    |
+| `.embed--DocumentWidgetContent`   | Main content area of the signing widget                                 |
+| `.embed--DocumentWidgetForm`      | Form section within the signing widget                                  |
+| `.embed--DocumentWidgetFooter`    | Footer section of the signing widget                                    |
+| `.embed--WaitingForTurn`          | Container for the waiting screen when it's not the user's turn to sign  |
+| `.embed--DocumentCompleted`       | Container for the completion screen after signing                       |
+| `.field--FieldRootContainer`      | Base container for document fields (signatures, text, checkboxes, etc.) |
+
+Field components also expose several data attributes that can be used for styling different states:
+
+| Data Attribute      | Values                                         | Description                          |
+| ------------------- | ---------------------------------------------- | ------------------------------------ |
+| `[data-field-type]` | `SIGNATURE`, `TEXT`, `CHECKBOX`, `RADIO`, etc. | The type of field                    |
+| `[data-inserted]`   | `true`, `false`                                | Whether the field has been filled    |
+| `[data-validate]`   | `true`, `false`                                | Whether the field is being validated |
+
+### Field Styling Example
+
+```css
+/* Style all field containers */
+.field--FieldRootContainer {
+  transition: all 200ms ease;
+}
+
+/* Style specific field types */
+.field--FieldRootContainer[data-field-type='SIGNATURE'] {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+/* Style inserted fields */
+.field--FieldRootContainer[data-inserted='true'] {
+  background-color: var(--primary);
+  opacity: 0.2;
+}
+
+/* Style fields being validated */
+.field--FieldRootContainer[data-validate='true'] {
+  border-color: orange;
+}
+```
+
+### Example Usage
+
+```css
+/* Custom styles for the document widget */
+.embed--DocumentWidget {
+  background-color: #ffffff;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+}
+
+/* Custom styles for the waiting screen */
+.embed--WaitingForTurn {
+  background-color: #f9fafb;
+  padding: 2rem;
+}
+
+/* Responsive adjustments for the document container */
+@media (min-width: 768px) {
+  .embed--DocumentContainer {
+    gap: 2rem;
+  }
+}
+```
+
 ## Related
 
 - [React Integration](/developers/embedding/react)

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/web",
-  "version": "1.9.0",
+  "version": "1.9.1-rc.1",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {

apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx

@@ -6,6 +6,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 
 import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
+import { useSession } from 'next-auth/react';
 
 import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
 import {
@@ -55,6 +56,7 @@ export const EditDocumentForm = ({
   const router = useRouter();
   const searchParams = useSearchParams();
   const team = useOptionalCurrentTeam();
+  const { data: session } = useSession();
 
   const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
 
@@ -134,6 +136,18 @@ export const EditDocumentForm = ({
     },
   });
 
+  const { mutateAsync: selfSignDocument } = trpc.document.selfSignDocument.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newData) => {
+      utils.document.getDocumentWithDetailsById.setData(
+        {
+          documentId: initialDocument.id,
+        },
+        (oldData) => ({ ...(oldData || initialDocument), ...newData }),
+      );
+    },
+  });
+
   const { mutateAsync: setPasswordForDocument } =
     trpc.document.setPasswordForDocument.useMutation();
 
@@ -269,10 +283,22 @@ export const EditDocumentForm = ({
         }
       }
 
-      // Router refresh is here to clear the router cache for when navigating to /documents.
-      router.refresh();
+      const hasSameOwnerAsRecipient =
+        recipients.length === 1 && recipients[0].email === session?.user?.email;
 
-      setStep('subject');
+      if (hasSameOwnerAsRecipient) {
+        await selfSignDocument({
+          documentId: document.id,
+          teamId: team?.id,
+        });
+
+        router.push(`/sign/${recipients[0].token}`);
+      } else {
+        // Router refresh is here to clear the router cache for when navigating to /documents.
+        router.refresh();
+
+        setStep('subject');
+      }
     } catch (err) {
       console.error(err);
 

apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx

@@ -189,6 +189,7 @@ export const SignDirectTemplateForm = ({
                   field={field}
                   onSignField={onSignField}
                   onUnsignField={onUnsignField}
+                  typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
                 />
               ))
               .with(FieldType.INITIALS, () => (
@@ -342,6 +343,7 @@ export const SignDirectTemplateForm = ({
                     onChange={(value) => {
                       setSignature(value);
                     }}
+                    allowTypedSignature={template.templateMeta?.typedSignatureEnabled}
                   />
                 </CardContent>
               </Card>

apps/web/src/app/(signing)/sign/[token]/number-field.tsx

@@ -179,14 +179,8 @@ export const NumberField = ({ field, onSignField, onUnsignField }: NumberFieldPr
 
   const onRemove = async () => {
     try {
-      if (isAssistantMode && !targetSigner) {
-        return;
-      }
-
-      const signingRecipient = isAssistantMode && targetSigner ? targetSigner : recipient;
-
       const payload: TRemovedSignedFieldWithTokenMutationSchema = {
-        token: signingRecipient.token,
+        token: recipient.token,
         fieldId: field.id,
       };
 

apps/web/src/app/(signing)/sign/[token]/radio-field.tsx

@@ -68,26 +68,16 @@ export const RadioField = ({ field, onSignField, onUnsignField }: RadioFieldProp
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
-      if (isAssistantMode && !targetSigner) {
-        return;
-      }
-
       if (!selectedOption) {
         return;
       }
 
-      const signingRecipient = isAssistantMode && targetSigner ? targetSigner : recipient;
-
       const payload: TSignFieldWithTokenMutationSchema = {
-        token: signingRecipient.token,
+        token: recipient.token,
         fieldId: field.id,
         value: selectedOption,
         isBase64: true,
         authOptions,
-        ...(isAssistantMode && {
-          isAssistantPrefill: true,
-          assistantId: recipient.id,
-        }),
       };
 
       if (onSignField) {

apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx

@@ -179,7 +179,13 @@ export const SigningPageView = ({
             )
             .map((field) =>
               match(field.type)
-                .with(FieldType.SIGNATURE, () => <SignatureField key={field.id} field={field} />)
+                .with(FieldType.SIGNATURE, () => (
+                  <SignatureField
+                    key={field.id}
+                    field={field}
+                    typedSignatureEnabled={documentMeta?.typedSignatureEnabled}
+                  />
+                ))
                 .with(FieldType.INITIALS, () => <InitialsField key={field.id} field={field} />)
                 .with(FieldType.NAME, () => <NameField key={field.id} field={field} />)
                 .with(FieldType.DATE, () => (

apps/web/src/app/embed/completed.tsx

@@ -12,7 +12,7 @@ export type EmbedDocumentCompletedPageProps = {
 export const EmbedDocumentCompleted = ({ name, signature }: EmbedDocumentCompletedPageProps) => {
   console.log({ signature });
   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--DocumentCompleted relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
       <h3 className="text-foreground text-2xl font-semibold">
         <Trans>Document Completed!</Trans>
       </h3>

apps/web/src/app/embed/sign/[[...url]]/client.tsx

@@ -226,12 +226,12 @@ export const EmbedSignDocumentClientPage = ({
 
   return (
     <RecipientProvider recipient={recipient} targetSigner={selectedSigner ?? null}>
-      <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="relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
+        <div className="embed--DocumentContainer relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
           {/* Viewer */}
-          <div className="flex-1">
+          <div className="embed--DocumentViewer flex-1">
             <LazyPDFViewer
               documentData={documentData}
               onDocumentLoad={() => setHasDocumentLoaded(true)}
@@ -241,12 +241,12 @@ export const EmbedSignDocumentClientPage = ({
           {/* Widget */}
           <div
             key={isExpanded ? 'expanded' : 'collapsed'}
-            className="group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
             data-expanded={isExpanded || undefined}
           >
-            <div className="border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
+            <div className="embed--DocumentWidget border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
               {/* Header */}
-              <div>
+              <div className="embed--DocumentWidgetHeader">
                 <div className="flex items-center justify-between gap-x-2">
                   <h3 className="text-foreground text-xl font-semibold md:text-2xl">
                     {isAssistantMode ? (
@@ -272,7 +272,7 @@ export const EmbedSignDocumentClientPage = ({
                 </div>
               </div>
 
-              <div className="hidden group-data-[expanded]/document-widget:block md:block">
+              <div className="embed--DocumentWidgetContent hidden group-data-[expanded]/document-widget:block md:block">
                 <p className="text-muted-foreground mt-2 text-sm">
                   {isAssistantMode ? (
                     <Trans>Help complete the document for other signers.</Trans>
@@ -285,7 +285,7 @@ export const EmbedSignDocumentClientPage = ({
               </div>
 
               {/* Form */}
-              <div className="-mx-2 hidden px-2 group-data-[expanded]/document-widget:block md:block">
+              <div className="embed--DocumentWidgetForm -mx-2 hidden px-2 group-data-[expanded]/document-widget:block md:block">
                 <div className="flex flex-1 flex-col gap-y-4">
                   {isAssistantMode && (
                     <div>
@@ -413,7 +413,7 @@ export const EmbedSignDocumentClientPage = ({
 
               <div className="hidden flex-1 group-data-[expanded]/document-widget:block md:block" />
 
-              <div className="mt-4 hidden w-full grid-cols-2 items-center group-data-[expanded]/document-widget:grid md:grid">
+              <div className="embed--DocumentWidgetFooter mt-4 hidden w-full grid-cols-2 items-center group-data-[expanded]/document-widget:grid md:grid">
                 {pendingFields.length > 0 ? (
                   <Button className="col-start-2" onClick={() => onNextFieldClick()}>
                     <Trans>Next</Trans>

apps/web/src/app/embed/waiting-for-turn.tsx

@@ -26,7 +26,7 @@ export const EmbedWaitingForTurn = () => {
   }
 
   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--WaitingForTurn relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
       <h3 className="text-foreground text-center text-2xl font-bold">
         <Trans>Waiting for Your Turn</Trans>
       </h3>

apps/web/src/components/document/document-history-sheet.tsx

@@ -336,6 +336,16 @@ export const DocumentHistorySheet = ({
                       ]}
                     />
                   ))
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.SELF_SIGN }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Signed by',
+                          value: data.recipientEmail,
+                        },
+                      ]}
+                    />
+                  ))
                   .with(
                     { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_VISIBILITY_UPDATED },
                     ({ data }) => (

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@documenso/root",
-  "version": "1.9.0",
+  "version": "1.9.1-rc.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@documenso/root",
-      "version": "1.9.0",
+      "version": "1.9.1-rc.1",
       "workspaces": [
         "apps/*",
         "packages/*"
@@ -106,7 +106,7 @@
     },
     "apps/web": {
       "name": "@documenso/web",
-      "version": "1.9.0",
+      "version": "1.9.1-rc.1",
       "license": "AGPL-3.0",
       "dependencies": {
         "@documenso/api": "*",
@@ -35722,6 +35722,21 @@
       "engines": {
         "node": ">=6"
       }
+    },
+    "packages/trpc/node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.6.tgz",
+      "integrity": "sha512-hNukAxq7hu4o5/UjPp5jqoBEtrpCbOmnUqZSKNJG8GrUVzfq0ucdhQFVrHcLRMvQcwqqDh1a5AJN9ORnNDpgBQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.9.0",
+  "version": "1.9.1-rc.1",
   "scripts": {
     "build": "turbo run build",
     "build:web": "turbo run build --filter=@documenso/web",

packages/app-tests/e2e/document-flow/stepper-component.spec.ts

@@ -2,7 +2,9 @@ import { expect, test } from '@playwright/test';
 import { DateTime } from 'luxon';
 import path from 'node:path';
 
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getRecipientByEmail } from '@documenso/lib/server-only/recipient/get-recipient-by-email';
+import { getRecipientById } from '@documenso/lib/server-only/recipient/get-recipient-by-id';
 import { prisma } from '@documenso/prisma';
 import {
   DocumentSigningOrder,
@@ -612,7 +614,7 @@ test('[DOCUMENT_FLOW]: should be able to create and sign a document with 3 recip
       expect(previousRecipient?.signingStatus).toBe(SigningStatus.SIGNED);
     }
 
-    await page.goto(`/sign/${recipient?.token}`);
+    await page.goto(`/sign/${recipient!.token}`);
     await expect(page.getByRole('heading', { name: 'Sign Document' })).toBeVisible();
 
     await page.locator(`#field-${recipientField.id}`).getByRole('button').click();
@@ -630,24 +632,22 @@ test('[DOCUMENT_FLOW]: should be able to create and sign a document with 3 recip
     await page.getByRole('button', { name: 'Complete' }).click();
     await page.getByRole('button', { name: 'Sign' }).click();
 
-    await page.waitForURL(`/sign/${recipient?.token}/complete`);
+    await page.waitForURL(`/sign/${recipient!.token}/complete`);
     await expect(page.getByText('Document Signed')).toBeVisible();
 
-    const updatedRecipient = await prisma.recipient.findFirst({
-      where: { id: recipient?.id },
+    const updatedRecipient = await getRecipientById({
+      documentId: document.id,
+      id: recipient!.id,
     });
 
     expect(updatedRecipient?.signingStatus).toBe(SigningStatus.SIGNED);
   }
 
   // Wait for the document to be signed.
-  await page.waitForTimeout(5000);
-
-  const finalDocument = await prisma.document.findFirst({
-    where: { id: createdDocument?.id },
-  });
-
-  expect(finalDocument?.status).toBe(DocumentStatus.COMPLETED);
+  await expect(async () => {
+    const signedDocument = await getDocumentById({ id: document.id, userId: user.id });
+    expect(signedDocument?.status).toBe(DocumentStatus.COMPLETED);
+  }).toPass();
 });
 
 test('[DOCUMENT_FLOW]: should prevent out-of-order signing in sequential mode', async ({
@@ -655,7 +655,7 @@ test('[DOCUMENT_FLOW]: should prevent out-of-order signing in sequential mode',
 }) => {
   const user = await seedUser();
 
-  const { document, recipients } = await seedPendingDocumentWithFullFields({
+  const { recipients } = await seedPendingDocumentWithFullFields({
     owner: user,
     recipients: ['user1@example.com', 'user2@example.com', 'user3@example.com'],
     fields: [FieldType.SIGNATURE],
@@ -682,3 +682,85 @@ test('[DOCUMENT_FLOW]: should prevent out-of-order signing in sequential mode',
   await expect(page).not.toHaveURL(`/sign/${activeRecipient?.token}/waiting`);
   await expect(page.getByRole('heading', { name: 'Sign Document' })).toBeVisible();
 });
+
+test('[DOCUMENT_FLOW]: should be able to self sign a document', async ({ page }) => {
+  const user = await seedUser();
+  const document = await seedBlankDocument(user);
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: `/documents/${document.id}/edit`,
+  });
+
+  const documentTitle = `Self-Signing-${Date.now()}.pdf`;
+
+  await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
+  await page.getByLabel('Title').fill(documentTitle);
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
+  await page.getByRole('button', { name: 'Add myself' }).click();
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'Signature' }).click();
+  await page.locator('canvas').click({
+    position: {
+      x: 100,
+      y: 100,
+    },
+  });
+
+  await page.getByRole('button', { name: 'Sign', exact: true }).click();
+
+  const documentRecipients = await prisma.recipient.findMany({
+    where: {
+      documentId: document.id,
+    },
+  });
+
+  const { token, email, id: recipientId } = documentRecipients[0];
+
+  expect(documentRecipients.length).toBe(1);
+  expect(email).toBe(user.email);
+
+  await page.waitForURL(`/sign/${token}`);
+  await expect(page.getByRole('heading', { name: documentTitle })).toBeVisible();
+
+  const { status } = await getDocumentByToken(token);
+  expect(status).toBe(DocumentStatus.PENDING);
+
+  const fields = await prisma.field.findMany({
+    where: { recipientId, documentId: document.id },
+  });
+  const recipientField = fields[0];
+  expect(recipientField).not.toBeNull();
+
+  await page.locator(`#field-${recipientField.id}`).getByRole('button').click();
+
+  const canvas = page.locator('canvas#signature');
+  const box = await canvas.boundingBox();
+  if (box) {
+    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(box.x + box.width / 4, box.y + box.height / 4);
+    await page.mouse.up();
+  }
+
+  await page.getByRole('button', { name: 'Sign', exact: true }).click();
+  await page.getByRole('button', { name: 'Complete' }).click();
+  await page.getByRole('button', { name: 'Sign' }).click();
+
+  await page.waitForURL(`/sign/${token}/complete`);
+  await expect(page.getByText('Document Signed')).toBeVisible();
+
+  const updatedRecipient = await getRecipientById({ documentId: document.id, id: recipientId });
+  expect(updatedRecipient?.signingStatus).toBe(SigningStatus.SIGNED);
+
+  await expect(async () => {
+    const signedDocument = await getDocumentById({ id: document.id, userId: user.id });
+    expect(signedDocument?.status).toBe(DocumentStatus.COMPLETED);
+  }).toPass();
+});

packages/lib/server-only/document/self-sign-document.ts

@@ -0,0 +1,177 @@
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { ApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
+import { prisma } from '@documenso/prisma';
+import { DocumentStatus, RecipientRole, SendStatus, SigningStatus } from '@documenso/prisma/client';
+
+import { jobs } from '../../jobs/client';
+import { getFile } from '../../universal/upload/get-file';
+import { insertFormValuesInPdf } from '../pdf/insert-form-values-in-pdf';
+
+export type SelfSignDocumentOptions = {
+  documentId: number;
+  userId: number;
+  teamId?: number;
+  requestMetadata?: ApiRequestMetadata;
+};
+
+export const selfSignDocument = async ({
+  documentId,
+  userId,
+  teamId,
+  requestMetadata,
+}: SelfSignDocumentOptions) => {
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+    },
+  });
+
+  const document = await prisma.document.findUnique({
+    where: {
+      id: documentId,
+      ...(teamId
+        ? {
+            team: {
+              id: teamId,
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          }
+        : {
+            userId,
+            teamId: null,
+          }),
+    },
+    include: {
+      recipients: {
+        orderBy: [{ signingOrder: { sort: 'asc', nulls: 'last' } }, { id: 'asc' }],
+      },
+      documentMeta: true,
+      documentData: true,
+    },
+  });
+
+  if (!document) {
+    throw new Error('Document not found');
+  }
+
+  if (document.recipients.length === 0) {
+    throw new Error('Document has no recipients');
+  }
+
+  if (document.recipients.length !== 1 || document.recipients[0].email !== user.email) {
+    throw new Error('Invalid document for self-signing');
+  }
+
+  if (document.status === DocumentStatus.COMPLETED) {
+    throw new Error('Can not sign completed document');
+  }
+
+  const { documentData } = document;
+
+  if (!documentData || !documentData.data) {
+    throw new Error('Document data not found');
+  }
+
+  if (document.formValues) {
+    const file = await getFile(documentData);
+
+    const prefilled = await insertFormValuesInPdf({
+      pdf: Buffer.from(file),
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      formValues: document.formValues as Record<string, string | number | boolean>,
+    });
+
+    const newDocumentData = await putPdfFile({
+      name: document.title,
+      type: 'application/pdf',
+      arrayBuffer: async () => Promise.resolve(prefilled),
+    });
+
+    const result = await prisma.document.update({
+      where: {
+        id: document.id,
+      },
+      data: {
+        documentDataId: newDocumentData.id,
+      },
+    });
+
+    Object.assign(document, result);
+  }
+
+  const recipientHasNoActionToTake =
+    document.recipients[0].role === RecipientRole.CC ||
+    document.recipients[0].signingStatus === SigningStatus.SIGNED;
+
+  if (recipientHasNoActionToTake) {
+    await jobs.triggerJob({
+      name: 'internal.seal-document',
+      payload: {
+        documentId,
+        requestMetadata: requestMetadata?.requestMetadata,
+      },
+    });
+
+    return await prisma.document.findFirstOrThrow({
+      where: {
+        id: documentId,
+      },
+      include: {
+        recipients: true,
+      },
+    });
+  }
+
+  const updatedDocument = await prisma.$transaction(async (tx) => {
+    if (document.status === DocumentStatus.DRAFT) {
+      await tx.documentAuditLog.create({
+        data: createDocumentAuditLogData({
+          type: DOCUMENT_AUDIT_LOG_TYPE.SELF_SIGN,
+          documentId: document.id,
+          requestMetadata: requestMetadata?.requestMetadata,
+          user,
+          data: {
+            recipientId: document.recipients[0].id,
+            recipientEmail: document.recipients[0].email,
+            recipientName: document.recipients[0].name,
+            recipientRole: document.recipients[0].role,
+          },
+        }),
+      });
+    }
+
+    await tx.recipient.update({
+      where: {
+        id: document.recipients[0].id,
+      },
+      data: {
+        sendStatus: SendStatus.SENT,
+      },
+    });
+
+    return await tx.document.update({
+      where: {
+        id: documentId,
+      },
+      data: {
+        status: DocumentStatus.PENDING,
+      },
+      include: {
+        recipients: true,
+      },
+    });
+  });
+
+  return updatedDocument;
+};

packages/lib/server-only/document/send-document.tsx

@@ -94,7 +94,7 @@ export const sendDocument = async ({
 
   const { documentData } = document;
 
-  if (!documentData.data) {
+  if (!documentData || !documentData.data) {
     throw new Error('Document data not found');
   }
 

packages/lib/types/document-audit-logs.ts

@@ -13,6 +13,7 @@ import { ZRecipientAccessAuthTypesSchema, ZRecipientActionAuthTypesSchema } from
 export const ZDocumentAuditLogTypeSchema = z.enum([
   // Document actions.
   'EMAIL_SENT',
+  'SELF_SIGN',
 
   // Document modification events.
   'FIELD_CREATED',
@@ -181,6 +182,14 @@ export const ZDocumentAuditLogEventEmailSentSchema = z.object({
   }),
 });
 
+/**
+ * Event: Self sign
+ */
+export const ZDocumentAuditLogSelfSignSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.SELF_SIGN),
+  data: ZBaseRecipientDataSchema,
+});
+
 /**
  * Event: Document completed.
  */
@@ -566,6 +575,7 @@ export const ZDocumentAuditLogBaseSchema = z.object({
 export const ZDocumentAuditLogSchema = ZDocumentAuditLogBaseSchema.and(
   z.union([
     ZDocumentAuditLogEventEmailSentSchema,
+    ZDocumentAuditLogSelfSignSchema,
     ZDocumentAuditLogEventDocumentCompletedSchema,
     ZDocumentAuditLogEventDocumentCreatedSchema,
     ZDocumentAuditLogEventDocumentDeletedSchema,

packages/lib/utils/document-audit-logs.ts

@@ -369,16 +369,6 @@ export const formatDocumentAuditLogAction = (
         identified: result,
       };
     })
-    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED }, ({ data }) => {
-      const userName = prefix || _(msg`Recipient`);
-
-      const result = msg`${userName} rejected the document`;
-
-      return {
-        anonymous: result,
-        identified: result,
-      };
-    })
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT }, ({ data }) => ({
       anonymous: data.isResending ? msg`Email resent` : msg`Email sent`,
       identified: data.isResending
@@ -389,6 +379,14 @@ export const formatDocumentAuditLogAction = (
       anonymous: msg`Document completed`,
       identified: msg`Document completed`,
     }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.SELF_SIGN }, () => ({
+      anonymous: msg`Self-signed document`,
+      identified: msg`${prefix} self-signed the document`,
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED }, ({ data }) => ({
+      anonymous: msg`Document rejected`,
+      identified: msg`${prefix} rejected the document: ${data.reason}`,
+    }))
     .exhaustive();
 
   return {

packages/trpc/server/document-router/router.ts

@@ -20,6 +20,7 @@ import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/
 import { moveDocumentToTeam } from '@documenso/lib/server-only/document/move-document-to-team';
 import { resendDocument } from '@documenso/lib/server-only/document/resend-document';
 import { searchDocumentsWithKeyword } from '@documenso/lib/server-only/document/search-documents-with-keyword';
+import { selfSignDocument } from '@documenso/lib/server-only/document/self-sign-document';
 import { sendDocument } from '@documenso/lib/server-only/document/send-document';
 import { updateDocument } from '@documenso/lib/server-only/document/update-document';
 import { symmetricEncrypt } from '@documenso/lib/universal/crypto';
@@ -50,6 +51,7 @@ import {
   ZMoveDocumentToTeamSchema,
   ZResendDocumentMutationSchema,
   ZSearchDocumentsMutationSchema,
+  ZSelfSignDocumentMutationSchema,
   ZSetPasswordForDocumentMutationSchema,
   ZSetSigningOrderForDocumentMutationSchema,
   ZSuccessResponseSchema,
@@ -467,6 +469,28 @@ export const documentRouter = router({
       });
     }),
 
+  selfSignDocument: authenticatedProcedure
+    .input(ZSelfSignDocumentMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { documentId, teamId } = input;
+
+        return await selfSignDocument({
+          userId: ctx.user.id,
+          documentId,
+          teamId,
+          requestMetadata: ctx.metadata,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to self sign this document. Please try again later.',
+        });
+      }
+    }),
+
   /**
    * @public
    *

packages/trpc/server/document-router/schema.ts

@@ -293,6 +293,11 @@ export const ZDistributeDocumentRequestSchema = z.object({
     .optional(),
 });
 
+export const ZSelfSignDocumentMutationSchema = z.object({
+  documentId: z.number(),
+  teamId: z.number().optional(),
+});
+
 export const ZDistributeDocumentResponseSchema = ZDocumentLiteSchema;
 
 export const ZSetPasswordForDocumentMutationSchema = z.object({

packages/ui/components/field/field.tsx

@@ -31,7 +31,8 @@ const getCardClassNames = (
   checkBoxOrRadio: boolean,
   cardClassName?: string,
 ) => {
-  const baseClasses = 'field-card-container relative z-20 h-full w-full transition-all';
+  const baseClasses =
+    'field--FieldRootContainer field-card-container relative z-20 h-full w-full transition-all';
 
   const insertedClasses =
     'bg-primary/20 border-primary ring-primary/20 ring-offset-primary/20 ring-2 ring-offset-2 dark:shadow-none';
@@ -141,6 +142,7 @@ export function FieldRootContainer({ field, children, cardClassName }: FieldCont
       <Card
         id={`field-${field.id}`}
         ref={ref}
+        data-field-type={field.type}
         data-inserted={field.inserted ? 'true' : 'false'}
         className={cardClassNames}
       >

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

@@ -21,6 +21,7 @@ import {
   Type,
   User,
 } from 'lucide-react';
+import { useSession } from 'next-auth/react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { prop, sortBy } from 'remeda';
@@ -120,6 +121,7 @@ export const AddFieldsFormPartial = ({
   teamId,
 }: AddFieldsFormProps) => {
   const { toast } = useToast();
+  const { data: session } = useSession();
   const { _ } = useLingui();
 
   const [isMissingSignatureDialogVisible, setIsMissingSignatureDialogVisible] = useState(false);
@@ -558,6 +560,10 @@ export const AddFieldsFormPartial = ({
       );
   }, [recipientsByRole]);
 
+  const hasSameOwnerAsRecipient =
+    recipientsByRole.SIGNER.length === 1 &&
+    recipientsByRole.SIGNER[0].email === session?.user?.email;
+
   const handleAdvancedSettings = () => {
     setShowAdvancedSettings((prev) => !prev);
   };
@@ -1132,6 +1138,7 @@ export const AddFieldsFormPartial = ({
                 documentFlow.onBackStep?.();
               }}
               goBackLabel={canRenderBackButtonAsRemove ? msg`Remove` : undefined}
+              goNextLabel={hasSameOwnerAsRecipient ? msg`Sign` : undefined}
               onGoNextClick={handleGoNextClick}
             />
           </DocumentFlowFormContainerFooter>