✨ Validation popup on delete folder

src/front/Components/Layouts/Folder/FolderInformation/index.tsx

@@ -34,6 +34,7 @@ type IState = {
 	inputArchivedDescripton: string;
 	isValidateModalVisible: boolean;
 	hasValidateAnchoring: boolean;
+	isVerifDeleteModalVisible: boolean;
 };
 class FolderInformationClass extends BasePage<IPropsClass, IState> {
 	public constructor(props: IPropsClass) {
@@ -44,6 +45,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 			inputArchivedDescripton: "",
 			isValidateModalVisible: false,
 			hasValidateAnchoring: false,
+			isVerifDeleteModalVisible: false,
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 		this.openArchivedModal = this.openArchivedModal.bind(this);
@@ -55,6 +57,8 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		this.closeModal = this.closeModal.bind(this);
 		this.validateAnchoring = this.validateAnchoring.bind(this);
 		this.openValidateModal = this.openValidateModal.bind(this);
+		this.openVerifDeleteFolder = this.openVerifDeleteFolder.bind(this);
+		this.closeVerifDeleteFolder = this.closeVerifDeleteFolder.bind(this);
 	}
 
 	// TODO: Message if the user has not created any folder yet
@@ -109,7 +113,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									</Button>
 								)}
 								{!this.doesFolderHaveCustomer() && (
-									<span className={classes["delete-folder"]} onClick={this.deleteFolder}>
+									<span className={classes["delete-folder"]} onClick={this.openVerifDeleteFolder}>
 										<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
 									</span>
 								)}
@@ -131,6 +135,18 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									onChange={this.onArchivedDescriptionInputChange}
 								/>
 							</Confirm>
+							<Confirm
+								isOpen={this.state.isVerifDeleteModalVisible}
+								onAccept={this.deleteFolder}
+								onClose={this.closeVerifDeleteFolder}
+								closeBtn
+								header={"Êtes-vous sûr de vouloir supprimer ce dossier ?"}
+								cancelText={"Annuler"}
+								confirmText={"Confirmer"}>
+								<div className={classes["modal-title"]}>
+									<Typography typo={ITypo.P_16}>Cette action sera irréversible.</Typography>
+								</div>
+							</Confirm>
 						</div>
 					) : (
 						<div className={classes["no-folder-selected"]}>
@@ -187,6 +203,18 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		});
 	}
 
+	public openVerifDeleteFolder() {
+		this.setState({
+			isVerifDeleteModalVisible: true,
+		});
+	}
+
+	public closeVerifDeleteFolder() {
+		this.setState({
+			isVerifDeleteModalVisible: false,
+		});
+	}
+
 	private closeModal() {
 		this.setState({
 			isValidateModalVisible: false,