Feature/add customer to folders (#26)

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+dist/
 
 # testing
 /coverage

src/front/Api/LeCoffreApi/SuperAdmin/Customers/Customers.ts

@@ -6,8 +6,8 @@ import { ECivility } from "le-coffre-resources/dist/Customer/Contact";
 
 // TODO Type get query params -> Where + inclue + orderby
 export interface IGetCustomersparams {
-	where?:{},
+	where?: {};
-	include?:{},
+	include?: {};
 }
 
 // TODO Type getbyuid query params
@@ -45,7 +45,8 @@ export default class Customers extends BaseSuperAdmin {
 
 	public async get(q: IGetCustomersparams): Promise<Customer[]> {
 		const url = new URL(this.baseURl);
-		Object.entries(q).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
+		const query = { q };
+		Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
 		try {
 			return await this.getRequest<Customer[]>(url);
 		} catch (err) {

src/front/Api/LeCoffreApi/SuperAdmin/Folders/Folders.ts

@@ -39,7 +39,7 @@ export type IPutFoldersParams = {
 	archived_description?: OfficeFolder["archived_description"];
 	status?: OfficeFolder["status"];
 	office_folder_has_stakeholder?: OfficeFolder["office_folder_has_stakeholder"];
-	OfficeFolderHasCustomer?: { customer: { uid: Customer["uid"] } }[];
+	office_folder_has_customers?: { customer: { uid: Customer["uid"] } }[];
 };
 
 @Service()

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

@@ -58,8 +58,8 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 							options={this.props.options}
 							styles={styles}
 							onChange={this.onChange}
-							value={this.props.value}
+							value={this.props.defaultValue}
-							defaultValue={this.props.defaultValue}
+							defaultValue={this.state.selectedOptions}
 							closeMenuOnSelect={this.props.shouldCloseMenuOnSelect}
 							isMulti
 							isOptionDisabled={this.props.isOptionDisabled}
@@ -88,6 +88,21 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 		}
 	}
 
+	public override componentDidUpdate(prevProps: IProps): void {
+		if (this.props.defaultValue === prevProps.defaultValue) return;
+		if (this.props.defaultValue) {
+			// If default value contains multiple IOptions
+			if (Array.isArray(this.props.defaultValue)) {
+				this.setState({ selectedOptions: this.props.defaultValue });
+			}
+
+			// If default value is a single IOption
+			if ("label" in this.props.defaultValue) {
+				this.setState({ selectedOptions: [this.props.defaultValue] });
+			}
+		}
+	}
+
 	private onFocus() {
 		this.setState({ isFocused: true });
 	}

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

@@ -44,8 +44,8 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
 					<div className={classes["container"]}>
 						<Typography typo={ITypo.NAV_INPUT_16}>Numéro de téléphone</Typography>
 						<Typography typo={ITypo.P_18}>
-							{this.formatPhoneNumber(this.props.customer.contact.phone_number ?? "") ??
+							{this.formatPhoneNumber(this.props.customer.contact.cell_phone_number) ??
-								this.formatPhoneNumber(this.props.customer.contact.cell_phone_number)}
+								this.formatPhoneNumber(this.props.customer.contact.phone_number?.toString() ?? "")}
 						</Typography>
 					</div>
 
@@ -82,6 +82,5 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
 		return output.join("");
 	}
 
-	private onEditClick(): void {
+	private onEditClick(): void {}
-	}
 }

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

@@ -22,12 +22,10 @@ type IProps = {
 	folder: IDashBoardFolder;
 	isArchived?: boolean;
 	isOpened: boolean;
-	onOpen: (id: string) => void;
+	onChange: (id: string) => void;
-	onClose: () => void;
 };
 type IState = {
 	isOpenDeletionModal: boolean;
-	willClose: boolean;
 };
 
 export default class UserFolder extends React.Component<IProps, IState> {
@@ -41,13 +39,10 @@ export default class UserFolder extends React.Component<IProps, IState> {
 		super(props);
 		this.state = {
 			isOpenDeletionModal: false,
-			willClose: false,
 		};
-		this.toggleOpen = this.toggleOpen.bind(this);
 		this.closeDeletionModal = this.closeDeletionModal.bind(this);
 		this.openDeletionModal = this.openDeletionModal.bind(this);
-		this.openComponent = this.openComponent.bind(this);
+		this.changeUserFolder = this.changeUserFolder.bind(this);
-		this.closeComponent = this.closeComponent.bind(this);
 	}
 	public override render(): JSX.Element {
 		const documentsAsked: Document[] | null = this.getDocumentsByStatus("ASKED");
@@ -67,18 +62,22 @@ export default class UserFolder extends React.Component<IProps, IState> {
 					Êtes-vous vous de vouloir supprimer la demande de document ?
 				</Confirm>
 
-				<div className={classes["header"]} onClick={this.toggleOpen}>
+				<div className={classes["header"]} onClick={this.changeUserFolder}>
-					<UserFolderHeader customer={this.props.customer} folder={this.props.folder} isArchived={this.props.isArchived} />
+					<UserFolderHeader
+						customer={this.props.customer}
+						folder={this.props.folder}
+						isArchived={this.props.isArchived}
+					/>
 					<Image
 						src={ChevronIcon}
 						alt="chevron open close"
 						className={classNames(classes["chevron-icon"], this.props.isOpened && classes["open"])}
-						onClick={this.toggleOpen}
+						onClick={this.changeUserFolder}
 					/>
 				</div>
 
 				{this.props.isOpened && (
-					<div className={classes["container"]} data-will-close={this.state.willClose.toString()} ref={this.rootRefElement}>
+					<div className={classes["container"]} ref={this.rootRefElement}>
 						<QuantityProgressBar
 							title="Complétion du dossier client"
 							total={100}
@@ -121,14 +120,6 @@ export default class UserFolder extends React.Component<IProps, IState> {
 
 	public override componentDidUpdate(prevProps: IProps): void {
 		this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
-
-		if (prevProps.isOpened !== this.props.isOpened) {
-			if (this.props.isOpened) {
-				this.openComponent();
-			} else {
-				this.closeComponent();
-			}
-		}
 	}
 
 	private calculateDocumentsPercentageProgress(): number {
@@ -162,27 +153,9 @@ export default class UserFolder extends React.Component<IProps, IState> {
 	// 	return this.props.customer.documents.filter((document) => !documentToExclude.includes(document));
 	// }
 
-	private toggleOpen(): void {
-		if (this.props.isOpened) {
-			this.closeComponent();
-		} else {
-			this.openComponent();
-		}
-	}
 
-	private openComponent(): void {
+	private changeUserFolder(){
-		this.props.onOpen(this.props.customer.uid!);
+		this.props.onChange(this.props.customer.uid!);
-	}
-
-	private closeComponent(): void {
-		if (this.state.willClose) return;
-		this.setState({ willClose: true });
-		window.setTimeout(() => {
-			this.props.onClose();
-			this.setState({
-				willClose: false,
-			});
-		}, this.props.animationDelay);
 	}
 
 	private openDeletionModal(uid?: string): void {

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

@@ -240,7 +240,7 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 							<Typography typo={ITypo.H3}>Notary Documents</Typography>
 						</div>
 						<div className={classes["sub-section"]}>
-							<UserFolder customer={customer2} folder={folder as IDashBoardFolder} isOpened={true} onClose={() => {return}} onOpen={() => {return}}/>
+							<UserFolder customer={customer2} folder={folder as IDashBoardFolder} isOpened={true} onChange={() => {return}}/>
 						</div>
 					</div>
 

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

@@ -8,14 +8,13 @@ import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import { NextRouter, useRouter } from "next/router";
-import { ActionMeta, MultiValue } from "react-select";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import Link from "next/link";
 import Module from "@Front/Config/Module";
 import { ECivility } from "le-coffre-resources/dist/Customer/Contact";
-import Folders from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
+import Folders, { IPutFoldersParams } from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
 import Customers from "@Front/Api/LeCoffreApi/SuperAdmin/Customers/Customers";
 import { Customer } from "le-coffre-resources/dist/Notary";
 
@@ -24,7 +23,8 @@ type IState = {
 	selectedFolder: IDashBoardFolder | null;
 	isExistingClientSelected: boolean;
 	isNewClientSelected: boolean;
-	hasNewClientSelected: boolean;
+	availableCustomers: Customer[] | null;
+	selectedCustomers: readonly IOption[];
 };
 
 type IPropsClass = IProps & {
@@ -38,7 +38,8 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 			selectedFolder: null,
 			isExistingClientSelected: true,
 			isNewClientSelected: false,
-			hasNewClientSelected: false,
+			availableCustomers: [],
+			selectedCustomers: [],
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 		this.onExistingClientSelected = this.onExistingClientSelected.bind(this);
@@ -47,11 +48,8 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 		this.onFormSubmit = this.onFormSubmit.bind(this);
 	}
 	public override render(): JSX.Element {
-		const selectOptions = [
+		const selectOptions: IOption[] = this.getSelectedOptions();
-			{ value: "adazzdsqaad", label: "john Doe" },
+
-			{ value: "rijgreipgje", label: "jane Doe" },
-			{ value: "gipjerpogkzfe", label: "Marcelino Doe" },
-		];
 		const backwardPath = Module.getInstance()
 			.get()
 			.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
@@ -82,14 +80,17 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 					<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
 						{this.state.isExistingClientSelected && (
 							<div className={classes["existing-client"]}>
-								<MultiSelect options={selectOptions} placeholder="Client" onChange={this.onMutiSelectChange} />
+								<MultiSelect
+									options={selectOptions}
+									placeholder="Clients"
+									onChange={this.onMutiSelectChange}
+									defaultValue={this.state.selectedCustomers}
+								/>
 								<div className={classes["button-container"]}>
 									<Link href={backwardPath} className={classes["cancel-button"]}>
 										<Button variant={EButtonVariant.GHOST}>Annuler</Button>
 									</Link>
-									<Button disabled={!this.state.hasNewClientSelected ? true : false} type="submit">
+									<Button type="submit">Associer au dossier</Button>
-										Associer au dossier
-									</Button>
 								</div>
 							</div>
 						)}
@@ -114,12 +115,57 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 		);
 	}
 
-	private onMutiSelectChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>): void {
+	public override async componentDidMount() {
-		if (newValue.length <= 0) {
+		const query = {};
-			this.setState({ hasNewClientSelected: false });
+		const availableCustomers = await Customers.getInstance().get(query);
+		let preSelectedCustomers: IOption[] | undefined = await this.getFolderPreSelectedCustomers(this.props.selectedFolderUid);
+		const selectedCustomers = preSelectedCustomers ?? [];
+		this.setState({ availableCustomers, selectedCustomers });
+	}
+
+	private async getFolderPreSelectedCustomers(folderUid: string): Promise<IOption[] | undefined> {
+		const query = {
+			q: {
+				office_folder_has_customers: {
+					include: {
+						customer: {
+							include: {
+								contact: true,
+							},
+						},
+					},
+				},
+			},
+		};
+		let preSelectedCustomers: IOption[] = [];
+		try {
+			const folder = await Folders.getInstance().getByUid(folderUid, query);
+			preSelectedCustomers = folder.office_folder_has_customers!.map((folderHasCustomer) => {
+				return {
+					label: folderHasCustomer.customer.contact?.first_name + " " + folderHasCustomer.customer.contact?.last_name,
+					value: folderHasCustomer.customer.uid,
+				};
+			});
+		} catch (error) {
+			this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path);
 			return;
 		}
-		this.setState({ hasNewClientSelected: true });
+		return preSelectedCustomers;
+	}
+
+	private getSelectedOptions(): IOption[] {
+		let options = this.state.availableCustomers?.map((customer) => {
+			return {
+				label: customer.contact?.first_name + " " + customer.contact?.last_name,
+				value: customer.uid,
+			};
+		});
+		if (!options) options = [];
+		return options;
+	}
+
+	private onMutiSelectChange(selectedCustomers: readonly IOption[]): void {
+		this.setState({ selectedCustomers });
 	}
 
 	private onSelectedFolder(folder: IDashBoardFolder): void {
@@ -140,18 +186,28 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 			[key: string]: any;
 		},
 	) {
-		values["civility"] = ECivility.MALE;
+		values["civility"] = ECivility.MALE; // TODO: should maybe be deleted later or added to the form
-		const customer = {
-			contact: values,
-		};
-		const newCustomerCreated: Customer = await Customers.getInstance().post(customer);
 
-		if (newCustomerCreated) {
+		let customersToLink: IPutFoldersParams["office_folder_has_customers"] = this.state.selectedCustomers.map((customer) => {
-			const query = {
+			return {
-				OfficeFolderHasCustomer: [{ customer: { uid: newCustomerCreated.uid } }],
+				customer: { uid: customer.value },
+			};
+		}) as IPutFoldersParams["office_folder_has_customers"];
+
+		if (this.state.isNewClientSelected) {
+			const customer: Customer = await Customers.getInstance().post({
+				contact: values,
+			});
+			if (!customer.uid) return;
+			customersToLink?.push({ customer: { uid: customer.uid } });
+		}
+
+		if (customersToLink) {
+			const body = {
+				office_folder_has_customers: customersToLink,
 			};
 
-			await Folders.getInstance().put(this.props.selectedFolderUid, query);
+			await Folders.getInstance().put(this.props.selectedFolderUid, body);
 			this.props.router.push(`/folders/${this.props.selectedFolderUid}`);
 		}
 	}

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

@@ -23,8 +23,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 			openedCustomer: "",
 		};
 
-		this.selectUserFolder = this.selectUserFolder.bind(this);
+		this.changeUserFolder = this.changeUserFolder.bind(this);
-		this.closeUserFolder = this.closeUserFolder.bind(this);
 	}
 
 	public override render(): JSX.Element {
@@ -63,34 +62,26 @@ export default class ClientSection extends React.Component<IProps, IState> {
 	private renderCustomerFolders() {
 		const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer) => {
 			if (!folderHasCustomer.customer) return null;
-			console.log();
-			// TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder
 			return (
 				<UserFolder
 					folder={this.props.folder}
 					customer={folderHasCustomer.customer}
 					key={folderHasCustomer.customer.uid}
 					isOpened={this.state.openedCustomer === folderHasCustomer.customer.uid}
-					onOpen={this.selectUserFolder}
+					onChange={this.changeUserFolder}
-					onClose={this.closeUserFolder}
 				/>
 			);
 		});
 		return output ?? null;
 	}
 
-	private closeUserFolder() {
+
+	private changeUserFolder(uid: string) {
 		this.setState({
-			openedCustomer: "",
+			openedCustomer: uid === this.state.openedCustomer ? "" : uid,
 		});
 	}
-
+	
-	private selectUserFolder(index: string) {
-		this.setState({
-			openedCustomer: index,
-		});
-	}
-
 	private doesFolderHaveCustomer(): boolean {
 		if (!this.props.folder?.office_folder_has_customers) return false;
 		return this.props.folder?.office_folder_has_customers!.length > 0;

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

@@ -1,7 +1,7 @@
 import "reflect-metadata";
 
 import ChevronIcon from "@Assets/Icons/chevron.svg";
-import Folders from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
+import Folders, { IPutFoldersParams } from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
 import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
@@ -175,7 +175,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		if (!this.state.selectedFolder) return;
 		const folder = this.state.selectedFolder;
 		folder.archived_description = this.state.inputArchivedDescripton;
-		await Folders.getInstance().archive(this.state.selectedFolder.uid ?? "", folder);
+		await Folders.getInstance().archive(this.state.selectedFolder.uid ?? "", folder as IPutFoldersParams);
 		this.closeArchivedModal();
 		this.props.router.push(Module.getInstance().get().modules.pages.Folder.props.path);
 	}

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

@@ -46,15 +46,15 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 		this.onFormSubmit = this.onFormSubmit.bind(this);
 		this.onChangeSelectedCollaborators = this.onChangeSelectedCollaborators.bind(this);
 	}
-	public override render(): JSX.Element {		
+	public override render(): JSX.Element {
 		const foldersInformationPath = Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
 		const backwardPath = foldersInformationPath.replace("[folderUid]", this.props.selectedFolderUid);
-		const selectOptions : IOption[]= this.state.availableCollaborators.map((collaborator) => {
+		const selectOptions: IOption[] = this.state.availableCollaborators.map((collaborator) => {
 			return {
 				label: collaborator.contact?.first_name + " " + collaborator.contact?.last_name,
 				value: collaborator.uid,
-			}
+			};
-		})
+		});
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
@@ -75,7 +75,12 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 
 						{this.state.selectedOption === ERadioBoxValue.SELECTION && (
 							<div className={classes["sub-content"]}>
-								<MultiSelect onChange={this.onChangeSelectedCollaborators} options={selectOptions} placeholder="Collaborateurs" defaultValue={this.state.selectedCollaborators}/>
+								<MultiSelect
+									onChange={this.onChangeSelectedCollaborators}
+									options={selectOptions}
+									placeholder="Collaborateurs"
+									defaultValue={this.state.selectedCollaborators}
+								/>
 							</div>
 						)}
 
@@ -91,11 +96,11 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 		);
 	}
 
-	public override async componentDidMount(){
+	public override async componentDidMount() {
 		await this.getFolderAvailableCollaborators(this.props.selectedFolderUid);
 	}
 
-	private async getFolderAvailableCollaborators(folderUid: string){
+	private async getFolderAvailableCollaborators(folderUid: string) {
 		const query = {
 			q: {
 				office: true,
@@ -104,44 +109,44 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 						user_stakeholder: {
 							include: {
 								contact: true,
-							}
+							},
-						}
+						},
-					}
+					},
 				},
 			},
-		};	
+		};
 
 		let folder = null;
 		try {
-			folder = await Folders.getInstance().getByUid(folderUid, query);			
+			folder = await Folders.getInstance().getByUid(folderUid, query);
-			const preSelectedCollaborators : IOption[]= folder.office_folder_has_stakeholder!.map((collaborator) => {
+			const preSelectedCollaborators: IOption[] = folder.office_folder_has_stakeholder!.map((collaborator) => {
 				return {
 					label: collaborator.user_stakeholder.contact?.first_name + " " + collaborator.user_stakeholder.contact?.last_name,
 					value: collaborator.user_stakeholder.uid,
-				}
+				};
-			})
+			});
-			this.setState({selectedCollaborators: preSelectedCollaborators})
+			this.setState({ selectedCollaborators: preSelectedCollaborators });
-		} catch (error) {			
+		} catch (error) {
 			this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path);
 			return;
 		}
-	
+
 		const userQuery: IGetUsersparams = {
-			where: { 
+			where: {
 				office_uid: folder.office?.uid,
 			},
-			include:{
+			include: {
 				contact: {
-					select:{
+					select: {
-						first_name:true,
+						first_name: true,
-						last_name:true,
+						last_name: true,
-					}
+					},
-				}
+				},
-			}
+			},
 		};
 
-		const availableCollaborators = await Users.getInstance().get(userQuery);		
+		const availableCollaborators = await Users.getInstance().get(userQuery);
-		this.setState({availableCollaborators});
+		this.setState({ availableCollaborators });
 	}
 
 	private onSelectedOptionAllOffice(event: React.ChangeEvent<HTMLInputElement>) {
@@ -168,18 +173,24 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 
 	private async onFormSubmit(e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) {
 		try {
-			let collaboratorsUid : OfficeFolderHasStakeholder[];
+			let collaboratorsUid: OfficeFolderHasStakeholder[];
-			if(this.state.selectedOption === ERadioBoxValue.SELECTION){
+			if (this.state.selectedOption === ERadioBoxValue.SELECTION) {
-				collaboratorsUid = this.state.selectedCollaborators.map((collaborator) => ({user_stakeholder: {uid: collaborator.value}} as OfficeFolderHasStakeholder));
+				collaboratorsUid = this.state.selectedCollaborators.map(
+					(collaborator) => ({ user_stakeholder: { uid: collaborator.value } } as OfficeFolderHasStakeholder),
+				);
+			} else {
+				collaboratorsUid = this.state.availableCollaborators.map(
+					(collaborator) => ({ user_stakeholder: { uid: collaborator.uid } } as OfficeFolderHasStakeholder),
+				);
 			}
-			else{
+			await Folders.getInstance().put(this.props.selectedFolderUid, { office_folder_has_stakeholder: collaboratorsUid });
-				collaboratorsUid = this.state.availableCollaborators.map((collaborator) => ({user_stakeholder: {uid: collaborator.uid}} as OfficeFolderHasStakeholder));
+			this.props.router.push(
-			}			
+				Module.getInstance()
-			await Folders.getInstance().put(this.props.selectedFolderUid, {office_folder_has_stakeholder: collaboratorsUid});
+					.get()
-			this.props.router.push(Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid));
+					.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid),
-			
+			);
 		} catch (error) {
-			console.error(error)	
+			console.error(error);
 		}
 	}
 }
@@ -188,5 +199,5 @@ export default function UpdateFolderCollaborators() {
 	const router = useRouter();
 	let { folderUid } = router.query;
 	folderUid = folderUid as string;
-	return <UpdateFolderCollaboratorsClass selectedFolderUid={folderUid} router={router}/>;
+	return <UpdateFolderCollaboratorsClass selectedFolderUid={folderUid} router={router} />;
 }

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

@@ -18,8 +18,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 			openedCustomer: "",
 		};
 
-		this.selectUserFolder = this.selectUserFolder.bind(this);
+		this.changeUserFolder = this.changeUserFolder.bind(this);
-		this.closeUserFolder = this.closeUserFolder.bind(this);
 	}
 	
 	public override render(): JSX.Element {
@@ -50,23 +49,16 @@ export default class ClientSection extends React.Component<IProps, IState> {
 					customer={folderHasCustomer.customer}
 					key={this.props.folder.uid}
 					isOpened={this.state.openedCustomer === this.props.folder.uid}
-					onOpen={this.selectUserFolder}
+					onChange={this.changeUserFolder}
-					onClose={this.closeUserFolder}
 				/>
 			);
 		});
 		return output ?? null;
 	}
 
-	private closeUserFolder() {
+	private changeUserFolder(uid: string) {
 		this.setState({
-			openedCustomer: "",
+			openedCustomer: uid === this.state.openedCustomer ? "" : uid,
-		});
-	}
-
-	private selectUserFolder(index: string) {
-		this.setState({
-			openedCustomer: index,
 		});
 	}
 

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

@@ -12,7 +12,7 @@ import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import ClientSection from "./ClientSection";
 import { OfficeFolder } from "le-coffre-resources/dist/Customer";
-import Folders from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
+import Folders, { IPutFoldersParams } from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
 import Module from "@Front/Config/Module";
 
 type IProps = {};
@@ -121,8 +121,12 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		if (!this.state.selectedFolder) return;
 		const folder = this.state.selectedFolder;
 		folder.archived_description = null;
-		await Folders.getInstance().restore(this.state.selectedFolder.uid ?? "", folder);
+		await Folders.getInstance().restore(this.state.selectedFolder.uid ?? "", folder as IPutFoldersParams);
-		this.props.router.push(Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid));
+		this.props.router.push(
+			Module.getInstance()
+				.get()
+				.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid),
+		);
 	}
 
 	private openArchivedModal(): void {