4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-23 10:56:55 +02:00
commit 93db4ce057
5 changed files with 59 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/DeleteCustomerModal/index.tsx
View File

@ -7,21 +7,15 @@ type IProps = {
isOpen: boolean;
onClose?: () => void;
onDeleteSuccess: (uid: string) => void;
onDelete: (customerUid: string) => void;
};
export default function DeleteCustomerModal(props: IProps) {
const { isOpen, onClose, customerUid, onDeleteSuccess } = props;
const { isOpen, onClose, onDelete } = props;
const onDelete = useCallback(
() => onDeleteSuccess(customerUid),
// Documents.getInstance()
// .delete(documentUid)
// .then(() => onDeleteSuccess(documentUid))
// .then(onClose)
// .catch((error) => console.warn(error)),
[customerUid, onDeleteSuccess],
);
const handleDelete = useCallback(() => {
onDelete(props.customerUid);
}, [onDelete, props.customerUid]);
return (
<Modal
@ -29,7 +23,7 @@ export default function DeleteCustomerModal(props: IProps) {
onClose={onClose}
title={"Êtes-vous sûr de vouloir supprimer ce client du dossier ?"}
firstButton={{ children: "Annuler", onClick: onClose }}
secondButton={{ children: "Supprimer le client", onClick: onDelete }}>
secondButton={{ children: "Supprimer le client", onClick: handleDelete }}>
<Typography typo={ETypo.TEXT_MD_light}>
Cette action retirera le client de ce dossier. Vous ne pourrez plus récupérer les informations associées à ce client dans ce
dossier une fois supprimées.

6
src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/classes.module.scss
View File

@ -9,10 +9,14 @@
background: var(--primary-weak-higlight, #e5eefa);
min-width: 300px;
.header{
.header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.delete-button {
margin: auto;
}
}

35
src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/index.tsx
View File

@ -1,4 +1,4 @@
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import useOpenable from "@Front/Hooks/useOpenable";
@ -8,33 +8,51 @@ import { ICustomer } from "..";
import { AnchorStatus } from "../..";
import classes from "./classes.module.scss";
import DeleteCustomerModal from "./DeleteCustomerModal";
import Link from "next/link";
import Module from "@Front/Config/Module";
import { useCallback } from "react";
type IProps = {
customer: ICustomer;
anchorStatus: AnchorStatus;
folderUid: string | undefined;
onDelete: (customerUid: string) => void;
};
export default function ClientBox(props: IProps) {
const { customer, anchorStatus } = props;
const { customer, anchorStatus, folderUid } = props;
const { isOpen, open, close } = useOpenable();
const handleDelete = useCallback(
(customerUid: string) => {
props.onDelete(customerUid);
},
[props],
);
return (
<div className={classes["root"]}>
<div className={classes["header"]}>
<Typography typo={ETypo.TEXT_LG_BOLD} color={ETypoColor.COLOR_PRIMARY_500}>
{customer.contact?.last_name}
{customer.contact?.first_name} {customer.contact?.last_name}
</Typography>
{anchorStatus === AnchorStatus.NOT_ANCHORED && (
<Link
href={Module.getInstance()
.get()
.modules.pages.Folder.pages.EditClient.props.path.replace("[folderUid]", folderUid ?? "")
.replace("[customerUid]", customer.uid ?? "")}>
<IconButton variant={EIconButtonVariant.NEUTRAL} icon={<PencilSquareIcon />} />
</Link>
)}
</div>
<div>
<Typography typo={ETypo.TEXT_LG_BOLD} color={ETypoColor.COLOR_NEUTRAL_700}>
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_700}>
Numéro de téléphone
</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_PRIMARY_500}>
{customer.contact?.phone_number}
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_950}>
{customer.contact?.cell_phone_number ?? customer.contact?.phone_number ?? "_"}
</Typography>
</div>
<div>
@ -42,7 +60,7 @@ export default function ClientBox(props: IProps) {
E-mail
</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_950}>
{customer.contact?.email}
{customer.contact?.email ?? "_"}
</Typography>
</div>
<div>
@ -58,13 +76,14 @@ export default function ClientBox(props: IProps) {
<>
<Button
className={classes["delete-button"]}
size={EButtonSize.SM}
variant={EButtonVariant.ERROR}
styletype={EButtonstyletype.TEXT}
rightIcon={<TrashIcon />}
onClick={open}>
Supprimer le client
</Button>
<DeleteCustomerModal isOpen={isOpen} onClose={close} customerUid={customer.uid ?? ""} onDeleteSuccess={() => {}} />
<DeleteCustomerModal isOpen={isOpen} onClose={close} customerUid={customer.uid ?? ""} onDelete={handleDelete} />
</>
)}
</div>

22
src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
View File

@ -2,7 +2,7 @@ import Tabs from "@Front/Components/Elements/Tabs";
import Customer from "le-coffre-resources/dist/Customer";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { useMemo, useState } from "react";
import { useCallback, useMemo, useState } from "react";
import { AnchorStatus } from "..";
import classes from "./classes.module.scss";
@ -13,6 +13,7 @@ import Module from "@Front/Config/Module";
import Link from "next/link";
import NoDocument from "./NoDocument";
import DocumentTables from "./DocumentTables";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
type IProps = {
folder: OfficeFolder;
@ -47,6 +48,21 @@ export default function ClientView(props: IProps) {
const doesCustomerHaveDocument = useMemo(() => customer.documents && customer.documents.length > 0, [customer]);
const handleClientDelete = useCallback(
(customerUid: string) => {
if (!folder.uid) return;
Folders.getInstance().put(
folder.uid,
OfficeFolder.hydrate<OfficeFolder>({
...folder,
customers: folder.customers?.filter((customer) => customer.uid !== customerUid),
}),
);
window.location.reload();
},
[folder],
);
return (
<section className={classes["root"]}>
<div className={classes["tab-container"]}>
@ -68,7 +84,7 @@ export default function ClientView(props: IProps) {
</div>
<div className={classes["content"]}>
<div className={classes["client-box"]}>
<ClientBox customer={customer} anchorStatus={anchorStatus} />
<ClientBox customer={customer} anchorStatus={anchorStatus} folderUid={folder.uid} onDelete={handleClientDelete} />
{anchorStatus === AnchorStatus.NOT_ANCHORED && (
<Link
href={Module.getInstance()
@ -81,7 +97,7 @@ export default function ClientView(props: IProps) {
</Link>
)}
</div>
{doesCustomerHaveDocument ? <DocumentTables documents={customer.documents ?? []}/> : <NoDocument />}
{doesCustomerHaveDocument ? <DocumentTables documents={customer.documents ?? []} /> : <NoDocument />}
</div>
</section>
);

2
src/front/Components/Layouts/Folder/FolderInformation/InformationSection/index.tsx
View File

@ -80,7 +80,7 @@ export default function InformationSection(props: IProps) {
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_700}>
Notre dossier
</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>Travaux de rénovation en cours. </Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR}>{folder?.description}</Typography>
</div>
</div>
</section>