fix: tidy code and base on main

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',

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()}

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>