feat: add custom text to singleplayer

packages/ui/primitives/document-flow/add-signature.tsx

@@ -23,6 +23,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
 import { Input } from '../input';
 import { SignaturePad } from '../signature-pad';
 import { useStep } from '../stepper';
+import { Textarea } from '../textarea';
 import type { TAddSignatureFormSchema } from './add-signature.types';
 import { ZAddSignatureFormSchema } from './add-signature.types';
 import {
@@ -44,6 +45,7 @@ export type AddSignatureFormProps = {
 
   onSubmit: (_data: TAddSignatureFormSchema) => Promise<void> | void;
   requireName?: boolean;
+  requireCustomText?: boolean;
   requireSignature?: boolean;
 };
 
@@ -54,6 +56,7 @@ export const AddSignatureFormPartial = ({
 
   onSubmit,
   requireName = false,
+  requireCustomText = false,
   requireSignature = true,
 }: AddSignatureFormProps) => {
   const { currentStep, totalSteps } = useStep();
@@ -70,6 +73,14 @@ export const AddSignatureFormPartial = ({
       });
     }
 
+    if (requireCustomText && val.customText.length === 0) {
+      ctx.addIssue({
+        path: ['customText'],
+        code: 'custom',
+        message: 'Text is required',
+      });
+    }
+
     if (requireSignature && val.signature.length === 0) {
       ctx.addIssue({
         path: ['signature'],
@@ -85,6 +96,7 @@ export const AddSignatureFormPartial = ({
       name: '',
       email: '',
       signature: '',
+      customText: '',
     },
   });
 
@@ -131,6 +143,11 @@ export const AddSignatureFormPartial = ({
       return !form.formState.errors.email;
     }
 
+    if (fieldType === FieldType.TEXT) {
+      await form.trigger('customText');
+      return !form.formState.errors.customText;
+    }
+
     return true;
   };
 
@@ -154,6 +171,11 @@ export const AddSignatureFormPartial = ({
         customText: form.getValues('name'),
         inserted: true,
       }))
+      .with(FieldType.TEXT, () => ({
+        ...field,
+        customText: form.getValues('customText'),
+        inserted: true,
+      }))
       .with(FieldType.SIGNATURE, () => {
         const value = form.getValues('signature');
 
@@ -302,6 +324,29 @@ export const AddSignatureFormPartial = ({
                   )}
                 />
               )}
+
+              {requireCustomText && (
+                <FormField
+                  control={form.control}
+                  name="customText"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel required={requireCustomText}>Custom Text</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          className="bg-background h-44"
+                          {...field}
+                          onChange={(value) => {
+                            onFormValueChange(FieldType.TEXT);
+                            field.onChange(value);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
             </div>
           </DocumentFlowFormContainerContent>
 
@@ -330,7 +375,7 @@ export const AddSignatureFormPartial = ({
         <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
           {localFields.map((field) =>
             match(field.type)
-              .with(FieldType.DATE, FieldType.EMAIL, FieldType.NAME, () => {
+              .with(FieldType.DATE, FieldType.TEXT, FieldType.EMAIL, FieldType.NAME, () => {
                 return (
                   <SinglePlayerModeCustomTextField
                     onClick={insertField(field)}