From 0003cefa1a8638ef064247f2d76da4c44b9bcda7 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Mon, 29 Jul 2024 13:52:18 +0200
Subject: [PATCH] :sparkles: Add client working

---
 .../Components/DesignSystem/Footer/index.tsx  |  11 +-
 .../DefaultDoubleSidePage/classes.module.scss |   2 +-
 .../AddClientToFolder/classes.module.scss     |  13 +-
 .../Folder/AddClientToFolder/index.tsx        | 435 +++++++++---------
 4 files changed, 222 insertions(+), 239 deletions(-)

diff --git a/src/front/Components/DesignSystem/Footer/index.tsx b/src/front/Components/DesignSystem/Footer/index.tsx
index a212956f..aad7305e 100644
--- a/src/front/Components/DesignSystem/Footer/index.tsx
+++ b/src/front/Components/DesignSystem/Footer/index.tsx
@@ -11,11 +11,18 @@ type IProps = {
 };
 
 export default function Footer({ className, hasLeftPadding = false, isSticky = false }: IProps) {
+	const footerRef = React.useRef<HTMLDivElement>(null);
 	useEffect(() => {
-		document.documentElement.style.setProperty("--footer-height", `43px`);
+		if (!footerRef.current) return;
+		const footerHeight = footerRef.current.clientHeight + 1;
+		document.documentElement.style.setProperty("--footer-height", `${footerHeight}px`);
 	});
 	return (
-		<footer className={[classes["root"], className].join(" ")} data-has-left-padding={hasLeftPadding} data-is-sticky={isSticky}>
+		<footer
+			className={[classes["root"], className].join(" ")}
+			data-has-left-padding={hasLeftPadding}
+			data-is-sticky={isSticky}
+			ref={footerRef}>
 			<Mobile className={classes["mobile"]} />
 			<Tablet className={classes["tablet"]} />
 			<Desktop className={classes["desktop"]} />
diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
index 8d431201..143f8733 100644
--- a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
@@ -5,7 +5,7 @@
 	.content {
 		display: flex;
 		.sides {
-			min-height: calc(100vh - var(--header-height));
+			min-height: calc(100vh - var(--header-height) - var(--footer-height));
 			width: 50%;
 			@media (max-width: $screen-m) {
 				width: 100%;
diff --git a/src/front/Components/Layouts/Folder/AddClientToFolder/classes.module.scss b/src/front/Components/Layouts/Folder/AddClientToFolder/classes.module.scss
index 6114580a..19fc7a55 100644
--- a/src/front/Components/Layouts/Folder/AddClientToFolder/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/AddClientToFolder/classes.module.scss
@@ -3,10 +3,10 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	min-height: 100%;
 	align-items: flex-start;
-	width: fit-content;
-
+	width: 472px;
+	margin: auto;
+	margin-top: 24px;
 	.back-arrow {
 		margin-bottom: 24px;
 	}
@@ -22,7 +22,6 @@
 	.form {
 		width: 100%;
 
-
 		.button-container {
 			width: 100%;
 			display: flex;
@@ -42,12 +41,12 @@
 					margin-left: 0;
 					margin-top: 12px;
 
-					>* {
+					> * {
 						flex: 1;
 					}
 				}
 
-				>* {
+				> * {
 					width: 100%;
 				}
 			}
@@ -59,4 +58,4 @@
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
index 0af9d9e9..143ab839 100644
--- a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
+++ b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
@@ -8,153 +8,127 @@ import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 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 { ValidationError } from "class-validator";
 import { ECivility } from "le-coffre-resources/dist/Customer/Contact";
 import { Contact, Customer, OfficeFolder } from "le-coffre-resources/dist/Notary";
 import Link from "next/link";
-import { NextRouter, useRouter } from "next/router";
-
-import BasePage from "../../Base";
+import { useRouter } from "next/router";
+import backgroundImage from "@Assets/images/background_refonte.svg";
 import classes from "./classes.module.scss";
+import { useCallback, useEffect, useState } from "react";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 
 enum ESelectedOption {
 	EXISTING_CUSTOMER = "existing_customer",
 	NEW_CUSTOMER = "new_customer",
 }
 type IProps = {};
-type IState = {
-	selectedOption: ESelectedOption;
-	availableCustomers: Customer[];
-	selectedCustomers: IOption[];
-	existingCustomers: IOption[];
-	isLoaded: boolean;
-	validationError: ValidationError[];
-};
 
-type IPropsClass = IProps & {
-	selectedFolderUid: string;
-	router: NextRouter;
-};
-class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
-	constructor(props: IPropsClass) {
-		super(props);
-		this.state = {
-			selectedOption: ESelectedOption.EXISTING_CUSTOMER,
-			availableCustomers: [],
-			selectedCustomers: [],
-			existingCustomers: [],
-			isLoaded: false,
-			validationError: [],
-		};
-		this.onExistingClientSelected = this.onExistingClientSelected.bind(this);
-		this.onNewClientSelected = this.onNewClientSelected.bind(this);
-		this.onMutiSelectChange = this.onMutiSelectChange.bind(this);
-		this.onFormSubmit = this.onFormSubmit.bind(this);
-	}
-	public override render(): JSX.Element {
-		const selectOptions: IOption[] = this.getSelectedOptions();
+export default function AddClientToFolder(props: IProps) {
+	const router = useRouter();
+	let { folderUid } = router.query;
 
-		const backwardPath = Module.getInstance()
-			.get()
-			.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
-		return (
-			<DefaultNotaryDashboard title={"Ajouter client(s)"}>
-				<div className={classes["root"]}>
-					<div className={classes["back-arrow"]}>
-						<BackArrow url={backwardPath} />
-					</div>
-					<Typography typo={ETypo.TITLE_H1}>Associer un ou plusieurs client(s)</Typography>
-					{this.state.isLoaded && (
-						<>
-							<div className={classes["radiobox-container"]}>
-								{this.state.availableCustomers.length !== 0 && (
-									<RadioBox
-										name="client"
-										onChange={this.onExistingClientSelected}
-										checked={this.state.selectedOption === "existing_customer"}
-										value={"existing client"}>
-										<Typography typo={ETypo.TEXT_LG_REGULAR}>Client existant</Typography>
-									</RadioBox>
-								)}
+	const [selectedOption, setSelectedOption] = useState<ESelectedOption>(ESelectedOption.EXISTING_CUSTOMER);
+	const [availableCustomers, setAvailableCustomers] = useState<Customer[]>([]);
+	const [selectedCustomers, setSelectedCustomers] = useState<IOption[]>([]);
+	const [existingCustomers, setExistingCustomers] = useState<IOption[]>([]);
+	const [isLoaded, setIsLoaded] = useState<boolean>(false);
+	const [validationError, setValidationError] = useState<ValidationError[]>([]);
 
-								<RadioBox
-									name="client"
-									onChange={this.onNewClientSelected}
-									checked={this.state.selectedOption === "new_customer"}
-									value={"new client"}>
-									<Typography typo={ETypo.TEXT_LG_REGULAR}>Nouveau client</Typography>
-								</RadioBox>
-							</div>
+	const onFormSubmit = useCallback(
+		async (
+			e: React.FormEvent<HTMLFormElement> | null,
+			values: {
+				[key: string]: any;
+			},
+		) => {
+			values["civility"] = ECivility.MALE; // TODO: should maybe be deleted later or added to the form
 
-							<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
-								{this.state.selectedOption === "existing_customer" && (
-									<div className={classes["existing-client"]}>
-										<AutocompleteMultiSelect
-											label="Clients"
-											options={selectOptions}
-											selectedOptions={this.state.selectedCustomers}
-											onSelectionChange={this.onMutiSelectChange}
-										/>
+			const allCustomersToLink = selectedCustomers.concat(existingCustomers);
+			let customersToLink: Partial<Customer>[] = allCustomersToLink.map((customer) => {
+				return Customer.hydrate<Customer>({ uid: customer.id as string });
+			}) as Partial<Customer>[];
 
-										<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">Associer au dossier</Button>
-										</div>
-									</div>
-								)}
+			if (selectedOption === "new_customer") {
+				try {
+					// remove every space from the phone number
+					values["cell_phone_number"] = values["cell_phone_number"].replace(/\s/g, "");
+					values["cell_phone_number"] = values["cell_phone_number"].replace(/\./g, "");
+					if (values["cell_phone_number"] && values["cell_phone_number"].length === 10) {
+						// get the first digit of the phone number
+						const firstDigit = values["cell_phone_number"].charAt(0);
+						// if the first digit is a 0 replace it by +33
+						if (firstDigit === "0") {
+							values["cell_phone_number"] = "+33" + values["cell_phone_number"].substring(1);
+						}
+					}
+					const contactToCreate = Contact.hydrate<Customer>(values);
+					await contactToCreate.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false });
+				} catch (validationErrors) {
+					setValidationError(validationErrors as ValidationError[]);
+					return;
+				}
 
-								{this.state.selectedOption === "new_customer" && (
-									<div className={classes["new-client"]}>
-										<TextField
-											name="last_name"
-											placeholder="Nom"
-											validationError={this.state.validationError.find((error) => error.property === "last_name")}
-										/>
-										<TextField
-											name="first_name"
-											placeholder="Prénom"
-											validationError={this.state.validationError.find((error) => error.property === "first_name")}
-										/>
-										<TextField
-											name="email"
-											placeholder="E-mail"
-											validationError={this.state.validationError.find((error) => error.property === "email")}
-										/>
-										<TextField
-											name="cell_phone_number"
-											placeholder="Numéro de téléphone"
-											validationError={this.state.validationError.find(
-												(error) => error.property === "cell_phone_number",
-											)}
-										/>
-										<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">Associer au dossier</Button>
-										</div>
-									</div>
-								)}
-							</Form>
-						</>
-					)}
-				</div>
-			</DefaultNotaryDashboard>
-		);
-	}
+				try {
+					const customer: Customer = await Customers.getInstance().post({
+						contact: values,
+					});
+					if (!customer.uid) return;
+					customersToLink?.push({ uid: customer.uid } as Partial<Customer>);
+				} catch (backError) {
+					if (!Array.isArray(backError)) return;
+					setValidationError(backError as ValidationError[]);
+					return;
+				}
+			}
 
-	public override async componentDidMount() {
+			if (customersToLink) {
+				const body = OfficeFolder.hydrate<OfficeFolder>({
+					customers: customersToLink.map((customer) => {
+						return Customer.hydrate<Customer>(customer);
+					}),
+				});
+				await Folders.getInstance().put(folderUid as string, body);
+				router.push(`/folders/${folderUid}`);
+			}
+		},
+		[existingCustomers, folderUid, router, selectedCustomers, selectedOption],
+	);
+
+	const getFolderPreSelectedCustomers = useCallback(
+		async (folderUid: string): Promise<IOption[] | undefined> => {
+			const query = {
+				q: {
+					customers: {
+						include: {
+							contact: true,
+						},
+					},
+				},
+			};
+			let preExistingCustomers: IOption[] = [];
+			try {
+				const folder = await Folders.getInstance().getByUid(folderUid, query);
+				preExistingCustomers = folder.customers!.map((customer) => {
+					return {
+						label: customer.contact?.first_name + " " + customer.contact?.last_name,
+						id: customer.uid ?? "",
+					};
+				});
+			} catch (error) {
+				router.push(Module.getInstance().get().modules.pages["404"].props.path);
+				return;
+			}
+			return preExistingCustomers;
+		},
+		[router],
+	);
+
+	const loadCustomers = useCallback(async () => {
 		const query = {};
 		const availableCustomers = await Customers.getInstance().get(query);
-		let preExistingCustomers: IOption[] | undefined = await this.getFolderPreSelectedCustomers(this.props.selectedFolderUid);
+		let preExistingCustomers: IOption[] | undefined = await getFolderPreSelectedCustomers(folderUid as string);
 		const existingCustomers = preExistingCustomers ?? [];
 
 		existingCustomers.forEach((customer) => {
@@ -167,37 +141,14 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 			selectedOption = ESelectedOption.NEW_CUSTOMER;
 		}
 
-		this.setState({ availableCustomers, existingCustomers, isLoaded: true, selectedOption });
-	}
+		setAvailableCustomers(availableCustomers);
+		setExistingCustomers(existingCustomers);
+		setIsLoaded(true);
+		setSelectedOption(selectedOption);
+	}, [folderUid, getFolderPreSelectedCustomers]);
 
-	private async getFolderPreSelectedCustomers(folderUid: string): Promise<IOption[] | undefined> {
-		const query = {
-			q: {
-				customers: {
-					include: {
-						contact: true,
-					},
-				},
-			},
-		};
-		let preExistingCustomers: IOption[] = [];
-		try {
-			const folder = await Folders.getInstance().getByUid(folderUid, query);
-			preExistingCustomers = folder.customers!.map((customer) => {
-				return {
-					label: customer.contact?.first_name + " " + customer.contact?.last_name,
-					id: customer.uid ?? "",
-				};
-			});
-		} catch (error) {
-			this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path);
-			return;
-		}
-		return preExistingCustomers;
-	}
-
-	private getSelectedOptions(): IOption[] {
-		let options = this.state.availableCustomers?.map((customer) => {
+	const getSelectedOptions = useCallback((): IOption[] => {
+		let options = availableCustomers?.map((customer) => {
 			return {
 				label: customer.contact?.first_name + " " + customer.contact?.last_name,
 				id: customer.uid ?? "",
@@ -205,85 +156,111 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 		});
 		if (!options) options = [];
 		return options;
-	}
+	}, [availableCustomers]);
 
-	private onMutiSelectChange(selectedCustomers: IOption[] | null): void {
-		selectedCustomers && this.setState({ selectedCustomers });
-	}
+	const onMutiSelectChange = (selectedCustomers: IOption[] | null): void => {
+		if (!selectedCustomers) return;
+		setSelectedCustomers(selectedCustomers);
+	};
 
-	private onExistingClientSelected(): void {
-		this.setState({ selectedOption: ESelectedOption.EXISTING_CUSTOMER });
-	}
+	const onExistingClientSelected = (): void => setSelectedOption(ESelectedOption.EXISTING_CUSTOMER);
+	const onNewClientSelected = (): void => setSelectedOption(ESelectedOption.NEW_CUSTOMER);
 
-	private onNewClientSelected(): void {
-		this.setState({ selectedOption: ESelectedOption.NEW_CUSTOMER });
-	}
+	useEffect(() => {
+		loadCustomers();
+	}, [loadCustomers]);
 
-	private async onFormSubmit(
-		e: React.FormEvent<HTMLFormElement> | null,
-		values: {
-			[key: string]: any;
-		},
-	) {
-		values["civility"] = ECivility.MALE; // TODO: should maybe be deleted later or added to the form
+	const selectOptions: IOption[] = getSelectedOptions();
 
-		const allCustomersToLink = this.state.selectedCustomers.concat(this.state.existingCustomers);
-		let customersToLink: Partial<Customer>[] = allCustomersToLink.map((customer) => {
-			return Customer.hydrate<Customer>({ uid: customer.id as string });
-		}) as Partial<Customer>[];
+	const backwardPath = Module.getInstance()
+		.get()
+		.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid as string);
+	return (
+		<DefaultDoubleSidePage title={"Ajouter client(s)"} image={backgroundImage} showHeader>
+			<div className={classes["root"]}>
+				<div className={classes["back-arrow"]}>
+					<BackArrow url={backwardPath} />
+				</div>
+				<Typography typo={ETypo.TITLE_H1}>Associer un ou plusieurs client(s)</Typography>
+				{isLoaded && (
+					<>
+						<div className={classes["radiobox-container"]}>
+							{availableCustomers.length !== 0 && (
+								<RadioBox
+									name="client"
+									onChange={onExistingClientSelected}
+									checked={selectedOption === "existing_customer"}
+									value={"existing client"}>
+									<Typography typo={ETypo.TEXT_LG_REGULAR}>Client existant</Typography>
+								</RadioBox>
+							)}
 
-		if (this.state.selectedOption === "new_customer") {
-			try {
-				// remove every space from the phone number
-				values["cell_phone_number"] = values["cell_phone_number"].replace(/\s/g, "");
-				values["cell_phone_number"] = values["cell_phone_number"].replace(/\./g, "");
-				if (values["cell_phone_number"] && values["cell_phone_number"].length === 10) {
-					// get the first digit of the phone number
-					const firstDigit = values["cell_phone_number"].charAt(0);
-					// if the first digit is a 0 replace it by +33
-					if (firstDigit === "0") {
-						values["cell_phone_number"] = "+33" + values["cell_phone_number"].substring(1);
-					}
-				}
-				const contactToCreate = Contact.hydrate<Customer>(values);
-				await contactToCreate.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false });
-			} catch (validationErrors) {
-				this.setState({
-					validationError: validationErrors as ValidationError[],
-				});
-				return;
-			}
+							<RadioBox
+								name="client"
+								onChange={onNewClientSelected}
+								checked={selectedOption === "new_customer"}
+								value={"new client"}>
+								<Typography typo={ETypo.TEXT_LG_REGULAR}>Nouveau client</Typography>
+							</RadioBox>
+						</div>
 
-			try {
-				const customer: Customer = await Customers.getInstance().post({
-					contact: values,
-				});
-				if (!customer.uid) return;
-				customersToLink?.push({ uid: customer.uid } as Partial<Customer>);
-			} catch (backError) {
-				if (!Array.isArray(backError)) return;
-				this.setState({
-					validationError: backError as ValidationError[],
-				});
-				return;
-			}
-		}
+						<Form className={classes["form"]} onSubmit={onFormSubmit}>
+							{selectedOption === "existing_customer" && (
+								<div className={classes["existing-client"]}>
+									<AutocompleteMultiSelect
+										label="Clients"
+										options={selectOptions}
+										selectedOptions={selectedCustomers}
+										onSelectionChange={onMutiSelectChange}
+									/>
 
-		if (customersToLink) {
-			const body = OfficeFolder.hydrate<OfficeFolder>({
-				customers: customersToLink.map((customer) => {
-					return Customer.hydrate<Customer>(customer);
-				}),
-			});
-			await Folders.getInstance().put(this.props.selectedFolderUid, body);
-			this.props.router.push(`/folders/${this.props.selectedFolderUid}`);
-		}
-	}
-}
-
-export default function AddClientToFolder(props: IProps) {
-	const router = useRouter();
-	let { folderUid } = router.query;
-	folderUid = folderUid as string;
-	return <AddClientToFolderClass {...props} selectedFolderUid={folderUid} router={router} />;
+									<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">Associer au dossier</Button>
+									</div>
+								</div>
+							)}
+
+							{selectedOption === "new_customer" && (
+								<div className={classes["new-client"]}>
+									<TextField
+										name="last_name"
+										placeholder="Nom"
+										validationError={validationError.find((error) => error.property === "last_name")}
+									/>
+									<TextField
+										name="first_name"
+										placeholder="Prénom"
+										validationError={validationError.find((error) => error.property === "first_name")}
+									/>
+									<TextField
+										name="email"
+										placeholder="E-mail"
+										validationError={validationError.find((error) => error.property === "email")}
+									/>
+									<TextField
+										name="cell_phone_number"
+										placeholder="Numéro de téléphone"
+										validationError={validationError.find((error) => error.property === "cell_phone_number")}
+									/>
+									<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">Associer au dossier</Button>
+									</div>
+								</div>
+							)}
+						</Form>
+					</>
+				)}
+			</div>
+		</DefaultDoubleSidePage>
+	);
 }