feat: templates

packages/ui/primitives/document-dropzone.tsx

@@ -75,10 +75,20 @@ const DocumentDropzoneCardCenterVariants: Variants = {
   },
 };
 
+const DocumentDescription = {
+  document: {
+    headline: 'Add a document',
+  },
+  template: {
+    headline: 'Upload Template Document',
+  },
+};
+
 export type DocumentDropzoneProps = {
   className?: string;
   disabled?: boolean;
   onDrop?: (_file: File) => void | Promise<void>;
+  type?: 'document' | 'template';
   [key: string]: unknown;
 };
 
@@ -86,6 +96,7 @@ export const DocumentDropzone = ({
   className,
   onDrop,
   disabled,
+  type = 'document',
   ...props
 }: DocumentDropzoneProps) => {
   const { getRootProps, getInputProps } = useDropzone({
@@ -157,7 +168,7 @@ export const DocumentDropzone = ({
           <input {...getInputProps()} />
 
           <p className="group-hover:text-foreground text-muted-foreground mt-8 font-medium">
-            Add a document
+            {DocumentDescription[type].headline}
           </p>
 
           <p className="text-muted-foreground/80 mt-1 text-sm ">Drag & drop your document here.</p>

packages/ui/primitives/document-flow/types.ts

@@ -24,7 +24,7 @@ export const ZDocumentFlowFormSchema = z.object({
       formId: z.string().min(1),
       nativeId: z.number().optional(),
       type: z.nativeEnum(FieldType),
-      signerEmail: z.string().min(1),
+      signerEmail: z.string().min(1).optional(),
       pageNumber: z.number().min(1),
       pageX: z.number().min(0),
       pageY: z.number().min(0),

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

@@ -0,0 +1,539 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { Caveat } from 'next/font/google';
+
+import { ChevronsUpDown } from 'lucide-react';
+import { useFieldArray, useForm } from 'react-hook-form';
+
+import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
+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 { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from '@documenso/ui/primitives/command';
+import {
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  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 { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+
+// import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import { TAddTemplateFieldsFormSchema } from './add-template-fields.types';
+
+const fontCaveat = Caveat({
+  weight: ['500'],
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-caveat',
+});
+
+const DEFAULT_HEIGHT_PERCENT = 5;
+const DEFAULT_WIDTH_PERCENT = 15;
+
+const MIN_HEIGHT_PX = 60;
+const MIN_WIDTH_PX = 200;
+
+export type AddTemplateFieldsFormProps = {
+  documentFlow: DocumentFlowStep;
+  hideRecipients?: boolean;
+  recipients: Recipient[];
+  fields: Field[];
+  numberOfSteps: number;
+  onSubmit: (_data: TAddTemplateFieldsFormSchema) => void;
+};
+
+export const AddTemplateFieldsFormPartial = ({
+  documentFlow,
+  hideRecipients = false,
+  recipients,
+  fields,
+  numberOfSteps,
+  onSubmit,
+}: AddTemplateFieldsFormProps) => {
+  const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<TAddTemplateFieldsFormSchema>({
+    defaultValues: {
+      fields: fields.map((field) => ({
+        nativeId: field.id,
+        formId: `${field.id}-${field.templateId}`,
+        pageNumber: field.page,
+        type: field.type,
+        pageX: Number(field.positionX),
+        pageY: Number(field.positionY),
+        pageWidth: Number(field.width),
+        pageHeight: Number(field.height),
+        signerId: field.recipientId ?? -1,
+        signerEmail:
+          recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '',
+        signerToken:
+          recipients.find((recipient) => recipient.id === field.recipientId)?.templateToken ?? '',
+      })),
+    },
+  });
+
+  const onFormSubmit = handleSubmit(onSubmit);
+
+  const {
+    append,
+    remove,
+    update,
+    fields: localFields,
+  } = useFieldArray({
+    control,
+    name: 'fields',
+  });
+
+  const [selectedField, setSelectedField] = useState<FieldType | null>(null);
+  const [selectedSigner, setSelectedSigner] = useState<Recipient | null>(null);
+  const [showRecipientsSelector, setShowRecipientsSelector] = useState(false);
+
+  const [isFieldWithinBounds, setIsFieldWithinBounds] = useState(false);
+  const [coords, setCoords] = useState({
+    x: 0,
+    y: 0,
+  });
+
+  const fieldBounds = useRef({
+    height: 0,
+    width: 0,
+  });
+
+  const onMouseMove = useCallback(
+    (event: MouseEvent) => {
+      setIsFieldWithinBounds(
+        isWithinPageBounds(
+          event,
+          PDF_VIEWER_PAGE_SELECTOR,
+          fieldBounds.current.width,
+          fieldBounds.current.height,
+        ),
+      );
+
+      setCoords({
+        x: event.clientX - fieldBounds.current.width / 2,
+        y: event.clientY - fieldBounds.current.height / 2,
+      });
+    },
+    [isWithinPageBounds],
+  );
+
+  const onMouseClick = useCallback(
+    (event: MouseEvent) => {
+      if (!selectedField || !selectedSigner) {
+        return;
+      }
+
+      const $page = getPage(event, PDF_VIEWER_PAGE_SELECTOR);
+
+      if (
+        !$page ||
+        !isWithinPageBounds(
+          event,
+          PDF_VIEWER_PAGE_SELECTOR,
+          fieldBounds.current.width,
+          fieldBounds.current.height,
+        )
+      ) {
+        setSelectedField(null);
+        return;
+      }
+
+      const { top, left, height, width } = getBoundingClientRect($page);
+
+      const pageNumber = parseInt($page.getAttribute('data-page-number') ?? '1', 10);
+
+      // Calculate x and y as a percentage of the page width and height
+      let pageX = ((event.pageX - left) / width) * 100;
+      let pageY = ((event.pageY - top) / height) * 100;
+
+      // Get the bounds as a percentage of the page width and height
+      const fieldPageWidth = (fieldBounds.current.width / width) * 100;
+      const fieldPageHeight = (fieldBounds.current.height / height) * 100;
+
+      // And center it based on the bounds
+      pageX -= fieldPageWidth / 2;
+      pageY -= fieldPageHeight / 2;
+
+      append({
+        formId: nanoid(12),
+        type: selectedField,
+        pageNumber,
+        pageX,
+        pageY,
+        pageWidth: fieldPageWidth,
+        pageHeight: fieldPageHeight,
+        signerEmail: selectedSigner.email,
+        signerId: selectedSigner.id,
+        signerToken: selectedSigner.templateToken ?? '',
+      });
+
+      setIsFieldWithinBounds(false);
+      setSelectedField(null);
+    },
+    [append, isWithinPageBounds, selectedField, selectedSigner, getPage],
+  );
+
+  const onFieldResize = useCallback(
+    (node: HTMLElement, index: number) => {
+      const field = localFields[index];
+
+      const $page = window.document.querySelector<HTMLElement>(
+        `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
+      );
+
+      if (!$page) {
+        return;
+      }
+
+      const {
+        x: pageX,
+        y: pageY,
+        width: pageWidth,
+        height: pageHeight,
+      } = getFieldPosition($page, node);
+
+      update(index, {
+        ...field,
+        pageX,
+        pageY,
+        pageWidth,
+        pageHeight,
+      });
+    },
+    [getFieldPosition, localFields, update],
+  );
+
+  const onFieldMove = useCallback(
+    (node: HTMLElement, index: number) => {
+      const field = localFields[index];
+
+      const $page = window.document.querySelector<HTMLElement>(
+        `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
+      );
+
+      if (!$page) {
+        return;
+      }
+
+      const { x: pageX, y: pageY } = getFieldPosition($page, node);
+
+      update(index, {
+        ...field,
+        pageX,
+        pageY,
+      });
+    },
+    [getFieldPosition, localFields, update],
+  );
+
+  useEffect(() => {
+    if (selectedField) {
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('mouseup', onMouseClick);
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseClick);
+    };
+  }, [onMouseClick, onMouseMove, selectedField]);
+
+  useEffect(() => {
+    const observer = new MutationObserver((_mutations) => {
+      const $page = document.querySelector(PDF_VIEWER_PAGE_SELECTOR);
+
+      if (!$page) {
+        return;
+      }
+
+      const { height, width } = $page.getBoundingClientRect();
+
+      fieldBounds.current = {
+        height: Math.max(height * (DEFAULT_HEIGHT_PERCENT / 100), MIN_HEIGHT_PX),
+        width: Math.max(width * (DEFAULT_WIDTH_PERCENT / 100), MIN_WIDTH_PX),
+      };
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    setSelectedSigner(recipients[0]);
+  }, [recipients]);
+
+  return (
+    <>
+      <DocumentFlowFormContainerContent>
+        <div className="flex flex-col">
+          {selectedField && (
+            <Card
+              className={cn(
+                'bg-background pointer-events-none fixed z-50 cursor-pointer transition-opacity',
+                {
+                  'border-primary': isFieldWithinBounds,
+                  'opacity-50': !isFieldWithinBounds,
+                },
+              )}
+              style={{
+                top: coords.y,
+                left: coords.x,
+                height: fieldBounds.current.height,
+                width: fieldBounds.current.width,
+              }}
+            >
+              <CardContent className="text-foreground flex h-full w-full items-center justify-center p-2">
+                {FRIENDLY_FIELD_TYPE[selectedField]}
+              </CardContent>
+            </Card>
+          )}
+
+          {localFields.map((field, index) => (
+            <FieldItem
+              key={index}
+              field={field}
+              disabled={selectedSigner?.email !== field.signerEmail}
+              minHeight={fieldBounds.current.height}
+              minWidth={fieldBounds.current.width}
+              passive={isFieldWithinBounds && !!selectedField}
+              onResize={(options) => onFieldResize(options, index)}
+              onMove={(options) => onFieldMove(options, index)}
+              onRemove={() => remove(index)}
+            />
+          ))}
+
+          {!hideRecipients && (
+            <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
+              <PopoverTrigger asChild>
+                <Button
+                  type="button"
+                  variant="outline"
+                  role="combobox"
+                  className="bg-background text-muted-foreground mb-12 justify-between font-normal"
+                >
+                  {selectedSigner?.email && (
+                    <span className="flex-1 truncate text-left">
+                      {selectedSigner?.name} ({selectedSigner?.email})
+                    </span>
+                  )}
+
+                  {!selectedSigner?.email && (
+                    <span className="flex-1 truncate text-left">{selectedSigner?.email}</span>
+                  )}
+
+                  <ChevronsUpDown className="ml-2 h-4 w-4" />
+                </Button>
+              </PopoverTrigger>
+
+              <PopoverContent className="p-0" align="start">
+                <Command>
+                  <CommandInput />
+                  <CommandEmpty>
+                    <span className="text-muted-foreground inline-block px-4">
+                      No recipient matching this description was found.
+                    </span>
+                  </CommandEmpty>
+
+                  <CommandGroup>
+                    {recipients.map((recipient, index) => (
+                      <CommandItem
+                        key={index}
+                        className={cn({
+                          // 'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
+                        })}
+                        onSelect={() => {
+                          setSelectedSigner(recipient);
+                          setShowRecipientsSelector(false);
+                        }}
+                      >
+                        {/* {recipient.sendStatus !== SendStatus.SENT ? (
+                          <Check
+                            aria-hidden={recipient !== selectedSigner}
+                            className={cn('mr-2 h-4 w-4 flex-shrink-0', {
+                              'opacity-0': recipient !== selectedSigner,
+                              'opacity-100': recipient === selectedSigner,
+                            })}
+                          />
+                        ) : (
+                          <Tooltip>
+                            <TooltipTrigger>
+                              <Info className="mr-2 h-4 w-4" />
+                            </TooltipTrigger>
+                            <TooltipContent className="max-w-xs">
+                              This document has already been sent to this recipient. You can no
+                              longer edit this recipient.
+                            </TooltipContent>
+                          </Tooltip>
+                        )} */}
+
+                        {recipient.name && (
+                          <span
+                            className="truncate"
+                            title={`${recipient.name} (${recipient.email})`}
+                          >
+                            {recipient.name} ({recipient.email})
+                          </span>
+                        )}
+
+                        {!recipient.name && (
+                          <span className="truncate" title={recipient.email}>
+                            {recipient.email}
+                          </span>
+                        )}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          )}
+
+          <div className="-mx-2 flex-1 overflow-y-auto px-2">
+            <div className="grid grid-cols-2 gap-x-4 gap-y-8">
+              <button
+                type="button"
+                className="group h-full w-full"
+                disabled={!selectedSigner}
+                onClick={() => setSelectedField(FieldType.SIGNATURE)}
+                onMouseDown={() => setSelectedField(FieldType.SIGNATURE)}
+                data-selected={selectedField === FieldType.SIGNATURE ? true : undefined}
+              >
+                <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
+                  <CardContent className="flex flex-col items-center justify-center px-6 py-4">
+                    <p
+                      className={cn(
+                        'text-muted-foreground group-data-[selected]:text-foreground w-full truncate text-3xl font-medium',
+                        fontCaveat.className,
+                      )}
+                    >
+                      {selectedSigner?.name || 'Signature'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-center text-xs">Signature</p>
+                  </CardContent>
+                </Card>
+              </button>
+
+              <button
+                type="button"
+                className="group h-full w-full"
+                disabled={!selectedSigner}
+                onClick={() => setSelectedField(FieldType.EMAIL)}
+                onMouseDown={() => setSelectedField(FieldType.EMAIL)}
+                data-selected={selectedField === FieldType.EMAIL ? true : undefined}
+              >
+                <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
+                  <CardContent className="flex flex-col items-center justify-center px-6 py-4">
+                    <p
+                      className={cn(
+                        'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
+                      )}
+                    >
+                      {'Email'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-xs">Email</p>
+                  </CardContent>
+                </Card>
+              </button>
+
+              <button
+                type="button"
+                className="group h-full w-full"
+                disabled={!selectedSigner}
+                onClick={() => setSelectedField(FieldType.NAME)}
+                onMouseDown={() => setSelectedField(FieldType.NAME)}
+                data-selected={selectedField === FieldType.NAME ? true : undefined}
+              >
+                <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
+                  <CardContent className="flex flex-col items-center justify-center px-6 py-4">
+                    <p
+                      className={cn(
+                        'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
+                      )}
+                    >
+                      {'Name'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-xs">Name</p>
+                  </CardContent>
+                </Card>
+              </button>
+
+              <button
+                type="button"
+                className="group h-full w-full"
+                disabled={!selectedSigner}
+                onClick={() => setSelectedField(FieldType.DATE)}
+                onMouseDown={() => setSelectedField(FieldType.DATE)}
+                data-selected={selectedField === FieldType.DATE ? true : undefined}
+              >
+                <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
+                  <CardContent className="flex flex-col items-center justify-center px-6 py-4">
+                    <p
+                      className={cn(
+                        'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
+                      )}
+                    >
+                      {'Date'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-xs">Date</p>
+                  </CardContent>
+                </Card>
+              </button>
+            </div>
+          </div>
+        </div>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep
+          title={documentFlow.title}
+          step={documentFlow.stepIndex}
+          maxStep={numberOfSteps}
+        />
+
+        <DocumentFlowFormContainerActions
+          loading={isSubmitting}
+          disabled={isSubmitting}
+          goNextLabel="Save Template"
+          onGoBackClick={() => {
+            documentFlow.onBackStep?.();
+            remove();
+          }}
+          onGoNextClick={() => void onFormSubmit()}
+        />
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

packages/ui/primitives/template-flow/add-template-fields.types.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod';
+
+import { FieldType } from '@documenso/prisma/client';
+
+export const ZAddTemplateFieldsFormSchema = z.object({
+  fields: z.array(
+    z.object({
+      formId: z.string().min(1),
+      nativeId: z.number().optional(),
+      type: z.nativeEnum(FieldType),
+      signerEmail: z.string().min(1),
+      signerToken: z.string(),
+      signerId: z.number().optional(),
+      pageNumber: z.number().min(1),
+      pageX: z.number().min(0),
+      pageY: z.number().min(0),
+      pageWidth: z.number().min(0),
+      pageHeight: z.number().min(0),
+    }),
+  ),
+});
+
+export type TAddTemplateFieldsFormSchema = z.infer<typeof ZAddTemplateFieldsFormSchema>;

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

@@ -0,0 +1,205 @@
+'use client';
+
+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 { nanoid } from '@documenso/lib/universal/id';
+import { 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';
+import { Label } from '@documenso/ui/primitives/label';
+
+import {
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerStep,
+} from '../document-flow/document-flow-root';
+import { DocumentFlowStep } from '../document-flow/types';
+import {
+  TAddTemplatePlacholderRecipientsFormSchema,
+  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 {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<TAddTemplatePlacholderRecipientsFormSchema>({
+    resolver: zodResolver(ZAddTemplatePlacholderRecipientsFormSchema),
+    defaultValues: {
+      signers:
+        recipients.length > 0
+          ? recipients.map((recipient) => ({
+              nativeId: recipient.id,
+              formId: String(recipient.id),
+              name: recipient.name,
+              email: recipient.email,
+            }))
+          : [
+              {
+                formId: initialId,
+                name: `John Doe`,
+                email: `johndoe@documenso.com`,
+              },
+            ],
+    },
+  });
+
+  const onFormSubmit = handleSubmit(onSubmit);
+
+  const {
+    append: appendSigner,
+    fields: signers,
+    remove: removeSigner,
+  } = useFieldArray({
+    control,
+    name: 'signers',
+  });
+
+  const onAddPlaceholderRecipient = () => {
+    setPlaceholderRecipientCount(placeholderRecipientCount + 1);
+
+    appendSigner({
+      formId: nanoid(12),
+      name: `John Doe ${placeholderRecipientCount}`,
+      email: `johndoe${placeholderRecipientCount}@documenso.com`,
+    });
+  };
+
+  const onRemoveSigner = (index: number) => {
+    removeSigner(index);
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' && event.target instanceof HTMLInputElement) {
+      onAddPlaceholderRecipient();
+    }
+  };
+
+  return (
+    <>
+      <DocumentFlowFormContainerContent>
+        <div className="flex w-full flex-col gap-y-4">
+          <AnimatePresence>
+            {signers.map((signer, index) => (
+              <motion.div
+                key={signer.id}
+                data-native-id={signer.nativeId}
+                className="flex flex-wrap items-end gap-x-4"
+              >
+                <div className="flex-1">
+                  <Label htmlFor={`signer-${signer.id}-email`}>
+                    Email
+                    <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}
+                      />
+                    )}
+                  />
+                </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}
+                      />
+                    )}
+                  />
+                </div>
+
+                <div>
+                  <button
+                    type="button"
+                    className="inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                    disabled={isSubmitting || signers.length === 1}
+                    onClick={() => onRemoveSigner(index)}
+                  >
+                    <Trash className="h-5 w-5" />
+                  </button>
+                </div>
+
+                <div className="w-full">
+                  <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.email} />
+                  <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.name} />
+                </div>
+              </motion.div>
+            ))}
+          </AnimatePresence>
+        </div>
+
+        <FormErrorMessage
+          className="mt-2"
+          // Dirty hack to handle errors when .root is populated for an array type
+          error={'signers__root' in errors && errors['signers__root']}
+        />
+
+        <div className="mt-4">
+          <Button type="button" disabled={isSubmitting} onClick={() => onAddPlaceholderRecipient()}>
+            <Plus className="-ml-1 mr-2 h-5 w-5" />
+            Add Placeholder Recipient
+          </Button>
+        </div>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep
+          title={documentFlow.title}
+          step={documentFlow.stepIndex}
+          maxStep={numberOfSteps}
+        />
+
+        <DocumentFlowFormContainerActions
+          loading={isSubmitting}
+          disabled={isSubmitting}
+          onGoBackClick={documentFlow.onBackStep}
+          onGoNextClick={() => void onFormSubmit()}
+        />
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

packages/ui/primitives/template-flow/add-template-placeholder-recipients.types.ts

@@ -0,0 +1,26 @@
+import { z } from 'zod';
+
+export const ZAddTemplatePlacholderRecipientsFormSchema = z
+  .object({
+    signers: z.array(
+      z.object({
+        formId: z.string().min(1),
+        nativeId: z.number().optional(),
+        email: z.string().min(1).email(),
+        name: z.string().optional(),
+      }),
+    ),
+  })
+  .refine(
+    (schema) => {
+      const emails = schema.signers.map((signer) => signer.email.toLowerCase());
+
+      return new Set(emails).size === emails.length;
+    },
+    // Dirty hack to handle errors when .root is populated for an array type
+    { message: 'Signers must have unique emails', path: ['signers__root'] },
+  );
+
+export type TAddTemplatePlacholderRecipientsFormSchema = z.infer<
+  typeof ZAddTemplatePlacholderRecipientsFormSchema
+>;