import { PaperclipIcon, UserIcon, Users } from "lucide-react"; import { Trans } from "next-i18next"; import { useMemo, useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { IS_TEAM_BILLING_ENABLED } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { MembershipRole } from "@calcom/prisma/enums"; import { Button, Checkbox as CheckboxField, Dialog, DialogContent, DialogFooter, Form, TextField, Label, ToggleGroup, Select, TextAreaField, } from "@calcom/ui"; import type { PendingMember } from "../lib/types"; import { GoogleWorkspaceInviteButton } from "./GoogleWorkspaceInviteButton"; type MemberInvitationModalProps = { isOpen: boolean; onExit: () => void; onSubmit: (values: NewMemberForm) => void; members: PendingMember[]; }; type MembershipRoleOption = { value: MembershipRole; label: string; }; export interface NewMemberForm { emailOrUsername: string | string[]; role: MembershipRole; sendInviteEmail: boolean; } type ModalMode = "INDIVIDUAL" | "BULK"; export default function MemberInvitationModal(props: MemberInvitationModalProps) { const { t } = useLocale(); const [modalImportMode, setModalInputMode] = useState("INDIVIDUAL"); const options: MembershipRoleOption[] = useMemo(() => { return [ { value: MembershipRole.MEMBER, label: t("member") }, { value: MembershipRole.ADMIN, label: t("admin") }, { value: MembershipRole.OWNER, label: t("owner") }, ]; }, [t]); const newMemberFormMethods = useForm(); const validateUniqueInvite = (value: string) => { return !( props.members.some((member) => member?.username === value) || props.members.some((member) => member?.email === value) ); }; return ( { props.onExit(); newMemberFormMethods.reset(); }}> Note: This will cost an extra seat ($15/m){" "} on your subscription. ) : null }>
setModalInputMode(val as ModalMode)} defaultValue="INDIVIDUAL" options={[ { value: "INDIVIDUAL", label: t("invite_team_individual_segment"), iconLeft: , }, { value: "BULK", label: t("invite_team_bulk_segment"), iconLeft: }, ]} />
props.onSubmit(values)}>
{/* Indivdual Invite */} {modalImportMode === "INDIVIDUAL" && ( { if (typeof value === "string") return validateUniqueInvite(value) || t("member_already_invited"); }, }} render={({ field: { onChange }, fieldState: { error } }) => ( <> onChange(e.target.value.trim().toLowerCase())} /> {error && {error.message}} )} /> )} {/* Bulk Invite */} {modalImportMode === "BULK" && (
( <> {/* TODO: Make this a fancy email input that styles on a successful email. */} { const emails = e.target.value .split(",") .map((email) => email.trim().toLocaleLowerCase()); return onChange(emails); }} /> {error && {error.message}} )} /> { newMemberFormMethods.setValue("emailOrUsername", data); }} />
)} (