From 065e8ad559ae9e1b2b3066c2eda7fd264321202d Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Tue, 13 Aug 2024 12:35:51 +0200
Subject: [PATCH] :sparkles: refont page select folder client side

---
 .../SearchBlockList/classes.module.scss       |  4 ++
 .../DesignSystem/SearchBlockList/index.tsx    |  5 +-
 src/front/Components/Layouts/Folder/index.tsx |  4 +-
 .../Layouts/SelectFolder/classes.module.scss  | 29 ++++----
 .../Components/Layouts/SelectFolder/index.tsx | 68 +++++++++++--------
 5 files changed, 64 insertions(+), 46 deletions(-)

diff --git a/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
index cc668f67..68c4106d 100644
--- a/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
+++ b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
@@ -75,4 +75,8 @@
 			display: block;
 		}
 	}
+
+	&[data-fullwidth="true"] {
+		width: 100%;
+	}
 }
diff --git a/src/front/Components/DesignSystem/SearchBlockList/index.tsx b/src/front/Components/DesignSystem/SearchBlockList/index.tsx
index 0ca8fd77..93627bdd 100644
--- a/src/front/Components/DesignSystem/SearchBlockList/index.tsx
+++ b/src/front/Components/DesignSystem/SearchBlockList/index.tsx
@@ -14,9 +14,10 @@ export type ISearchBlockListProps = {
 		text: string;
 		link: string;
 	};
+	fullwidth?: boolean;
 };
 export default function SearchBlockList(props: ISearchBlockListProps) {
-	const { blocks, onSelectedBlock, bottomButton } = props;
+	const { blocks, onSelectedBlock, bottomButton, fullwidth = false } = props;
 
 	const [selectedBlock, setSelectedBlock] = useState<IBlock | null>(null);
 	const router = useRouter();
@@ -69,7 +70,7 @@ export default function SearchBlockList(props: ISearchBlockListProps) {
 	}, [blocks]);
 
 	return (
-		<div className={classes["root"]}>
+		<div className={classes["root"]} data-fullwidth={fullwidth}>
 			<div className={classes["searchbar"]} ref={searchBarRef}>
 				<SearchBar placeholder="Chercher" onChange={handleSearchChange} />
 				{bottomButton && (
diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx
index fdcda8f0..ead04297 100644
--- a/src/front/Components/Layouts/Folder/index.tsx
+++ b/src/front/Components/Layouts/Folder/index.tsx
@@ -62,13 +62,13 @@ export default function Folder() {
 						<Image src={LogoIcon} alt="logo" />
 
 						{activeUser && activeUser.contact && (
-							<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
+							<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
 								Bonjour {activeUser.contact.first_name}, bienvenue sur LeCoffre.io
 							</Typography>
 						)}
 						{!activeUser ||
 							(!activeUser.contact && (
-								<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
+								<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
 									Bonjour, bienvenue sur LeCoffre.io
 								</Typography>
 							))}
diff --git a/src/front/Components/Layouts/SelectFolder/classes.module.scss b/src/front/Components/Layouts/SelectFolder/classes.module.scss
index 6334c67f..48d62920 100644
--- a/src/front/Components/Layouts/SelectFolder/classes.module.scss
+++ b/src/front/Components/Layouts/SelectFolder/classes.module.scss
@@ -1,17 +1,22 @@
-.root {
-	position: relative;
-	.select-folder-container {
-		max-width: 530px;
-		padding: 80px 72px;
+@import "@Themes/constants.scss";
 
+.root {
+	margin: 80px auto;
+	width: 472px;
+
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xl, 32px);
+
+	@media (max-width: $screen-s) {
+		width: 100%;
+		margin: 0;
+		padding: var(--spacing-md, 16px);
+	}
+
+	.title-container {
 		display: flex;
 		flex-direction: column;
-		justify-content: center;
-		gap: 48px;
-		margin: auto;
-		background-color: white;
-		.title {
-			text-align: center;
-		}
+		gap: var(--spacing-sm, 8px);
 	}
 }
diff --git a/src/front/Components/Layouts/SelectFolder/index.tsx b/src/front/Components/Layouts/SelectFolder/index.tsx
index 5d84f4bb..74999979 100644
--- a/src/front/Components/Layouts/SelectFolder/index.tsx
+++ b/src/front/Components/Layouts/SelectFolder/index.tsx
@@ -1,26 +1,28 @@
+import backgroundImage from "@Assets/images/background_refonte.svg";
+import LogoIcon from "@Assets/logo_small_blue.svg";
 import Folders from "@Front/Api/LeCoffreApi/Customer/Folders/Folders";
-import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
+import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
+import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import JwtService from "@Front/Services/JwtService/JwtService";
 import { OfficeFolder } from "le-coffre-resources/dist/Customer";
+import Image from "next/image";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
-import LandingImage from "../Login/landing-connect.jpeg";
 import classes from "./classes.module.scss";
-import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
-import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
 
 export default function SelectFolder() {
 	const [folders, setFolders] = useState<OfficeFolder[]>([]);
 	const router = useRouter();
 
 	useEffect(() => {
-		async function getFolders() {
-			const jwt = JwtService.getInstance().decodeCustomerJwt();
-			if (!jwt) return;
+		const jwt = JwtService.getInstance().decodeCustomerJwt();
+		if (!jwt) return;
 
-			const folders = await Folders.getInstance().get({
+		Folders.getInstance()
+			.get({
 				q: {
 					where: {
 						customers: {
@@ -40,11 +42,8 @@ export default function SelectFolder() {
 						customers: true,
 					},
 				},
-			});
-			setFolders(folders);
-		}
-
-		getFolders();
+			})
+			.then((folders) => setFolders(folders));
 	}, []);
 
 	const handleSelectBlock = useCallback(
@@ -55,26 +54,35 @@ export default function SelectFolder() {
 	);
 
 	return (
-		<DefaultDoubleSidePage title="Sélectionner un dossier" image={LandingImage}>
+		<DefaultDoubleSidePage title="Sélectionner un dossier" image={backgroundImage}>
 			<div className={classes["root"]}>
-				<div className={classes["select-folder-container"]}>
-					<div className={classes["title"]}>
-						<Typography typo={ETypo.DISPLAY_LARGE}>Vos dossiers</Typography>
-					</div>
-					<div className={classes["folders-container"]}>
-						<BlockList
-							onSelectedBlock={handleSelectBlock}
-							blocks={folders.map((folder) => {
-								return {
-									id: folder.uid!,
-									primaryText: folder.name!,
-									selected: false,
-								};
-							})}
-						/>
-					</div>
+				<div className={classes["title-container"]}>
+					<Image src={LogoIcon} alt="logo" width={56} />
+					<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
+						Vos dossiers en cours
+					</Typography>
+
+					<Typography typo={ETypo.TITLE_H5} color={ETypoColor.TEXT_PRIMARY}>
+						Veuillez sélectionner le dossier pour lequel vous souhaitez déposer ou consulter des documents.
+					</Typography>
 				</div>
+
+				<Typography typo={ETypo.TITLE_H6} color={ETypoColor.TEXT_ACCENT}>
+					Liste des dossiers disponibles :
+				</Typography>
+
+				<SearchBlockList blocks={getBlocks(folders)} onSelectedBlock={handleSelectBlock} fullwidth />
 			</div>
 		</DefaultDoubleSidePage>
 	);
 }
+
+function getBlocks(folders: OfficeFolder[]): IBlock[] {
+	return folders.map((folder) => {
+		return {
+			id: folder.uid!,
+			primaryText: folder.name!,
+			secondaryText: folder.folder_number!,
+		};
+	});
+}