Merge Dev in Staging

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 = "";

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,10 +68,12 @@ 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 (
+			<div>
 				<Confirm
 					isOpen={this.state.isAddDocumentModalVisible}
 					onClose={this.props.onClose!}
@@ -121,7 +126,6 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 								{this.state.currentFiles && this.state.currentFiles.length > 0 && (
 									<div className={classes["documents-container"]}>
 										{this.state.currentFiles.map((file) => {
-
 											const fileObj = file.file;
 
 											return (
@@ -155,11 +159,28 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 						</div>
 					</div>
 				</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);
+			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({

src/front/Components/DesignSystem/Modal/Alert/classes.module.scss

@@ -1,10 +1,22 @@
-@import "Themes/constants.scss";
+@import "@Themes/constants.scss";
-
-.sub-container {
-	padding: 40px;
-}
 
 .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;
+	}
 }