From 1eeb5fb103f81be2866177cc9aa9b4004b918e1c Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Thu, 14 Dec 2023 15:28:27 +1100
Subject: [PATCH] fix: tidy code and base on main

---
 .../templates/[id]/edit-template.tsx          | 27 ++++---
 .../app/(dashboard)/templates/[id]/page.tsx   |  2 +-
 .../templates/data-table-action-dropdown.tsx  |  2 +-
 .../templates/data-table-templates.tsx        |  4 +-
 .../templates/new-template-dialog.tsx         | 39 ++++++----
 .../src/app/(dashboard)/templates/page.tsx    |  9 ++-
 .../(dashboard)/layout/desktop-nav.tsx        | 37 +++++----
 .../components/(dashboard)/layout/header.tsx  |  2 +-
 .../add-template-fields.action.ts             |  4 +-
 .../add-template-placeholders.action.ts       |  4 +-
 packages/ui/primitives/dialog.tsx             |  2 +-
 .../template-flow/add-template-fields.tsx     | 22 +++---
 .../add-template-placeholder-recipients.tsx   | 78 ++++++++-----------
 13 files changed, 121 insertions(+), 111 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx b/apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx
index b4d20b60d..920cac247 100644
--- a/apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx
+++ b/apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx
@@ -4,19 +4,20 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
-import { DocumentData, Field, Recipient, Template, User } from '@documenso/prisma/client';
+import type { DocumentData, Field, Recipient, Template, User } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
   DocumentFlowFormContainer,
   DocumentFlowFormContainerHeader,
 } from '@documenso/ui/primitives/document-flow/document-flow-root';
-import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { Stepper } from '@documenso/ui/primitives/stepper';
 import { AddTemplateFieldsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-fields';
-import { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
+import type { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
 import { AddTemplatePlaceholderRecipientsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients';
-import { TAddTemplatePlacholderRecipientsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients.types';
+import type { TAddTemplatePlacholderRecipientsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients.types';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { addTemplateFields } from '~/components/forms/edit-template/add-template-fields.action';
@@ -32,6 +33,7 @@ export type EditTemplateFormProps = {
 };
 
 type EditTemplateStep = 'signers' | 'fields';
+const EditTemplateSteps: EditTemplateStep[] = ['signers', 'fields'];
 
 export const EditTemplateForm = ({
   className,
@@ -56,7 +58,6 @@ export const EditTemplateForm = ({
       title: 'Add Fields',
       description: 'Add all relevant fields for each recipient.',
       stepIndex: 2,
-      onBackStep: () => setStep('signers'),
     },
   };
 
@@ -118,33 +119,35 @@ export const EditTemplateForm = ({
       </Card>
 
       <div className="col-span-12 lg:col-span-6 xl:col-span-5">
-        <DocumentFlowFormContainer onSubmit={(e) => e.preventDefault()}>
+        <DocumentFlowFormContainer
+          className="lg:h-[calc(100vh-6rem)]"
+          onSubmit={(e) => e.preventDefault()}
+        >
           <DocumentFlowFormContainerHeader
             title={currentDocumentFlow.title}
             description={currentDocumentFlow.description}
           />
 
-          {step === 'signers' && (
+          <Stepper
+            currentStep={currentDocumentFlow.stepIndex}
+            setCurrentStep={(step) => setStep(EditTemplateSteps[step - 1])}
+          >
             <AddTemplatePlaceholderRecipientsFormPartial
               key={recipients.length}
               documentFlow={documentFlow.signers}
               recipients={recipients}
               fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddTemplatePlaceholderFormSubmit}
             />
-          )}
 
-          {step === 'fields' && (
             <AddTemplateFieldsFormPartial
               key={fields.length}
               documentFlow={documentFlow.fields}
               recipients={recipients}
               fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddFieldsFormSubmit}
             />
-          )}
+          </Stepper>
         </DocumentFlowFormContainer>
       </div>
     </div>
diff --git a/apps/web/src/app/(dashboard)/templates/[id]/page.tsx b/apps/web/src/app/(dashboard)/templates/[id]/page.tsx
index b8c645c80..15eaa6f3c 100644
--- a/apps/web/src/app/(dashboard)/templates/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/templates/[id]/page.tsx
@@ -5,7 +5,7 @@ import { redirect } from 'next/navigation';
 
 import { ChevronLeft } from 'lucide-react';
 
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getFieldsForTemplate } from '@documenso/lib/server-only/field/get-fields-for-template';
 import { getRecipientsForTemplate } from '@documenso/lib/server-only/recipient/get-recipients-for-template';
 import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
diff --git a/apps/web/src/app/(dashboard)/templates/data-table-action-dropdown.tsx b/apps/web/src/app/(dashboard)/templates/data-table-action-dropdown.tsx
index 15ad9b58b..9f26d632c 100644
--- a/apps/web/src/app/(dashboard)/templates/data-table-action-dropdown.tsx
+++ b/apps/web/src/app/(dashboard)/templates/data-table-action-dropdown.tsx
@@ -7,7 +7,7 @@ import Link from 'next/link';
 import { Copy, Edit, MoreHorizontal, Trash2 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
-import { Template } from '@documenso/prisma/client';
+import type { Template } from '@documenso/prisma/client';
 import {
   DropdownMenu,
   DropdownMenuContent,
diff --git a/apps/web/src/app/(dashboard)/templates/data-table-templates.tsx b/apps/web/src/app/(dashboard)/templates/data-table-templates.tsx
index 3cc8102e7..629204c2a 100644
--- a/apps/web/src/app/(dashboard)/templates/data-table-templates.tsx
+++ b/apps/web/src/app/(dashboard)/templates/data-table-templates.tsx
@@ -7,7 +7,7 @@ import { useRouter } from 'next/navigation';
 import { Loader, Plus } from 'lucide-react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { Template } from '@documenso/prisma/client';
+import type { Template } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { DataTable } from '@documenso/ui/primitives/data-table';
@@ -109,7 +109,7 @@ export const TemplatesDataTable = ({
                     }}
                   >
                     {!isRowLoading && <Plus className="-ml-1 mr-2 h-4 w-4" />}
-                    Use
+                    Use Template
                   </Button>
                   <DataTableActionDropdown row={row.original} />
                 </div>
diff --git a/apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx b/apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx
index 7de1355a7..19a465001 100644
--- a/apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx
+++ b/apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx
@@ -1,11 +1,12 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FilePlus, X } from 'lucide-react';
+import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 
@@ -18,7 +19,6 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -45,7 +45,9 @@ type TCreateTemplateFormSchema = z.infer<typeof ZCreateTemplateFormSchema>;
 
 export const NewTemplateDialog = () => {
   const router = useRouter();
+  const { data: session } = useSession();
   const { toast } = useToast();
+
   const form = useForm<TCreateTemplateFormSchema>({
     resolver: zodResolver(ZCreateTemplateFormSchema),
     defaultValues: {
@@ -128,23 +130,29 @@ export const NewTemplateDialog = () => {
     setUploadedFile(null);
   };
 
+  useEffect(() => {
+    if (!showNewTemplateDialog) {
+      form.reset();
+    }
+  }, [form, showNewTemplateDialog]);
+
   return (
     <Dialog open={showNewTemplateDialog} onOpenChange={setShowNewTemplateDialog}>
       <DialogTrigger asChild>
-        <Button className="cursor-pointer">
-          <>
-            <FilePlus className="-ml-1 mr-2 h-4 w-4" />
-            New Template
-          </>
+        <Button className="cursor-pointer" disabled={!session?.user.emailVerified}>
+          <FilePlus className="-ml-1 mr-2 h-4 w-4" />
+          New Template
         </Button>
       </DialogTrigger>
+
       <DialogContent className="w-full max-w-xl">
         <DialogHeader>
           <DialogTitle className="mb-4">New Template</DialogTitle>
         </DialogHeader>
-        <DialogDescription asChild>
+
+        <div>
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
               <FormField
                 control={form.control}
                 name="name"
@@ -167,23 +175,26 @@ export const NewTemplateDialog = () => {
 
               <div>
                 <Label htmlFor="template">Upload a Document</Label>
+
                 <div className="my-3">
                   {uploadedFile ? (
                     <Card gradient className="h-[40vh]">
                       <CardContent className="flex h-full flex-col items-center justify-center p-2">
-                        <div
+                        <button
                           onClick={() => resetForm()}
-                          className="absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+                          title="Remove Template"
+                          className="text-muted-foreground absolute right-2.5 top-2.5 rounded-sm opacity-60 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
                         >
-                          <X className="h-5 w-5" />
+                          <X className="h-6 w-6" />
                           <span className="sr-only">Remove Template</span>
-                        </div>
+                        </button>
 
                         <div className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm">
                           <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
                           <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
                           <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
                         </div>
+
                         <p className="group-hover:text-foreground text-muted-foreground mt-4 font-medium">
                           Uploaded Document
                         </p>
@@ -210,7 +221,7 @@ export const NewTemplateDialog = () => {
               </div>
             </form>
           </Form>
-        </DialogDescription>
+        </div>
       </DialogContent>
     </Dialog>
   );
diff --git a/apps/web/src/app/(dashboard)/templates/page.tsx b/apps/web/src/app/(dashboard)/templates/page.tsx
index bc6a90b12..f4167e42a 100644
--- a/apps/web/src/app/(dashboard)/templates/page.tsx
+++ b/apps/web/src/app/(dashboard)/templates/page.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getTemplates } from '@documenso/lib/server-only/template/get-templates';
 
 import { TemplatesDataTable } from './data-table-templates';
@@ -27,9 +27,12 @@ export default async function TemplatesPage({ searchParams = {} }: TemplatesPage
 
   return (
     <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <div className="flex items-center justify-between">
+      <div className="flex items-baseline justify-between">
         <h1 className="mb-5 mt-2 truncate text-2xl font-semibold md:text-3xl">Templates</h1>
-        <NewTemplateDialog />
+
+        <div>
+          <NewTemplateDialog />
+        </div>
       </div>
 
       <div className="relative">
diff --git a/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx b/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
index bb3384d0a..e04bc2818 100644
--- a/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
+++ b/apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
@@ -41,9 +41,29 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
 
   return (
     <div
-      className={cn('ml-8 hidden flex-1 gap-x-6 md:flex md:justify-center', className)}
+      className={cn(
+        'ml-8 hidden flex-1 items-center gap-x-12 md:flex md:justify-between',
+        className,
+      )}
       {...props}
     >
+      <div className="flex items-baseline gap-x-6">
+        {navigationLinks.map(({ href, label }) => (
+          <Link
+            key={href}
+            href={href}
+            className={cn(
+              'text-muted-foreground dark:text-muted focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+              {
+                'text-foreground dark:text-muted-foreground': pathname?.startsWith(href),
+              },
+            )}
+          >
+            {label}
+          </Link>
+        ))}
+      </div>
+
       <CommandMenu open={open} onOpenChange={setOpen} />
 
       <Button
@@ -62,21 +82,6 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
           </div>
         </div>
       </Button>
-
-      {navigationLinks.map(({ href, label }) => (
-        <Link
-          key={href}
-          href={href}
-          className={cn(
-            'text-muted-foreground dark:text-muted focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
-            {
-              'text-foreground dark:text-muted-foreground': pathname?.startsWith(href),
-            },
-          )}
-        >
-          {label}
-        </Link>
-      ))}
     </div>
   );
 };
diff --git a/apps/web/src/components/(dashboard)/layout/header.tsx b/apps/web/src/components/(dashboard)/layout/header.tsx
index 25f260575..cf8873a1a 100644
--- a/apps/web/src/components/(dashboard)/layout/header.tsx
+++ b/apps/web/src/components/(dashboard)/layout/header.tsx
@@ -49,7 +49,7 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
 
         <DesktopNav />
 
-        <div className="flex gap-x-4">
+        <div className="flex gap-x-4 md:ml-8">
           <ProfileDropdown user={user} />
 
           {/* <Button variant="outline" size="sm" className="h-10 w-10 p-0.5 md:hidden">
diff --git a/apps/web/src/components/forms/edit-template/add-template-fields.action.ts b/apps/web/src/components/forms/edit-template/add-template-fields.action.ts
index 2ee7ee825..845ae5faf 100644
--- a/apps/web/src/components/forms/edit-template/add-template-fields.action.ts
+++ b/apps/web/src/components/forms/edit-template/add-template-fields.action.ts
@@ -1,8 +1,8 @@
 'use server';
 
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { setFieldsForTemplate } from '@documenso/lib/server-only/field/set-fields-for-template';
-import { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
+import type { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
 
 export type AddTemplateFieldsActionInput = TAddTemplateFieldsFormSchema & {
   templateId: number;
diff --git a/apps/web/src/components/forms/edit-template/add-template-placeholders.action.ts b/apps/web/src/components/forms/edit-template/add-template-placeholders.action.ts
index b2183eed1..ba5a3e004 100644
--- a/apps/web/src/components/forms/edit-template/add-template-placeholders.action.ts
+++ b/apps/web/src/components/forms/edit-template/add-template-placeholders.action.ts
@@ -1,8 +1,8 @@
 'use server';
 
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { setRecipientsForTemplate } from '@documenso/lib/server-only/recipient/set-recipients-for-template';
-import { TAddTemplatePlacholderRecipientsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients.types';
+import type { TAddTemplatePlacholderRecipientsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients.types';
 
 export type AddTemplatePlaceholdersActionInput = TAddTemplatePlacholderRecipientsFormSchema & {
   templateId: number;
diff --git a/packages/ui/primitives/dialog.tsx b/packages/ui/primitives/dialog.tsx
index f75e9cdec..8e5ed20e5 100644
--- a/packages/ui/primitives/dialog.tsx
+++ b/packages/ui/primitives/dialog.tsx
@@ -20,7 +20,7 @@ const DialogPortal = ({
 }: DialogPrimitive.DialogPortalProps & { position?: 'start' | 'end' | 'center' }) => (
   <DialogPrimitive.Portal {...props}>
     <div
-      className={cn('fixed inset-0 z-50 flex justify-center sm:items-center', {
+      className={cn('fixed inset-0 z-[9999] flex justify-center sm:items-center', {
         'items-start': position === 'start',
         'items-end': position === 'end',
         'items-center': position === 'center',
diff --git a/packages/ui/primitives/template-flow/add-template-fields.tsx b/packages/ui/primitives/template-flow/add-template-fields.tsx
index 138c73ea7..df30a4d93 100644
--- a/packages/ui/primitives/template-flow/add-template-fields.tsx
+++ b/packages/ui/primitives/template-flow/add-template-fields.tsx
@@ -11,7 +11,8 @@ import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-c
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { nanoid } from '@documenso/lib/universal/id';
-import { Field, FieldType, Recipient } from '@documenso/prisma/client';
+import type { Field, Recipient } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -29,14 +30,13 @@ import {
   DocumentFlowFormContainerStep,
 } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import { FieldItem } from '@documenso/ui/primitives/document-flow/field-item';
-import {
-  DocumentFlowStep,
-  FRIENDLY_FIELD_TYPE,
-} from '@documenso/ui/primitives/document-flow/types';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
 
+import { useStep } from '../stepper';
 // import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
-import { TAddTemplateFieldsFormSchema } from './add-template-fields.types';
+import type { TAddTemplateFieldsFormSchema } from './add-template-fields.types';
 
 const fontCaveat = Caveat({
   weight: ['500'],
@@ -56,7 +56,6 @@ export type AddTemplateFieldsFormProps = {
   hideRecipients?: boolean;
   recipients: Recipient[];
   fields: Field[];
-  numberOfSteps: number;
   onSubmit: (_data: TAddTemplateFieldsFormSchema) => void;
 };
 
@@ -65,11 +64,12 @@ export const AddTemplateFieldsFormPartial = ({
   hideRecipients = false,
   recipients,
   fields,
-  numberOfSteps,
   onSubmit,
 }: AddTemplateFieldsFormProps) => {
   const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
 
+  const { currentStep, totalSteps, previousStep } = useStep();
+
   const {
     control,
     handleSubmit,
@@ -519,8 +519,8 @@ export const AddTemplateFieldsFormPartial = ({
       <DocumentFlowFormContainerFooter>
         <DocumentFlowFormContainerStep
           title={documentFlow.title}
-          step={documentFlow.stepIndex}
-          maxStep={numberOfSteps}
+          step={currentStep}
+          maxStep={totalSteps}
         />
 
         <DocumentFlowFormContainerActions
@@ -528,7 +528,7 @@ export const AddTemplateFieldsFormPartial = ({
           disabled={isSubmitting}
           goNextLabel="Save Template"
           onGoBackClick={() => {
-            documentFlow.onBackStep?.();
+            previousStep();
             remove();
           }}
           onGoNextClick={() => void onFormSubmit()}
diff --git a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
index 498314133..ebe48b562 100644
--- a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
+++ b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
@@ -5,10 +5,10 @@ import React, { useId, useState } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Plus, Trash } from 'lucide-react';
-import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
 
 import { nanoid } from '@documenso/lib/universal/id';
-import { Field, Recipient } from '@documenso/prisma/client';
+import type { Field, Recipient } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
@@ -20,29 +20,30 @@ import {
   DocumentFlowFormContainerFooter,
   DocumentFlowFormContainerStep,
 } from '../document-flow/document-flow-root';
-import { DocumentFlowStep } from '../document-flow/types';
-import {
-  TAddTemplatePlacholderRecipientsFormSchema,
-  ZAddTemplatePlacholderRecipientsFormSchema,
-} from './add-template-placeholder-recipients.types';
+import type { DocumentFlowStep } from '../document-flow/types';
+import { useStep } from '../stepper';
+import type { TAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
+import { ZAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
 
 export type AddTemplatePlaceholderRecipientsFormProps = {
   documentFlow: DocumentFlowStep;
   recipients: Recipient[];
   fields: Field[];
-  numberOfSteps: number;
   onSubmit: (_data: TAddTemplatePlacholderRecipientsFormSchema) => void;
 };
 
 export const AddTemplatePlaceholderRecipientsFormPartial = ({
   documentFlow,
-  numberOfSteps,
   recipients,
   fields: _fields,
   onSubmit,
 }: AddTemplatePlaceholderRecipientsFormProps) => {
   const initialId = useId();
-  const [placeholderRecipientCount, setPlaceholderRecipientCount] = useState(1);
+  const [placeholderRecipientCount, setPlaceholderRecipientCount] = useState(() =>
+    recipients.length > 1 ? recipients.length + 1 : 2,
+  );
+
+  const { currentStep, totalSteps, previousStep } = useStep();
 
   const {
     control,
@@ -62,8 +63,8 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
           : [
               {
                 formId: initialId,
-                name: `John Doe`,
-                email: `johndoe@documenso.com`,
+                name: `Recipient 1`,
+                email: `recipient.1@documenso.com`,
               },
             ],
     },
@@ -81,13 +82,13 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
   });
 
   const onAddPlaceholderRecipient = () => {
-    setPlaceholderRecipientCount(placeholderRecipientCount + 1);
-
     appendSigner({
       formId: nanoid(12),
-      name: `John Doe ${placeholderRecipientCount}`,
-      email: `johndoe${placeholderRecipientCount}@documenso.com`,
+      name: `Recipient ${placeholderRecipientCount}`,
+      email: `recipient.${placeholderRecipientCount}@documenso.com`,
     });
+
+    setPlaceholderRecipientCount((count) => count + 1);
   };
 
   const onRemoveSigner = (index: number) => {
@@ -117,38 +118,24 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                     <span className="text-destructive ml-1 inline-block font-medium">*</span>
                   </Label>
 
-                  <Controller
-                    control={control}
-                    name={`signers.${index}.email`}
-                    render={({ field }) => (
-                      <Input
-                        id={`signer-${signer.id}-email`}
-                        type="email"
-                        className="bg-background mt-2"
-                        disabled={isSubmitting}
-                        onKeyDown={onKeyDown}
-                        {...field}
-                      />
-                    )}
+                  <Input
+                    id={`signer-${signer.id}-email`}
+                    type="email"
+                    value={signer.email}
+                    disabled
+                    className="bg-background mt-2"
                   />
                 </div>
 
                 <div className="flex-1">
                   <Label htmlFor={`signer-${signer.id}-name`}>Name</Label>
 
-                  <Controller
-                    control={control}
-                    name={`signers.${index}.name`}
-                    render={({ field }) => (
-                      <Input
-                        id={`signer-${signer.id}-name`}
-                        type="text"
-                        className="bg-background mt-2"
-                        disabled={isSubmitting}
-                        onKeyDown={onKeyDown}
-                        {...field}
-                      />
-                    )}
+                  <Input
+                    id={`signer-${signer.id}-name`}
+                    type="text"
+                    value={signer.name}
+                    disabled
+                    className="bg-background mt-2"
                   />
                 </div>
 
@@ -189,14 +176,15 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
       <DocumentFlowFormContainerFooter>
         <DocumentFlowFormContainerStep
           title={documentFlow.title}
-          step={documentFlow.stepIndex}
-          maxStep={numberOfSteps}
+          step={currentStep}
+          maxStep={totalSteps}
         />
 
         <DocumentFlowFormContainerActions
           loading={isSubmitting}
           disabled={isSubmitting}
-          onGoBackClick={documentFlow.onBackStep}
+          canGoBack={currentStep > 1}
+          onGoBackClick={() => previousStep()}
           onGoNextClick={() => void onFormSubmit()}
         />
       </DocumentFlowFormContainerFooter>