From eb8dc507f9283f7a96257ad9fd4c8a48157b16ab Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Tue, 23 Jul 2024 10:37:27 +0200
Subject: [PATCH] :sparkles: firstname on folder page

---
 src/front/Components/Layouts/Folder/index.tsx | 35 ++++++++++++++++---
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx
index 844893de..1225922a 100644
--- a/src/front/Components/Layouts/Folder/index.tsx
+++ b/src/front/Components/Layouts/Folder/index.tsx
@@ -3,22 +3,39 @@ import Button, { EButtonVariant, EButtonstyletype } from "@Front/Components/Desi
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import { DocumentIcon } from "@heroicons/react/24/outline";
-import { OfficeFolder } from "le-coffre-resources/dist/Notary";
-import { useCallback, useState } from "react";
+import User, { OfficeFolder } from "le-coffre-resources/dist/Notary";
+import { useCallback, useEffect, useState } from "react";
 import Image from "next/image";
 
 import classes from "./classes.module.scss";
 import Link from "next/link";
 import Module from "@Front/Config/Module";
+import JwtService from "@Front/Services/JwtService/JwtService";
+import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
 
 export default function Folder() {
 	const [_folder, setFolder] = useState<OfficeFolder | null>(null);
 	const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true);
 
+	const [activeUser, setActiveUser] = useState<User | null>();
 	const onSelectedFolder = useCallback((folder: OfficeFolder): void => {
 		setFolder(folder);
 	}, []);
 
+	useEffect(() => {
+		const decodedJwt = JwtService.getInstance().decodeJwt();
+		if (!decodedJwt) return;
+		Users.getInstance()
+			.getByUid(decodedJwt.userId, {
+				q: {
+					contact: true,
+				},
+			})
+			.then((user) => {
+				setActiveUser(user);
+			});
+	}, []);
+
 	return (
 		<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={onSelectedFolder} mobileBackText={"Liste des dossiers"}>
 			<div className={classes["root"]}>
@@ -26,9 +43,17 @@ export default function Folder() {
 					<div className={classes["title-container"]}>
 						<Image src={LogoIcon} alt="logo" />
 
-						<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
-							Bonjour John, bienvenue sur LeCoffre.io
-						</Typography>
+						{activeUser && activeUser.contact && (
+							<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
+								Bonjour {activeUser.contact.first_name}, bienvenue sur LeCoffre.io
+							</Typography>
+						)}
+						{!activeUser ||
+							(!activeUser.contact && (
+								<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
+									Bonjour, bienvenue sur LeCoffre.io
+								</Typography>
+							))}
 						<Typography typo={ETypo.TEXT_LG_REGULAR}>
 							Commencez par créer votre{" "}
 							<Typography typo={ETypo.TEXT_LG_SEMIBOLD} type="span">