URL Normalization and Modulation according to a config file (#17)

https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28850&t=k&c=2672a46bbbbc4963b29c6214f397fb10


Some more questions on the subject of redirection or dynamic modulation
of pages according to the configuration file.

An example of pathname modulation can be found on the following url:

`/folders/[folderUid]/edit/description`

---------

Co-authored-by: Maxime Lalo <maxime.lalo.pro@gmail.com>

src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx

@@ -15,6 +15,7 @@ type IProps = {
 		uid: Document["uid"];
 		document_type: Document["document_type"];
 		document_status: Document["document_status"];
+		folder: Document["folder"];
 	};
 	openDeletionModal?: (uid: Document["uid"]) => void;
 };
@@ -45,7 +46,7 @@ class DocumentNotaryClass extends React.Component<IPropsClass, IState> {
 
 	private onClick() {
 		if (this.props.document.document_status !== "VALIDATED" && this.props.document.document_status !== "PENDING") return;
-		this.props.router.push(`/folder/${this.props.document.folder.uid}/document/${this.props.document.uid}`);
+		this.props.router.push(`/folders/${this.props.document.folder.uid}/documents/${this.props.document.uid}`);
 	}
 
 	private renderIcon(): JSX.Element {

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

@@ -33,7 +33,7 @@
 			grid-template-columns: 1fr;
 		}
 
-		&.isSignleDescription {
+		&.single-information {
 			grid-template-columns: 1fr;
 		}
 	}

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

@@ -1,20 +1,28 @@
-import React from "react";
-import classes from "./classes.module.scss";
-import classNames from "classnames";
-import Image from "next/image";
 import PenICon from "@Assets/Icons/pen.svg";
 import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
-import Typography, { ITypo } from "../Typography";
-import Link from "next/link";
 import Module from "@Front/Config/Module";
+import classNames from "classnames";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+import Typography, { ITypo } from "../Typography";
+import classes from "./classes.module.scss";
 
 type IProps = {
 	folder: IDashBoardFolder;
-	isDescription?: boolean;
+	type: EFolderBoxInformationType;
+	isArchived?: boolean;
 };
 
+export enum EFolderBoxInformationType {
+	INFORMATIONS = "informations",
+	DESCRIPTION = "description",
+	ARCHIVED_DESCRIPTION = "archivedDescription",
+}
+
 export default function FolderBoxInformation(props: IProps) {
-	const { isDescription = false } = props;
+	const { isArchived = false, type } = props;
 	const editDescriptionPath = Module.getInstance()
 		.get()
 		.modules.pages.Folder.pages.EditDescription.props.path.replace("[folderUid]", props.folder.uid);
@@ -22,44 +30,57 @@ export default function FolderBoxInformation(props: IProps) {
 		.get()
 		.modules.pages.Folder.pages.EditDescription.props.path.replace("[folderUid]", props.folder.uid);
 
-	const path = isDescription ? editDescriptionPath : editInformationsPath;
+	const path = type === EFolderBoxInformationType.DESCRIPTION ? editDescriptionPath : editInformationsPath;
-
 	return (
-		<div className={classNames(classes["root"], isDescription && classes["isSignleDescription"])}>
+		<div className={classNames(classes["root"], type !== EFolderBoxInformationType.INFORMATIONS && classes["single-information"])}>
-			<div className={classes["content"]}>
+			<div className={classes["content"]}>{renderContentByType(props.folder, type)}</div>
-				{isDescription ? (
+			{!isArchived && (
-					<>
+				<Link href={path} className={classes["edit-icon-container"]}>
-						<div className={classes["text-container"]}>
+					<Image src={PenICon} alt="edit informations" />
-							<Typography typo={ITypo.NAV_INPUT_16}>Note dossier</Typography>
+				</Link>
-							<Typography typo={ITypo.P_18}>{props.folder.description ?? "..."}</Typography>
+			)}
-						</div>
+		</div>
-					</>
+	);
-				) : (
+
+	function renderContentByType(folder: IDashBoardFolder, type: EFolderBoxInformationType) {
+		switch (type) {
+			case EFolderBoxInformationType.DESCRIPTION:
+				return (
+					<div className={classes["text-container"]}>
+						<Typography typo={ITypo.NAV_INPUT_16}>Note dossier</Typography>
+						<Typography typo={ITypo.P_18}>{folder.description ?? ""}</Typography>
+					</div>
+				);
+			case EFolderBoxInformationType.ARCHIVED_DESCRIPTION:
+				return (
+					<div className={classes["text-container"]}>
+						<Typography typo={ITypo.NAV_INPUT_16}>Note archive</Typography>
+						<Typography typo={ITypo.P_18}>{folder.archived_description ?? ""}</Typography>
+					</div>
+				);
+			case EFolderBoxInformationType.INFORMATIONS:
+				return (
 					<>
 						<div className={classes["text-container"]}>
 							<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
-							<Typography typo={ITypo.P_18}>{props.folder.name ?? "..."}</Typography>
+							<Typography typo={ITypo.P_18}>{folder.name ?? ""}</Typography>
 						</div>
 						<div className={classes["text-container"]}>
 							<Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography>
-							<Typography typo={ITypo.P_18}>{props.folder.folder_number ?? "..."}</Typography>
+							<Typography typo={ITypo.P_18}>{folder.folder_number ?? ""}</Typography>
 						</div>
 						<div className={classes["text-container"]}>
 							<Typography typo={ITypo.NAV_INPUT_16}>Type d’acte</Typography>
-							<Typography typo={ITypo.P_18}>{props.folder.deed.deed_type.name ?? "..."}</Typography>
+							<Typography typo={ITypo.P_18}>{folder.deed.deed_type.name ?? ""}</Typography>
 						</div>
 						<div className={classes["text-container"]}>
 							<Typography typo={ITypo.NAV_INPUT_16}>Ouverture du dossier</Typography>
-							<Typography typo={ITypo.P_18}>{formatDate(props.folder.created_at)}</Typography>
+							<Typography typo={ITypo.P_18}>{formatDate(folder.created_at)}</Typography>
 						</div>
 					</>
-				)}
+				);
-			</div>
+		}
-			<Link href={path} className={classes["edit-icon-container"]}>
+	}
-				<Image src={PenICon} alt="edit informations" />
-			</Link>
-		</div>
-	);
 }
 
 function formatDate(date: Date | null): string {

src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx

@@ -12,6 +12,7 @@ type IProps = {
 				uid: Document["uid"];
 				document_type: Document["document_type"];
 				document_status: Document["document_status"];
+				folder: Document["folder"];
 		  }[]
 		| null;
 	openDeletionModal: (uid: Document["uid"]) => void;

src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx

@@ -18,10 +18,14 @@ type IProps = {
 		email: Contact["email"];
 	};
 	selectedFolderUid: string;
+	isArchived?: boolean;
 };
 type IState = {};
 
-export default class UserFolderHeaderClass extends React.Component<IProps, IState> {
+export default class UserFolderHeader extends React.Component<IProps, IState> {
+	static defaultProps = {
+		isArchived: false,
+	};
 	public override render(): JSX.Element {
 		const redirectPath = Module.getInstance()
 			.get()
@@ -53,12 +57,14 @@ export default class UserFolderHeaderClass extends React.Component<IProps, IStat
 						<Typography typo={ITypo.P_18}>{this.props.contact.email}</Typography>
 					</div>
 				</div>
-				<div className={classes["icons"]}>
+				{!this.props.isArchived && (
-					<WarningBadge />
+					<div className={classes["icons"]}>
-					<Link href={redirectPath}>
+						<WarningBadge />
-						<Image src={PenIcon} alt="edit" className={classes["edit-icon"]} onClick={this.onEditClick} />
+						<Link href={redirectPath}>
-					</Link>
+							<Image src={PenIcon} alt="edit" className={classes["edit-icon"]} onClick={this.onEditClick} />
-				</div>
+						</Link>
+					</div>
+				)}
 			</div>
 		);
 	}

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

@@ -1,6 +1,7 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import PlusIcon from "@Assets/Icons/plus.svg";
 import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import Module from "@Front/Config/Module";
 import classNames from "classnames";
 import Customer, { Document } from "le-coffre-resources/dist/Customer";
 import Image from "next/image";
@@ -13,12 +14,12 @@ import QuantityProgressBar from "../QuantityProgressBar";
 import classes from "./classes.module.scss";
 import DocumentList from "./DocumentList";
 import UserFolderHeader from "./UserFolderHeader";
-import Module from "@Front/Config/Module";
 
 type IProps = {
 	customer: Customer;
 	animationDelay?: number;
 	folder: IDashBoardFolder;
+	isArchived?: boolean;
 };
 type IState = {
 	isOpen: boolean;
@@ -29,6 +30,7 @@ type IState = {
 export default class UserFolder extends React.Component<IProps, IState> {
 	static defaultProps = {
 		animationDelay: 300,
+		isArchived: false,
 	};
 	public rootRefElement = React.createRef<HTMLDivElement>();
 
@@ -64,7 +66,11 @@ export default class UserFolder extends React.Component<IProps, IState> {
 				</Confirm>
 
 				<div className={classes["header"]} onClick={this.toggleOpen}>
-					<UserFolderHeader contact={this.props.customer.contact} selectedFolderUid={this.props.folder.uid} />
+					<UserFolderHeader
+						contact={this.props.customer.contact}
+						selectedFolderUid={this.props.folder.uid}
+						isArchived={this.props.isArchived}
+					/>
 					<Image
 						src={ChevronIcon}
 						alt="chevron open close"
@@ -97,14 +103,16 @@ export default class UserFolder extends React.Component<IProps, IState> {
 								openDeletionModal={this.openDeletionModal}
 							/>
 						</div>
-						<div className={classes["button-container"]}>
+						{!this.props.isArchived && (
-							<Link href={redirectPath}>
+							<div className={classes["button-container"]}>
-								<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
+								<Link href={redirectPath}>
-									Demander un autre document{" "}
+									<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
-								</Button>
+										Demander un autre document{" "}
-							</Link>
+									</Button>
-							{<Button disabled={documentsAsked ? false : true}>Envoyer un mail de demande de documents</Button>}
+								</Link>
-						</div>
+								{<Button disabled={documentsAsked ? false : true}>Envoyer un mail de demande de documents</Button>}
+							</div>
+						)}
 					</div>
 				)}
 			</div>

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

@@ -41,7 +41,9 @@ export type IDashBoardFolder = {
 	deed: OfficeFolder["deed"];
 	created_at: OfficeFolder["created_at"];
 	office_folder_has_customers?: OfficeFolder["office_folder_has_customers"];
+	archived_description: OfficeFolder["archived_description"];
 };
+
 export default class DefaultNotaryDashboard extends React.Component<IProps, IState> {
 	private onWindowResize = () => {};
 	public static defaultProps: Partial<IProps> = {

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

@@ -1,8 +1,9 @@
+import "reflect-metadata";
+
 import React, { ReactNode } from "react";
 import classes from "./classes.module.scss";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
-import "reflect-metadata";
 
 type IProps = {
 	title: string;

src/front/Components/Layouts/DesignSystem/dummyData.ts

@@ -247,6 +247,7 @@ export const folderWithPendingDocumentArchived1: OfficeFolder = {
 	description: "Description",
 	archived_description: "Archived description",
 	documents: [documentDeposited],
+	office_folder_has_customers: [officeFolderHasCustomer1, officeFolderHasCustomer2],
 };
 export const folderWithPendingDocumentArchived2: OfficeFolder = {
 	uid: "adzefdazdaazzrtgtr",

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

@@ -1,3 +1,5 @@
+import "reflect-metadata";
+
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 import DocumentNotary from "@Front/Components/DesignSystem/Document/DocumentNotary";
@@ -22,7 +24,6 @@ import Toasts, { IToast } from "@Front/Stores/Toasts";
 import classes from "./classes.module.scss";
 import { customer2, document, documentDeposited, documentPending, folder, folders, folderWithPendingDocument } from "./dummyData";
 
-import "reflect-metadata";
 
 type IState = {
 	isModalDisplayed: boolean;

src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx

@@ -51,11 +51,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 		const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer, key) => {
 			if (!folderHasCustomer.customer) return null;
 			// TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder
-			return (
+			return <UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} key={key} />;
-				// <div className={classes["user-folder"]} key={folderHasCustomer.customer.uid}>
-				<UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} key={key} />
-				// </div>
-			);
 		});
 		return output ?? null;
 	}

src/front/Components/Layouts/Folder/FolderInformation/index.tsx

@@ -2,27 +2,25 @@ import "reflect-metadata";
 
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import FolderBoxInformation from "@Front/Components/DesignSystem/FolderBoxInformation";
+import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
 import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
 import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import Module from "@Front/Config/Module";
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import ClientSection from "./ClientSection";
-import Link from "next/link";
+
-import { useEffect, useState } from "react";
-import Module from "@Front/Config/Module";
 
 type IProps = {};
 
 type IPropsClass = IProps & {
 	selectedFolderUid: string;
-	isArchivedFolders: boolean;
 };
 
 type IState = {
@@ -48,7 +46,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 			.get()
 			.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid);
 		return (
-			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} isArchived={this.props.isArchivedFolders}>
+			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} isArchived={false}>
 				<div className={classes["root"]}>
 					{this.state.selectedFolder ? (
 						<div className={classes["folder-informations"]}>
@@ -63,9 +61,9 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 										</Button>
 									</Link>
 								</div>
-								<FolderBoxInformation folder={this.state.selectedFolder} />
+								<FolderBoxInformation folder={this.state.selectedFolder} type={EFolderBoxInformationType.INFORMATIONS} />
 								<div className={classes["second-box"]}>
-									<FolderBoxInformation folder={this.state.selectedFolder} isDescription />
+									<FolderBoxInformation folder={this.state.selectedFolder} type={EFolderBoxInformationType.DESCRIPTION} />
 								</div>
 								<div className={classes["progress-bar"]}>
 									<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
@@ -142,8 +140,5 @@ export default function FolderInformation(props: IProps) {
 	const router = useRouter();
 	let { folderUid } = router.query;
 	folderUid = folderUid as string;
-	const [url, setUrl] = useState("");
+	return <FolderInformationClass {...props} selectedFolderUid={folderUid} />;
-	useEffect(() => setUrl(router?.asPath), []);
-	const isArchivedFolders = url.includes("archived");
-	return <FolderInformationClass {...props} selectedFolderUid={folderUid} isArchivedFolders={isArchivedFolders} />;
 }

src/front/Components/Layouts/Folder/ViewDocuments/index.tsx

@@ -175,7 +175,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 	private goToPrevious() {
 		if (this.hasPrevious()) {
 			this.props.router.push(
-				`/folder/${this.props.folderUid}/document/${this.props.documentsList[this.state.selectedDocumentIndex - 1]!.uid}`,
+				`/folders/${this.props.folderUid}/documents/${this.props.documentsList[this.state.selectedDocumentIndex - 1]!.uid}`,
 			);
 		}
 	}
@@ -183,7 +183,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 	private goToNext() {
 		if (this.hasNext()) {
 			this.props.router.push(
-				`/folder/${this.props.folderUid}/document/${this.props.documentsList[this.state.selectedDocumentIndex + 1]!.uid}`,
+				`/folders/${this.props.folderUid}/documents/${this.props.documentsList[this.state.selectedDocumentIndex + 1]!.uid}`,
 			);
 		}
 	}

src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx

@@ -2,11 +2,7 @@ import React from "react";
 import classes from "./classes.module.scss";
 import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import PlusIcon from "@Assets/Icons/plus.svg";
 import UserFolder from "@Front/Components/DesignSystem/UserFolder";
-import Link from "next/link";
-import Module from "@Front/Config/Module";
 
 type IProps = {
 	folder: IDashBoardFolder;
@@ -15,32 +11,17 @@ type IState = {};
 
 export default class ClientSection extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
-		const navigatePath = Module.getInstance()
-			.get()
-			.modules.pages.Folder.pages.AddClient.props.path.replace("[folderUid]", this.props.folder.uid);
 		return (
 			<div className={classes["root"]}>
 				{this.doesFolderHaveCustomer() ? (
 					<>
 						<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
-						<Link href={navigatePath}>
-							<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
-								Ajouter un client
-							</Button>
-						</Link>
 					</>
 				) : (
 					<div className={classes["no-client"]}>
-						<div className={classes["title"]}>
+						<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							Aucun client dans ce dossier
-								Aucun client n’est associé au dossier.
+						</Typography>
-							</Typography>
-						</div>
-						<Link href={navigatePath}>
-							<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
-								Ajouter un client
-							</Button>
-						</Link>
 					</div>
 				)}
 			</div>
@@ -51,11 +32,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 		const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer, key) => {
 			if (!folderHasCustomer.customer) return null;
 			// TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder
-			return (
+			return <UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} key={key} isArchived />;
-				// <div className={classes["user-folder"]} key={folderHasCustomer.customer.uid}>
-				<UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} key={key} />
-				// </div>
-			);
 		});
 		return output ?? null;
 	}

src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx

@@ -2,9 +2,7 @@ import "reflect-metadata";
 
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import FolderBoxInformation from "@Front/Components/DesignSystem/FolderBoxInformation";
+import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
-import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
@@ -14,13 +12,11 @@ import { useRouter } from "next/router";
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import ClientSection from "./ClientSection";
-import { useEffect, useState } from "react";
 
 type IProps = {};
 
 type IPropsClass = IProps & {
 	selectedFolderUid: string;
-	isArchivedFolders: boolean;
 };
 
 type IState = {
@@ -43,7 +39,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 	// TODO: get the selected folder from the api in componentDidMount
 	public override render(): JSX.Element {
 		return (
-			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} isArchived={this.props.isArchivedFolders}>
+			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} isArchived={true}>
 				<div className={classes["root"]}>
 					{this.state.selectedFolder ? (
 						<div className={classes["folder-informations"]}>
@@ -56,10 +52,26 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 										Modifier les collaborateurs
 									</Button>
 								</div>
-								<FolderBoxInformation folder={this.state.selectedFolder} />
+								<FolderBoxInformation
+									folder={this.state.selectedFolder}
+									isArchived
+									type={EFolderBoxInformationType.INFORMATIONS}
+								/>
 								<div className={classes["second-box"]}>
-									<FolderBoxInformation folder={this.state.selectedFolder} isDescription />
+									<FolderBoxInformation
+										folder={this.state.selectedFolder}
+										isArchived
+										type={EFolderBoxInformationType.DESCRIPTION}
+									/>
 								</div>
+								<div className={classes["second-box"]}>
+									<FolderBoxInformation
+										folder={this.state.selectedFolder}
+										isArchived
+										type={EFolderBoxInformationType.ARCHIVED_DESCRIPTION}
+									/>
+								</div>
+
 								<div className={classes["progress-bar"]}>
 									<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
 								</div>
@@ -69,27 +81,10 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 							{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
 
 							<div className={classes["button-container"]}>
-								<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}>
+								<Button variant={EButtonVariant.GHOST} onClick={this.restoreFolder}>
-									Archiver le dossier
+									Restaurer le dossier
 								</Button>
-								{!this.doesFolderHaveCustomer() && (
-									<span className={classes["delete-folder"]}>
-										<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
-									</span>
-								)}
 							</div>
-							<Confirm
-								isOpen={this.state.isArchivedModalOpen}
-								onClose={this.closeArchivedModal}
-								closeBtn
-								header={"Archiver le dossier ?"}
-								cancelText={"Annuler"}
-								confirmText={"Archiver"}>
-								<div className={classes["modal-title"]}>
-									<Typography typo={ITypo.P_16}>Souhaitez-vous vraiment archiver le dossier ?</Typography>
-								</div>
-								<InputField name="input field" fakeplaceholder="Description" textarea />
-							</Confirm>
 						</div>
 					) : (
 						<div className={classes["no-folder-selected"]}>
@@ -106,6 +101,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		);
 	}
 	public override async componentDidMount() {
+		// TODO : GET Current folder from the api
 		for (const folder of folders) {
 			if (folder.uid === this.props.selectedFolderUid) {
 				this.setState({ selectedFolder: folder });
@@ -122,6 +118,8 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		this.setState({ selectedFolder: folder });
 	}
 
+	private restoreFolder() {}
+	// should call the api to restore the folder
 	private openArchivedModal(): void {
 		this.setState({ isArchivedModalOpen: true });
 	}
@@ -135,9 +133,5 @@ export default function FolderInformation(props: IProps) {
 	const router = useRouter();
 	let { folderUid } = router.query;
 	folderUid = folderUid as string;
-	const [url, setUrl] = useState("");
+	return <FolderInformationClass {...props} selectedFolderUid={folderUid} />;
-	useEffect(() => setUrl(router?.asPath), []);
-	const isArchivedFolders = url.includes("archived");
-	console.log("isArchivedFolders >> ", isArchivedFolders);
-	return <FolderInformationClass {...props} selectedFolderUid={folderUid} isArchivedFolders={isArchivedFolders} />;
 }

src/front/Config/Module/preprod.json

@@ -48,7 +48,7 @@
 					"AddClient": {
 						"enabled": true,
 						"props": {
-							"path": "/folders/add/client",
+							"path": "/folders/add/clients",
 							"labelKey": "add_client_to_folder"
 						}
 					},
@@ -80,6 +80,13 @@
 							"labelKey": "edit_informations"
 						}
 					},
+					"EditCollaborators": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/collaborators",
+							"labelKey": "edit_collaborators"
+						}
+					},
 					"FolderArchived": {
 						"enabled": true,
 						"props": {

src/front/Config/Module/production.json

@@ -48,7 +48,7 @@
 					"AddClient": {
 						"enabled": true,
 						"props": {
-							"path": "/folders/add/client",
+							"path": "/folders/add/clients",
 							"labelKey": "add_client_to_folder"
 						}
 					},
@@ -80,6 +80,13 @@
 							"labelKey": "edit_informations"
 						}
 					},
+					"EditCollaborators": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/collaborators",
+							"labelKey": "edit_collaborators"
+						}
+					},
 					"FolderArchived": {
 						"enabled": true,
 						"props": {

src/front/Config/Module/staging.json

@@ -48,7 +48,7 @@
 					"AddClient": {
 						"enabled": true,
 						"props": {
-							"path": "/folders/add/client",
+							"path": "/folders/add/clients",
 							"labelKey": "add_client_to_folder"
 						}
 					},
@@ -80,6 +80,13 @@
 							"labelKey": "edit_informations"
 						}
 					},
+					"EditCollaborators": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/collaborators",
+							"labelKey": "edit_collaborators"
+						}
+					},
 					"FolderArchived": {
 						"enabled": true,
 						"props": {

src/pages/folders/archived/[folderUid]/index.tsx

@@ -1,4 +1,4 @@
-import FolderInformation from "@Front/Components/Layouts/Folder/FolderInformation";
+import FolderInformation from "@Front/Components/Layouts/FolderArchived/FolderInformation";
 
 export default function Route() {
 	return <FolderInformation />;