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)

## Changes Made

- 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

## Testing Performed

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

apps/remix/app/components/embed/embed-direct-template-client-page.tsx

@@ -3,8 +3,8 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { type DocumentData, type Field, FieldType } from '@prisma/client';
 import type { DocumentMeta, Recipient, Signature, TemplateMeta } from '@prisma/client';
+import { type DocumentData, type Field, FieldType } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { useSearchParams } from 'react-router';
@@ -25,12 +25,11 @@ import type {
 } from '@documenso/trpc/server/field-router/schema';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { BrandingLogo } from '~/components/general/branding-logo';
@@ -69,16 +68,8 @@ export const EmbedDirectTemplateClientPage = ({
 
   const [searchParams] = useSearchParams();
 
-  const {
-    fullName,
-    email,
-    signature,
-    signatureValid,
-    setFullName,
-    setEmail,
-    setSignature,
-    setSignatureValid,
-  } = useRequiredDocumentSigningContext();
+  const { fullName, email, signature, setFullName, setEmail, setSignature } =
+    useRequiredDocumentSigningContext();
 
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
   const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
@@ -194,10 +185,6 @@ export const EmbedDirectTemplateClientPage = ({
 
   const onCompleteClick = async () => {
     try {
-      if (hasSignatureField && !signatureValid) {
-        return;
-      }
-
       const valid = validateFieldsInserted(pendingFields);
 
       if (!valid) {
@@ -419,34 +406,16 @@ export const EmbedDirectTemplateClientPage = ({
                       <Trans>Signature</Trans>
                     </Label>
 
-                    <Card className="mt-2" gradient degrees={-120}>
-                      <CardContent className="p-0">
-                        <SignaturePad
-                          className="h-44 w-full"
-                          disabled={isThrottled || isSubmitting}
-                          defaultValue={signature ?? undefined}
-                          onChange={(value) => {
-                            setSignature(value);
-                          }}
-                          onValidityChange={(isValid) => {
-                            setSignatureValid(isValid);
-                          }}
-                          allowTypedSignature={Boolean(
-                            metadata &&
-                              'typedSignatureEnabled' in metadata &&
-                              metadata.typedSignatureEnabled,
-                          )}
-                        />
-                      </CardContent>
-                    </Card>
-
-                    {hasSignatureField && !signatureValid && (
-                      <div className="text-destructive mt-2 text-sm">
-                        <Trans>
-                          Signature is too small. Please provide a more complete signature.
-                        </Trans>
-                      </div>
-                    )}
+                    <SignaturePadDialog
+                      className="mt-2"
+                      disabled={isThrottled || isSubmitting}
+                      disableAnimation
+                      value={signature ?? ''}
+                      onChange={(v) => setSignature(v ?? '')}
+                      typedSignatureEnabled={metadata?.typedSignatureEnabled}
+                      uploadSignatureEnabled={metadata?.uploadSignatureEnabled}
+                      drawSignatureEnabled={metadata?.drawSignatureEnabled}
+                    />
                   </div>
                 )}
               </div>