chore(new-convo): disabled for new contacts

un · Aug 23, 2024 · 3473ded · 3473ded
1 parent 42ab623
commit 3473ded
Showing 1 changed file with 36 additions and 29 deletions.
diff --git a/apps/web/src/app/[orgShortcode]/convo/_components/create-convo-form.tsx b/apps/web/src/app/[orgShortcode]/convo/_components/create-convo-form.tsx
@@ -665,6 +665,14 @@ export default function CreateConvoForm({
   );
 }
 
+const showDisabledMessage = (disabled: boolean) => {
+  if (disabled) {
+    toast.warning(
+      'You cannot add participants to conversation until you have an email identity associated.'
+    );
+  }
+};
+
 type ParticipantsComboboxPopoverProps = {
   participants: NewConvoParticipant[];
   loading: boolean;
@@ -716,26 +724,15 @@ function ParticipantsComboboxPopover({
     );
   };
 
-  const handleDisabledClick = () => {
-    if (disabled) {
-      toast.warning(
-        'You cannot add participants to conversation until you have an email identity associated.'
-      );
-    }
-  };
-
   return (
-    <div
-      onClick={() => handleDisabledClick()}
-      className="flex w-full items-center space-x-4">
+    <div className="flex w-full items-center space-x-4">
       <Popover
         open={open}
         onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button
             variant="outline"
-            className="h-fit w-full justify-between"
-            disabled={disabled}>
+            className="h-fit w-full justify-between">
             {selectedParticipants.length > 0 ? (
               <div className="flex flex-wrap gap-2 overflow-hidden">
                 {selectedParticipants.map((participant, i) => {
@@ -843,7 +840,6 @@ function ParticipantsComboboxPopover({
                   }
                 }}
                 onFocus={() => setCurrentSelectValue('')}
-                disabled={disabled}
               />
             </CommandInput>
             <CommandList className="max-h-[calc(var(--radix-popover-content-available-height)*0.9)] overflow-x-clip overflow-y-scroll">
@@ -853,6 +849,7 @@ function ParticipantsComboboxPopover({
                   <EmptyStateHandler
                     addSelectedParticipant={setSelectedParticipants}
                     setEmailParticipants={setNewEmailParticipants}
+                    disabled={disabled}
                   />
                 )}
                 {participants.map((participant) => (
@@ -861,7 +858,7 @@ function ParticipantsComboboxPopover({
                     value={participant.publicId}
                     keywords={participant.keywords}
                     onSelect={(value) => {
-                      if (disabled || participant.own) return;
+                      if (participant.own) return;
                       setSelectedParticipants((prev) =>
                         prev.find((p) => p.publicId === value)
                           ? prev.filter((p) => p.publicId !== value)
@@ -880,9 +877,8 @@ function ParticipantsComboboxPopover({
                             : 'text-base-11'
                         )}
                         disabled={
-                          disabled ||
-                          (participant.type === 'orgMember' &&
-                            participant.disabled)
+                          participant.type === 'orgMember' &&
+                          participant.disabled
                         }
                         onFocus={() =>
                           setCurrentSelectValue(participant.publicId)
@@ -966,11 +962,13 @@ function ParticipantsComboboxPopover({
 type EmptyStateHandlerProps = {
   setEmailParticipants: Dispatch<SetStateAction<string[]>>;
   addSelectedParticipant: Dispatch<SetStateAction<NewConvoParticipant[]>>;
+  disabled?: boolean;
 };
 
 function EmptyStateHandler({
   setEmailParticipants,
-  addSelectedParticipant
+  addSelectedParticipant,
+  disabled = false
 }: EmptyStateHandlerProps) {
   const isEmpty = useCommandState((state) => state.filtered.count === 0);
   const email = useCommandState((state) => state.search);
@@ -980,6 +978,11 @@ function EmptyStateHandler({
   );
 
   const addEmailParticipant = (email: string) => {
+    if (disabled) {
+      showDisabledMessage(disabled);
+      return;
+    }
+
     setEmailParticipants((prev) =>
       prev.includes(email) ? prev : prev.concat(email)
     );
@@ -1004,23 +1007,27 @@ function EmptyStateHandler({
     <CommandItem
       key={email}
       value={email}
+      disabled={disabled}
       forceMount
       onKeyDown={(e) => {
         // Submit email on Enter key
         if (e.key === 'Enter') {
           addEmailParticipant(email);
         }
       }}>
-      <Button
-        variant={'ghost'}
-        className="my-1 w-full justify-start px-1"
-        color="gray"
-        onClick={() => {
-          addEmailParticipant(email);
-        }}>
-        <At className="mr-2 h-4 w-4" />
-        <p className="text-sm">Add {email}</p>
-      </Button>
+      <div onClick={() => disabled && showDisabledMessage(disabled)}>
+        <Button
+          variant={'ghost'}
+          disabled={disabled}
+          className="my-1 w-full justify-start px-1"
+          color="gray"
+          onClick={() => {
+            addEmailParticipant(email);
+          }}>
+          <At className="mr-2 h-4 w-4" />
+          <p className="text-sm">Add {email}</p>
+        </Button>
+      </div>
     </CommandItem>
   ) : (
     <CommandEmpty className="px-2 text-sm font-bold">