Merge branch 'dev' into staging

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

@@ -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(
+	const handleDelete = useCallback(() => {
-		() => onDeleteSuccess(customerUid),
+		onDelete(props.customerUid);
-		// Documents.getInstance()
+	}, [onDelete, props.customerUid]);
-		// 	.delete(documentUid)
-		// 	.then(() => onDeleteSuccess(documentUid))
-		// 	.then(onClose)
-		// 	.catch((error) => console.warn(error)),
-		[customerUid, onDeleteSuccess],
-	);
 
 	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.

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

@@ -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;
+	}
 }

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

@@ -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 && (
-					<IconButton variant={EIconButtonVariant.NEUTRAL} icon={<PencilSquareIcon />} />
+					<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}>
+				<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_950}>
-					{customer.contact?.phone_number}
+					{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>

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

@@ -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>
 	);

src/front/Components/Layouts/Folder/FolderInformation/InformationSection/index.tsx

@@ -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>