4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-23 10:37:29 +02:00
commit 3985e4671c
33 changed files with 807 additions and 1344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/front/Components/DesignSystem/Alert/classes.module.scss Normal file
View File

@ -0,0 +1,86 @@
@import "@Themes/constants.scss";
.root {
width: fit-content;
display: inline-flex;
padding: var(--spacing-2, 16px);
align-items: center;
gap: var(--spacing-lg, 24px);
border-radius: var(--alerts-radius, 0px);
border: 1px solid var(--alerts-info-border);
background: var(--alerts-info-background);
.content {
display: flex;
flex-direction: column;
gap: var(--spacing-md, 16px);
.text-container {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.button-container {
display: flex;
gap: var(--spacing-md, 16px);
}
}
.icon {
display: flex;
padding: var(--spacing-1, 8px);
align-items: center;
border-radius: var(--alerts-badge-radius, 360px);
border: 1px solid var(--alerts-badge-border, rgba(0, 0, 0, 0));
background: var(--alerts-badge-background, #fff);
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
svg {
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
stroke: var(--alerts-badge-contrast-info);
}
}
&.error {
border-color: var(--alerts-error-border);
background: var(--alerts-error-background);
.icon svg {
stroke: var(--alerts-badge-contrast-error);
}
}
&.warning {
border-color: var(--alerts-warning-border);
background: var(--alerts-warning-background);
.icon svg {
stroke: var(--alerts-badge-contrast-warning);
}
}
&.success {
border-color: var(--alerts-success-border);
background: var(--alerts-success-background);
.icon svg {
stroke: var(--alerts-badge-contrast-success);
}
}
&.neutral {
border-color: var(--alerts-neutral-border);
background: var(--alerts-neutral-background);
.icon svg {
stroke: var(--alerts-badge-contrast-neutral);
}
}
}

80
src/front/Components/DesignSystem/Alert/index.tsx Normal file
View File

@ -0,0 +1,80 @@
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import React from "react";
import { InformationCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
import classes from "./classes.module.scss";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant, IButtonProps } from "../Button";
import classNames from "classnames";
import IconButton from "../IconButton";
import useOpenable from "@Front/Hooks/useOpenable";
type IProps = {
variant: EAlertVariant;
title: string;
description: string;
icon?: React.ReactNode;
firstButton?: IButtonProps;
secondButton?: IButtonProps;
closeButton?: boolean;
};
export enum EAlertVariant {
INFO = "info",
SUCCESS = "success",
WARNING = "warning",
ERROR = "error",
NEUTRAL = "neutral",
}
const variantButtonMap: Record<EAlertVariant, EButtonVariant> = {
[EAlertVariant.INFO]: EButtonVariant.PRIMARY,
[EAlertVariant.SUCCESS]: EButtonVariant.SUCCESS,
[EAlertVariant.WARNING]: EButtonVariant.WARNING,
[EAlertVariant.ERROR]: EButtonVariant.ERROR,
[EAlertVariant.NEUTRAL]: EButtonVariant.NEUTRAL,
};
export default function Alert(props: IProps) {
const { isOpen, close } = useOpenable({ defaultOpen: true });
const { variant = EAlertVariant.INFO, title, description, firstButton, secondButton, closeButton, icon } = props;
if (!isOpen) return null;
return (
<div className={classNames(classes["root"], classes[variant])}>
<span className={classes["icon"]}>{icon ?? <InformationCircleIcon />}</span>
<div className={classes["content"]}>
<div className={classes["text-container"]}>
<Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_NEUTRAL_950}>
{title}
</Typography>
<Typography typo={ETypo.TEXT_MD_light} color={ETypoColor.COLOR_NEUTRAL_700}>
{description}
</Typography>
</div>
<div className={classes["button-container"]}>
{firstButton && (
<Button
{...firstButton}
size={firstButton.size ?? EButtonSize.MD}
variant={firstButton.variant ?? variantButtonMap[variant]}
styletype={firstButton.styletype ?? EButtonstyletype.OUTLINED}>
{firstButton.children}
</Button>
)}
{secondButton && (
<Button
{...secondButton}
size={secondButton.size ?? EButtonSize.MD}
variant={secondButton.variant ?? variantButtonMap[variant]}
styletype={secondButton.styletype ?? EButtonstyletype.OUTLINED}>
{secondButton.children}
</Button>
)}
</div>
</div>
{closeButton && <IconButton onClick={close} icon={<XMarkIcon />} />}
</div>
);
}

4
src/front/Components/DesignSystem/Button/index.tsx
View File

@ -25,7 +25,7 @@ export enum EButtonstyletype {
TEXT = "text",
}
type IProps = {
export type IButtonProps = {
onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
children?: React.ReactNode;
variant?: EButtonVariant;
@ -40,7 +40,7 @@ type IProps = {
className?: string;
};
export default function Button(props: IProps) {
export default function Button(props: IButtonProps) {
let {
variant = EButtonVariant.PRIMARY,
size = EButtonSize.LG,

5
src/front/Components/DesignSystem/CircleProgress/index.tsx
View File

@ -1,11 +1,11 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";
type IProps = {
percentage: number;
};
export default function CircleProgress(props: IProps) {
const { percentage } = props;
@ -27,13 +27,14 @@ export default function CircleProgress(props: IProps) {
}, [percentage]);
useEffect(() => {
setAnimatedProgress(0); // Reset progress
requestRef.current = requestAnimationFrame(animate);
return () => {
if (requestRef.current) {
cancelAnimationFrame(requestRef.current);
}
};
}, [animate, percentage]);
}, [percentage, animate]);
const radius = 11;
const circumference = 2 * Math.PI * radius;

2
src/front/Components/DesignSystem/Modal/classes.module.scss
View File

@ -12,7 +12,7 @@
.content {
position: fixed;
max-width: 600px;
max-height: 85vh;
max-height: 75vh;
border-radius: var(--modal-radius, 0px);
background: var(--modal-background, #fff);
box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);

46
src/front/Components/DesignSystem/Modal/index.tsx
View File

@ -1,11 +1,11 @@
import classNames from "classnames";
import classes from "./classes.module.scss";
import Button, { EButtonstyletype, EButtonVariant } from "../Button";
import React from "react";
import Typography, { ETypo } from "../Typography";
import { XMarkIcon } from "@heroicons/react/24/outline";
import classNames from "classnames";
import React from "react";
import Button, { EButtonstyletype, EButtonVariant, IButtonProps } from "../Button";
import IconButton, { EIconButtonVariant } from "../IconButton";
import Typography, { ETypo } from "../Typography";
import classes from "./classes.module.scss";
type IProps = {
className?: string;
@ -13,18 +13,8 @@ type IProps = {
onClose?: () => void;
children?: React.ReactNode;
title?: string;
firstButton?: {
text: string;
onClick?: () => void;
rightIcon?: React.ReactNode;
leftIcon?: React.ReactNode;
};
secondButton?: {
text: string;
onClick?: () => void;
rightIcon?: React.ReactNode;
leftIcon?: React.ReactNode;
};
firstButton?: IButtonProps;
secondButton?: IButtonProps;
fullwidth?: boolean;
fullscreen?: boolean;
};
@ -54,22 +44,18 @@ export default function Modal(props: IProps) {
<div className={classes["footer"]}>
{firstButton && (
<Button
variant={EButtonVariant.PRIMARY}
styletype={EButtonstyletype.OUTLINED}
leftIcon={firstButton.leftIcon}
rightIcon={firstButton.rightIcon}
onClick={firstButton.onClick}>
{firstButton.text}
{...firstButton}
variant={firstButton.variant ?? EButtonVariant.PRIMARY}
styletype={firstButton.styletype ?? EButtonstyletype.OUTLINED}>
{firstButton.children}
</Button>
)}
{secondButton && (
<Button
variant={EButtonVariant.PRIMARY}
styletype={EButtonstyletype.CONTAINED}
leftIcon={secondButton.leftIcon}
rightIcon={secondButton.rightIcon}
onClick={secondButton.onClick}>
{secondButton.text}
{...secondButton}
variant={secondButton.variant ?? EButtonVariant.PRIMARY}
styletype={secondButton.styletype ?? EButtonstyletype.CONTAINED}>
{secondButton.children}
</Button>
)}
</div>

77
src/front/Components/Layouts/DesignSystem/index.tsx
View File

@ -1,22 +1,23 @@
import Alert, { EAlertVariant } from "@Front/Components/DesignSystem/Alert";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
import Modal from "@Front/Components/DesignSystem/Modal";
import Newsletter from "@Front/Components/DesignSystem/Newsletter";
import Table from "@Front/Components/DesignSystem/Table";
import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import NumberPicker from "@Front/Components/Elements/NumberPicker";
import Tabs from "@Front/Components/Elements/Tabs";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import useOpenable from "@Front/Hooks/useOpenable";
import { ArrowLongLeftIcon, ArrowLongRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useCallback, useMemo, useState } from "react";
import classes from "./classes.module.scss";
import useOpenable from "@Front/Hooks/useOpenable";
import Modal from "@Front/Components/DesignSystem/Modal";
import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import NumberPicker from "@Front/Components/Elements/NumberPicker";
export default function DesignSystem() {
const { isOpen, open, close } = useOpenable();
@ -85,8 +86,8 @@ export default function DesignSystem() {
isOpen={isOpen}
onClose={close}
title={"Modal"}
firstButton={{ text: "Annuler", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
secondButton={{ text: "Confirmer", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}>
firstButton={{ children: "Annuler", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
secondButton={{ children: "Confirmer", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}>
<Typography typo={ETypo.TEXT_LG_REGULAR}>Modal Content</Typography>
</Modal>
@ -704,6 +705,64 @@ export default function DesignSystem() {
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.INFO} />
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.INFO} disabled />
</div>
<Typography typo={ETypo.TEXT_LG_BOLD}>Alerts</Typography>
<Alert
title="Alert line which displays the main function or reason of the alert."
description="Description"
firstButton={{
children: "Button",
leftIcon: <ArrowLongLeftIcon />,
rightIcon: <ArrowLongRightIcon />,
}}
secondButton={{ children: "Button", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
variant={EAlertVariant.INFO}
closeButton
/>
<Alert
title="Alert line which displays the main function or reason of the alert."
description="Description"
firstButton={{
children: "Button",
leftIcon: <ArrowLongLeftIcon />,
rightIcon: <ArrowLongRightIcon />,
}}
secondButton={{ children: "Button", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
variant={EAlertVariant.ERROR}
/>
<Alert
title="Alert line which displays the main function or reason of the alert."
description="Description"
firstButton={{
children: "Button",
leftIcon: <ArrowLongLeftIcon />,
rightIcon: <ArrowLongRightIcon />,
}}
secondButton={{ children: "Button", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
variant={EAlertVariant.WARNING}
/>
<Alert
title="Alert line which displays the main function or reason of the alert."
description="Description"
firstButton={{
children: "Button",
leftIcon: <ArrowLongLeftIcon />,
rightIcon: <ArrowLongRightIcon />,
}}
secondButton={{ children: "Button", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
variant={EAlertVariant.SUCCESS}
/>
<Alert
title="Alert line which displays the main function or reason of the alert."
description="Description"
firstButton={{
children: "Button",
leftIcon: <ArrowLongLeftIcon />,
rightIcon: <ArrowLongRightIcon />,
}}
secondButton={{ children: "Button", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
variant={EAlertVariant.NEUTRAL}
/>
</div>
</div>
</DefaultTemplate>

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

@ -28,8 +28,8 @@ export default function DeleteCustomerModal(props: IProps) {
isOpen={isOpen}
onClose={onClose}
title={"Êtes-vous sûr de vouloir supprimer ce client du dossier ?"}
firstButton={{ text: "Annuler", onClick: onClose }}
secondButton={{ text: "Supprimer le client", onClick: onDelete }}>
firstButton={{ children: "Annuler", onClick: onClose }}
secondButton={{ children: "Supprimer le client", onClick: onDelete }}>
<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.

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

@ -5,15 +5,17 @@ import useOpenable from "@Front/Hooks/useOpenable";
import { PencilSquareIcon, TrashIcon } from "@heroicons/react/24/outline";
import { ICustomer } from "..";
import { AnchorStatus } from "../..";
import classes from "./classes.module.scss";
import DeleteCustomerModal from "./DeleteCustomerModal";
type IProps = {
customer: ICustomer;
anchorStatus: AnchorStatus;
};
export default function ClientBox(props: IProps) {
const { customer } = props;
const { customer, anchorStatus } = props;
const { isOpen, open, close } = useOpenable();
@ -23,7 +25,9 @@ export default function ClientBox(props: IProps) {
<Typography typo={ETypo.TEXT_LG_BOLD} color={ETypoColor.COLOR_PRIMARY_500}>
{customer.contact?.last_name}
</Typography>
{anchorStatus === AnchorStatus.NOT_ANCHORED && (
<IconButton variant={EIconButtonVariant.NEUTRAL} icon={<PencilSquareIcon />} />
)}
</div>
<div>
<Typography typo={ETypo.TEXT_LG_BOLD} color={ETypoColor.COLOR_NEUTRAL_700}>
@ -46,10 +50,12 @@ export default function ClientBox(props: IProps) {
Note client
</Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_950}>
TODO
{customer.notes?.[0]?.content ?? "_"}
</Typography>
</div>
{anchorStatus === AnchorStatus.NOT_ANCHORED && (
<>
<Button
className={classes["delete-button"]}
variant={EButtonVariant.ERROR}
@ -59,6 +65,8 @@ export default function ClientBox(props: IProps) {
Supprimer le client
</Button>
<DeleteCustomerModal isOpen={isOpen} onClose={close} customerUid={customer.uid ?? ""} onDeleteSuccess={() => {}} />
</>
)}
</div>
);
}

4
src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/DeleteAskedDocumentModal/index.tsx
View File

@ -29,8 +29,8 @@ export default function DeleteAskedDocumentModal(props: IProps) {
isOpen={isOpen}
onClose={onClose}
title={"Êtes-vous sûr de vouloir supprimer cette demande de document ?"}
firstButton={{ text: "Annuler", onClick: onClose }}
secondButton={{ text: "Supprimer la demande", onClick: onDelete }}>
firstButton={{ children: "Annuler", onClick: onClose }}
secondButton={{ children: "Supprimer la demande", onClick: onDelete }}>
<Typography typo={ETypo.TEXT_MD_light}>Cette action annulera la demande du document en cours.</Typography>
</Modal>
);

20
src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/FilePreviewModal/index.tsx Normal file
View File

@ -0,0 +1,20 @@
import Modal from "@Front/Components/DesignSystem/Modal";
import { File } from "le-coffre-resources/dist/Customer";
import React from "react";
type IProps = {
file: File;
url: string;
isOpen: boolean;
onClose?: () => void;
};
export default function FilePreviewModal(props: IProps) {
const { isOpen, onClose, file, url } = props;
return (
<Modal key={file.uid} isOpen={isOpen} onClose={onClose} fullscreen>
<object data={url} type={file.mimetype} width="100%" height="800px" />
</Modal>
);
}

104
src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx
View File

@ -1,3 +1,4 @@
import Files from "@Front/Api/LeCoffreApi/Notary/Files/Files";
import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
import IconButton from "@Front/Components/DesignSystem/IconButton";
import Table from "@Front/Components/DesignSystem/Table";
@ -6,16 +7,16 @@ import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag"
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import useOpenable from "@Front/Hooks/useOpenable";
import { ArrowDownTrayIcon, EyeIcon, TrashIcon } from "@heroicons/react/24/outline";
import { Document } from "le-coffre-resources/dist/Customer";
import { Document, File } from "le-coffre-resources/dist/Customer";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import { useCallback, useEffect, useMemo, useState } from "react";
import classes from "./classes.module.scss";
import DeleteAskedDocumentModal from "./DeleteAskedDocumentModal";
import FilePreviewModal from "./FilePreviewModal";
type IProps = {
documents: Document[];
totalOfDocumentTypes: number;
};
const header: readonly IHead[] = [
@ -37,10 +38,19 @@ const header: readonly IHead[] = [
},
];
const tradDocumentStatus: Record<EDocumentStatus, string> = {
[EDocumentStatus.ASKED]: "Demandé",
[EDocumentStatus.DEPOSITED]: "À valider",
[EDocumentStatus.VALIDATED]: "Validé",
[EDocumentStatus.REFUSED]: "Refusé",
};
export default function DocumentTables(props: IProps) {
const { documents: documentsProps, totalOfDocumentTypes } = props;
const { documents: documentsProps } = props;
const [documents, setDocuments] = useState<Document[]>(documentsProps);
const [documentUid, setDocumentUid] = useState<string | null>(null);
const previewModal = useOpenable();
const [file, setFile] = useState<{ file: File; blob: Blob } | null>(null);
const deleteAskedOocumentModal = useOpenable();
@ -57,7 +67,37 @@ export default function DocumentTables(props: IProps) {
[deleteAskedOocumentModal],
);
const askDocuments: IRowProps[] = useMemo(
const onPreview = useCallback(
(document: Document) => {
const file = document.files?.[0];
if (!file || !file?.uid) return;
return Files.getInstance()
.download(file.uid)
.then((blob) => setFile({ file, blob }))
.then(() => previewModal.open())
.catch((e) => console.warn(e));
},
[previewModal],
);
const onDownload = useCallback((doc: Document) => {
const file = doc.files?.[0];
if (!file || !file?.uid) return;
return Files.getInstance()
.download(file.uid)
.then((blob) => {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = file.file_name ?? "file";
a.click();
URL.revokeObjectURL(url);
})
.catch((e) => console.warn(e));
}, []);
const askedDocuments: IRowProps[] = useMemo(
() =>
documents
.map((document) => {
@ -66,7 +106,11 @@ export default function DocumentTables(props: IProps) {
key: document.uid,
document_type: document.document_type?.name ?? "_",
document_status: (
<Tag color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} label={document.document_status.toUpperCase()} />
<Tag
color={ETagColor.INFO}
variant={ETagVariant.SEMI_BOLD}
label={tradDocumentStatus[document.document_status].toUpperCase()}
/>
),
created_at: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_",
actions: <IconButton icon={<TrashIcon onClick={() => openDeleteAskedDocumentModal(document.uid)} />} />,
@ -85,14 +129,18 @@ export default function DocumentTables(props: IProps) {
key: document.uid,
document_type: document.document_type?.name ?? "_",
document_status: (
<Tag color={ETagColor.WARNING} variant={ETagVariant.SEMI_BOLD} label={document.document_status.toUpperCase()} />
<Tag
color={ETagColor.WARNING}
variant={ETagVariant.SEMI_BOLD}
label={tradDocumentStatus[document.document_status].toUpperCase()}
/>
),
created_at: document.created_at,
actions: <IconButton icon={<EyeIcon />} />,
actions: <IconButton onClick={() => onPreview(document)} icon={<EyeIcon />} />,
};
})
.filter((document) => document !== null) as IRowProps[],
[documents],
[documents, onPreview],
);
const validatedDocuments: IRowProps[] = useMemo(
@ -104,19 +152,23 @@ export default function DocumentTables(props: IProps) {
key: document.uid,
document_type: document.document_type?.name ?? "_",
document_status: (
<Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label={document.document_status.toUpperCase()} />
<Tag
color={ETagColor.SUCCESS}
variant={ETagVariant.SEMI_BOLD}
label={tradDocumentStatus[document.document_status].toUpperCase()}
/>
),
created_at: document.created_at,
actions: (
<div className={classes["actions"]}>
<IconButton icon={<EyeIcon />} />
<IconButton icon={<ArrowDownTrayIcon />} />
<IconButton onClick={() => onPreview(document)} icon={<EyeIcon />} />
<IconButton onClick={() => onDownload(document)} icon={<ArrowDownTrayIcon />} />
</div>
),
};
})
.filter((document) => document !== null) as IRowProps[],
[documents],
[documents, onDownload, onPreview],
);
const refusedDocuments: IRowProps[] = useMemo(
@ -128,7 +180,11 @@ export default function DocumentTables(props: IProps) {
key: document.uid,
document_type: document.document_type?.name ?? "_",
document_status: (
<Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label={document.document_status.toUpperCase()} />
<Tag
color={ETagColor.ERROR}
variant={ETagVariant.SEMI_BOLD}
label={tradDocumentStatus[document.document_status].toUpperCase()}
/>
),
created_at: document.created_at,
actions: "",
@ -138,11 +194,11 @@ export default function DocumentTables(props: IProps) {
[documents],
);
const progressValidated = useMemo(() => {
if (totalOfDocumentTypes === 0) return 100;
if (validatedDocuments.length === 0) return 0;
return (validatedDocuments.length / totalOfDocumentTypes) * 100;
}, [validatedDocuments, totalOfDocumentTypes]);
const progress = useMemo(() => {
const total = askedDocuments.length + toValidateDocuments.length + validatedDocuments.length + refusedDocuments.length;
if (total === 0) return 0;
return (validatedDocuments.length / total) * 100;
}, [askedDocuments.length, refusedDocuments.length, toValidateDocuments.length, validatedDocuments.length]);
return (
<div className={classes["root"]}>
@ -150,9 +206,9 @@ export default function DocumentTables(props: IProps) {
<Typography typo={ETypo.TEXT_LG_BOLD} color={ETypoColor.COLOR_NEUTRAL_950}>
Documents
</Typography>
<CircleProgress percentage={progressValidated} />
<CircleProgress percentage={progress} />
</div>
<Table header={header} rows={askDocuments} />
<Table header={header} rows={askedDocuments} />
{toValidateDocuments.length > 0 && <Table header={header} rows={toValidateDocuments} />}
{validatedDocuments.length > 0 && <Table header={header} rows={validatedDocuments} />}
{refusedDocuments.length > 0 && <Table header={header} rows={refusedDocuments} />}
@ -164,6 +220,14 @@ export default function DocumentTables(props: IProps) {
documentUid={documentUid}
/>
)}
{file && (
<FilePreviewModal
isOpen={previewModal.isOpen}
onClose={previewModal.close}
file={file.file}
url={URL.createObjectURL(file.blob)}
/>
)}
</div>
);
}

12
src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
View File

@ -47,8 +47,6 @@ export default function ClientView(props: IProps) {
const doesCustomerHaveDocument = useMemo(() => customer.documents && customer.documents.length > 0, [customer]);
const totalOfDocumentTypes = useMemo(() => folder.deed?.document_types?.length ?? 0, [folder]);
return (
<section className={classes["root"]}>
<div className={classes["tab-container"]}>
@ -70,7 +68,8 @@ export default function ClientView(props: IProps) {
</div>
<div className={classes["content"]}>
<div className={classes["client-box"]}>
<ClientBox customer={customer} />
<ClientBox customer={customer} anchorStatus={anchorStatus} />
{anchorStatus === AnchorStatus.NOT_ANCHORED && (
<Link
href={Module.getInstance()
.get()
@ -80,13 +79,10 @@ export default function ClientView(props: IProps) {
Demander un document
</Button>
</Link>
</div>
{doesCustomerHaveDocument ? (
<DocumentTables documents={customer.documents ?? []} totalOfDocumentTypes={totalOfDocumentTypes} />
) : (
<NoDocument />
)}
</div>
{doesCustomerHaveDocument ? <DocumentTables documents={customer.documents ?? []}/> : <NoDocument />}
</div>
</section>
);
}

25
src/front/Components/Layouts/Folder/FolderInformation/FolderInformationOld/ClientSection/classes.module.scss
View File

@ -1,25 +0,0 @@
@import "@Themes/constants.scss";
.root {
width: 100%;
padding-bottom: 32px;
.no-client {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 72px;
.title {
margin-bottom: 16px;
text-align: center;
}
}
.client {
display: grid;
gap: 32px;
margin-bottom: 32px;
}
}

98
src/front/Components/Layouts/Folder/FolderInformation/FolderInformationOld/ClientSection/index.tsx
View File

@ -1,98 +0,0 @@
import PlusIcon from "@Assets/Icons/plus.svg";
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import UserFolder from "@Front/Components/DesignSystem/UserFolder";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import Module from "@Front/Config/Module";
import Link from "next/link";
import React from "react";
import classes from "./classes.module.scss";
import { AnchorStatus } from "..";
type IProps = {
folder: OfficeFolder;
anchorStatus: AnchorStatus;
getFolderCallback: () => Promise<void>;
openedCustomer?: string;
};
type IState = {
openedCustomer: string;
};
export default class ClientSection extends React.Component<IProps, IState> {
public constructor(props: IProps) {
super(props);
this.state = {
openedCustomer: this.props.openedCustomer ?? "",
};
this.changeUserFolder = this.changeUserFolder.bind(this);
this.renderCustomerFolders = this.renderCustomerFolders.bind(this);
}
public override render(): JSX.Element {
const navigatePath = Module.getInstance()
.get()
.modules.pages.Folder.pages.AddClient.props.path.replace("[folderUid]", this.props.folder.uid ?? "");
return (
<div className={classes["root"]}>
{this.doesFolderHaveCustomer() ? (
<>
<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
<Link href={navigatePath}>
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} rightIcon={<PlusIcon />}>
Ajouter un client
</Button>
</Link>
)}
</>
) : (
<div className={classes["no-client"]}>
<div className={classes["title"]}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Aucun client n'est associé au dossier.
</Typography>
</div>
{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
<Link href={navigatePath}>
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} rightIcon={<PlusIcon />}>
Ajouter un client
</Button>
</Link>
)}
</div>
)}
</div>
);
}
private renderCustomerFolders() {
const output = this.props.folder.customers?.map((customer) => {
if (!customer) return null;
return (
<UserFolder
folder={this.props.folder}
customer={customer}
key={customer.uid}
isOpened={this.state.openedCustomer === customer.uid}
onChange={this.changeUserFolder}
anchorStatus={this.props.anchorStatus}
getFolderCallback={this.props.getFolderCallback}
/>
);
});
return output ?? null;
}
private changeUserFolder(uid: string) {
this.setState({
openedCustomer: uid === this.state.openedCustomer ? "" : uid,
});
}
private doesFolderHaveCustomer(): boolean {
if (!this.props.folder?.customers) return false;
return this.props.folder?.customers!.length > 0;
}
}

113
src/front/Components/Layouts/Folder/FolderInformation/FolderInformationOld/classes.module.scss
View File

@ -1,113 +0,0 @@
@import "@Themes/constants.scss";
.root {
display: flex;
align-items: center;
flex-direction: column;
min-height: 100%;
.no-folder-selected {
width: 100%;
.choose-a-folder {
margin-top: 96px;
text-align: center;
}
}
.folder-informations {
width: 100%;
min-height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
flex-grow: 1;
.folder-header {
width: 100%;
.header {
margin-bottom: 32px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
@media (max-width: $screen-m) {
flex-wrap: wrap;
.title {
margin-bottom: 24px;
}
}
}
}
}
.second-box {
margin-top: 24px;
margin-bottom: 32px;
}
.progress-bar {
margin-bottom: 32px;
}
.button-container {
width: 100%;
display: flex;
gap: 16px;
text-align: center;
justify-content: center;
.delete-folder {
display: flex;
margin-left: 12px;
}
@media (max-width: $screen-m) {
display: flex;
flex-direction: column;
.delete-folder {
margin-left: 0;
margin-top: 12px;
> * {
flex: 1;
}
}
> * {
width: 100%;
}
}
}
.modal-title {
margin-bottom: 24px;
}
}
.validate-document-container {
.document-validating-container {
.validate-gif {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
.loader-container {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
height: 100%;
.loader {
width: 21px;
height: 21px;
}
}

541
src/front/Components/Layouts/Folder/FolderInformation/FolderInformationOld/index.tsx
View File

@ -1,541 +0,0 @@
import ChevronIcon from "@Assets/Icons/chevron.svg";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors";
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
import Link from "next/link";
import { NextRouter, useRouter } from "next/router";
import { ChangeEvent, useCallback, useEffect, useState } from "react";
import Image from "next/image";
import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif";
import BasePage from "../../../Base";
import classes from "./classes.module.scss";
import ClientSection from "./ClientSection";
import Loader from "@Front/Components/DesignSystem/Loader";
import Newsletter from "@Front/Components/DesignSystem/Newsletter";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
export enum AnchorStatus {
"VERIFIED_ON_CHAIN" = "VERIFIED_ON_CHAIN",
"ANCHORING" = "ANCHORING",
"NOT_ANCHORED" = "NOT_ANCHORED",
}
type IProps = {};
type IPropsClass = IProps & {
router: NextRouter;
selectedFolderUid: string;
isAnchored: AnchorStatus;
isLoading: boolean;
selectedFolder: OfficeFolder | null;
getAnchoringStatus: () => Promise<void>;
getFolderCallback: () => Promise<void>;
openedCustomer?: string;
};
type IState = {
isArchivedModalOpen: boolean;
inputArchivedDescripton: string;
isValidateModalVisible: boolean;
hasValidateAnchoring: boolean;
isVerifDeleteModalVisible: boolean;
isPreventArchiveModalOpen: boolean;
loadingAnchoring: boolean;
};
class FolderInformationClass extends BasePage<IPropsClass, IState> {
public constructor(props: IPropsClass) {
super(props);
this.state = {
isArchivedModalOpen: false,
inputArchivedDescripton: "",
isValidateModalVisible: false,
hasValidateAnchoring: false,
isVerifDeleteModalVisible: false,
isPreventArchiveModalOpen: false,
loadingAnchoring: false,
};
this.openArchivedModal = this.openArchivedModal.bind(this);
this.closeArchivedModal = this.closeArchivedModal.bind(this);
this.onArchivedModalAccepted = this.onArchivedModalAccepted.bind(this);
this.onPreventArchiveModalAccepted = this.onPreventArchiveModalAccepted.bind(this);
this.getCompletionNumber = this.getCompletionNumber.bind(this);
this.onArchivedDescriptionInputChange = this.onArchivedDescriptionInputChange.bind(this);
this.deleteFolder = this.deleteFolder.bind(this);
this.closeModal = this.closeModal.bind(this);
this.validateAnchoring = this.validateAnchoring.bind(this);
this.openValidateModal = this.openValidateModal.bind(this);
this.openVerifDeleteFolder = this.openVerifDeleteFolder.bind(this);
this.closeVerifDeleteFolder = this.closeVerifDeleteFolder.bind(this);
this.closePreventArchiveModal = this.closePreventArchiveModal.bind(this);
}
// TODO: Message if the user has not created any folder yet
// TODO: get the selected folder from the api in componentDidMount
public override render(): JSX.Element {
const redirectPathEditCollaborators = Module.getInstance()
.get()
.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid);
return (
<DefaultNotaryDashboard title={"Dossier"} isArchived={false} mobileBackText="Retour aux dossiers">
{!this.props.isLoading && (
<div className={classes["root"]}>
{this.props.selectedFolder ? (
<div className={classes["folder-informations"]}>
<div className={classes["folder-header"]}>
<div className={classes["header"]}>
<div className={classes["title"]}>
<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
</div>
<Link href={redirectPathEditCollaborators}>
<Button
variant={EButtonVariant.PRIMARY}
styletype={EButtonstyletype.TEXT}
rightIcon={ChevronIcon}>
Modifier les collaborateurs
</Button>
</Link>
</div>
<FolderBoxInformation
anchorStatus={this.props.isAnchored}
folder={this.props.selectedFolder}
type={EFolderBoxInformationType.INFORMATIONS}
/>
<div className={classes["second-box"]}>
<FolderBoxInformation
anchorStatus={this.props.isAnchored}
folder={this.props.selectedFolder}
type={EFolderBoxInformationType.DESCRIPTION}
/>
</div>
<div className={classes["progress-bar"]}>
<QuantityProgressBar
title="Complétion du dossier"
total={100}
currentNumber={this.getCompletionNumber()}
/>
</div>
{this.doesFolderHaveCustomer() && (
<ClientSection
folder={this.props.selectedFolder}
anchorStatus={this.props.isAnchored}
getFolderCallback={this.props.getFolderCallback}
openedCustomer={this.props.openedCustomer}
/>
)}
</div>
{!this.doesFolderHaveCustomer() && (
<ClientSection
folder={this.props.selectedFolder}
anchorStatus={this.props.isAnchored}
getFolderCallback={this.props.getFolderCallback}
openedCustomer={this.props.openedCustomer}
/>
)}
<div className={classes["button-container"]}>
<Button
variant={EButtonVariant.PRIMARY}
styletype={EButtonstyletype.OUTLINED}
onClick={this.openArchivedModal}>
Archiver le dossier
</Button>
{this.everyDocumentValidated() && !this.props.isLoading && (
<>
{this.props.isAnchored === AnchorStatus.NOT_ANCHORED && (
<Button variant={EButtonVariant.PRIMARY} onClick={this.openValidateModal}>
Valider et ancrer
</Button>
)}
{this.props.isAnchored === AnchorStatus.ANCHORING && (
<Button variant={EButtonVariant.PRIMARY} disabled>
Demande d'ancrage envoyée...&nbsp;&nbsp;
<div className={classes["loader-container"]}>
<div className={classes["loader"]}>
<Loader />
</div>
</div>
</Button>
)}
{this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN && (
<Button
variant={EButtonVariant.PRIMARY}
onClick={() => this.downloadAnchoringProof(this.props.selectedFolder?.uid)}
disabled={this.state.loadingAnchoring}>
Télécharger la preuve d'ancrage
{this.state.loadingAnchoring && (
<div className={classes["loader-container"]}>
<div className={classes["loader"]}>
<Loader />
</div>
</div>
)}
</Button>
)}
</>
)}
{this.canDeleteFolder() && (
<span className={classes["delete-folder"]} onClick={this.openVerifDeleteFolder}>
<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
</span>
)}
</div>
<Confirm
isOpen={this.state.isArchivedModalOpen}
onAccept={this.onArchivedModalAccepted}
onClose={this.closeArchivedModal}
closeBtn
header={"Archiver le dossier ?"}
cancelText={"Annuler"}
confirmText={"Archiver"}>
<div className={classes["modal-title"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR}>Souhaitez-vous vraiment archiver le dossier ?</Typography>
</div>
<TextAreaField
name="archived_description"
placeholder="Description"
onChange={this.onArchivedDescriptionInputChange}
/>
</Confirm>
<Confirm
isOpen={this.state.isPreventArchiveModalOpen}
onAccept={this.onPreventArchiveModalAccepted}
onClose={this.closePreventArchiveModal}
closeBtn
header={"Archiver le dossier"}
cancelText={"Annuler"}
confirmText={"Archiver"}>
<div className={classes["modal-title"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR}>
Vous êtes en train d’archiver le dossier sans avoir l’ancré, êtes-vous sûr de vouloir le faire ?
</Typography>
</div>
<TextAreaField
name="archived_description"
placeholder="Description"
onChange={this.onArchivedDescriptionInputChange}
/>
</Confirm>
<Confirm
isOpen={this.state.isVerifDeleteModalVisible}
onAccept={this.deleteFolder}
onClose={this.closeVerifDeleteFolder}
closeBtn
header={"Êtes-vous sûr de vouloir supprimer ce dossier ?"}
cancelText={"Annuler"}
confirmText={"Confirmer"}>
<div className={classes["modal-title"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR}>Cette action sera irréversible.</Typography>
</div>
</Confirm>
<Newsletter isOpen={false} />
</div>
) : (
<div className={classes["no-folder-selected"]}>
<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Sélectionnez un dossier
</Typography>
</div>
</div>
)}
</div>
)}
{this.props.isLoading && (
<div className={classes["loader-container"]}>
<div className={classes["loader"]}>
<Loader />
</div>
</div>
)}
<Confirm
isOpen={this.state.isValidateModalVisible}
onClose={this.closeModal}
onAccept={this.validateAnchoring}
closeBtn={true}
hasContainerClosable={true}
header={
this.state.hasValidateAnchoring
? "Dossier en cours de certification"
: "Êtes-vous sûr de vouloir ancrer et certifier ce dossier ?"
}
cancelText={"Annuler"}
confirmText={"Confirmer"}
showButtons={!this.state.hasValidateAnchoring}>
<div className={classes["validate-document-container"]}>
{!this.state.hasValidateAnchoring && (
<Typography
typo={ETypo.TEXT_MD_REGULAR}
color={ETypoColor.COLOR_GENERIC_BLACK}
className={classes["validate-text"]}>
Les documents du dossier seront certifiés sur la blockchain. Pensez à bien télécharger l'ensemble des
documents du dossier ainsi que le fichier de preuve d'ancrage pour les mettre dans la GED de votre logiciel
de rédaction d'actes.
</Typography>
)}
{this.state.hasValidateAnchoring && (
<div className={classes["document-validating-container"]}>
<Typography
typo={ETypo.TEXT_MD_REGULAR}
color={ETypoColor.COLOR_GENERIC_BLACK}
className={classes["validate-text"]}>
Veuillez revenir sur le dossier dans 5 minutes et rafraîchir la page pour télécharger le dossier de
preuve d'ancrage et le glisser dans la GED de votre logiciel de rédaction d'acte.
</Typography>
<Image src={ValidateAnchoringGif} alt="Anchoring animation" className={classes["validate-gif"]} />
</div>
)}
</div>
</Confirm>
</DefaultNotaryDashboard>
);
}
private closePreventArchiveModal() {
this.setState({
isPreventArchiveModalOpen: false,
});
}
public openVerifDeleteFolder() {
this.setState({
isVerifDeleteModalVisible: true,
});
}
public closeVerifDeleteFolder() {
this.setState({
isVerifDeleteModalVisible: false,
});
}
private closeModal() {
this.setState({
isValidateModalVisible: false,
});
}
private openValidateModal() {
this.setState({
isValidateModalVisible: true,
});
}
private async validateAnchoring() {
this.setState({
hasValidateAnchoring: true,
});
try {
const timeoutDelay = 9800;
await this.anchorFolder();
setTimeout(() => {
this.setState({
isValidateModalVisible: false,
});
}, timeoutDelay);
setTimeout(() => {
this.setState({
hasValidateAnchoring: false,
});
}, timeoutDelay + 1000);
} catch (e) {
this.setState({
isValidateModalVisible: false,
hasValidateAnchoring: false,
});
console.error(e);
}
}
private async anchorFolder() {
if (!this.props.selectedFolder?.uid) return;
await OfficeFolderAnchors.getInstance().post(this.props.selectedFolder.uid);
this.props.getAnchoringStatus();
}
private async downloadAnchoringProof(uid?: string) {
if (!uid) return;
this.setState({ loadingAnchoring: true });
try {
const file: Blob = await OfficeFolderAnchors.getInstance().download(uid);
const url = window.URL.createObjectURL(file);
const a = document.createElement("a");
a.style.display = "none";
a.href = url;
// the filename you want
a.download = `anchoring_proof_${this.props.selectedFolder?.folder_number}_${this.props.selectedFolder?.name}.zip`;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
this.setState({ loadingAnchoring: false });
} catch (e) {
this.setState({ loadingAnchoring: false });
console.error(e);
}
}
private everyDocumentValidated(): boolean {
if (!this.props.selectedFolder?.documents) return false;
return (
this.props.selectedFolder?.documents?.length >= 1 &&
this.props.selectedFolder?.documents.every((document) => document.document_status === EDocumentStatus.VALIDATED)
);
}
private async deleteFolder() {
if (!this.props.selectedFolder?.uid) return;
await Folders.getInstance().delete(this.props.selectedFolder.uid);
this.props.router.push(Module.getInstance().get().modules.pages.Folder.props.path);
}
private getCompletionNumber() {
const documents = this.props.selectedFolder?.documents;
if (!documents) return 0;
const totalDocuments = documents.length;
const refusedDocuments = documents.filter((document) => document.document_status === EDocumentStatus.REFUSED).length ?? 0;
const askedDocuments =
documents.filter(
(document) => document.document_status === EDocumentStatus.ASKED || document.document_status === EDocumentStatus.DEPOSITED,
).length ?? 0;
const depositedDocuments = totalDocuments - askedDocuments - refusedDocuments;
const percentage = (depositedDocuments / totalDocuments) * 100;
return isNaN(percentage) ? 0 : percentage;
}
private doesFolderHaveCustomer(): boolean {
if (!this.props.selectedFolder?.customers) return false;
return this.props.selectedFolder?.customers!.length > 0;
}
private canDeleteFolder(): boolean {
return (this.props.selectedFolder?.customers?.length ?? 0) === 0 && (this.props.selectedFolder?.documents?.length ?? 0) === 0;
}
private openArchivedModal(): void {
if (this.everyDocumentValidated() && this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN) {
this.setState({ isArchivedModalOpen: true });
} else {
this.setState({ isPreventArchiveModalOpen: true });
}
}
private closeArchivedModal(): void {
this.setState({ isArchivedModalOpen: false });
}
private onArchivedDescriptionInputChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) {
this.setState({ inputArchivedDescripton: e.target.value });
}
private async onArchivedModalAccepted() {
if (!this.props.selectedFolder) return;
await Folders.getInstance().archive(this.props.selectedFolder.uid ?? "", this.state.inputArchivedDescripton);
this.closeArchivedModal();
this.props.router.push(Module.getInstance().get().modules.pages.Folder.props.path);
}
private async onPreventArchiveModalAccepted() {
if (!this.props.selectedFolder) return;
await Folders.getInstance().archive(this.props.selectedFolder.uid ?? "", this.state.inputArchivedDescripton);
this.closePreventArchiveModal();
this.props.router.push(Module.getInstance().get().modules.pages.Folder.props.path);
}
}
export default function FolderInformation(props: IProps) {
const router = useRouter();
const [isAnchored, setIsAnchored] = useState<AnchorStatus>(AnchorStatus.NOT_ANCHORED);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [selectedFolder, setSelectedFolder] = useState<OfficeFolder | null>(null);
let { folderUid } = router.query;
const customerUid = router.query["customerUid"] as string | undefined;
folderUid = folderUid as string;
const getAnchoringStatus = useCallback(async () => {
if (!folderUid) return;
try {
const anchorStatus = await OfficeFolderAnchors.getInstance().getByUid(folderUid as string);
setIsAnchored(anchorStatus.status === "VERIFIED_ON_CHAIN" ? AnchorStatus.VERIFIED_ON_CHAIN : AnchorStatus.ANCHORING);
} catch (e) {
setIsAnchored(AnchorStatus.NOT_ANCHORED);
}
}, [folderUid]);
const getFolder = useCallback(async () => {
if (!folderUid) return;
setIsLoading(true);
const query = {
q: {
deed: { include: { deed_type: true } },
office: true,
customers: {
include: {
contact: true,
documents: {
include: {
folder: true,
document_type: true,
files: true,
},
},
},
},
documents: {
include: {
depositor: {
include: {
contact: true,
},
},
},
},
folder_anchor: true,
notes: {
include: {
customer: true,
},
},
},
};
const folder = await Folders.getInstance().getByUid(folderUid as string, query);
if (folder) {
setSelectedFolder(folder);
getAnchoringStatus();
}
setIsLoading(false);
}, [folderUid, getAnchoringStatus]);
useEffect(() => {
setIsLoading(true);
getFolder();
}, [getFolder]);
return (
<FolderInformationClass
{...props}
selectedFolderUid={folderUid}
router={router}
isAnchored={isAnchored}
isLoading={isLoading}
selectedFolder={selectedFolder}
getAnchoringStatus={getAnchoringStatus}
getFolderCallback={getFolder}
openedCustomer={customerUid}
/>
);
}

41
src/front/Components/Layouts/Folder/FolderInformation/InformationSection/index.tsx
View File

@ -5,31 +5,21 @@ import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Ty
import Module from "@Front/Config/Module";
import { ArchiveBoxIcon, PencilSquareIcon, UserGroupIcon } from "@heroicons/react/24/outline";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
import Link from "next/link";
import { useCallback } from "react";
import classes from "./classes.module.scss";
import { AnchorStatus } from "..";
type IProps = {
folder: OfficeFolder | null;
progress: number;
onArchive: () => void;
anchorStatus: AnchorStatus;
isArchived: boolean;
};
export default function InformationSection(props: IProps) {
const { folder } = props;
const getCompletionNumber = useCallback(() => {
const documents = folder?.documents;
if (!documents) return 0;
const totalDocuments = documents.length;
const refusedDocuments = documents.filter((document) => document.document_status === EDocumentStatus.REFUSED).length ?? 0;
const askedDocuments =
documents.filter(
(document) => document.document_status === EDocumentStatus.ASKED || document.document_status === EDocumentStatus.DEPOSITED,
).length ?? 0;
const depositedDocuments = totalDocuments - askedDocuments - refusedDocuments;
const percentage = (depositedDocuments / totalDocuments) * 100;
return isNaN(percentage) ? 0 : percentage;
}, [folder]);
const { folder, progress, onArchive, anchorStatus, isArchived } = props;
return (
<section className={classes["root"]}>
@ -51,14 +41,19 @@ export default function InformationSection(props: IProps) {
<div className={classes["info-box2"]}>
<div className={classes["progress-container"]}>
<CircleProgress percentage={getCompletionNumber()} />
<CircleProgress percentage={progress} />
<div className={classes["icon-container"]}>
{anchorStatus === AnchorStatus.NOT_ANCHORED && (
<>
<Link
href={Module.getInstance()
.get()
.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", folder?.uid ?? "")}
title="Modifier les collaborateurs">
<IconButton icon={<UserGroupIcon title="Modifier les collaborateurs" />} variant={EIconButtonVariant.NEUTRAL} />
<IconButton
icon={<UserGroupIcon title="Modifier les collaborateurs" />}
variant={EIconButtonVariant.NEUTRAL}
/>
</Link>
<Link
href={Module.getInstance()
@ -70,7 +65,15 @@ export default function InformationSection(props: IProps) {
variant={EIconButtonVariant.NEUTRAL}
/>
</Link>
<IconButton icon={<ArchiveBoxIcon title="Archiver le dossier" />} variant={EIconButtonVariant.ERROR} />
</>
)}
{!isArchived && (
<IconButton
onClick={onArchive}
icon={<ArchiveBoxIcon title="Archiver le dossier" />}
variant={EIconButtonVariant.ERROR}
/>
)}
</div>
</div>
<div>

10
src/front/Components/Layouts/Folder/FolderInformation/NoClientView/DeleteFolderModal/index.tsx
View File

@ -14,7 +14,7 @@ type IProps = {
export default function DeleteFolderModal(props: IProps) {
const { isOpen, onClose, folder } = props;
const navigate = useRouter();
const router = useRouter();
const onDelete = useCallback(() => {
if (!folder.uid) return;
@ -23,17 +23,17 @@ export default function DeleteFolderModal(props: IProps) {
return Folders.getInstance()
.delete(folder.uid)
.then(() => navigate.push(Module.getInstance().get().modules.pages.Folder.props.path))
.then(() => router.push(Module.getInstance().get().modules.pages.Folder.props.path))
.then(onClose);
}, [folder, navigate, onClose]);
}, [folder, router, onClose]);
return (
<Modal
isOpen={isOpen}
onClose={onClose}
title={"Êtes-vous sûr de vouloir supprimer ce dossier ?"}
firstButton={{ text: "Annuler", onClick: onClose }}
secondButton={{ text: "Supprimer le dossier", onClick: onDelete }}>
firstButton={{ children: "Annuler", onClick: onClose }}
secondButton={{ children: "Supprimer le dossier", onClick: onDelete }}>
<Typography typo={ETypo.TEXT_MD_light}>
Cette action est irréversible. En supprimant ce dossier, toutes les informations associées seront définitivement perdues.
</Typography>

24
src/front/Components/Layouts/Folder/FolderInformation/elements/AnchoringAlertInfo/index.tsx Normal file
View File

@ -0,0 +1,24 @@
import Alert, { EAlertVariant } from "@Front/Components/DesignSystem/Alert";
import { EButtonstyletype } from "@Front/Components/DesignSystem/Button";
import { LockClosedIcon } from "@heroicons/react/24/outline";
type IProps = {
onAnchor: () => void;
};
export default function AnchoringAlertInfo(props: IProps) {
const { onAnchor } = props;
return (
<Alert
title="Validation et Certification du Dossier"
description="Votre dossier est désormais complet à 100%. Vous pouvez maintenant procéder à la validation et à l'ancrage des documents dans la blockchain. Cette étape garantit la sécurité et l'authenticité de vos documents."
firstButton={{
children: "Ancrer et certifier",
styletype: EButtonstyletype.CONTAINED,
rightIcon: <LockClosedIcon />,
onClick: onAnchor,
}}
variant={EAlertVariant.INFO}
/>
);
}

35
src/front/Components/Layouts/Folder/FolderInformation/elements/AnchoringAlertSuccess/index.tsx Normal file
View File

@ -0,0 +1,35 @@
import Alert, { EAlertVariant } from "@Front/Components/DesignSystem/Alert";
import { EButtonstyletype } from "@Front/Components/DesignSystem/Button";
import { ArrowDownOnSquareIcon, CheckIcon } from "@heroicons/react/24/outline";
type IProps = {
onDownloadAnchoringProof: () => void;
onArchive: () => void;
isArchived: boolean;
};
export default function AnchoringAlertSuccess(props: IProps) {
const { onDownloadAnchoringProof, onArchive, isArchived } = props;
return (
<Alert
title="Félicitations ! Dossier ancré avec succès"
description="Votre dossier a été validé et ancré dans la blockchain. Vous pouvez maintenant télécharger la preuve d'ancrage pour vos archives."
firstButton={{
children: "Télécharger la preuve d'ancrage",
styletype: EButtonstyletype.CONTAINED,
rightIcon: <ArrowDownOnSquareIcon />,
onClick: onDownloadAnchoringProof,
}}
secondButton={
isArchived
? undefined
: {
children: "Archiver le dossier",
onClick: onArchive,
}
}
variant={EAlertVariant.SUCCESS}
icon={<CheckIcon />}
/>
);
}

11
src/front/Components/Layouts/Folder/FolderInformation/elements/AnchoringModal/classes.module.scss Normal file
View File

@ -0,0 +1,11 @@
.anchoring {
display: flex;
flex-direction: column;
gap: 24px;
.validate-gif {
width: 100%;
height: 100%;
object-fit: contain;
}
}

52
src/front/Components/Layouts/Folder/FolderInformation/elements/AnchoringModal/index.tsx Normal file
View File

@ -0,0 +1,52 @@
import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors";
import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif";
import Modal from "@Front/Components/DesignSystem/Modal";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import Image from "next/image";
import React, { useCallback, useState } from "react";
import classes from "./classes.module.scss";
type IProps = {
isOpen: boolean;
onClose?: () => void;
folderUid: string;
onAnchorSuccess?: () => void;
};
export default function AnchoringModal(props: IProps) {
const { isOpen, onClose, folderUid, onAnchorSuccess } = props;
const [isAnchoring, setIsAnchoring] = useState(false);
const anchor = useCallback(() => {
setIsAnchoring(true);
OfficeFolderAnchors.getInstance()
.post(folderUid)
.then(onAnchorSuccess)
.catch((e) => console.warn(e))
}, [folderUid, onAnchorSuccess]);
return (
<Modal
isOpen={isOpen}
onClose={onClose}
title={!isAnchoring ? "Êtes-vous sûr de vouloir certifier et ancrer ce dossier ?" : "Ancrage en cours..."}
firstButton={!isAnchoring ? { children: "Non, Annuler", onClick: onClose } : undefined}
secondButton={!isAnchoring ? { children: "Oui, certifier et ancrer", onClick: anchor } : undefined}>
{!isAnchoring ? (
<Typography typo={ETypo.TEXT_MD_light}>
La certification et l'ancrage de ce dossier dans la blockchain sont des actions définitives et garantiront la sécurité
et l'authenticité de tous les documents. Veuillez confirmer que vous souhaitez continuer.
</Typography>
) : (
<div className={classes["anchoring"]}>
<Typography typo={ETypo.TEXT_MD_light}>
Vos documents sont en train d'être ancrés dans la blockchain. Cela peut prendre quelques instants. Merci de votre
patience.
</Typography>
<Image src={ValidateAnchoringGif} alt="Anchoring animation" className={classes["validate-gif"]} />
</div>
)}
</Modal>
);
}

5
src/front/Components/Layouts/Folder/FolderInformation/elements/ArchiveModal/classes.module.scss Normal file
View File

@ -0,0 +1,5 @@
.root {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}

49
src/front/Components/Layouts/Folder/FolderInformation/elements/ArchiveModal/index.tsx Normal file
View File

@ -0,0 +1,49 @@
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import Modal from "@Front/Components/DesignSystem/Modal";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import Module from "@Front/Config/Module";
import { useRouter } from "next/router";
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
type IProps = {
isOpen: boolean;
onClose?: () => void;
folderUid: string;
};
export default function ArchiveModal(props: IProps) {
const { isOpen, onClose, folderUid } = props;
const router = useRouter();
const archive = useCallback(() => {
if (!folderUid) return;
const description = (document.querySelector("textarea[name='archived_description']") as HTMLTextAreaElement).value ?? "";
Folders.getInstance()
.archive(folderUid, description)
.then(onClose)
.then(() => router.push(Module.getInstance().get().modules.pages.Folder.props.path))
.catch((e) => {
console.warn(e);
});
}, [folderUid, onClose, router]);
return (
<Modal
isOpen={isOpen}
onClose={onClose}
title={"Voulez-vous archiver ce dossier ?"}
firstButton={{ children: "Annuler", onClick: onClose }}
secondButton={{ children: "Archiver le dossier", onClick: archive }}>
<div className={classes["root"]}>
<Typography typo={ETypo.TEXT_MD_light}>
Archiver ce dossier le déplacera dans la section des dossiers archivés. Vous pouvez ajouter une note de dossier avant
d'archiver si vous le souhaitez.
</Typography>
<TextAreaField name="archived_description" placeholder="Ecrire une note" />
</div>
</Modal>
);
}

47
src/front/Components/Layouts/Folder/FolderInformation/elements/DownloadAnchoringProofModal/index.tsx Normal file
View File

@ -0,0 +1,47 @@
import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors";
import Modal from "@Front/Components/DesignSystem/Modal";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import React, { useCallback } from "react";
type IProps = {
isOpen: boolean;
onClose?: () => void;
folder: OfficeFolder;
};
export default function DownloadAnchoringProofModal(props: IProps) {
const { isOpen, onClose, folder } = props;
const downloadAnchoringProof = useCallback(async () => {
if (!folder?.uid) return;
try {
const file = await OfficeFolderAnchors.getInstance().download(folder.uid);
const url = window.URL.createObjectURL(file);
const a = document.createElement("a");
a.style.display = "none";
a.href = url;
a.download = `anchoring_proof_${folder?.folder_number}_${folder?.name}.zip`;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
onClose?.();
} catch (e) {
console.warn(e);
}
}, [folder?.folder_number, folder?.name, folder.uid, onClose]);
return (
<Modal
isOpen={isOpen}
onClose={onClose}
title={"Félicitations ! Dossier ancré avec succès"}
firstButton={{ children: "Fermer", onClick: onClose }}
secondButton={{ children: "Télécharger la preuve d’ancrage", onClick: downloadAnchoringProof }}>
<Typography typo={ETypo.TEXT_MD_light}>
Votre dossier a été validé et ancré dans la blockchain. Vous pouvez maintenant télécharger la preuve d'ancrage pour vos
archives.
</Typography>
</Modal>
);
}

11
src/front/Components/Layouts/Folder/FolderInformation/elements/RequireAnchoringModal/classes.module.scss Normal file
View File

@ -0,0 +1,11 @@
.anchoring {
display: flex;
flex-direction: column;
gap: 24px;
.validate-gif {
width: 100%;
height: 100%;
object-fit: contain;
}
}

32
src/front/Components/Layouts/Folder/FolderInformation/elements/RequireAnchoringModal/index.tsx Normal file
View File

@ -0,0 +1,32 @@
import Modal from "@Front/Components/DesignSystem/Modal";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import React, { useCallback } from "react";
type IProps = {
isOpen: boolean;
onClose: () => void;
onAnchor: () => void;
};
export default function RequireAnchoringModal(props: IProps) {
const { isOpen, onClose, onAnchor: onAnchorProps } = props;
const onAnchor = useCallback(() => {
onAnchorProps();
onClose();
}, [onAnchorProps, onClose]);
return (
<Modal
isOpen={isOpen}
onClose={onClose}
title={"Archiver le dossier, action requise : Ancrer et certifier le dossier"}
firstButton={{ children: "Annuler", onClick: onClose }}
secondButton={{ children: "Ancrer le dossier", onClick: onAnchor }}>
<Typography typo={ETypo.TEXT_MD_light}>
Pour archiver ce dossier, il est nécessaire de l'ancrer dans la blockchain afin de garantir la sécurité et l'authenticité
des documents. Veuillez procéder à l'ancrage avant de continuer.
</Typography>
</Modal>
);
}

90
src/front/Components/Layouts/Folder/FolderInformation/index.tsx
View File

@ -3,13 +3,21 @@ import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAncho
import Loader from "@Front/Components/DesignSystem/Loader";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
import { useParams } from "next/navigation";
import { useCallback, useEffect, useMemo, useState } from "react";
import classes from "./classes.module.scss";
import ClientView from "./ClientView";
import InformationSection from "./InformationSection";
import NoClientView from "./NoClientView";
import ClientView from "./ClientView";
import AnchoringAlertInfo from "./elements/AnchoringAlertInfo";
import AnchoringModal from "./elements/AnchoringModal";
import useOpenable from "@Front/Hooks/useOpenable";
import AnchoringAlertSuccess from "./elements/AnchoringAlertSuccess";
import DownloadAnchoringProofModal from "./elements/DownloadAnchoringProofModal";
import RequireAnchoringModal from "./elements/RequireAnchoringModal";
import ArchiveModal from "./elements/ArchiveModal";
export enum AnchorStatus {
"VERIFIED_ON_CHAIN" = "VERIFIED_ON_CHAIN",
@ -17,16 +25,36 @@ export enum AnchorStatus {
"NOT_ANCHORED" = "NOT_ANCHORED",
}
type IProps = {};
type IProps = { isArchived?: boolean };
export default function FolderInformation(props: IProps) {
const { isArchived = false } = props;
const [anchorStatus, setAnchorStatus] = useState<AnchorStatus>(AnchorStatus.NOT_ANCHORED);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [folder, setFolder] = useState<OfficeFolder | null>(null);
const anchoringModal = useOpenable();
const downloadAnchoringProofModal = useOpenable();
const requireAnchoringModal = useOpenable();
const archiveModal = useOpenable();
const params = useParams();
const folderUid = params["folderUid"] as string;
const progress = useMemo(() => {
let total = 0;
let validatedDocuments = 0;
folder?.customers?.forEach((customer) => {
const documents = customer.documents;
total += documents?.length ?? 0;
validatedDocuments += documents?.filter((document) => document.document_status === EDocumentStatus.VALIDATED).length ?? 0;
});
if (total === 0) return 0;
const percentage = (validatedDocuments / total) * 100;
return isNaN(percentage) ? 0 : percentage;
}, [folder]);
const doesFolderHaveClient = useMemo(() => folder?.customers?.length !== 0, [folder]);
const fetchFolder = useCallback(async () => {
if (!folderUid) return;
const query = {
@ -77,23 +105,69 @@ export default function FolderInformation(props: IProps) {
.catch(() => setAnchorStatus(AnchorStatus.NOT_ANCHORED));
}, [folderUid]);
useEffect(() => {
const fetchData = useCallback(() => {
setIsLoading(true);
fetchFolder()
return fetchFolder()
.then(() => fetchAnchorStatus())
.catch((e) => console.error(e))
.finally(() => setIsLoading(false));
}, [fetchAnchorStatus, fetchFolder, folderUid]);
}, [fetchAnchorStatus, fetchFolder]);
const doesFolderHaveClient = useMemo(() => folder?.customers?.length !== 0, [folder]);
useEffect(() => {
fetchData();
}, [fetchData]);
const onAnchorSuccess = useCallback(() => fetchData().then(downloadAnchoringProofModal.open), [fetchData, downloadAnchoringProofModal]);
const onArchive = useCallback(() => {
if (anchorStatus === AnchorStatus.NOT_ANCHORED) return requireAnchoringModal.open();
archiveModal.open();
}, [anchorStatus, archiveModal, requireAnchoringModal]);
return (
<DefaultNotaryDashboard title={"Dossier"} isArchived={false} mobileBackText="Retour aux dossiers">
<DefaultNotaryDashboard title={"Dossier"} isArchived={isArchived} mobileBackText="Retour aux dossiers">
{!isLoading && (
<div className={classes["root"]}>
<InformationSection folder={folder} />
<InformationSection
folder={folder}
progress={progress}
onArchive={onArchive}
anchorStatus={anchorStatus}
isArchived={isArchived}
/>
{progress === 100 && anchorStatus === AnchorStatus.NOT_ANCHORED && (
<AnchoringAlertInfo onAnchor={anchoringModal.open} />
)}
{anchorStatus === AnchorStatus.VERIFIED_ON_CHAIN && (
<AnchoringAlertSuccess
onDownloadAnchoringProof={downloadAnchoringProofModal.open}
onArchive={archiveModal.open}
isArchived={isArchived}
/>
)}
{folder && !doesFolderHaveClient && <NoClientView folder={folder} anchorStatus={anchorStatus} />}
{folder && doesFolderHaveClient && <ClientView folder={folder} anchorStatus={anchorStatus} />}
{folderUid && anchorStatus === AnchorStatus.NOT_ANCHORED && (
<AnchoringModal
isOpen={anchoringModal.isOpen}
onClose={anchoringModal.close}
folderUid={folderUid}
onAnchorSuccess={onAnchorSuccess}
/>
)}
{folder && anchorStatus === AnchorStatus.VERIFIED_ON_CHAIN && (
<DownloadAnchoringProofModal
isOpen={downloadAnchoringProofModal.isOpen}
onClose={downloadAnchoringProofModal.close}
folder={folder}
/>
)}
<RequireAnchoringModal
isOpen={requireAnchoringModal.isOpen}
onClose={requireAnchoringModal.close}
onAnchor={anchoringModal.open}
/>
{folderUid && <ArchiveModal isOpen={archiveModal.isOpen} onClose={archiveModal.close} folderUid={folderUid} />}
</div>
)}
{isLoading && (

25
src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/classes.module.scss
View File

@ -1,25 +0,0 @@
@import "@Themes/constants.scss";
.root {
width: 100%;
padding-bottom: 32px;
.no-client {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 72px;
.title {
margin-bottom: 16px;
text-align: center;
}
}
.client {
display: grid;
gap: 32px;
margin-bottom: 32px;
}
}

74
src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx
View File

@ -1,74 +0,0 @@
import React from "react";
import classes from "./classes.module.scss";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import UserFolder from "@Front/Components/DesignSystem/UserFolder";
import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation";
type IProps = {
folder: OfficeFolder;
anchorStatus: AnchorStatus;
getFolderCallback: () => Promise<void>;
};
type IState = {
openedCustomer: string;
};
export default class ClientSection extends React.Component<IProps, IState> {
public constructor(props: IProps) {
super(props);
this.state = {
openedCustomer: "",
};
this.changeUserFolder = this.changeUserFolder.bind(this);
}
public override render(): JSX.Element {
return (
<div className={classes["root"]}>
{this.doesFolderHaveCustomer() ? (
<>
<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
</>
) : (
<div className={classes["no-client"]}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Aucun client dans ce dossier
</Typography>
</div>
)}
</div>
);
}
private renderCustomerFolders() {
const output = this.props.folder.customers?.map((customer) => {
if (!customer) return null;
return (
<UserFolder
folder={this.props.folder}
customer={customer}
key={customer.uid}
isOpened={this.state.openedCustomer === customer.uid}
onChange={this.changeUserFolder}
anchorStatus={this.props.anchorStatus}
isArchived
getFolderCallback={this.props.getFolderCallback}
/>
);
});
return output ?? null;
}
private changeUserFolder(uid: string) {
this.setState({
openedCustomer: uid === this.state.openedCustomer ? "" : uid,
});
}
private doesFolderHaveCustomer(): boolean {
if (!this.props.folder?.customers) return false;
return this.props.folder?.customers!.length > 0;
}
}

310
src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
View File

@ -1,309 +1,5 @@
import ChevronIcon from "@Assets/Icons/chevron.svg";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { NextRouter, useRouter } from "next/router";
import FolderInformation from "../../Folder/FolderInformation";
import BasePage from "../../Base";
import classes from "./classes.module.scss";
import ClientSection from "./ClientSection";
import Link from "next/link";
import { AnchorStatus } from "../../Folder/FolderInformation";
import { useCallback, useEffect, useState } from "react";
import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors";
import Loader from "@Front/Components/DesignSystem/Loader";
type IProps = {};
type IPropsClass = IProps & {
router: NextRouter;
selectedFolderUid: string;
isLoading: boolean;
selectedFolder: OfficeFolder | null;
isAnchored: AnchorStatus;
getFolderCallback: () => Promise<void>;
};
type IState = {
selectedFolder: OfficeFolder | null;
isArchivedModalOpen: boolean;
loadingAnchoring: boolean;
};
class FolderInformationClass extends BasePage<IPropsClass, IState> {
public constructor(props: IPropsClass) {
super(props);
this.state = {
selectedFolder: null,
isArchivedModalOpen: false,
loadingAnchoring: false,
};
this.onSelectedFolder = this.onSelectedFolder.bind(this);
this.openArchivedModal = this.openArchivedModal.bind(this);
this.closeArchivedModal = this.closeArchivedModal.bind(this);
this.restoreFolder = this.restoreFolder.bind(this);
}
// TODO: Message if the user has not created any folder yet
// TODO: get the selected folder from the api in componentDidMount
public override render(): JSX.Element {
const redirectPathEditCollaborators = Module.getInstance()
.get()
.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid);
return (
<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} isArchived={true}>
{!this.props.isLoading && (
<div className={classes["root"]}>
{this.state.selectedFolder ? (
<div className={classes["folder-informations"]}>
<div className={classes["folder-header"]}>
<div className={classes["header"]}>
<div className={classes["title"]}>
<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
</div>
<Link href={redirectPathEditCollaborators}>
<Button
variant={EButtonVariant.PRIMARY}
styletype={EButtonstyletype.TEXT}
rightIcon={<ChevronIcon />}>
Modifier les collaborateurs
</Button>
</Link>
</div>
<FolderBoxInformation
anchorStatus={this.props.isAnchored}
folder={this.state.selectedFolder}
isArchived
type={EFolderBoxInformationType.INFORMATIONS}
/>
<div className={classes["second-box"]}>
<FolderBoxInformation
anchorStatus={this.props.isAnchored}
folder={this.state.selectedFolder}
isArchived
type={EFolderBoxInformationType.DESCRIPTION}
/>
</div>
<div className={classes["second-box"]}>
<FolderBoxInformation
anchorStatus={this.props.isAnchored}
folder={this.state.selectedFolder}
isArchived
type={EFolderBoxInformationType.ARCHIVED_DESCRIPTION}
/>
</div>
<div className={classes["progress-bar"]}>
<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
</div>
{this.doesFolderHaveCustomer() && (
<ClientSection
folder={this.state.selectedFolder}
anchorStatus={this.props.isAnchored}
getFolderCallback={this.props.getFolderCallback}
/>
)}
</div>
{!this.doesFolderHaveCustomer() && (
<ClientSection
folder={this.state.selectedFolder}
anchorStatus={this.props.isAnchored}
getFolderCallback={this.props.getFolderCallback}
/>
)}
<div className={classes["button-container"]}>
<Button
variant={EButtonVariant.PRIMARY}
styletype={EButtonstyletype.OUTLINED}
onClick={this.restoreFolder}>
Restaurer le dossier
</Button>
{this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN && (
<Button
variant={EButtonVariant.PRIMARY}
onClick={() => this.downloadAnchoringProof(this.props.selectedFolder?.uid)}
disabled={this.state.loadingAnchoring}>
Télécharger la preuve d'ancrage
{this.state.loadingAnchoring && (
<div className={classes["loader-container"]}>
<div className={classes["loader"]}>
<Loader />
</div>
</div>
)}
</Button>
)}
</div>
</div>
) : (
<div className={classes["no-folder-selected"]}>
<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
<div className={classes["choose-a-folder"]}>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
Aucun dossier sélectionné
</Typography>
</div>
</div>
)}
</div>
)}
{this.props.isLoading && (
<div className={classes["loader-container"]}>
<div className={classes["loader"]}>
<Loader />
</div>
</div>
)}
</DefaultNotaryDashboard>
);
}
public override async componentDidMount() {
const folder = await this.getFolder();
this.setState({ selectedFolder: folder });
}
private doesFolderHaveCustomer(): boolean {
return this.state.selectedFolder?.customers !== undefined;
}
private onSelectedFolder(folder: OfficeFolder): void {
this.setState({ selectedFolder: folder });
}
private async restoreFolder() {
if (!this.state.selectedFolder) return;
await Folders.getInstance().restore(this.state.selectedFolder.uid ?? "");
this.props.router.push(
Module.getInstance()
.get()
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid),
);
}
private openArchivedModal(): void {
this.setState({ isArchivedModalOpen: true });
}
private closeArchivedModal(): void {
this.setState({ isArchivedModalOpen: false });
}
private async downloadAnchoringProof(uid?: string) {
if (!uid) return;
this.setState({ loadingAnchoring: true });
try {
const file: Blob = await OfficeFolderAnchors.getInstance().download(uid);
const url = window.URL.createObjectURL(file);
const a = document.createElement("a");
a.style.display = "none";
a.href = url;
// the filename you want
a.download = `anchoring_proof_${this.props.selectedFolder?.folder_number}_${this.props.selectedFolder?.name}.zip`;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
this.setState({ loadingAnchoring: false });
} catch (e) {
this.setState({ loadingAnchoring: false });
console.error(e);
}
}
private async getFolder(): Promise<OfficeFolder> {
const query = {
q: {
deed: { include: { deed_type: "true" } },
office: "true",
customers: { include: { contact: true } },
notes: "true",
},
};
const folder = await Folders.getInstance().getByUid(this.props.selectedFolderUid, query);
return folder;
}
}
export default function FolderInformation(props: IProps) {
const router = useRouter();
const [isAnchored, setIsAnchored] = useState<AnchorStatus>(AnchorStatus.NOT_ANCHORED);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [selectedFolder, setSelectedFolder] = useState<OfficeFolder | null>(null);
let { folderUid } = router.query;
folderUid = folderUid as string;
const getAnchoringStatus = useCallback(async () => {
if (!folderUid) return;
setIsLoading(true);
try {
const anchorStatus = await OfficeFolderAnchors.getInstance().getByUid(folderUid as string);
setIsAnchored(anchorStatus.status === "VERIFIED_ON_CHAIN" ? AnchorStatus.VERIFIED_ON_CHAIN : AnchorStatus.ANCHORING);
} catch (e) {
setIsAnchored(AnchorStatus.NOT_ANCHORED);
}
setIsLoading(false);
}, [folderUid]);
const getFolder = useCallback(async () => {
if (!folderUid) return;
setIsLoading(true);
const query = {
q: {
deed: { include: { deed_type: true } },
office: true,
customers: {
include: {
contact: true,
documents: {
include: {
folder: true,
document_type: true,
files: true,
},
},
},
},
documents: {
include: {
depositor: {
include: {
contact: true,
},
},
},
},
folder_anchor: true,
},
};
const folder = await Folders.getInstance().getByUid(folderUid as string, query);
if (folder) {
setSelectedFolder(folder);
getAnchoringStatus();
}
setIsLoading(false);
}, [folderUid, getAnchoringStatus]);
useEffect(() => {
setIsLoading(true);
getFolder();
}, [getFolder]);
return (
<FolderInformationClass
{...props}
selectedFolderUid={folderUid}
selectedFolder={selectedFolder}
router={router}
isLoading={isLoading}
isAnchored={isAnchored}
getFolderCallback={getFolder}
/>
);
export default function FolderInformationArchived() {
return <FolderInformation isArchived />;
}

4
src/front/Hooks/useOpenable.ts
View File

@ -1,7 +1,7 @@
import { useCallback, useState } from "react";
function useOpenable() {
const [isOpen, setIsOpen] = useState(false);
function useOpenable({ defaultOpen } = { defaultOpen: false }) {
const [isOpen, setIsOpen] = useState(defaultOpen);
const open = useCallback(() => {
setIsOpen(true);