Merge branch 'main' into feat/save-data-on-blur

packages/api/v1/implementation.ts

@@ -16,6 +16,7 @@ import { getDocumentById } from '@documenso/lib/server-only/document/get-documen
 import { resendDocument } from '@documenso/lib/server-only/document/resend-document';
 import { sendDocument } from '@documenso/lib/server-only/document/send-document';
 import { updateDocument } from '@documenso/lib/server-only/document/update-document';
+import { updateDocumentSettings } from '@documenso/lib/server-only/document/update-document-settings';
 import { deleteField } from '@documenso/lib/server-only/field/delete-field';
 import { getFieldById } from '@documenso/lib/server-only/field/get-field-by-id';
 import { updateField } from '@documenso/lib/server-only/field/update-field';
@@ -295,6 +296,16 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
         requestMetadata: extractNextApiRequestMetadata(args.req),
       });
 
+      if (body.authOptions) {
+        await updateDocumentSettings({
+          documentId: document.id,
+          userId: user.id,
+          teamId: team?.id,
+          data: body.authOptions,
+          requestMetadata: extractNextApiRequestMetadata(args.req),
+        });
+      }
+
       const recipients = await setRecipientsForDocument({
         userId: user.id,
         teamId: team?.id,
@@ -465,6 +476,16 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
       });
     }
 
+    if (body.authOptions) {
+      await updateDocumentSettings({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team?.id,
+        data: body.authOptions,
+        requestMetadata: extractNextApiRequestMetadata(args.req),
+      });
+    }
+
     return {
       status: 200,
       body: {
@@ -547,6 +568,16 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
       });
     }
 
+    if (body.authOptions) {
+      await updateDocumentSettings({
+        documentId: document.id,
+        userId: user.id,
+        teamId: team?.id,
+        data: body.authOptions,
+        requestMetadata: extractNextApiRequestMetadata(args.req),
+      });
+    }
+
     return {
       status: 200,
       body: {
@@ -682,7 +713,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
 
   createRecipient: authenticatedMiddleware(async (args, user, team) => {
     const { id: documentId } = args.params;
-    const { name, email, role } = args.body;
+    const { name, email, role, authOptions } = args.body;
 
     const document = await getDocumentById({
       id: Number(documentId),
@@ -736,6 +767,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
             email,
             name,
             role,
+            actionAuth: authOptions?.actionAuth ?? null,
           },
         ],
         requestMetadata: extractNextApiRequestMetadata(args.req),
@@ -767,7 +799,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
 
   updateRecipient: authenticatedMiddleware(async (args, user, team) => {
     const { id: documentId, recipientId } = args.params;
-    const { name, email, role } = args.body;
+    const { name, email, role, authOptions } = args.body;
 
     const document = await getDocumentById({
       id: Number(documentId),
@@ -801,6 +833,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
       email,
       name,
       role,
+      actionAuth: authOptions?.actionAuth,
       requestMetadata: extractNextApiRequestMetadata(args.req),
     }).catch(() => null);
 

packages/api/v1/schema.ts

@@ -5,6 +5,11 @@ import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/const
 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 {
+  ZDocumentAccessAuthTypesSchema,
+  ZDocumentActionAuthTypesSchema,
+  ZRecipientActionAuthTypesSchema,
+} from '@documenso/lib/types/document-auth';
 import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import {
   DocumentDataType,
@@ -120,6 +125,12 @@ export const ZCreateDocumentMutationSchema = z.object({
       redirectUrl: z.string(),
     })
     .partial(),
+  authOptions: z
+    .object({
+      globalAccessAuth: ZDocumentAccessAuthTypesSchema.optional(),
+      globalActionAuth: ZDocumentActionAuthTypesSchema.optional(),
+    })
+    .optional(),
   formValues: z.record(z.string(), z.union([z.string(), z.boolean(), z.number()])).optional(),
 });
 
@@ -166,6 +177,12 @@ export const ZCreateDocumentFromTemplateMutationSchema = z.object({
     })
     .partial()
     .optional(),
+  authOptions: z
+    .object({
+      globalAccessAuth: ZDocumentAccessAuthTypesSchema.optional(),
+      globalActionAuth: ZDocumentActionAuthTypesSchema.optional(),
+    })
+    .optional(),
   formValues: z.record(z.string(), z.union([z.string(), z.boolean(), z.number()])).optional(),
 });
 
@@ -223,6 +240,12 @@ export const ZGenerateDocumentFromTemplateMutationSchema = z.object({
     })
     .partial()
     .optional(),
+  authOptions: z
+    .object({
+      globalAccessAuth: ZDocumentAccessAuthTypesSchema.optional(),
+      globalActionAuth: ZDocumentActionAuthTypesSchema.optional(),
+    })
+    .optional(),
   formValues: z.record(z.string(), z.union([z.string(), z.boolean(), z.number()])).optional(),
 });
 
@@ -254,6 +277,11 @@ export const ZCreateRecipientMutationSchema = z.object({
   name: z.string().min(1),
   email: z.string().email().min(1),
   role: z.nativeEnum(RecipientRole).optional().default(RecipientRole.SIGNER),
+  authOptions: z
+    .object({
+      actionAuth: ZRecipientActionAuthTypesSchema.optional(),
+    })
+    .optional(),
 });
 
 /**

packages/lib/client-only/providers/i18n.client.tsx

@@ -5,19 +5,24 @@ import { useState } from 'react';
 import { type Messages, setupI18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
 
+import type { I18nLocaleData } from '../../constants/i18n';
+
 export function I18nClientProvider({
   children,
-  initialLocale,
+  initialLocaleData,
   initialMessages,
 }: {
   children: React.ReactNode;
-  initialLocale: string;
+  initialLocaleData: I18nLocaleData;
   initialMessages: Messages;
 }) {
+  const { lang, locales } = initialLocaleData;
+
   const [i18n] = useState(() => {
     return setupI18n({
-      locale: initialLocale,
-      messages: { [initialLocale]: initialMessages },
+      locale: lang,
+      locales: locales,
+      messages: { [lang]: initialMessages },
     });
   });
 

packages/lib/client-only/providers/i18n.server.tsx

@@ -1,26 +1,26 @@
 import 'server-only';
 
-import { cookies } from 'next/headers';
+import { cookies, headers } from 'next/headers';
 
 import type { I18n, Messages } from '@lingui/core';
 import { setupI18n } from '@lingui/core';
 import { setI18n } from '@lingui/react/server';
 
-import { IS_APP_WEB, IS_APP_WEB_I18N_ENABLED } from '../../constants/app';
+import { IS_APP_WEB } from '../../constants/app';
 import { SUPPORTED_LANGUAGE_CODES } from '../../constants/i18n';
-import { extractSupportedLanguage } from '../../utils/i18n';
+import { extractLocaleData } from '../../utils/i18n';
 
-type SupportedLocales = (typeof SUPPORTED_LANGUAGE_CODES)[number];
+type SupportedLanguages = (typeof SUPPORTED_LANGUAGE_CODES)[number];
 
-async function loadCatalog(locale: SupportedLocales): Promise<{
+async function loadCatalog(lang: SupportedLanguages): Promise<{
   [k: string]: Messages;
 }> {
   const { messages } = await import(
-    `../../translations/${locale}/${IS_APP_WEB ? 'web' : 'marketing'}.js`
+    `../../translations/${lang}/${IS_APP_WEB ? 'web' : 'marketing'}.js`
   );
 
   return {
-    [locale]: messages,
+    [lang]: messages,
   };
 }
 
@@ -31,18 +31,18 @@ export const allMessages = catalogs.reduce((acc, oneCatalog) => {
   return { ...acc, ...oneCatalog };
 }, {});
 
-type AllI18nInstances = { [K in SupportedLocales]: I18n };
+type AllI18nInstances = { [K in SupportedLanguages]: I18n };
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-export const allI18nInstances = SUPPORTED_LANGUAGE_CODES.reduce((acc, locale) => {
-  const messages = allMessages[locale] ?? {};
+export const allI18nInstances = SUPPORTED_LANGUAGE_CODES.reduce((acc, lang) => {
+  const messages = allMessages[lang] ?? {};
 
   const i18n = setupI18n({
-    locale,
-    messages: { [locale]: messages },
+    locale: lang,
+    messages: { [lang]: messages },
   });
 
-  return { ...acc, [locale]: i18n };
+  return { ...acc, [lang]: i18n };
 }, {}) as AllI18nInstances;
 
 /**
@@ -50,24 +50,23 @@ export const allI18nInstances = SUPPORTED_LANGUAGE_CODES.reduce((acc, locale) =>
  *
  * https://lingui.dev/tutorials/react-rsc#pages-layouts-and-lingui
  */
-export const setupI18nSSR = (overrideLang?: SupportedLocales) => {
-  let lang =
-    overrideLang ||
-    extractSupportedLanguage({
-      cookies: cookies(),
-    });
-
-  // Override web app to be English.
-  if (!IS_APP_WEB_I18N_ENABLED && IS_APP_WEB) {
-    lang = 'en';
-  }
+export const setupI18nSSR = () => {
+  const { lang, locales } = extractLocaleData({
+    cookies: cookies(),
+    headers: headers(),
+  });
 
   // Get and set a ready-made i18n instance for the given language.
   const i18n = allI18nInstances[lang];
+
+  // Reactivate the i18n instance with the locale for date and number formatting.
+  i18n.activate(lang, locales);
+
   setI18n(i18n);
 
   return {
     lang,
+    locales,
     i18n,
   };
 };

packages/lib/client-only/providers/locale.tsx

@@ -1,37 +0,0 @@
-'use client';
-
-import { createContext, useContext } from 'react';
-
-export type LocaleContextValue = {
-  locale: string;
-};
-
-export const LocaleContext = createContext<LocaleContextValue | null>(null);
-
-export const useLocale = () => {
-  const context = useContext(LocaleContext);
-
-  if (!context) {
-    throw new Error('useLocale must be used within a LocaleProvider');
-  }
-
-  return context;
-};
-
-export function LocaleProvider({
-  children,
-  locale,
-}: {
-  children: React.ReactNode;
-  locale: string;
-}) {
-  return (
-    <LocaleContext.Provider
-      value={{
-        locale: locale,
-      }}
-    >
-      {children}
-    </LocaleContext.Provider>
-  );
-}

packages/lib/constants/app.ts

@@ -1,15 +1,16 @@
 import { env } from 'next-runtime-env';
 
-export const IS_APP_WEB_I18N_ENABLED = false;
 export const APP_DOCUMENT_UPLOAD_SIZE_LIMIT =
   Number(process.env.NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT) || 50;
 
 export const NEXT_PUBLIC_WEBAPP_URL = () => env('NEXT_PUBLIC_WEBAPP_URL');
 export const NEXT_PUBLIC_MARKETING_URL = () => env('NEXT_PUBLIC_MARKETING_URL');
+export const NEXT_PRIVATE_INTERNAL_WEBAPP_URL = process.env.NEXT_PRIVATE_INTERNAL_WEBAPP_URL ?? NEXT_PUBLIC_WEBAPP_URL();
 
 export const IS_APP_MARKETING = process.env.NEXT_PUBLIC_PROJECT === 'marketing';
 export const IS_APP_WEB = process.env.NEXT_PUBLIC_PROJECT === 'web';
 export const IS_BILLING_ENABLED = () => env('NEXT_PUBLIC_FEATURE_BILLING_ENABLED') === 'true';
+export const IS_APP_WEB_I18N_ENABLED = true;
 
 export const APP_FOLDER = () => (IS_APP_MARKETING ? 'marketing' : 'web');
 

packages/lib/constants/i18n.ts

@@ -6,9 +6,22 @@ export const ZSupportedLanguageCodeSchema = z.enum(SUPPORTED_LANGUAGE_CODES).cat
 
 export type SupportedLanguageCodes = (typeof SUPPORTED_LANGUAGE_CODES)[number];
 
+export type I18nLocaleData = {
+  /**
+   * The supported language extracted from the locale.
+   */
+  lang: SupportedLanguageCodes;
+
+  /**
+   * The preferred locales.
+   */
+  locales: string[];
+};
+
 export const APP_I18N_OPTIONS = {
   supportedLangs: SUPPORTED_LANGUAGE_CODES,
   sourceLang: 'en',
+  defaultLocale: 'en-US',
 } as const;
 
 type SupportedLanguage = {

packages/lib/jobs/client/local.ts

@@ -6,7 +6,7 @@ import { json } from 'micro';
 import { prisma } from '@documenso/prisma';
 import { BackgroundJobStatus, Prisma } from '@documenso/prisma/client';
 
-import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
+import { NEXT_PRIVATE_INTERNAL_WEBAPP_URL } from '../../constants/app';
 import { sign } from '../../server-only/crypto/sign';
 import { verify } from '../../server-only/crypto/verify';
 import {
@@ -229,7 +229,7 @@ export class LocalJobProvider extends BaseJobProvider {
   }) {
     const { jobId, jobDefinitionId, data, isRetry } = options;
 
-    const endpoint = `${NEXT_PUBLIC_WEBAPP_URL()}/api/jobs/${jobDefinitionId}/${jobId}`;
+    const endpoint = `${NEXT_PRIVATE_INTERNAL_WEBAPP_URL}/api/jobs/${jobDefinitionId}/${jobId}`;
     const signature = sign(data);
 
     const headers: Record<string, string> = {

packages/lib/server-only/feature-flags/all.ts

@@ -5,7 +5,7 @@ import { getToken } from 'next-auth/jwt';
 import { LOCAL_FEATURE_FLAGS } from '@documenso/lib/constants/feature-flags';
 import PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-post-hog-server-client';
 
-import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
+import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL, NEXT_PRIVATE_INTERNAL_WEBAPP_URL } from '../../constants/app';
 import { extractDistinctUserId, mapJwtToFlagProperties } from './get';
 
 /**
@@ -46,6 +46,10 @@ export default async function handlerFeatureFlagAll(req: Request) {
     if (origin.startsWith(NEXT_PUBLIC_MARKETING_URL() ?? 'http://localhost:3001')) {
       res.headers.set('Access-Control-Allow-Origin', origin);
     }
+
+    if (origin.startsWith(NEXT_PRIVATE_INTERNAL_WEBAPP_URL ?? 'http://localhost:3000')) {
+      res.headers.set('Access-Control-Allow-Origin', origin);
+    }
   }
 
   return res;

packages/lib/server-only/feature-flags/get.ts

@@ -7,7 +7,7 @@ import { getToken } from 'next-auth/jwt';
 import { LOCAL_FEATURE_FLAGS, extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
 import PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-post-hog-server-client';
 
-import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
+import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL, NEXT_PRIVATE_INTERNAL_WEBAPP_URL } from '../../constants/app';
 
 /**
  * Evaluate a single feature flag based on the current user if possible.
@@ -67,6 +67,10 @@ export default async function handleFeatureFlagGet(req: Request) {
     if (origin.startsWith(NEXT_PUBLIC_MARKETING_URL() ?? 'http://localhost:3001')) {
       res.headers.set('Access-Control-Allow-Origin', origin);
     }
+    
+    if (origin.startsWith(NEXT_PRIVATE_INTERNAL_WEBAPP_URL ?? 'http://localhost:3000')) {
+      res.headers.set('Access-Control-Allow-Origin', origin);
+    }
   }
 
   return res;

packages/lib/server-only/field/set-fields-for-template.ts

@@ -107,7 +107,10 @@ export const setFieldsForTemplate = async ({
         }
       }
 
-      if (field.type === FieldType.CHECKBOX && field.fieldMeta) {
+      if (field.type === FieldType.CHECKBOX) {
+        if (!field.fieldMeta) {
+          throw new Error('Checkbox field is missing required metadata');
+        }
         const checkboxFieldParsedMeta = ZCheckboxFieldMeta.parse(field.fieldMeta);
         const errors = validateCheckboxField(
           checkboxFieldParsedMeta?.values?.map((item) => item.value) ?? [],
@@ -118,7 +121,10 @@ export const setFieldsForTemplate = async ({
         }
       }
 
-      if (field.type === FieldType.RADIO && field.fieldMeta) {
+      if (field.type === FieldType.RADIO) {
+        if (!field.fieldMeta) {
+          throw new Error('Radio field is missing required metadata');
+        }
         const radioFieldParsedMeta = ZRadioFieldMeta.parse(field.fieldMeta);
         const checkedRadioFieldValue = radioFieldParsedMeta.values?.find(
           (option) => option.checked,
@@ -129,7 +135,10 @@ export const setFieldsForTemplate = async ({
         }
       }
 
-      if (field.type === FieldType.DROPDOWN && field.fieldMeta) {
+      if (field.type === FieldType.DROPDOWN) {
+        if (!field.fieldMeta) {
+          throw new Error('Dropdown field is missing required metadata');
+        }
         const dropdownFieldParsedMeta = ZDropdownFieldMeta.parse(field.fieldMeta);
         const errors = validateDropdownField(undefined, dropdownFieldParsedMeta);
         if (errors.length > 0) {

packages/lib/server-only/headers/get-locale.tsx

@@ -1,11 +0,0 @@
-import { headers } from 'next/headers';
-
-export const getLocale = () => {
-  const headerItems = headers();
-
-  const locales = headerItems.get('accept-language') ?? 'en-US';
-
-  const [locale] = locales.split(',');
-
-  return locale;
-};

packages/lib/server-only/i18n/switch-i18n-language.ts

@@ -4,5 +4,5 @@ import { cookies } from 'next/headers';
 
 // eslint-disable-next-line @typescript-eslint/require-await
 export const switchI18NLanguage = async (lang: string) => {
-  cookies().set('i18n', lang);
+  cookies().set('language', lang);
 };

packages/lib/server-only/recipient/update-recipient.ts

@@ -1,9 +1,16 @@
+import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
 import { prisma } from '@documenso/prisma';
 import type { RecipientRole, Team } from '@documenso/prisma/client';
 
+import { AppError, AppErrorCode } from '../../errors/app-error';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
+import {
+  type TRecipientActionAuthTypes,
+  ZRecipientAuthOptionsSchema,
+} from '../../types/document-auth';
 import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { createDocumentAuditLogData, diffRecipientChanges } from '../../utils/document-audit-logs';
+import { createRecipientAuthOptions } from '../../utils/document-auth';
 
 export type UpdateRecipientOptions = {
   documentId: number;
@@ -11,6 +18,7 @@ export type UpdateRecipientOptions = {
   email?: string;
   name?: string;
   role?: RecipientRole;
+  actionAuth?: TRecipientActionAuthTypes | null;
   userId: number;
   teamId?: number;
   requestMetadata?: RequestMetadata;
@@ -22,6 +30,7 @@ export const updateRecipient = async ({
   email,
   name,
   role,
+  actionAuth,
   userId,
   teamId,
   requestMetadata,
@@ -48,6 +57,9 @@ export const updateRecipient = async ({
             }),
       },
     },
+    include: {
+      Document: true,
+    },
   });
 
   let team: Team | null = null;
@@ -75,6 +87,22 @@ export const updateRecipient = async ({
     throw new Error('Recipient not found');
   }
 
+  if (actionAuth) {
+    const isDocumentEnterprise = await isUserEnterprise({
+      userId,
+      teamId,
+    });
+
+    if (!isDocumentEnterprise) {
+      throw new AppError(
+        AppErrorCode.UNAUTHORIZED,
+        'You do not have permission to set the action auth',
+      );
+    }
+  }
+
+  const recipientAuthOptions = ZRecipientAuthOptionsSchema.parse(recipient.authOptions);
+
   const updatedRecipient = await prisma.$transaction(async (tx) => {
     const persisted = await prisma.recipient.update({
       where: {
@@ -84,6 +112,10 @@ export const updateRecipient = async ({
         email: email?.toLowerCase() ?? recipient.email,
         name: name ?? recipient.name,
         role: role ?? recipient.role,
+        authOptions: createRecipientAuthOptions({
+          accessAuth: recipientAuthOptions.accessAuth,
+          actionAuth: actionAuth ?? null,
+        }),
       },
     });
 

packages/lib/server-only/webhooks/trigger/trigger-webhook.ts

@@ -1,6 +1,6 @@
 import type { WebhookTriggerEvents } from '@documenso/prisma/client';
 
-import { NEXT_PUBLIC_WEBAPP_URL } from '../../../constants/app';
+import { NEXT_PRIVATE_INTERNAL_WEBAPP_URL } from '../../../constants/app';
 import { sign } from '../../crypto/sign';
 import { getAllWebhooksByEventTrigger } from '../get-all-webhooks-by-event-trigger';
 
@@ -29,7 +29,7 @@ export const triggerWebhook = async ({ event, data, userId, teamId }: TriggerWeb
     const signature = sign(body);
 
     await Promise.race([
-      fetch(`${NEXT_PUBLIC_WEBAPP_URL()}/api/webhook/trigger`, {
+      fetch(`${NEXT_PRIVATE_INTERNAL_WEBAPP_URL}/api/webhook/trigger`, {
         method: 'POST',
         headers: {
           'content-type': 'application/json',

packages/lib/translations/de/common.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: de\n"
 "Project-Id-Version: documenso-app\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2024-08-27 16:03\n"
+"PO-Revision-Date: 2024-09-05 06:04\n"
 "Last-Translator: \n"
 "Language-Team: German\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -116,7 +116,7 @@ msgid "Advanced Options"
 msgstr "Erweiterte Optionen"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:510
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:370
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:402
 msgid "Advanced settings"
 msgstr "Erweiterte Einstellungen"
 
@@ -140,7 +140,15 @@ msgstr "Genehmiger"
 msgid "Approving"
 msgstr "Genehmigung"
 
-#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:297
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:276
+msgid "Black"
+msgstr ""
+
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:290
+msgid "Blue"
+msgstr ""
+
+#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:287
 #: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:58
 msgid "Cancel"
 msgstr "Abbrechen"
@@ -167,7 +175,7 @@ msgid "Character Limit"
 msgstr "Zeichenbeschränkung"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:932
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:756
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:788
 msgid "Checkbox"
 msgstr "Checkbox"
 
@@ -179,7 +187,7 @@ msgstr "Checkbox-Werte"
 msgid "Clear filters"
 msgstr "Filter löschen"
 
-#: packages/ui/primitives/signature-pad/signature-pad.tsx:256
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:310
 msgid "Clear Signature"
 msgstr "Unterschrift löschen"
 
@@ -196,7 +204,7 @@ msgid "Configure Direct Recipient"
 msgstr "Direkten Empfänger konfigurieren"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:511
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:371
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:403
 msgid "Configure the {0} field"
 msgstr "Konfigurieren Sie das Feld {0}"
 
@@ -213,7 +221,7 @@ msgid "Custom Text"
 msgstr "Benutzerdefinierter Text"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:828
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:652
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:684
 msgid "Date"
 msgstr "Datum"
 
@@ -245,7 +253,7 @@ msgid "Drag & drop your PDF here."
 msgstr "Ziehen Sie Ihr PDF hierher."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:958
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:782
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:814
 msgid "Dropdown"
 msgstr "Dropdown"
 
@@ -257,7 +265,7 @@ msgstr "Dropdown-Optionen"
 #: packages/ui/primitives/document-flow/add-signature.tsx:272
 #: packages/ui/primitives/document-flow/add-signers.tsx:232
 #: packages/ui/primitives/document-flow/add-signers.tsx:239
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:600
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:632
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:210
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:217
 msgid "Email"
@@ -275,7 +283,7 @@ msgstr "Direktlink-Signierung aktivieren"
 msgid "Enter password"
 msgstr "Passwort eingeben"
 
-#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:226
+#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:216
 msgid "Error"
 msgstr "Fehler"
 
@@ -284,7 +292,7 @@ msgstr "Fehler"
 msgid "External ID"
 msgstr "Externe ID"
 
-#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:227
+#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:217
 msgid "Failed to save settings."
 msgstr "Einstellungen konnten nicht gespeichert werden."
 
@@ -312,6 +320,10 @@ msgstr "Globale Empfängerauthentifizierung"
 msgid "Go Back"
 msgstr "Zurück"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:297
+msgid "Green"
+msgstr ""
+
 #: packages/lib/constants/recipient-roles.ts:72
 msgid "I am a signer of this document"
 msgstr "Ich bin ein Unterzeichner dieses Dokuments"
@@ -367,7 +379,7 @@ msgstr "Min"
 #: packages/ui/primitives/document-flow/add-fields.tsx:802
 #: packages/ui/primitives/document-flow/add-signature.tsx:298
 #: packages/ui/primitives/document-flow/add-signers.tsx:265
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:626
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:658
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:245
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:251
 msgid "Name"
@@ -386,12 +398,12 @@ msgid "Needs to view"
 msgstr "Muss sehen"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:613
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:465
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:497
 msgid "No recipient matching this description was found."
 msgstr "Kein passender Empfänger mit dieser Beschreibung gefunden."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:629
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:481
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:513
 msgid "No recipients with this role"
 msgstr "Keine Empfänger mit dieser Rolle"
 
@@ -416,7 +428,7 @@ msgid "No value found."
 msgstr "Kein Wert gefunden."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:880
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:704
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:736
 msgid "Number"
 msgstr "Nummer"
 
@@ -451,7 +463,7 @@ msgid "Placeholder"
 msgstr "Platzhalter"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:906
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:730
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:762
 msgid "Radio"
 msgstr "Radio"
 
@@ -477,6 +489,10 @@ msgstr "Erhält Kopie"
 msgid "Recipient action authentication"
 msgstr "Empfängeraktion Authentifizierung"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:283
+msgid "Red"
+msgstr ""
+
 #: packages/ui/primitives/document-flow/add-settings.tsx:298
 #: packages/ui/primitives/template-flow/add-template-settings.tsx:332
 msgid "Redirect URL"
@@ -498,14 +514,18 @@ msgstr "Pflichtfeld"
 msgid "Rows per page"
 msgstr "Zeilen pro Seite"
 
-#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:296
+#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:286
 msgid "Save"
 msgstr "Speichern"
 
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:798
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:848
 msgid "Save Template"
 msgstr "Vorlage speichern"
 
+#: packages/ui/components/common/language-switcher-dialog.tsx:34
+msgid "Search languages..."
+msgstr "Sprachen suchen..."
+
 #: packages/ui/primitives/document-flow/field-items-advanced-settings/dropdown-field.tsx:105
 msgid "Select"
 msgstr "Auswählen"
@@ -552,7 +572,7 @@ msgstr "Unterschreiben"
 #: packages/ui/primitives/document-flow/add-fields.tsx:724
 #: packages/ui/primitives/document-flow/add-signature.tsx:323
 #: packages/ui/primitives/document-flow/field-icon.tsx:52
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:548
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:580
 msgid "Signature"
 msgstr "Unterschrift"
 
@@ -598,7 +618,7 @@ msgid "Template title"
 msgstr "Vorlagentitel"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:854
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:678
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:710
 msgid "Text"
 msgstr "Text"
 
@@ -688,6 +708,7 @@ msgid "Title"
 msgstr "Titel"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:971
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:828
 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."
 
@@ -733,6 +754,10 @@ msgstr "Viewer"
 msgid "Viewing"
 msgstr "Viewing"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:280
+#~ msgid "White"
+#~ msgstr ""
+
 #: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:44
 msgid "You are about to send this document to the recipients. Are you sure you want to continue?"
 msgstr "Sie sind dabei, dieses Dokument an die Empfänger zu senden. Sind Sie sicher, dass Sie fortfahren möchten?"

packages/lib/translations/de/marketing.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: de\n"
 "Project-Id-Version: documenso-app\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2024-08-27 16:03\n"
+"PO-Revision-Date: 2024-09-05 06:04\n"
 "Last-Translator: \n"
 "Language-Team: German\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -424,6 +424,8 @@ msgstr ""
 #: apps/marketing/src/components/(marketing)/i18n-switcher.tsx:47
 msgid "Search languages..."
 msgstr ""
+#~ msgid "Search languages..."
+#~ msgstr "Sprachen suchen..."
 
 #: apps/marketing/src/app/(marketing)/pricing/page.tsx:109
 msgid "Securely. Our data centers are located in Frankfurt (Germany), giving us the best local privacy laws. We are very aware of the sensitive nature of our data and follow best practices to ensure the security and integrity of the data entrusted to us."

packages/lib/translations/en/common.po

@@ -111,7 +111,7 @@ msgid "Advanced Options"
 msgstr "Advanced Options"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:510
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:370
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:402
 msgid "Advanced settings"
 msgstr "Advanced settings"
 
@@ -135,7 +135,15 @@ msgstr "Approver"
 msgid "Approving"
 msgstr "Approving"
 
-#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:297
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:276
+msgid "Black"
+msgstr "Black"
+
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:290
+msgid "Blue"
+msgstr "Blue"
+
+#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:287
 #: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:58
 msgid "Cancel"
 msgstr "Cancel"
@@ -162,7 +170,7 @@ msgid "Character Limit"
 msgstr "Character Limit"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:932
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:756
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:788
 msgid "Checkbox"
 msgstr "Checkbox"
 
@@ -174,7 +182,7 @@ msgstr "Checkbox values"
 msgid "Clear filters"
 msgstr "Clear filters"
 
-#: packages/ui/primitives/signature-pad/signature-pad.tsx:256
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:310
 msgid "Clear Signature"
 msgstr "Clear Signature"
 
@@ -191,7 +199,7 @@ msgid "Configure Direct Recipient"
 msgstr "Configure Direct Recipient"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:511
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:371
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:403
 msgid "Configure the {0} field"
 msgstr "Configure the {0} field"
 
@@ -208,7 +216,7 @@ msgid "Custom Text"
 msgstr "Custom Text"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:828
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:652
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:684
 msgid "Date"
 msgstr "Date"
 
@@ -240,7 +248,7 @@ msgid "Drag & drop your PDF here."
 msgstr "Drag & drop your PDF here."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:958
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:782
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:814
 msgid "Dropdown"
 msgstr "Dropdown"
 
@@ -252,7 +260,7 @@ msgstr "Dropdown options"
 #: packages/ui/primitives/document-flow/add-signature.tsx:272
 #: packages/ui/primitives/document-flow/add-signers.tsx:232
 #: packages/ui/primitives/document-flow/add-signers.tsx:239
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:600
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:632
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:210
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:217
 msgid "Email"
@@ -270,7 +278,7 @@ msgstr "Enable Direct Link Signing"
 msgid "Enter password"
 msgstr "Enter password"
 
-#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:226
+#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:216
 msgid "Error"
 msgstr "Error"
 
@@ -279,7 +287,7 @@ msgstr "Error"
 msgid "External ID"
 msgstr "External ID"
 
-#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:227
+#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:217
 msgid "Failed to save settings."
 msgstr "Failed to save settings."
 
@@ -307,6 +315,10 @@ msgstr "Global recipient action authentication"
 msgid "Go Back"
 msgstr "Go Back"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:297
+msgid "Green"
+msgstr "Green"
+
 #: packages/lib/constants/recipient-roles.ts:72
 msgid "I am a signer of this document"
 msgstr "I am a signer of this document"
@@ -362,7 +374,7 @@ msgstr "Min"
 #: packages/ui/primitives/document-flow/add-fields.tsx:802
 #: packages/ui/primitives/document-flow/add-signature.tsx:298
 #: packages/ui/primitives/document-flow/add-signers.tsx:265
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:626
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:658
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:245
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:251
 msgid "Name"
@@ -381,12 +393,12 @@ msgid "Needs to view"
 msgstr "Needs to view"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:613
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:465
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:497
 msgid "No recipient matching this description was found."
 msgstr "No recipient matching this description was found."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:629
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:481
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:513
 msgid "No recipients with this role"
 msgstr "No recipients with this role"
 
@@ -411,7 +423,7 @@ msgid "No value found."
 msgstr "No value found."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:880
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:704
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:736
 msgid "Number"
 msgstr "Number"
 
@@ -446,7 +458,7 @@ msgid "Placeholder"
 msgstr "Placeholder"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:906
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:730
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:762
 msgid "Radio"
 msgstr "Radio"
 
@@ -472,6 +484,10 @@ msgstr "Receives copy"
 msgid "Recipient action authentication"
 msgstr "Recipient action authentication"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:283
+msgid "Red"
+msgstr "Red"
+
 #: packages/ui/primitives/document-flow/add-settings.tsx:298
 #: packages/ui/primitives/template-flow/add-template-settings.tsx:332
 msgid "Redirect URL"
@@ -493,14 +509,18 @@ msgstr "Required field"
 msgid "Rows per page"
 msgstr "Rows per page"
 
-#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:296
+#: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:286
 msgid "Save"
 msgstr "Save"
 
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:798
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:848
 msgid "Save Template"
 msgstr "Save Template"
 
+#: packages/ui/components/common/language-switcher-dialog.tsx:34
+msgid "Search languages..."
+msgstr "Search languages..."
+
 #: packages/ui/primitives/document-flow/field-items-advanced-settings/dropdown-field.tsx:105
 msgid "Select"
 msgstr "Select"
@@ -547,7 +567,7 @@ msgstr "Sign"
 #: packages/ui/primitives/document-flow/add-fields.tsx:724
 #: packages/ui/primitives/document-flow/add-signature.tsx:323
 #: packages/ui/primitives/document-flow/field-icon.tsx:52
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:548
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:580
 msgid "Signature"
 msgstr "Signature"
 
@@ -593,7 +613,7 @@ msgid "Template title"
 msgstr "Template title"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:854
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:678
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:710
 msgid "Text"
 msgstr "Text"
 
@@ -683,6 +703,7 @@ msgid "Title"
 msgstr "Title"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:971
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:828
 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."
 
@@ -728,6 +749,10 @@ msgstr "Viewer"
 msgid "Viewing"
 msgstr "Viewing"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:280
+#~ msgid "White"
+#~ msgstr "White"
+
 #: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:44
 msgid "You are about to send this document to the recipients. Are you sure you want to continue?"
 msgstr "You are about to send this document to the recipients. Are you sure you want to continue?"

packages/lib/translations/en/marketing.po

@@ -425,8 +425,8 @@ msgid "Save $60 or $120"
 msgstr "Save $60 or $120"
 
 #: apps/marketing/src/components/(marketing)/i18n-switcher.tsx:47
-msgid "Search languages..."
-msgstr "Search languages..."
+#~ msgid "Search languages..."
+#~ msgstr "Search languages..."
 
 #: apps/marketing/src/app/(marketing)/pricing/page.tsx:109
 msgid "Securely. Our data centers are located in Frankfurt (Germany), giving us the best local privacy laws. We are very aware of the sensitive nature of our data and follow best practices to ensure the security and integrity of the data entrusted to us."

packages/lib/utils/i18n.ts

@@ -2,8 +2,8 @@ import type { ReadonlyRequestCookies } from 'next/dist/server/web/spec-extension
 
 import type { I18n } from '@lingui/core';
 
-import { IS_APP_WEB } from '../constants/app';
-import type { SupportedLanguageCodes } from '../constants/i18n';
+import { IS_APP_WEB, IS_APP_WEB_I18N_ENABLED } from '../constants/app';
+import type { I18nLocaleData, SupportedLanguageCodes } from '../constants/i18n';
 import { APP_I18N_OPTIONS } from '../constants/i18n';
 
 export async function dynamicActivate(i18nInstance: I18n, locale: string) {
@@ -14,48 +14,58 @@ export async function dynamicActivate(i18nInstance: I18n, locale: string) {
   i18nInstance.loadAndActivate({ locale, messages });
 }
 
-/**
- * Extract the language if supported from the cookies header.
- *
- * Returns `null` if not supported or not found.
- */
-export const extractSupportedLanguageFromCookies = (
-  cookies: ReadonlyRequestCookies,
-): SupportedLanguageCodes | null => {
-  const preferredLanguage = cookies.get('i18n');
-
-  const foundSupportedLanguage = APP_I18N_OPTIONS.supportedLangs.find(
-    (lang): lang is SupportedLanguageCodes => lang === preferredLanguage?.value,
-  );
-
-  return foundSupportedLanguage || null;
-};
-
-/**
- * Extracts the language from the `accept-language` header.
- *
- * Returns `null` if not supported or not found.
- */
-export const extractSupportedLanguageFromHeaders = (
-  headers: Headers,
-): SupportedLanguageCodes | null => {
-  const locales = headers.get('accept-language') ?? '';
-
-  const [locale] = locales.split(',');
-
-  // Convert locale to language.
-  const [language] = locale.split('-');
+const parseLanguageFromLocale = (locale: string): SupportedLanguageCodes | null => {
+  const [language, _country] = locale.split('-');
 
   const foundSupportedLanguage = APP_I18N_OPTIONS.supportedLangs.find(
     (lang): lang is SupportedLanguageCodes => lang === language,
   );
 
-  return foundSupportedLanguage || null;
+  if (!foundSupportedLanguage) {
+    return null;
+  }
+
+  return foundSupportedLanguage;
 };
 
-type ExtractSupportedLanguageOptions = {
-  headers?: Headers;
-  cookies?: ReadonlyRequestCookies;
+/**
+ * Extract the language if supported from the cookies header.
+ *
+ * Returns `null` if not supported or not found.
+ */
+export const extractLocaleDataFromCookies = (
+  cookies: ReadonlyRequestCookies,
+): SupportedLanguageCodes | null => {
+  const preferredLocale = cookies.get('language')?.value || '';
+
+  const language = parseLanguageFromLocale(preferredLocale || '');
+
+  if (!language) {
+    return null;
+  }
+
+  return language;
+};
+
+/**
+ * Extracts the language from the `accept-language` header.
+ */
+export const extractLocaleDataFromHeaders = (
+  headers: Headers,
+): { lang: SupportedLanguageCodes | null; locales: string[] } => {
+  const headerLocales = (headers.get('accept-language') ?? '').split(',');
+
+  const language = parseLanguageFromLocale(headerLocales[0]);
+
+  return {
+    lang: language,
+    locales: [headerLocales[0]],
+  };
+};
+
+type ExtractLocaleDataOptions = {
+  headers: Headers;
+  cookies: ReadonlyRequestCookies;
 };
 
 /**
@@ -63,25 +73,25 @@ type ExtractSupportedLanguageOptions = {
  *
  * Will return the default fallback language if not found.
  */
-export const extractSupportedLanguage = ({
+export const extractLocaleData = ({
   headers,
   cookies,
-}: ExtractSupportedLanguageOptions): SupportedLanguageCodes => {
-  if (cookies) {
-    const langCookie = extractSupportedLanguageFromCookies(cookies);
+}: ExtractLocaleDataOptions): I18nLocaleData => {
+  let lang: SupportedLanguageCodes | null = extractLocaleDataFromCookies(cookies);
 
-    if (langCookie) {
-      return langCookie;
-    }
+  const langHeader = extractLocaleDataFromHeaders(headers);
+
+  if (!lang && langHeader?.lang) {
+    lang = langHeader.lang;
   }
 
-  if (headers) {
-    const langHeader = extractSupportedLanguageFromHeaders(headers);
-
-    if (langHeader) {
-      return langHeader;
-    }
+  // Override web app to be English.
+  if (!IS_APP_WEB_I18N_ENABLED && IS_APP_WEB) {
+    lang = 'en';
   }
 
-  return APP_I18N_OPTIONS.sourceLang;
+  return {
+    lang: lang || APP_I18N_OPTIONS.sourceLang,
+    locales: langHeader.locales,
+  };
 };

packages/signing/transports/local-cert.ts

@@ -28,9 +28,18 @@ export const signWithLocalCert = async ({ pdf }: SignWithLocalCertOptions) => {
   }
 
   if (!cert) {
-    cert = Buffer.from(
-      fs.readFileSync(process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH || './example/cert.p12'),
-    );
+    let certPath = process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH || '/opt/documenso/cert.p12';
+
+    // We don't want to make the development server suddenly crash when using the `dx` script
+    // so we retain this when NODE_ENV isn't set to production which it should be in most production
+    // deployments.
+    //
+    // Our docker image automatically sets this so it shouldn't be an issue for self-hosters.
+    if (process.env.NODE_ENV !== 'production') {
+      certPath = process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH || './example/cert.p12';
+    }
+
+    cert = Buffer.from(fs.readFileSync(certPath));
   }
 
   const signature = signWithP12({

packages/ui/components/call-to-action.tsx

@@ -0,0 +1,35 @@
+import Link from 'next/link';
+
+import { Button } from '../primitives/button';
+import { Card, CardContent } from '../primitives/card';
+
+type CallToActionProps = {
+  className?: string;
+  utmSource?: string;
+};
+
+export const CallToAction = ({ className, utmSource = 'generic-cta' }: CallToActionProps) => {
+  return (
+    <Card spotlight className={className}>
+      <CardContent className="flex flex-col items-center justify-center p-12">
+        <h2 className="text-center text-2xl font-bold">Looking for the managed solution?</h2>
+
+        <p className="text-muted-foreground mt-4 max-w-[55ch] text-center leading-normal">
+          You can get started with Documenso in minutes. We handle the infrastructure, so you can
+          focus on signing documents.
+        </p>
+
+        <Button
+          className="focus-visible:ring-ring ring-offset-background bg-primary text-primary-foreground hover:bg-primary/90text-sm mt-8 inline-flex items-center justify-center rounded-full border font-medium no-underline transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+          variant="default"
+          size="lg"
+          asChild
+        >
+          <Link href={`https://app.documenso.com/signup?utm_source=${utmSource}`} target="_blank">
+            Get started
+          </Link>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};

packages/ui/components/common/language-switcher-dialog.tsx

@@ -0,0 +1,57 @@
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { CheckIcon } from 'lucide-react';
+
+import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
+import { switchI18NLanguage } from '@documenso/lib/server-only/i18n/switch-i18n-language';
+import { dynamicActivate } from '@documenso/lib/utils/i18n';
+import { cn } from '@documenso/ui/lib/utils';
+import {
+  CommandDialog,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@documenso/ui/primitives/command';
+
+type LanguageSwitcherDialogProps = {
+  open: boolean;
+  setOpen: (_open: boolean) => void;
+};
+
+export const LanguageSwitcherDialog = ({ open, setOpen }: LanguageSwitcherDialogProps) => {
+  const { i18n, _ } = useLingui();
+
+  const setLanguage = async (lang: string) => {
+    setOpen(false);
+
+    await dynamicActivate(i18n, lang);
+    await switchI18NLanguage(lang);
+  };
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandInput placeholder={_(msg`Search languages...`)} />
+
+      <CommandList>
+        <CommandGroup>
+          {Object.values(SUPPORTED_LANGUAGES).map((language) => (
+            <CommandItem
+              key={language.short}
+              value={language.full}
+              onSelect={async () => setLanguage(language.short)}
+            >
+              <CheckIcon
+                className={cn(
+                  'mr-2 h-4 w-4',
+                  i18n.locale === language.short ? 'opacity-100' : 'opacity-0',
+                )}
+              />
+              {SUPPORTED_LANGUAGES[language.short].full}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  );
+};

packages/ui/primitives/document-flow/field-item-advanced-settings.tsx

@@ -155,17 +155,7 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
 
     const doesFieldExist = (!!document || !!template) && field.nativeId !== undefined;
 
-    const { data: fieldData } = trpc.field.getField.useQuery(
-      {
-        fieldId: Number(field.nativeId),
-        teamId,
-      },
-      {
-        enabled: doesFieldExist,
-      },
-    );
-
-    const fieldMeta = fieldData?.fieldMeta;
+    const fieldMeta = field?.fieldMeta;
 
     const localStorageKey = `field_${field.formId}_${field.type}`;
 

packages/ui/primitives/signature-pad/signature-pad.tsx

@@ -9,6 +9,13 @@ import type { StrokeOptions } from 'perfect-freehand';
 import { getStroke } from 'perfect-freehand';
 
 import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
 
 import { cn } from '../../lib/utils';
 import { getSvgPathFromStroke } from './helper';
@@ -36,6 +43,7 @@ export const SignaturePad = ({
   const [isPressed, setIsPressed] = useState(false);
   const [lines, setLines] = useState<Point[][]>([]);
   const [currentLine, setCurrentLine] = useState<Point[]>([]);
+  const [selectedColor, setSelectedColor] = useState('black');
 
   const perfectFreehandOptions = useMemo(() => {
     const size = $el.current ? Math.min($el.current.height, $el.current.width) * 0.03 : 10;
@@ -85,6 +93,7 @@ export const SignaturePad = ({
           ctx.restore();
           ctx.imageSmoothingEnabled = true;
           ctx.imageSmoothingQuality = 'high';
+          ctx.fillStyle = selectedColor;
 
           lines.forEach((line) => {
             const pathData = new Path2D(
@@ -129,6 +138,7 @@ export const SignaturePad = ({
 
         ctx.imageSmoothingEnabled = true;
         ctx.imageSmoothingQuality = 'high';
+        ctx.fillStyle = selectedColor;
 
         newLines.forEach((line) => {
           const pathData = new Path2D(
@@ -237,7 +247,13 @@ export const SignaturePad = ({
     >
       <canvas
         ref={$el}
-        className={cn('relative block dark:invert', className)}
+        className={cn(
+          'relative block',
+          {
+            'dark:hue-rotate-180 dark:invert': selectedColor === 'black',
+          },
+          className,
+        )}
         style={{ touchAction: 'none' }}
         onPointerMove={(event) => onMouseMove(event)}
         onPointerDown={(event) => onMouseDown(event)}
@@ -247,6 +263,44 @@ export const SignaturePad = ({
         {...props}
       />
 
+      <div className="text-foreground absolute right-2 top-2 filter">
+        <Select defaultValue={selectedColor} onValueChange={(value) => setSelectedColor(value)}>
+          <SelectTrigger className="h-auto w-auto border-none p-1">
+            <SelectValue placeholder="" />
+          </SelectTrigger>
+
+          <SelectContent className="w-[150px]" align="end">
+            <SelectItem value="black">
+              <div className="text-muted-foreground flex items-center px-1 text-sm">
+                <div className="border-border mr-2 h-5 w-5 rounded-full border-2 bg-black shadow-sm" />
+                <Trans>Black</Trans>
+              </div>
+            </SelectItem>
+
+            <SelectItem value="red">
+              <div className="text-muted-foreground flex items-center px-1 text-sm">
+                <div className="border-border mr-2 h-5 w-5 rounded-full border-2 bg-[red] shadow-sm" />
+                <Trans>Red</Trans>
+              </div>
+            </SelectItem>
+
+            <SelectItem value="blue">
+              <div className="text-muted-foreground flex items-center px-1 text-sm">
+                <div className="border-border mr-2 h-5 w-5 rounded-full border-2 bg-[blue] shadow-sm" />
+                <Trans>Blue</Trans>
+              </div>
+            </SelectItem>
+
+            <SelectItem value="green">
+              <div className="text-muted-foreground flex items-center px-1 text-sm">
+                <div className="border-border mr-2 h-5 w-5 rounded-full border-2 bg-[green] shadow-sm" />
+                <Trans>Green</Trans>
+              </div>
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
       <div className="absolute bottom-4 right-4 flex gap-2">
         <button
           type="button"

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

@@ -157,6 +157,38 @@ export const AddTemplateFieldsFormPartial = ({
     selectedSignerIndex === -1 ? 0 : selectedSignerIndex,
   );
 
+  const filterFieldsWithEmptyValues = (fields: typeof localFields, fieldType: string) =>
+    fields
+      .filter((field) => field.type === fieldType)
+      .filter((field) => {
+        if (field.fieldMeta && 'values' in field.fieldMeta) {
+          return field.fieldMeta.values?.length === 0;
+        }
+
+        return true;
+      });
+
+  const emptyCheckboxFields = useMemo(
+    () => filterFieldsWithEmptyValues(localFields, FieldType.CHECKBOX),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [localFields],
+  );
+
+  const emptyRadioFields = useMemo(
+    () => filterFieldsWithEmptyValues(localFields, FieldType.RADIO),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [localFields],
+  );
+
+  const emptySelectFields = useMemo(
+    () => filterFieldsWithEmptyValues(localFields, FieldType.DROPDOWN),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [localFields],
+  );
+
+  const hasErrors =
+    emptyCheckboxFields.length > 0 || emptyRadioFields.length > 0 || emptySelectFields.length > 0;
+
   const [isFieldWithinBounds, setIsFieldWithinBounds] = useState(false);
   const [coords, setCoords] = useState({
     x: 0,
@@ -789,6 +821,24 @@ export const AddTemplateFieldsFormPartial = ({
             </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} />
 
@@ -796,6 +846,7 @@ export const AddTemplateFieldsFormPartial = ({
               loading={isSubmitting}
               disabled={isSubmitting}
               goNextLabel={msg`Save Template`}
+              disableNextStep={hasErrors}
               onGoBackClick={() => {
                 previousStep();
                 remove();