onChange()} // We handle this on click on the div also - for a11y we handle it with label and checkbox below
+ className={classNames(
+ "flex cursor-pointer items-center rounded-md py-1 px-2",
+ isSelected ? "bg-emphasis" : "hover:bg-subtle "
+ )}>
+
+
+
+
+
+ {
+ onChange();
+ }}
+ />
+
+
+ );
+}
diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx
index e3e3fb2f60..a081101028 100644
--- a/packages/features/ee/teams/components/MemberInvitationModal.tsx
+++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx
@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
import type { FormEvent } from "react";
import { Controller, useForm } from "react-hook-form";
+import TeamInviteFromOrg from "@calcom/ee/organizations/components/TeamInviteFromOrg";
import { classNames } from "@calcom/lib";
import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -52,17 +53,24 @@ export interface NewMemberForm {
sendInviteEmail: boolean;
}
-type ModalMode = "INDIVIDUAL" | "BULK";
+type ModalMode = "INDIVIDUAL" | "BULK" | "ORGANIZATION";
interface FileEvent extends FormEvent {
target: EventTarget & T;
}
+function toggleElementInArray(value: string[] | string | undefined, element: string): string[] {
+ const array = value ? (Array.isArray(value) ? value : [value]) : [];
+ return array.includes(element) ? array.filter((item) => item !== element) : [...array, element];
+}
+
export default function MemberInvitationModal(props: MemberInvitationModalProps) {
const { t } = useLocale();
const trpcContext = trpc.useContext();
- const [modalImportMode, setModalInputMode] = useState("INDIVIDUAL");
+ const [modalImportMode, setModalInputMode] = useState(
+ props?.orgMembers && props.orgMembers?.length > 0 ? "ORGANIZATION" : "INDIVIDUAL"
+ );
const createInviteMutation = trpc.viewer.teams.createInvite.useMutation({
onSuccess(token) {
@@ -98,7 +106,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
},
{ value: "BULK", label: t("invite_team_bulk_segment"), iconLeft: },
];
- if (props.orgMembers) {
+ if (props?.orgMembers && props.orgMembers?.length > 0) {
array.unshift({
value: "ORGANIZATION",
label: t("organization"),
@@ -170,7 +178,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
setModalInputMode(val as ModalMode)}
- defaultValue="INDIVIDUAL"
+ defaultValue={modalImportMode}
options={toggleGroupOptions}
/>
@@ -260,6 +268,29 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
)}
+ {modalImportMode === "ORGANIZATION" && (
+ (
+ <>
+ {
+ // If 'value' is not an array, create a new array with 'userEmail' to allow future updates to the array.
+ // If 'value' is an array, update the array by either adding or removing 'userEmail'.
+ const newValue = toggleElementInArray(value, userEmail);
+ onChange(newValue);
+ }}
+ orgMembers={props.orgMembers}
+ />
+
+ )}
+ />
+ )}
{editMode && (
-