fix: tidy code and base on main

2025-11-10 04:22:32 +10:00 · 2023-12-14 15:28:27 +11:00
parent 31a9127c9e
commit 1eeb5fb103
13 changed files with 121 additions and 111 deletions
--- 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>
--- 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';
--- 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,
--- 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>
--- 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>
  );
--- 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">
--- 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>
  );
 };
--- 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">
--- 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;
--- 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;
--- 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',
--- 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()}
--- 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>