feat: rework the initials field

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

@@ -13,7 +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 { TSignFieldWithTokenMutationSchema } from '@documenso/trpc/server/field-router/schema';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentAuthContext } from './document-auth-provider';
@@ -24,9 +27,15 @@ export type InitialsFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const InitialsField = ({ field, recipient, onSignField }: InitialsFieldProps) => {
+export const InitialsField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: InitialsFieldProps) => {
   const router = useRouter();
   const { toast } = useToast();
 
@@ -35,16 +44,18 @@ export const InitialsField = ({ field, recipient, onSignField }: InitialsFieldPr
 
   const [isPending, startTransition] = useTransition();
 
+  const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
+
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
-  const { isLoading: isRemoveSignedFieldWithTokenLoading } =
+  const {
-    trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+    mutateAsync: removeSignedFieldWithToken,
+    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 ?? '';
@@ -82,8 +93,34 @@ export const InitialsField = ({ field, recipient, onSignField }: InitialsFieldPr
     }
   };
 
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      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',
+      });
+    }
+  };
+
   useEffect(() => {
-    if (!field.inserted) {
+    if (!field.inserted && fullName) {
       void executeActionAuthProcedure({
         onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
         actionTarget: field.type,
@@ -92,7 +129,7 @@ export const InitialsField = ({ field, recipient, onSignField }: InitialsFieldPr
   }, [field]);
 
   return (
-    <SigningFieldContainer field={field} type="Initials">
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} 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" />