fix: refactor

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

@@ -5,6 +5,7 @@ import React, { useId, useMemo, useState } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { motion } from 'framer-motion';
 import { InfoIcon, Plus, Trash } from 'lucide-react';
+import { useSession } from 'next-auth/react';
 import { useFieldArray, useForm } from 'react-hook-form';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
@@ -60,6 +61,8 @@ export const AddSignersFormPartial = ({
 }: AddSignersFormProps) => {
   const { toast } = useToast();
   const { remaining } = useLimits();
+  const { data: session } = useSession();
+  const user = session?.user;
 
   const initialId = useId();
 
@@ -135,6 +138,18 @@ export const AddSignersFormPartial = ({
     );
   };
 
+  const onAddSelfSigner = () => {
+    const newSelfSignerId = nanoid(12);
+
+    appendSigner({
+      formId: newSelfSignerId,
+      name: user?.name ?? '',
+      email: user?.email ?? '',
+      role: RecipientRole.SIGNER,
+      actionAuth: undefined,
+    });
+  };
+
   const onAddSigner = () => {
     appendSigner({
       formId: nanoid(12),
@@ -209,8 +224,12 @@ export const AddSignersFormPartial = ({
                           <Input
                             type="email"
                             placeholder="Email"
-                            disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
                             {...field}
+                            disabled={
+                              isSubmitting ||
+                              hasBeenSentToRecipientId(signer.nativeId) ||
+                              signers[index].email === user?.email
+                            }
                             onKeyDown={onKeyDown}
                           />
                         </FormControl>
@@ -237,8 +256,12 @@ export const AddSignersFormPartial = ({
                         <FormControl>
                           <Input
                             placeholder="Name"
-                            disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
                             {...field}
+                            disabled={
+                              isSubmitting ||
+                              hasBeenSentToRecipientId(signer.nativeId) ||
+                              signers[index].email === user?.email
+                            }
                             onKeyDown={onKeyDown}
                           />
                         </FormControl>
@@ -403,32 +426,46 @@ export const AddSignersFormPartial = ({
             >
               <Button
                 type="button"
+                className="flex-1"
                 disabled={isSubmitting || signers.length >= remaining.recipients}
                 onClick={() => onAddSigner()}
               >
                 <Plus className="-ml-1 mr-2 h-5 w-5" />
                 Add Signer
               </Button>
-
-              {!alwaysShowAdvancedSettings && isDocumentEnterprise && (
-                <div className="flex flex-row items-center">
-                  <Checkbox
-                    id="showAdvancedRecipientSettings"
-                    className="h-5 w-5"
-                    checkClassName="dark:text-white text-primary"
-                    checked={showAdvancedSettings}
-                    onCheckedChange={(value) => setShowAdvancedSettings(Boolean(value))}
-                  />
-
-                  <label
-                    className="text-muted-foreground ml-2 text-sm"
-                    htmlFor="showAdvancedRecipientSettings"
-                  >
-                    Show advanced settings
-                  </label>
-                </div>
-              )}
+              <Button
+                type="button"
+                variant="secondary"
+                className="dark:bg-muted dark:hover:bg-muted/80 bg-black/5 hover:bg-black/10"
+                disabled={
+                  isSubmitting ||
+                  form.getValues('signers').some((signer) => signer.email === user?.email)
+                }
+                onClick={() => onAddSelfSigner()}
+              >
+                <Plus className="-ml-1 mr-2 h-5 w-5" />
+                Add myself
+              </Button>
             </div>
+
+            {!alwaysShowAdvancedSettings && isDocumentEnterprise && (
+              <div className="mt-4 flex flex-row items-center">
+                <Checkbox
+                  id="showAdvancedRecipientSettings"
+                  className="h-5 w-5"
+                  checkClassName="dark:text-white text-primary"
+                  checked={showAdvancedSettings}
+                  onCheckedChange={(value) => setShowAdvancedSettings(Boolean(value))}
+                />
+
+                <label
+                  className="text-muted-foreground ml-2 text-sm"
+                  htmlFor="showAdvancedRecipientSettings"
+                >
+                  Show advanced settings
+                </label>
+              </div>
+            )}
           </Form>
         </AnimateGenericFadeInOut>
       </DocumentFlowFormContainerContent>

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,17 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
     name: 'signers',
   });
 
+  const onAddPlaceholderSelfRecipient = () => {
+    const newSelfSignerId = nanoid(12);
+
+    appendSigner({
+      formId: newSelfSignerId,
+      name: user?.name ?? '',
+      email: user?.email ?? '',
+      role: RecipientRole.SIGNER,
+    });
+  };
+
   const onAddPlaceholderRecipient = () => {
     appendSigner({
       formId: nanoid(12),
@@ -203,11 +218,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>