✨ Validating document working

src/front/Components/DesignSystem/Modal/Confirm/index.tsx

@@ -11,6 +11,7 @@ type IProps = IPropsModal & {
 	cancelPath?: string;
 	confirmText: string | JSX.Element;
 	showCancelButton: boolean;
+	showButtons: boolean;
 	canConfirm: boolean;
 };
 
@@ -22,6 +23,7 @@ export default class Confirm extends React.Component<IProps, IState> {
 		cancelText: "Cancel",
 		confirmText: "Confirm",
 		canConfirm: true,
+		showButtons: true,
 		...Modal.defaultProps,
 	};
 
@@ -29,17 +31,17 @@ export default class Confirm extends React.Component<IProps, IState> {
 		return (
 			<Modal
 				closeBtn={this.props.closeBtn}
-				isOpen={this.props.isOpen}
-				onClose={this.props.onClose}
 				header={this.props.header}
 				footer={this.footer()}
-				animationDelay={this.props.animationDelay}>
+				animationDelay={this.props.animationDelay}
+				{...this.props}>
 				{this.props.children}
 			</Modal>
 		);
 	}
 
-	private footer(): JSX.Element {
+	private footer(): JSX.Element | null {
+		if (!this.props.showButtons) return null;
 		return (
 			<div className={classes["buttons-container"]}>
 				{this.props.showCancelButton &&

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

@@ -11,7 +11,7 @@ import Loader from "./Elements/Loader";
 export type IProps = {
 	closeBtn?: boolean;
 	header?: string | JSX.Element;
-	footer?: JSX.Element;
+	footer?: JSX.Element | null;
 	textLoader?: string | JSX.Element;
 	isOpen: boolean;
 	onClose: () => void;
@@ -87,6 +87,7 @@ export default class Modal extends React.Component<IProps, IState> {
 	}
 
 	protected close() {
+		if (this.props.hasContainerClosable === false) return;
 		if (this.state.willClose) return;
 		this.props.onClose();
 	}

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

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

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

@@ -1,9 +1,12 @@
+import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 import FilePreview from "@Front/Components/DesignSystem/FilePreview";
 import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import Image from "next/image";
 import React from "react";
 
 import BasePage from "../../Base";
@@ -14,6 +17,7 @@ type IState = {
 	isRefuseModalVisible: boolean;
 	isValidateModalVisible: boolean;
 	refuseText: string;
+	hasValidateAnchoring: boolean;
 };
 
 export default class ViewDocuments extends BasePage<IProps, IState> {
@@ -24,12 +28,14 @@ export default class ViewDocuments extends BasePage<IProps, IState> {
 			isValidateModalVisible: false,
 			isRefuseModalVisible: false,
 			refuseText: "",
+			hasValidateAnchoring: false,
 		};
 
 		this.closeModals = this.closeModals.bind(this);
 		this.openValidateModal = this.openValidateModal.bind(this);
 		this.openRefuseModal = this.openRefuseModal.bind(this);
 		this.onRefuseTextChange = this.onRefuseTextChange.bind(this);
+		this.validateAnchoring = this.validateAnchoring.bind(this);
 	}
 
 	public override render(): JSX.Element {
@@ -59,12 +65,31 @@ export default class ViewDocuments extends BasePage<IProps, IState> {
 					<Confirm
 						isOpen={this.state.isValidateModalVisible}
 						onClose={this.closeModals}
-						onAccept={this.closeModals}
+						onAccept={this.validateAnchoring}
-						closeBtn
+						closeBtn={!this.state.hasValidateAnchoring}
-						header={"Créer un type de document"}
+						hasContainerClosable={!this.state.hasValidateAnchoring}
+						header={this.state.hasValidateAnchoring ? "Document en cours de validation" : "Ancrer le document"}
 						cancelText={"Annuler"}
-						confirmText={"Ajouter"}>
+						confirmText={"Confirmer"}
-						<div className={classes["add-document-form-container"]}></div>
+						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"]}>
+									Êtes-vous sûr de vouloir ancrer ce document ?
+								</Typography>
+							)}
+							{this.state.hasValidateAnchoring && (
+								<div className={classes["document-validating-container"]}>
+									<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
+										Le document s'ancre dans la blockchain.
+									</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 }} toolTip={"Test"} />
+									</div>
+								</div>
+							)}
+						</div>
 					</Confirm>
 					<Confirm
 						isOpen={this.state.isRefuseModalVisible}
@@ -88,6 +113,12 @@ export default class ViewDocuments extends BasePage<IProps, IState> {
 		);
 	}
 
+	private validateAnchoring() {
+		this.setState({
+			hasValidateAnchoring: true,
+		});
+	}
+
 	private onRefuseTextChange(e: React.ChangeEvent<HTMLInputElement>) {
 		this.setState({
 			refuseText: e.target.value,