feat: add myself as signer (#1091)

## Description

This PR introduces the ability to add oneself as a signer by simply
clicking a button, rather than filling the details manually.

### "Add Myself" in the document creation flow


https://github.com/documenso/documenso/assets/25515812/0de762e3-563a-491f-a742-9078bf1d627d

### "Add Myself" in the document template creation flow


https://github.com/documenso/documenso/assets/25515812/775bae01-3f5a-4b24-abbf-a47b14ec594a


## Related Issue

Addresses
[#113](https://github.com/documenso/backlog-internal/issues/113)

## Changes Made

Added a new button that grabs the details of the logged-in user and
fills the fields *(email, name, and role)* automatically when clicked.

## Testing Performed

Tested the changes locally through the UI.

## Checklist

- [x] I have tested these changes locally and they work as expected.
- [ ] I have added/updated tests that prove the effectiveness of these
changes.
- [ ] I have updated the documentation to reflect these changes, if
applicable.
- [x] I have followed the project's coding style guidelines.
- [ ] I have addressed the code review feedback from the previous
submission, if applicable.



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced the ability for users to add themselves as signers within
documents seamlessly.
- **Enhancements**
- Improved form handling logic to accommodate new self-signer
functionality.
- Enhanced user interface elements to support the addition of self as a
signer, including a new "Add myself" button and disabling input fields
during the process.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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,8 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
   onSubmit,
 }: AddTemplatePlaceholderRecipientsFormProps) => {
   const initialId = useId();
+  const { data: session } = useSession();
+  const user = session?.user;
   const [placeholderRecipientCount, setPlaceholderRecipientCount] = useState(() =>
     recipients.length > 1 ? recipients.length + 1 : 2,
   );
@@ -50,6 +53,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
   const {
     control,
     handleSubmit,
+    getValues,
     formState: { errors, isSubmitting },
   } = useForm<TAddTemplatePlacholderRecipientsFormSchema>({
     resolver: zodResolver(ZAddTemplatePlacholderRecipientsFormSchema),
@@ -85,6 +89,15 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
     name: 'signers',
   });
 
+  const onAddPlaceholderSelfRecipient = () => {
+    appendSigner({
+      formId: nanoid(12),
+      name: user?.name ?? '',
+      email: user?.email ?? '',
+      role: RecipientRole.SIGNER,
+    });
+  };
+
   const onAddPlaceholderRecipient = () => {
     appendSigner({
       formId: nanoid(12),
@@ -203,11 +216,27 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
           error={'signers__root' in errors && errors['signers__root']}
         />
 
-        <div className="mt-4">
-          <Button type="button" disabled={isSubmitting} onClick={() => onAddPlaceholderRecipient()}>
+        <div className="mt-4 flex flex-row items-center space-x-4">
+          <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 || getValues('signers').some((signer) => signer.email === user?.email)
+            }
+            onClick={() => onAddPlaceholderSelfRecipient()}
+          >
+            <Plus className="-ml-1 mr-2 h-5 w-5" />
+            Add Myself
+          </Button>
         </div>
       </DocumentFlowFormContainerContent>