Merge branch 'dev' of github.com:smart-chain-fr/leCoffre-front into dev

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/index.tsx

@@ -10,11 +10,13 @@ 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) {
@@ -22,7 +24,12 @@ export default function ClientBox(props: IProps) {
 
 	const { isOpen, open, close } = useOpenable();
 
-	console.log("customer", customer);
+	const handleDelete = useCallback(
+		(customerUid: string) => {
+			props.onDelete(customerUid);
+		},
+		[props],
+	);
 
 	return (
 		<div className={classes["root"]}>
@@ -76,7 +83,7 @@ export default function ClientBox(props: IProps) {
 						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/classes.module.scss

@@ -10,6 +10,10 @@
 		gap: var(--spacing-md, 16px);
 		justify-content: space-between;
 		align-items: center;
+
+		.tabs {
+			width: calc(100% - 210px);
+		}
 	}
 
 	.content {

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,10 +48,26 @@ 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"]}>
-				{tabs && <Tabs<ICustomer> tabs={tabs} onSelect={setCustomer} />}
+				<div className={classes["tabs"]}>{tabs && <Tabs<ICustomer> tabs={tabs} onSelect={setCustomer} />}</div>
+
 				{anchorStatus === AnchorStatus.NOT_ANCHORED && (
 					<Link
 						href={Module.getInstance()
@@ -68,7 +85,7 @@ export default function ClientView(props: IProps) {
 			</div>
 			<div className={classes["content"]}>
 				<div className={classes["client-box"]}>
-					<ClientBox customer={customer} anchorStatus={anchorStatus} folderUid={folder.uid} />
+					<ClientBox customer={customer} anchorStatus={anchorStatus} folderUid={folder.uid} onDelete={handleClientDelete} />
 					{anchorStatus === AnchorStatus.NOT_ANCHORED && (
 						<Link
 							href={Module.getInstance()
@@ -81,7 +98,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

@@ -78,9 +78,9 @@ export default function InformationSection(props: IProps) {
 				</div>
 				<div>
 					<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_700}>
-						Notre dossier
+						Note du 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>

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

@@ -1,14 +1,16 @@
 import backgroundImage from "@Assets/images/background_refonte_reverse.svg";
 import LogoIcon from "@Assets/logo_small_blue.svg";
+import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
 import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Module from "@Front/Config/Module";
+import JwtService from "@Front/Services/JwtService/JwtService";
 import { DocumentIcon } from "@heroicons/react/24/outline";
-import { OfficeFolder } from "le-coffre-resources/dist/Notary";
+import User, { OfficeFolder } from "le-coffre-resources/dist/Notary";
 import Image from "next/image";
 import Link from "next/link";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
 
@@ -16,10 +18,25 @@ export default function Folder() {
 	const [_folder, setFolder] = useState<OfficeFolder | null>(null);
 	const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true);
 
+	const [activeUser, setActiveUser] = useState<User | null>();
 	const onSelectedFolder = useCallback((folder: OfficeFolder): void => {
 		setFolder(folder);
 	}, []);
 
+	useEffect(() => {
+		const decodedJwt = JwtService.getInstance().decodeJwt();
+		if (!decodedJwt) return;
+		Users.getInstance()
+			.getByUid(decodedJwt.userId, {
+				q: {
+					contact: true,
+				},
+			})
+			.then((user) => {
+				setActiveUser(user);
+			});
+	}, []);
+
 	return (
 		<DefaultNotaryDashboard
 			title={"Dossier"}
@@ -31,9 +48,17 @@ export default function Folder() {
 					<div className={classes["title-container"]}>
 						<Image src={LogoIcon} alt="logo" />
 
-						<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
+						{activeUser && activeUser.contact && (
-							Bonjour John, bienvenue sur LeCoffre.io
+							<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
-						</Typography>
+								Bonjour {activeUser.contact.first_name}, bienvenue sur LeCoffre.io
+							</Typography>
+						)}
+						{!activeUser ||
+							(!activeUser.contact && (
+								<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
+									Bonjour, bienvenue sur LeCoffre.io
+								</Typography>
+							))}
 						<Typography typo={ETypo.TEXT_LG_REGULAR}>
 							Commencez par créer votre{" "}
 							<Typography typo={ETypo.TEXT_LG_SEMIBOLD} type="span">