feat: select team members to receive emails

apps/web/components/eventtype/EventTeamTab.tsx

@@ -6,36 +6,16 @@
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import type { Options } from "react-select";
 
-import type { CheckedSelectOption } from "@calcom/features/eventtypes/components/CheckedTeamSelect";
-import CheckedTeamSelect from "@calcom/features/eventtypes/components/CheckedTeamSelect";
+import AddMembersWithSwitch, {
+  mapUserToValue,
+} from "@calcom/features/eventtypes/components/AddMembersWithSwitch";
+import AssignAllTeamMembers from "@calcom/features/eventtypes/components/AssignAllTeamMembers";
 import ChildrenEventTypeSelect from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
-import type { FormValues } from "@calcom/features/eventtypes/lib/types";
+import type { FormValues, TeamMember } from "@calcom/features/eventtypes/lib/types";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SchedulingType } from "@calcom/prisma/enums";
 import { Label, Select, SettingsToggle } from "@calcom/ui";
 
-interface IUserToValue {
-  id: number | null;
-  name: string | null;
-  username: string | null;
-  avatar: string;
-  email: string;
-}
-
-type TeamMember = {
-  value: string;
-  label: string;
-  avatar: string;
-  email: string;
-};
-
-const mapUserToValue = ({ id, name, username, avatar, email }: IUserToValue, pendingString: string) => ({
-  value: `${id || ""}`,
-  label: `${name || email || ""}${!username ? ` (${pendingString})` : ""}`,
-  avatar,
-  email,
-});
-
 export const mapMemberToChildrenOption = (
   member: EventTypeSetupProps["teamMembers"][number],
   slug: string,
@@ -59,16 +39,6 @@
   };
 };
 
-const sortByLabel = (a: ReturnType<typeof mapUserToValue>, b: ReturnType<typeof mapUserToValue>) => {
-  if (a.label < b.label) {
-    return -1;
-  }
-  if (a.label > b.label) {
-    return 1;
-  }
-  return 0;
-};
-
 const ChildrenEventTypesList = ({
   options = [],
   value,
@@ -105,94 +75,6 @@
   );
 };
 
-const AssignAllTeamMembers = ({
-  assignAllTeamMembers,
-  setAssignAllTeamMembers,
-  onActive,
-  onInactive,
-}: {
-  assignAllTeamMembers: boolean;
-  setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
-  onActive: () => void;
-  onInactive?: () => void;
-}) => {
-  const { t } = useLocale();
-  const { setValue } = useFormContext<FormValues>();
-
-  return (
-    <Controller<FormValues>
-      name="assignAllTeamMembers"
-      render={() => (
-        <SettingsToggle
-          title={t("automatically_add_all_team_members")}
-          labelClassName="mt-0.5 font-normal"
-          checked={assignAllTeamMembers}
-          onCheckedChange={(active) => {
-            setValue("assignAllTeamMembers", active, { shouldDirty: true });
-            setAssignAllTeamMembers(active);
-            if (active) {
-              onActive();
-            } else if (!!onInactive) {
-              onInactive();
-            }
-          }}
-        />
-      )}
-    />
-  );
-};
-
-const CheckedHostField = ({
-  labelText,
-  placeholder,
-  options = [],
-  isFixed,
-  value,
-  onChange,
-  helperText,
-  ...rest
-}: {
-  labelText?: string;
-  placeholder: string;
-  isFixed: boolean;
-  value: Host[];
-  onChange?: (options: Host[]) => void;
-  options?: Options<CheckedSelectOption>;
-  helperText?: React.ReactNode | string;
-} & Omit<Partial<ComponentProps<typeof CheckedTeamSelect>>, "onChange" | "value">) => {
-  return (
-    <div className="flex flex-col rounded-md">
-      <div>
-        {labelText ? <Label>{labelText}</Label> : <></>}
-        <CheckedTeamSelect
-          isOptionDisabled={(option) => !!value.find((host) => host.userId.toString() === option.value)}
-          onChange={(options) => {
-            onChange &&
-              onChange(
-                options.map((option) => ({
-                  isFixed,
-                  userId: parseInt(option.value, 10),
-                  priority: option.priority ?? 2,
-                }))
-              );
-          }}
-          value={(value || [])
-            .filter(({ isFixed: _isFixed }) => isFixed === _isFixed)
-            .map((host) => {
-              const option = options.find((member) => member.value === host.userId.toString());
-              return option ? { ...option, priority: host.priority ?? 2, isFixed } : options[0];
-            })
-            .filter(Boolean)}
-          controlShouldRenderValue={false}
-          options={options}
-          placeholder={placeholder}
-          {...rest}
-        />
-      </div>
-    </div>
-  );
-};
-
 const FixedHostHelper = (
   <Trans i18nKey="fixed_host_helper">
     Add anyone who needs to attend the event.
@@ -304,59 +186,6 @@
   );
 };
 
-const AddMembersWithSwitch = ({
-  teamMembers,
-  value,
-  onChange,
-  assignAllTeamMembers,
-  setAssignAllTeamMembers,
-  automaticAddAllEnabled,
-  onActive,
-  isFixed,
-}: {
-  value: Host[];
-  onChange: (hosts: Host[]) => void;
-  teamMembers: TeamMember[];
-  assignAllTeamMembers: boolean;
-  setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
-  automaticAddAllEnabled: boolean;
-  onActive: () => void;
-  isFixed: boolean;
-}) => {
-  const { t } = useLocale();
-  const { setValue } = useFormContext<FormValues>();
-
-  return (
-    <div className="rounded-md ">
-      <div className="flex flex-col rounded-md px-6 pb-2 pt-6">
-        {automaticAddAllEnabled ? (
-          <div className="mb-2">
-            <AssignAllTeamMembers
-              assignAllTeamMembers={assignAllTeamMembers}
-              setAssignAllTeamMembers={setAssignAllTeamMembers}
-              onActive={onActive}
-              onInactive={() => setValue("hosts", [], { shouldDirty: true })}
-            />
-          </div>
-        ) : (
-          <></>
-        )}
-        {!assignAllTeamMembers || !automaticAddAllEnabled ? (
-          <CheckedHostField
-            value={value}
-            onChange={onChange}
-            isFixed={isFixed}
-            options={teamMembers.sort(sortByLabel)}
-            placeholder={t("add_attendees")}
-          />
-        ) : (
-          <></>
-        )}
-      </div>
-    </div>
-  );
-};
-
 const RoundRobinHosts = ({
   teamMembers,
   value,
@@ -450,7 +279,7 @@
   assignAllTeamMembers: boolean;
   setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
 }) => {
   const { t } = useLocale();
   const {
     control,
     setValue,

apps/web/public/static/locales/en/common.json

@@ -1085,7 +1085,7 @@
   "make_team_private": "Make team private",
   "make_team_private_description": "Your team members won't be able to see other team members when this is turned on.",
   "you_cannot_see_team_members": "You cannot see all the team members of a private team.",
-  "you_cannot_see_teams_of_org":"You cannot see teams of a private organization.",
+  "you_cannot_see_teams_of_org": "You cannot see teams of a private organization.",
   "allow_booker_to_select_duration": "Allow booker to select duration",
   "impersonate_user_tip": "All uses of this feature is audited.",
   "impersonating_user_warning": "Impersonating username \"{{user}}\".",
@@ -2313,12 +2313,13 @@
   "confirm_email": "Confirm your email",
   "confirm_email_description": "We sent an email to <strong>{{email}}</strong>. Click the link in the email to verify this address.",
   "send_event_details_to": "Send event details to",
-  "lock_event_types_modal_header":"What should we do with your member's existing event types?",
-  "org_delete_event_types_org_admin":"All of your members individual event types (except managed ones) will be permanently deleted. They will not be able to create new ones",
-  "org_hide_event_types_org_admin":"Your members individual event types will be hidden (except managed ones) from profiles but the links will still be active. They will not be able to create new ones.  ",
-  "hide_org_eventtypes":"Hide individual event types",
-  "delete_org_eventtypes":"Delete individual event types",
-  "lock_org_users_eventtypes":"Lock individual event type creation",
-  "lock_org_users_eventtypes_description":"Prevent members from creating their own event types.",
+  "select_members": "Select members",
+  "lock_event_types_modal_header": "What should we do with your member's existing event types?",
+  "org_delete_event_types_org_admin": "All of your members individual event types (except managed ones) will be permanently deleted. They will not be able to create new ones",
+  "org_hide_event_types_org_admin": "Your members individual event types will be hidden (except managed ones) from profiles but the links will still be active. They will not be able to create new ones.  ",
+  "hide_org_eventtypes": "Hide individual event types",
+  "delete_org_eventtypes": "Delete individual event types",
+  "lock_org_users_eventtypes": "Lock individual event type creation",
+  "lock_org_users_eventtypes_description": "Prevent members from creating their own event types.",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

packages/app-store/routing-forms/components/SingleForm.tsx

@@ -5,6 +5,8 @@
 import { Controller, useFormContext } from "react-hook-form";
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+import AddMembersWithSwitch from "@calcom/features/eventtypes/components/AddMembersWithSwitch";
+import type { Host } from "@calcom/features/eventtypes/lib/types";
 import { ShellMain } from "@calcom/features/shell/Shell";
 import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -243,11 +245,16 @@
 function SingleForm({ form, appUrl, Page, enrichedWithUserProfileForm }: SingleFormComponentProps) {
   const utils = trpc.useContext();
   const { t } = useLocale();
+  const { data: teamMembers } = form.teamId
+    ? trpc.viewer.teams.listMembers.useQuery({ teamIds: [form.teamId] })
+    : { data: [] };
 
   const [isTestPreviewOpen, setIsTestPreviewOpen] = useState(false);
   const [response, setResponse] = useState<Response>({});
   const [decidedAction, setDecidedAction] = useState<Route["action"] | null>(null);
   const [skipFirstUpdate, setSkipFirstUpdate] = useState(true);
+  const [selectedMembers, setSelectedMembers] = useState<Host[]>([]);
+  const [assignAllTeamMembers, setAssignAllTeamMembers] = useState(false);
   const [eventTypeUrl, setEventTypeUrl] = useState("");
 
   function testRouting() {
@@ -293,6 +300,26 @@
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [form]);
 
+  useEffect(() => {
+    if (form.teamId && form.settings?.sendUpdatesTo?.length && teamMembers?.length) {
+      let sendToAll = true;
+      teamMembers.forEach((member) => {
+        if (!form.settings?.sendUpdatesTo?.includes(member.id)) {
+          sendToAll = false;
+          return;
+        }
+      });
+      setAssignAllTeamMembers(sendToAll);
+      setSelectedMembers(
+        form.settings.sendUpdatesTo.map((userId) => ({
+          isFixed: true,
+          userId: userId,
+          priority: 1,
+        }))
+      );
+    }
+  }, [form.teamId, form.settings?.sendUpdatesTo?.length, teamMembers?.length]);
+
   const mutation = trpc.viewer.appRoutingForms.formMutation.useMutation({
     onSuccess() {
       showToast(t("form_updated_successfully"), "success");
@@ -356,20 +383,59 @@
                   />
 
                   <div className="mt-6">
-                    <Controller
-                      name="settings.emailOwnerOnSubmission"
-                      control={hookForm.control}
-                      render={({ field: { value, onChange } }) => {
-                        return (
-                          <SettingsToggle
-                            title={t("routing_forms_send_email_owner")}
-                            description={t("routing_forms_send_email_owner_description")}
-                            checked={value}
-                            onCheckedChange={(val) => onChange(val)}
-                          />
-                        );
-                      }}
-                    />
+                    {form.teamId ? (
+                      <AddMembersWithSwitch
+                        teamMembers={(teamMembers || []).map((member) => ({
+                          value: member.id.toString(),
+                          label: member.name || "",
+                          avatar: member.avatarUrl || "",
+                          email: member.email,
+                          isFixed: true,
+                        }))}
+                        value={selectedMembers}
+                        onChange={(value) => {
+                          setSelectedMembers(value);
+                          hookForm.setValue(
+                            "settings.sendUpdatesTo",
+                            value.map((teamMember) => teamMember.userId),
+                            { shouldDirty: true }
+                          );
+                          hookForm.setValue("settings.emailOwnerOnSubmission", false, { shouldDirty: true });
+                        }}
+                        assignAllTeamMembers={assignAllTeamMembers}
+                        setAssignAllTeamMembers={setAssignAllTeamMembers}
+                        automaticAddAllEnabled={true}
+                        isFixed={true}
+                        onActive={() => {
+                          hookForm.setValue(
+                            "settings.sendUpdatesTo",
+                            (teamMembers || []).map((teamMember) => teamMember.id),
+                            { shouldDirty: true }
+                          );
+                          hookForm.setValue("settings.emailOwnerOnSubmission", false, { shouldDirty: true });
+                        }}
+                        placeholder={t("select_members")}
+                        containerClassName="!px-0 !pb-0 !pt-0"
+                      />
+                    ) : (
+                      <Controller
+                        name="settings.emailOwnerOnSubmission"
+                        control={hookForm.control}
+                        render={({ field: { value, onChange } }) => {
+                          return (
+                            <SettingsToggle
+                              title={t("routing_forms_send_email_owner")}
+                              description={t("routing_forms_send_email_owner_description")}
+                              checked={value}
+                              onCheckedChange={(val) => {
+                                onChange(val);
+                                hookForm.unregister("settings.sendUpdatesTo");
+                              }}
+                            />
+                          );
+                        }}
+                      />
+                    )}
                   </div>
 
                   {form.routers.length ? (