✨ UpdateClient refacto

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

@@ -1,57 +1,37 @@
 @import "@Themes/constants.scss";
 
 .root {
+	margin: 24px auto;
+	width: 566px;
+
+	@media (max-width: $screen-m) {
+		width: 474px;
+	}
+
+	@media (max-width: $screen-s) {
+		width: 100%;
+		padding: var(--spacing-md, 16px);
+	}
+
 	display: flex;
 	flex-direction: column;
-	min-height: 100%;
+	gap: var(--spacing-xl, 32px);
-	align-items: flex-start;
-	width: fit-content;
-
-	.back-arrow {
-		margin-bottom: 24px;
-	}
 
 	.form {
-		width: 100%;
+		display: flex;
-
+		flex-direction: column;
-		.content {
+		gap: var(--spacing-md, 16px);
-			margin-top: 32px;
-
-
-			>:not(:last-child) {
-				margin-bottom: 24px;
-			}
-
 	}
 
 	.button-container {
+		display: flex;
+		gap: var(--spacing-md, 16px);
+
+		@media (max-width: $screen-xs) {
+			button {
 				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/UpdateClient/index.tsx

@@ -1,135 +1,154 @@
+import backgroundImage from "@Assets/images/background_refonte.svg";
 import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers";
 import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import Form from "@Front/Components/DesignSystem/Form";
+import Form, { IBaseField } from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
+import Modal from "@Front/Components/DesignSystem/Modal";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
-import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import Module from "@Front/Config/Module";
-import { Contact, Customer, OfficeFolder } from "le-coffre-resources/dist/Notary";
+import useOpenable from "@Front/Hooks/useOpenable";
-import Link from "next/link";
-import { NextRouter, useRouter } from "next/router";
-import { ChangeEvent } from "react";
-
-import BasePage from "../../Base";
-import classes from "./classes.module.scss";
-import { Address } from "le-coffre-resources/dist/Customer";
 import { ValidationError } from "class-validator";
+import { Address } from "le-coffre-resources/dist/Customer";
+import { Contact, Customer } from "le-coffre-resources/dist/Notary";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useCallback, useEffect, useState } from "react";
 
-type IProps = {};
+import classes from "./classes.module.scss";
 
-type IPropsClass = IProps & {
+export default function UpdateClient() {
-	selectedFolderUid: string;
+	const router = useRouter();
-	router: NextRouter;
+	const { folderUid, customerUid } = router.query;
-	customerUid: string;
-};
-type IState = {
-	selectedFolder: OfficeFolder | null;
-	inputNameValue: string;
-	inputFirstNameValue: string;
-	inputEmailValue: string;
-	inputPhoneNumberValue: string;
-	isOpenLeavingModal: boolean;
-	doesInputHaveValues: boolean;
-	inputBirthdate: Date | null;
-	inputAddress: string;
-	folder: OfficeFolder | null;
-	customer: Customer | null;
-	validationError: ValidationError[];
-};
-class UpdateClientClass extends BasePage<IPropsClass, IState> {
-	constructor(props: IPropsClass) {
-		super(props);
-		this.state = {
-			selectedFolder: null,
-			inputNameValue: "",
-			inputFirstNameValue: "",
-			inputEmailValue: "",
-			inputPhoneNumberValue: "",
-			isOpenLeavingModal: false,
-			doesInputHaveValues: false,
-			inputBirthdate: null,
-			inputAddress: "",
-			folder: null,
-			customer: null,
-			validationError: [],
-		};
-		this.onSelectedFolder = this.onSelectedFolder.bind(this);
-		this.onChangeNameInput = this.onChangeNameInput.bind(this);
-		this.onChangeFirstNameInput = this.onChangeFirstNameInput.bind(this);
-		this.onChangeEmailInput = this.onChangeEmailInput.bind(this);
-		this.onChangePhoneNumberInput = this.onChangePhoneNumberInput.bind(this);
-		this.openLeavingModal = this.openLeavingModal.bind(this);
-		this.closeLeavingModal = this.closeLeavingModal.bind(this);
-		this.leavePage = this.leavePage.bind(this);
-		this.onChangeBirthDateInput = this.onChangeBirthDateInput.bind(this);
-		this.onChangeAddressInput = this.onChangeAddressInput.bind(this);
-		this.onFormSubmit = this.onFormSubmit.bind(this);
-	}
 
-	private backwardPath = Module.getInstance()
+	const [doesInputHasChanged, setDoesInputHasChanged] = useState<boolean>(false);
+	const [customer, setCustomer] = useState<Customer | null>(null);
+	const [validationError, setValidationError] = useState<ValidationError[]>([]);
+
+	const { isOpen, open, close } = useOpenable();
+
+	const backwardPath = Module.getInstance()
 		.get()
-		.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
+		.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid as string);
+
+	useEffect(() => {
+		const fetchCustomer = async () => {
+			try {
+				const customerData = await Customers.getInstance().getByUid(customerUid as string, {
+					contact: {
+						include: {
+							address: true,
+						},
+					},
+				});
+				if (customerData) {
+					setCustomer(customerData);
+				}
+			} catch (error) {
+				console.error("Failed to fetch customer", error);
+			}
+		};
+		fetchCustomer();
+	}, [customerUid]);
+
+	const onFormSubmit = useCallback(
+		async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
+			if (!values["cell_phone_number"]) return;
+
+			let phoneNumber = values["cell_phone_number"].replace(/\s/g, "").replace(/\./g, "");
+			if (phoneNumber.length === 10 && phoneNumber.startsWith("0")) {
+				phoneNumber = "+33" + phoneNumber.substring(1);
+			}
+			const contact = Contact.hydrate<Contact>({
+				first_name: values["first_name"],
+				last_name: values["last_name"],
+				email: values["email"],
+				cell_phone_number: phoneNumber,
+				birthdate: values["birthdate"] === "" ? null : new Date(values["birthdate"]!),
+				civility: "-",
+				address: values["address"] ? Address.hydrate<Address>({ address: values["address"], city: "-", zip_code: 0 }) : undefined,
+			});
+
+			try {
+				await contact.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false });
+				await Customers.getInstance().put(customerUid as string, { contact });
+				router.push(backwardPath);
+			} catch (validationErrors) {
+				if (Array.isArray(validationErrors)) {
+					setValidationError(validationErrors as ValidationError[]);
+				}
+			}
+		},
+		[backwardPath, customerUid, router],
+	);
+
+	const leavePage = useCallback(() => {
+		router.push(backwardPath);
+	}, [backwardPath, router]);
+
+	const onFieldChange = useCallback((name: string, field: IBaseField) => {
+		if (field.props.value !== field.props.defaultValue) {
+			setDoesInputHasChanged(true);
+		} else {
+			setDoesInputHasChanged(false);
+		}
+	}, []);
 
-	public override render(): JSX.Element {
 	return (
-			<DefaultNotaryDashboard title={"Ajouter client(s)"}>
+		<DefaultDoubleSidePage title={"Ajouter client(s)"} image={backgroundImage}>
 			<div className={classes["root"]}>
 				<div className={classes["back-arrow"]}>
-						<BackArrow url={this.backwardPath} />
+					<BackArrow url={backwardPath} />
 				</div>
 				<Typography typo={ETypo.TITLE_H1}>Modifier les informations du client</Typography>
-					<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
+				<Form className={classes["form"]} onSubmit={onFormSubmit} onFieldChange={onFieldChange}>
-						<div className={classes["content"]}>
 					<TextField
 						name="first_name"
 						placeholder="Prénom"
-								onChange={this.onChangeNameInput}
+						label="Prénom"
-								defaultValue={this.state.customer?.contact?.first_name}
+						defaultValue={customer?.contact?.first_name}
-								validationError={this.state.validationError.find((error) => error.property === "first_name")}
+						validationError={validationError.find((error) => error.property === "first_name")}
 					/>
 					<TextField
 						name="last_name"
 						placeholder="Nom"
-								onChange={this.onChangeFirstNameInput}
+						label="Nom"
-								defaultValue={this.state.customer?.contact?.last_name}
+						defaultValue={customer?.contact?.last_name}
-								validationError={this.state.validationError.find((error) => error.property === "last_name")}
+						validationError={validationError.find((error) => error.property === "last_name")}
 					/>
 					<TextField
 						name="email"
 						placeholder="E-mail"
-								onChange={this.onChangeEmailInput}
+						label="E-mail"
-								defaultValue={this.state.customer?.contact?.email}
+						defaultValue={customer?.contact?.email}
-								validationError={this.state.validationError.find((error) => error.property === "email")}
+						validationError={validationError.find((error) => error.property === "email")}
 					/>
 					<TextField
 						name="cell_phone_number"
 						placeholder="Numéro de téléphone"
-								onChange={this.onChangePhoneNumberInput}
+						label="Numéro de téléphone"
-								defaultValue={this.state.customer?.contact?.cell_phone_number ?? ""}
+						defaultValue={customer?.contact?.cell_phone_number ?? ""}
-								validationError={this.state.validationError.find((error) => error.property === "cell_phone_number")}
+						validationError={validationError.find((error) => error.property === "cell_phone_number")}
 					/>
 					<TextField
 						name="birthdate"
 						placeholder="Date de naissance"
+						label="Date de naissance (facultatif)"
 						required={false}
-								onChange={this.onChangeBirthDateInput}
+						defaultValue={customer?.contact?.birthdate?.toString() ?? ""}
-								defaultValue={this.state.customer?.contact?.birthdate?.toString() ?? ""}
+						validationError={validationError.find((error) => error.property === "birthdate")}
-								validationError={this.state.validationError.find((error) => error.property === "birthdate")}
 					/>
 					<TextField
 						name="address"
 						placeholder="Adresse"
+						label="Adresse (facultatif)"
 						required={false}
-								onChange={this.onChangeAddressInput}
+						defaultValue={customer?.contact?.address?.address ?? ""}
-								defaultValue={this.state.customer?.contact?.address?.address ?? ""}
 					/>
-						</div>
-
 					<div className={classes["button-container"]}>
-							{!this.doesInputsHaveValues() ? (
+						{!doesInputHasChanged ? (
-								<Link href={this.backwardPath} className={classes["cancel-button"]}>
+							<Link href={backwardPath} className={classes["cancel-button"]}>
 								<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
 									Annuler
 								</Button>
@@ -138,145 +157,23 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 							<Button
 								variant={EButtonVariant.PRIMARY}
 								styletype={EButtonstyletype.OUTLINED}
-									onClick={this.openLeavingModal}
+								onClick={open}
 								className={classes["cancel-button"]}>
 								Annuler
 							</Button>
 						)}
-							<Button type="submit">Enregistrer</Button>
+						<Button type="submit">Enregistrer les modifications</Button>
 					</div>
 				</Form>
-					<Confirm
+				<Modal
-						isOpen={this.state.isOpenLeavingModal}
+					title={"Quitter sans enregistrer ?"}
-						onClose={this.closeLeavingModal}
+					isOpen={isOpen}
-						closeBtn
+					onClose={close}
-						header={"Êtes-vous sur de vouloir quitter sans enregistrer ?"}
+					firstButton={{ children: "Annuler", onClick: close }}
-						cancelText={"Annuler"}
+					secondButton={{ children: "Oui, quitter sans enregistrer", onClick: leavePage }}>
-						confirmText={"Quitter"}
+					Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
-						onAccept={this.leavePage}>
+				</Modal>
-						Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.{" "}
-					</Confirm>
 			</div>
-			</DefaultNotaryDashboard>
+		</DefaultDoubleSidePage>
 	);
 }
-
-	public override async componentDidMount() {
-		const customer = await Customers.getInstance().getByUid(this.props.customerUid, {
-			contact: {
-				include: {
-					address: true,
-				},
-			},
-		});
-		if (customer) {
-			this.setState({
-				customer,
-			});
-		}
-	}
-
-	private async onFormSubmit(
-		e: React.FormEvent<HTMLFormElement> | null,
-		values: {
-			[key: string]: string;
-		},
-	) {
-		if (!values["cell_phone_number"]) return;
-		// 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 contact = Contact.hydrate<Contact>({
-			first_name: values["first_name"],
-			last_name: values["last_name"],
-			email: values["email"],
-			cell_phone_number: values["cell_phone_number"],
-			birthdate: values["birthdate"] === "" ? null : new Date(values["birthdate"]!),
-			civility: "-",
-			address: values["address"] ? Address.hydrate<Address>({ address: values["address"], city: "-", zip_code: 0 }) : undefined,
-		});
-
-		try {
-			await contact.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false });
-		} catch (validationErrors) {
-			this.setState({
-				validationError: validationErrors as ValidationError[],
-			});
-			return;
-		}
-
-		try {
-			await Customers.getInstance().put(this.props.customerUid, { contact });
-			this.props.router.push(this.backwardPath);
-		} catch (backError) {
-			if (!Array.isArray(backError)) return;
-			this.setState({
-				validationError: backError as ValidationError[],
-			});
-			return;
-		}
-	}
-
-	private leavePage() {
-		this.props.router.push(this.backwardPath);
-	}
-
-	private openLeavingModal(): void {
-		this.setState({ isOpenLeavingModal: true });
-	}
-
-	private closeLeavingModal(): void {
-		this.setState({ isOpenLeavingModal: false });
-	}
-
-	private onChangeBirthDateInput(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
-		this.setState({ inputBirthdate: new Date(event.target.value) });
-	}
-
-	private onChangeAddressInput(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
-		this.setState({ inputAddress: event.target.value });
-	}
-
-	private onChangeNameInput(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
-		this.setState({ inputNameValue: event.target.value });
-	}
-
-	private onChangeFirstNameInput(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
-		this.setState({ inputFirstNameValue: event.target.value });
-	}
-	private onChangeEmailInput(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
-		this.setState({ inputEmailValue: event.target.value });
-	}
-	private onChangePhoneNumberInput(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
-		this.setState({ inputPhoneNumberValue: event.target.value });
-	}
-
-	private onSelectedFolder(folder: OfficeFolder): void {
-		this.setState({ selectedFolder: folder });
-	}
-
-	private doesInputsHaveValues(): boolean {
-		const doesInputsHaveValues: boolean =
-			this.state.inputNameValue !== "" ||
-			this.state.inputFirstNameValue !== "" ||
-			this.state.inputEmailValue !== "" ||
-			this.state.inputPhoneNumberValue !== "";
-		return doesInputsHaveValues;
-	}
-}
-
-export default function UpdateClient(props: IProps) {
-	const router = useRouter();
-	let { folderUid, customerUid } = router.query;
-	folderUid = folderUid as string;
-	customerUid = customerUid as string;
-	return <UpdateClientClass {...props} router={router} selectedFolderUid={folderUid} customerUid={customerUid} />;
-}