✨ New modify informations

src/front/Assets/images/background_refonte.svg

@@ -0,0 +1,16 @@
+<svg width="708" height="949" viewBox="0 0 708 949" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_290_22215)">
+<path opacity="0.5" d="M1107.28 476.969V785.738C984.818 725.193 840.015 709.07 698.774 751.293C552.769 794.949 437.885 892.816 369.589 1016.28H49.1945L2.95426 862.102C-5.40172 834.252 10.4413 804.912 38.3332 796.568L1107.28 476.969Z" fill="#005BCB"/>
+</g>
+<g clip-path="url(#clip1_290_22215)">
+<path d="M181.969 -76.2753L490.738 -76.2753C430.193 46.1825 414.07 190.986 456.293 332.226C499.949 478.232 597.816 593.115 721.277 661.411L721.277 981.806L567.102 1028.05C539.252 1036.4 509.912 1020.56 501.568 992.667L181.969 -76.2753Z" stroke="#005BCB" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<defs>
+<clipPath id="clip0_290_22215">
+<rect width="708" height="480.476" fill="white" transform="translate(0 483.523)"/>
+</clipPath>
+<clipPath id="clip1_290_22215">
+<rect width="964" height="527" fill="white" transform="translate(181 964) rotate(-90)"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -7,14 +7,13 @@
 
 	color: var(--data-color, var(--color-neutral-950));
 
-
 	//Displays
 	&.display-large {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 50px;
 		line-height: 75px;
-		letter-spacing: -2%;
+		letter-spacing: -0.8px;
 
 		@media (max-width: $screen-m) {
 			font-size: 48px;
@@ -26,7 +25,7 @@
 		font-weight: 600;
 		font-size: 48px;
 		line-height: 72px;
-		letter-spacing: -2%;
+		letter-spacing: -0.8px;
 
 		@media (max-width: $screen-m) {
 			font-size: 48px;
@@ -38,7 +37,7 @@
 		font-weight: 600;
 		font-size: 44px;
 		line-height: 66px;
-		letter-spacing: -2%;
+		letter-spacing: -0.8px;
 
 		@media (max-width: $screen-m) {
 			font-size: 48px;
@@ -52,42 +51,42 @@
 		font-weight: 600;
 		font-size: 40px;
 		line-height: 60px;
-		letter-spacing: -2%;
+		letter-spacing: -0.8px;
 	}
 	&.title-h2 {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 36px;
 		line-height: 54px;
-		letter-spacing: -2%;
+		letter-spacing: -0.8px;
 	}
 	&.title-h3 {
 		font-style: normal;
 		font-weight: 300;
 		font-size: 32px;
 		line-height: 48px;
-		letter-spacing: -2%;
+		letter-spacing: -0.8px;
 	}
 	&.title-h4 {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 28px;
 		line-height: 42px;
-		letter-spacing: -2%;
+		letter-spacing: -0.8px;
 	}
 	&.title-h5 {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 24px;
 		line-height: 36px;
-		letter-spacing: -2%;
+		letter-spacing: -0.8px;
 	}
 	&.title-h6 {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 20px;
 		line-height: 30px;
-		letter-spacing: -2%;
+		letter-spacing: -0.8px;
 	}
 
 	//Text large
@@ -248,28 +247,28 @@
 		font-weight: 700;
 		font-size: 10px;
 		line-height: 15px;
-		letter-spacing: -2%;
+		letter-spacing: -0.8px;
 	}
 	&.caption-semibold {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 10px;
 		line-height: 15px;
-		letter-spacing: -2%;
+		letter-spacing: -0.8px;
 	}
 	&.caption-regular {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 10px;
 		line-height: 15px;
-		letter-spacing: -2%;
+		letter-spacing: -0.8px;
 	}
 	&.caption-uppercase {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 10px;
 		line-height: 15px;
-		letter-spacing: -2%;
+		letter-spacing: -0.8px;
 		text-transform: uppercase;
 	}
 	&.caption-light {
@@ -277,6 +276,6 @@
 		font-weight: 300;
 		font-size: 10px;
 		line-height: 15px;
-		letter-spacing: -2%;
+		letter-spacing: -0.8px;
 	}
 }

src/front/Components/Elements/BackArrow/index.tsx

@@ -1,5 +1,5 @@
 import { ChevronLeftIcon } from "@heroicons/react/24/solid";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonSize, EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { NextRouter, useRouter } from "next/router";
 import React from "react";
 
@@ -24,6 +24,7 @@ class BackArrowClass extends React.Component<IPropsClass, IState> {
 				leftIcon={<ChevronLeftIcon />}
 				variant={EButtonVariant.PRIMARY}
 				styleType={EButtonStyleType.TEXT}
+				size={EButtonSize.SM}
 				onClick={this.handleClick}>
 				Retour
 			</Button>

src/front/Components/Layouts/Folder/UpdateFolderDescription/classes.module.scss

@@ -1,56 +0,0 @@
-@import "@Themes/constants.scss";
-
-.root {
-	display: flex;
-	flex-direction: column;
-	min-height: 100%;
-	align-items: flex-start;
-	width: fit-content;
-
-	.back-arrow {
-		margin-bottom: 24px;
-	}
-
-	.form {
-		width: 100%;
-
-		.content {
-			margin-top: 32px;
-
-			>:not(:last-child) {
-				margin-bottom: 24px;
-			}
-
-		}
-
-		.button-container {
-			width: 100%;
-			display: flex;
-			text-align: center;
-			margin-top: 24px;
-
-			.cancel-button {
-				display: flex;
-				margin-right: 32px;
-			}
-
-			@media (max-width: $screen-m) {
-				display: flex;
-				flex-direction: column-reverse;
-
-				.cancel-button {
-					margin-left: 0;
-					margin-top: 12px;
-
-					>* {
-						flex: 1;
-					}
-				}
-
-				>* {
-					width: 100%;
-				}
-			}
-		}
-	}
-}

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

@@ -1,90 +0,0 @@
-import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import Form from "@Front/Components/DesignSystem/Form";
-import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
-import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
-import BackArrow from "@Front/Components/Elements/BackArrow";
-import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
-import Module from "@Front/Config/Module";
-import { OfficeFolder } from "le-coffre-resources/dist/Notary";
-import Link from "next/link";
-import { NextRouter, useRouter } from "next/router";
-
-import BasePage from "../../Base";
-import classes from "./classes.module.scss";
-
-type IProps = {};
-
-type IPropsClass = IProps & {
-	folderUid: string;
-	router: NextRouter;
-};
-
-type IState = {
-	folder: OfficeFolder | null;
-};
-class UpdateFolderDescriptionClass extends BasePage<IPropsClass, IState> {
-	private backwardPath = Module.getInstance()
-		.get()
-		.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid);
-	constructor(props: IPropsClass) {
-		super(props);
-		this.state = {
-			folder: null,
-		};
-		this.onFormSubmit = this.onFormSubmit.bind(this);
-	}
-	public override render(): JSX.Element {
-		return (
-			<DefaultNotaryDashboard title={"Ajouter client(s)"}>
-				<div className={classes["root"]}>
-					<div className={classes["back-arrow"]}>
-						<BackArrow url={this.backwardPath} />
-					</div>
-					<Typography typo={ETypo.TITLE_H1}>Modifier la note du dossier</Typography>
-
-					<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
-						<div className={classes["content"]}>
-							<TextAreaField
-								name="description"
-								placeholder="Note du dossier"
-								defaultValue={this.state.folder?.description ?? ""}
-							/>
-						</div>
-
-						<div className={classes["button-container"]}>
-							<Link href={this.backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
-									Annuler
-								</Button>
-							</Link>
-							<Button type="submit">Enregistrer</Button>
-						</div>
-					</Form>
-				</div>
-			</DefaultNotaryDashboard>
-		);
-	}
-
-	public override async componentDidMount() {
-		const folder = await Folders.getInstance().getByUid(this.props.folderUid);
-		this.setState({ folder });
-	}
-
-	private async onFormSubmit(e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) {
-		try {
-			await Folders.getInstance().put(this.props.folderUid, values);
-			this.props.router.push(this.backwardPath);
-		} catch (error) {
-			console.error(error);
-		}
-	}
-}
-
-export default function UpdateFolderDescription(props: IProps) {
-	const router = useRouter();
-	let { folderUid } = router.query;
-	folderUid = folderUid as string;
-
-	return <UpdateFolderDescriptionClass folderUid={folderUid} router={router} />;
-}

src/front/Components/Layouts/Folder/UpdateFolderMetadata/classes.module.scss

@@ -3,54 +3,26 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	min-height: 100%;
+	gap: var(--spacing-xl, 32px);
-	align-items: flex-start;
+	width: 472px;
-	width: fit-content;
+	margin: auto;
-
+	margin: 24px auto;
-	.back-arrow {
-		margin-bottom: 24px;
-	}
-
 	.form {
-		width: 100%;
-
 		.content {
-			margin-top: 32px;
+			display: flex;
-
+			flex-direction: column;
-			>:not(:last-child) {
+			gap: var(--spacing-md, 16px);
-				margin-bottom: 24px;
-			}
-
 		}
 
 		.button-container {
-			width: 100%;
+			margin-top: var(--spacing-xl, 32px);
 			display: flex;
-			text-align: center;
+			gap: var(--spacing-md, 16px);
-			margin-top: 24px;
-
-			.cancel-button {
-				display: flex;
-				margin-right: 12px;
-			}
 
 			@media (max-width: $screen-m) {
 				display: flex;
 				flex-direction: column-reverse;
-
-				.cancel-button {
-					margin-left: 0;
-					margin-top: 12px;
-
-					>* {
-						flex: 1;
-					}
-				}
-
-				>* {
-					width: 100%;
-				}
 			}
 		}
 	}
-}
+}

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

@@ -5,103 +5,34 @@ import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
-import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Module from "@Front/Config/Module";
 import { Deed, OfficeFolder } from "le-coffre-resources/dist/Notary";
 import Link from "next/link";
-import { NextRouter, useRouter } from "next/router";
+import { useRouter } from "next/router";
-
+import backgroundImage from "@Assets/images/background_refonte.svg";
-import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import DateField from "@Front/Components/DesignSystem/Form/DateField";
 import { ValidationError } from "class-validator/types/validation/ValidationError";
+import { useEffect, useState } from "react";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
+import { isArray } from "class-validator";
 
-type IProps = {};
+export default function UpdateFolderMetadata() {
+	const router = useRouter();
 
-type IPropsClass = IProps & {
+	const [selectedFolder, setSelectedFolder] = useState<OfficeFolder | null>(null);
-	folderUid: string;
+	const [validationError, setValidationError] = useState<ValidationError[]>([]);
-	router: NextRouter;
-};
 
-type IState = {
+	let { folderUid } = router.query;
-	selectedFolder: OfficeFolder | null;
-	validationError: ValidationError[];
-};
-class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
-	constructor(props: IPropsClass) {
-		super(props);
-		this.state = {
-			selectedFolder: null,
-			validationError: [],
-		};
-		this.onSelectedFolder = this.onSelectedFolder.bind(this);
-		this.getFolder = this.getFolder.bind(this);
-		this.onFormSubmit = this.onFormSubmit.bind(this);
-	}
-	public override render(): JSX.Element {
-		const backwardPath = Module.getInstance()
-			.get()
-			.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.state.selectedFolder?.uid!);
-		const deedOption = {
-			label: this.state.selectedFolder?.deed?.deed_type?.name,
-			value: this.state.selectedFolder?.deed?.deed_type?.uid,
-		} as IOption;
-		const openingDate = new Date(this.state.selectedFolder?.created_at ?? "");
-		if (!this.state.selectedFolder?.created_at) return <></>;
-		const defaultValue = openingDate.toISOString().split("T")[0];
-		return (
-			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
-				<div className={classes["root"]}>
-					<div className={classes["back-arrow"]}>
-						<BackArrow url={backwardPath} />
-					</div>
-					<Typography typo={ETypo.TITLE_H1}>Modifier les informations du dossier</Typography>
 
-					<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
+	const onFormSubmit = async (
-						<div className={classes["content"]}>
-							<TextField
-								name="name"
-								placeholder="Intitulé du dossier"
-								defaultValue={this.state.selectedFolder?.name}
-								validationError={this.state.validationError.find((error) => error.property === "name")}
-							/>
-							<TextField
-								name="folder_number"
-								placeholder="Numéro de dossier"
-								defaultValue={this.state.selectedFolder?.folder_number}
-								validationError={this.state.validationError.find((error) => error.property === "folder_number")}
-							/>
-							<Select name="deed" options={[]} placeholder={"Type d'acte"} selectedOption={deedOption} disabled />
-							<DateField name="opening_date" placeholder="Ouverture du dossier" defaultValue={defaultValue} disabled />
-						</div>
-
-						<div className={classes["button-container"]}>
-							<Link href={backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
-									Annuler
-								</Button>
-							</Link>
-							<Button type="submit">Enregistrer</Button>
-						</div>
-					</Form>
-				</div>
-			</DefaultNotaryDashboard>
-		);
-	}
-
-	public override async componentDidMount() {
-		const folder = await this.getFolder();
-		this.setState({
-			selectedFolder: folder,
-		});
-	}
-
-	private async onFormSubmit(
 		e: React.FormEvent<HTMLFormElement> | null,
 		values: {
 			[key: string]: string;
 		},
-	) {
+	) => {
+		if (!folderUid || isArray(folderUid)) return;
 		const newValues = OfficeFolder.hydrate<OfficeFolder>({
 			...values,
 			deed: Deed.hydrate<Deed>({
@@ -112,24 +43,26 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
 		try {
 			await newValues.validateOrReject?.({ groups: ["updateFolder"], forbidUnknownValues: false });
 		} catch (validationErrors) {
-			this.setState({ validationError: validationErrors as ValidationError[] });
+			setValidationError(validationErrors as ValidationError[]);
 			return;
 		}
 
 		try {
-			await Folders.getInstance().put(this.props.folderUid, newValues);
+			await Folders.getInstance().put(folderUid, newValues);
 			const url = Module.getInstance()
 				.get()
-				.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid);
+				.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid);
-			this.props.router.push(url);
+
+			router.push(url);
 		} catch (backError) {
 			if (!Array.isArray(backError)) return;
-			this.setState({ validationError: backError as ValidationError[] });
+			setValidationError(backError);
 			return;
 		}
-	}
+	};
 
-	private async getFolder(): Promise<OfficeFolder> {
+	useEffect(() => {
+		if (!folderUid || isArray(folderUid)) return;
 		const query = {
 			q: {
 				deed: { include: { deed_type: true } },
@@ -137,18 +70,64 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
 				customers: { include: { contact: true } },
 			},
 		};
-		const folder = await Folders.getInstance().getByUid(this.props.folderUid, query);
+		Folders.getInstance()
-		return folder;
+			.getByUid(folderUid, query)
-	}
+			.then((folder) => setSelectedFolder(folder));
+	}, [folderUid]);
 
-	private onSelectedFolder(folder: OfficeFolder): void {
+	const backwardPath = Module.getInstance()
-		this.setState({ selectedFolder: folder });
+		.get()
-	}
+		.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", selectedFolder?.uid!);
-}
+	const deedOption = {
+		label: selectedFolder?.deed?.deed_type?.name,
+		value: selectedFolder?.deed?.deed_type?.uid,
+	} as IOption;
+	const openingDate = new Date(selectedFolder?.created_at ?? "");
+	if (!selectedFolder?.created_at) return <></>;
+	const defaultValue = openingDate.toISOString().split("T")[0];
 
-export default function UpdateFolderMetadata(props: IProps) {
+	return (
-	const router = useRouter();
+		<DefaultDoubleSidePage title={"Ajouter client(s)"} image={backgroundImage}>
-	let { folderUid } = router.query;
+			<div className={classes["root"]}>
-	folderUid = folderUid as string;
+				<div className={classes["back-arrow"]}>
-	return <UpdateFolderMetadataClass folderUid={folderUid} router={router} />;
+					<BackArrow url={backwardPath} />
+				</div>
+				<Typography typo={ETypo.TITLE_H1}>Modifier les informations du dossier</Typography>
+
+				<Form className={classes["form"]} onSubmit={onFormSubmit}>
+					<div className={classes["content"]}>
+						<TextField
+							name="name"
+							placeholder="Intitulé du dossier"
+							defaultValue={selectedFolder?.name}
+							validationError={validationError.find((error) => error.property === "name")}
+						/>
+						<TextField
+							name="folder_number"
+							placeholder="Numéro de dossier"
+							defaultValue={selectedFolder?.folder_number}
+							validationError={validationError.find((error) => error.property === "folder_number")}
+						/>
+						<Select name="deed" options={[]} placeholder={"Type d'acte"} selectedOption={deedOption} disabled />
+						<DateField name="opening_date" placeholder="Ouverture du dossier" defaultValue={defaultValue} disabled />
+						<TextAreaField
+							name="description"
+							placeholder="Note du dossier"
+							defaultValue={selectedFolder?.description ?? undefined}
+							validationError={validationError.find((error) => error.property === "description")}
+						/>
+					</div>
+
+					<div className={classes["button-container"]}>
+						<Link href={backwardPath} className={classes["cancel-button"]}>
+							<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+								Annuler
+							</Button>
+						</Link>
+						<Button type="submit">Enregistrer les modifications</Button>
+					</div>
+				</Form>
+			</div>
+		</DefaultDoubleSidePage>
+	);
 }

src/pages/folders/[folderUid]/edit/description.tsx

@@ -1,13 +0,0 @@
-import UpdateFolderDescription from "@Front/Components/Layouts/Folder/UpdateFolderDescription";
-import Module from "@Front/Config/Module";
-import { useRouter } from "next/router";
-
-export default function Route() {
-	const isEnabled: boolean = Module.getInstance().get().modules.pages.Folder.pages.EditDescription.enabled;
-	const router = useRouter();
-	if (!isEnabled) {
-		router.push("/404");
-		return null;
-	}
-	return <UpdateFolderDescription />;
-}