From 6e26d11bcc954f9aabc910900589a68bdccf1a87 Mon Sep 17 00:00:00 2001
From: Hugo Lextrait <hugo.lextrait@smart-chain.fr>
Date: Thu, 11 May 2023 18:31:18 +0200
Subject: [PATCH] :art: validated document

---
 src/front/Assets/Icons/green-check.svg              |  3 +++
 .../DepositDocument/classes.module.scss             |  6 +++++-
 .../DesignSystem/DepositDocument/index.tsx          | 13 ++++++++++---
 3 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 src/front/Assets/Icons/green-check.svg

diff --git a/src/front/Assets/Icons/green-check.svg b/src/front/Assets/Icons/green-check.svg
new file mode 100644
index 00000000..343eb84b
--- /dev/null
+++ b/src/front/Assets/Icons/green-check.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 6L8.375 16L4 11.4545" stroke="#12BF4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss
index b270f875..a11de4df 100644
--- a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss
+++ b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss
@@ -30,6 +30,10 @@
 		.right {
 			margin-left: 18px;
 
+			.validated {
+				color: var(--green-flash);
+			}
+
 			.refused-button {
 				font-size: 14px;
 				color: var(--re-hover);
@@ -84,7 +88,7 @@
 	}
 }
 
-.modal-content{
+.modal-content {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
diff --git a/src/front/Components/DesignSystem/DepositDocument/index.tsx b/src/front/Components/DesignSystem/DepositDocument/index.tsx
index 80210dde..f095a1e8 100644
--- a/src/front/Components/DesignSystem/DepositDocument/index.tsx
+++ b/src/front/Components/DesignSystem/DepositDocument/index.tsx
@@ -15,6 +15,7 @@ import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import classNames from "classnames";
 import Confirm from "../Modal/Confirm";
 import InputField from "../Form/Elements/InputField";
+import GreenCheckIcon from "@Assets/Icons/green-check.svg";
 
 type IProps = {
 	defaultFiles?: FileCustomer[];
@@ -82,9 +83,15 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 					<div className={classes["separator"]} />
 					<div className={classes["right"]}>
 						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
-							{this.props.document.document_type?.name}{" "}
-							{this.props.document.document_type?.public_description !== "" && (
-								<Tooltip text={this.props.document.document_type?.public_description} />
+							<div className={this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : ""}>
+								{this.props.document.document_type?.name}
+							</div>
+							{this.props.document.document_type?.public_description !== "" &&
+								this.props.document.document_status !== EDocumentStatus.VALIDATED && (
+									<Tooltip text={this.props.document.document_type?.public_description} />
+								)}
+							{this.props.document.document_status === EDocumentStatus.VALIDATED && (
+								<Image src={GreenCheckIcon} alt="Document check" />
 							)}
 						</Typography>
 						{this.props.document.document_status !== EDocumentStatus.VALIDATED && (