diff --git a/src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss b/src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss index a1052297..8d16dc82 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss +++ b/src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss @@ -57,6 +57,7 @@ .button-container { width: 100%; display: flex; + gap: 16px; text-align: center; justify-content: center; @@ -72,12 +73,12 @@ margin-left: 0; margin-top: 12px; - >* { + > * { flex: 1; } } - >* { + > * { width: 100%; } } @@ -86,4 +87,14 @@ .modal-title { margin-bottom: 24px; } -} \ No newline at end of file +} + +.validate-document-container { + .document-validating-container { + .validate-gif { + width: 100%; + height: 100%; + object-fit: contain; + } + } +} diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx index bb6a30c5..f58687e3 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx +++ b/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 { public constructor(props: IPropsClass) { @@ -37,6 +42,8 @@ class FolderInformationClass extends BasePage { selectedFolder: null, isArchivedModalOpen: false, inputArchivedDescripton: "", + isValidateModalVisible: false, + hasValidateAnchoring: false, }; this.onSelectedFolder = this.onSelectedFolder.bind(this); this.openArchivedModal = this.openArchivedModal.bind(this); @@ -45,6 +52,9 @@ class FolderInformationClass extends BasePage { this.getCompletionNumber = this.getCompletionNumber.bind(this); this.onArchivedDescriptionInputChange = this.onArchivedDescriptionInputChange.bind(this); this.deleteFolder = this.deleteFolder.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 @@ -93,6 +103,11 @@ class FolderInformationClass extends BasePage { + {this.everyDocumentValidated() && ( + + )} {!this.doesFolderHaveCustomer() && ( @@ -128,6 +143,41 @@ class FolderInformationClass extends BasePage { )} + +
+ {!this.state.hasValidateAnchoring && ( + + Afin de certifier les documents associés au dossier, cliquez sur “Ancrez et certifier” et les documents + seront certifiés sur la blockchain. + + )} + {this.state.hasValidateAnchoring && ( +
+ + 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. + + Anchoring animation +
+ +
+
+ )} +
+
); } @@ -137,6 +187,46 @@ class FolderInformationClass extends BasePage { }); } + 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; + return this.state.selectedFolder?.documents.every((document) => document.document_status === EDocumentStatus.VALIDATED); + } + private async deleteFolder() { if (!this.state.selectedFolder?.uid) return; await Folders.getInstance().delete(this.state.selectedFolder.uid); diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx index 81bb3a8d..68faf697 100644 --- a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx @@ -1,9 +1,7 @@ import LeftArrowIcon from "@Assets/Icons/left-arrow.svg"; import RightArrowIcon from "@Assets/Icons/right-arrow.svg"; import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents"; -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 Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; @@ -32,7 +30,6 @@ type IState = { isRefuseModalVisible: boolean; isValidateModalVisible: boolean; refuseText: string; - hasValidateAnchoring: boolean; selectedFileIndex: number; selectedFile: File | null; validatedPercentage: number; @@ -47,7 +44,6 @@ class ViewDocumentsClass extends BasePage { isValidateModalVisible: false, isRefuseModalVisible: false, refuseText: "", - hasValidateAnchoring: false, selectedFileIndex: 0, selectedFile: null, validatedPercentage: this.getRandomPercentageForOcr(), @@ -58,7 +54,7 @@ class ViewDocumentsClass extends BasePage { this.openValidateModal = this.openValidateModal.bind(this); this.openRefuseModal = this.openRefuseModal.bind(this); this.onRefuseTextChange = this.onRefuseTextChange.bind(this); - this.validateAnchoring = this.validateAnchoring.bind(this); + this.validateDocument = this.validateDocument.bind(this); this.goToNext = this.goToNext.bind(this); this.goToPrevious = this.goToPrevious.bind(this); @@ -117,7 +113,7 @@ class ViewDocumentsClass extends BasePage { - + )} @@ -129,30 +125,16 @@ class ViewDocumentsClass extends BasePage { + confirmText={"Confirmer"}>
- {!this.state.hasValidateAnchoring && ( - - Êtes-vous sûr de vouloir ancrer ce document ? - - )} - {this.state.hasValidateAnchoring && ( -
- - Le document s'ancre dans la blockchain. - - Anchoring animation -
- -
-
- )} + + Êtes-vous sûr de vouloir valider ce document ? +
{ } } - private async validateAnchoring() { - this.setState({ - hasValidateAnchoring: true, - }); - + private async validateDocument() { try { await Documents.getInstance().put(this.props.documentUid, { document_status: EDocumentStatus.VALIDATED, }); - const timeoutDelay = 9800; - setTimeout(() => { - this.setState({ - isValidateModalVisible: false, - }); - this.props.router.push( - Module.getInstance() - .get() - .modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid), - ); - }, timeoutDelay); - - setTimeout(() => { - this.setState({ - hasValidateAnchoring: false, - }); - }, timeoutDelay + 1000); + this.props.router.push( + Module.getInstance() + .get() + .modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid), + ); } catch (e) { console.error(e); }