Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 74x 74x 74x 74x 334x 300x 74x 27x 74x 1x 1x 1x 4x 74x | import { Stack } from "@mui/material";
import { DividerText } from "./components";
import { Select } from "@common/Select";
import useChangeRole from "../hooks/useChangeRole";
import CheckIcon from "@assets/icons/RebrandedIcons/CheckIcon";
import { palette } from "@palette";
import { SelectProps } from "@common/Select/Select";
import { memo, useEffect } from "react";
import { EDIT_DENY_MESSAGE } from "@constants/permissions";
import { CustomToolTip } from "@common/BusinessOwners/CustomToolTip";
import { MemberRoleName } from "@customTypes/team.member";
import { useRoles } from "@services/api/accounts";
type ChangeRoleProps = {
role: MemberRoleName;
updateRole: (newRole: MemberRoleName) => void;
id: number;
isCurrentUser: boolean;
isOwner: boolean;
isEditAllowed: boolean;
};
function ChangeRole({
role,
updateRole,
id,
isCurrentUser,
isOwner,
isEditAllowed,
}: ChangeRoleProps) {
const { title, setTitle, onSubmit } = useChangeRole(role, id, updateRole);
const isDisabled = isOwner || isCurrentUser || !isEditAllowed;
const { data, getDefaultRole } = useRoles();
const filteredData = data?.data
?.sort((a, b) => a?.label.localeCompare(b?.label))
?.map((userRole) => ({
...userRole,
disabled: userRole?.value === "owner",
endIcon:
userRole?.value === title && !isOwner ? (
<CheckIcon fill={palette.black[300]} />
) : undefined,
}));
useEffect(() => {
setTitle(getDefaultRole(role));
}, [role]);
return (
<Stack direction="column" gap={2} alignItems="stretch">
<DividerText>Change Role</DividerText>
<CustomToolTip showToolTip={!isEditAllowed} message={EDIT_DENY_MESSAGE}>
<ChooseRoleSelect
options={filteredData}
value={title}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
const newRole = getDefaultRole(event.target.value);
setTitle(newRole);
onSubmit(newRole);
}}
disabled={isDisabled}
/>
</CustomToolTip>
</Stack>
);
}
export const ChooseRoleSelect = ({ ...props }: SelectProps) => {
return (
<Select
placeholder="Member"
label="Role"
shouldDisplayIcon
{...props}
sx={{
"& .MuiSelect-outlined.MuiInputBase-input": {
"& div > svg": {
display: "none",
},
},
}}
selectItemProps={{
sx: {
"& div": {
justifyContent: "space-between",
padding: "4px 8px",
fontWeight: 350,
borderRadius: "4px",
},
"&:hover": {
backgroundColor: palette.liftedWhite[100],
},
},
}}
MenuProps={{
PaperProps: {
style: {
padding: "4px",
borderRadius: "8px",
background: "#FAFAFA",
boxShadow: "0px 8px 25px 0px rgba(0, 0, 0, 0.15)",
},
},
sx: {
"& .MuiList-root": {
display: "flex",
flexDirection: "column",
gap: "2px",
},
},
}}
/>
);
};
export default memo(ChangeRole);
|