fix: show fields on every step while editing documents (#881)

![CleanShot 2024-01-29 at 00 51
31@2x](https://github.com/documenso/documenso/assets/55143799/d577e027-92d1-48fa-940b-1359386367c5)

![CleanShot 2024-01-29 at 00 51
39@2x](https://github.com/documenso/documenso/assets/55143799/ce2df10e-e254-4854-89a1-ba86d7b05a42)

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

@@ -30,8 +30,7 @@ import {
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
 import { FieldItem } from './field-item';
-import type { DocumentFlowStep } from './types';
-import { FRIENDLY_FIELD_TYPE } from './types';
+import { type DocumentFlowStep, FRIENDLY_FIELD_TYPE } from './types';
 
 const fontCaveat = Caveat({
   weight: ['500'],

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

@@ -28,6 +28,7 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
+import { ShowFieldItem } from './show-field-item';
 import type { DocumentFlowStep } from './types';
 
 export type AddSignersFormProps = {
@@ -42,7 +43,7 @@ export const AddSignersFormPartial = ({
   documentFlow,
   recipients,
   document,
-  fields: _fields,
+  fields,
   onSubmit,
 }: AddSignersFormProps) => {
   const { toast } = useToast();
@@ -136,6 +137,10 @@ export const AddSignersFormPartial = ({
       />
       <DocumentFlowFormContainerContent>
         <div className="flex w-full flex-col gap-y-4">
+          {fields.map((field, index) => (
+            <ShowFieldItem key={index} field={field} recipients={recipients} />
+          ))}
+
           <AnimatePresence>
             {signers.map((signer, index) => (
               <motion.div

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

@@ -38,6 +38,7 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
+import { ShowFieldItem } from './show-field-item';
 import type { DocumentFlowStep } from './types';
 
 export type AddSubjectFormProps = {
@@ -60,7 +61,6 @@ export const AddSubjectFormPartial = ({
     register,
     handleSubmit,
     formState: { errors, isSubmitting, touchedFields },
-    getValues,
     setValue,
   } = useForm<TAddSubjectFormSchema>({
     defaultValues: {
@@ -98,6 +98,10 @@ export const AddSubjectFormPartial = ({
       />
       <DocumentFlowFormContainerContent>
         <div className="flex flex-col">
+          {fields.map((field, index) => (
+            <ShowFieldItem key={index} field={field} recipients={recipients} />
+          ))}
+
           <div className="flex flex-col gap-y-4">
             <div>
               <Label htmlFor="subject">

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

@@ -17,6 +17,7 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
+import { ShowFieldItem } from './show-field-item';
 import type { DocumentFlowStep } from './types';
 
 export type AddTitleFormProps = {
@@ -29,8 +30,8 @@ export type AddTitleFormProps = {
 
 export const AddTitleFormPartial = ({
   documentFlow,
-  recipients: _recipients,
-  fields: _fields,
+  recipients,
+  fields,
   document,
   onSubmit,
 }: AddTitleFormProps) => {
@@ -55,6 +56,10 @@ export const AddTitleFormPartial = ({
         description={documentFlow.description}
       />
       <DocumentFlowFormContainerContent>
+        {fields.map((field, index) => (
+          <ShowFieldItem key={index} field={field} recipients={recipients} />
+        ))}
+
         <div className="flex flex-col">
           <div className="flex flex-col gap-y-4">
             <div>

packages/ui/primitives/document-flow/show-field-item.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import type { Prisma } from '@prisma/client';
+import { createPortal } from 'react-dom';
+
+import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
+
+import { cn } from '../../lib/utils';
+import { Card, CardContent } from '../card';
+import { FRIENDLY_FIELD_TYPE } from './types';
+
+export type ShowFieldItemProps = {
+  field: Prisma.FieldGetPayload<null>;
+  recipients: Prisma.RecipientGetPayload<null>[];
+};
+
+export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {
+  const coords = useFieldPageCoords(field);
+
+  const signerEmail =
+    recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '';
+
+  return createPortal(
+    <div
+      className={cn('pointer-events-none absolute z-10 opacity-75')}
+      style={{
+        top: `${coords.y}px`,
+        left: `${coords.x}px`,
+        height: `${coords.height}px`,
+        width: `${coords.width}px`,
+      }}
+    >
+      <Card className={cn('bg-background h-full w-full')}>
+        <CardContent
+          className={cn(
+            'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-2',
+          )}
+        >
+          {FRIENDLY_FIELD_TYPE[field.type]}
+
+          <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
+            {signerEmail}
+          </p>
+        </CardContent>
+      </Card>
+    </div>,
+    document.body,
+  );
+};