✨ Vote popups done

src/front/Components/Layouts/Users/UserInformations/index.tsx

@@ -3,6 +3,7 @@ import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
 import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultUserDashboard from "@Front/Components/LayoutTemplates/DefaultUserDashboard";
 import User from "le-coffre-resources/dist/Notary";
@@ -20,6 +21,42 @@ export default function UserInformations(props: IProps) {
 	const [userSelected, setUserSelected] = useState<User | null>(null);
 	const [availableRoles, setAvailableRoles] = useState<IOption[]>([]);
 
+	const [addSuperAdminModalOpened, setAddSuperAdminModalOpened] = useState<boolean>(false);
+	const [removeSuperAdminModalOpened, setRemoveSuperAdminModalOpened] = useState<boolean>(false);
+
+	const openAddSuperAdminModal = () => {
+		setAddSuperAdminModalOpened(true);
+	};
+
+	const closeAddSuperAdminModal = () => {
+		setAddSuperAdminModalOpened(false);
+	};
+
+	const openRemoveSuperAdminModal = () => {
+		setRemoveSuperAdminModalOpened(true);
+	};
+
+	const closeRemoveSuperAdminModal = () => {
+		setRemoveSuperAdminModalOpened(false);
+	};
+
+	const handleCheckboxAdminChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const checked = e.target.checked;
+		if (checked) {
+			openAddSuperAdminModal();
+		} else {
+			openRemoveSuperAdminModal();
+		}
+	};
+
+	const addSuperAdmin = async () => {
+		closeAddSuperAdminModal();
+	};
+
+	const removeSuperAdmin = async () => {
+		closeRemoveSuperAdminModal();
+	};
+
 	useEffect(() => {
 		async function getUser() {
 			if (!userUid) return;
@@ -109,6 +146,7 @@ export default function UserInformations(props: IProps) {
 								toolTip="tooltip"
 							/>
 							<CheckBox
+								onChange={handleCheckboxAdminChanged}
 								option={{
 									label: "Nommer super admin LEcoffre.io",
 									value: "title",
@@ -135,6 +173,40 @@ export default function UserInformations(props: IProps) {
 						</div>
 					</div>
 				</div>
+				<Confirm
+					isOpen={addSuperAdminModalOpened}
+					onClose={closeAddSuperAdminModal}
+					onAccept={addSuperAdmin}
+					closeBtn
+					header={`Souhaitez-vous attribuer un vote à ${
+						userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
+					} pour devenir Super Administrateur ?`}
+					confirmText={"Attribuer un vote"}
+					cancelText={"Annuler"}>
+					<div className={classes["modal-content"]}>
+						<Typography typo={ITypo.P_16} className={classes["text"]}>
+							Nommer une personne Super Administrateur nécessite 3 votes de super administrateurs existants. Souhaitez-vous
+							attribuer un vote ?
+						</Typography>
+					</div>
+				</Confirm>
+				<Confirm
+					isOpen={removeSuperAdminModalOpened}
+					onClose={closeRemoveSuperAdminModal}
+					onAccept={removeSuperAdmin}
+					closeBtn
+					header={`Souhaitez-vous retirer ${
+						userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
+					} de la liste des Super Administrateurs ?`}
+					confirmText={"Attribuer un vote"}
+					cancelText={"Annuler"}>
+					<div className={classes["modal-content"]}>
+						<Typography typo={ITypo.P_16} className={classes["text"]}>
+							Retirer un collaborateur du rôle de Super Administrateur nécessite 3 votes de super administrateurs existants.
+							Souhaitez-vous attribuer un vote ?
+						</Typography>
+					</div>
+				</Confirm>
 			</div>
 		</DefaultUserDashboard>
 	);