feat: allow non-team members as default recipients (#2404)

apps/remix/app/components/general/default-recipients-multiselect-combobox.tsx

@@ -1,10 +1,13 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans, useLingui as useLinguiMacro } from '@lingui/react/macro';
 import { RecipientRole } from '@prisma/client';
 
 import type { TDefaultRecipient } from '@documenso/lib/types/default-recipients';
+import { isRecipientEmailValidForSending } from '@documenso/lib/utils/recipients';
 import { trpc } from '@documenso/trpc/react';
 import { MultiSelect, type Option } from '@documenso/ui/primitives/multiselect';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 type DefaultRecipientsMultiSelectComboboxProps = {
   listValues: TDefaultRecipient[];
@@ -20,6 +23,8 @@ export const DefaultRecipientsMultiSelectCombobox = ({
   organisationId,
 }: DefaultRecipientsMultiSelectComboboxProps) => {
   const { _ } = useLingui();
+  const { t } = useLinguiMacro();
+  const { toast } = useToast();
 
   const { data: organisationData, isLoading: isLoadingOrganisation } =
     trpc.organisation.member.find.useQuery(
@@ -60,31 +65,56 @@ export const DefaultRecipientsMultiSelectCombobox = ({
   }));
 
   const onSelectionChange = (selected: Option[]) => {
-    const updatedRecipients = selected.map((option) => {
-      const existingRecipient = listValues.find((r) => r.email === option.value);
-      const member = members?.find((m) => m.email === option.value);
+    const invalidEmails = selected.filter(
+      (option) => !isRecipientEmailValidForSending({ email: option.value }),
+    );
 
-      return {
-        email: option.value,
-        name: member?.name || option.value,
-        role: existingRecipient?.role ?? RecipientRole.CC,
-      };
-    });
+    if (invalidEmails.length > 0) {
+      toast({
+        title: t`Invalid email`,
+        description: t`"${invalidEmails[0].value}" is not a valid email address.`,
+        variant: 'destructive',
+      });
+    }
+
+    const updatedRecipients = selected
+      .filter((option) => !invalidEmails.includes(option))
+      .map((option) => {
+        const existingRecipient = listValues.find((r) => r.email === option.value);
+        const member = members?.find((m) => m.email === option.value);
+
+        return {
+          email: option.value,
+          name: member?.name || option.value,
+          role: existingRecipient?.role ?? RecipientRole.CC,
+        };
+      });
 
     onChange(updatedRecipients);
   };
 
   return (
     <MultiSelect
-      commandProps={{ label: _(msg`Select recipients`) }}
+      commandProps={{ label: _(msg`Select or add recipients`) }}
       options={options}
       value={value}
       onChange={onSelectionChange}
-      placeholder={_(msg`Select recipients`)}
+      placeholder={_(msg`Select or enter email address`)}
       hideClearAllButton
       hidePlaceholderWhenSelected
-      loadingIndicator={isLoading ? <p className="text-center text-sm">Loading...</p> : undefined}
-      emptyIndicator={<p className="text-center text-sm">No members found</p>}
+      creatable
+      loadingIndicator={
+        isLoading ? (
+          <p className="text-center text-sm">
+            <Trans>Loading...</Trans>
+          </p>
+        ) : undefined
+      }
+      emptyIndicator={
+        <p className="text-center text-sm">
+          <Trans>Type an email address to add a recipient</Trans>
+        </p>
+      }
     />
   );
 };