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

src/front/Components/DesignSystem/Alert/classes.module.scss

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

src/front/Components/DesignSystem/Alert/index.tsx

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

src/front/Components/DesignSystem/Button/index.tsx

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

src/front/Components/DesignSystem/CircleProgress/index.tsx

@@ -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;
@@ -58,4 +59,4 @@ export default function CircleProgress(props: IProps) {
 			</Typography>
 		</div>
 	);
-}
+}

src/front/Components/DesignSystem/Modal/classes.module.scss

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

src/front/Components/DesignSystem/Modal/index.tsx

@@ -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?: {
+	firstButton?: IButtonProps;
-		text: string;
+	secondButton?: IButtonProps;
-		onClick?: () => void;
-		rightIcon?: React.ReactNode;
-		leftIcon?: React.ReactNode;
-	};
-	secondButton?: {
-		text: string;
-		onClick?: () => void;
-		rightIcon?: React.ReactNode;
-		leftIcon?: React.ReactNode;
-	};
 	fullwidth?: boolean;
 	fullscreen?: boolean;
 };
@@ -54,22 +44,18 @@ export default function Modal(props: IProps) {
 				<div className={classes["footer"]}>
 					{firstButton && (
 						<Button
-							variant={EButtonVariant.PRIMARY}
+							{...firstButton}
-							styletype={EButtonstyletype.OUTLINED}
+							variant={firstButton.variant ?? EButtonVariant.PRIMARY}
-							leftIcon={firstButton.leftIcon}
+							styletype={firstButton.styletype ?? EButtonstyletype.OUTLINED}>
-							rightIcon={firstButton.rightIcon}
+							{firstButton.children}
-							onClick={firstButton.onClick}>
-							{firstButton.text}
 						</Button>
 					)}
 					{secondButton && (
 						<Button
-							variant={EButtonVariant.PRIMARY}
+							{...secondButton}
-							styletype={EButtonstyletype.CONTAINED}
+							variant={secondButton.variant ?? EButtonVariant.PRIMARY}
-							leftIcon={secondButton.leftIcon}
+							styletype={secondButton.styletype ?? EButtonstyletype.CONTAINED}>
-							rightIcon={secondButton.rightIcon}
+							{secondButton.children}
-							onClick={secondButton.onClick}>
-							{secondButton.text}
 						</Button>
 					)}
 				</div>

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

@@ -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 /> }}
+						firstButton={{ children: "Annuler", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
-						secondButton={{ text: "Confirmer", 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>

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

@@ -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 }}
+			firstButton={{ children: "Annuler", onClick: onClose }}
-			secondButton={{ text: "Supprimer le client", onClick: onDelete }}>
+			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.

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

@@ -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>
-				<IconButton variant={EIconButtonVariant.NEUTRAL} icon={<PencilSquareIcon />} />
+				{anchorStatus === AnchorStatus.NOT_ANCHORED && (
+					<IconButton variant={EIconButtonVariant.NEUTRAL} icon={<PencilSquareIcon />} />
+				)}
 			</div>
 			<div>
 				<Typography typo={ETypo.TEXT_LG_BOLD} color={ETypoColor.COLOR_NEUTRAL_700}>
@@ -46,19 +50,23 @@ 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>
 
-			<Button
+			{anchorStatus === AnchorStatus.NOT_ANCHORED && (
-				className={classes["delete-button"]}
+				<>
-				variant={EButtonVariant.ERROR}
+					<Button
-				styletype={EButtonstyletype.TEXT}
+						className={classes["delete-button"]}
-				rightIcon={<TrashIcon />}
+						variant={EButtonVariant.ERROR}
-				onClick={open}>
+						styletype={EButtonstyletype.TEXT}
-				Supprimer le client
+						rightIcon={<TrashIcon />}
-			</Button>
+						onClick={open}>
-			<DeleteCustomerModal isOpen={isOpen} onClose={close} customerUid={customer.uid ?? ""} onDeleteSuccess={() => {}} />
+						Supprimer le client
+					</Button>
+					<DeleteCustomerModal isOpen={isOpen} onClose={close} customerUid={customer.uid ?? ""} onDeleteSuccess={() => {}} />
+				</>
+			)}
 		</div>
 	);
 }

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

@@ -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 }}
+			firstButton={{ children: "Annuler", onClick: onClose }}
-			secondButton={{ text: "Supprimer la demande", onClick: onDelete }}>
+			secondButton={{ children: "Supprimer la demande", onClick: onDelete }}>
 			<Typography typo={ETypo.TEXT_MD_light}>Cette action annulera la demande du document en cours.</Typography>
 		</Modal>
 	);

src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/FilePreviewModal/index.tsx

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

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

@@ -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 onClick={() => onPreview(document)} icon={<EyeIcon />} />
-								<IconButton icon={<ArrowDownTrayIcon />} />
+								<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(() => {
+	const progress = useMemo(() => {
-		if (totalOfDocumentTypes === 0) return 100;
+		const total = askedDocuments.length + toValidateDocuments.length + validatedDocuments.length + refusedDocuments.length;
-		if (validatedDocuments.length === 0) return 0;
+		if (total === 0) return 0;
-		return (validatedDocuments.length / totalOfDocumentTypes) * 100;
+		return (validatedDocuments.length / total) * 100;
-	}, [validatedDocuments, totalOfDocumentTypes]);
+	}, [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>
 	);
 }

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

@@ -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,22 +68,20 @@ export default function ClientView(props: IProps) {
 			</div>
 			<div className={classes["content"]}>
 				<div className={classes["client-box"]}>
-					<ClientBox customer={customer} />
+					<ClientBox customer={customer} anchorStatus={anchorStatus} />
-					<Link
+					{anchorStatus === AnchorStatus.NOT_ANCHORED && (
-						href={Module.getInstance()
+						<Link
-							.get()
+							href={Module.getInstance()
-							.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", folder.uid ?? "")
+								.get()
-							.replace("[customerUid]", customer.uid ?? "")}>
+								.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", folder.uid ?? "")
-						<Button rightIcon={<DocumentIcon />} variant={EButtonVariant.PRIMARY} fullwidth>
+								.replace("[customerUid]", customer.uid ?? "")}>
-							Demander un document
+							<Button rightIcon={<DocumentIcon />} variant={EButtonVariant.PRIMARY} fullwidth>
-						</Button>
+								Demander un document
-					</Link>
+							</Button>
+						</Link>
+					)}
 				</div>
-				{doesCustomerHaveDocument ? (
+				{doesCustomerHaveDocument ? <DocumentTables documents={customer.documents ?? []}/> : <NoDocument />}
-					<DocumentTables documents={customer.documents ?? []} totalOfDocumentTypes={totalOfDocumentTypes} />
-				) : (
-					<NoDocument />
-				)}
 			</div>
 		</section>
 	);

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

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

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

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

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

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

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

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

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

@@ -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 { folder, progress, onArchive, anchorStatus, isArchived } = 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]);
 
 	return (
 		<section className={classes["root"]}>
@@ -51,26 +41,39 @@ 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"]}>
-						<Link
+						{anchorStatus === AnchorStatus.NOT_ANCHORED && (
-							href={Module.getInstance()
+							<>
-								.get()
+								<Link
-								.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", folder?.uid ?? "")}
+									href={Module.getInstance()
-							title="Modifier les collaborateurs">
+										.get()
-							<IconButton icon={<UserGroupIcon title="Modifier les collaborateurs" />} variant={EIconButtonVariant.NEUTRAL} />
+										.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", folder?.uid ?? "")}
-						</Link>
+									title="Modifier les collaborateurs">
-						<Link
+									<IconButton
-							href={Module.getInstance()
+										icon={<UserGroupIcon title="Modifier les collaborateurs" />}
-								.get()
+										variant={EIconButtonVariant.NEUTRAL}
-								.modules.pages.Folder.pages.EditInformations.props.path.replace("[folderUid]", folder?.uid ?? "")}
+									/>
-							title="Modifier les informations du dossiers">
+								</Link>
+								<Link
+									href={Module.getInstance()
+										.get()
+										.modules.pages.Folder.pages.EditInformations.props.path.replace("[folderUid]", folder?.uid ?? "")}
+									title="Modifier les informations du dossiers">
+									<IconButton
+										icon={<PencilSquareIcon title="Modifier les informations du dossiers" />}
+										variant={EIconButtonVariant.NEUTRAL}
+									/>
+								</Link>
+							</>
+						)}
+						{!isArchived && (
 							<IconButton
-								icon={<PencilSquareIcon title="Modifier les informations du dossiers" />}
+								onClick={onArchive}
-								variant={EIconButtonVariant.NEUTRAL}
+								icon={<ArchiveBoxIcon title="Archiver le dossier" />}
+								variant={EIconButtonVariant.ERROR}
 							/>
-						</Link>
+						)}
-						<IconButton icon={<ArchiveBoxIcon title="Archiver le dossier" />} variant={EIconButtonVariant.ERROR} />
 					</div>
 				</div>
 				<div>

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

@@ -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 }}
+			firstButton={{ children: "Annuler", onClick: onClose }}
-			secondButton={{ text: "Supprimer le dossier", onClick: onDelete }}>
+			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>

src/front/Components/Layouts/Folder/FolderInformation/elements/AnchoringAlertInfo/index.tsx

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

src/front/Components/Layouts/Folder/FolderInformation/elements/AnchoringAlertSuccess/index.tsx

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

src/front/Components/Layouts/Folder/FolderInformation/elements/AnchoringModal/classes.module.scss

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

src/front/Components/Layouts/Folder/FolderInformation/elements/AnchoringModal/index.tsx

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

src/front/Components/Layouts/Folder/FolderInformation/elements/ArchiveModal/classes.module.scss

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

src/front/Components/Layouts/Folder/FolderInformation/elements/ArchiveModal/index.tsx

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

src/front/Components/Layouts/Folder/FolderInformation/elements/DownloadAnchoringProofModal/index.tsx

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

src/front/Components/Layouts/Folder/FolderInformation/elements/RequireAnchoringModal/classes.module.scss

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

src/front/Components/Layouts/Folder/FolderInformation/elements/RequireAnchoringModal/index.tsx

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

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

@@ -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 && (

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

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

src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx

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

src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx

@@ -1,309 +1,5 @@
-import ChevronIcon from "@Assets/Icons/chevron.svg";
+import FolderInformation from "../../Folder/FolderInformation";
-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 BasePage from "../../Base";
+export default function FolderInformationArchived() {
-import classes from "./classes.module.scss";
+	return <FolderInformation isArchived />;
-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}
-		/>
-	);
 }

src/front/Hooks/useOpenable.ts

@@ -1,26 +1,26 @@
 import { useCallback, useState } from "react";
 
-function useOpenable() {
+function useOpenable({ defaultOpen } = { defaultOpen: false }) {
-  const [isOpen, setIsOpen] = useState(false);
+	const [isOpen, setIsOpen] = useState(defaultOpen);
 
-  const open = useCallback(() => {
+	const open = useCallback(() => {
-    setIsOpen(true);
+		setIsOpen(true);
-  }, []);
+	}, []);
 
-  const close = useCallback(() => {
+	const close = useCallback(() => {
-    setIsOpen(false);
+		setIsOpen(false);
-  }, []);
+	}, []);
 
-  const toggle = useCallback(() => {
+	const toggle = useCallback(() => {
-    setIsOpen((prev) => !prev);
+		setIsOpen((prev) => !prev);
-  }, []);
+	}, []);
 
-  return {
+	return {
-    isOpen,
+		isOpen,
-    open,
+		open,
-    close,
+		close,
-    toggle,
+		toggle,
-  };
+	};
 }
 
 export default useOpenable;