✨ Disable inputs if max length on manage collaborators

src/front/Components/DesignSystem/CheckBox/classes.module.scss

@@ -4,6 +4,9 @@
 	cursor: pointer;
 	display: flex;
 	align-items: center;
+	&.disabled {
+		cursor: not-allowed;
+	}
 
 	input[type="checkbox"] {
 		appearance: none;
@@ -15,6 +18,10 @@
 		margin-right: 16px;
 		display: grid;
 		place-content: center;
+
+		&:disabled {
+			cursor: not-allowed;
+		}
 	}
 
 	input[type="checkbox"]::before {

src/front/Components/DesignSystem/CheckBox/index.tsx

@@ -4,6 +4,7 @@ import { IOption } from "../Form/SelectField";
 import Tooltip from "../ToolTip";
 import Typography, { ITypo, ITypoColor } from "../Typography";
 import classes from "./classes.module.scss";
+import classNames from "classnames";
 
 type IProps = {
 	name?: string;
@@ -11,6 +12,7 @@ type IProps = {
 	toolTip?: string;
 	onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	checked: boolean;
+	disabled?: boolean;
 };
 
 type IState = {
@@ -21,6 +23,7 @@ export default class CheckBox extends React.Component<IProps, IState> {
 	static defaultProps = {
 		toolTip: "",
 		checked: false,
+		disabled: false,
 	};
 
 	constructor(props: IProps) {
@@ -35,13 +38,14 @@ export default class CheckBox extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}>
-				<label className={classes["root"]}>
+				<label className={classNames(classes["root"], this.props.disabled && classes["disabled"])}>
 					<input
 						type="checkbox"
 						name={this.props.name ?? (this.props.option.value as string)}
 						value={this.props.option.value as string}
 						onChange={this.onChange}
 						checked={this.state.checked}
+						disabled={this.props.disabled}
 					/>
 					{this.props.option.label}
 					{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}

src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx

@@ -88,7 +88,7 @@ export default function SubscriptionManageCollaborators() {
 			if (selectedCollaborators.includes(value)) {
 				setSelectedCollaborators((prev) => prev.filter((collaborator) => collaborator !== value));
 			} else {
-				if (selectedCollaborators.length <= subscription.nb_seats!) {
+				if (selectedCollaborators.length < subscription.nb_seats!) {
 					setSelectedCollaborators((prev) => [...prev, value]);
 				}
 			}
@@ -121,6 +121,10 @@ export default function SubscriptionManageCollaborators() {
 									}}
 									checked={selectedCollaborators.includes(collaborator.uid!)}
 									onChange={handleChange}
+									disabled={
+										selectedCollaborators.length >= subscription.nb_seats! &&
+										!selectedCollaborators.includes(collaborator.uid!)
+									}
 									name="collaborators"
 								/>
 							))}