From d5239766eb4856845ee21b46077df211ac41a1c2 Mon Sep 17 00:00:00 2001
From: Vins <vincent.alamelle@smart-chain.fr>
Date: Tue, 29 Oct 2024 15:57:42 +0100
Subject: [PATCH] Typo front + Refused reason customer side

---
 .../ClientDashboard/ContactBox/index.tsx      |  6 +--
 .../classes.module.scss                       |  6 +++
 .../DepositDocumentComponent/index.tsx        | 45 ++++++++++++++++++-
 .../Layouts/Login/StepEmail/index.tsx         |  2 +-
 4 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/front/Components/Layouts/ClientDashboard/ContactBox/index.tsx b/src/front/Components/Layouts/ClientDashboard/ContactBox/index.tsx
index 03ad6bc8..d3c806a1 100644
--- a/src/front/Components/Layouts/ClientDashboard/ContactBox/index.tsx
+++ b/src/front/Components/Layouts/ClientDashboard/ContactBox/index.tsx
@@ -79,9 +79,7 @@ export default function ContactBox(props: IProps) {
 						{notaryContact?.email ?? "_"}
 					</Typography>
 				</div>
-				<div className={classes["note-and-rib-button"]}>
-					{noteAndRibButton()}
-				</div>
+				<div className={classes["note-and-rib-button"]}>{noteAndRibButton()}</div>
 			</div>
 
 			<div className={classes["right"]}>{noteAndRibButton()}</div>
@@ -107,7 +105,7 @@ export default function ContactBox(props: IProps) {
 						size={EButtonSize.LG}
 						styletype={EButtonstyletype.CONTAINED}
 						rightIcon={<ArrowDownTrayIcon />}>
-						Télécharger le RIB
+						Télécharger le RIB de mon notaire
 					</Button>
 				)}
 			</>
diff --git a/src/front/Components/Layouts/ClientDashboard/DepositDocumentComponent/classes.module.scss b/src/front/Components/Layouts/ClientDashboard/DepositDocumentComponent/classes.module.scss
index c13c6a35..dc156ed8 100644
--- a/src/front/Components/Layouts/ClientDashboard/DepositDocumentComponent/classes.module.scss
+++ b/src/front/Components/Layouts/ClientDashboard/DepositDocumentComponent/classes.module.scss
@@ -11,6 +11,12 @@
 		display: flex;
 		flex-direction: column;
 		gap: var(--spacing-sm, 8px);
+
+		.refused-link {
+			color: var(--color-danger-500);
+			text-decoration: underline !important;
+			cursor: pointer;
+		}
 	}
 
 	@media screen and (max-width: $screen-s) {
diff --git a/src/front/Components/Layouts/ClientDashboard/DepositDocumentComponent/index.tsx b/src/front/Components/Layouts/ClientDashboard/DepositDocumentComponent/index.tsx
index 46ef2cec..44c227f3 100644
--- a/src/front/Components/Layouts/ClientDashboard/DepositDocumentComponent/index.tsx
+++ b/src/front/Components/Layouts/ClientDashboard/DepositDocumentComponent/index.tsx
@@ -1,11 +1,12 @@
 import DragAndDrop, { IDocumentFileWithUid } from "@Front/Components/DesignSystem/DragAndDrop";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import { Document } from "le-coffre-resources/dist/Customer";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import classes from "./classes.module.scss";
 import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
 import { ToasterService } from "@Front/Components/DesignSystem/Toaster";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 
 type IProps = {
 	document: Document;
@@ -14,6 +15,8 @@ type IProps = {
 
 export default function DepositDocumentComponent(props: IProps) {
 	const { document, onChange } = props;
+	const [isModalOpen, setIsModalOpen] = useState(false);
+	const [refused_reason, setRefusedReason] = useState<string | null>(null);
 
 	const defaultFiles: IDocumentFileWithUid[] = useMemo(() => {
 		const filesNotArchived = document.files?.filter((file) => !file.archived_at) ?? [];
@@ -50,6 +53,17 @@ export default function DepositDocumentComponent(props: IProps) {
 		[onChange],
 	);
 
+	const onOpenModal = useCallback(async () => {
+		const refused_reason = document.document_history?.find((history) => history.document_status === "REFUSED")?.refused_reason;
+		if (!refused_reason) return;
+		setRefusedReason(refused_reason);
+		setIsModalOpen(true);
+	}, []);
+
+	const closeModal = useCallback(() => {
+		setIsModalOpen(false);
+	}, []);
+
 	return (
 		<div className={classes["root"]}>
 			<div className={classes["title"]}>
@@ -59,8 +73,37 @@ export default function DepositDocumentComponent(props: IProps) {
 				<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
 					Demandé le: {document.created_at ? new Date(document.created_at).toLocaleDateString() : "_"}
 				</Typography>
+				{document.document_status === "REFUSED" && (
+					<div>
+						<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
+							Refusé le : {document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_"}
+						</Typography>
+						<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.ERROR_WEAK_CONTRAST} onClick={onOpenModal}>
+							Document non-conforme{" : "} <a className={classes["refused-link"]}>Voir le motif de refus</a>
+						</Typography>
+					</div>
+				)}
 			</div>
 
+			<Confirm
+				isOpen={isModalOpen}
+				showCancelButton={false}
+				onAccept={closeModal}
+				onClose={closeModal}
+				closeBtn
+				header={"Motif de refus"}
+				confirmText={"J'ai compris"}>
+				<div className={classes["modal-content"]}>
+					<Typography typo={ETypo.TEXT_MD_SEMIBOLD} className={classes["text"]}>
+						Votre document a été refusé pour la raison suivante :
+					</Typography>
+					<br />
+					<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
+						{refused_reason}
+					</Typography>
+				</div>
+			</Confirm>
+
 			<DragAndDrop
 				title={"Glisser-déposer ou"}
 				description={document.document_type?.public_description ?? undefined}
diff --git a/src/front/Components/Layouts/Login/StepEmail/index.tsx b/src/front/Components/Layouts/Login/StepEmail/index.tsx
index d03d48b6..fc04fb80 100644
--- a/src/front/Components/Layouts/Login/StepEmail/index.tsx
+++ b/src/front/Components/Layouts/Login/StepEmail/index.tsx
@@ -83,7 +83,7 @@ export default function StepEmail(props: IProps) {
 			<div className={classes["content"]}>
 				<div className={classes["section"]}>
 					<Typography typo={ETypo.TITLE_H6} color={ETypoColor.TEXT_ACCENT} className={classes["section-title"]}>
-						Pour les notaires :
+						Pour les notaires et les colaborateurs :
 					</Typography>
 					<Button onClick={redirectUserOnConnection} rightIcon={<Image alt="id-not-logo" src={idNoteLogo} />}>
 						S'identifier avec ID.not