Merge branch 'dev' into staging

src/front/Components/DesignSystem/FolderListContainer/classes.module.scss

@@ -1,7 +0,0 @@
-@import "@Themes/constants.scss";
-
-.root {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-}

src/front/Components/DesignSystem/FolderListContainer/index.tsx

@@ -1,87 +0,0 @@
-import Module from "@Front/Config/Module";
-import { OfficeFolder } from "le-coffre-resources/dist/Notary";
-import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
-import { useRouter } from "next/router";
-import React, { useCallback, useEffect } from "react";
-
-import classes from "./classes.module.scss";
-import { IBlock } from "../SearchBlockList/BlockList/Block";
-import SearchBlockList from "../SearchBlockList";
-
-type IProps = {
-	folders: OfficeFolder[];
-	isArchived: boolean;
-};
-
-export default function FolderListContainer(props: IProps) {
-	const router = useRouter();
-	const { folderUid } = router.query;
-	const { folders, isArchived } = props;
-
-	const redirectPath: string = isArchived
-		? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path
-		: Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
-
-	const getBlocks = useCallback(
-		(folders: OfficeFolder[]): IBlock[] => {
-			const pendingFolders = folders
-				.filter((folder) => {
-					const pendingDocuments = (folder.documents ?? []).filter(
-						(document) => document.document_status === EDocumentStatus.DEPOSITED,
-					);
-					return pendingDocuments.length >= 1;
-				})
-				.sort((folder1, folder2) => {
-					return folder1.created_at! > folder2.created_at! ? -1 : 1;
-				});
-
-			const otherFolders = folders
-				.filter((folder) => {
-					const pendingDocuments = (folder.documents ?? []).filter(
-						(document) => document.document_status === EDocumentStatus.DEPOSITED,
-					);
-					return pendingDocuments.length === 0;
-				})
-				.sort((folder1, folder2) => {
-					return folder1.created_at! > folder2.created_at! ? -1 : 1;
-				});
-
-			return [...pendingFolders, ...otherFolders].map((folder) => {
-				return {
-					id: folder.uid!,
-					primaryText: folder.name,
-					secondaryText: folder.folder_number,
-					isActive: folderUid === folder.uid,
-					showAlert: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
-				};
-			});
-		},
-		[folderUid],
-	);
-
-	const [blocks, setBlocks] = React.useState<IBlock[]>(getBlocks(folders));
-
-	const onSelectedFolder = (block: IBlock) => {
-		const folder = folders.find((folder) => folder.uid === block.id);
-		if (!folder) return;
-		const path = redirectPath.replace("[folderUid]", folder.uid ?? "");
-		router.push(path);
-	};
-
-	useEffect(() => {
-		setBlocks(getBlocks(folders));
-	}, [folders, getBlocks]);
-
-	return (
-		<div className={classes["root"]}>
-			<SearchBlockList
-				blocks={blocks}
-				onSelectedBlock={onSelectedFolder}
-				bottomButton={{
-					link: Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path,
-					text: "Créer un dossier",
-				}}
-			/>
-		</div>
-	);
-}

src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx

@@ -9,7 +9,6 @@ import SearchBlockList, { ISearchBlockListProps } from "@Front/Components/Design
 export type IPropsDashboardWithList = {
 	title?: string;
 	children?: ReactNode;
-	isArchived?: boolean;
 	hasBackArrow?: boolean;
 	backArrowUrl?: string;
 	mobileBackText?: string;

src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss

@@ -1,23 +0,0 @@
-@import "@Themes/constants.scss";
-
-.root {
-	position: relative;
-	.content {
-		display: flex;
-		justify-content: flex-start;
-		height: calc(100vh - var(--header-height));
-
-		@media (max-width: $screen-m) {
-			flex-direction: column;
-		}
-		.right-side {
-			min-width: calc(100% - 336px);
-			overflow-y: auto;
-			padding: var(--spacing-lg, 24px);
-
-			@media (max-width: $screen-m) {
-				width: 100%;
-			}
-		}
-	}
-}

src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx

@@ -1,13 +1,13 @@
 import Folders, { IGetFoldersParams } from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
-import Header from "@Front/Components/DesignSystem/Header";
-import Version from "@Front/Components/DesignSystem/Version";
-import BackArrow from "@Front/Components/Elements/BackArrow";
 import EFolderStatus from "le-coffre-resources/dist/Customer/EFolderStatus";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
-import React, { ReactNode, useEffect } from "react";
+import React, { ReactNode, useCallback, useEffect } from "react";
+import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
 
-import classes from "./classes.module.scss";
+import Module from "@Front/Config/Module";
+import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
+import { useRouter } from "next/router";
+import DefaultDashboardWithList from "../DefaultDashboardWithList";
 
 type IProps = {
 	title: string;
@@ -19,9 +19,64 @@ type IProps = {
 };
 
 export default function DefaultNotaryDashboard(props: IProps) {
-	const { hasBackArrow, backArrowUrl, children, isArchived } = props;
+	const { isArchived } = props;
-
+	const router = useRouter();
 	const [folders, setFolders] = React.useState<OfficeFolder[]>([]);
+	const { folderUid } = router.query;
+
+	const redirectPath: string = isArchived
+		? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path
+		: Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
+
+	const getBlocks = useCallback(
+		(folders: OfficeFolder[]): IBlock[] => {
+			const pendingFolders = folders
+				.filter((folder) => {
+					const pendingDocuments = (folder.documents ?? []).filter(
+						(document) => document.document_status === EDocumentStatus.DEPOSITED,
+					);
+					return pendingDocuments.length >= 1;
+				})
+				.sort((folder1, folder2) => {
+					return folder1.created_at! > folder2.created_at! ? -1 : 1;
+				});
+
+			const otherFolders = folders
+				.filter((folder) => {
+					const pendingDocuments = (folder.documents ?? []).filter(
+						(document) => document.document_status === EDocumentStatus.DEPOSITED,
+					);
+					return pendingDocuments.length === 0;
+				})
+				.sort((folder1, folder2) => {
+					return folder1.created_at! > folder2.created_at! ? -1 : 1;
+				});
+
+			return [...pendingFolders, ...otherFolders].map((folder) => {
+				return {
+					id: folder.uid!,
+					primaryText: folder.name,
+					secondaryText: folder.folder_number,
+					isActive: folderUid === folder.uid,
+					showAlert: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
+				};
+			});
+		},
+		[folderUid],
+	);
+
+	const [blocks, setBlocks] = React.useState<IBlock[]>(getBlocks(folders));
+
+	const onSelectedBlock = (block: IBlock) => {
+		const folder = folders.find((folder) => folder.uid === block.id);
+		if (!folder) return;
+		const path = redirectPath.replace("[folderUid]", folder.uid ?? "");
+		router.push(path);
+	};
+
+	useEffect(() => {
+		setBlocks(getBlocks(folders));
+	}, [folders, getBlocks]);
 
 	useEffect(() => {
 		let targetedStatus: EFolderStatus = EFolderStatus["LIVE" as keyof typeof EFolderStatus];
@@ -63,20 +118,14 @@ export default function DefaultNotaryDashboard(props: IProps) {
 	}, [isArchived]);
 
 	return (
-		<div className={classes["root"]}>
+		<DefaultDashboardWithList
-			<Header isUserConnected={true} />
+			{...props}
-			<div className={classes["content"]}>
+			onSelectedBlock={onSelectedBlock}
-				<FolderListContainer folders={folders} isArchived={isArchived ?? false} />
+			blocks={blocks}
-				<div className={classes["right-side"]}>
+			bottomButton={{
-					{hasBackArrow && (
+				link: Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path,
-						<div className={classes["back-arrow-desktop"]}>
+				text: "Créer un dossier",
-							<BackArrow url={backArrowUrl ?? ""} />
+			}}
-						</div>
+		/>
-					)}
-					{children}
-				</div>
-			</div>
-			<Version />
-		</div>
 	);
 }