Merge branch 'main' into feat/delete-archive

2025-11-16 01:32:06 +10:00 · 2024-11-27 10:57:13 +11:00
parent 0cd7c25718 e6d4005cd1
commit cac262fcea
82 changed files with 2450 additions and 1820 deletions
--- a/packages/api/v1/implementation.ts
+++ b/packages/api/v1/implementation.ts
@ -302,6 +302,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
        redirectUrl: body.meta.redirectUrl,
        signingOrder: body.meta.signingOrder,
        language: body.meta.language,
+        typedSignatureEnabled: body.meta.typedSignatureEnabled,
        requestMetadata: extractNextApiRequestMetadata(args.req),
      });

--- a/packages/api/v1/schema.ts
+++ b/packages/api/v1/schema.ts
@ -3,7 +3,6 @@ import { z } from 'zod';

 import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { SUPPORTED_LANGUAGE_CODES } from '@documenso/lib/constants/i18n';
-import '@documenso/lib/constants/time-zones';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { ZUrlSchema } from '@documenso/lib/schemas/common';
 import {
@ -14,6 +13,7 @@ import {
 import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import {
  DocumentDataType,
+  DocumentDistributionMethod,
  DocumentSigningOrder,
  FieldType,
  ReadStatus,
@ -132,6 +132,7 @@ export const ZCreateDocumentMutationSchema = z.object({
      redirectUrl: z.string(),
      signingOrder: z.nativeEnum(DocumentSigningOrder).optional(),
      language: z.enum(SUPPORTED_LANGUAGE_CODES).optional(),
+      typedSignatureEnabled: z.boolean().optional().default(true),
    })
    .partial(),
  authOptions: z
@ -226,14 +227,14 @@ export type TCreateDocumentFromTemplateMutationResponseSchema = z.infer<

 export const ZGenerateDocumentFromTemplateMutationSchema = z.object({
  title: z.string().optional(),
-  externalId: z.string().nullish(),
+  externalId: z.string().optional(),
  recipients: z
    .array(
      z.object({
        id: z.number(),
+        email: z.string().email(),
        name: z.string().optional(),
-        email: z.string().email().min(1),
-        signingOrder: z.number().nullish(),
+        signingOrder: z.number().optional(),
      }),
    )
    .refine(
@ -252,8 +253,10 @@ export const ZGenerateDocumentFromTemplateMutationSchema = z.object({
      timezone: z.string(),
      dateFormat: z.string(),
      redirectUrl: ZUrlSchema,
-      signingOrder: z.nativeEnum(DocumentSigningOrder).optional(),
-      language: z.enum(SUPPORTED_LANGUAGE_CODES).optional(),
+      signingOrder: z.nativeEnum(DocumentSigningOrder),
+      language: z.enum(SUPPORTED_LANGUAGE_CODES),
+      distributionMethod: z.nativeEnum(DocumentDistributionMethod),
+      typedSignatureEnabled: z.boolean(),
    })
    .partial()
    .optional(),
--- a/packages/app-tests/e2e/features/include-document-certificate.spec.ts
+++ b/packages/app-tests/e2e/features/include-document-certificate.spec.ts
@ -0,0 +1,271 @@
+import { expect, test } from '@playwright/test';
+import { PDFDocument } from 'pdf-lib';
+
+import { getDocumentByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { prisma } from '@documenso/prisma';
+import { DocumentStatus, FieldType } from '@documenso/prisma/client';
+import { seedPendingDocumentWithFullFields } from '@documenso/prisma/seed/documents';
+import { seedTeam } from '@documenso/prisma/seed/teams';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { apiSignin } from '../fixtures/authentication';
+
+test.describe('Signing Certificate Tests', () => {
+  test('individual document should always include signing certificate', async ({ page }) => {
+    const user = await seedUser();
+
+    const { document, recipients } = await seedPendingDocumentWithFullFields({
+      owner: user,
+      recipients: ['signer@example.com'],
+      fields: [FieldType.SIGNATURE],
+    });
+
+    const documentData = await prisma.documentData
+      .findFirstOrThrow({
+        where: {
+          id: document.documentDataId,
+        },
+      })
+      .then(async (data) => getFile(data));
+
+    const originalPdf = await PDFDocument.load(documentData);
+
+    const recipient = recipients[0];
+
+    // Sign the document
+    await page.goto(`/sign/${recipient.token}`);
+
+    const canvas = page.locator('canvas');
+    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();
+    }
+
+    for (const field of recipient.Field) {
+      await page.locator(`#field-${field.id}`).getByRole('button').click();
+
+      await expect(page.locator(`#field-${field.id}`)).toHaveAttribute('data-inserted', 'true');
+    }
+
+    await page.getByRole('button', { name: 'Complete' }).click();
+    await page.getByRole('button', { name: 'Sign' }).click();
+    await page.waitForURL(`/sign/${recipient.token}/complete`);
+
+    await expect(async () => {
+      const { status } = await getDocumentByToken({
+        token: recipient.token,
+      });
+
+      expect(status).toBe(DocumentStatus.COMPLETED);
+    }).toPass();
+
+    // Get the completed document
+    const completedDocument = await prisma.document.findFirstOrThrow({
+      where: { id: document.id },
+      include: { documentData: true },
+    });
+
+    const completedDocumentData = await getFile(completedDocument.documentData);
+
+    // Load the PDF and check number of pages
+    const pdfDoc = await PDFDocument.load(completedDocumentData);
+
+    expect(pdfDoc.getPageCount()).toBe(originalPdf.getPageCount() + 1); // Original + Certificate
+  });
+
+  test('team document with signing certificate enabled should include certificate', async ({
+    page,
+  }) => {
+    const team = await seedTeam();
+
+    const { document, recipients } = await seedPendingDocumentWithFullFields({
+      owner: team.owner,
+      recipients: ['signer@example.com'],
+      fields: [FieldType.SIGNATURE],
+      updateDocumentOptions: {
+        teamId: team.id,
+      },
+    });
+
+    await prisma.teamGlobalSettings.create({
+      data: {
+        teamId: team.id,
+        includeSigningCertificate: true,
+      },
+    });
+
+    const documentData = await prisma.documentData
+      .findFirstOrThrow({
+        where: {
+          id: document.documentDataId,
+        },
+      })
+      .then(async (data) => getFile(data));
+
+    const originalPdf = await PDFDocument.load(documentData);
+
+    const recipient = recipients[0];
+
+    // Sign the document
+    await page.goto(`/sign/${recipient.token}`);
+
+    const canvas = page.locator('canvas');
+    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();
+    }
+
+    for (const field of recipient.Field) {
+      await page.locator(`#field-${field.id}`).getByRole('button').click();
+
+      await expect(page.locator(`#field-${field.id}`)).toHaveAttribute('data-inserted', 'true');
+    }
+
+    await page.getByRole('button', { name: 'Complete' }).click();
+    await page.getByRole('button', { name: 'Sign' }).click();
+    await page.waitForURL(`/sign/${recipient.token}/complete`);
+
+    await expect(async () => {
+      const { status } = await getDocumentByToken({
+        token: recipient.token,
+      });
+
+      expect(status).toBe(DocumentStatus.COMPLETED);
+    }).toPass();
+
+    // Get the completed document
+    const completedDocument = await prisma.document.findFirstOrThrow({
+      where: { id: document.id },
+      include: { documentData: true },
+    });
+
+    const completedDocumentData = await getFile(completedDocument.documentData);
+
+    // Load the PDF and check number of pages
+    const completedPdf = await PDFDocument.load(completedDocumentData);
+
+    expect(completedPdf.getPageCount()).toBe(originalPdf.getPageCount() + 1); // Original + Certificate
+  });
+
+  test('team document with signing certificate disabled should not include certificate', async ({
+    page,
+  }) => {
+    const team = await seedTeam();
+
+    const { document, recipients } = await seedPendingDocumentWithFullFields({
+      owner: team.owner,
+      recipients: ['signer@example.com'],
+      fields: [FieldType.SIGNATURE],
+      updateDocumentOptions: {
+        teamId: team.id,
+      },
+    });
+
+    await prisma.teamGlobalSettings.create({
+      data: {
+        teamId: team.id,
+        includeSigningCertificate: false,
+      },
+    });
+
+    const documentData = await prisma.documentData
+      .findFirstOrThrow({
+        where: {
+          id: document.documentDataId,
+        },
+      })
+      .then(async (data) => getFile(data));
+
+    const originalPdf = await PDFDocument.load(documentData);
+
+    const recipient = recipients[0];
+
+    // Sign the document
+    await page.goto(`/sign/${recipient.token}`);
+
+    const canvas = page.locator('canvas');
+    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();
+    }
+
+    for (const field of recipient.Field) {
+      await page.locator(`#field-${field.id}`).getByRole('button').click();
+
+      await expect(page.locator(`#field-${field.id}`)).toHaveAttribute('data-inserted', 'true');
+    }
+
+    await page.getByRole('button', { name: 'Complete' }).click();
+    await page.getByRole('button', { name: 'Sign' }).click();
+    await page.waitForURL(`/sign/${recipient.token}/complete`);
+
+    await expect(async () => {
+      const { status } = await getDocumentByToken({
+        token: recipient.token,
+      });
+
+      expect(status).toBe(DocumentStatus.COMPLETED);
+    }).toPass();
+
+    // Get the completed document
+    const completedDocument = await prisma.document.findFirstOrThrow({
+      where: { id: document.id },
+      include: { documentData: true },
+    });
+
+    const completedDocumentData = await getFile(completedDocument.documentData);
+
+    // Load the PDF and check number of pages
+    const completedPdf = await PDFDocument.load(completedDocumentData);
+
+    expect(completedPdf.getPageCount()).toBe(originalPdf.getPageCount());
+  });
+
+  test('team can toggle signing certificate setting', async ({ page }) => {
+    const team = await seedTeam();
+
+    await apiSignin({
+      page,
+      email: team.owner.email,
+      redirectPath: `/t/${team.url}/settings/preferences`,
+    });
+
+    // Toggle signing certificate setting
+    await page.getByLabel('Include the Signing Certificate in the Document').click();
+    await page.getByRole('button', { name: /Save/ }).first().click();
+
+    await page.waitForTimeout(1000);
+
+    // Verify the setting was saved
+    const updatedTeam = await prisma.team.findFirstOrThrow({
+      where: { id: team.id },
+      include: { teamGlobalSettings: true },
+    });
+
+    expect(updatedTeam.teamGlobalSettings?.includeSigningCertificate).toBe(false);
+
+    // Toggle the setting back to true
+    await page.getByLabel('Include the Signing Certificate in the Document').click();
+    await page.getByRole('button', { name: /Save/ }).first().click();
+
+    await page.waitForTimeout(1000);
+
+    // Verify the setting was saved
+    const updatedTeam2 = await prisma.team.findFirstOrThrow({
+      where: { id: team.id },
+      include: { teamGlobalSettings: true },
+    });
+
+    expect(updatedTeam2.teamGlobalSettings?.includeSigningCertificate).toBe(true);
+  });
+});
--- a/packages/app-tests/e2e/teams/team-global-settings.spec.ts
+++ b/packages/app-tests/e2e/teams/team-global-settings.spec.ts
@ -17,19 +17,17 @@ test('[TEAMS]: update the default document visibility in the team global setting
    page,
    email: team.owner.email,
    password: 'password',
-    redirectPath: `/t/${team.url}/settings`,
+    redirectPath: `/t/${team.url}/settings/preferences`,
  });

-  await page.getByRole('combobox').click();
+  // !: Brittle selector
+  await page.getByRole('combobox').first().click();
  await page.getByRole('option', { name: 'Admin' }).click();
-  await page.getByRole('button', { name: 'Update team' }).click();
+  await page.getByRole('button', { name: 'Save' }).first().click();

  const toast = page.locator('li[role="status"][data-state="open"]').first();
  await expect(toast).toBeVisible();
-  await expect(toast.getByText('Success', { exact: true })).toBeVisible();
-  await expect(
-    toast.getByText('Your team has been successfully updated.', { exact: true }),
-  ).toBeVisible();
+  await expect(toast.getByText('Document preferences updated', { exact: true })).toBeVisible();
 });

 test('[TEAMS]: update the sender details in the team global settings', async ({ page }) => {
@ -41,7 +39,7 @@ test('[TEAMS]: update the sender details in the team global settings', async ({
    page,
    email: team.owner.email,
    password: 'password',
-    redirectPath: `/t/${team.url}/settings`,
+    redirectPath: `/t/${team.url}/settings/preferences`,
  });

  const checkbox = page.getByLabel('Send on Behalf of Team');
@ -49,14 +47,11 @@ test('[TEAMS]: update the sender details in the team global settings', async ({

  await expect(checkbox).toBeChecked();

-  await page.getByRole('button', { name: 'Update team' }).click();
+  await page.getByRole('button', { name: 'Save' }).first().click();

  const toast = page.locator('li[role="status"][data-state="open"]').first();
  await expect(toast).toBeVisible();
-  await expect(toast.getByText('Success', { exact: true })).toBeVisible();
-  await expect(
-    toast.getByText('Your team has been successfully updated.', { exact: true }),
-  ).toBeVisible();
+  await expect(toast.getByText('Document preferences updated', { exact: true })).toBeVisible();

  await expect(checkbox).toBeChecked();
 });
--- a/packages/app-tests/package.json
+++ b/packages/app-tests/package.json
@ -7,15 +7,17 @@
  "scripts": {
    "test:dev": "NODE_OPTIONS=--experimental-require-module playwright test",
    "test-ui:dev": "NODE_OPTIONS=--experimental-require-module playwright test --ui",
-    "test:e2e": "NODE_OPTIONS=--experimental-require-module start-server-and-test \"npm run start -w @documenso/web\" http://localhost:3000 \"playwright test\""
+    "test:e2e": "NODE_OPTIONS=--experimental-require-module start-server-and-test \"npm run start -w @documenso/web\" http://localhost:3000 \"playwright test $E2E_TEST_PATH\""
  },
  "keywords": [],
  "author": "",
  "devDependencies": {
    "@playwright/test": "^1.18.1",
    "@types/node": "^20.8.2",
+    "@documenso/lib": "*",
    "@documenso/prisma": "*",
-    "@documenso/web": "*"
+    "@documenso/web": "*",
+    "pdf-lib": "^1.17.1"
  },
  "dependencies": {
    "start-server-and-test": "^2.0.1"
--- a/packages/ee/server-only/stripe/get-document-related-prices.ts.ts
+++ b/packages/ee/server-only/stripe/get-document-related-prices.ts.ts
@ -9,6 +9,7 @@ export const getDocumentRelatedPrices = async () => {
  return await getPricesByPlan([
    STRIPE_PLAN_TYPE.REGULAR,
    STRIPE_PLAN_TYPE.COMMUNITY,
+    STRIPE_PLAN_TYPE.PLATFORM,
    STRIPE_PLAN_TYPE.ENTERPRISE,
  ]);
 };
--- a/packages/ee/server-only/stripe/get-platform-plan-prices.ts
+++ b/packages/ee/server-only/stripe/get-platform-plan-prices.ts
@ -0,0 +1,13 @@
+import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
+
+import { getPricesByPlan } from './get-prices-by-plan';
+
+export const getPlatformPlanPrices = async () => {
+  return await getPricesByPlan(STRIPE_PLAN_TYPE.PLATFORM);
+};
+
+export const getPlatformPlanPriceIds = async () => {
+  const prices = await getPlatformPlanPrices();
+
+  return prices.map((price) => price.id);
+};
--- a/packages/ee/server-only/stripe/get-primary-account-plan-prices.ts
+++ b/packages/ee/server-only/stripe/get-primary-account-plan-prices.ts
@ -9,6 +9,7 @@ export const getPrimaryAccountPlanPrices = async () => {
  return await getPricesByPlan([
    STRIPE_PLAN_TYPE.REGULAR,
    STRIPE_PLAN_TYPE.COMMUNITY,
+    STRIPE_PLAN_TYPE.PLATFORM,
    STRIPE_PLAN_TYPE.ENTERPRISE,
  ]);
 };
--- a/packages/ee/server-only/stripe/get-team-related-prices.ts
+++ b/packages/ee/server-only/stripe/get-team-related-prices.ts
@ -6,7 +6,11 @@ import { getPricesByPlan } from './get-prices-by-plan';
 * Returns the Stripe prices of items that affect the amount of teams a user can create.
 */
 export const getTeamRelatedPrices = async () => {
-  return await getPricesByPlan([STRIPE_PLAN_TYPE.COMMUNITY, STRIPE_PLAN_TYPE.ENTERPRISE]);
+  return await getPricesByPlan([
+    STRIPE_PLAN_TYPE.COMMUNITY,
+    STRIPE_PLAN_TYPE.PLATFORM,
+    STRIPE_PLAN_TYPE.ENTERPRISE,
+  ]);
 };

 /**
--- a/packages/ee/server-only/util/is-document-platform.ts
+++ b/packages/ee/server-only/util/is-document-platform.ts
@ -0,0 +1,61 @@
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { subscriptionsContainsActivePlan } from '@documenso/lib/utils/billing';
+import { prisma } from '@documenso/prisma';
+import type { Document, Subscription } from '@documenso/prisma/client';
+
+import { getPlatformPlanPriceIds } from '../stripe/get-platform-plan-prices';
+
+export type IsDocumentPlatformOptions = Pick<Document, 'id' | 'userId' | 'teamId'>;
+
+/**
+ * Whether the user is platform, or has permission to use platform features on
+ * behalf of their team.
+ *
+ * It is assumed that the provided user is part of the provided team.
+ */
+export const isDocumentPlatform = async ({
+  userId,
+  teamId,
+}: IsDocumentPlatformOptions): Promise<boolean> => {
+  let subscriptions: Subscription[] = [];
+
+  if (!IS_BILLING_ENABLED()) {
+    return true;
+  }
+
+  if (teamId) {
+    subscriptions = await prisma.team
+      .findFirstOrThrow({
+        where: {
+          id: teamId,
+        },
+        select: {
+          owner: {
+            include: {
+              Subscription: true,
+            },
+          },
+        },
+      })
+      .then((team) => team.owner.Subscription);
+  } else {
+    subscriptions = await prisma.user
+      .findFirstOrThrow({
+        where: {
+          id: userId,
+        },
+        select: {
+          Subscription: true,
+        },
+      })
+      .then((user) => user.Subscription);
+  }
+
+  if (subscriptions.length === 0) {
+    return false;
+  }
+
+  const platformPlanPriceIds = await getPlatformPlanPriceIds();
+
+  return subscriptionsContainsActivePlan(subscriptions, platformPlanPriceIds);
+};
--- a/packages/lib/constants/billing.ts
+++ b/packages/lib/constants/billing.ts
@ -7,5 +7,6 @@ export enum STRIPE_PLAN_TYPE {
  REGULAR = 'regular',
  TEAM = 'team',
  COMMUNITY = 'community',
+  PLATFORM = 'platform',
  ENTERPRISE = 'enterprise',
 }
--- a/packages/lib/jobs/definitions/emails/send-team-deleted-email.ts
+++ b/packages/lib/jobs/definitions/emails/send-team-deleted-email.ts
@ -17,12 +17,14 @@ const SEND_TEAM_DELETED_EMAIL_JOB_DEFINITION_SCHEMA = z.object({
        documentVisibility: z.nativeEnum(DocumentVisibility),
        documentLanguage: z.string(),
        includeSenderDetails: z.boolean(),
+        includeSigningCertificate: z.boolean(),
        brandingEnabled: z.boolean(),
        brandingLogo: z.string(),
        brandingUrl: z.string(),
        brandingCompanyDetails: z.string(),
        brandingHidePoweredBy: z.boolean(),
        teamId: z.number(),
+        typedSignatureEnabled: z.boolean(),
      })
      .nullish(),
  }),
--- a/packages/lib/jobs/definitions/internal/seal-document.ts
+++ b/packages/lib/jobs/definitions/internal/seal-document.ts
@ -57,7 +57,17 @@ export const SEAL_DOCUMENT_JOB_DEFINITION = {
        },
      },
      include: {
+        documentMeta: true,
        Recipient: true,
+        team: {
+          select: {
+            teamGlobalSettings: {
+              select: {
+                includeSigningCertificate: true,
+              },
+            },
+          },
+        },
      },
    });

@ -117,7 +127,13 @@ export const SEAL_DOCUMENT_JOB_DEFINITION = {
    }

    const pdfData = await getFile(documentData);
-    const certificateData = await getCertificatePdf({ documentId }).catch(() => null);
+    const certificateData =
+      (document.team?.teamGlobalSettings?.includeSigningCertificate ?? true)
+        ? await getCertificatePdf({
+            documentId,
+            language: document.documentMeta?.language,
+          }).catch(() => null)
+        : null;

    const newDataId = await io.runTask('decorate-and-sign-pdf', async () => {
      const pdfDoc = await PDFDocument.load(pdfData);
--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@ -51,7 +51,7 @@
    "pg": "^8.11.3",
    "playwright": "1.43.0",
    "react": "^18",
-    "remeda": "^2.12.1",
+    "remeda": "^2.17.3",
    "sharp": "0.32.6",
    "stripe": "^12.7.0",
    "ts-pattern": "^5.0.5",
--- a/packages/lib/server-only/document/create-document.ts
+++ b/packages/lib/server-only/document/create-document.ts
@ -112,6 +112,7 @@ export const createDocument = async ({
        documentMeta: {
          create: {
            language: team?.teamGlobalSettings?.documentLanguage,
+            typedSignatureEnabled: team?.teamGlobalSettings?.typedSignatureEnabled,
          },
        },
      },
--- a/packages/lib/server-only/document/seal-document.ts
+++ b/packages/lib/server-only/document/seal-document.ts
@ -10,7 +10,6 @@ import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/
 import { WebhookTriggerEvents } from '@documenso/prisma/client';
 import { signPdf } from '@documenso/signing';

-import { ZSupportedLanguageCodeSchema } from '../../constants/i18n';
 import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { getFile } from '../../universal/upload/get-file';
 import { putPdfFile } from '../../universal/upload/put-file';
@ -48,6 +47,15 @@ export const sealDocument = async ({
      documentData: true,
      documentMeta: true,
      Recipient: true,
+      team: {
+        select: {
+          teamGlobalSettings: {
+            select: {
+              includeSigningCertificate: true,
+            },
+          },
+        },
+      },
    },
  });

@ -92,11 +100,13 @@ export const sealDocument = async ({
  // !: Need to write the fields onto the document as a hard copy
  const pdfData = await getFile(documentData);

-  const documentLanguage = ZSupportedLanguageCodeSchema.parse(document.documentMeta?.language);
-
-  const certificate = await getCertificatePdf({ documentId, language: documentLanguage })
-    .then(async (doc) => PDFDocument.load(doc))
-    .catch(() => null);
+  const certificateData =
+    (document.team?.teamGlobalSettings?.includeSigningCertificate ?? true)
+      ? await getCertificatePdf({
+          documentId,
+          language: document.documentMeta?.language,
+        }).catch(() => null)
+      : null;

  const doc = await PDFDocument.load(pdfData);

@ -105,7 +115,9 @@ export const sealDocument = async ({
  flattenForm(doc);
  flattenAnnotations(doc);

-  if (certificate) {
+  if (certificateData) {
+    const certificate = await PDFDocument.load(certificateData);
+
    const certificatePages = await doc.copyPages(certificate, certificate.getPageIndices());

    certificatePages.forEach((page) => {
--- a/packages/lib/server-only/field/sign-field-with-token.ts
+++ b/packages/lib/server-only/field/sign-field-with-token.ts
@ -177,6 +177,10 @@ export const signFieldWithToken = async ({
    throw new Error('Signature field must have a signature');
  }

+  if (isSignatureField && !documentMeta?.typedSignatureEnabled && typedSignature) {
+    throw new Error('Typed signatures are not allowed. Please draw your signature');
+  }
+
  return await prisma.$transaction(async (tx) => {
    const updatedField = await tx.field.update({
      where: {
--- a/packages/lib/server-only/htmltopdf/get-certificate-pdf.ts
+++ b/packages/lib/server-only/htmltopdf/get-certificate-pdf.ts
@ -2,12 +2,13 @@ import { DateTime } from 'luxon';
 import type { Browser } from 'playwright';

 import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
-import type { SupportedLanguageCodes } from '../../constants/i18n';
+import { type SupportedLanguageCodes, isValidLanguageCode } from '../../constants/i18n';
 import { encryptSecondaryData } from '../crypto/encrypt';

 export type GetCertificatePdfOptions = {
  documentId: number;
-  language?: SupportedLanguageCodes;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  language?: SupportedLanguageCodes | (string & {});
 };

 export const getCertificatePdf = async ({ documentId, language }: GetCertificatePdfOptions) => {
@ -38,15 +39,15 @@ export const getCertificatePdf = async ({ documentId, language }: GetCertificate

  const page = await browserContext.newPage();

-  if (language) {
-    await page.context().addCookies([
-      {
-        name: 'language',
-        value: language,
-        url: NEXT_PUBLIC_WEBAPP_URL(),
-      },
-    ]);
-  }
+  const lang = isValidLanguageCode(language) ? language : 'en';
+
+  await page.context().addCookies([
+    {
+      name: 'language',
+      value: lang,
+      url: NEXT_PUBLIC_WEBAPP_URL(),
+    },
+  ]);

  await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/__htmltopdf/certificate?d=${encryptedId}`, {
    waitUntil: 'networkidle',
--- a/packages/lib/server-only/pdf/insert-field-in-pdf.ts
+++ b/packages/lib/server-only/pdf/insert-field-in-pdf.ts
@ -82,7 +82,10 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
  const fieldX = pageWidth * (Number(field.positionX) / 100);
  const fieldY = pageHeight * (Number(field.positionY) / 100);

-  const font = await pdf.embedFont(isSignatureField ? fontCaveat : fontNoto);
+  const font = await pdf.embedFont(
+    isSignatureField ? fontCaveat : fontNoto,
+    isSignatureField ? { features: { calt: false } } : undefined,
+  );

  if (field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE) {
    await pdf.embedFont(fontCaveat);
@ -92,45 +95,89 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
    .with(
      {
        type: P.union(FieldType.SIGNATURE, FieldType.FREE_SIGNATURE),
-        Signature: { signatureImageAsBase64: P.string },
      },
      async (field) => {
-        const image = await pdf.embedPng(field.Signature?.signatureImageAsBase64 ?? '');
+        if (field.Signature?.signatureImageAsBase64) {
+          const image = await pdf.embedPng(field.Signature?.signatureImageAsBase64 ?? '');

-        let imageWidth = image.width;
-        let imageHeight = image.height;
+          let imageWidth = image.width;
+          let imageHeight = image.height;

-        const scalingFactor = Math.min(fieldWidth / imageWidth, fieldHeight / imageHeight, 1);
+          const scalingFactor = Math.min(fieldWidth / imageWidth, fieldHeight / imageHeight, 1);

-        imageWidth = imageWidth * scalingFactor;
-        imageHeight = imageHeight * scalingFactor;
+          imageWidth = imageWidth * scalingFactor;
+          imageHeight = imageHeight * scalingFactor;

-        let imageX = fieldX + (fieldWidth - imageWidth) / 2;
-        let imageY = fieldY + (fieldHeight - imageHeight) / 2;
+          let imageX = fieldX + (fieldWidth - imageWidth) / 2;
+          let imageY = fieldY + (fieldHeight - imageHeight) / 2;

-        // Invert the Y axis since PDFs use a bottom-left coordinate system
-        imageY = pageHeight - imageY - imageHeight;
+          // Invert the Y axis since PDFs use a bottom-left coordinate system
+          imageY = pageHeight - imageY - imageHeight;

-        if (pageRotationInDegrees !== 0) {
-          const adjustedPosition = adjustPositionForRotation(
-            pageWidth,
-            pageHeight,
-            imageX,
-            imageY,
-            pageRotationInDegrees,
-          );
+          if (pageRotationInDegrees !== 0) {
+            const adjustedPosition = adjustPositionForRotation(
+              pageWidth,
+              pageHeight,
+              imageX,
+              imageY,
+              pageRotationInDegrees,
+            );

-          imageX = adjustedPosition.xPos;
-          imageY = adjustedPosition.yPos;
+            imageX = adjustedPosition.xPos;
+            imageY = adjustedPosition.yPos;
+          }
+
+          page.drawImage(image, {
+            x: imageX,
+            y: imageY,
+            width: imageWidth,
+            height: imageHeight,
+            rotate: degrees(pageRotationInDegrees),
+          });
+        } else {
+          const signatureText = field.Signature?.typedSignature ?? '';
+
+          const longestLineInTextForWidth = signatureText
+            .split('\n')
+            .sort((a, b) => b.length - a.length)[0];
+
+          let fontSize = maxFontSize;
+          let textWidth = font.widthOfTextAtSize(longestLineInTextForWidth, fontSize);
+          let textHeight = font.heightAtSize(fontSize);
+
+          const scalingFactor = Math.min(fieldWidth / textWidth, fieldHeight / textHeight, 1);
+          fontSize = Math.max(Math.min(fontSize * scalingFactor, maxFontSize), minFontSize);
+
+          textWidth = font.widthOfTextAtSize(longestLineInTextForWidth, fontSize);
+          textHeight = font.heightAtSize(fontSize);
+
+          let textX = fieldX + (fieldWidth - textWidth) / 2;
+          let textY = fieldY + (fieldHeight - textHeight) / 2;
+
+          // Invert the Y axis since PDFs use a bottom-left coordinate system
+          textY = pageHeight - textY - textHeight;
+
+          if (pageRotationInDegrees !== 0) {
+            const adjustedPosition = adjustPositionForRotation(
+              pageWidth,
+              pageHeight,
+              textX,
+              textY,
+              pageRotationInDegrees,
+            );
+
+            textX = adjustedPosition.xPos;
+            textY = adjustedPosition.yPos;
+          }
+
+          page.drawText(signatureText, {
+            x: textX,
+            y: textY,
+            size: fontSize,
+            font,
+            rotate: degrees(pageRotationInDegrees),
+          });
        }
-
-        page.drawImage(image, {
-          x: imageX,
-          y: imageY,
-          width: imageWidth,
-          height: imageHeight,
-          rotate: degrees(pageRotationInDegrees),
-        });
      },
    )
    .with({ type: FieldType.CHECKBOX }, (field) => {
--- a/packages/lib/server-only/team/update-team-document-settings.ts
+++ b/packages/lib/server-only/team/update-team-document-settings.ts
@ -12,6 +12,8 @@ export type UpdateTeamDocumentSettingsOptions = {
    documentVisibility: DocumentVisibility;
    documentLanguage: SupportedLanguageCodes;
    includeSenderDetails: boolean;
+    typedSignatureEnabled: boolean;
+    includeSigningCertificate: boolean;
  };
 };

@ -20,7 +22,13 @@ export const updateTeamDocumentSettings = async ({
  teamId,
  settings,
 }: UpdateTeamDocumentSettingsOptions) => {
-  const { documentVisibility, documentLanguage, includeSenderDetails } = settings;
+  const {
+    documentVisibility,
+    documentLanguage,
+    includeSenderDetails,
+    includeSigningCertificate,
+    typedSignatureEnabled,
+  } = settings;

  const member = await prisma.teamMember.findFirst({
    where: {
@ -42,11 +50,15 @@ export const updateTeamDocumentSettings = async ({
      documentVisibility,
      documentLanguage,
      includeSenderDetails,
+      typedSignatureEnabled,
+      includeSigningCertificate,
    },
    update: {
      documentVisibility,
      documentLanguage,
      includeSenderDetails,
+      typedSignatureEnabled,
+      includeSigningCertificate,
    },
  });
 };
--- a/packages/lib/server-only/team/update-team.ts
+++ b/packages/lib/server-only/team/update-team.ts
@ -4,7 +4,6 @@ import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { prisma } from '@documenso/prisma';
 import { Prisma } from '@documenso/prisma/client';
-import type { DocumentVisibility } from '@documenso/prisma/client';

 export type UpdateTeamOptions = {
  userId: number;
@ -12,8 +11,6 @@ export type UpdateTeamOptions = {
  data: {
    name?: string;
    url?: string;
-    documentVisibility?: DocumentVisibility;
-    includeSenderDetails?: boolean;
  };
 };

@ -45,18 +42,6 @@ export const updateTeam = async ({ userId, teamId, data }: UpdateTeamOptions) =>
        data: {
          url: data.url,
          name: data.name,
-          teamGlobalSettings: {
-            upsert: {
-              create: {
-                documentVisibility: data.documentVisibility,
-                includeSenderDetails: data.includeSenderDetails,
-              },
-              update: {
-                documentVisibility: data.documentVisibility,
-                includeSenderDetails: data.includeSenderDetails,
-              },
-            },
-          },
        },
      });

--- a/packages/lib/server-only/template/create-document-from-template.ts
+++ b/packages/lib/server-only/template/create-document-from-template.ts
@ -64,6 +64,7 @@ export type CreateDocumentFromTemplateOptions = {
    signingOrder?: DocumentSigningOrder;
    language?: SupportedLanguageCodes;
    distributionMethod?: DocumentDistributionMethod;
+    typedSignatureEnabled?: boolean;
  };
  requestMetadata?: RequestMetadata;
 };
@ -146,7 +147,7 @@ export const createDocumentFromTemplate = async ({
    return {
      templateRecipientId: templateRecipient.id,
      fields: templateRecipient.Field,
-      name: foundRecipient ? foundRecipient.name ?? '' : templateRecipient.name,
+      name: foundRecipient ? (foundRecipient.name ?? '') : templateRecipient.name,
      email: foundRecipient ? foundRecipient.email : templateRecipient.email,
      role: templateRecipient.role,
      signingOrder: foundRecipient?.signingOrder ?? templateRecipient.signingOrder,
@ -196,6 +197,8 @@ export const createDocumentFromTemplate = async ({
              override?.language ||
              template.templateMeta?.language ||
              template.team?.teamGlobalSettings?.documentLanguage,
+            typedSignatureEnabled:
+              override?.typedSignatureEnabled ?? template.templateMeta?.typedSignatureEnabled,
          },
        },
        Recipient: {
--- a/packages/lib/translations/de/common.po
+++ b/packages/lib/translations/de/common.po
@ -448,7 +448,7 @@ msgid "Advanced Options"
 msgstr "Erweiterte Optionen"

 #: packages/ui/primitives/document-flow/add-fields.tsx:576
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:409
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:414
 msgid "Advanced settings"
 msgstr "Erweiterte Einstellungen"

@ -504,11 +504,11 @@ msgstr "Genehmigung"
 msgid "Before you get started, please confirm your email address by clicking the button below:"
 msgstr "Bitte bestätige vor dem Start deine E-Mail-Adresse, indem du auf den Button unten klickst:"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:377
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:383
 msgid "Black"
 msgstr "Schwarz"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:391
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:397
 msgid "Blue"
 msgstr "Blau"

@ -566,7 +566,7 @@ msgstr "Checkbox-Werte"
 msgid "Clear filters"
 msgstr "Filter löschen"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:411
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:417
 msgid "Clear Signature"
 msgstr "Unterschrift löschen"

@ -594,7 +594,7 @@ msgid "Configure Direct Recipient"
 msgstr "Direkten Empfänger konfigurieren"

 #: packages/ui/primitives/document-flow/add-fields.tsx:577
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:410
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:415
 msgid "Configure the {0} field"
 msgstr "Konfigurieren Sie das Feld {0}"

@ -657,7 +657,7 @@ msgstr "Benutzerdefinierter Text"

 #: packages/ui/primitives/document-flow/add-fields.tsx:934
 #: packages/ui/primitives/document-flow/types.ts:53
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:697
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:729
 msgid "Date"
 msgstr "Datum"

@ -801,7 +801,7 @@ msgid "Drag & drop your PDF here."
 msgstr "Ziehen Sie Ihr PDF hierher."

 #: packages/ui/primitives/document-flow/add-fields.tsx:1065
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:827
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:860
 msgid "Dropdown"
 msgstr "Dropdown"

@ -815,7 +815,7 @@ msgstr "Dropdown-Optionen"
 #: packages/ui/primitives/document-flow/add-signers.tsx:512
 #: packages/ui/primitives/document-flow/add-signers.tsx:519
 #: packages/ui/primitives/document-flow/types.ts:54
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:645
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:677
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:471
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:478
 msgid "Email"
@ -851,6 +851,7 @@ msgid "Enable signing order"
 msgstr "Aktiviere die Signaturreihenfolge"

 #: packages/ui/primitives/document-flow/add-fields.tsx:802
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:597
 msgid "Enable Typed Signatures"
 msgstr "Aktivieren Sie getippte Unterschriften"

@ -938,7 +939,7 @@ msgstr "Globale Empfängerauthentifizierung"
 msgid "Go Back"
 msgstr "Zurück"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:398
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:404
 msgid "Green"
 msgstr "Grün"

@ -1033,7 +1034,7 @@ msgstr "Min"
 #: packages/ui/primitives/document-flow/add-signers.tsx:550
 #: packages/ui/primitives/document-flow/add-signers.tsx:556
 #: packages/ui/primitives/document-flow/types.ts:55
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:671
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:703
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:506
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:512
 msgid "Name"
@ -1052,7 +1053,7 @@ msgid "Needs to view"
 msgstr "Muss sehen"

 #: packages/ui/primitives/document-flow/add-fields.tsx:693
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:511
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:516
 msgid "No recipient matching this description was found."
 msgstr "Kein passender Empfänger mit dieser Beschreibung gefunden."

@ -1061,7 +1062,7 @@ msgid "No recipients"
 msgstr "Keine Empfänger"

 #: packages/ui/primitives/document-flow/add-fields.tsx:708
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:526
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:531
 msgid "No recipients with this role"
 msgstr "Keine Empfänger mit dieser Rolle"

@ -1091,7 +1092,7 @@ msgstr "Keine"

 #: packages/ui/primitives/document-flow/add-fields.tsx:986
 #: packages/ui/primitives/document-flow/types.ts:56
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:749
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:781
 msgid "Number"
 msgstr "Nummer"

@ -1183,7 +1184,6 @@ msgid "Please try again or contact our support."
 msgstr "Bitte versuchen Sie es erneut oder kontaktieren Sie unseren Support."

 #: packages/ui/primitives/document-flow/types.ts:57
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:775
 msgid "Radio"
 msgstr "Radio"

@ -1226,7 +1226,7 @@ msgstr "E-Mail des entfernten Empfängers"
 msgid "Recipient signing request email"
 msgstr "E-Mail zur Unterzeichnungsanfrage des Empfängers"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:384
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:390
 msgid "Red"
 msgstr "Rot"

@ -1295,7 +1295,7 @@ msgstr "Zeilen pro Seite"
 msgid "Save"
 msgstr "Speichern"

-#: packages/ui/primitives/template-flow/add-template-fields.tsx:861
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:893
 msgid "Save Template"
 msgstr "Vorlage speichern"

@ -1388,7 +1388,7 @@ msgstr "Anmelden"
 #: packages/ui/primitives/document-flow/add-signature.tsx:323
 #: packages/ui/primitives/document-flow/field-icon.tsx:52
 #: packages/ui/primitives/document-flow/types.ts:49
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:593
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:625
 msgid "Signature"
 msgstr "Unterschrift"

@ -1473,7 +1473,7 @@ msgstr "Vorlagentitel"

 #: packages/ui/primitives/document-flow/add-fields.tsx:960
 #: packages/ui/primitives/document-flow/types.ts:52
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:723
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:755
 msgid "Text"
 msgstr "Text"

@ -1637,7 +1637,7 @@ msgid "Title"
 msgstr "Titel"

 #: packages/ui/primitives/document-flow/add-fields.tsx:1080
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:841
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:873
 msgid "To proceed further, please set at least one value for the {0} field."
 msgstr "Um fortzufahren, legen Sie bitte mindestens einen Wert für das Feld {0} fest."

--- a/packages/lib/translations/de/web.po
+++ b/packages/lib/translations/de/web.po
--- a/packages/lib/translations/en/common.po
+++ b/packages/lib/translations/en/common.po
@ -443,7 +443,7 @@ msgid "Advanced Options"
 msgstr "Advanced Options"

 #: packages/ui/primitives/document-flow/add-fields.tsx:576
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:409
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:414
 msgid "Advanced settings"
 msgstr "Advanced settings"

@ -499,11 +499,11 @@ msgstr "Approving"
 msgid "Before you get started, please confirm your email address by clicking the button below:"
 msgstr "Before you get started, please confirm your email address by clicking the button below:"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:377
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:383
 msgid "Black"
 msgstr "Black"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:391
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:397
 msgid "Blue"
 msgstr "Blue"

@ -561,7 +561,7 @@ msgstr "Checkbox values"
 msgid "Clear filters"
 msgstr "Clear filters"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:411
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:417
 msgid "Clear Signature"
 msgstr "Clear Signature"

@ -589,7 +589,7 @@ msgid "Configure Direct Recipient"
 msgstr "Configure Direct Recipient"

 #: packages/ui/primitives/document-flow/add-fields.tsx:577
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:410
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:415
 msgid "Configure the {0} field"
 msgstr "Configure the {0} field"

@ -652,7 +652,7 @@ msgstr "Custom Text"

 #: packages/ui/primitives/document-flow/add-fields.tsx:934
 #: packages/ui/primitives/document-flow/types.ts:53
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:697
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:729
 msgid "Date"
 msgstr "Date"

@ -796,7 +796,7 @@ msgid "Drag & drop your PDF here."
 msgstr "Drag & drop your PDF here."

 #: packages/ui/primitives/document-flow/add-fields.tsx:1065
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:827
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:860
 msgid "Dropdown"
 msgstr "Dropdown"

@ -810,7 +810,7 @@ msgstr "Dropdown options"
 #: packages/ui/primitives/document-flow/add-signers.tsx:512
 #: packages/ui/primitives/document-flow/add-signers.tsx:519
 #: packages/ui/primitives/document-flow/types.ts:54
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:645
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:677
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:471
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:478
 msgid "Email"
@ -846,6 +846,7 @@ msgid "Enable signing order"
 msgstr "Enable signing order"

 #: packages/ui/primitives/document-flow/add-fields.tsx:802
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:597
 msgid "Enable Typed Signatures"
 msgstr "Enable Typed Signatures"

@ -933,7 +934,7 @@ msgstr "Global recipient action authentication"
 msgid "Go Back"
 msgstr "Go Back"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:398
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:404
 msgid "Green"
 msgstr "Green"

@ -1028,7 +1029,7 @@ msgstr "Min"
 #: packages/ui/primitives/document-flow/add-signers.tsx:550
 #: packages/ui/primitives/document-flow/add-signers.tsx:556
 #: packages/ui/primitives/document-flow/types.ts:55
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:671
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:703
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:506
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:512
 msgid "Name"
@ -1047,7 +1048,7 @@ msgid "Needs to view"
 msgstr "Needs to view"

 #: packages/ui/primitives/document-flow/add-fields.tsx:693
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:511
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:516
 msgid "No recipient matching this description was found."
 msgstr "No recipient matching this description was found."

@ -1056,7 +1057,7 @@ msgid "No recipients"
 msgstr "No recipients"

 #: packages/ui/primitives/document-flow/add-fields.tsx:708
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:526
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:531
 msgid "No recipients with this role"
 msgstr "No recipients with this role"

@ -1086,7 +1087,7 @@ msgstr "None"

 #: packages/ui/primitives/document-flow/add-fields.tsx:986
 #: packages/ui/primitives/document-flow/types.ts:56
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:749
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:781
 msgid "Number"
 msgstr "Number"

@ -1178,7 +1179,6 @@ msgid "Please try again or contact our support."
 msgstr "Please try again or contact our support."

 #: packages/ui/primitives/document-flow/types.ts:57
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:775
 msgid "Radio"
 msgstr "Radio"

@ -1221,7 +1221,7 @@ msgstr "Recipient removed email"
 msgid "Recipient signing request email"
 msgstr "Recipient signing request email"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:384
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:390
 msgid "Red"
 msgstr "Red"

@ -1290,7 +1290,7 @@ msgstr "Rows per page"
 msgid "Save"
 msgstr "Save"

-#: packages/ui/primitives/template-flow/add-template-fields.tsx:861
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:893
 msgid "Save Template"
 msgstr "Save Template"

@ -1383,7 +1383,7 @@ msgstr "Sign In"
 #: packages/ui/primitives/document-flow/add-signature.tsx:323
 #: packages/ui/primitives/document-flow/field-icon.tsx:52
 #: packages/ui/primitives/document-flow/types.ts:49
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:593
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:625
 msgid "Signature"
 msgstr "Signature"

@ -1468,7 +1468,7 @@ msgstr "Template title"

 #: packages/ui/primitives/document-flow/add-fields.tsx:960
 #: packages/ui/primitives/document-flow/types.ts:52
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:723
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:755
 msgid "Text"
 msgstr "Text"

@ -1632,7 +1632,7 @@ msgid "Title"
 msgstr "Title"

 #: packages/ui/primitives/document-flow/add-fields.tsx:1080
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:841
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:873
 msgid "To proceed further, please set at least one value for the {0} field."
 msgstr "To proceed further, please set at least one value for the {0} field."

--- a/packages/lib/translations/en/web.po
+++ b/packages/lib/translations/en/web.po
--- a/packages/lib/translations/es/common.po
+++ b/packages/lib/translations/es/common.po
@ -448,7 +448,7 @@ msgid "Advanced Options"
 msgstr "Opciones avanzadas"

 #: packages/ui/primitives/document-flow/add-fields.tsx:576
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:409
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:414
 msgid "Advanced settings"
 msgstr "Configuraciones avanzadas"

@ -504,11 +504,11 @@ msgstr "Aprobando"
 msgid "Before you get started, please confirm your email address by clicking the button below:"
 msgstr "Antes de comenzar, por favor confirma tu dirección de correo electrónico haciendo clic en el botón de abajo:"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:377
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:383
 msgid "Black"
 msgstr "Negro"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:391
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:397
 msgid "Blue"
 msgstr "Azul"

@ -566,7 +566,7 @@ msgstr "Valores de Checkbox"
 msgid "Clear filters"
 msgstr "Limpiar filtros"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:411
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:417
 msgid "Clear Signature"
 msgstr "Limpiar firma"

@ -594,7 +594,7 @@ msgid "Configure Direct Recipient"
 msgstr "Configurar destinatario directo"

 #: packages/ui/primitives/document-flow/add-fields.tsx:577
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:410
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:415
 msgid "Configure the {0} field"
 msgstr "Configurar el campo {0}"

@ -657,7 +657,7 @@ msgstr "Texto personalizado"

 #: packages/ui/primitives/document-flow/add-fields.tsx:934
 #: packages/ui/primitives/document-flow/types.ts:53
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:697
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:729
 msgid "Date"
 msgstr "Fecha"

@ -801,7 +801,7 @@ msgid "Drag & drop your PDF here."
 msgstr "Arrastre y suelte su PDF aquí."

 #: packages/ui/primitives/document-flow/add-fields.tsx:1065
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:827
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:860
 msgid "Dropdown"
 msgstr "Menú desplegable"

@ -815,7 +815,7 @@ msgstr "Opciones de menú desplegable"
 #: packages/ui/primitives/document-flow/add-signers.tsx:512
 #: packages/ui/primitives/document-flow/add-signers.tsx:519
 #: packages/ui/primitives/document-flow/types.ts:54
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:645
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:677
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:471
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:478
 msgid "Email"
@ -851,6 +851,7 @@ msgid "Enable signing order"
 msgstr "Habilitar orden de firma"

 #: packages/ui/primitives/document-flow/add-fields.tsx:802
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:597
 msgid "Enable Typed Signatures"
 msgstr "Habilitar firmas escritas"

@ -938,7 +939,7 @@ msgstr "Autenticación de acción de destinatario global"
 msgid "Go Back"
 msgstr "Regresar"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:398
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:404
 msgid "Green"
 msgstr "Verde"

@ -1033,7 +1034,7 @@ msgstr "Mín"
 #: packages/ui/primitives/document-flow/add-signers.tsx:550
 #: packages/ui/primitives/document-flow/add-signers.tsx:556
 #: packages/ui/primitives/document-flow/types.ts:55
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:671
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:703
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:506
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:512
 msgid "Name"
@ -1052,7 +1053,7 @@ msgid "Needs to view"
 msgstr "Necesita ver"

 #: packages/ui/primitives/document-flow/add-fields.tsx:693
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:511
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:516
 msgid "No recipient matching this description was found."
 msgstr "No se encontró ningún destinatario que coincidiera con esta descripción."

@ -1061,7 +1062,7 @@ msgid "No recipients"
 msgstr "Sin destinatarios"

 #: packages/ui/primitives/document-flow/add-fields.tsx:708
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:526
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:531
 msgid "No recipients with this role"
 msgstr "No hay destinatarios con este rol"

@ -1091,7 +1092,7 @@ msgstr "Ninguno"

 #: packages/ui/primitives/document-flow/add-fields.tsx:986
 #: packages/ui/primitives/document-flow/types.ts:56
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:749
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:781
 msgid "Number"
 msgstr "Número"

@ -1183,7 +1184,6 @@ msgid "Please try again or contact our support."
 msgstr "Por favor, inténtalo de nuevo o contacta a nuestro soporte."

 #: packages/ui/primitives/document-flow/types.ts:57
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:775
 msgid "Radio"
 msgstr "Radio"

@ -1226,7 +1226,7 @@ msgstr "Correo electrónico de destinatario eliminado"
 msgid "Recipient signing request email"
 msgstr "Correo electrónico de solicitud de firma de destinatario"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:384
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:390
 msgid "Red"
 msgstr "Rojo"

@ -1295,7 +1295,7 @@ msgstr "Filas por página"
 msgid "Save"
 msgstr "Guardar"

-#: packages/ui/primitives/template-flow/add-template-fields.tsx:861
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:893
 msgid "Save Template"
 msgstr "Guardar plantilla"

@ -1388,7 +1388,7 @@ msgstr "Iniciar sesión"
 #: packages/ui/primitives/document-flow/add-signature.tsx:323
 #: packages/ui/primitives/document-flow/field-icon.tsx:52
 #: packages/ui/primitives/document-flow/types.ts:49
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:593
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:625
 msgid "Signature"
 msgstr "Firma"

@ -1473,7 +1473,7 @@ msgstr "Título de plantilla"

 #: packages/ui/primitives/document-flow/add-fields.tsx:960
 #: packages/ui/primitives/document-flow/types.ts:52
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:723
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:755
 msgid "Text"
 msgstr "Texto"

@ -1637,7 +1637,7 @@ msgid "Title"
 msgstr "Título"

 #: packages/ui/primitives/document-flow/add-fields.tsx:1080
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:841
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:873
 msgid "To proceed further, please set at least one value for the {0} field."
 msgstr "Para continuar, por favor establezca al menos un valor para el campo {0}."

--- a/packages/lib/translations/es/web.po
+++ b/packages/lib/translations/es/web.po
--- a/packages/lib/translations/fr/common.po
+++ b/packages/lib/translations/fr/common.po
@ -448,7 +448,7 @@ msgid "Advanced Options"
 msgstr "Options avancées"

 #: packages/ui/primitives/document-flow/add-fields.tsx:576
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:409
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:414
 msgid "Advanced settings"
 msgstr "Paramètres avancés"

@ -504,11 +504,11 @@ msgstr "En attente d'approbation"
 msgid "Before you get started, please confirm your email address by clicking the button below:"
 msgstr "Avant de commencer, veuillez confirmer votre adresse email en cliquant sur le bouton ci-dessous :"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:377
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:383
 msgid "Black"
 msgstr "Noir"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:391
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:397
 msgid "Blue"
 msgstr "Bleu"

@ -566,7 +566,7 @@ msgstr "Valeurs de case à cocher"
 msgid "Clear filters"
 msgstr "Effacer les filtres"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:411
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:417
 msgid "Clear Signature"
 msgstr "Effacer la signature"

@ -594,7 +594,7 @@ msgid "Configure Direct Recipient"
 msgstr "Configurer le destinataire direct"

 #: packages/ui/primitives/document-flow/add-fields.tsx:577
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:410
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:415
 msgid "Configure the {0} field"
 msgstr "Configurer le champ {0}"

@ -657,7 +657,7 @@ msgstr "Texte personnalisé"

 #: packages/ui/primitives/document-flow/add-fields.tsx:934
 #: packages/ui/primitives/document-flow/types.ts:53
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:697
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:729
 msgid "Date"
 msgstr "Date"

@ -801,7 +801,7 @@ msgid "Drag & drop your PDF here."
 msgstr "Faites glisser et déposez votre PDF ici."

 #: packages/ui/primitives/document-flow/add-fields.tsx:1065
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:827
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:860
 msgid "Dropdown"
 msgstr "Liste déroulante"

@ -815,7 +815,7 @@ msgstr "Options de liste déroulante"
 #: packages/ui/primitives/document-flow/add-signers.tsx:512
 #: packages/ui/primitives/document-flow/add-signers.tsx:519
 #: packages/ui/primitives/document-flow/types.ts:54
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:645
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:677
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:471
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:478
 msgid "Email"
@ -851,6 +851,7 @@ msgid "Enable signing order"
 msgstr "Activer l'ordre de signature"

 #: packages/ui/primitives/document-flow/add-fields.tsx:802
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:597
 msgid "Enable Typed Signatures"
 msgstr "Activer les signatures tapées"

@ -938,7 +939,7 @@ msgstr "Authentification d'action de destinataire globale"
 msgid "Go Back"
 msgstr "Retourner"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:398
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:404
 msgid "Green"
 msgstr "Vert"

@ -1033,7 +1034,7 @@ msgstr "Min"
 #: packages/ui/primitives/document-flow/add-signers.tsx:550
 #: packages/ui/primitives/document-flow/add-signers.tsx:556
 #: packages/ui/primitives/document-flow/types.ts:55
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:671
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:703
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:506
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:512
 msgid "Name"
@ -1052,7 +1053,7 @@ msgid "Needs to view"
 msgstr "Nécessite une visualisation"

 #: packages/ui/primitives/document-flow/add-fields.tsx:693
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:511
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:516
 msgid "No recipient matching this description was found."
 msgstr "Aucun destinataire correspondant à cette description n'a été trouvé."

@ -1061,7 +1062,7 @@ msgid "No recipients"
 msgstr "Aucun destinataire"

 #: packages/ui/primitives/document-flow/add-fields.tsx:708
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:526
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:531
 msgid "No recipients with this role"
 msgstr "Aucun destinataire avec ce rôle"

@ -1091,7 +1092,7 @@ msgstr "Aucun"

 #: packages/ui/primitives/document-flow/add-fields.tsx:986
 #: packages/ui/primitives/document-flow/types.ts:56
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:749
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:781
 msgid "Number"
 msgstr "Numéro"

@ -1183,7 +1184,6 @@ msgid "Please try again or contact our support."
 msgstr "Veuillez réessayer ou contacter notre support."

 #: packages/ui/primitives/document-flow/types.ts:57
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:775
 msgid "Radio"
 msgstr "Radio"

@ -1226,7 +1226,7 @@ msgstr "E-mail de destinataire supprimé"
 msgid "Recipient signing request email"
 msgstr "E-mail de demande de signature de destinataire"

-#: packages/ui/primitives/signature-pad/signature-pad.tsx:384
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:390
 msgid "Red"
 msgstr "Rouge"

@ -1295,7 +1295,7 @@ msgstr "Lignes par page"
 msgid "Save"
 msgstr "Sauvegarder"

-#: packages/ui/primitives/template-flow/add-template-fields.tsx:861
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:893
 msgid "Save Template"
 msgstr "Sauvegarder le modèle"

@ -1388,7 +1388,7 @@ msgstr "Se connecter"
 #: packages/ui/primitives/document-flow/add-signature.tsx:323
 #: packages/ui/primitives/document-flow/field-icon.tsx:52
 #: packages/ui/primitives/document-flow/types.ts:49
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:593
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:625
 msgid "Signature"
 msgstr "Signature"

@ -1473,7 +1473,7 @@ msgstr "Titre du modèle"

 #: packages/ui/primitives/document-flow/add-fields.tsx:960
 #: packages/ui/primitives/document-flow/types.ts:52
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:723
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:755
 msgid "Text"
 msgstr "Texte"

@ -1637,7 +1637,7 @@ msgid "Title"
 msgstr "Titre"

 #: packages/ui/primitives/document-flow/add-fields.tsx:1080
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:841
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:873
 msgid "To proceed further, please set at least one value for the {0} field."
 msgstr "Pour continuer, veuillez définir au moins une valeur pour le champ {0}."

--- a/packages/lib/translations/fr/web.po
+++ b/packages/lib/translations/fr/web.po
--- a/packages/prettier-config/index.cjs
+++ b/packages/prettier-config/index.cjs
@ -24,7 +24,8 @@ module.exports = {

  plugins: [
    '@trivago/prettier-plugin-sort-imports',
-    'prettier-plugin-sql',
+    // !: Disabled until Prettier 3.x is supported.
+    // 'prettier-plugin-sql',
    'prettier-plugin-tailwindcss',
  ],

--- a/packages/prettier-config/package.json
+++ b/packages/prettier-config/package.json
@ -7,10 +7,9 @@
    "clean": "rimraf node_modules"
  },
  "dependencies": {
-    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-    "prettier": "^2.8.8",
-    "prettier-plugin-sql": "^0.14.0",
-    "prettier-plugin-tailwindcss": "^0.2.8"
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.9"
  },
  "devDependencies": {}
-}
+}
--- a/packages/prisma/migrations/20241101112106_enable_typed_signature_by_default/migration.sql
+++ b/packages/prisma/migrations/20241101112106_enable_typed_signature_by_default/migration.sql
@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "DocumentMeta" ALTER COLUMN "typedSignatureEnabled" SET DEFAULT true;
--- a/packages/prisma/migrations/20241119123601_add_typed_signature_team_global_settings/migration.sql
+++ b/packages/prisma/migrations/20241119123601_add_typed_signature_team_global_settings/migration.sql
@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "TeamGlobalSettings" ADD COLUMN     "typedSignatureEnabled" BOOLEAN NOT NULL DEFAULT true;
--- a/packages/prisma/migrations/20241122081012_download_document_without_certificate/migration.sql
+++ b/packages/prisma/migrations/20241122081012_download_document_without_certificate/migration.sql
@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "TeamGlobalSettings" ADD COLUMN     "includeSigningCertificate" BOOLEAN NOT NULL DEFAULT true;
--- a/packages/prisma/migrations/20241126014353_add_typed_signature_setting_to_templates/migration.sql
+++ b/packages/prisma/migrations/20241126014353_add_typed_signature_setting_to_templates/migration.sql
@ -0,0 +1,7 @@
+-- Existing templates should not have this enabled by default.
+-- AlterTable
+ALTER TABLE "TemplateMeta" ADD COLUMN     "typedSignatureEnabled" BOOLEAN NOT NULL DEFAULT false;
+
+-- New templates should have this enabled by default.
+-- AlterTable
+ALTER TABLE "TemplateMeta" ALTER COLUMN "typedSignatureEnabled" SET DEFAULT true;
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@ -374,7 +374,7 @@ model DocumentMeta {
  document              Document                   @relation(fields: [documentId], references: [id], onDelete: Cascade)
  redirectUrl           String?
  signingOrder          DocumentSigningOrder       @default(PARALLEL)
-  typedSignatureEnabled Boolean                    @default(false)
+  typedSignatureEnabled Boolean                    @default(true)
  language              String                     @default("en")
  distributionMethod    DocumentDistributionMethod @default(EMAIL)
  emailSettings         Json?
@ -511,10 +511,12 @@ enum TeamMemberInviteStatus {
 }

 model TeamGlobalSettings {
-  teamId               Int                @unique
-  documentVisibility   DocumentVisibility @default(EVERYONE)
-  documentLanguage     String             @default("en")
-  includeSenderDetails Boolean            @default(true)
+  teamId                    Int                @unique
+  documentVisibility        DocumentVisibility @default(EVERYONE)
+  documentLanguage          String             @default("en")
+  includeSenderDetails      Boolean            @default(true)
+  typedSignatureEnabled     Boolean            @default(true)
+  includeSigningCertificate Boolean            @default(true)

  brandingEnabled        Boolean @default(false)
  brandingLogo           String  @default("")
@ -628,19 +630,21 @@ enum TemplateType {
 }

 model TemplateMeta {
-  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
-  signingOrder       DocumentSigningOrder?      @default(PARALLEL)
-  templateId         Int                        @unique
-  template           Template                   @relation(fields: [templateId], references: [id], onDelete: Cascade)
-  redirectUrl        String?
-  language           String                     @default("en")
-  distributionMethod DocumentDistributionMethod @default(EMAIL)
-  emailSettings      Json?
+  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
+  signingOrder          DocumentSigningOrder?      @default(PARALLEL)
+  typedSignatureEnabled Boolean                    @default(true)
+  distributionMethod    DocumentDistributionMethod @default(EMAIL)
+
+  templateId    Int      @unique
+  template      Template @relation(fields: [templateId], references: [id], onDelete: Cascade)
+  redirectUrl   String?
+  language      String   @default("en")
+  emailSettings Json?
 }

 model Template {
--- a/packages/tailwind-config/index.cjs
+++ b/packages/tailwind-config/index.cjs
@ -3,7 +3,7 @@ const { fontFamily } = require('tailwindcss/defaultTheme');

 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ['class'],
+  darkMode: ['variant', '&:is(.dark:not(.dark-mode-disabled) *)'],
  content: ['src/**/*.{ts,tsx}'],
  theme: {
    extend: {
@ -108,6 +108,9 @@ module.exports = {
        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      borderRadius: {
+        DEFAULT: 'calc(var(--radius) - 3px)',
+        '2xl': 'calc(var(--radius) + 4px)',
+        xl: 'calc(var(--radius) + 2px)',
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
--- a/packages/tailwind-config/package.json
+++ b/packages/tailwind-config/package.json
@ -11,7 +11,7 @@
    "@tailwindcss/typography": "^0.5.9",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.32",
-    "tailwindcss": "3.3.2",
+    "tailwindcss": "3.4.15",
    "tailwindcss-animate": "^1.0.5"
  },
  "devDependencies": {},
--- a/packages/trpc/server/team-router/schema.ts
+++ b/packages/trpc/server/team-router/schema.ts
@ -151,8 +151,6 @@ export const ZUpdateTeamMutationSchema = z.object({
  data: z.object({
    name: ZTeamNameSchema,
    url: ZTeamUrlSchema,
-    documentVisibility: z.nativeEnum(DocumentVisibility).optional(),
-    includeSenderDetails: z.boolean().optional(),
  }),
 });

@ -212,6 +210,8 @@ export const ZUpdateTeamDocumentSettingsMutationSchema = z.object({
      .default(DocumentVisibility.EVERYONE),
    documentLanguage: z.enum(SUPPORTED_LANGUAGE_CODES).optional().default('en'),
    includeSenderDetails: z.boolean().optional().default(false),
+    typedSignatureEnabled: z.boolean().optional().default(true),
+    includeSigningCertificate: z.boolean().optional().default(true),
  }),
 });

--- a/packages/trpc/server/template-router/router.ts
+++ b/packages/trpc/server/template-router/router.ts
@ -35,6 +35,7 @@ import {
  ZSetSigningOrderForTemplateMutationSchema,
  ZToggleTemplateDirectLinkMutationSchema,
  ZUpdateTemplateSettingsMutationSchema,
+  ZUpdateTemplateTypedSignatureSettingsMutationSchema,
 } from './schema';

 export const templateRouter = router({
@ -359,4 +360,48 @@ export const templateRouter = router({
        });
      }
    }),
+
+  updateTemplateTypedSignatureSettings: authenticatedProcedure
+    .input(ZUpdateTemplateTypedSignatureSettingsMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { templateId, teamId, typedSignatureEnabled } = input;
+
+        const template = await getTemplateById({
+          id: templateId,
+          teamId,
+          userId: ctx.user.id,
+        }).catch(() => null);
+
+        if (!template) {
+          throw new TRPCError({
+            code: 'NOT_FOUND',
+            message: 'Template not found',
+          });
+        }
+
+        return await updateTemplateSettings({
+          templateId,
+          teamId,
+          userId: ctx.user.id,
+          data: {},
+          meta: {
+            typedSignatureEnabled,
+          },
+          requestMetadata: extractNextApiRequestMetadata(ctx.req),
+        });
+      } catch (err) {
+        console.error(err);
+
+        if (err instanceof TRPCError) {
+          throw err;
+        }
+
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message:
+            'We were unable to update the settings for this template. Please try again later.',
+        });
+      }
+    }),
 });
--- a/packages/trpc/server/template-router/schema.ts
+++ b/packages/trpc/server/template-router/schema.ts
@ -114,6 +114,7 @@ export const ZUpdateTemplateSettingsMutationSchema = z.object({
            'Please enter a valid URL, make sure you include http:// or https:// part of the url.',
        }),
      language: z.enum(SUPPORTED_LANGUAGE_CODES).optional(),
+      typedSignatureEnabled: z.boolean().optional(),
    })
    .optional(),
 });
@ -138,6 +139,12 @@ export const ZMoveTemplatesToTeamSchema = z.object({
  teamId: z.number(),
 });

+export const ZUpdateTemplateTypedSignatureSettingsMutationSchema = z.object({
+  templateId: z.number(),
+  teamId: z.number().optional(),
+  typedSignatureEnabled: z.boolean(),
+});
+
 export type TCreateTemplateMutationSchema = z.infer<typeof ZCreateTemplateMutationSchema>;
 export type TCreateDocumentFromTemplateMutationSchema = z.infer<
  typeof ZCreateDocumentFromTemplateMutationSchema
--- a/packages/ui/components/field/field.tsx
+++ b/packages/ui/components/field/field.tsx
@ -34,7 +34,7 @@ const getCardClassNames = (
  const baseClasses = 'field-card-container relative z-20 h-full w-full transition-all';

  const insertedClasses =
-    'bg-documenso/20 border-documenso ring-documenso-200 ring-offset-documenso-200 ring-2 ring-offset-2 dark:shadow-none';
+    'bg-primary/20 border-primary ring-primary/20 ring-offset-primary/20 ring-2 ring-offset-2 dark:shadow-none';
  const nonRequiredClasses =
    'border-yellow-300 shadow-none ring-2 ring-yellow-100 ring-offset-2 ring-offset-yellow-100 dark:border-2';
  const validatingClasses = 'border-orange-300 ring-1 ring-orange-300';
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@ -74,7 +74,7 @@
    "react-hook-form": "^7.45.4",
    "react-pdf": "7.7.3",
    "react-rnd": "^10.4.1",
-    "remeda": "^1.27.1",
+    "remeda": "^2.17.3",
    "tailwind-merge": "^1.12.0",
    "tailwindcss-animate": "^1.0.5",
    "ts-pattern": "^5.0.5",
--- a/packages/ui/primitives/card.tsx
+++ b/packages/ui/primitives/card.tsx
@ -36,11 +36,11 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
        className={cn(
          'bg-background text-foreground group relative rounded-lg border-2 backdrop-blur-[2px]',
          {
-            'gradient-border-mask before:pointer-events-none before:absolute before:-inset-[2px] before:rounded-lg before:p-[2px] before:[background:linear-gradient(var(--card-gradient-degrees),theme(colors.documenso.DEFAULT/50%)_5%,theme(colors.border/80%)_30%)]':
+            'gradient-border-mask before:pointer-events-none before:absolute before:-inset-[2px] before:rounded-lg before:p-[2px] before:[background:linear-gradient(var(--card-gradient-degrees),theme(colors.primary.DEFAULT/50%)_5%,theme(colors.border/80%)_30%)]':
              gradient,
-            'dark:gradient-border-mask before:pointer-events-none before:absolute before:-inset-[2px] before:rounded-lg before:p-[2px] before:[background:linear-gradient(var(--card-gradient-degrees),theme(colors.documenso.DEFAULT/70%)_5%,theme(colors.border/80%)_30%)]':
+            'dark:gradient-border-mask before:pointer-events-none before:absolute before:-inset-[2px] before:rounded-lg before:p-[2px] before:[background:linear-gradient(var(--card-gradient-degrees),theme(colors.primary.DEFAULT/70%)_5%,theme(colors.border/80%)_30%)]':
              gradient,
-            'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]':
+            'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_var(colors.primary.DEFAULT/70%)]':
              true,
            'dark:shadow-[0]': true,
          },
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx
+++ b/packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx
@ -141,7 +141,7 @@ export const RadioFieldAdvancedSettings = ({
          {values.map((value) => (
            <div key={value.id} className="mt-2 flex items-center gap-4">
              <Checkbox
-                className="data-[state=checked]:bg-documenso border-foreground/30 data-[state=checked]:ring-documenso dark:data-[state=checked]:ring-offset-background h-5 w-5 rounded-full data-[state=checked]:ring-1 data-[state=checked]:ring-offset-2 data-[state=checked]:ring-offset-white"
+                className="data-[state=checked]:bg-documenso border-foreground/30 data-[state=checked]:ring-primary dark:data-[state=checked]:ring-offset-background h-5 w-5 rounded-full data-[state=checked]:ring-1 data-[state=checked]:ring-offset-2 data-[state=checked]:ring-offset-white"
                checked={value.checked}
                onCheckedChange={(checked) => handleCheckedChange(Boolean(checked), value.id)}
              />
--- a/packages/ui/primitives/signature-pad/signature-pad.tsx
+++ b/packages/ui/primitives/signature-pad/signature-pad.tsx
@ -38,6 +38,7 @@ export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChang
  containerClassName?: string;
  disabled?: boolean;
  allowTypedSignature?: boolean;
+  defaultValue?: string;
 };

 export const SignaturePad = ({
@ -56,7 +57,7 @@ export const SignaturePad = ({
  const [lines, setLines] = useState<Point[][]>([]);
  const [currentLine, setCurrentLine] = useState<Point[]>([]);
  const [selectedColor, setSelectedColor] = useState('black');
-  const [typedSignature, setTypedSignature] = useState('');
+  const [typedSignature, setTypedSignature] = useState(defaultValue ?? '');

  const perfectFreehandOptions = useMemo(() => {
    const size = $el.current ? Math.min($el.current.height, $el.current.width) * 0.03 : 10;
@ -206,6 +207,7 @@ export const SignaturePad = ({
      if (ctx) {
        const canvasWidth = $el.current.width;
        const canvasHeight = $el.current.height;
+        const fontFamily = String(fontCaveat.style.fontFamily);

        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        ctx.textAlign = 'center';
@ -217,7 +219,7 @@ export const SignaturePad = ({

        // Start with a base font size
        let fontSize = 18;
-        ctx.font = `${fontSize}px ${fontCaveat.style.fontFamily}`;
+        ctx.font = `${fontSize}px ${fontFamily}`;

        // Measure 10 characters and calculate scale factor
        const characterWidth = ctx.measureText('m'.repeat(10)).width;
@ -227,7 +229,7 @@ export const SignaturePad = ({
        fontSize = fontSize * scaleFactor;

        // Adjust font size if it exceeds canvas width
-        ctx.font = `${fontSize}px ${fontCaveat.style.fontFamily}`;
+        ctx.font = `${fontSize}px ${fontFamily}`;

        const textWidth = ctx.measureText(typedSignature).width;

@ -236,7 +238,7 @@ export const SignaturePad = ({
        }

        // Set final font and render text
-        ctx.font = `${fontSize}px ${fontCaveat.style.fontFamily}`;
+        ctx.font = `${fontSize}px ${fontFamily}`;
        ctx.fillText(typedSignature, canvasWidth / 2, canvasHeight / 2);
      }
    }
@ -247,7 +249,7 @@ export const SignaturePad = ({
    setTypedSignature(newValue);

    if (newValue.trim() !== '') {
-      onChange?.($el.current?.toDataURL() || null);
+      onChange?.(newValue);
    } else {
      onChange?.(null);
    }
@ -256,7 +258,7 @@ export const SignaturePad = ({
  useEffect(() => {
    if (typedSignature.trim() !== '') {
      renderTypedSignature();
-      onChange?.($el.current?.toDataURL() || null);
+      onChange?.(typedSignature);
    } else {
      onClearClick();
    }
@ -303,6 +305,10 @@ export const SignaturePad = ({
      $el.current.width = $el.current.clientWidth * DPI;
      $el.current.height = $el.current.clientHeight * DPI;
    }
+
+    if (defaultValue && typedSignature) {
+      renderTypedSignature();
+    }
  }, []);

  unsafe_useEffectOnce(() => {
--- a/packages/ui/primitives/template-flow/add-template-fields.tsx
+++ b/packages/ui/primitives/template-flow/add-template-fields.tsx
@ -55,8 +55,10 @@ import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/type
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';

 import { getSignerColorStyles, useSignerColors } from '../../lib/signer-colors';
+import { Checkbox } from '../checkbox';
 import type { FieldFormType } from '../document-flow/add-fields';
 import { FieldAdvancedSettings } from '../document-flow/field-item-advanced-settings';
+import { Form, FormControl, FormField, FormItem, FormLabel } from '../form/form';
 import { useStep } from '../stepper';
 import type { TAddTemplateFieldsFormSchema } from './add-template-fields.types';

@ -80,6 +82,7 @@ export type AddTemplateFieldsFormProps = {
  fields: Field[];
  onSubmit: (_data: TAddTemplateFieldsFormSchema) => void;
  teamId?: number;
+  typedSignatureEnabled?: boolean;
 };

 export const AddTemplateFieldsFormPartial = ({
@ -89,6 +92,7 @@ export const AddTemplateFieldsFormPartial = ({
  fields,
  onSubmit,
  teamId,
+  typedSignatureEnabled,
 }: AddTemplateFieldsFormProps) => {
  const { _ } = useLingui();

@ -97,13 +101,7 @@ export const AddTemplateFieldsFormPartial = ({
  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
  const [currentField, setCurrentField] = useState<FieldFormType>();

-  const {
-    control,
-    handleSubmit,
-    formState: { isSubmitting },
-    setValue,
-    getValues,
-  } = useForm<TAddTemplateFieldsFormSchema>({
+  const form = useForm<TAddTemplateFieldsFormSchema>({
    defaultValues: {
      fields: fields.map((field) => ({
        nativeId: field.id,
@ -121,13 +119,14 @@ export const AddTemplateFieldsFormPartial = ({
          recipients.find((recipient) => recipient.id === field.recipientId)?.token ?? '',
        fieldMeta: field.fieldMeta ? ZFieldMetaSchema.parse(field.fieldMeta) : undefined,
      })),
+      typedSignatureEnabled: typedSignatureEnabled ?? false,
    },
  });

-  const onFormSubmit = handleSubmit(onSubmit);
+  const onFormSubmit = form.handleSubmit(onSubmit);

  const handleSavedFieldSettings = (fieldState: FieldMeta) => {
-    const initialValues = getValues();
+    const initialValues = form.getValues();

    const updatedFields = initialValues.fields.map((field) => {
      if (field.formId === currentField?.formId) {
@ -142,7 +141,7 @@ export const AddTemplateFieldsFormPartial = ({
      return field;
    });

-    setValue('fields', updatedFields);
+    form.setValue('fields', updatedFields);
  };

  const {
@ -151,7 +150,7 @@ export const AddTemplateFieldsFormPartial = ({
    update,
    fields: localFields,
  } = useFieldArray({
-    control,
+    control: form.control,
    name: 'fields',
  });

@ -402,6 +401,12 @@ export const AddTemplateFieldsFormPartial = ({
    setShowAdvancedSettings((prev) => !prev);
  };

+  const isTypedSignatureEnabled = form.watch('typedSignatureEnabled');
+
+  const handleTypedSignatureChange = (value: boolean) => {
+    form.setValue('typedSignatureEnabled', value, { shouldDirty: true });
+  };
+
  return (
    <>
      {showAdvancedSettings && currentField ? (
@ -568,305 +573,334 @@ export const AddTemplateFieldsFormPartial = ({
                </Popover>
              )}

-              <div className="-mx-2 flex-1 overflow-y-auto px-2">
-                <fieldset className="my-2 grid grid-cols-3 gap-4">
-                  <button
-                    type="button"
-                    className="group h-full w-full"
-                    onClick={() => setSelectedField(FieldType.SIGNATURE)}
-                    onMouseDown={() => setSelectedField(FieldType.SIGNATURE)}
-                    data-selected={selectedField === FieldType.SIGNATURE ? true : undefined}
-                  >
-                    <Card
-                      className={cn(
-                        'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                        // selectedSignerStyles.borderClass,
-                      )}
-                    >
-                      <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                        <p
-                          className={cn(
-                            'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-lg font-normal',
-                            fontCaveat.className,
-                          )}
-                        >
-                          <Trans>Signature</Trans>
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </button>
+              <Form {...form}>
+                <FormField
+                  control={form.control}
+                  name="typedSignatureEnabled"
+                  render={({ field: { value, ...field } }) => (
+                    <FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
+                      <FormControl>
+                        <Checkbox
+                          {...field}
+                          id="typedSignatureEnabled"
+                          checkClassName="text-white"
+                          checked={value}
+                          onCheckedChange={(checked) => field.onChange(checked)}
+                          disabled={form.formState.isSubmitting}
+                        />
+                      </FormControl>

-                  <button
-                    type="button"
-                    className="group h-full w-full"
-                    onClick={() => setSelectedField(FieldType.INITIALS)}
-                    onMouseDown={() => setSelectedField(FieldType.INITIALS)}
-                    data-selected={selectedField === FieldType.INITIALS ? true : undefined}
-                  >
-                    <Card
-                      className={cn(
-                        'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                        // selectedSignerStyles.borderClass,
-                      )}
-                    >
-                      <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                        <p
-                          className={cn(
-                            'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
-                          )}
-                        >
-                          <Contact className="h-4 w-4" />
-                          Initials
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </button>
+                      <FormLabel
+                        htmlFor="typedSignatureEnabled"
+                        className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                      >
+                        <Trans>Enable Typed Signatures</Trans>
+                      </FormLabel>
+                    </FormItem>
+                  )}
+                />

-                  <button
-                    type="button"
-                    className="group h-full w-full"
-                    onClick={() => setSelectedField(FieldType.EMAIL)}
-                    onMouseDown={() => setSelectedField(FieldType.EMAIL)}
-                    data-selected={selectedField === FieldType.EMAIL ? true : undefined}
-                  >
-                    <Card
-                      className={cn(
-                        'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                        // selectedSignerStyles.borderClass,
-                      )}
+                <div className="-mx-2 flex-1 overflow-y-auto px-2">
+                  <fieldset className="my-2 grid grid-cols-3 gap-4">
+                    <button
+                      type="button"
+                      className="group h-full w-full"
+                      onClick={() => setSelectedField(FieldType.SIGNATURE)}
+                      onMouseDown={() => setSelectedField(FieldType.SIGNATURE)}
+                      data-selected={selectedField === FieldType.SIGNATURE ? true : undefined}
                    >
-                      <CardContent className="p-4">
-                        <p
-                          className={cn(
-                            'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
-                          )}
-                        >
-                          <Mail className="h-4 w-4" />
-                          <Trans>Email</Trans>
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </button>
+                      <Card
+                        className={cn(
+                          'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
+                          // selectedSignerStyles.borderClass,
+                        )}
+                      >
+                        <CardContent className="flex flex-col items-center justify-center px-6 py-4">
+                          <p
+                            className={cn(
+                              'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-lg font-normal',
+                              fontCaveat.className,
+                            )}
+                          >
+                            <Trans>Signature</Trans>
+                          </p>
+                        </CardContent>
+                      </Card>
+                    </button>

-                  <button
-                    type="button"
-                    className="group h-full w-full"
-                    onClick={() => setSelectedField(FieldType.NAME)}
-                    onMouseDown={() => setSelectedField(FieldType.NAME)}
-                    data-selected={selectedField === FieldType.NAME ? true : undefined}
-                  >
-                    <Card
-                      className={cn(
-                        'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                        // selectedSignerStyles.borderClass,
-                      )}
+                    <button
+                      type="button"
+                      className="group h-full w-full"
+                      onClick={() => setSelectedField(FieldType.INITIALS)}
+                      onMouseDown={() => setSelectedField(FieldType.INITIALS)}
+                      data-selected={selectedField === FieldType.INITIALS ? true : undefined}
                    >
-                      <CardContent className="p-4">
-                        <p
-                          className={cn(
-                            'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
-                          )}
-                        >
-                          <User className="h-4 w-4" />
-                          <Trans>Name</Trans>
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </button>
+                      <Card
+                        className={cn(
+                          'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
+                          // selectedSignerStyles.borderClass,
+                        )}
+                      >
+                        <CardContent className="flex flex-col items-center justify-center px-6 py-4">
+                          <p
+                            className={cn(
+                              'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                            )}
+                          >
+                            <Contact className="h-4 w-4" />
+                            Initials
+                          </p>
+                        </CardContent>
+                      </Card>
+                    </button>

-                  <button
-                    type="button"
-                    className="group h-full w-full"
-                    onClick={() => setSelectedField(FieldType.DATE)}
-                    onMouseDown={() => setSelectedField(FieldType.DATE)}
-                    data-selected={selectedField === FieldType.DATE ? true : undefined}
-                  >
-                    <Card
-                      className={cn(
-                        'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                        // selectedSignerStyles.borderClass,
-                      )}
+                    <button
+                      type="button"
+                      className="group h-full w-full"
+                      onClick={() => setSelectedField(FieldType.EMAIL)}
+                      onMouseDown={() => setSelectedField(FieldType.EMAIL)}
+                      data-selected={selectedField === FieldType.EMAIL ? true : undefined}
                    >
-                      <CardContent className="p-4">
-                        <p
-                          className={cn(
-                            'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
-                          )}
-                        >
-                          <CalendarDays className="h-4 w-4" />
-                          <Trans>Date</Trans>
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </button>
+                      <Card
+                        className={cn(
+                          'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
+                          // selectedSignerStyles.borderClass,
+                        )}
+                      >
+                        <CardContent className="p-4">
+                          <p
+                            className={cn(
+                              'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                            )}
+                          >
+                            <Mail className="h-4 w-4" />
+                            <Trans>Email</Trans>
+                          </p>
+                        </CardContent>
+                      </Card>
+                    </button>

-                  <button
-                    type="button"
-                    className="group h-full w-full"
-                    onClick={() => setSelectedField(FieldType.TEXT)}
-                    onMouseDown={() => setSelectedField(FieldType.TEXT)}
-                    data-selected={selectedField === FieldType.TEXT ? true : undefined}
-                  >
-                    <Card
-                      className={cn(
-                        'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                        // selectedSignerStyles.borderClass,
-                      )}
+                    <button
+                      type="button"
+                      className="group h-full w-full"
+                      onClick={() => setSelectedField(FieldType.NAME)}
+                      onMouseDown={() => setSelectedField(FieldType.NAME)}
+                      data-selected={selectedField === FieldType.NAME ? true : undefined}
                    >
-                      <CardContent className="p-4">
-                        <p
-                          className={cn(
-                            'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
-                          )}
-                        >
-                          <Type className="h-4 w-4" />
-                          <Trans>Text</Trans>
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </button>
+                      <Card
+                        className={cn(
+                          'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
+                          // selectedSignerStyles.borderClass,
+                        )}
+                      >
+                        <CardContent className="p-4">
+                          <p
+                            className={cn(
+                              'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                            )}
+                          >
+                            <User className="h-4 w-4" />
+                            <Trans>Name</Trans>
+                          </p>
+                        </CardContent>
+                      </Card>
+                    </button>

-                  <button
-                    type="button"
-                    className="group h-full w-full"
-                    onClick={() => setSelectedField(FieldType.NUMBER)}
-                    onMouseDown={() => setSelectedField(FieldType.NUMBER)}
-                    data-selected={selectedField === FieldType.NUMBER ? true : undefined}
-                  >
-                    <Card
-                      className={cn(
-                        'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                        // selectedSignerStyles.borderClass,
-                      )}
+                    <button
+                      type="button"
+                      className="group h-full w-full"
+                      onClick={() => setSelectedField(FieldType.DATE)}
+                      onMouseDown={() => setSelectedField(FieldType.DATE)}
+                      data-selected={selectedField === FieldType.DATE ? true : undefined}
                    >
-                      <CardContent className="p-4">
-                        <p
-                          className={cn(
-                            'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
-                          )}
-                        >
-                          <Hash className="h-4 w-4" />
-                          <Trans>Number</Trans>
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </button>
+                      <Card
+                        className={cn(
+                          'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
+                          // selectedSignerStyles.borderClass,
+                        )}
+                      >
+                        <CardContent className="p-4">
+                          <p
+                            className={cn(
+                              'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                            )}
+                          >
+                            <CalendarDays className="h-4 w-4" />
+                            <Trans>Date</Trans>
+                          </p>
+                        </CardContent>
+                      </Card>
+                    </button>

-                  <button
-                    type="button"
-                    className="group h-full w-full"
-                    onClick={() => setSelectedField(FieldType.RADIO)}
-                    onMouseDown={() => setSelectedField(FieldType.RADIO)}
-                    data-selected={selectedField === FieldType.RADIO ? true : undefined}
-                  >
-                    <Card
-                      className={cn(
-                        'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                        // selectedSignerStyles.borderClass,
-                      )}
+                    <button
+                      type="button"
+                      className="group h-full w-full"
+                      onClick={() => setSelectedField(FieldType.TEXT)}
+                      onMouseDown={() => setSelectedField(FieldType.TEXT)}
+                      data-selected={selectedField === FieldType.TEXT ? true : undefined}
                    >
-                      <CardContent className="p-4">
-                        <p
-                          className={cn(
-                            'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
-                          )}
-                        >
-                          <Disc className="h-4 w-4" />
-                          <Trans>Radio</Trans>
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </button>
+                      <Card
+                        className={cn(
+                          'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
+                          // selectedSignerStyles.borderClass,
+                        )}
+                      >
+                        <CardContent className="p-4">
+                          <p
+                            className={cn(
+                              'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                            )}
+                          >
+                            <Type className="h-4 w-4" />
+                            <Trans>Text</Trans>
+                          </p>
+                        </CardContent>
+                      </Card>
+                    </button>

-                  <button
-                    type="button"
-                    className="group h-full w-full"
-                    onClick={() => setSelectedField(FieldType.CHECKBOX)}
-                    onMouseDown={() => setSelectedField(FieldType.CHECKBOX)}
-                    data-selected={selectedField === FieldType.CHECKBOX ? true : undefined}
-                  >
-                    <Card
-                      className={cn(
-                        'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                        // selectedSignerStyles.borderClass,
-                      )}
+                    <button
+                      type="button"
+                      className="group h-full w-full"
+                      onClick={() => setSelectedField(FieldType.NUMBER)}
+                      onMouseDown={() => setSelectedField(FieldType.NUMBER)}
+                      data-selected={selectedField === FieldType.NUMBER ? true : undefined}
                    >
-                      <CardContent className="p-4">
-                        <p
-                          className={cn(
-                            'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
-                          )}
-                        >
-                          <CheckSquare className="h-4 w-4" />
-                          Checkbox
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </button>
+                      <Card
+                        className={cn(
+                          'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
+                          // selectedSignerStyles.borderClass,
+                        )}
+                      >
+                        <CardContent className="p-4">
+                          <p
+                            className={cn(
+                              'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                            )}
+                          >
+                            <Hash className="h-4 w-4" />
+                            <Trans>Number</Trans>
+                          </p>
+                        </CardContent>
+                      </Card>
+                    </button>

-                  <button
-                    type="button"
-                    className="group h-full w-full"
-                    onClick={() => setSelectedField(FieldType.DROPDOWN)}
-                    onMouseDown={() => setSelectedField(FieldType.DROPDOWN)}
-                    data-selected={selectedField === FieldType.DROPDOWN ? true : undefined}
-                  >
-                    <Card
-                      className={cn(
-                        'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
-                        // selectedSignerStyles.borderClass,
-                      )}
+                    <button
+                      type="button"
+                      className="group h-full w-full"
+                      onClick={() => setSelectedField(FieldType.RADIO)}
+                      onMouseDown={() => setSelectedField(FieldType.RADIO)}
+                      data-selected={selectedField === FieldType.RADIO ? true : undefined}
                    >
-                      <CardContent className="p-4">
-                        <p
-                          className={cn(
-                            'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
-                          )}
-                        >
-                          <ChevronDown className="h-4 w-4" />
-                          <Trans>Dropdown</Trans>
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </button>
-                </fieldset>
-              </div>
+                      <Card
+                        className={cn(
+                          'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
+                          // selectedSignerStyles.borderClass,
+                        )}
+                      >
+                        <CardContent className="p-4">
+                          <p
+                            className={cn(
+                              'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                            )}
+                          >
+                            <Disc className="h-4 w-4" />
+                            Radio
+                          </p>
+                        </CardContent>
+                      </Card>
+                    </button>
+
+                    <button
+                      type="button"
+                      className="group h-full w-full"
+                      onClick={() => setSelectedField(FieldType.CHECKBOX)}
+                      onMouseDown={() => setSelectedField(FieldType.CHECKBOX)}
+                      data-selected={selectedField === FieldType.CHECKBOX ? true : undefined}
+                    >
+                      <Card
+                        className={cn(
+                          'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
+                          // selectedSignerStyles.borderClass,
+                        )}
+                      >
+                        <CardContent className="p-4">
+                          <p
+                            className={cn(
+                              'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                            )}
+                          >
+                            <CheckSquare className="h-4 w-4" />
+                            {/* Not translated on purpose. */}
+                            Checkbox
+                          </p>
+                        </CardContent>
+                      </Card>
+                    </button>
+
+                    <button
+                      type="button"
+                      className="group h-full w-full"
+                      onClick={() => setSelectedField(FieldType.DROPDOWN)}
+                      onMouseDown={() => setSelectedField(FieldType.DROPDOWN)}
+                      data-selected={selectedField === FieldType.DROPDOWN ? true : undefined}
+                    >
+                      <Card
+                        className={cn(
+                          'flex h-full w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
+                          // selectedSignerStyles.borderClass,
+                        )}
+                      >
+                        <CardContent className="p-4">
+                          <p
+                            className={cn(
+                              'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
+                            )}
+                          >
+                            <ChevronDown className="h-4 w-4" />
+                            <Trans>Dropdown</Trans>
+                          </p>
+                        </CardContent>
+                      </Card>
+                    </button>
+                  </fieldset>
+                </div>
+              </Form>
+
+              {hasErrors && (
+                <div className="mt-4">
+                  <ul>
+                    <li className="text-sm text-red-500">
+                      <Trans>
+                        To proceed further, please set at least one value for the{' '}
+                        {emptyCheckboxFields.length > 0
+                          ? 'Checkbox'
+                          : emptyRadioFields.length > 0
+                            ? 'Radio'
+                            : 'Select'}{' '}
+                        field.
+                      </Trans>
+                    </li>
+                  </ul>
+                </div>
+              )}
+
+              <DocumentFlowFormContainerFooter>
+                <DocumentFlowFormContainerStep step={currentStep} maxStep={totalSteps} />
+
+                <DocumentFlowFormContainerActions
+                  loading={form.formState.isSubmitting}
+                  disabled={form.formState.isSubmitting}
+                  goNextLabel={msg`Save Template`}
+                  disableNextStep={hasErrors}
+                  onGoBackClick={() => {
+                    previousStep();
+                    remove();
+                  }}
+                  onGoNextClick={() => void onFormSubmit()}
+                />
+              </DocumentFlowFormContainerFooter>
            </div>
          </DocumentFlowFormContainerContent>
-
-          {hasErrors && (
-            <div className="mt-4">
-              <ul>
-                <li className="text-sm text-red-500">
-                  <Trans>
-                    To proceed further, please set at least one value for the{' '}
-                    {emptyCheckboxFields.length > 0
-                      ? 'Checkbox'
-                      : emptyRadioFields.length > 0
-                      ? 'Radio'
-                      : 'Select'}{' '}
-                    field.
-                  </Trans>
-                </li>
-              </ul>
-            </div>
-          )}
-
-          <DocumentFlowFormContainerFooter>
-            <DocumentFlowFormContainerStep step={currentStep} maxStep={totalSteps} />
-
-            <DocumentFlowFormContainerActions
-              loading={isSubmitting}
-              disabled={isSubmitting}
-              goNextLabel={msg`Save Template`}
-              disableNextStep={hasErrors}
-              onGoBackClick={() => {
-                previousStep();
-                remove();
-              }}
-              onGoNextClick={() => void onFormSubmit()}
-            />
-          </DocumentFlowFormContainerFooter>
        </>
      )}
    </>
--- a/packages/ui/primitives/template-flow/add-template-fields.types.ts
+++ b/packages/ui/primitives/template-flow/add-template-fields.types.ts
@ -20,6 +20,7 @@ export const ZAddTemplateFieldsFormSchema = z.object({
      fieldMeta: ZFieldMetaSchema,
    }),
  ),
+  typedSignatureEnabled: z.boolean(),
 });

 export type TAddTemplateFieldsFormSchema = z.infer<typeof ZAddTemplateFieldsFormSchema>;
--- a/packages/ui/styles/theme.css
+++ b/packages/ui/styles/theme.css
@ -138,7 +138,7 @@
    --new-surface-white: 0, 0%, 91%;
  }

-  .dark {
+  .dark:not(.dark-mode-disabled) {
    --background: 0 0% 14.9%;
    --foreground: 0 0% 97%;