4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Maxime Lalo 2023-09-19 17:10:52 +02:00
commit c362e7d51c
3 changed files with 121 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss
View File

@ -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%;
}
}
@ -87,3 +88,13 @@
margin-bottom: 24px;
}
}
.validate-document-container {
.document-validating-container {
.validate-gif {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}

93
src/front/Components/Layouts/Folder/FolderInformation/index.tsx
View File

@ -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,6 +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.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<IPropsClass, IState> {
<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}>
Archiver le dossier
</Button>
{this.everyDocumentValidated() && (
<Button variant={EButtonVariant.PRIMARY} onClick={this.openValidateModal}>
Ancrer le dossier
</Button>
)}
{!this.doesFolderHaveCustomer() && (
<span className={classes["delete-folder"]} onClick={this.deleteFolder}>
<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
@ -128,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>
);
}
@ -137,6 +187,49 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
});
}
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?.length >= 1 &&
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);

48
src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
View File

@ -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<IPropsClass, IState> {
isValidateModalVisible: false,
isRefuseModalVisible: false,
refuseText: "",
hasValidateAnchoring: false,
selectedFileIndex: 0,
selectedFile: null,
validatedPercentage: this.getRandomPercentageForOcr(),
@ -58,7 +54,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
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<IPropsClass, IState> {
<Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}>
Refuser
</Button>
<Button onClick={this.openValidateModal}>Valider et ancrer</Button>
<Button onClick={this.openValidateModal}>Valider</Button>
<Button disabled>Télécharger</Button>
</>
)}
@ -129,30 +125,16 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
<Confirm
isOpen={this.state.isValidateModalVisible}
onClose={this.closeModals}
onAccept={this.validateAnchoring}
onAccept={this.validateDocument}
closeBtn={true}
hasContainerClosable={true}
header={this.state.hasValidateAnchoring ? "Document en cours de validation" : "Ancrer le document"}
header={"Valider le document ?"}
cancelText={"Annuler"}
confirmText={"Confirmer"}
showButtons={!this.state.hasValidateAnchoring}>
confirmText={"Confirmer"}>
<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 ?
Êtes-vous sûr de vouloir valider 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 }} />
</div>
</div>
)}
</div>
</Confirm>
<Confirm
@ -290,33 +272,17 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
}
}
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);
} catch (e) {
console.error(e);
}