diff --git a/src/front/Components/DesignSystem/Table/MuiTable/index.tsx b/src/front/Components/DesignSystem/Table/MuiTable/index.tsx index c7fb8e0e..6e5a360b 100644 --- a/src/front/Components/DesignSystem/Table/MuiTable/index.tsx +++ b/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)" }}> - + {props.header.map((column) => ( diff --git a/src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx b/src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx index 47d7177d..3331e2ff 100644 --- a/src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx +++ b/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(), - customer: `${reminder.document?.depositor?.contact?.first_name} ${reminder.document?.depositor?.contact?.last_name}`, + remindedAt: { sx: { width: 220 }, content: formatDateWithHours(reminder.reminder_date) }, + 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 ; } } + +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", + }); +} diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/index.tsx index 9992aa4e..5412078f 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/index.tsx +++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/index.tsx @@ -95,8 +95,7 @@ export default function EmailReminder(props: IProps) {
- Dernière relance:{" "} - {reminders && remindersLength > 0 ? new Date(reminders[0]!.reminder_date!).toLocaleDateString() : "-"} + Dernière relance: {reminders && remindersLength > 0 ? formatDateWithHours(reminders[0]!.reminder_date) : "-"} Nombre de relance: {remindersLength} @@ -107,3 +106,12 @@ export default function EmailReminder(props: IProps) {
); } + +function formatDateWithHours(date: Date | null) { + if (!date) return "-"; + return new Date(date).toLocaleDateString("fr-FR", { + year: "numeric", + month: "2-digit", + day: "2-digit", + }); +} diff --git a/src/front/Components/Layouts/Folder/UpdateClient/classes.module.scss b/src/front/Components/Layouts/Folder/UpdateClient/classes.module.scss index cea59680..efd93bb8 100644 --- a/src/front/Components/Layouts/Folder/UpdateClient/classes.module.scss +++ b/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%; - align-items: flex-start; - width: fit-content; - - .back-arrow { - margin-bottom: 24px; - } + gap: var(--spacing-xl, 32px); .form { - width: 100%; + display: flex; + flex-direction: column; + gap: var(--spacing-md, 16px); + } - .content { - margin-top: 32px; + .button-container { + display: flex; + gap: var(--spacing-md, 16px); - - >: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%; - } + @media (max-width: $screen-xs) { + button { + width: 100%; } + flex-direction: column-reverse; } } -} \ No newline at end of file +} diff --git a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx index 92095538..413a6823 100644 --- a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx +++ b/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 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 useOpenable from "@Front/Hooks/useOpenable"; 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 & { - selectedFolderUid: string; - router: NextRouter; - 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 { - 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); - } +export default function UpdateClient() { + const router = useRouter(); + const { folderUid, customerUid } = router.query; - private backwardPath = Module.getInstance() + const [doesInputHasChanged, setDoesInputHasChanged] = useState(false); + const [customer, setCustomer] = useState(null); + const [validationError, setValidationError] = useState([]); + + 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 { - return ( - -
-
- -
- Modifier les informations du client -
-
- error.property === "first_name")} - /> - error.property === "last_name")} - /> - error.property === "email")} - /> - error.property === "cell_phone_number")} - /> - error.property === "birthdate")} - /> - -
+ 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]); -
- {!this.doesInputsHaveValues() ? ( - - - - ) : ( - - )} - -
- - - Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.{" "} - -
- - ); - } - - 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 | 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({ - 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: 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) { - this.setState({ inputBirthdate: new Date(event.target.value) }); - } - - private onChangeAddressInput(event: ChangeEvent) { - this.setState({ inputAddress: event.target.value }); - } - - private onChangeNameInput(event: ChangeEvent) { - this.setState({ inputNameValue: event.target.value }); - } - - private onChangeFirstNameInput(event: ChangeEvent) { - this.setState({ inputFirstNameValue: event.target.value }); - } - private onChangeEmailInput(event: ChangeEvent) { - this.setState({ inputEmailValue: event.target.value }); - } - private onChangePhoneNumberInput(event: ChangeEvent) { - 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 ; + + ) : ( + + )} + + + + + Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées. + + + + ); }