Merge branch 'dev' into staging

src/front/Components/DesignSystem/Table/MuiTable/index.tsx

@@ -55,7 +55,13 @@ export default function MuiTable(props: IProps) {
 				className={classes["root"]}
 				sx={{ maxHeight: "80vh", overflowY: "auto", overflowX: "hidden", backgroundColor: "var(--table-background-default)" }}>
 				<Table aria-label="simple table" sx={{ border: "0" }}>
-					<TableHead sx={{ position: "sticky", top: "0", borderBottom: "1px solid var(--table-header-border)" }}>
+					<TableHead
+						sx={{
+							position: "sticky",
+							top: "0",
+							borderBottom: "1px solid var(--table-header-border)",
+							backgroundColor: "var(--table-background-default)",
+						}}>
 						<TableRow>
 							{props.header.map((column) => (
 								<TableCell key={column.key} align={"left"} sx={{ border: 0, padding: "4px 8px" }}>

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

@@ -145,10 +145,13 @@ function buildRows(reminders: DocumentReminder[] | null): IRowProps[] {
 	if (!reminders) return [];
 	return reminders.map((reminder) => ({
 		key: reminder.uid ?? "",
-		remindedAt: new Date(reminder.reminder_date!).toLocaleDateString(),
+		remindedAt: { sx: { width: 220 }, content: formatDateWithHours(reminder.reminder_date) },
-		customer: `${reminder.document?.depositor?.contact?.first_name} ${reminder.document?.depositor?.contact?.last_name}`,
+		customer: {
+			sx: { width: 220 },
+			content: `${reminder.document?.depositor?.contact?.first_name} ${reminder.document?.depositor?.contact?.last_name}`,
+		},
 		document_type: reminder.document?.document_type?.name,
-		statut: getTag(reminder.document?.document_status as EDocumentStatus),
+		statut: { sx: { width: 220 }, content: getTag(reminder.document?.document_status as EDocumentStatus) },
 	}));
 }
 
@@ -166,3 +169,14 @@ function getTag(status: EDocumentStatus) {
 			return <Tag label={tradDocumentStatus[status]} color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} />;
 	}
 }
+
+function formatDateWithHours(date: Date | null) {
+	if (!date) return "-";
+	return new Date(date).toLocaleDateString("fr-FR", {
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		hour: "2-digit",
+		minute: "2-digit",
+	});
+}

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

@@ -95,8 +95,7 @@ export default function EmailReminder(props: IProps) {
 				</Link>
 				<div className={classes["info"]}>
 					<Typography typo={ETypo.TEXT_XS_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
-						Dernière relance:{" "}
+						Dernière relance: {reminders && remindersLength > 0 ? formatDateWithHours(reminders[0]!.reminder_date) : "-"}
-						{reminders && remindersLength > 0 ? new Date(reminders[0]!.reminder_date!).toLocaleDateString() : "-"}
 					</Typography>
 					<Typography typo={ETypo.TEXT_XS_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
 						Nombre de relance: {remindersLength}
@@ -107,3 +106,12 @@ export default function EmailReminder(props: IProps) {
 		</div>
 	);
 }
+
+function formatDateWithHours(date: Date | null) {
+	if (!date) return "-";
+	return new Date(date).toLocaleDateString("fr-FR", {
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+	});
+}

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;
+		gap: var(--spacing-md, 16px);
+	}
 
-		.content {
+	.button-container {
-			margin-top: 32px;
+		display: flex;
+		gap: var(--spacing-md, 16px);
 
-
+		@media (max-width: $screen-xs) {
-			>:not(:last-child) {
+			button {
-				margin-bottom: 24px;
+				width: 100%;
-			}
-
-		}
-
-		.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%;
-				}
 			}
+			flex-direction: column-reverse;
 		}
 	}
-}
+}

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

@@ -1,282 +1,179 @@
+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);
 
-	public override render(): JSX.Element {
+	useEffect(() => {
-		return (
+		const fetchCustomer = async () => {
-			<DefaultNotaryDashboard title={"Ajouter client(s)"}>
+			try {
-				<div className={classes["root"]}>
+				const customerData = await Customers.getInstance().getByUid(customerUid as string, {
-					<div className={classes["back-arrow"]}>
+					contact: {
-						<BackArrow url={this.backwardPath} />
+						include: {
-					</div>
+							address: true,
-					<Typography typo={ETypo.TITLE_H1}>Modifier les informations du client</Typography>
+						},
-					<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
+					},
-						<div className={classes["content"]}>
+				});
-							<TextField
+				if (customerData) {
-								name="first_name"
+					setCustomer(customerData);
-								placeholder="Prénom"
+				}
-								onChange={this.onChangeNameInput}
+			} catch (error) {
-								defaultValue={this.state.customer?.contact?.first_name}
+				console.error("Failed to fetch customer", error);
-								validationError={this.state.validationError.find((error) => error.property === "first_name")}
+			}
-							/>
+		};
-							<TextField
+		fetchCustomer();
-								name="last_name"
+	}, [customerUid]);
-								placeholder="Nom"
-								onChange={this.onChangeFirstNameInput}
-								defaultValue={this.state.customer?.contact?.last_name}
-								validationError={this.state.validationError.find((error) => error.property === "last_name")}
-							/>
-							<TextField
-								name="email"
-								placeholder="E-mail"
-								onChange={this.onChangeEmailInput}
-								defaultValue={this.state.customer?.contact?.email}
-								validationError={this.state.validationError.find((error) => error.property === "email")}
-							/>
-							<TextField
-								name="cell_phone_number"
-								placeholder="Numéro de téléphone"
-								onChange={this.onChangePhoneNumberInput}
-								defaultValue={this.state.customer?.contact?.cell_phone_number ?? ""}
-								validationError={this.state.validationError.find((error) => error.property === "cell_phone_number")}
-							/>
-							<TextField
-								name="birthdate"
-								placeholder="Date de naissance"
-								required={false}
-								onChange={this.onChangeBirthDateInput}
-								defaultValue={this.state.customer?.contact?.birthdate?.toString() ?? ""}
-								validationError={this.state.validationError.find((error) => error.property === "birthdate")}
-							/>
-							<TextField
-								name="address"
-								placeholder="Adresse"
-								required={false}
-								onChange={this.onChangeAddressInput}
-								defaultValue={this.state.customer?.contact?.address?.address ?? ""}
-							/>
-						</div>
 
-						<div className={classes["button-container"]}>
+	const onFormSubmit = useCallback(
-							{!this.doesInputsHaveValues() ? (
+		async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
-								<Link href={this.backwardPath} className={classes["cancel-button"]}>
+			if (!values["cell_phone_number"]) return;
-									<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
+
-										Annuler
+			let phoneNumber = values["cell_phone_number"].replace(/\s/g, "").replace(/\./g, "");
-									</Button>
+			if (phoneNumber.length === 10 && phoneNumber.startsWith("0")) {
-								</Link>
+				phoneNumber = "+33" + phoneNumber.substring(1);
-							) : (
+			}
-								<Button
+			const contact = Contact.hydrate<Contact>({
-									variant={EButtonVariant.PRIMARY}
+				first_name: values["first_name"],
-									styletype={EButtonstyletype.OUTLINED}
+				last_name: values["last_name"],
-									onClick={this.openLeavingModal}
+				email: values["email"],
-									className={classes["cancel-button"]}>
+				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);
+		}
+	}, []);
+
+	return (
+		<DefaultDoubleSidePage title={"Ajouter client(s)"} image={backgroundImage}>
+			<div className={classes["root"]}>
+				<div className={classes["back-arrow"]}>
+					<BackArrow url={backwardPath} />
+				</div>
+				<Typography typo={ETypo.TITLE_H1}>Modifier les informations du client</Typography>
+				<Form className={classes["form"]} onSubmit={onFormSubmit} onFieldChange={onFieldChange}>
+					<TextField
+						name="first_name"
+						placeholder="Prénom"
+						label="Prénom"
+						defaultValue={customer?.contact?.first_name}
+						validationError={validationError.find((error) => error.property === "first_name")}
+					/>
+					<TextField
+						name="last_name"
+						placeholder="Nom"
+						label="Nom"
+						defaultValue={customer?.contact?.last_name}
+						validationError={validationError.find((error) => error.property === "last_name")}
+					/>
+					<TextField
+						name="email"
+						placeholder="E-mail"
+						label="E-mail"
+						defaultValue={customer?.contact?.email}
+						validationError={validationError.find((error) => error.property === "email")}
+					/>
+					<TextField
+						name="cell_phone_number"
+						placeholder="Numéro de téléphone"
+						label="Numéro de téléphone"
+						defaultValue={customer?.contact?.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}
+						defaultValue={customer?.contact?.birthdate?.toString() ?? ""}
+						validationError={validationError.find((error) => error.property === "birthdate")}
+					/>
+					<TextField
+						name="address"
+						placeholder="Adresse"
+						label="Adresse (facultatif)"
+						required={false}
+						defaultValue={customer?.contact?.address?.address ?? ""}
+					/>
+					<div className={classes["button-container"]}>
+						{!doesInputHasChanged ? (
+							<Link href={backwardPath} className={classes["cancel-button"]}>
+								<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
 									Annuler
 								</Button>
-							)}
+							</Link>
-							<Button type="submit">Enregistrer</Button>
+						) : (
-						</div>
+							<Button
-					</Form>
+								variant={EButtonVariant.PRIMARY}
-					<Confirm
+								styletype={EButtonstyletype.OUTLINED}
-						isOpen={this.state.isOpenLeavingModal}
+								onClick={open}
-						onClose={this.closeLeavingModal}
+								className={classes["cancel-button"]}>
-						closeBtn
+								Annuler
-						header={"Êtes-vous sur de vouloir quitter sans enregistrer ?"}
+							</Button>
-						cancelText={"Annuler"}
+						)}
-						confirmText={"Quitter"}
+						<Button type="submit">Enregistrer les modifications</Button>
-						onAccept={this.leavePage}>
+					</div>
-						Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.{" "}
+				</Form>
-					</Confirm>
+				<Modal
-				</div>
+					title={"Quitter sans enregistrer ?"}
-			</DefaultNotaryDashboard>
+					isOpen={isOpen}
-		);
+					onClose={close}
-	}
+					firstButton={{ children: "Annuler", onClick: close }}
-
+					secondButton={{ children: "Oui, quitter sans enregistrer", onClick: leavePage }}>
-	public override async componentDidMount() {
+					Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
-		const customer = await Customers.getInstance().getByUid(this.props.customerUid, {
+				</Modal>
-			contact: {
+			</div>
-				include: {
+		</DefaultDoubleSidePage>
-					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} />;
 }