feat: add signature configurations (#1710)

Add ability to enable or disable allowed signature types:
- Drawn
- Typed
- Uploaded

**Tabbed style signature dialog**

![image](https://github.com/user-attachments/assets/a816fab6-b071-42a5-bb5c-6d4a2572431e)

**Document settings**

![image](https://github.com/user-attachments/assets/f0c1bff1-6be1-4c87-b384-1666fa25d7a6)

**Team preferences**

![image](https://github.com/user-attachments/assets/8767b05e-1463-4087-8672-f3f43d8b0f2c)

- Add multiselect to select allowed signatures in document and templates
settings tab
- Add multiselect to select allowed signatures in teams preferences
- Removed "Enable typed signatures" from document/template edit page
- Refactored signature pad to use tabs instead of an all in one
signature pad

Added E2E tests to check settings are applied correctly for documents
and templates

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

@@ -47,9 +47,8 @@ import { cn } from '../../lib/utils';
 import { Alert, AlertDescription } from '../alert';
 import { Button } from '../button';
 import { Card, CardContent } from '../card';
-import { Checkbox } from '../checkbox';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../command';
-import { Form, FormControl, FormField, FormItem, FormLabel } from '../form/form';
+import { Form } from '../form/form';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { useStep } from '../stepper';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
@@ -94,7 +93,6 @@ export type AddFieldsFormProps = {
   onSubmit: (_data: TAddFieldsFormSchema) => void;
   canGoBack?: boolean;
   isDocumentPdfLoaded: boolean;
-  typedSignatureEnabled?: boolean;
   teamId?: number;
 };
 
@@ -106,7 +104,6 @@ export const AddFieldsFormPartial = ({
   onSubmit,
   canGoBack = false,
   isDocumentPdfLoaded,
-  typedSignatureEnabled,
   teamId,
 }: AddFieldsFormProps) => {
   const { toast } = useToast();
@@ -137,7 +134,6 @@ export const AddFieldsFormPartial = ({
           recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '',
         fieldMeta: field.fieldMeta ? ZFieldMetaSchema.parse(field.fieldMeta) : undefined,
       })),
-      typedSignatureEnabled: typedSignatureEnabled ?? false,
     },
   });
 
@@ -787,31 +783,6 @@ export const AddFieldsFormPartial = ({
               )}
 
               <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"
-                          checked={value}
-                          onCheckedChange={(checked) => field.onChange(checked)}
-                          disabled={form.formState.isSubmitting}
-                        />
-                      </FormControl>
-
-                      <FormLabel
-                        htmlFor="typedSignatureEnabled"
-                        className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                      >
-                        <Trans>Enable Typed Signatures</Trans>
-                      </FormLabel>
-                    </FormItem>
-                  )}
-                />
-
                 <div className="-mx-2 flex-1 overflow-y-auto px-2">
                   <fieldset disabled={isFieldsDisabled} className="my-2 grid grid-cols-3 gap-4">
                     <button

packages/ui/primitives/document-flow/add-fields.types.ts

@@ -18,7 +18,6 @@ export const ZAddFieldsFormSchema = z.object({
       fieldMeta: ZFieldMetaSchema,
     }),
   ),
-  typedSignatureEnabled: z.boolean(),
 });
 
 export type TAddFieldsFormSchema = z.infer<typeof ZAddFieldsFormSchema>;

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

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
+import { useLingui } from '@lingui/react/macro';
 import { DocumentVisibility, TeamMemberRole } from '@prisma/client';
 import { DocumentStatus, type Field, type Recipient, SendStatus } from '@prisma/client';
 import { InfoIcon } from 'lucide-react';
@@ -9,10 +10,12 @@ import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 
 import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { DOCUMENT_SIGNATURE_TYPES } from '@documenso/lib/constants/document';
 import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import type { TDocument } from '@documenso/lib/types/document';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
 import {
   DocumentGlobalAuthAccessSelect,
   DocumentGlobalAuthAccessTooltip,
@@ -39,7 +42,9 @@ import {
   FormLabel,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
+import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
 
+import { DocumentSignatureSettingsTooltip } from '../../components/document/document-signature-settings-tooltip';
 import { Combobox } from '../combobox';
 import { Input } from '../input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
@@ -78,6 +83,8 @@ export const AddSettingsFormPartial = ({
   currentTeamMemberRole,
   onSubmit,
 }: AddSettingsFormProps) => {
+  const { t } = useLingui();
+
   const { documentAuthOption } = extractDocumentAuthMethods({
     documentAuth: document.authOptions,
   });
@@ -90,6 +97,7 @@ export const AddSettingsFormPartial = ({
       visibility: document.visibility || '',
       globalAccessAuth: documentAuthOption?.globalAccessAuth || undefined,
       globalActionAuth: documentAuthOption?.globalActionAuth || undefined,
+
       meta: {
         timezone:
           TIME_ZONES.find((timezone) => timezone === document.documentMeta?.timezone) ??
@@ -99,6 +107,7 @@ export const AddSettingsFormPartial = ({
             ?.value ?? DEFAULT_DOCUMENT_DATE_FORMAT,
         redirectUrl: document.documentMeta?.redirectUrl ?? '',
         language: document.documentMeta?.language ?? 'en',
+        signatureTypes: extractTeamSignatureSettings(document.documentMeta),
       },
     },
   });
@@ -189,9 +198,11 @@ export const AddSettingsFormPartial = ({
                       </TooltipTrigger>
 
                       <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
-                        Controls the language for the document, including the language to be used
-                        for email notifications, and the final certificate that is generated and
-                        attached to the document.
+                        <Trans>
+                          Controls the language for the document, including the language to be used
+                          for email notifications, and the final certificate that is generated and
+                          attached to the document.
+                        </Trans>
                       </TooltipContent>
                     </Tooltip>
                   </FormLabel>
@@ -314,6 +325,34 @@ export const AddSettingsFormPartial = ({
                       )}
                     />
 
+                    <FormField
+                      control={form.control}
+                      name="meta.signatureTypes"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="flex flex-row items-center">
+                            <Trans>Allowed Signature Types</Trans>
+                            <DocumentSignatureSettingsTooltip />
+                          </FormLabel>
+
+                          <FormControl>
+                            <MultiSelectCombobox
+                              options={Object.values(DOCUMENT_SIGNATURE_TYPES).map((option) => ({
+                                label: t(option.label),
+                                value: option.value,
+                              }))}
+                              selectedValues={field.value}
+                              onChange={field.onChange}
+                              className="bg-background w-full"
+                              emptySelectionPlaceholder="Select signature types"
+                            />
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
                     <FormField
                       control={form.control}
                       name="meta.dateFormat"

packages/ui/primitives/document-flow/add-settings.types.ts

@@ -1,7 +1,9 @@
+import { msg } from '@lingui/core/macro';
 import { DocumentVisibility } from '@prisma/client';
 import { z } from 'zod';
 
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { SUPPORTED_LANGUAGE_CODES } from '@documenso/lib/constants/i18n';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import {
@@ -26,7 +28,10 @@ export const ZMapNegativeOneToUndefinedSchema = z
   });
 
 export const ZAddSettingsFormSchema = z.object({
-  title: z.string().trim().min(1, { message: "Title can't be empty" }),
+  title: z
+    .string()
+    .trim()
+    .min(1, { message: msg`Title cannot be empty`.id }),
   externalId: z.string().optional(),
   visibility: z.nativeEnum(DocumentVisibility).optional(),
   globalAccessAuth: ZMapNegativeOneToUndefinedSchema.pipe(
@@ -49,6 +54,9 @@ export const ZAddSettingsFormSchema = z.object({
       .union([z.string(), z.enum(SUPPORTED_LANGUAGE_CODES)])
       .optional()
       .default('en'),
+    signatureTypes: z.array(z.nativeEnum(DocumentSignatureType)).min(1, {
+      message: msg`At least one signature type must be enabled`.id,
+    }),
   }),
 });