fix: wip

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

@@ -69,7 +69,6 @@ const DEFAULT_WIDTH_PX = MIN_WIDTH_PX * 2.5;
 
 export type AddTemplateFieldsFormProps = {
   documentFlow: DocumentFlowStep;
-  hideRecipients?: boolean;
   recipients: Recipient[];
   fields: Field[];
   onSubmit: (_data: TAddTemplateFieldsFormSchema) => void;
@@ -79,7 +78,6 @@ export type AddTemplateFieldsFormProps = {
 
 export const AddTemplateFieldsFormPartial = ({
   documentFlow,
-  hideRecipients = false,
   recipients,
   fields,
   onSubmit,
@@ -483,12 +481,6 @@ export const AddTemplateFieldsFormPartial = ({
     form.setValue('fields', updatedFields);
   };
 
-  const isTypedSignatureEnabled = form.watch('typedSignatureEnabled');
-
-  const handleTypedSignatureChange = (value: boolean) => {
-    form.setValue('typedSignatureEnabled', value, { shouldDirty: true });
-  };
-
   return (
     <>
       {showAdvancedSettings && currentField ? (
@@ -559,7 +551,6 @@ export const AddTemplateFieldsFormPartial = ({
                       setCurrentField(field);
                       handleAdvancedSettings();
                     }}
-                    hideRecipients={hideRecipients}
                     active={activeFieldId === field.formId}
                     onFieldActivate={() => setActiveFieldId(field.formId)}
                     onFieldDeactivate={() => setActiveFieldId(null)}
@@ -567,99 +558,97 @@ export const AddTemplateFieldsFormPartial = ({
                 );
               })}
 
-              {!hideRecipients && (
-                <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
-                  <PopoverTrigger asChild>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      role="combobox"
-                      className={cn(
-                        'bg-background text-muted-foreground hover:text-foreground mb-12 mt-2 justify-between font-normal',
-                        selectedSignerStyles.default.base,
-                      )}
-                    >
-                      {selectedSigner?.email && (
-                        <span className="flex-1 truncate text-left">
-                          {selectedSigner?.name} ({selectedSigner?.email})
-                        </span>
-                      )}
+              <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
+                <PopoverTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    role="combobox"
+                    className={cn(
+                      'bg-background text-muted-foreground hover:text-foreground mb-12 mt-2 justify-between font-normal',
+                      selectedSignerStyles.default.base,
+                    )}
+                  >
+                    {selectedSigner?.email && (
+                      <span className="flex-1 truncate text-left">
+                        {selectedSigner?.name} ({selectedSigner?.email})
+                      </span>
+                    )}
 
-                      {!selectedSigner?.email && (
-                        <span className="gradie flex-1 truncate text-left">
-                          {selectedSigner?.email}
-                        </span>
-                      )}
+                    {!selectedSigner?.email && (
+                      <span className="gradie flex-1 truncate text-left">
+                        {selectedSigner?.email}
+                      </span>
+                    )}
 
-                      <ChevronsUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                  </PopoverTrigger>
+                    <ChevronsUpDown className="ml-2 h-4 w-4" />
+                  </Button>
+                </PopoverTrigger>
 
-                  <PopoverContent className="p-0" align="start">
-                    <Command value={selectedSigner?.email}>
-                      <CommandInput />
+                <PopoverContent className="p-0" align="start">
+                  <Command value={selectedSigner?.email}>
+                    <CommandInput />
 
-                      <CommandEmpty>
-                        <span className="text-muted-foreground inline-block px-4">
-                          <Trans>No recipient matching this description was found.</Trans>
-                        </span>
-                      </CommandEmpty>
+                    <CommandEmpty>
+                      <span className="text-muted-foreground inline-block px-4">
+                        <Trans>No recipient matching this description was found.</Trans>
+                      </span>
+                    </CommandEmpty>
 
-                      {recipientsByRoleToDisplay.map(([role, roleRecipients], roleIndex) => (
-                        <CommandGroup key={roleIndex}>
-                          <div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
-                            {_(RECIPIENT_ROLES_DESCRIPTION[role].roleNamePlural)}
+                    {recipientsByRoleToDisplay.map(([role, roleRecipients], roleIndex) => (
+                      <CommandGroup key={roleIndex}>
+                        <div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
+                          {_(RECIPIENT_ROLES_DESCRIPTION[role].roleNamePlural)}
+                        </div>
+
+                        {roleRecipients.length === 0 && (
+                          <div
+                            key={`${role}-empty`}
+                            className="text-muted-foreground/80 px-4 pb-4 pt-2.5 text-center text-xs"
+                          >
+                            <Trans>No recipients with this role</Trans>
                           </div>
+                        )}
 
-                          {roleRecipients.length === 0 && (
-                            <div
-                              key={`${role}-empty`}
-                              className="text-muted-foreground/80 px-4 pb-4 pt-2.5 text-center text-xs"
+                        {roleRecipients.map((recipient) => (
+                          <CommandItem
+                            key={recipient.id}
+                            className={cn(
+                              'px-2 last:mb-1 [&:not(:first-child)]:mt-1',
+                              getSignerColorStyles(
+                                Math.max(
+                                  recipients.findIndex((r) => r.id === recipient.id),
+                                  0,
+                                ),
+                              ).default.comboxBoxItem,
+                            )}
+                            onSelect={() => {
+                              setSelectedSigner(recipient);
+                              setShowRecipientsSelector(false);
+                            }}
+                          >
+                            <span
+                              className={cn('text-foreground/70 truncate', {
+                                'text-foreground/80': recipient === selectedSigner,
+                              })}
                             >
-                              <Trans>No recipients with this role</Trans>
-                            </div>
-                          )}
-
-                          {roleRecipients.map((recipient) => (
-                            <CommandItem
-                              key={recipient.id}
-                              className={cn(
-                                'px-2 last:mb-1 [&:not(:first-child)]:mt-1',
-                                getSignerColorStyles(
-                                  Math.max(
-                                    recipients.findIndex((r) => r.id === recipient.id),
-                                    0,
-                                  ),
-                                ).default.comboxBoxItem,
+                              {recipient.name && (
+                                <span title={`${recipient.name} (${recipient.email})`}>
+                                  {recipient.name} ({recipient.email})
+                                </span>
                               )}
-                              onSelect={() => {
-                                setSelectedSigner(recipient);
-                                setShowRecipientsSelector(false);
-                              }}
-                            >
-                              <span
-                                className={cn('text-foreground/70 truncate', {
-                                  'text-foreground/80': recipient === selectedSigner,
-                                })}
-                              >
-                                {recipient.name && (
-                                  <span title={`${recipient.name} (${recipient.email})`}>
-                                    {recipient.name} ({recipient.email})
-                                  </span>
-                                )}
 
-                                {!recipient.name && (
-                                  <span title={recipient.email}>{recipient.email}</span>
-                                )}
-                              </span>
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      ))}
-                    </Command>
-                  </PopoverContent>
-                </Popover>
-              )}
+                              {!recipient.name && (
+                                <span title={recipient.email}>{recipient.email}</span>
+                              )}
+                            </span>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    ))}
+                  </Command>
+                </PopoverContent>
+              </Popover>
 
               <Form {...form}>
                 <FormField

packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx

@@ -25,6 +25,10 @@ import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-messa
 import { Input } from '@documenso/ui/primitives/input';
 import { toast } from '@documenso/ui/primitives/use-toast';
 
+import {
+  DocumentReadOnlyFields,
+  mapFieldsWithRecipients,
+} from '../../components/document/document-read-only-fields';
 import { Checkbox } from '../checkbox';
 import {
   DocumentFlowFormContainerActions,
@@ -33,7 +37,6 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from '../document-flow/document-flow-root';
-import { ShowFieldItem } from '../document-flow/show-field-item';
 import { SigningOrderConfirmation } from '../document-flow/signing-order-confirmation';
 import type { DocumentFlowStep } from '../document-flow/types';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
@@ -386,10 +389,9 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
         description={documentFlow.description}
       />
       <DocumentFlowFormContainerContent>
-        {isDocumentPdfLoaded &&
-          fields.map((field, index) => (
-            <ShowFieldItem key={index} field={field} recipients={recipients} />
-          ))}
+        {isDocumentPdfLoaded && (
+          <DocumentReadOnlyFields fields={mapFieldsWithRecipients(fields, recipients)} />
+        )}
 
         <AnimateGenericFadeInOut motionKey={showAdvancedSettings ? 'Show' : 'Hide'}>
           <Form {...form}>
@@ -447,6 +449,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                     ref={provided.innerRef}
                     className="flex w-full flex-col gap-y-2"
                   >
+                    {/* todo */}
                     {signers.map((signer, index) => (
                       <Draggable
                         key={`${signer.id}-${signer.signingOrder}`}

packages/ui/primitives/template-flow/add-template-settings.tsx

@@ -46,6 +46,10 @@ import {
 } from '@documenso/ui/primitives/form/form';
 
 import { DocumentEmailCheckboxes } from '../../components/document/document-email-checkboxes';
+import {
+  DocumentReadOnlyFields,
+  mapFieldsWithRecipients,
+} from '../../components/document/document-read-only-fields';
 import { Combobox } from '../combobox';
 import {
   DocumentFlowFormContainerActions,
@@ -54,7 +58,6 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from '../document-flow/document-flow-root';
-import { ShowFieldItem } from '../document-flow/show-field-item';
 import type { DocumentFlowStep } from '../document-flow/types';
 import { Input } from '../input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
@@ -146,10 +149,9 @@ export const AddTemplateSettingsFormPartial = ({
       />
 
       <DocumentFlowFormContainerContent>
-        {isDocumentPdfLoaded &&
-          fields.map((field, index) => (
-            <ShowFieldItem key={index} field={field} recipients={recipients} />
-          ))}
+        {isDocumentPdfLoaded && (
+          <DocumentReadOnlyFields fields={mapFieldsWithRecipients(fields, recipients)} />
+        )}
 
         <Form {...form}>
           <fieldset