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
2025-11-15 09:12:02 +10:00 · 2025-03-24 15:25:29 +11:00
parent 1b5d24e308
commit 3e97643e7e
78 changed files with 2390 additions and 1112 deletions
--- a/apps/remix/app/components/embed/embed-direct-template-client-page.tsx
+++ b/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>
--- a/apps/remix/app/components/embed/embed-document-fields.tsx
+++ b/apps/remix/app/components/embed/embed-document-fields.tsx
@ -54,6 +54,8 @@ export const EmbedDocumentFields = ({
              onSignField={onSignField}
              onUnsignField={onUnsignField}
              typedSignatureEnabled={metadata?.typedSignatureEnabled}
+              uploadSignatureEnabled={metadata?.uploadSignatureEnabled}
+              drawSignatureEnabled={metadata?.drawSignatureEnabled}
            />
          ))
          .with(FieldType.INITIALS, () => (
--- a/apps/remix/app/components/embed/embed-document-signing-page.tsx
+++ b/apps/remix/app/components/embed/embed-document-signing-page.tsx
@ -21,13 +21,12 @@ import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with
 import { trpc } from '@documenso/trpc/react';
 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 { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
-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';
@ -70,15 +69,8 @@ export const EmbedSignDocumentClientPage = ({
  const { _ } = useLingui();
  const { toast } = useToast();

-  const {
-    fullName,
-    email,
-    signature,
-    signatureValid,
-    setFullName,
-    setSignature,
-    setSignatureValid,
-  } = useRequiredDocumentSigningContext();
+  const { fullName, email, signature, setFullName, setSignature } =
+    useRequiredDocumentSigningContext();

  const [hasFinishedInit, setHasFinishedInit] = useState(false);
  const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
@ -129,10 +121,6 @@ export const EmbedSignDocumentClientPage = ({

  const onCompleteClick = async () => {
    try {
-      if (hasSignatureField && !signatureValid) {
-        return;
-      }
-
      const valid = validateFieldsInserted(fieldsRequiringValidation);

      if (!valid) {
@ -432,34 +420,16 @@ export const EmbedSignDocumentClientPage = ({
                            <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>
                      )}
                    </>
@ -477,9 +447,7 @@ export const EmbedSignDocumentClientPage = ({
                ) : (
                  <Button
                    className={allowDocumentRejection ? 'col-start-2' : 'col-span-2'}
-                    disabled={
-                      isThrottled || (!isAssistantMode && hasSignatureField && !signatureValid)
-                    }
+                    disabled={isThrottled}
                    loading={isSubmitting}
                    onClick={() => throttledOnCompleteClick()}
                  >
--- a/apps/remix/app/components/forms/profile.tsx
+++ b/apps/remix/app/components/forms/profile.tsx
@ -19,12 +19,15 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-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';

 export const ZProfileFormSchema = z.object({
-  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
-  signature: z.string().min(1, 'Signature Pad cannot be empty'),
+  name: z
+    .string()
+    .trim()
+    .min(1, { message: msg`Please enter a valid name.`.id }),
+  signature: z.string().min(1, { message: msg`Signature Pad cannot be empty.`.id }),
 });

 export const ZTwoFactorAuthTokenSchema = z.object({
@ -109,22 +112,20 @@ export const ProfileForm = ({ className }: ProfileFormProps) => {
            </Label>
            <Input id="email" type="email" className="bg-muted mt-2" value={user.email} disabled />
          </div>
+
          <FormField
            control={form.control}
            name="signature"
-            render={({ field: { onChange } }) => (
+            render={({ field: { onChange, value } }) => (
              <FormItem>
                <FormLabel>
                  <Trans>Signature</Trans>
                </FormLabel>
                <FormControl>
-                  <SignaturePad
-                    className="h-44 w-full"
+                  <SignaturePadDialog
                    disabled={isSubmitting}
-                    containerClassName={cn('rounded-lg border bg-background')}
-                    defaultValue={user.signature ?? undefined}
+                    value={value}
                    onChange={(v) => onChange(v ?? '')}
-                    allowTypedSignature={true}
                  />
                </FormControl>
                <FormMessage />
@ -134,7 +135,7 @@ export const ProfileForm = ({ className }: ProfileFormProps) => {
        </fieldset>

        <Button type="submit" loading={isSubmitting} className="self-end">
-          {isSubmitting ? <Trans>Updating profile...</Trans> : <Trans>Update profile</Trans>}
+          <Trans>Update profile</Trans>
        </Button>
      </form>
    </Form>
--- a/apps/remix/app/components/forms/signup.tsx
+++ b/apps/remix/app/components/forms/signup.tsx
@ -30,7 +30,7 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { PasswordInput } from '@documenso/ui/primitives/password-input';
-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 { UserProfileSkeleton } from '~/components/general/user-profile-skeleton';
@ -353,16 +353,15 @@ export const SignUpForm = ({
                <FormField
                  control={form.control}
                  name="signature"
-                  render={({ field: { onChange } }) => (
+                  render={({ field: { onChange, value } }) => (
                    <FormItem>
                      <FormLabel>
                        <Trans>Sign Here</Trans>
                      </FormLabel>
                      <FormControl>
-                        <SignaturePad
-                          className="h-36 w-full"
+                        <SignaturePadDialog
                          disabled={isSubmitting}
-                          containerClassName="mt-2 rounded-lg border bg-background"
+                          value={value}
                          onChange={(v) => onChange(v ?? '')}
                        />
                      </FormControl>
--- a/apps/remix/app/components/forms/team-branding-preferences-form.tsx
+++ b/apps/remix/app/components/forms/team-branding-preferences-form.tsx
@ -308,7 +308,7 @@ export function TeamBrandingPreferencesForm({ team, settings }: TeamBrandingPref

          <div className="flex flex-row justify-end space-x-4">
            <Button type="submit" loading={form.formState.isSubmitting}>
-              <Trans>Save</Trans>
+              <Trans>Update</Trans>
            </Button>
          </div>
        </fieldset>
--- a/apps/remix/app/components/forms/team-document-preferences-form.tsx
+++ b/apps/remix/app/components/forms/team-document-preferences-form.tsx
@ -8,12 +8,15 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';

 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { DOCUMENT_SIGNATURE_TYPES, DocumentSignatureType } from '@documenso/lib/constants/document';
 import {
  SUPPORTED_LANGUAGES,
  SUPPORTED_LANGUAGE_CODES,
  isValidLanguageCode,
 } from '@documenso/lib/constants/i18n';
+import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
+import { DocumentSignatureSettingsTooltip } from '@documenso/ui/components/document/document-signature-settings-tooltip';
 import { Alert } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@ -23,7 +26,9 @@ import {
  FormField,
  FormItem,
  FormLabel,
+  FormMessage,
 } from '@documenso/ui/primitives/form/form';
+import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
 import {
  Select,
  SelectContent,
@ -38,8 +43,10 @@ const ZTeamDocumentPreferencesFormSchema = z.object({
  documentVisibility: z.nativeEnum(DocumentVisibility),
  documentLanguage: z.enum(SUPPORTED_LANGUAGE_CODES),
  includeSenderDetails: z.boolean(),
-  typedSignatureEnabled: z.boolean(),
  includeSigningCertificate: z.boolean(),
+  signatureTypes: z.array(z.nativeEnum(DocumentSignatureType)).min(1, {
+    message: msg`At least one signature type must be enabled`.id,
+  }),
 });

 type TTeamDocumentPreferencesFormSchema = z.infer<typeof ZTeamDocumentPreferencesFormSchema>;
@ -69,8 +76,8 @@ export const TeamDocumentPreferencesForm = ({
        ? settings?.documentLanguage
        : 'en',
      includeSenderDetails: settings?.includeSenderDetails ?? false,
-      typedSignatureEnabled: settings?.typedSignatureEnabled ?? true,
      includeSigningCertificate: settings?.includeSigningCertificate ?? true,
+      signatureTypes: extractTeamSignatureSettings(settings),
    },
    resolver: zodResolver(ZTeamDocumentPreferencesFormSchema),
  });
@ -84,7 +91,7 @@ export const TeamDocumentPreferencesForm = ({
        documentLanguage,
        includeSenderDetails,
        includeSigningCertificate,
-        typedSignatureEnabled,
+        signatureTypes,
      } = data;

      await updateTeamDocumentPreferences({
@ -93,8 +100,10 @@ export const TeamDocumentPreferencesForm = ({
          documentVisibility,
          documentLanguage,
          includeSenderDetails,
-          typedSignatureEnabled,
          includeSigningCertificate,
+          typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+          uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+          drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
        },
      });

@ -190,6 +199,44 @@ export const TeamDocumentPreferencesForm = ({
            )}
          />

+          <FormField
+            control={form.control}
+            name="signatureTypes"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel className="flex flex-row items-center">
+                  <Trans>Default Signature Settings</Trans>
+                  <DocumentSignatureSettingsTooltip />
+                </FormLabel>
+
+                <FormControl>
+                  <MultiSelectCombobox
+                    options={Object.values(DOCUMENT_SIGNATURE_TYPES).map((option) => ({
+                      label: _(option.label),
+                      value: option.value,
+                    }))}
+                    selectedValues={field.value}
+                    onChange={field.onChange}
+                    className="bg-background w-full"
+                    enableSearch={false}
+                    emptySelectionPlaceholder="Select signature types"
+                    testId="signature-types-combobox"
+                  />
+                </FormControl>
+
+                {form.formState.errors.signatureTypes ? (
+                  <FormMessage />
+                ) : (
+                  <FormDescription>
+                    <Trans>
+                      Controls which signatures are allowed to be used when signing a document.
+                    </Trans>
+                  </FormDescription>
+                )}
+              </FormItem>
+            )}
+          />
+
          <FormField
            control={form.control}
            name="includeSenderDetails"
@ -238,36 +285,6 @@ export const TeamDocumentPreferencesForm = ({
            )}
          />

-          <FormField
-            control={form.control}
-            name="typedSignatureEnabled"
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>
-                  <Trans>Enable Typed Signature</Trans>
-                </FormLabel>
-
-                <div>
-                  <FormControl className="block">
-                    <Switch
-                      ref={field.ref}
-                      name={field.name}
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  </FormControl>
-                </div>
-
-                <FormDescription>
-                  <Trans>
-                    Controls whether the recipients can sign the documents using a typed signature.
-                    Enable or disable the typed signature globally.
-                  </Trans>
-                </FormDescription>
-              </FormItem>
-            )}
-          />
-
          <FormField
            control={form.control}
            name="includeSigningCertificate"
@ -301,7 +318,7 @@ export const TeamDocumentPreferencesForm = ({

          <div className="flex flex-row justify-end space-x-4">
            <Button type="submit" loading={form.formState.isSubmitting}>
-              <Trans>Save</Trans>
+              <Trans>Update</Trans>
            </Button>
          </div>
        </fieldset>
--- a/apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx
+++ b/apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx
@ -24,7 +24,6 @@ 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 {
  DocumentFlowFormContainerContent,
  DocumentFlowFormContainerFooter,
@ -35,7 +34,7 @@ import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/ty
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useStep } from '@documenso/ui/primitives/stepper';

 import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
@ -73,8 +72,7 @@ export const DirectTemplateSigningForm = ({
  template,
  onSubmit,
 }: DirectTemplateSigningFormProps) => {
-  const { fullName, signature, signatureValid, setFullName, setSignature } =
-    useRequiredDocumentSigningContext();
+  const { fullName, signature, setFullName, setSignature } = useRequiredDocumentSigningContext();

  const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(directRecipientFields);
  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
@ -135,8 +133,6 @@ export const DirectTemplateSigningForm = ({
    );
  };

-  const hasSignatureField = localFields.some((field) => field.type === FieldType.SIGNATURE);
-
  const uninsertedFields = useMemo(() => {
    return sortFieldsByPosition(localFields.filter((field) => !field.inserted));
  }, [localFields]);
@ -149,10 +145,6 @@ export const DirectTemplateSigningForm = ({
  const handleSubmit = async () => {
    setValidateUninsertedFields(true);

-    if (hasSignatureField && !signatureValid) {
-      return;
-    }
-
    const isFieldsValid = validateFieldsInserted(localFields);

    if (!isFieldsValid) {
@ -240,6 +232,8 @@ export const DirectTemplateSigningForm = ({
                  onSignField={onSignField}
                  onUnsignField={onUnsignField}
                  typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
+                  uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
+                  drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
                />
              ))
              .with(FieldType.INITIALS, () => (
@ -384,19 +378,15 @@ export const DirectTemplateSigningForm = ({
                <Trans>Signature</Trans>
              </Label>

-              <Card className="mt-2" gradient degrees={-120}>
-                <CardContent className="p-0">
-                  <SignaturePad
-                    className="h-44 w-full"
-                    disabled={isSubmitting}
-                    defaultValue={signature ?? undefined}
-                    onChange={(value) => {
-                      setSignature(value);
-                    }}
-                    allowTypedSignature={template.templateMeta?.typedSignatureEnabled}
-                  />
-                </CardContent>
-              </Card>
+              <SignaturePadDialog
+                className="mt-2"
+                disabled={isSubmitting}
+                value={signature ?? ''}
+                onChange={(value) => setSignature(value)}
+                typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
+                uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
+                drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
+              />
            </div>
          </div>
        </div>
--- a/apps/remix/app/components/general/document-signing/document-signing-form.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-form.tsx
@ -18,11 +18,10 @@ import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
-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 { AssistantConfirmationDialog } from '../../dialogs/assistant-confirmation-dialog';
@ -59,8 +58,7 @@ export const DocumentSigningForm = ({

  const assistantSignersId = useId();

-  const { fullName, signature, setFullName, setSignature, signatureValid, setSignatureValid } =
-    useRequiredDocumentSigningContext();
+  const { fullName, signature, setFullName, setSignature } = useRequiredDocumentSigningContext();

  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
  const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
@ -105,10 +103,6 @@ export const DocumentSigningForm = ({

    const isFieldsValid = validateFieldsInserted(fieldsRequiringValidation);

-    if (hasSignatureField && !signatureValid) {
-      return;
-    }
-
    if (!isFieldsValid) {
      return;
    }
@ -347,32 +341,15 @@ export const DocumentSigningForm = ({
                          <Trans>Signature</Trans>
                        </Label>

-                        <Card className="mt-2" gradient degrees={-120}>
-                          <CardContent className="p-0">
-                            <SignaturePad
-                              className="h-44 w-full"
-                              disabled={isSubmitting}
-                              defaultValue={signature ?? undefined}
-                              onValidityChange={(isValid) => {
-                                setSignatureValid(isValid);
-                              }}
-                              onChange={(value) => {
-                                if (signatureValid) {
-                                  setSignature(value);
-                                }
-                              }}
-                              allowTypedSignature={document.documentMeta?.typedSignatureEnabled}
-                            />
-                          </CardContent>
-                        </Card>
-
-                        {!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={isSubmitting}
+                          value={signature ?? ''}
+                          onChange={(v) => setSignature(v ?? '')}
+                          typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
+                          uploadSignatureEnabled={document.documentMeta?.uploadSignatureEnabled}
+                          drawSignatureEnabled={document.documentMeta?.drawSignatureEnabled}
+                        />
                      </div>
                    )}
                  </div>
--- a/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx
@ -177,6 +177,8 @@ export const DocumentSigningPageView = ({
                    key={field.id}
                    field={field}
                    typedSignatureEnabled={documentMeta?.typedSignatureEnabled}
+                    uploadSignatureEnabled={documentMeta?.uploadSignatureEnabled}
+                    drawSignatureEnabled={documentMeta?.drawSignatureEnabled}
                  />
                ))
                .with(FieldType.INITIALS, () => (
--- a/apps/remix/app/components/general/document-signing/document-signing-provider.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-provider.tsx
@ -1,4 +1,6 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useState } from 'react';
+
+import { isBase64Image } from '@documenso/lib/constants/signatures';

 export type DocumentSigningContextValue = {
  fullName: string;
@ -7,8 +9,6 @@ export type DocumentSigningContextValue = {
  setEmail: (_value: string) => void;
  signature: string | null;
  setSignature: (_value: string | null) => void;
-  signatureValid: boolean;
-  setSignatureValid: (_valid: boolean) => void;
 };

 const DocumentSigningContext = createContext<DocumentSigningContextValue | null>(null);
@ -31,6 +31,9 @@ export interface DocumentSigningProviderProps {
  fullName?: string | null;
  email?: string | null;
  signature?: string | null;
+  typedSignatureEnabled?: boolean;
+  uploadSignatureEnabled?: boolean;
+  drawSignatureEnabled?: boolean;
  children: React.ReactNode;
 }

@ -38,18 +41,31 @@ export const DocumentSigningProvider = ({
  fullName: initialFullName,
  email: initialEmail,
  signature: initialSignature,
+  typedSignatureEnabled = true,
+  uploadSignatureEnabled = true,
+  drawSignatureEnabled = true,
  children,
 }: DocumentSigningProviderProps) => {
  const [fullName, setFullName] = useState(initialFullName || '');
  const [email, setEmail] = useState(initialEmail || '');
-  const [signature, setSignature] = useState(initialSignature || null);
-  const [signatureValid, setSignatureValid] = useState(true);

-  useEffect(() => {
-    if (initialSignature) {
-      setSignature(initialSignature);
-    }
-  }, [initialSignature]);
+  // Ensure the user signature doesn't show up if it's not allowed.
+  const [signature, setSignature] = useState(
+    (() => {
+      const sig = initialSignature || '';
+      const isBase64 = isBase64Image(sig);
+
+      if (isBase64 && (uploadSignatureEnabled || drawSignatureEnabled)) {
+        return sig;
+      }
+
+      if (!isBase64 && typedSignatureEnabled) {
+        return sig;
+      }
+
+      return null;
+    })(),
+  );

  return (
    <DocumentSigningContext.Provider
@ -60,8 +76,6 @@ export const DocumentSigningProvider = ({
        setEmail,
        signature,
        setSignature,
-        signatureValid,
-        setSignatureValid,
      }}
    >
      {children}
--- a/apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx
@ -17,7 +17,6 @@ import type {
 } from '@documenso/trpc/server/field-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
-import { Label } from '@documenso/ui/primitives/label';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';

@ -29,11 +28,14 @@ import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';

 type SignatureFieldState = 'empty' | 'signed-image' | 'signed-text';
+
 export type DocumentSigningSignatureFieldProps = {
  field: FieldWithSignature;
  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
  typedSignatureEnabled?: boolean;
+  uploadSignatureEnabled?: boolean;
+  drawSignatureEnabled?: boolean;
 };

 export const DocumentSigningSignatureField = ({
@ -41,6 +43,8 @@ export const DocumentSigningSignatureField = ({
  onSignField,
  onUnsignField,
  typedSignatureEnabled,
+  uploadSignatureEnabled,
+  drawSignatureEnabled,
 }: DocumentSigningSignatureFieldProps) => {
  const { _ } = useLingui();
  const { toast } = useToast();
@ -52,12 +56,8 @@ export const DocumentSigningSignatureField = ({
  const containerRef = useRef<HTMLDivElement>(null);
  const [fontSize, setFontSize] = useState(2);

-  const {
-    signature: providedSignature,
-    setSignature: setProvidedSignature,
-    signatureValid,
-    setSignatureValid,
-  } = useRequiredDocumentSigningContext();
+  const { signature: providedSignature, setSignature: setProvidedSignature } =
+    useRequiredDocumentSigningContext();

  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();

@ -89,7 +89,7 @@ export const DocumentSigningSignatureField = ({
  }, [field.inserted, signature?.signatureImageAsBase64]);

  const onPreSign = () => {
-    if (!providedSignature || !signatureValid) {
+    if (!providedSignature) {
      setShowSignatureModal(true);
      return false;
    }
@ -102,6 +102,7 @@ export const DocumentSigningSignatureField = ({
  const onDialogSignClick = () => {
    setShowSignatureModal(false);
    setProvidedSignature(localSignature);
+
    if (!localSignature) {
      return;
    }
@ -116,14 +117,14 @@ export const DocumentSigningSignatureField = ({
    try {
      const value = signature || providedSignature;

-      if (!value || (signature && !signatureValid)) {
+      if (!value) {
        setShowSignatureModal(true);
        return;
      }

      const isTypedSignature = !value.startsWith('data:image');

-      if (isTypedSignature && !typedSignatureEnabled) {
+      if (isTypedSignature && typedSignatureEnabled === false) {
        toast({
          title: _(msg`Error`),
          description: _(msg`Typed signatures are not allowed. Please draw your signature.`),
@ -275,29 +276,14 @@ export const DocumentSigningSignatureField = ({
            </Trans>
          </DialogTitle>

-          <div className="">
-            <Label htmlFor="signature">
-              <Trans>Signature</Trans>
-            </Label>
-
-            <div className="border-border mt-2 rounded-md border">
-              <SignaturePad
-                id="signature"
-                className="h-44 w-full"
-                onChange={(value) => setLocalSignature(value)}
-                allowTypedSignature={typedSignatureEnabled}
-                onValidityChange={(isValid) => {
-                  setSignatureValid(isValid);
-                }}
-              />
-            </div>
-
-            {!signatureValid && (
-              <div className="text-destructive mt-2 text-sm">
-                <Trans>Signature is too small. Please provide a more complete signature.</Trans>
-              </div>
-            )}
-          </div>
+          <SignaturePad
+            className="mt-2"
+            value={localSignature ?? ''}
+            onChange={({ value }) => setLocalSignature(value)}
+            typedSignatureEnabled={typedSignatureEnabled}
+            uploadSignatureEnabled={uploadSignatureEnabled}
+            drawSignatureEnabled={drawSignatureEnabled}
+          />

          <DocumentSigningDisclosure />

@ -317,7 +303,7 @@ export const DocumentSigningSignatureField = ({
              <Button
                type="button"
                className="flex-1"
-                disabled={!localSignature || !signatureValid}
+                disabled={!localSignature}
                onClick={() => onDialogSignClick()}
              >
                <Trans>Sign</Trans>
--- a/apps/remix/app/components/general/document/document-edit-form.tsx
+++ b/apps/remix/app/components/general/document/document-edit-form.tsx
@ -5,6 +5,7 @@ import { useLingui } from '@lingui/react';
 import { DocumentDistributionMethod, DocumentStatus } from '@prisma/client';
 import { useNavigate, useSearchParams } from 'react-router';

+import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
 import {
  DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
@ -71,7 +72,7 @@ export const DocumentEditForm = ({

  const { recipients, fields } = document;

-  const { mutateAsync: updateDocument } = trpc.document.setSettingsForDocument.useMutation({
+  const { mutateAsync: updateDocument } = trpc.document.updateDocument.useMutation({
    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
    onSuccess: (newData) => {
      utils.document.getDocumentWithDetailsById.setData(
@ -174,7 +175,7 @@ export const DocumentEditForm = ({

  const onAddSettingsFormSubmit = async (data: TAddSettingsFormSchema) => {
    try {
-      const { timezone, dateFormat, redirectUrl, language } = data.meta;
+      const { timezone, dateFormat, redirectUrl, language, signatureTypes } = data.meta;

      await updateDocument({
        documentId: document.id,
@ -190,6 +191,9 @@ export const DocumentEditForm = ({
          dateFormat,
          redirectUrl,
          language: isValidLanguageCode(language) ? language : undefined,
+          typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+          uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+          drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
        },
      });

@ -242,14 +246,6 @@ export const DocumentEditForm = ({
        fields: data.fields,
      });

-      await updateDocument({
-        documentId: document.id,
-
-        meta: {
-          typedSignatureEnabled: data.typedSignatureEnabled,
-        },
-      });
-
      // Clear all field data from localStorage
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
@ -378,7 +374,6 @@ export const DocumentEditForm = ({
              fields={fields}
              onSubmit={onAddFieldsFormSubmit}
              isDocumentPdfLoaded={isDocumentPdfLoaded}
-              typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
              teamId={team?.id}
            />

--- a/apps/remix/app/components/general/template/template-edit-form.tsx
+++ b/apps/remix/app/components/general/template/template-edit-form.tsx
@ -4,6 +4,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { useNavigate } from 'react-router';

+import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
 import {
  DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
@ -124,6 +125,8 @@ export const TemplateEditForm = ({
  });

  const onAddSettingsFormSubmit = async (data: TAddTemplateSettingsFormSchema) => {
+    const { signatureTypes } = data.meta;
+
    try {
      await updateTemplateSettings({
        templateId: template.id,
@ -136,6 +139,9 @@ export const TemplateEditForm = ({
        },
        meta: {
          ...data.meta,
+          typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+          uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+          drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
          language: isValidLanguageCode(data.meta.language) ? data.meta.language : undefined,
        },
      });
@ -187,13 +193,6 @@ export const TemplateEditForm = ({
        fields: data.fields,
      });

-      await updateTemplateSettings({
-        templateId: template.id,
-        meta: {
-          typedSignatureEnabled: data.typedSignatureEnabled,
-        },
-      });
-
      // Clear all field data from localStorage
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
@ -284,7 +283,6 @@ export const TemplateEditForm = ({
              fields={fields}
              onSubmit={onAddFieldsFormSubmit}
              teamId={team?.id}
-              typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
            />
          </Stepper>
        </DocumentFlowFormContainer>
--- a/apps/remix/app/routes/_recipient+/d.$token+/_index.tsx
+++ b/apps/remix/app/routes/_recipient+/d.$token+/_index.tsx
@ -79,7 +79,14 @@ export default function DirectTemplatePage() {
  const { template, directTemplateRecipient } = data;

  return (
-    <DocumentSigningProvider email={user?.email} fullName={user?.name} signature={user?.signature}>
+    <DocumentSigningProvider
+      email={user?.email}
+      fullName={user?.name}
+      signature={user?.signature}
+      typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
+      uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
+      drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
+    >
      <DocumentSigningAuthProvider
        documentAuthOptions={template.authOptions}
        recipient={directTemplateRecipient}
--- a/apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx
+++ b/apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx
@ -215,6 +215,9 @@ export default function SigningPage() {
      email={recipient.email}
      fullName={user?.email === recipient.email ? user?.name : recipient.name}
      signature={user?.email === recipient.email ? user?.signature : undefined}
+      typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
+      uploadSignatureEnabled={document.documentMeta?.uploadSignatureEnabled}
+      drawSignatureEnabled={document.documentMeta?.drawSignatureEnabled}
    >
      <DocumentSigningAuthProvider
        documentAuthOptions={document.authOptions}
--- a/apps/remix/app/routes/embed+/direct.$url.tsx
+++ b/apps/remix/app/routes/embed+/direct.$url.tsx
@ -131,7 +131,14 @@ export default function EmbedDirectTemplatePage() {
  } = useSuperLoaderData<typeof loader>();

  return (
-    <DocumentSigningProvider email={user?.email} fullName={user?.name} signature={user?.signature}>
+    <DocumentSigningProvider
+      email={user?.email}
+      fullName={user?.name}
+      signature={user?.signature}
+      typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
+      uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
+      drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
+    >
      <DocumentSigningAuthProvider
        documentAuthOptions={template.authOptions}
        recipient={recipient}
--- a/apps/remix/app/routes/embed+/sign.$url.tsx
+++ b/apps/remix/app/routes/embed+/sign.$url.tsx
@ -156,6 +156,9 @@ export default function EmbedSignDocumentPage() {
      email={recipient.email}
      fullName={user?.email === recipient.email ? user?.name : recipient.name}
      signature={user?.email === recipient.email ? user?.signature : undefined}
+      typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
+      uploadSignatureEnabled={document.documentMeta?.uploadSignatureEnabled}
+      drawSignatureEnabled={document.documentMeta?.drawSignatureEnabled}
    >
      <DocumentSigningAuthProvider
        documentAuthOptions={document.authOptions}