From b011d2e41eed3bb72f366f98601164034403e0db Mon Sep 17 00:00:00 2001
From: OxSaitama <arnaud.daubernatali@smart-chain.fr>
Date: Thu, 26 Oct 2023 13:23:48 +0200
Subject: [PATCH] add alert modal for wrong file types

---
 .../DesignSystem/DepositDocument/index.tsx    |  28 ++-
 .../DepositOtherDocument/index.tsx            | 190 ++++++++++--------
 .../Modal/Alert/classes.module.scss           |  26 ++-
 3 files changed, 154 insertions(+), 90 deletions(-)

diff --git a/src/front/Components/DesignSystem/DepositDocument/index.tsx b/src/front/Components/DesignSystem/DepositDocument/index.tsx
index be75b1ac..c72738a6 100644
--- a/src/front/Components/DesignSystem/DepositDocument/index.tsx
+++ b/src/front/Components/DesignSystem/DepositDocument/index.tsx
@@ -14,6 +14,7 @@ import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
 import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import classNames from "classnames";
 import Confirm from "../Modal/Confirm";
+import Alert from "../Modal/Alert";
 import GreenCheckIcon from "@Assets/Icons/green-check.svg";
 import Loader from "../Loader";
 import TextAreaField from "../Form/TextareaField";
@@ -38,6 +39,7 @@ type IState = {
 	currentFiles?: FileCustomer[];
 	refusedReason?: string;
 	isShowRefusedReasonModalVisible: boolean;
+	showFailedUploaded: string | null;
 	loading: boolean;
 };
 
@@ -78,6 +80,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 			currentFiles: this.props.defaultFiles,
 			refusedReason: "",
 			isShowRefusedReasonModalVisible: false,
+			showFailedUploaded: null,
 			loading: false,
 		};
 
@@ -90,6 +93,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		this.onCloseModalShowRefusedReason = this.onCloseModalShowRefusedReason.bind(this);
 		this.onOpenModalShowRefusedReason = this.onOpenModalShowRefusedReason.bind(this);
 		this.showRefusedReason = this.showRefusedReason.bind(this);
+		this.onCloseAlertUpload = this.onCloseAlertUpload.bind(this);
 	}
 
 	public override render(): JSX.Element {
@@ -210,6 +214,17 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 						Ce document n'est pas conforme. Veuillez le déposer à nouveau.
 					</Typography>
 				)}
+				{this.state.showFailedUploaded && (
+					<Alert onClose={this.onCloseAlertUpload} 
+					header={"Fichier non autorisé"}
+					isOpen={!!this.state.showFailedUploaded}>
+						<div className={classes["modal-content"]}>
+						<Typography typo={ITypo.P_16} className={classes["text"]}>
+							{this.state.showFailedUploaded}
+						</Typography>
+						</div>
+					</Alert>
+				)}
 			</div>
 		);
 	}
@@ -339,7 +354,14 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		const query = JSON.stringify({ document: { uid: this.props.document.uid } });
 		formData.append("q", query);
 
-		const newFile = await Files.getInstance().post(formData);
+		let newFile: FileCustomer;
+		try {
+			newFile = await Files.getInstance().post(formData);
+		} catch (e) {
+
+			this.setState({ showFailedUploaded: "Le fichier ne correspond pas aux critères demandés", loading: false, });
+			return false;
+		}
 		const files = this.state.currentFiles ? [...this.state.currentFiles, newFile] : [newFile];
 
 		const newFileList = [
@@ -396,6 +418,10 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		}
 	}
 
+	private onCloseAlertUpload() {
+		this.setState({ showFailedUploaded: null });
+	}
+
 	private addDocument() {
 		if (!this.inputRef.current) return;
 		this.inputRef.current.value = "";
diff --git a/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx b/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
index d2192944..467be008 100644
--- a/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
+++ b/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
@@ -16,6 +16,7 @@ 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";
+import Alert from "../Modal/Alert";
 
 type IProps = {
 	onChange?: (files: File[]) => void;
@@ -38,6 +39,7 @@ type IState = {
 	currentFiles?: IFile[];
 	refusedReason?: string;
 	isShowRefusedReasonModalVisible: boolean;
+	showFailedUploaded: string | null;
 	isAddDocumentModalVisible: boolean;
 	isLoading: boolean;
 };
@@ -55,6 +57,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 			isDragOver: false,
 			refusedReason: "",
 			isShowRefusedReasonModalVisible: false,
+			showFailedUploaded: null,
 			isLoading: false,
 		};
 
@@ -65,101 +68,119 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 		this.onDragDrop = this.onDragDrop.bind(this);
 		this.onDragLeave = this.onDragLeave.bind(this);
 		this.onAccept = this.onAccept.bind(this);
+		this.onCloseAlertUpload = this.onCloseAlertUpload.bind(this);
 	}
 
 	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={this.state.isLoading ? "Chargement..." : "Déposer le document"}
-				canConfirm={!this.state.isLoading}>
-				<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 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) => {
-
-										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>
+				<Confirm
+					isOpen={this.state.isAddDocumentModalVisible}
+					onClose={this.props.onClose!}
+					onAccept={this.onAccept}
+					closeBtn
+					header={"Ajouter un document"}
+					cancelText={"Annuler"}
+					confirmText={this.state.isLoading ? "Chargement..." : "Déposer le document"}
+					canConfirm={!this.state.isLoading}>
+					<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 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) => {
+											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 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>
+				</Confirm>
+				{this.state.showFailedUploaded && (
+					<Alert
+						onClose={this.onCloseAlertUpload}
+						header={"Fichier non autorisé"}
+						isOpen={!!this.state.showFailedUploaded}>
+						<div className={classes["modal-content"]}>
+							<Typography typo={ITypo.P_16} className={classes["text"]}>
+								{this.state.showFailedUploaded}
+							</Typography>
+						</div>
+					</Alert>
+				)}
+			</div>
 		);
 	}
 
 	public override componentDidMount(): void {}
 
+	private onCloseAlertUpload() {
+		this.setState({ showFailedUploaded: null });
+	}
+	
 	private async onAccept() {
 		this.setState({
 			isLoading: true,
@@ -182,7 +203,12 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 			formData.append("file", filesArray[i]!.file, filesArray[i]!.fileName);
 			const query = JSON.stringify({ document: { uid: documentCreated.uid } });
 			formData.append("q", query);
-			await Files.getInstance().post(formData);
+			try {
+				await Files.getInstance().post(formData);
+			} catch (e) {
+				this.setState({ showFailedUploaded: "Le fichier ne correspond pas aux critères demandés", isLoading: false });
+				return;
+			}
 		}
 
 		this.setState({
diff --git a/src/front/Components/DesignSystem/Modal/Alert/classes.module.scss b/src/front/Components/DesignSystem/Modal/Alert/classes.module.scss
index c0af8ca9..43df3130 100644
--- a/src/front/Components/DesignSystem/Modal/Alert/classes.module.scss
+++ b/src/front/Components/DesignSystem/Modal/Alert/classes.module.scss
@@ -1,10 +1,22 @@
-@import "Themes/constants.scss";
-
-.sub-container {
-	padding: 40px;
-}
+@import "@Themes/constants.scss";
 
 .button-container {
 	display: flex;
-	justify-content: flex-start;
-}
+	justify-content: center;
+	gap: 16px;
+	margin-top: 8px;
+
+	button {
+		flex: 1;
+	}
+
+	.sub-container {
+		flex: 1;
+		display: flex;
+	}
+
+	@media (max-width: $screen-s) {
+		flex-direction: column-reverse;
+		gap: 8px;
+	}
+}
\ No newline at end of file