✨ Beginning choose folder page

src/front/Components/Layouts/SelectFolder/classes.module.scss

@@ -0,0 +1,28 @@
+.root {
+	position: relative;
+	.background-container {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		z-index: -1;
+
+		> img {
+			width: 100%;
+			object-fit: cover;
+		}
+	}
+	.select-folder-container {
+		max-width: 530px;
+		padding: 80px 72px;
+
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		gap: 48px;
+		margin: auto;
+		background-color: white;
+		.title {
+			text-align: center;
+		}
+	}
+}

src/front/Components/Layouts/SelectFolder/index.tsx

@@ -0,0 +1,61 @@
+import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
+import classes from "./classes.module.scss";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
+import { OfficeFolder } from "le-coffre-resources/dist/Customer";
+import { useCallback, useEffect, useState } from "react";
+import Folders from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
+import { useRouter } from "next/router";
+import Module from "@Front/Config/Module";
+import BackgroundImage from "@Assets/images/background.png";
+import Image from "next/image";
+
+export default function SelectFolder() {
+	const [folders, setFolders] = useState<OfficeFolder[]>([]);
+	const router = useRouter();
+
+	useEffect(() => {
+		async function getFolders() {
+			const folders = await Folders.getInstance().get({});
+			setFolders(folders.slice(0, 3));
+		}
+
+		getFolders();
+	}, []);
+
+	const handleSelectBlock = useCallback(
+		(block: IBlock) => {
+			router.push(
+				Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", block.id),
+			);
+		},
+		[router],
+	);
+
+	return (
+		<DefaultTemplate title="Sélectionner un dossier" hasHeaderLinks={false}>
+			<div className={classes["root"]}>
+				<div className={classes["background-container"]}>
+					<Image src={BackgroundImage} alt="background" />
+				</div>
+				<div className={classes["select-folder-container"]}>
+					<div className={classes["title"]}>
+						<Typography typo={ITypo.H1}>Vos dossiers</Typography>
+					</div>
+					<div className={classes["folders-container"]}>
+						<BlockList
+							onSelectedBlock={handleSelectBlock}
+							blocks={folders.map((folder) => {
+								return {
+									id: folder.uid!,
+									name: folder.name!,
+									selected: false,
+								};
+							})}
+						/>
+					</div>
+				</div>
+			</div>
+		</DefaultTemplate>
+	);
+}

src/front/Config/Module/development.json

@@ -109,6 +109,13 @@
 								}
 							}
 						}
+					},
+					"Select": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/select",
+							"labelKey": "select_folder"
+						}
 					}
 				}
 			},

src/front/Config/Module/preprod.json

@@ -109,6 +109,13 @@
 								}
 							}
 						}
+					},
+					"Select": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/select",
+							"labelKey": "select_folder"
+						}
 					}
 				}
 			},

src/front/Config/Module/production.json

@@ -109,6 +109,13 @@
 								}
 							}
 						}
+					},
+					"Select": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/select",
+							"labelKey": "select_folder"
+						}
 					}
 				}
 			},

src/front/Config/Module/staging.json

@@ -109,6 +109,13 @@
 								}
 							}
 						}
+					},
+					"Select": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/select",
+							"labelKey": "select_folder"
+						}
 					}
 				}
 			},

src/pages/folders/select/index.tsx

@@ -0,0 +1,5 @@
+import SelectFolder from "@Front/Components/Layouts/SelectFolder";
+
+export default function Route() {
+	return <SelectFolder />;
+}