From 62b51b4047acc2527d3d188e53b208be4abdde13 Mon Sep 17 00:00:00 2001 From: Max S Date: Tue, 27 Aug 2024 12:15:41 +0200 Subject: [PATCH] :hammer: email reminder --- .../DesignSystem/CheckBox/index.tsx | 4 +- .../Form/SelectFieldOld/index.tsx | 12 ++-- .../Layouts/Folder/AskDocuments/index.tsx | 8 +-- .../ReminderModal/classes.module.scss | 4 +- .../EmailReminder/ReminderModal/index.tsx | 63 ++++++++++++++++++- .../ClientView/EmailReminder/index.tsx | 29 +++++---- .../ClientView/classes.module.scss | 2 +- .../FolderInformation/ClientView/index.tsx | 6 +- .../Folder/UpdateFolderMetadata/index.tsx | 4 +- .../UpdateFolderMetadata/index.tsx | 6 +- 10 files changed, 105 insertions(+), 33 deletions(-) diff --git a/src/front/Components/DesignSystem/CheckBox/index.tsx b/src/front/Components/DesignSystem/CheckBox/index.tsx index 4ee3c5ba..baab77db 100644 --- a/src/front/Components/DesignSystem/CheckBox/index.tsx +++ b/src/front/Components/DesignSystem/CheckBox/index.tsx @@ -4,11 +4,11 @@ import Tooltip from "../ToolTip"; import Typography, { ETypo, ETypoColor } from "../Typography"; import classes from "./classes.module.scss"; import classNames from "classnames"; -import { IOptionOld } from "../Form/SelectFieldOld"; +import { IOption } from "../Form/SelectFieldOld"; type IProps = { name?: string; - option: IOptionOld; + option: IOption; toolTip?: string; onChange?: (e: React.ChangeEvent) => void; checked: boolean; diff --git a/src/front/Components/DesignSystem/Form/SelectFieldOld/index.tsx b/src/front/Components/DesignSystem/Form/SelectFieldOld/index.tsx index ba077302..55418357 100644 --- a/src/front/Components/DesignSystem/Form/SelectFieldOld/index.tsx +++ b/src/front/Components/DesignSystem/Form/SelectFieldOld/index.tsx @@ -10,9 +10,9 @@ import classes from "./classes.module.scss"; import { NextRouter, useRouter } from "next/router"; type IProps = { - selectedOption?: IOptionOld; - onChange?: (selectedOption: IOptionOld) => void; - options: IOptionOld[]; + selectedOption?: IOption; + onChange?: (selectedOption: IOption) => void; + options: IOption[]; hasBorderRightCollapsed?: boolean; placeholder?: string; className?: string; @@ -21,7 +21,7 @@ type IProps = { errors?: ValidationError; }; -export type IOptionOld = { +export type IOption = { value: unknown; label: string; icon?: ReactNode; @@ -32,7 +32,7 @@ type IState = { isOpen: boolean; listWidth: number; listHeight: number; - selectedOption: IOptionOld | null; + selectedOption: IOption | null; errors: ValidationError | null; }; @@ -187,7 +187,7 @@ class SelectFieldClass extends React.Component { }); } - private onSelect(option: IOptionOld, e: React.MouseEvent) { + private onSelect(option: IOption, e: React.MouseEvent) { if (this.props.disabled) return; this.props.onChange && this.props.onChange(option); this.setState({ diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx index 2951fde8..8a5f1dde 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx @@ -13,14 +13,14 @@ import React, { useCallback, useEffect, useState } from "react"; import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; import classes from "./classes.module.scss"; import ParameterDocuments from "./ParameterDocuments"; -import { IOptionOld } from "@Front/Components/DesignSystem/Form/SelectFieldOld"; +import { IOption } from "@Front/Components/DesignSystem/Form/SelectFieldOld"; import backgroundImage from "@Assets/images/background_refonte.svg"; export default function AskDocuments() { const router = useRouter(); let { folderUid, customerUid } = router.query; const [isCreateDocumentModalVisible, setIsCreateDocumentModalVisible] = useState(false); - const [documentTypes, setDocumentTypes] = useState([]); + const [documentTypes, setDocumentTypes] = useState([]); const [folder, setFolder] = useState(null); const closeModal = () => setIsCreateDocumentModalVisible(false); @@ -62,7 +62,7 @@ export default function AskDocuments() { ); const getAvailableDocuments = useCallback( - async (folder: OfficeFolder): Promise => { + async (folder: OfficeFolder): Promise => { // Getting already asked documents UIDs in an array const userDocumentTypesUids = folder .documents!.filter((document) => document.depositor!.uid! === customerUid!) @@ -81,7 +81,7 @@ export default function AskDocuments() { if (!documentTypes) return []; // Else, return an array document types formatted as IOPtions - const documentTypesOptions: IOptionOld[] = documentTypes.map((documentType) => { + const documentTypesOptions: IOption[] = documentTypes.map((documentType) => { return { label: documentType!.name!, value: documentType!.uid!, 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 index 97b000ca..44bdf503 100644 --- 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 @@ -1,5 +1,7 @@ @import "@Themes/constants.scss"; .root { - + display: flex; + flex-direction: column; + gap: var(--spacing-md, 16px); } 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 index a932de41..5eaa0ab1 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx +++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx @@ -1,7 +1,10 @@ +import CheckBox from "@Front/Components/DesignSystem/CheckBox"; +import { IOption } from "@Front/Components/DesignSystem/Form/SelectFieldOld"; import Modal from "@Front/Components/DesignSystem/Modal"; +import Separator, { ESeperatorColor } from "@Front/Components/DesignSystem/Separator"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import Customer from "le-coffre-resources/dist/Customer"; -import React, { useCallback } from "react"; +import React, { useCallback, useMemo, useState } from "react"; import classes from "./classes.module.scss"; @@ -14,11 +17,52 @@ type IProps = { export default function ReminderModal(props: IProps) { const { isOpen, onClose, onRemindSuccess, customer } = props; + const [selectedOptions, setSelectedOptions] = useState([]); + const [isAllSelected, setIsAllSelected] = useState(false); const onRemind = useCallback(() => { + console.log("selectedOptions", selectedOptions); onRemindSuccess(); onClose?.(); - }, [onClose, onRemindSuccess]); + }, [onClose, onRemindSuccess, selectedOptions]); + + const documentsOptions: IOption[] = useMemo( + () => + customer.documents?.map((document) => { + return { + label: document.document_type?.name ?? "", + value: document.document_type?.uid ?? "", + }; + }) ?? [], + [customer], + ); + + const handleOnChange = useCallback( + (e: React.ChangeEvent) => { + const { value, checked } = e.target; + const optionSelected = documentsOptions.find((option) => option.value === value); + if (checked && optionSelected) { + setSelectedOptions((prev) => [...prev, optionSelected]); + } else { + setSelectedOptions((prev) => prev.filter((option) => option.value !== value)); + } + }, + [documentsOptions], + ); + + const handleSelectAll = useCallback( + (e: React.ChangeEvent) => { + const { checked } = e.target; + if (checked) { + setSelectedOptions(documentsOptions); + setIsAllSelected(true); + } else { + setSelectedOptions([]); + setIsAllSelected(false); + } + }, + [documentsOptions], + ); return ( Sélectionnez le(s) document(s) pour lequel vous souhaitez relancer le client. + + + {documentsOptions.map((option) => ( + + ))} ); 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 f3812518..ed20215c 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/index.tsx +++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/index.tsx @@ -13,10 +13,12 @@ import Link from "next/link"; type IProps = { customer: Customer; + doesCustomerHaveDocument: boolean; + isAnchored: boolean; }; export default function EmailReminder(props: IProps) { - const { customer } = props; + const { customer, doesCustomerHaveDocument, isAnchored } = props; const { isOpen, open, close } = useOpenable(); const router = useRouter(); @@ -24,14 +26,17 @@ export default function EmailReminder(props: IProps) { return (
- + {!isAnchored && ( + + )}
} variant={EIconButtonVariant.NEUTRAL} />
+ {/* TODO: mettre la date de la dernière relance */} - Dernière relance: todo + Dernière relance: - + {/* TODO: mettre le nombre de relance */} - Nombre de relance: todo + Nombre de relance: -
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss index e3002c6c..531ab7bc 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss +++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss @@ -35,7 +35,7 @@ $mobile-breakpoint: 664px; .button-container { display: flex; flex-direction: column; - gap: var(--spacing-lg, 24px); + gap: var(--spacing-md, 16px); } @media screen and (max-width: $screen-s) { diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx index dc4a9361..389bc528 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx +++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx @@ -115,7 +115,11 @@ export default function ClientView(props: IProps) { )} - +
diff --git a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx index 38299062..8a23300d 100644 --- a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx +++ b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx @@ -1,7 +1,7 @@ import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Form from "@Front/Components/DesignSystem/Form"; -import Select, { IOptionOld } from "@Front/Components/DesignSystem/Form/SelectFieldOld"; +import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectFieldOld"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import BackArrow from "@Front/Components/Elements/BackArrow"; @@ -81,7 +81,7 @@ export default function UpdateFolderMetadata() { const deedOption = { label: selectedFolder?.deed?.deed_type?.name, value: selectedFolder?.deed?.deed_type?.uid, - } as IOptionOld; + } as IOption; const openingDate = new Date(selectedFolder?.created_at ?? ""); if (!selectedFolder?.created_at) return <>; const defaultValue = openingDate.toISOString().split("T")[0]; diff --git a/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx b/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx index fc3708bb..8a0fd2e6 100644 --- a/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx +++ b/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx @@ -1,6 +1,6 @@ import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Form from "@Front/Components/DesignSystem/Form"; -import Select, { IOptionOld } from "@Front/Components/DesignSystem/Form/SelectFieldOld"; +import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectFieldOld"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import BackArrow from "@Front/Components/Elements/BackArrow"; @@ -18,7 +18,7 @@ type IProps = { }; type IState = { selectedFolder: OfficeFolder | null; - selectedOption?: IOptionOld; + selectedOption?: IOption; }; class UpdateFolderMetadataClass extends BasePage { constructor(props: IProps) { @@ -74,7 +74,7 @@ class UpdateFolderMetadataClass extends BasePage { ); } - private onSelectedOption(option: IOptionOld) { + private onSelectedOption(option: IOption) { this.setState({ selectedOption: option, });