✨ Anchor and certify on folder page

src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss

@@ -88,3 +88,13 @@
 		margin-bottom: 24px;
 	}
 }
+
+.validate-document-container {
+	.document-validating-container {
+		.validate-gif {
+			width: 100%;
+			height: 100%;
+			object-fit: contain;
+		}
+	}
+}

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

@@ -13,10 +13,13 @@ import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
 import Link from "next/link";
 import { NextRouter, useRouter } from "next/router";
 import { ChangeEvent } from "react";
+import Image from "next/image";
+import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import ClientSection from "./ClientSection";
+import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 
 type IProps = {};
 
@@ -29,6 +32,8 @@ type IState = {
 	selectedFolder: OfficeFolder | null;
 	isArchivedModalOpen: boolean;
 	inputArchivedDescripton: string;
+	isValidateModalVisible: boolean;
+	hasValidateAnchoring: boolean;
 };
 class FolderInformationClass extends BasePage<IPropsClass, IState> {
 	public constructor(props: IPropsClass) {
@@ -37,6 +42,8 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 			selectedFolder: null,
 			isArchivedModalOpen: false,
 			inputArchivedDescripton: "",
+			isValidateModalVisible: false,
+			hasValidateAnchoring: false,
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 		this.openArchivedModal = this.openArchivedModal.bind(this);
@@ -45,7 +52,9 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		this.getCompletionNumber = this.getCompletionNumber.bind(this);
 		this.onArchivedDescriptionInputChange = this.onArchivedDescriptionInputChange.bind(this);
 		this.deleteFolder = this.deleteFolder.bind(this);
-		this.anchorFolder = this.anchorFolder.bind(this);
+		this.closeModal = this.closeModal.bind(this);
+		this.validateAnchoring = this.validateAnchoring.bind(this);
+		this.openValidateModal = this.openValidateModal.bind(this);
 	}
 
 	// TODO: Message if the user has not created any folder yet
@@ -95,7 +104,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									Archiver le dossier
 								</Button>
 								{this.everyDocumentValidated() && (
-									<Button variant={EButtonVariant.PRIMARY} onClick={this.anchorFolder}>
+									<Button variant={EButtonVariant.PRIMARY} onClick={this.openValidateModal}>
 										Ancrer le dossier
 									</Button>
 								)}
@@ -134,6 +143,41 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 						</div>
 					)}
 				</div>
+				<Confirm
+					isOpen={this.state.isValidateModalVisible}
+					onClose={this.closeModal}
+					onAccept={this.validateAnchoring}
+					closeBtn={true}
+					hasContainerClosable={true}
+					header={
+						this.state.hasValidateAnchoring
+							? "Dossier en cours de certification"
+							: "Êtes-vous sûr de vouloir ancrer et certifier ?"
+					}
+					cancelText={"Annuler"}
+					confirmText={"Confirmer"}
+					showButtons={!this.state.hasValidateAnchoring}>
+					<div className={classes["validate-document-container"]}>
+						{!this.state.hasValidateAnchoring && (
+							<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
+								Afin de certifier les documents associés au dossier, cliquez sur “Ancrez et certifier” et les documents
+								seront certifiés sur la blockchain.
+							</Typography>
+						)}
+						{this.state.hasValidateAnchoring && (
+							<div className={classes["document-validating-container"]}>
+								<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
+									Vous pouvez désormais télécharger les feuilles d'ancrage et les mettre dans la GED de votre logiciel de
+									rédaction d'acte.
+								</Typography>
+								<Image src={ValidateAnchoringGif} alt="Anchoring animation" className={classes["validate-gif"]} />
+								<div className={classes["dont-show-again"]}>
+									<CheckBox option={{ label: "Ne plus afficher ce message", value: false }} />
+								</div>
+							</div>
+						)}
+					</div>
+				</Confirm>
 			</DefaultNotaryDashboard>
 		);
 	}
@@ -143,7 +187,40 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		});
 	}
 
-	private anchorFolder() {}
+	private closeModal() {
+		this.setState({
+			isValidateModalVisible: false,
+		});
+	}
+
+	private openValidateModal() {
+		this.setState({
+			isValidateModalVisible: true,
+		});
+	}
+
+	private async validateAnchoring() {
+		this.setState({
+			hasValidateAnchoring: true,
+		});
+
+		try {
+			const timeoutDelay = 9800;
+			setTimeout(() => {
+				this.setState({
+					isValidateModalVisible: false,
+				});
+			}, timeoutDelay);
+
+			setTimeout(() => {
+				this.setState({
+					hasValidateAnchoring: false,
+				});
+			}, timeoutDelay + 1000);
+		} catch (e) {
+			console.error(e);
+		}
+	}
 
 	private everyDocumentValidated(): boolean {
 		if (!this.state.selectedFolder?.documents) return false;