feat: allow email invites in team event assignment (#13532)

omnialp · omnialp · commit 480972b3dac8 · 2026-04-04T17:20:40.000+08:00
- Add CreatableSelect support to CheckedTeamSelect for free-form email input
- Implement email validation using emailSchema
- Support bulk email paste (comma, semicolon, newline, space separated)
- Integrate with existing inviteMember TRPC mutation
- Add invitation status feedback via toast notifications
- Enable email invites in EventTeamAssignmentTab for fixed and round-robin hosts
- Add i18n translations for invitation feedback messages
diff --git a/apps/web/modules/event-types/components/AddMembersWithSwitch.tsx b/apps/web/modules/event-types/components/AddMembersWithSwitch.tsx
@@ -10,10 +10,13 @@ import { Segment } from "./Segment";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AttributesQueryValue } from "@calcom/lib/raqb/types";
 import { Label, SettingsToggle } from "@calcom/ui/components/form";
-import { type ComponentProps, type Dispatch, type SetStateAction, useMemo } from "react";
+import { type ComponentProps, type Dispatch, type SetStateAction, useMemo, useCallback } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import type { Options } from "react-select";
 import { AddMembersWithSwitchWebWrapper } from "./AddMembersWithSwitchWebWrapper";
+import { trpc } from "@calcom/trpc/react";
+import { MembershipRole } from "@calcom/prisma/enums";
+import { CreationSource } from "@calcom/prisma/enums";
 
 import AssignAllTeamMembers from "@calcom/features/eventtypes/components/AssignAllTeamMembers";
 import type {
@@ -63,6 +66,8 @@ const CheckedHostField = ({
   isRRWeightsEnabled,
   groupId,
   customClassNames,
+  teamId,
+  allowEmailInvites,
   ...rest
 }: {
   labelText?: string;
@@ -74,7 +79,43 @@ const CheckedHostField = ({
   helperText?: React.ReactNode | string;
   isRRWeightsEnabled?: boolean;
   groupId: string | null;
+  teamId?: number;
+  allowEmailInvites?: boolean;
 } & Omit<Partial<ComponentProps<typeof CheckedTeamSelect>>, "onChange" | "value">) => {
+  const { t } = useLocale();
+  const inviteMutation = trpc.viewer.teams.inviteMember.useMutation();
+
+  // Handle inviting new members by email
+  const handleEmailInvite = useCallback(
+    async (emails: string[]): Promise<{ success: string[]; failed: string[] }> => {
+      if (!teamId || emails.length === 0) {
+        return { success: [], failed: emails };
+      }
+
+      const success: string[] = [];
+      const failed: string[] = [];
+
+      // Invite each email
+      for (const email of emails) {
+        try {
+          await inviteMutation.mutateAsync({
+            teamId,
+            usernameOrEmail: email,
+            role: MembershipRole.MEMBER,
+            language: "en",
+            creationSource: CreationSource.WEBAPP,
+          });
+          success.push(email);
+        } catch (error) {
+          failed.push(email);
+        }
+      }
+
+      return { success, failed };
+    },
+    [teamId, inviteMutation]
+  );
+
   return (
     <div className="flex flex-col rounded-md">
       <div>
@@ -116,6 +157,10 @@ const CheckedHostField = ({
           isRRWeightsEnabled={isRRWeightsEnabled}
           customClassNames={customClassNames}
           groupId={groupId}
+          allowEmailInvites={allowEmailInvites}
+          teamId={teamId}
+          onEmailInvite={allowEmailInvites ? handleEmailInvite : undefined}
+          isInviting={inviteMutation.isPending}
           {...rest}
         />
       </div>
@@ -194,6 +239,8 @@ export type AddMembersWithSwitchProps = {
   groupId: string | null;
   "data-testid"?: string;
   customClassNames?: AddMembersWithSwitchCustomClassNames;
+  // New prop for email invitation feature
+  allowEmailInvites?: boolean;
 };
 
 enum AssignmentState {
@@ -260,6 +307,7 @@ export function AddMembersWithSwitch({
   isSegmentApplicable,
   groupId,
   customClassNames,
+  allowEmailInvites = false,
   ...rest
 }: AddMembersWithSwitchProps) {
   const { t } = useLocale();
@@ -345,6 +393,8 @@ export function AddMembersWithSwitch({
               isRRWeightsEnabled={isRRWeightsEnabled}
               groupId={groupId}
               customClassNames={customClassNames?.teamMemberSelect}
+              teamId={teamId}
+              allowEmailInvites={allowEmailInvites}
             />
           </div>
         </>
diff --git a/apps/web/modules/event-types/components/tabs/assignment/EventTeamAssignmentTab.tsx b/apps/web/modules/event-types/components/tabs/assignment/EventTeamAssignmentTab.tsx
@@ -229,6 +229,7 @@ const FixedHosts = ({
               isFixed={true}
               customClassNames={customClassNames?.addMembers}
               onActive={handleFixedHostsActivation}
+              allowEmailInvites={true}
             />
           </div>
         </>
@@ -260,6 +261,7 @@ const FixedHosts = ({
               automaticAddAllEnabled={!isRoundRobinEvent}
               isFixed={true}
               onActive={handleFixedHostsActivation}
+              allowEmailInvites={true}
             />
           </div>
         </SettingsToggle>
@@ -435,6 +437,7 @@ const RoundRobinHosts = ({
         containerClassName={containerClassName || (assignAllTeamMembers ? "-mt-4" : "")}
         onActive={() => handleMembersActivation(groupId)}
         customClassNames={customClassNames?.addMembers}
+        allowEmailInvites={true}
       />
     );
   };
diff --git a/packages/features/eventtypes/components/CheckedTeamSelect.tsx b/packages/features/eventtypes/components/CheckedTeamSelect.tsx
@@ -1,19 +1,22 @@
 "use client";
 
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import type { Options, Props } from "react-select";
+import CreatableSelect from "react-select/creatable";
 
 import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
 import type { SelectClassNames } from "@calcom/features/eventtypes/lib/types";
 import { getHostsFromOtherGroups } from "@calcom/lib/bookings/hostGroupUtils";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { emailSchema } from "@calcom/lib/emailSchema";
 import classNames from "@calcom/ui/classNames";
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Button } from "@calcom/ui/components/button";
 import { Select } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
 import { Tooltip } from "@calcom/ui/components/tooltip";
+import { showToast } from "@calcom/ui/components/toast";
 
 import type {
   PriorityDialogCustomClassNames,
@@ -49,24 +52,51 @@ export type CheckedTeamSelectCustomClassNames = {
   priorityDialog?: PriorityDialogCustomClassNames;
   weightDialog?: WeightDialogCustomClassNames;
 };
+
+// Props for email invitation support
+export type CheckedTeamSelectProps = Omit<Props<CheckedSelectOption, true>, "value" | "onChange"> & {
+  options?: Options<CheckedSelectOption>;
+  value?: readonly CheckedSelectOption[];
+  onChange: (value: readonly CheckedSelectOption[]) => void;
+  isRRWeightsEnabled?: boolean;
+  customClassNames?: CheckedTeamSelectCustomClassNames;
+  groupId: string | null;
+  // New props for email invitation
+  allowEmailInvites?: boolean;
+  teamId?: number;
+  onEmailInvite?: (emails: string[]) => Promise<{ success: string[]; failed: string[] }>;
+  isInviting?: boolean;
+};
+// Email validation helper
+const isValidEmail = (email: string): boolean => {
+  return emailSchema.safeParse(email).success;
+};
+
+// Parse pasted text for multiple emails
+const parsePastedEmails = (text: string): string[] => {
+  return text
+    .split(/[,;\n\r\s]+/)
+    .map((email) => email.trim().toLowerCase())
+    .filter((email) => email.length > 0 && isValidEmail(email));
+};
+
 export const CheckedTeamSelect = ({
   options = [],
   value = [],
   isRRWeightsEnabled,
   customClassNames,
   groupId,
+  allowEmailInvites = false,
+  teamId,
+  onEmailInvite,
+  isInviting = false,
   ...props
-}: Omit<Props<CheckedSelectOption, true>, "value" | "onChange"> & {
-  options?: Options<CheckedSelectOption>;
-  value?: readonly CheckedSelectOption[];
-  onChange: (value: readonly CheckedSelectOption[]) => void;
-  isRRWeightsEnabled?: boolean;
-  customClassNames?: CheckedTeamSelectCustomClassNames;
-  groupId: string | null;
-}) => {
+}: CheckedTeamSelectProps) => {
   const isPlatform = useIsPlatform();
   const [priorityDialogOpen, setPriorityDialogOpen] = useState(false);
   const [weightDialogOpen, setWeightDialogOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [isProcessingEmails, setIsProcessingEmails] = useState(false);
 
   const [currentOption, setCurrentOption] = useState(value[0] ?? null);
 
@@ -82,23 +112,138 @@ export const CheckedTeamSelect = ({
     props.onChange(newValueAllGroups);
   };
 
+  // Handle creating new option from email input
+  const handleCreateOption = useCallback(
+    async (inputValue: string) => {
+      if (!allowEmailInvites || !onEmailInvite) return;
+
+      const emails = parsePastedEmails(inputValue);
+      if (emails.length === 0) {
+        showToast(t("invalid_email_format"), "error");
+        return;
+      }
+
+      // Check which emails are already in options (by checking if label matches email)
+      const existingEmails = new Set(options.map((opt) => opt.label?.toLowerCase()).filter(Boolean));
+      const newEmails = emails.filter((email) => !existingEmails.has(email));
+
+      if (newEmails.length === 0) {
+        showToast(t("emails_already_in_team"), "warning");
+        return;
+      }
+
+      setIsProcessingEmails(true);
+      try {
+        const result = await onEmailInvite(newEmails);
+
+        if (result.success.length > 0) {
+          showToast(
+            t("invited_n_members", { count: result.success.length }),
+            "success"
+          );
+        }
+
+        if (result.failed.length > 0) {
+          showToast(
+            t("failed_to_invite_n_members", { count: result.failed.length }),
+            "error"
+          );
+        }
+      } catch (error) {
+        showToast(t("invitation_failed"), "error");
+      } finally {
+        setIsProcessingEmails(false);
+        setInputValue("");
+      }
+    },
+    [allowEmailInvites, onEmailInvite, options, t]
+  );
+
+  // Handle paste event for bulk email input
+  const handlePaste = useCallback(
+    async (event: React.ClipboardEvent<HTMLInputElement>) => {
+      if (!allowEmailInvites) return;
+
+      const pastedText = event.clipboardData.getData("text");
+      const emails = parsePastedEmails(pastedText);
+
+      // If we have multiple emails or a valid single email that's not in options, process it
+      if (emails.length >= 1) {
+        const existingEmails = new Set(options.map((opt) => opt.label?.toLowerCase()).filter(Boolean));
+        const newEmails = emails.filter((email) => !existingEmails.has(email));
+
+        if (newEmails.length > 0 && onEmailInvite) {
+          event.preventDefault();
+          setIsProcessingEmails(true);
+          try {
+            const result = await onEmailInvite(newEmails);
+
+            if (result.success.length > 0) {
+              showToast(
+                t("invited_n_members", { count: result.success.length }),
+                "success"
+              );
+            }
+
+            if (result.failed.length > 0) {
+              showToast(
+                t("failed_to_invite_n_members", { count: result.failed.length }),
+                "error"
+              );
+            }
+          } catch (error) {
+            showToast(t("invitation_failed"), "error");
+          } finally {
+            setIsProcessingEmails(false);
+          }
+        }
+      }
+    },
+    [allowEmailInvites, onEmailInvite, options, t]
+  );
+
+  // Common select props
+  const commonSelectProps = {
+    ...props,
+    name: props.name,
+    placeholder: props.placeholder || t("select"),
+    isSearchable: true,
+    options,
+    value: valueFromGroup,
+    onChange: handleSelectChange,
+    isMulti: true,
+    isDisabled: isInviting || isProcessingEmails,
+    isLoading: isInviting || isProcessingEmails,
+    className: customClassNames?.hostsSelect?.select,
+  };
+
   return (
     <>
-      <Select
-        {...props}
-        name={props.name}
-        placeholder={props.placeholder || t("select")}
-        isSearchable={true}
-        options={options}
-        value={valueFromGroup}
-        onChange={handleSelectChange}
-        isMulti
-        className={customClassNames?.hostsSelect?.select}
-        innerClassNames={{
-          ...customClassNames?.hostsSelect?.innerClassNames,
-          control: "rounded-md",
-        }}
-      />
+      {allowEmailInvites ? (
+        <CreatableSelect
+          {...commonSelectProps}
+          inputValue={inputValue}
+          onInputChange={(newValue: string) => setInputValue(newValue)}
+          onCreateOption={handleCreateOption}
+          onPaste={handlePaste}
+          formatCreateLabel={(inputValue: string) =>
+            isValidEmail(inputValue)
+              ? t("invite_email_address", { email: inputValue })
+              : t("enter_valid_email")
+          }
+          isValidNewOption={(inputValue: string) => isValidEmail(inputValue)}
+          className={customClassNames?.hostsSelect?.select}
+        />
+      ) : (
+        <Select
+          {...commonSelectProps}
+          className={customClassNames?.hostsSelect?.select}
+          innerClassNames={{
+            ...customClassNames?.hostsSelect?.innerClassNames,
+            control: "rounded-md",
+          }}
+        />
+      )}
       {/* This class name conditional looks a bit odd but it allows a seamless transition when using autoanimate
        - Slides down from the top instead of just teleporting in from nowhere*/}
       <ul
diff --git a/packages/i18n/locales/en/common.json b/packages/i18n/locales/en/common.json
@@ -4774,5 +4774,13 @@
   "dashboard": "dashboard",
   "paypal_webhook_reminder": "Our integration creates a specific webhook on your PayPal account that we use to report back transactions to our system. If you delete this webhook, we will not be able to report back and you should uninstall and install the app again for this to work properly. Uninstalling the app won't delete your current event type price/currency configuration but you will not be able to receive bookings.",
   "discount_25": "-25%",
+  "invalid_email_format": "Invalid email format",
+  "email_already_in_team": "Email is already in the team",
+  "invited_n_members_one": "Successfully invited {{count}} member",
+  "invited_n_members_other": "Successfully invited {{count}} members",
+  "failed_to_invite_n_members_one": "Failed to invite {{count}} member",
+  "failed_to_invite_n_members_other": "Failed to invite {{count}} members",
+  "invitation_failed": "Invitation failed",
+  "invite_email_address": "Type or paste email addresses to invite",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }
