Deposit Other Document from customer dashboard

src/front/Components/DesignSystem/DepositOtherDocument/classes.module.scss

@@ -0,0 +1,106 @@
+.container {
+	.root {
+		padding: 24px;
+		background-color: var(--white);
+		border: 1px dashed #e7e7e7;
+
+		height: fit-content;
+
+		&[data-drag-over="true"] {
+			border: 1px dashed var(--grey);
+		}
+
+		&.validated {
+			border: 1px dashed var(--green-flash);
+		}
+
+		.top-container {
+			display: flex;
+			align-items: center;
+
+			.left {
+				margin-right: 28px;
+			}
+
+			.separator {
+				background-color: #939393;
+				width: 1px;
+				align-self: stretch;
+			}
+
+			.right {
+				margin-left: 18px;
+
+				.validated {
+					color: var(--green-flash);
+				}
+
+				.refused-button {
+					font-size: 14px;
+					color: var(--re-hover);
+					margin-left: 8px;
+				}
+
+				.title {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+				}
+			}
+		}
+
+		.documents-container {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+			margin-top: 16px;
+
+			.file-container {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				.left-part {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+					.loader {
+						width: 32px;
+						height: 32px;
+					}
+				}
+
+				.cross {
+					cursor: pointer;
+				}
+			}
+		}
+
+		.bottom-container {
+			margin-top: 16px;
+
+			.add-button {
+				.add-document {
+					display: flex;
+					align-items: center;
+					gap: 14px;
+				}
+			}
+		}
+
+		.text {
+			margin-bottom: 12px;
+		}
+	}
+
+	.modal-content {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	.error-message {
+		color: var(--red-flash);
+		margin-top: 8px;
+	}
+}

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

@@ -0,0 +1,303 @@
+import DepositDocumentIcon from "@Assets/Icons/deposit-document.svg";
+import CrossIcon from "@Assets/Icons/cross.svg";
+import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
+import PlusIcon from "@Assets/Icons/plus.svg";
+
+import Image from "next/image";
+import React from "react";
+
+import Typography, { ITypo, ITypoColor } from "../Typography";
+import classes from "./classes.module.scss";
+import { Document } from "le-coffre-resources/dist/Customer";
+import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
+import classNames from "classnames";
+
+import Button, { EButtonVariant } from "../Button";
+import Confirm from "../Modal/Confirm";
+import Documents from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
+import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
+
+type IProps = {
+	onChange?: (files: File[]) => void;
+	open: boolean;
+	onClose?: () => void;
+	document: Document;
+	customer_uid: string;
+	folder_uid: string | string[];
+};
+
+type IFile = {
+	index: number;
+	file: File;
+	fileName: string;
+};
+
+type IState = {
+	files: IFile[];
+	isDragOver: boolean;
+	currentFiles?: IFile[];
+	refusedReason?: string;
+	isShowRefusedReasonModalVisible: boolean;
+	isAddDocumentModalVisible: boolean;
+};
+
+export default class DepositOtherDocument extends React.Component<IProps, IState> {
+	private inputRef = React.createRef<HTMLInputElement>();
+	private index = 0;
+
+	public constructor(props: IProps) {
+		super(props);
+
+		this.state = {
+			isAddDocumentModalVisible: this.props.open,
+			files: [],
+			isDragOver: false,
+			refusedReason: "",
+			isShowRefusedReasonModalVisible: false,
+		};
+
+		this.addDocument = this.addDocument.bind(this);
+		this.onFileChange = this.onFileChange.bind(this);
+		this.removeFile = this.removeFile.bind(this);
+		this.onDragOver = this.onDragOver.bind(this);
+		this.onDragDrop = this.onDragDrop.bind(this);
+		this.onDragLeave = this.onDragLeave.bind(this);
+		this.onAccept = this.onAccept.bind(this);
+	}
+
+	private async onAccept() {
+		const filesArray = this.state.currentFiles;
+
+		if (!filesArray) return;
+
+		const documentCreated = await Documents.getInstance().post({
+			folder: {
+				uid: this.props.folder_uid,
+			},
+			depositor: {
+				uid: this.props.customer_uid,
+			},
+		});
+
+		console.log(documentCreated);
+
+		filesArray.forEach(async (file) => {
+			const formData = new FormData();
+			formData.append("file", file.file, file.fileName);
+			const query = JSON.stringify({ document: { uid: documentCreated.uid } });
+			formData.append("q", query);
+
+			const newFile = await Files.getInstance().post(formData);
+			console.log(newFile);
+		});
+
+		this.props.onClose!();
+	}
+
+	public override render(): JSX.Element {
+		return (
+			<Confirm
+				isOpen={this.state.isAddDocumentModalVisible}
+				onClose={this.props.onClose!}
+				onAccept={this.onAccept}
+				closeBtn
+				header={"Ajouter un document"}
+				cancelText={"Annuler"}
+				confirmText={"Déposer le document"}>
+				<div className={classes["modal-content"]}>
+					<div className={classes["container"]}>
+						<Typography typo={ITypo.P_16} className={classes["text"]}>
+							Vous souhaitez envoyer un autre document à votre notaire ?
+						</Typography>
+						<Typography typo={ITypo.P_16} className={classes["text"]}>
+							Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
+							document correspondant.
+						</Typography>
+						<div
+							className={classNames(
+								classes["root"],
+								this.props.document.document_status === EDocumentStatus.VALIDATED && classes["validated"],
+							)}
+							onDragOver={this.onDragOver}
+							onDrop={this.onDragDrop}
+							onDragLeave={this.onDragLeave}
+							data-drag-over={this.state.isDragOver.toString()}>
+							<input type="file" ref={this.inputRef} hidden onChange={this.onFileChange} />
+							<div className={classes["top-container"]}>
+								<div className={classes["left"]}>
+									<Image src={DepositDocumentIcon} alt="Deposit document" />
+								</div>
+								<div className={classes["separator"]} />
+								<div className={classes["right"]}>
+									<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
+										<div
+											className={
+												this.props.document.document_status === EDocumentStatus.VALIDATED
+													? classes["validated"]
+													: ""
+											}>
+											{this.props.document.document_type?.name}
+										</div>
+									</Typography>
+									<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+										Sélectionnez des TEST documents .jpg, .pdf ou .png
+									</Typography>
+								</div>
+							</div>
+							{this.state.currentFiles && this.state.currentFiles.length > 0 && (
+								<div className={classes["documents-container"]}>
+									{this.state.currentFiles.map((file) => {
+										console.log(file);
+
+										const fileObj = file.file;
+
+										return (
+											<div className={classes["file-container"]} key={fileObj.name}>
+												<div className={classes["left-part"]}>
+													<Image src={DocumentCheckIcon} alt="Document check" />
+													<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+														{this.shortName(fileObj.name)}
+													</Typography>
+												</div>
+												<Image
+													src={CrossIcon}
+													alt="Cross icon"
+													className={classes["cross"]}
+													onClick={this.removeFile}
+													data-file={file.index}
+												/>
+											</div>
+										);
+									})}
+								</div>
+							)}
+							<div className={classes["bottom-container"]}>
+								<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
+									<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
+										Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
+									</Typography>
+								</Button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</Confirm>
+		);
+	}
+
+	public override componentDidMount(): void {}
+
+	private shortName(name: string): string {
+		const maxLength = 20;
+		if (name.length > maxLength) {
+			return name.substring(0, maxLength / 2) + "..." + name.substring(name.length - maxLength / 2, name.length);
+		}
+		return name;
+	}
+
+	private onDragOver(event: React.DragEvent<HTMLDivElement>) {
+		if (!this.state.isDragOver) {
+			this.setState({
+				isDragOver: true,
+			});
+		}
+		event.preventDefault();
+	}
+
+	private onDragLeave(event: React.DragEvent<HTMLDivElement>) {
+		this.setState({
+			isDragOver: false,
+		});
+		event.preventDefault();
+	}
+
+	private async onDragDrop(event: React.DragEvent<HTMLDivElement>) {
+		event.preventDefault();
+		this.setState({
+			isDragOver: false,
+		});
+		const file = event.dataTransfer.files[0];
+		if (file) this.addFile(file);
+	}
+
+	private async addFile(file: File) {
+		const iFile: IFile = {
+			file: file,
+			fileName: file.name,
+			index: this.index++,
+		};
+		const tmpArray: IFile[] = this.state.currentFiles || [];
+		tmpArray.push(iFile);
+		this.setState({
+			currentFiles: tmpArray,
+		});
+
+		console.log(this.state.currentFiles);
+
+		// const formData = new FormData();
+		// formData.append("file", file, file.name);
+		// const query = JSON.stringify({ document: { uid: this.props.document.uid } });
+		// formData.append("q", query);
+
+		// const newFile = await Files.getInstance().post(formData);
+		// const newFile: FileCustomer = {
+		// 	file_name: file.name,
+		// }
+		// const files = this.state.currentFiles ? [...this.state.currentFiles, newFile] : [newFile];
+
+		// this.setState({
+		// 	currentFiles: files,
+		// 	loading: false,
+		// 	files: [
+		// 		...this.state.files,
+		// 		{
+		// 			index: this.index++,
+		// 			file: file,
+		// 			uid: newFile.uid!,
+		// 			archived: null,
+		// 			fileName: newFile?.file_name ?? "",
+		// 		},
+		// 	],
+		// });
+
+		// if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
+	}
+
+	private async removeFile(e: any) {
+		const image = e.target as HTMLElement;
+		const indexToRemove = image.getAttribute("data-file");
+		console.log(indexToRemove);
+
+		if (!indexToRemove) return;
+		const file = this.state.currentFiles!.find((file) => file.index === parseInt(indexToRemove));
+		if (!file) return;
+		this.setState({
+			currentFiles: this.state.currentFiles!.filter((file) => file.index !== parseInt(indexToRemove)),
+		});
+
+		if (this.props.onChange) this.props.onChange(this.state.currentFiles!.map((file) => file.file));
+	}
+
+	private async onFileChange() {
+		if (!this.inputRef.current) return;
+
+		const files = this.inputRef.current.files;
+
+		if (!files) {
+			return;
+		}
+		const file = files[0];
+
+		if (file) this.addFile(file);
+	}
+
+	private addDocument() {
+		if (!this.inputRef.current) return;
+		this.inputRef.current.click();
+	}
+
+	// private formatDate(date: Date) {
+	// 	const dateToConvert = new Date(date);
+	// 	return dateToConvert.toLocaleDateString("fr-FR");
+	// }
+}

src/front/Components/Layouts/ClientDashboard/index.tsx

@@ -3,8 +3,6 @@ import Customers from "@Front/Api/LeCoffreApi/Customer/Customers/Customers";
 import Documents, { IGetDocumentsparams } from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
-import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import Customer, { Document, DocumentType } from "le-coffre-resources/dist/Customer";
@@ -13,6 +11,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import classes from "./classes.module.scss";
 import { useRouter } from "next/router";
 import JwtService from "@Front/Services/JwtService/JwtService";
+import DepositOtherDocument from "@Front/Components/DesignSystem/DepositOtherDocument";
 
 type IProps = {};
 
@@ -24,6 +23,8 @@ export default function ClientDashboard(props: IProps) {
 	const [isAddDocumentModalVisible, setIsAddDocumentModalVisible] = useState<boolean>(false);
 
 	const onCloseModalAddDocument = useCallback(() => {
+		console.log("Closing");
+
 		setIsAddDocumentModalVisible(false);
 	}, []);
 
@@ -89,6 +90,24 @@ export default function ClientDashboard(props: IProps) {
 		);
 	}, [customer]);
 
+	const renderBox = useCallback(() => {
+		console.log(isAddDocumentModalVisible);
+
+		return (
+			<DepositOtherDocument
+				folder_uid={folderUid!}
+				customer_uid={customer!.uid!}
+				open={isAddDocumentModalVisible}
+				onClose={onCloseModalAddDocument}
+				document={Document.hydrate<Document>({
+					document_type: DocumentType.hydrate<DocumentType>({
+						name: "Document annexe",
+					}),
+				})}
+			/>
+		);
+	}, [isAddDocumentModalVisible]);
+
 	return (
 		<DefaultTemplate title={"Mon compte"} isPadding={false} hasHeaderLinks={false}>
 			<div className={classes["root"]}>
@@ -107,33 +126,8 @@ export default function ClientDashboard(props: IProps) {
 						Ajouter d'autres documents
 					</Button>
 				</div>
-				<Confirm
-					isOpen={isAddDocumentModalVisible}
-					onClose={onCloseModalAddDocument}
-					onAccept={onOpenModalAddDocument}
-					closeBtn
-					header={"Ajouter un document"}
-					cancelText={"Annuler"}
-					confirmText={"Déposer le document"}>
-					<div className={classes["modal-content"]}>
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
-							Vous souhaitez envoyer un autre document à votre notaire ?
-						</Typography>
-						<TextField placeholder="Nom du document" />
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
-							Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
-							document correspondant.
-						</Typography>
-						<DepositDocument
-							document={Document.hydrate<Document>({
-								document_type: DocumentType.hydrate<DocumentType>({
-									name: "Document annexe",
-								}),
-							})}
-						/>
-					</div>
-				</Confirm>
 			</div>
+			{isAddDocumentModalVisible && renderBox()}
 		</DefaultTemplate>
 	);
 }