error message on deposited documents

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

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

@@ -66,7 +66,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 
 	public override render(): JSX.Element {
 		return (
-			<>
+			<div className={classes["container"]}>
 				<div
 					className={classNames(
 						classes["root"],
@@ -158,8 +158,12 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 						</div>
 					</Confirm>
 				</div>
-				{<div></div>}
+				{this.props.document.document_status === EDocumentStatus.REFUSED && (
-			</>
+					<Typography typo={ITypo.CAPTION_14} className={classes["error-message"]}>
+						Ce document n’est pas conforme. Veuillez le déposer à nouveau.
+					</Typography>
+				)}
+			</div>
 		);
 	}