feat: add myself as signer in templates

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

@@ -5,6 +5,7 @@ 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 { useSession } from 'next-auth/react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 
 import { nanoid } from '@documenso/lib/universal/id';
@@ -41,6 +42,9 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
   onSubmit,
 }: AddTemplatePlaceholderRecipientsFormProps) => {
   const initialId = useId();
+  const { data: session } = useSession();
+  const user = session?.user;
+  const [selfSignerFormId, setSelfSignerFormId] = useState<string | undefined>(undefined);
   const [placeholderRecipientCount, setPlaceholderRecipientCount] = useState(() =>
     recipients.length > 1 ? recipients.length + 1 : 2,
   );
@@ -85,6 +89,20 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
     name: 'signers',
   });
 
+  const onAddPlaceholderSelfRecipient = () => {
+    const newSelfSignerId = nanoid(12);
+
+    appendSigner({
+      formId: newSelfSignerId,
+      name: user?.name ?? '',
+      email: user?.email ?? '',
+      role: RecipientRole.SIGNER,
+    });
+
+    setSelfSignerFormId(newSelfSignerId);
+    setPlaceholderRecipientCount((count) => count + 1);
+  };
+
   const onAddPlaceholderRecipient = () => {
     appendSigner({
       formId: nanoid(12),
@@ -98,6 +116,10 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
 
   const onRemoveSigner = (index: number) => {
     removeSigner(index);
+
+    if (signers[index].formId === selfSignerFormId) {
+      setSelfSignerFormId(undefined);
+    }
   };
 
   return (
@@ -203,11 +225,25 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
           error={'signers__root' in errors && errors['signers__root']}
         />
 
-        <div className="mt-4">
+        <div className="mt-4 flex flex-row items-center space-x-4">
-          <Button type="button" disabled={isSubmitting} onClick={() => onAddPlaceholderRecipient()}>
+          <Button
+            type="button"
+            className="flex-1"
+            disabled={isSubmitting}
+            onClick={() => onAddPlaceholderRecipient()}
+          >
             <Plus className="-ml-1 mr-2 h-5 w-5" />
             Add Placeholder Recipient
           </Button>
+          <Button
+            type="button"
+            className="dark:bg-muted dark:hover:bg-muted/80 bg-black/5 hover:bg-black/10"
+            disabled={isSubmitting || !!selfSignerFormId}
+            onClick={() => onAddPlaceholderSelfRecipient()}
+          >
+            <Plus className="-ml-1 mr-2 h-5 w-5" />
+            Add Myself
+          </Button>
         </div>
       </DocumentFlowFormContainerContent>