import { jsxs, jsx, Fragment } from "react/jsx-runtime"; import { u as useRoute } from "../app.js"; import { u as useTypedPage } from "./useTypedPage-Do3SqtsL.js"; import { A as ActionMessage } from "./ActionMessage-s_mcCJ3s.js"; import { A as ActionSection } from "./Modal-D5yHmTM4.js"; import { C as ConfirmationModal } from "./ConfirmationModal-BYr2Juy2.js"; import { D as DangerButton } from "./DangerButton-BAZynYAq.js"; import { D as DialogModal } from "./DialogModal-D0pyMzH2.js"; import { F as FormSection } from "./FormSection-DI6t3wFC.js"; import { T as TextInput, I as InputError } from "./TextInput-CMJy2hIv.js"; import { I as InputLabel } from "./InputLabel-DhqxoV6M.js"; import { P as PrimaryButton } from "./PrimaryButton-C2B8UWiv.js"; import { S as SecondaryButton } from "./SecondaryButton-G68tKuYQ.js"; import { S as SectionBorder } from "./SectionBorder-Dh4nHf2e.js"; import { router } from "@inertiajs/core"; import { useForm } from "@inertiajs/react"; import classNames from "classnames"; import { useState } from "react"; import "axios"; import "lodash"; import "react-dom/client"; import "@headlessui/react"; import "./SectionTitle-DnuUNpyS.js"; import "react-dom"; function TeamMemberManager({ team, availableRoles, userPermissions }) { const route = useRoute(); const addTeamMemberForm = useForm({ email: "", role: null }); const updateRoleForm = useForm({ role: null }); const leaveTeamForm = useForm({}); const removeTeamMemberForm = useForm({}); const [currentlyManagingRole, setCurrentlyManagingRole] = useState(false); const [managingRoleFor, setManagingRoleFor] = useState(null); const [confirmingLeavingTeam, setConfirmingLeavingTeam] = useState(false); const [teamMemberBeingRemoved, setTeamMemberBeingRemoved] = useState(null); const page = useTypedPage(); function addTeamMember() { addTeamMemberForm.post(route("team-members.store", [team]), { errorBag: "addTeamMember", preserveScroll: true, onSuccess: () => addTeamMemberForm.reset() }); } function cancelTeamInvitation(invitation) { router.delete(route("team-invitations.destroy", [invitation]), { preserveScroll: true }); } function manageRole(teamMember) { setManagingRoleFor(teamMember); updateRoleForm.setData("role", teamMember.membership.role); setCurrentlyManagingRole(true); } function updateRole() { if (!managingRoleFor) { return; } updateRoleForm.put(route("team-members.update", [team, managingRoleFor]), { preserveScroll: true, onSuccess: () => setCurrentlyManagingRole(false) }); } function confirmLeavingTeam() { setConfirmingLeavingTeam(true); } function leaveTeam() { leaveTeamForm.delete( route("team-members.destroy", [team, page.props.auth.user]) ); } function confirmTeamMemberRemoval(teamMember) { setTeamMemberBeingRemoved(teamMember); } function removeTeamMember() { if (!teamMemberBeingRemoved) { return; } removeTeamMemberForm.delete( route("team-members.destroy", [team, teamMemberBeingRemoved]), { errorBag: "removeTeamMember", preserveScroll: true, preserveState: true, onSuccess: () => setTeamMemberBeingRemoved(null) } ); } function displayableRole(role) { var _a; return (_a = availableRoles.find((r) => r.key === role)) == null ? void 0 : _a.name; } return /* @__PURE__ */ jsxs("div", { children: [ userPermissions.canAddTeamMembers ? /* @__PURE__ */ jsxs("div", { children: [ /* @__PURE__ */ jsx(SectionBorder, {}), /* @__PURE__ */ jsxs( FormSection, { onSubmit: addTeamMember, title: "Add Team Member", description: "Add a new team member to your team, allowing them to collaborate with you.", renderActions: () => /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( ActionMessage, { on: addTeamMemberForm.recentlySuccessful, className: "mr-3", children: "Added." } ), /* @__PURE__ */ jsx( PrimaryButton, { className: classNames({ "opacity-25": addTeamMemberForm.processing }), disabled: addTeamMemberForm.processing, children: "Add" } ) ] }), children: [ /* @__PURE__ */ jsx("div", { className: "col-span-6", children: /* @__PURE__ */ jsx("div", { className: "max-w-xl text-sm text-gray-600 dark:text-gray-400", children: "Please provide the email address of the person you would like to add to this team." }) }), /* @__PURE__ */ jsxs("div", { className: "col-span-6 sm:col-span-4", children: [ /* @__PURE__ */ jsx(InputLabel, { htmlFor: "email", value: "Email" }), /* @__PURE__ */ jsx( TextInput, { id: "email", type: "email", className: "mt-1 block w-full", value: addTeamMemberForm.data.email, onChange: (e) => addTeamMemberForm.setData("email", e.currentTarget.value) } ), /* @__PURE__ */ jsx( InputError, { message: addTeamMemberForm.errors.email, className: "mt-2" } ) ] }), availableRoles.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "col-span-6 lg:col-span-4", children: [ /* @__PURE__ */ jsx(InputLabel, { htmlFor: "roles", value: "Role" }), /* @__PURE__ */ jsx( InputError, { message: addTeamMemberForm.errors.role, className: "mt-2" } ), /* @__PURE__ */ jsx("div", { className: "relative z-0 mt-1 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer", children: availableRoles.map((role, i) => /* @__PURE__ */ jsx( "button", { type: "button", className: classNames( "relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-hidden focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-600", { "border-t border-gray-200 dark:border-gray-700 focus:border-none rounded-t-none": i > 0, "rounded-b-none": i != Object.keys(availableRoles).length - 1 } ), onClick: () => addTeamMemberForm.setData("role", role.key), children: /* @__PURE__ */ jsxs( "div", { className: classNames({ "opacity-50": addTeamMemberForm.data.role && addTeamMemberForm.data.role != role.key }), children: [ /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [ /* @__PURE__ */ jsx( "div", { className: classNames( "text-sm text-gray-600 dark:text-gray-400", { "font-semibold": addTeamMemberForm.data.role == role.key } ), children: role.name } ), addTeamMemberForm.data.role == role.key ? /* @__PURE__ */ jsx( "svg", { className: "ml-2 h-5 w-5 text-green-400", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) } ) : null ] }), /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-gray-600 dark:text-gray-400", children: role.description }) ] } ) }, role.key )) }) ] }) : null ] } ) ] }) : null, team.team_invitations.length > 0 && userPermissions.canAddTeamMembers ? /* @__PURE__ */ jsxs("div", { children: [ /* @__PURE__ */ jsx(SectionBorder, {}), /* @__PURE__ */ jsx("div", { className: "mt-10 sm:mt-0" }), /* @__PURE__ */ jsx( ActionSection, { title: "Pending Team Invitations", description: "These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.", children: /* @__PURE__ */ jsx("div", { className: "space-y-6", children: team.team_invitations.map((invitation) => /* @__PURE__ */ jsxs( "div", { className: "flex items-center justify-between", children: [ /* @__PURE__ */ jsx("div", { className: "text-gray-600 dark:text-gray-400", children: invitation.email }), /* @__PURE__ */ jsx("div", { className: "flex items-center", children: userPermissions.canRemoveTeamMembers ? /* @__PURE__ */ jsx( "button", { className: "cursor-pointer ml-6 text-sm text-red-500 focus:outline-hidden", onClick: () => cancelTeamInvitation(invitation), children: "Cancel" } ) : null }) ] }, invitation.id )) }) } ) ] }) : null, team.users.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [ /* @__PURE__ */ jsx(SectionBorder, {}), /* @__PURE__ */ jsx("div", { className: "mt-10 sm:mt-0" }), /* @__PURE__ */ jsx( ActionSection, { title: "Team Members", description: "All of the people that are part of this team.", children: /* @__PURE__ */ jsx("div", { className: "space-y-6", children: team.users.map((user) => { var _a; return /* @__PURE__ */ jsxs( "div", { className: "flex items-center justify-between", children: [ /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [ /* @__PURE__ */ jsx( "img", { className: "w-8 h-8 rounded-full", src: user.profile_photo_url, alt: user.name } ), /* @__PURE__ */ jsx("div", { className: "ml-4 dark:text-white", children: user.name }) ] }), /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [ userPermissions.canAddTeamMembers && availableRoles.length ? /* @__PURE__ */ jsx( "button", { className: "ml-2 text-sm text-gray-400 underline", onClick: () => manageRole(user), children: displayableRole(user.membership.role) } ) : availableRoles.length ? /* @__PURE__ */ jsx("div", { className: "ml-2 text-sm text-gray-400", children: displayableRole(user.membership.role) }) : null, ((_a = page.props.auth.user) == null ? void 0 : _a.id) === user.id ? /* @__PURE__ */ jsx( "button", { className: "cursor-pointer ml-6 text-sm text-red-500", onClick: confirmLeavingTeam, children: "Leave" } ) : null, userPermissions.canRemoveTeamMembers ? /* @__PURE__ */ jsx( "button", { className: "cursor-pointer ml-6 text-sm text-red-500", onClick: () => confirmTeamMemberRemoval(user), children: "Remove" } ) : null ] }) ] }, user.id ); }) }) } ) ] }) : null, /* @__PURE__ */ jsxs( DialogModal, { isOpen: currentlyManagingRole, onClose: () => setCurrentlyManagingRole(false), children: [ /* @__PURE__ */ jsx(DialogModal.Content, { title: "Manage Role" }), managingRoleFor ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "relative z-0 mt-1 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer", children: availableRoles.map((role, i) => /* @__PURE__ */ jsx( "button", { type: "button", className: classNames( "relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-hidden focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-600", { "border-t border-gray-200 dark:border-gray-700 focus:border-none rounded-t-none": i > 0, "rounded-b-none": i !== Object.keys(availableRoles).length - 1 } ), onClick: () => updateRoleForm.setData("role", role.key), children: /* @__PURE__ */ jsxs( "div", { className: classNames({ "opacity-50": updateRoleForm.data.role && updateRoleForm.data.role !== role.key }), children: [ /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [ /* @__PURE__ */ jsx( "div", { className: classNames( "text-sm text-gray-600 dark:text-gray-400", { "font-semibold": updateRoleForm.data.role === role.key } ), children: role.name } ), updateRoleForm.data.role === role.key ? /* @__PURE__ */ jsx( "svg", { className: "ml-2 h-5 w-5 text-green-400", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) } ) : null ] }), /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-gray-600 dark:text-gray-400", children: role.description }) ] } ) }, role.key )) }) }) : null, /* @__PURE__ */ jsxs(DialogModal.Footer, { children: [ /* @__PURE__ */ jsx(SecondaryButton, { onClick: () => setCurrentlyManagingRole(false), children: "Cancel" }), /* @__PURE__ */ jsx( PrimaryButton, { onClick: updateRole, className: classNames("ml-2", { "opacity-25": updateRoleForm.processing }), disabled: updateRoleForm.processing, children: "Save" } ) ] }) ] } ), /* @__PURE__ */ jsxs( ConfirmationModal, { isOpen: confirmingLeavingTeam, onClose: () => setConfirmingLeavingTeam(false), children: [ /* @__PURE__ */ jsx(ConfirmationModal.Content, { title: "Leave Team", children: "Are you sure you would like to leave this team?" }), /* @__PURE__ */ jsxs(ConfirmationModal.Footer, { children: [ /* @__PURE__ */ jsx(SecondaryButton, { onClick: () => setConfirmingLeavingTeam(false), children: "Cancel" }), /* @__PURE__ */ jsx( DangerButton, { onClick: leaveTeam, className: classNames("ml-2", { "opacity-25": leaveTeamForm.processing }), disabled: leaveTeamForm.processing, children: "Leave" } ) ] }) ] } ), /* @__PURE__ */ jsxs( ConfirmationModal, { isOpen: !!teamMemberBeingRemoved, onClose: () => setTeamMemberBeingRemoved(null), children: [ /* @__PURE__ */ jsx(ConfirmationModal.Content, { title: "Remove Team Member", children: "Are you sure you would like to remove this person from the team?" }), /* @__PURE__ */ jsxs(ConfirmationModal.Footer, { children: [ /* @__PURE__ */ jsx(SecondaryButton, { onClick: () => setTeamMemberBeingRemoved(null), children: "Cancel" }), /* @__PURE__ */ jsx( DangerButton, { onClick: removeTeamMember, className: classNames("ml-2", { "opacity-25": removeTeamMemberForm.processing }), disabled: removeTeamMemberForm.processing, children: "Remove" } ) ] }) ] } ) ] }); } export { TeamMemberManager as default };