feat: prefill typed signature with user's full name (#2324)

Add fullName prop to signature pad components to automatically populate
typed signature
field with signer's name. Updates signature dialog, type component, and
all signing forms
across embed, document, template, and envelope flows to pass through the
user's full
name for better user experience.

packages/ui/primitives/signature-pad/signature-pad-dialog.tsx

@@ -15,6 +15,7 @@ import { SignatureRender } from './signature-render';
 
 export type SignaturePadDialogProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChange'> & {
   disabled?: boolean;
+  fullName?: string;
   value?: string;
   onChange: (_value: string) => void;
   dialogConfirmText?: MessageDescriptor | string;
@@ -26,6 +27,7 @@ export type SignaturePadDialogProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'o
 
 export const SignaturePadDialog = ({
   className,
+  fullName,
   value,
   onChange,
   disabled = false,
@@ -43,7 +45,7 @@ export const SignaturePadDialog = ({
   return (
     <div
       className={cn(
-        'aspect-signature-pad bg-background relative block w-full select-none rounded-lg border',
+        'relative block aspect-signature-pad w-full select-none rounded-lg border bg-background',
         className,
         {
           'pointer-events-none opacity-50': disabled,
@@ -112,6 +114,7 @@ export const SignaturePadDialog = ({
         <DialogContent hideClose={true} className="p-6 pt-4">
           <SignaturePad
             id="signature"
+            fullName={fullName}
             value={value}
             className={className}
             disabled={disabled}

packages/ui/primitives/signature-pad/signature-pad-type.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 
@@ -7,13 +7,27 @@ import { cn } from '../../lib/utils';
 export type SignaturePadTypeProps = {
   className?: string;
   value?: string;
+  defaultValue?: string;
   onChange: (_value: string) => void;
 };
 
-export const SignaturePadType = ({ className, value, onChange }: SignaturePadTypeProps) => {
+export const SignaturePadType = ({
+  className,
+  value,
+  defaultValue,
+  onChange,
+}: SignaturePadTypeProps) => {
   const { t } = useLingui();
+
+  const $isDirty = useRef(false);
   // Colors don't actually work for text.
-  const [selectedColor, setSelectedColor] = useState('black');
+
+  useEffect(() => {
+    if (!$isDirty.current && !value && defaultValue) {
+      $isDirty.current = true;
+      onChange(defaultValue);
+    }
+  }, [defaultValue, value, onChange]);
 
   return (
     <div className={cn('flex h-full w-full items-center justify-center', className)}>
@@ -23,7 +37,10 @@ export const SignaturePadType = ({ className, value, onChange }: SignaturePadTyp
         className="w-full bg-transparent px-4 text-center font-signature text-7xl text-black placeholder:text-4xl focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-white"
         // style={{ color: selectedColor }}
         value={value}
-        onChange={(event) => onChange(event.target.value.trimStart())}
+        onChange={(event) => {
+          onChange(event.target.value.trimStart());
+          $isDirty.current = true;
+        }}
         autoComplete="off"
         autoCorrect="off"
         autoCapitalize="off"

packages/ui/primitives/signature-pad/signature-pad.tsx

@@ -21,6 +21,7 @@ export type SignaturePadValue = {
 };
 
 export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChange'> & {
+  fullName?: string;
   value?: string;
   onChange?: (_value: SignaturePadValue) => void;
 
@@ -34,6 +35,7 @@ export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChang
 };
 
 export const SignaturePad = ({
+  fullName,
   value = '',
   onChange,
   disabled = false,
@@ -168,7 +170,7 @@ export const SignaturePad = ({
 
       <TabsContent
         value="draw"
-        className="border-border aspect-signature-pad dark:bg-background relative flex items-center justify-center rounded-md border bg-neutral-50 text-center"
+        className="relative flex aspect-signature-pad items-center justify-center rounded-md border border-border bg-neutral-50 text-center dark:bg-background"
       >
         <SignaturePadDraw
           className="h-full w-full"
@@ -179,15 +181,19 @@ export const SignaturePad = ({
 
       <TabsContent
         value="text"
-        className="border-border aspect-signature-pad dark:bg-background relative flex items-center justify-center rounded-md border bg-neutral-50 text-center"
+        className="relative flex aspect-signature-pad items-center justify-center rounded-md border border-border bg-neutral-50 text-center dark:bg-background"
       >
-        <SignaturePadType value={typedSignature} onChange={onTypedSignatureChange} />
+        <SignaturePadType
+          value={typedSignature}
+          defaultValue={fullName}
+          onChange={onTypedSignatureChange}
+        />
       </TabsContent>
 
       <TabsContent
         value="image"
         className={cn(
-          'border-border aspect-signature-pad dark:bg-background relative rounded-md border bg-neutral-50',
+          'relative aspect-signature-pad rounded-md border border-border bg-neutral-50 dark:bg-background',
           {
             'bg-white': imageSignature,
           },