feat: add initials field type (#1279)

Adds a new field type that enables document recipients to add
their `initials` on the document.

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

@@ -41,6 +41,7 @@ import { CheckboxField } from '~/app/(signing)/sign/[token]/checkbox-field';
 import { DateField } from '~/app/(signing)/sign/[token]/date-field';
 import { DropdownField } from '~/app/(signing)/sign/[token]/dropdown-field';
 import { EmailField } from '~/app/(signing)/sign/[token]/email-field';
+import { InitialsField } from '~/app/(signing)/sign/[token]/initials-field';
 import { NameField } from '~/app/(signing)/sign/[token]/name-field';
 import { NumberField } from '~/app/(signing)/sign/[token]/number-field';
 import { useRequiredSigningContext } from '~/app/(signing)/sign/[token]/provider';
@@ -182,6 +183,15 @@ export const SignDirectTemplateForm = ({
                   onUnsignField={onUnsignField}
                 />
               ))
+              .with(FieldType.INITIALS, () => (
+                <InitialsField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
               .with(FieldType.NAME, () => (
                 <NameField
                   key={field.id}

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

@@ -0,0 +1,140 @@
+'use client';
+
+import { useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Loader } from 'lucide-react';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+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 {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredSigningContext } from './provider';
+import { SigningFieldContainer } from './signing-field-container';
+
+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,
+  onUnsignField,
+}: InitialsFieldProps) => {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const { fullName } = useRequiredSigningContext();
+  const initials = extractInitials(fullName);
+
+  const [isPending, startTransition] = useTransition();
+
+  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isLoading: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      const value = initials ?? '';
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value,
+        isBase64: false,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while signing the document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  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',
+      });
+    }
+  };
+
+  return (
+    <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" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
+          Initials
+        </p>
+      )}
+
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 truncate duration-200">
+          {field.customText}
+        </p>
+      )}
+    </SigningFieldContainer>
+  );
+};

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

@@ -39,7 +39,16 @@ export type SignatureFieldProps = {
    */
   onSign?: (documentAuthValue?: TRecipientActionAuth) => Promise<void> | void;
   onRemove?: (fieldType?: string) => Promise<void> | void;
-  type?: 'Date' | 'Email' | 'Name' | 'Signature' | 'Radio' | 'Dropdown' | 'Number' | 'Checkbox';
+  type?:
+    | 'Date'
+    | 'Initials'
+    | 'Email'
+    | 'Name'
+    | 'Signature'
+    | 'Radio'
+    | 'Dropdown'
+    | 'Number'
+    | 'Checkbox';
   tooltipText?: string | null;
 };
 

apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx

@@ -26,6 +26,7 @@ import { DateField } from './date-field';
 import { DropdownField } from './dropdown-field';
 import { EmailField } from './email-field';
 import { SigningForm } from './form';
+import { InitialsField } from './initials-field';
 import { NameField } from './name-field';
 import { NumberField } from './number-field';
 import { RadioField } from './radio-field';
@@ -101,6 +102,9 @@ export const SigningPageView = ({
             .with(FieldType.SIGNATURE, () => (
               <SignatureField key={field.id} field={field} recipient={recipient} />
             ))
+            .with(FieldType.INITIALS, () => (
+              <InitialsField key={field.id} field={field} recipient={recipient} />
+            ))
             .with(FieldType.NAME, () => (
               <NameField key={field.id} field={field} recipient={recipient} />
             ))

apps/web/src/components/document/document-read-only-fields.tsx

@@ -98,6 +98,7 @@ export const DocumentReadOnlyFields = ({ documentMeta, fields }: DocumentReadOnl
                       {
                         type: P.union(
                           FieldType.NAME,
+                          FieldType.INITIALS,
                           FieldType.EMAIL,
                           FieldType.NUMBER,
                           FieldType.RADIO,