chore: let user activily modify next signer

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

@@ -13,6 +13,7 @@ import type { Field } from '@documenso/prisma/client';
 import { RecipientRole } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
   Dialog,
   DialogClose,
@@ -45,6 +46,7 @@ export type SignDialogProps = {
 };
 
 const formSchema = z.object({
+  modifyNextSigner: z.boolean().default(false),
   nextSigner: z
     .object({
       email: z.string().email({ message: 'Please enter a valid email address' }).optional(),
@@ -232,8 +234,10 @@ export function SignDialog({
           <DialogContent>
             <DialogTitle>
               {step === 1 && (
-                <div className="text-foreground text-xl font-semibold">
+                <div className="text-foreground text-base font-semibold">
-                  <Trans>Modify Next Signer</Trans>
+                  <Trans>
+                    Modify Next Signer <span className="text-muted-foreground">(Optional)</span>
+                  </Trans>
                 </div>
               )}
 
@@ -249,6 +253,23 @@ export function SignDialog({
             {step === 1 && (
               <Form {...form}>
                 <form onSubmit={form.handleSubmit(onFormSubmit)} className="flex flex-col gap-y-4">
+                  <FormField
+                    control={form.control}
+                    name="modifyNextSigner"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-center space-x-2 space-y-0">
+                        <FormControl>
+                          <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                        </FormControl>
+                        <FormLabel className="font-normal">
+                          <Trans>Modify next signer details</Trans>
+                        </FormLabel>
+                      </FormItem>
+                    )}
+                  />
+
+                  {form.watch('modifyNextSigner') && (
+                    <>
                       <FormField
                         control={form.control}
                         name="nextSigner.email"
@@ -280,6 +301,8 @@ export function SignDialog({
                           </FormItem>
                         )}
                       />
+                    </>
+                  )}
                 </form>
               </Form>
             )}