From d40c075289e271e36e2939eeec3618c9a88ba464 Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Wed, 21 Aug 2024 12:03:41 +0200
Subject: [PATCH] :sparkles: reminder modal + historique des relances des
 documents

---
 .../classes.module.scss                       | 23 ++++++++
 .../Folder/DocumentsReminderHistory/index.tsx | 53 +++++++++++++++++++
 .../ClientView/ClientBox/index.tsx            |  5 +-
 .../ReminderModal/classes.module.scss         |  5 ++
 .../EmailReminder/ReminderModal/index.tsx     | 37 +++++++++++++
 .../ClientView/EmailReminder/index.tsx        | 34 ++++++++++--
 .../FolderInformation/ClientView/index.tsx    |  4 +-
 src/front/Config/Module/development.json      |  7 +++
 src/front/Config/Module/preprod.json          |  7 +++
 src/front/Config/Module/production.json       |  7 +++
 src/front/Config/Module/staging.json          |  7 +++
 .../documents-reminder-history/index.tsx      |  5 ++
 12 files changed, 186 insertions(+), 8 deletions(-)
 create mode 100644 src/front/Components/Layouts/Folder/DocumentsReminderHistory/classes.module.scss
 create mode 100644 src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx
 create mode 100644 src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/classes.module.scss
 create mode 100644 src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx
 create mode 100644 src/pages/folders/[folderUid]/documents-reminder-history/index.tsx

diff --git a/src/front/Components/Layouts/Folder/DocumentsReminderHistory/classes.module.scss b/src/front/Components/Layouts/Folder/DocumentsReminderHistory/classes.module.scss
new file mode 100644
index 00000000..62f8849f
--- /dev/null
+++ b/src/front/Components/Layouts/Folder/DocumentsReminderHistory/classes.module.scss
@@ -0,0 +1,23 @@
+@import "@Themes/constants.scss";
+
+.root {
+	padding: var(--spacing-3) var(--spacing-15);
+	max-width: 1156px;
+
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--spacing-xl, 32px);
+
+	.table{	
+		width: 100%;
+	}
+
+	@media screen and (max-width: $screen-m) {
+		padding: var(--spacing-3);
+	}
+
+	@media screen and (max-width: $screen-s) {
+		padding: var(--spacing-2);
+	}
+}
diff --git a/src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx b/src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx
new file mode 100644
index 00000000..f946f00c
--- /dev/null
+++ b/src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx
@@ -0,0 +1,53 @@
+import Table from "@Front/Components/DesignSystem/Table";
+import { IHead } from "@Front/Components/DesignSystem/Table/MuiTable";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import BackArrow from "@Front/Components/Elements/BackArrow";
+import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
+import Module from "@Front/Config/Module";
+import { useRouter } from "next/router";
+import React from "react";
+
+import classes from "./classes.module.scss";
+
+type IProps = {};
+
+const header: readonly IHead[] = [
+	{
+		key: "remindedAt",
+		title: "Date de relance",
+	},
+	{
+		key: "customer",
+		title: "Client",
+	},
+	{
+		key: "document_type",
+		title: "Type de document",
+	},
+	{
+		key: "statut",
+		title: "Satut",
+	},
+];
+
+export default function DocumentsReminderHistory(props: IProps) {
+	const router = useRouter();
+	let { folderUid } = router.query;
+
+	return (
+		<DefaultTemplate title={"Historique des relances de documents"} isPadding={false}>
+			<div className={classes["root"]}>
+				<BackArrow
+					text="Retour"
+					url={Module.getInstance()
+						.get()
+						.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid as string)}
+				/>
+				<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_PRIMARY}>
+					Historique des relances de documents
+				</Typography>
+				<Table className={classes["table"]} header={header} rows={[{ key: "1", name: "todo", sentAt: "todo", actions: "todo" }]} />
+			</div>
+		</DefaultTemplate>
+	);
+}
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/index.tsx
index 882aaaaf..44c86b1c 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/index.tsx
@@ -6,16 +6,15 @@ import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Ty
 import Module from "@Front/Config/Module";
 import useOpenable from "@Front/Hooks/useOpenable";
 import { PencilSquareIcon, TrashIcon, UsersIcon } from "@heroicons/react/24/outline";
-import { Note } from "le-coffre-resources/dist/Customer";
+import Customer, { Note } from "le-coffre-resources/dist/Customer";
 import { useCallback } from "react";
 
-import { ICustomer } from "..";
 import { AnchorStatus } from "../..";
 import classes from "./classes.module.scss";
 import DeleteCustomerModal from "./DeleteCustomerModal";
 
 type IProps = {
-	customer: ICustomer;
+	customer: Customer;
 	anchorStatus: AnchorStatus;
 	folderUid: string | undefined;
 	customerNote: Note | null;
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/classes.module.scss b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/classes.module.scss
new file mode 100644
index 00000000..97b000ca
--- /dev/null
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/classes.module.scss
@@ -0,0 +1,5 @@
+@import "@Themes/constants.scss";
+
+.root {
+
+}
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx
new file mode 100644
index 00000000..a932de41
--- /dev/null
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx
@@ -0,0 +1,37 @@
+import Modal from "@Front/Components/DesignSystem/Modal";
+import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
+import Customer from "le-coffre-resources/dist/Customer";
+import React, { useCallback } from "react";
+
+import classes from "./classes.module.scss";
+
+type IProps = {
+	isOpen: boolean;
+	onClose?: () => void;
+	onRemindSuccess: () => void;
+	customer: Customer;
+};
+
+export default function ReminderModal(props: IProps) {
+	const { isOpen, onClose, onRemindSuccess, customer } = props;
+
+	const onRemind = useCallback(() => {
+		onRemindSuccess();
+		onClose?.();
+	}, [onClose, onRemindSuccess]);
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			onClose={onClose}
+			title={`Relancer votre client ${customer.contact?.last_name}`}
+			firstButton={{ children: "Annuler", onClick: onClose }}
+			secondButton={{ children: "Relancer", onClick: onRemind }}>
+			<div className={classes["root"]}>
+				<Typography typo={ETypo.TEXT_MD_LIGHT}>
+					Sélectionnez le(s) document(s) pour lequel vous souhaitez relancer le client.
+				</Typography>
+			</div>
+		</Modal>
+	);
+}
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 1d0c1808..f3812518 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/index.tsx
@@ -1,18 +1,45 @@
 import Button, { 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";
 import { ClockIcon, EnvelopeIcon } from "@heroicons/react/24/outline";
+import Customer from "le-coffre-resources/dist/Customer";
 
 import classes from "./classes.module.scss";
+import ReminderModal from "./ReminderModal";
+import { useRouter } from "next/router";
+import Module from "@Front/Config/Module";
+import Link from "next/link";
+
+type IProps = {
+	customer: Customer;
+};
+
+export default function EmailReminder(props: IProps) {
+	const { customer } = props;
+	const { isOpen, open, close } = useOpenable();
+	const router = useRouter();
+
+	let { folderUid } = router.query;
 
-export default function EmailReminder() {
 	return (
 		<div className={classes["root"]}>
-			<Button rightIcon={<EnvelopeIcon />} variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED} fullwidth>
+			<Button
+				onClick={open}
+				rightIcon={<EnvelopeIcon />}
+				variant={EButtonVariant.PRIMARY}
+				styletype={EButtonstyletype.OUTLINED}
+				fullwidth>
 				Relancer par mail
 			</Button>
 			<div className={classes["reminder-info"]}>
-				<IconButton icon={<ClockIcon />} variant={EIconButtonVariant.NEUTRAL} />
+				<Link
+					title={"Voir l'historique des relances"}
+					href={Module.getInstance()
+						.get()
+						.modules.pages.Folder.pages.DocumentsReminderHistory.props.path.replace("[folderUid]", folderUid as string)}>
+					<IconButton icon={<ClockIcon />} variant={EIconButtonVariant.NEUTRAL} />
+				</Link>
 				<div className={classes["info"]}>
 					<Typography typo={ETypo.TEXT_XS_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
 						Dernière relance: todo
@@ -22,6 +49,7 @@ export default function EmailReminder() {
 					</Typography>
 				</div>
 			</div>
+			<ReminderModal isOpen={isOpen} onRemindSuccess={() => {}} onClose={close} customer={customer} />
 		</div>
 	);
 }
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
index e1c92d9f..444d2e83 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
@@ -8,7 +8,7 @@ import { AnchorStatus } from "..";
 import classes from "./classes.module.scss";
 import ClientBox from "./ClientBox";
 import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import { DocumentIcon, EnvelopeIcon, UserPlusIcon } from "@heroicons/react/24/outline";
+import { DocumentIcon, UserPlusIcon } from "@heroicons/react/24/outline";
 import Module from "@Front/Config/Module";
 import Link from "next/link";
 import NoDocument from "./NoDocument";
@@ -115,7 +115,7 @@ export default function ClientView(props: IProps) {
 							</Button>
 						</Link>
 					)}
-					<EmailReminder />
+					<EmailReminder customer={customer} />
 				</div>
 				{doesCustomerHaveDocument ? (
 					<DocumentTables documents={customer.documents ?? []} folderUid={folder?.uid ?? ""} />
diff --git a/src/front/Config/Module/development.json b/src/front/Config/Module/development.json
index 89703255..e6628aad 100644
--- a/src/front/Config/Module/development.json
+++ b/src/front/Config/Module/development.json
@@ -61,6 +61,13 @@
 							"labelKey": "folder_information"
 						}
 					},
+					"DocumentsReminderHistory": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/documents-reminder-history",
+							"labelKey": "documents_reminder_history"
+						}
+					},
 					"CreateFolder": {
 						"enabled": true,
 						"props": {
diff --git a/src/front/Config/Module/preprod.json b/src/front/Config/Module/preprod.json
index 89703255..e6628aad 100644
--- a/src/front/Config/Module/preprod.json
+++ b/src/front/Config/Module/preprod.json
@@ -61,6 +61,13 @@
 							"labelKey": "folder_information"
 						}
 					},
+					"DocumentsReminderHistory": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/documents-reminder-history",
+							"labelKey": "documents_reminder_history"
+						}
+					},
 					"CreateFolder": {
 						"enabled": true,
 						"props": {
diff --git a/src/front/Config/Module/production.json b/src/front/Config/Module/production.json
index 89703255..e6628aad 100644
--- a/src/front/Config/Module/production.json
+++ b/src/front/Config/Module/production.json
@@ -61,6 +61,13 @@
 							"labelKey": "folder_information"
 						}
 					},
+					"DocumentsReminderHistory": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/documents-reminder-history",
+							"labelKey": "documents_reminder_history"
+						}
+					},
 					"CreateFolder": {
 						"enabled": true,
 						"props": {
diff --git a/src/front/Config/Module/staging.json b/src/front/Config/Module/staging.json
index 89703255..e6628aad 100644
--- a/src/front/Config/Module/staging.json
+++ b/src/front/Config/Module/staging.json
@@ -61,6 +61,13 @@
 							"labelKey": "folder_information"
 						}
 					},
+					"DocumentsReminderHistory": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/documents-reminder-history",
+							"labelKey": "documents_reminder_history"
+						}
+					},
 					"CreateFolder": {
 						"enabled": true,
 						"props": {
diff --git a/src/pages/folders/[folderUid]/documents-reminder-history/index.tsx b/src/pages/folders/[folderUid]/documents-reminder-history/index.tsx
new file mode 100644
index 00000000..5672d61d
--- /dev/null
+++ b/src/pages/folders/[folderUid]/documents-reminder-history/index.tsx
@@ -0,0 +1,5 @@
+import DocumentsReminderHistory from "@Front/Components/Layouts/Folder/DocumentsReminderHistory";
+
+export default function Route() {
+	return <DocumentsReminderHistory />;
+}