396 lines
12 KiB
TypeScript
396 lines
12 KiB
TypeScript
import LeftArrowIcon from "@Assets/Icons/left-arrow.svg";
|
|
import RightArrowIcon from "@Assets/Icons/right-arrow.svg";
|
|
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
|
import FilePreview from "@Front/Components/DesignSystem/FilePreview";
|
|
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
|
|
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
|
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
|
import Module from "@Front/Config/Module";
|
|
import { Document, File } from "le-coffre-resources/dist/Notary";
|
|
import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
|
|
import Image from "next/image";
|
|
import { NextRouter, useRouter } from "next/router";
|
|
import React from "react";
|
|
|
|
import BasePage from "../../Base";
|
|
import classes from "./classes.module.scss";
|
|
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
|
|
import MessageBox from "@Front/Components/Elements/MessageBox";
|
|
|
|
import DocumentService from "src/common/Api/LeCoffreApi/sdk/DocumentService";
|
|
import FileService from "src/common/Api/LeCoffreApi/sdk/FileService";
|
|
import { FileBlob } from "@Front/Api/Entities/types";
|
|
|
|
type IProps = {};
|
|
type IPropsClass = {
|
|
documentUid: string;
|
|
router: NextRouter;
|
|
folderUid: string;
|
|
};
|
|
|
|
type IState = {
|
|
isRefuseModalVisible: boolean;
|
|
isValidateModalVisible: boolean;
|
|
refuseText: string;
|
|
selectedFileIndex: number;
|
|
selectedFile: { uid: string; file_name: string; file_blob: FileBlob } | null;
|
|
validatedPercentage: number;
|
|
document: Document | null;
|
|
fileBlob: Blob | null;
|
|
isLoading: boolean;
|
|
};
|
|
|
|
class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
|
|
public constructor(props: IPropsClass) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
isValidateModalVisible: false,
|
|
isRefuseModalVisible: false,
|
|
refuseText: "",
|
|
selectedFileIndex: 0,
|
|
selectedFile: null,
|
|
validatedPercentage: this.getRandomPercentageForOcr(),
|
|
document: null,
|
|
fileBlob: null,
|
|
isLoading: true,
|
|
};
|
|
|
|
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.validateDocument = this.validateDocument.bind(this);
|
|
this.goToNext = this.goToNext.bind(this);
|
|
this.goToPrevious = this.goToPrevious.bind(this);
|
|
|
|
this.hasPrevious = this.hasPrevious.bind(this);
|
|
this.hasNext = this.hasNext.bind(this);
|
|
this.downloadFile = this.downloadFile.bind(this);
|
|
this.refuseDocument = this.refuseDocument.bind(this);
|
|
}
|
|
|
|
public override render(): JSX.Element | null {
|
|
return (
|
|
<DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
|
|
{this.state.document && this.state.document.files && this.state.selectedFile && !this.state.isLoading && (
|
|
<div className={classes["root"]}>
|
|
<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
|
|
{this.state.document.folder?.name}
|
|
</Typography>
|
|
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["subtitle"]}>
|
|
{this.state.document.document_type?.name}
|
|
</Typography>
|
|
<div className={classes["document-container"]}>
|
|
{this.state.document.files.length > 1 && (
|
|
<div
|
|
className={classes["arrow-container"]}
|
|
onClick={this.goToPrevious}
|
|
data-disabled={(!this.hasPrevious()).toString()}>
|
|
<Image src={LeftArrowIcon} alt="left arrow" />
|
|
</div>
|
|
)}
|
|
<div className={classes["file-container"]}>
|
|
{this.state.selectedFile.file_blob.type === "application/pdf" ||
|
|
this.state.selectedFile.file_blob.type === "image/jpeg" ||
|
|
this.state.selectedFile.file_blob.type === "image/png" ||
|
|
this.state.selectedFile.file_blob.type === "image/jpg" ? (
|
|
<FilePreview
|
|
href={this.state.fileBlob ? URL.createObjectURL(this.state.fileBlob) : ""}
|
|
fileName={this.state.selectedFile.file_name}
|
|
key={this.state.selectedFile.uid}
|
|
/>
|
|
) : (
|
|
<div className={classes["unsupported-format"]}>
|
|
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
|
L'affichage de ce format de fichier n'est pas supporté.
|
|
</Typography>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{this.state.document.files.length > 1 && (
|
|
<div
|
|
className={classes["arrow-container"]}
|
|
onClick={this.goToNext}
|
|
data-disabled={(!this.hasNext()).toString()}>
|
|
<Image src={RightArrowIcon} alt="right arrow" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className={classes["footer"]}>
|
|
{this.state.document?.document_status === EDocumentStatus.DEPOSITED && (
|
|
<div className={classes["alert"]}>
|
|
<MessageBox type={"info"}>Veuillez valider le document afin de pouvoir le télécharger.</MessageBox>
|
|
</div>
|
|
)}
|
|
{/* {this.state.document?.document_type?.name === "Document d'identité" && (
|
|
<div className={classes["ocr-container"]}>
|
|
<OcrResult percentage={this.state.validatedPercentage} />
|
|
</div>
|
|
)} */}
|
|
|
|
<div className={classes["buttons-container"]}>
|
|
{this.state.document?.document_status === EDocumentStatus.DEPOSITED && (
|
|
<>
|
|
<Button
|
|
variant={EButtonVariant.PRIMARY}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
onClick={this.openRefuseModal}>
|
|
Refuser
|
|
</Button>
|
|
<Button onClick={this.openValidateModal}>Valider</Button>
|
|
<Button disabled>Télécharger</Button>
|
|
</>
|
|
)}
|
|
{this.state.document?.document_status === "VALIDATED" && this.state.fileBlob && (
|
|
<Button onClick={this.downloadFile}>Télécharger</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Confirm
|
|
isOpen={this.state.isValidateModalVisible}
|
|
onClose={this.closeModals}
|
|
onAccept={this.validateDocument}
|
|
closeBtn={true}
|
|
hasContainerClosable={true}
|
|
header={"Valider le document ?"}
|
|
cancelText={"Annuler"}
|
|
confirmText={"Confirmer"}>
|
|
<div className={classes["validate-document-container"]}>
|
|
<Typography
|
|
typo={ETypo.TEXT_MD_REGULAR}
|
|
color={ETypoColor.COLOR_GENERIC_BLACK}
|
|
className={classes["validate-text"]}>
|
|
Êtes-vous sûr de vouloir valider ce document ?
|
|
</Typography>
|
|
</div>
|
|
</Confirm>
|
|
<Confirm
|
|
isOpen={this.state.isRefuseModalVisible}
|
|
onClose={this.closeModals}
|
|
onAccept={this.refuseDocument}
|
|
closeBtn
|
|
header={"Refuser le document ?"}
|
|
cancelText={"Annuler"}
|
|
confirmText={"Refuser"}>
|
|
<div className={classes["refuse-document-container"]}>
|
|
<Typography
|
|
typo={ETypo.TEXT_MD_REGULAR}
|
|
color={ETypoColor.COLOR_GENERIC_BLACK}
|
|
className={classes["refuse-text"]}>
|
|
Veuillez indiquer au client le motif du refus de son document afin qu'il puisse vous renvoyer une bonne
|
|
version.
|
|
</Typography>
|
|
<TextAreaField placeholder="Motif du refus" onChange={this.onRefuseTextChange} />
|
|
</div>
|
|
</Confirm>
|
|
</div>
|
|
)}
|
|
{(!this.state.selectedFile || !this.state.document) && !this.state.isLoading && (
|
|
<div className={classes["root"]}>
|
|
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
|
|
Document non trouvé
|
|
</Typography>
|
|
</div>
|
|
)}
|
|
</DefaultNotaryDashboard>
|
|
);
|
|
}
|
|
|
|
override async componentDidMount() {
|
|
try {
|
|
const document: any = await new Promise((resolve: (document: any) => void) => {
|
|
DocumentService.getDocumentByUid(this.props.documentUid).then(async (process: any) => {
|
|
if (process) {
|
|
const document: any = process.processData;
|
|
|
|
if (document.files && document.files.length > 0) {
|
|
const files: any[] = [];
|
|
for (const file of document.files) {
|
|
files.push((await FileService.getFileByUid(file.uid)).processData);
|
|
}
|
|
document.files = files;
|
|
}
|
|
|
|
resolve(document);
|
|
}
|
|
});
|
|
});
|
|
|
|
this.setState(
|
|
{
|
|
document,
|
|
selectedFileIndex: 0,
|
|
selectedFile: document.files![0]!,
|
|
isLoading: false,
|
|
},
|
|
() => {
|
|
this.getFilePreview();
|
|
},
|
|
);
|
|
} catch (e) {
|
|
this.setState({
|
|
isLoading: false,
|
|
});
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
private async getFilePreview(): Promise<void> {
|
|
try {
|
|
if (!this.state.selectedFile) return;
|
|
|
|
const fileBlob: Blob = new Blob([this.state.selectedFile.file_blob.data], { type: this.state.selectedFile.file_blob.type });
|
|
this.setState({
|
|
fileBlob,
|
|
});
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
private downloadFile() {
|
|
if (!this.state.fileBlob || !this.state.selectedFile) return;
|
|
|
|
const url = URL.createObjectURL(this.state.fileBlob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = this.state.selectedFile.file_name;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
private getRandomPercentageForOcr() {
|
|
// find diff
|
|
let difference = 100 - 90;
|
|
|
|
// generate random number
|
|
let rand = Math.random();
|
|
|
|
// multiply with difference
|
|
rand = Math.floor(rand * difference);
|
|
|
|
// add with min value
|
|
rand = rand + 90;
|
|
|
|
return rand;
|
|
}
|
|
|
|
private goToPrevious() {
|
|
const index = this.state.selectedFileIndex - 1;
|
|
if (this.hasPrevious()) {
|
|
this.setState(
|
|
{
|
|
selectedFile: this.state.document!.files![index]!,
|
|
selectedFileIndex: index,
|
|
fileBlob: null,
|
|
},
|
|
() => {
|
|
this.getFilePreview();
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
private goToNext() {
|
|
if (this.hasNext()) {
|
|
const index = this.state.selectedFileIndex + 1;
|
|
this.setState(
|
|
{
|
|
selectedFile: this.state.document!.files![index]!,
|
|
selectedFileIndex: index,
|
|
fileBlob: null,
|
|
},
|
|
() => {
|
|
this.getFilePreview();
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
private hasPrevious() {
|
|
const index = this.state.selectedFileIndex - 1;
|
|
return index >= 0;
|
|
}
|
|
|
|
private hasNext() {
|
|
const index = this.state.selectedFileIndex + 1;
|
|
return index < this.state.document!.files!.length;
|
|
}
|
|
|
|
private async refuseDocument() {
|
|
try {
|
|
DocumentService.getDocumentByUid(this.props.documentUid).then((process: any) => {
|
|
if (process) {
|
|
DocumentService.updateDocument(process, { document_status: EDocumentStatus.REFUSED, refused_reason: this.state.refuseText }).then(() => {
|
|
this.props.router.push(
|
|
Module.getInstance()
|
|
.get()
|
|
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid) +
|
|
"?customerUid=" +
|
|
this.state.document?.depositor?.uid,
|
|
);
|
|
});
|
|
}
|
|
});
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
private async validateDocument() {
|
|
try {
|
|
DocumentService.getDocumentByUid(this.props.documentUid).then((process: any) => {
|
|
if (process) {
|
|
DocumentService.updateDocument(process, { document_status: EDocumentStatus.VALIDATED }).then(() => {
|
|
this.props.router.push(
|
|
Module.getInstance()
|
|
.get()
|
|
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid) +
|
|
"?customerUid=" +
|
|
this.state.document?.depositor?.uid,
|
|
);
|
|
});
|
|
}
|
|
});
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
private onRefuseTextChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) {
|
|
this.setState({
|
|
refuseText: e.target.value,
|
|
});
|
|
}
|
|
|
|
private openValidateModal() {
|
|
this.setState({
|
|
isValidateModalVisible: true,
|
|
});
|
|
}
|
|
|
|
private openRefuseModal() {
|
|
this.setState({
|
|
isRefuseModalVisible: true,
|
|
});
|
|
}
|
|
|
|
private closeModals() {
|
|
this.setState({
|
|
isValidateModalVisible: false,
|
|
isRefuseModalVisible: false,
|
|
});
|
|
}
|
|
}
|
|
|
|
export default function ViewDocuments(props: IProps) {
|
|
const router = useRouter();
|
|
let { folderUid, documentUid } = router.query;
|
|
documentUid = documentUid as string;
|
|
folderUid = folderUid as string;
|
|
return <ViewDocumentsClass {...props} documentUid={documentUid} router={router} folderUid={folderUid as string} />;
|
|
}
|