diff --git a/frontend/src/component/admin/users/CreateUser/CreateUser.tsx b/frontend/src/component/admin/users/CreateUser/CreateUser.tsx index e927fa6693..d599b5d45c 100644 --- a/frontend/src/component/admin/users/CreateUser/CreateUser.tsx +++ b/frontend/src/component/admin/users/CreateUser/CreateUser.tsx @@ -12,6 +12,7 @@ import { CreateButton } from 'component/common/CreateButton/CreateButton'; import { ADMIN } from 'component/providers/AccessProvider/permissions'; import { formatUnknownError } from 'utils/formatUnknownError'; import { GO_BACK } from 'constants/navigate'; +import { SeatCostWarning } from './SeatCostWarning/SeatCostWarning'; const CreateUser = () => { const { setToastApiError } = useToast(); @@ -86,6 +87,7 @@ const CreateUser = () => { documentationLinkLabel="User management documentation" formatApiCode={formatApiCode} > + { + const { users } = useUsers(); + const { isBillingUsers, seats, planUsers } = useUsersPlan(users); + + if (!isBillingUsers) { + return null; + } + + return ( + theme.spacing(3) }}> +

+ Heads up! You are exceeding your allocated free + members included in your plan ({planUsers.length} of {seats}). + Creating this user will add $15/month to your + invoice, starting with your next payment. +

+
+ ); +}; diff --git a/frontend/src/component/admin/users/UsersList/UserLimitWarning/UserLimitWarning.tsx b/frontend/src/component/admin/users/UsersList/UserLimitWarning/UserLimitWarning.tsx new file mode 100644 index 0000000000..826bdb7f2d --- /dev/null +++ b/frontend/src/component/admin/users/UsersList/UserLimitWarning/UserLimitWarning.tsx @@ -0,0 +1,37 @@ +import { VFC } from 'react'; +import { Link as RouterLink } from 'react-router-dom'; +import { Alert, Link } from '@mui/material'; +import { useUsersPlan } from 'hooks/useUsersPlan'; +import { useUsers } from 'hooks/api/getters/useUsers/useUsers'; + +const userLimit = 20; + +export const UserLimitWarning: VFC = () => { + const { users } = useUsers(); + const { isBillingUsers, planUsers } = useUsersPlan(users); + + if (!isBillingUsers) { + return null; + } + + if (planUsers?.length < userLimit) { + return null; + } + + return ( + theme.spacing(3) }}> +

+ Heads up! You have reached your maximum number + of registered users for you PRO account (up to max {userLimit}{' '} + users). If you need more users please{' '} + + get in touch with us + + . +

+
+ ); +}; diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx index b5758f3e94..d3be3537fc 100644 --- a/frontend/src/component/admin/users/UsersList/UsersList.tsx +++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx @@ -33,6 +33,7 @@ import { UsersActionsCell } from './UsersActionsCell/UsersActionsCell'; import { Search } from 'component/common/Search/Search'; import { UserAvatar } from 'component/common/UserAvatar/UserAvatar'; import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; +import { UserLimitWarning } from './UserLimitWarning/UserLimitWarning'; const UsersList = () => { const navigate = useNavigate(); @@ -262,6 +263,7 @@ const UsersList = () => { /> } > + { @@ -24,7 +26,11 @@ export const useUsersPlan = (users: IUser[]): IUsersPlanOutput => { [users, isBillingUsers, seats] ); + const extraSeats = planUsers.filter(user => user.paid).length; + return { + seats, + extraSeats, planUsers, isBillingUsers, };