From 9186cb4d7b220eb9e65c307fe0f7709286d0b182 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Sat, 9 Sep 2023 10:42:03 +0000
Subject: [PATCH 1/2] fix: hide popover when user selects a recipients

---
 .../primitives/document-flow/add-fields.tsx   | 83 ++++++++++---------
 packages/ui/primitives/popover.tsx            |  4 +-
 2 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/packages/ui/primitives/document-flow/add-fields.tsx b/packages/ui/primitives/document-flow/add-fields.tsx
index c56e91b49..62daf803b 100644
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@@ -22,7 +22,12 @@ import {
   CommandInput,
   CommandItem,
 } from '@documenso/ui/primitives/command';
-import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from '@documenso/ui/primitives/popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 import { TAddFieldsFormSchema } from './add-fields.types';
@@ -324,7 +329,7 @@ export const AddFieldsFormPartial = ({
                 >
                   {selectedSigner?.email && (
                     <span className="flex-1 truncate text-left">
-                      {selectedSigner?.email} ({selectedSigner?.email})
+                      {selectedSigner?.name} ({selectedSigner?.email})
                     </span>
                   )}
 
@@ -345,45 +350,49 @@ export const AddFieldsFormPartial = ({
                     {recipients.map((recipient, index) => (
                       <CommandItem
                         key={index}
-                        className={cn({
-                          'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
-                        })}
+                        className="p-0"
                         onSelect={() => setSelectedSigner(recipient)}
                       >
-                        {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>
-                        )}
+                        <PopoverClose
+                          className={cn('flex w-full px-1 py-2', {
+                            'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
+                          })}
+                        >
+                          {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.name} (${recipient.email})`}
+                            >
+                              {recipient.name} ({recipient.email})
+                            </span>
+                          )}
 
-                        {!recipient.name && (
-                          <span className="truncate" title={recipient.email}>
-                            {recipient.email}
-                          </span>
-                        )}
+                          {!recipient.name && (
+                            <span className="truncate" title={recipient.email}>
+                              {recipient.email}
+                            </span>
+                          )}
+                        </PopoverClose>
                       </CommandItem>
                     ))}
                   </CommandGroup>
diff --git a/packages/ui/primitives/popover.tsx b/packages/ui/primitives/popover.tsx
index e84f6cc6d..640b3087e 100644
--- a/packages/ui/primitives/popover.tsx
+++ b/packages/ui/primitives/popover.tsx
@@ -10,6 +10,8 @@ const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
+const PopoverClose = PopoverPrimitive.Close;
+
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -30,4 +32,4 @@ const PopoverContent = React.forwardRef<
 
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent };
+export { Popover, PopoverTrigger, PopoverContent, PopoverClose };

From f8a193c0f8906cf9c042ed24b06c6a15bc9bf717 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Sat, 9 Sep 2023 10:56:45 +0000
Subject: [PATCH 2/2] refactor: replace whole implementation with a state

---
 .../primitives/document-flow/add-fields.tsx   | 89 +++++++++----------
 packages/ui/primitives/popover.tsx            |  4 +-
 2 files changed, 43 insertions(+), 50 deletions(-)

diff --git a/packages/ui/primitives/document-flow/add-fields.tsx b/packages/ui/primitives/document-flow/add-fields.tsx
index 62daf803b..5de43c411 100644
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@@ -22,12 +22,7 @@ import {
   CommandInput,
   CommandItem,
 } from '@documenso/ui/primitives/command';
-import {
-  Popover,
-  PopoverClose,
-  PopoverContent,
-  PopoverTrigger,
-} from '@documenso/ui/primitives/popover';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 import { TAddFieldsFormSchema } from './add-fields.types';
@@ -107,6 +102,7 @@ export const AddFieldsFormPartial = ({
 
   const [selectedField, setSelectedField] = useState<FieldType | null>(null);
   const [selectedSigner, setSelectedSigner] = useState<Recipient | null>(null);
+  const [showRecipientsSelector, setShowRecipientsSelector] = useState(false);
 
   const hasSelectedSignerBeenSent = selectedSigner?.sendStatus === SendStatus.SENT;
 
@@ -319,7 +315,7 @@ export const AddFieldsFormPartial = ({
           ))}
 
           {!hideRecipients && (
-            <Popover>
+            <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
               <PopoverTrigger asChild>
                 <Button
                   type="button"
@@ -350,49 +346,48 @@ export const AddFieldsFormPartial = ({
                     {recipients.map((recipient, index) => (
                       <CommandItem
                         key={index}
-                        className="p-0"
-                        onSelect={() => setSelectedSigner(recipient)}
+                        className={cn({
+                          'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
+                        })}
+                        onSelect={() => {
+                          setSelectedSigner(recipient);
+                          setShowRecipientsSelector(false);
+                        }}
                       >
-                        <PopoverClose
-                          className={cn('flex w-full px-1 py-2', {
-                            'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
-                          })}
-                        >
-                          {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.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.name} (${recipient.email})`}
+                          >
+                            {recipient.name} ({recipient.email})
+                          </span>
+                        )}
 
-                          {!recipient.name && (
-                            <span className="truncate" title={recipient.email}>
-                              {recipient.email}
-                            </span>
-                          )}
-                        </PopoverClose>
+                        {!recipient.name && (
+                          <span className="truncate" title={recipient.email}>
+                            {recipient.email}
+                          </span>
+                        )}
                       </CommandItem>
                     ))}
                   </CommandGroup>
diff --git a/packages/ui/primitives/popover.tsx b/packages/ui/primitives/popover.tsx
index 640b3087e..e84f6cc6d 100644
--- a/packages/ui/primitives/popover.tsx
+++ b/packages/ui/primitives/popover.tsx
@@ -10,8 +10,6 @@ const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
-const PopoverClose = PopoverPrimitive.Close;
-
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -32,4 +30,4 @@ const PopoverContent = React.forwardRef<
 
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverClose };
+export { Popover, PopoverTrigger, PopoverContent };