feat: auto-sign fields

apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx

@@ -189,7 +189,6 @@ export const SignDirectTemplateForm = ({
                   field={field}
                   recipient={directRecipient}
                   onSignField={onSignField}
-                  onUnsignField={onUnsignField}
                 />
               ))
               .with(FieldType.NAME, () => (
@@ -198,7 +197,6 @@ export const SignDirectTemplateForm = ({
                   field={field}
                   recipient={directRecipient}
                   onSignField={onSignField}
-                  onUnsignField={onUnsignField}
                 />
               ))
               .with(FieldType.DATE, () => (
@@ -218,7 +216,6 @@ export const SignDirectTemplateForm = ({
                   field={field}
                   recipient={directRecipient}
                   onSignField={onSignField}
-                  onUnsignField={onUnsignField}
                 />
               ))
               .with(FieldType.TEXT, () => {

apps/web/src/app/(signing)/sign/[token]/date-field.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useTransition } from 'react';
+import { useEffect, useTransition } from 'react';
 
 import { useRouter } from 'next/navigation';
 
@@ -23,6 +23,7 @@ import type {
 } from '@documenso/trpc/server/field-router/schema';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useRequiredDocumentAuthContext } from './document-auth-provider';
 import { SigningFieldContainer } from './signing-field-container';
 
 export type DateFieldProps = {
@@ -40,7 +41,6 @@ export const DateField = ({
   dateFormat = DEFAULT_DOCUMENT_DATE_FORMAT,
   timezone = DEFAULT_DOCUMENT_TIME_ZONE,
   onSignField,
-  onUnsignField,
 }: DateFieldProps) => {
   const router = useRouter();
 
@@ -51,13 +51,13 @@ export const DateField = ({
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
-  const {
+  const { isLoading: isRemoveSignedFieldWithTokenLoading } =
-    mutateAsync: removeSignedFieldWithToken,
+    trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
-    isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 
+  const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
+
   const localDateString = convertToLocalSystemFormat(field.customText, dateFormat, timezone);
 
   const isDifferentTime = field.inserted && localDateString !== field.customText;
@@ -98,37 +98,18 @@ export const DateField = ({
     }
   };
 
-  const onRemove = async () => {
+  useEffect(() => {
-    try {
+    if (!field.inserted) {
-      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+      void executeActionAuthProcedure({
-        token: recipient.token,
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
-        fieldId: field.id,
+        actionTarget: field.type,
-      };
-
-      if (onUnsignField) {
-        await onUnsignField(payload);
-        return;
-      }
-
-      await removeSignedFieldWithToken(payload);
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while removing the signature.',
-        variant: 'destructive',
       });
     }
-  };
+  }, [field]);
 
   return (
     <SigningFieldContainer
       field={field}
-      onSign={onSign}
-      onRemove={onRemove}
       type="Date"
       tooltipText={isDifferentTime ? tooltipText : undefined}
     >

apps/web/src/app/(signing)/sign/[token]/email-field.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useTransition } from 'react';
+import { useEffect, useTransition } from 'react';
 
 import { useRouter } from 'next/navigation';
 
@@ -12,12 +12,10 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
-import type {
+import type { TSignFieldWithTokenMutationSchema } from '@documenso/trpc/server/field-router/schema';
-  TRemovedSignedFieldWithTokenMutationSchema,
-  TSignFieldWithTokenMutationSchema,
-} from '@documenso/trpc/server/field-router/schema';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useRequiredDocumentAuthContext } from './document-auth-provider';
 import { useRequiredSigningContext } from './provider';
 import { SigningFieldContainer } from './signing-field-container';
 
@@ -25,10 +23,9 @@ export type EmailFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
-  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const EmailField = ({ field, recipient, onSignField, onUnsignField }: EmailFieldProps) => {
+export const EmailField = ({ field, recipient, onSignField }: EmailFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -40,13 +37,13 @@ export const EmailField = ({ field, recipient, onSignField, onUnsignField }: Ema
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
-  const {
+  const { isLoading: isRemoveSignedFieldWithTokenLoading } =
-    mutateAsync: removeSignedFieldWithToken,
+    trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
-    isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 
+  const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
+
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
       const value = providedEmail ?? '';
@@ -84,34 +81,17 @@ export const EmailField = ({ field, recipient, onSignField, onUnsignField }: Ema
     }
   };
 
-  const onRemove = async () => {
+  useEffect(() => {
-    try {
+    if (!field.inserted) {
-      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+      void executeActionAuthProcedure({
-        token: recipient.token,
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
-        fieldId: field.id,
+        actionTarget: field.type,
-      };
-
-      if (onUnsignField) {
-        await onUnsignField(payload);
-        return;
-      }
-
-      await removeSignedFieldWithToken(payload);
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while removing the signature.',
-        variant: 'destructive',
       });
     }
-  };
+  }, [field]);
 
   return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Email">
+    <SigningFieldContainer field={field} type="Email">
       {isLoading && (
         <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />

apps/web/src/app/(signing)/sign/[token]/initials-field.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useTransition } from 'react';
+import { useEffect, useTransition } from 'react';
 
 import { useRouter } from 'next/navigation';
 
@@ -13,12 +13,10 @@ import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
-import type {
+import type { TSignFieldWithTokenMutationSchema } from '@documenso/trpc/server/field-router/schema';
-  TRemovedSignedFieldWithTokenMutationSchema,
-  TSignFieldWithTokenMutationSchema,
-} from '@documenso/trpc/server/field-router/schema';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useRequiredDocumentAuthContext } from './document-auth-provider';
 import { useRequiredSigningContext } from './provider';
 import { SigningFieldContainer } from './signing-field-container';
 
@@ -26,15 +24,9 @@ export type InitialsFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
-  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const InitialsField = ({
+export const InitialsField = ({ field, recipient, onSignField }: InitialsFieldProps) => {
-  field,
-  recipient,
-  onSignField,
-  onUnsignField,
-}: InitialsFieldProps) => {
   const router = useRouter();
   const { toast } = useToast();
 
@@ -46,13 +38,13 @@ export const InitialsField = ({
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
-  const {
+  const { isLoading: isRemoveSignedFieldWithTokenLoading } =
-    mutateAsync: removeSignedFieldWithToken,
+    trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
-    isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 
+  const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
+
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
       const value = initials ?? '';
@@ -90,34 +82,17 @@ export const InitialsField = ({
     }
   };
 
-  const onRemove = async () => {
+  useEffect(() => {
-    try {
+    if (!field.inserted) {
-      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+      void executeActionAuthProcedure({
-        token: recipient.token,
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
-        fieldId: field.id,
+        actionTarget: field.type,
-      };
-
-      if (onUnsignField) {
-        await onUnsignField(payload);
-        return;
-      }
-
-      await removeSignedFieldWithToken(payload);
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while removing the signature.',
-        variant: 'destructive',
       });
     }
-  };
+  }, [field]);
 
   return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Initials">
+    <SigningFieldContainer field={field} type="Initials">
       {isLoading && (
         <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />

apps/web/src/app/(signing)/sign/[token]/name-field.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useTransition } from 'react';
+import { useEffect, useTransition } from 'react';
 
 import { useRouter } from 'next/navigation';
 
@@ -12,14 +12,7 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { type Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
-import type {
+import type { TSignFieldWithTokenMutationSchema } from '@documenso/trpc/server/field-router/schema';
-  TRemovedSignedFieldWithTokenMutationSchema,
-  TSignFieldWithTokenMutationSchema,
-} 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 { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentAuthContext } from './document-auth-provider';
@@ -30,16 +23,14 @@ export type NameFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
-  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const NameField = ({ field, recipient, onSignField, onUnsignField }: NameFieldProps) => {
+export const NameField = ({ field, recipient, onSignField }: NameFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
 
-  const { fullName: providedFullName, setFullName: setProvidedFullName } =
+  const { fullName: providedFullName } = useRequiredSigningContext();
-    useRequiredSigningContext();
 
   const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
 
@@ -48,47 +39,15 @@ export const NameField = ({ field, recipient, onSignField, onUnsignField }: Name
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
-  const {
+  const { isLoading: isRemoveSignedFieldWithTokenLoading } =
-    mutateAsync: removeSignedFieldWithToken,
+    trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
-    isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 
-  const [showFullNameModal, setShowFullNameModal] = useState(false);
-  const [localFullName, setLocalFullName] = useState('');
-
-  const onPreSign = () => {
-    if (!providedFullName) {
-      setShowFullNameModal(true);
-      return false;
-    }
-
-    return true;
-  };
-
-  /**
-   * When the user clicks the sign button in the dialog where they enter their full name.
-   */
-  const onDialogSignClick = () => {
-    setShowFullNameModal(false);
-    setProvidedFullName(localFullName);
-
-    void executeActionAuthProcedure({
-      onReauthFormSubmit: async (authOptions) => await onSign(authOptions, localFullName),
-      actionTarget: field.type,
-    });
-  };
-
   const onSign = async (authOptions?: TRecipientActionAuth, name?: string) => {
     try {
       const value = name || providedFullName;
 
-      if (!value) {
-        setShowFullNameModal(true);
-        return;
-      }
-
       const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
@@ -122,40 +81,17 @@ export const NameField = ({ field, recipient, onSignField, onUnsignField }: Name
     }
   };
 
-  const onRemove = async () => {
+  useEffect(() => {
-    try {
+    if (!field.inserted) {
-      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+      void executeActionAuthProcedure({
-        token: recipient.token,
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
-        fieldId: field.id,
+        actionTarget: field.type,
-      };
-
-      if (onUnsignField) {
-        await onUnsignField(payload);
-        return;
-      }
-
-      await removeSignedFieldWithToken(payload);
-
-      startTransition(() => router.refresh());
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: 'Error',
-        description: 'An error occurred while removing the signature.',
-        variant: 'destructive',
       });
     }
-  };
+  }, [field]);
 
   return (
-    <SigningFieldContainer
+    <SigningFieldContainer field={field} type="Name">
-      field={field}
-      onPreSign={onPreSign}
-      onSign={onSign}
-      onRemove={onRemove}
-      type="Name"
-    >
       {isLoading && (
         <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
@@ -173,51 +109,6 @@ export const NameField = ({ field, recipient, onSignField, onUnsignField }: Name
           {field.customText}
         </p>
       )}
-
-      <Dialog open={showFullNameModal} onOpenChange={setShowFullNameModal}>
-        <DialogContent>
-          <DialogTitle>
-            Sign as {recipient.name}{' '}
-            <div className="text-muted-foreground">({recipient.email})</div>
-          </DialogTitle>
-
-          <div>
-            <Label htmlFor="signature">Full Name</Label>
-
-            <Input
-              type="text"
-              className="mt-2"
-              value={localFullName}
-              onChange={(e) => setLocalFullName(e.target.value.trimStart())}
-            />
-          </div>
-
-          <DialogFooter>
-            <div className="flex w-full flex-1 flex-nowrap gap-4">
-              <Button
-                type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
-                variant="secondary"
-                onClick={() => {
-                  setShowFullNameModal(false);
-                  setLocalFullName('');
-                }}
-              >
-                Cancel
-              </Button>
-
-              <Button
-                type="button"
-                className="flex-1"
-                disabled={!localFullName}
-                onClick={() => onDialogSignClick()}
-              >
-                Sign
-              </Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
     </SigningFieldContainer>
   );
 };

apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx

@@ -67,6 +67,8 @@ export const SigningFieldContainer = ({
   const parsedFieldMeta = field.fieldMeta ? ZFieldMetaSchema.parse(field.fieldMeta) : undefined;
   const readOnlyField = parsedFieldMeta?.readOnly || false;
 
+  const automatedFields = ['Initials', 'Email', 'Name', 'Date'].includes(type ?? '');
+
   const handleInsertField = async () => {
     if (field.inserted || !onSign) {
       return;
@@ -171,14 +173,18 @@ export const SigningFieldContainer = ({
           </button>
         )}
 
-        {type !== 'Date' && type !== 'Checkbox' && field.inserted && !loading && !readOnlyField && (
+        {type !== 'Checkbox' &&
-          <button
+          !automatedFields &&
-            className="text-destructive bg-background/50 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
+          field.inserted &&
-            onClick={onRemoveSignedFieldClick}
+          !loading &&
-          >
+          !readOnlyField && (
-            Remove
+            <button
-          </button>
+              className="text-destructive bg-background/50 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
-        )}
+              onClick={onRemoveSignedFieldClick}
+            >
+              Remove
+            </button>
+          )}
 
         {children}
       </FieldRootContainer>