reminder modal + historique des relances des documents

This commit is contained in:
Max S 2024-08-21 12:03:41 +02:00
parent c66108164c
commit d40c075289
12 changed files with 186 additions and 8 deletions

View File

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

View File

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

View File

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

View File

@ -0,0 +1,5 @@
@import "@Themes/constants.scss";
.root {
}

View File

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

View File

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

View File

@ -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 ?? ""} />

View File

@ -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": {

View File

@ -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": {

View File

@ -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": {

View File

@ -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": {

View File

@ -0,0 +1,5 @@
import DocumentsReminderHistory from "@Front/Components/Layouts/Folder/DocumentsReminderHistory";
export default function Route() {
return <DocumentsReminderHistory />;
}