✨ handle delete sent document modal

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

@@ -7,7 +7,6 @@ type IProps = {
 	documentUid: string;
 	isOpen: boolean;
 	onClose?: () => void;
-
 	onDeleteSuccess: (uid: string) => void;
 };
 

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

@@ -0,0 +1,36 @@
+import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
+import Modal from "@Front/Components/DesignSystem/Modal";
+import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
+import React, { useCallback } from "react";
+
+type IProps = {
+	documentUid: string;
+	isOpen: boolean;
+	onClose?: () => void;
+	onDeleteSuccess: (uid: string) => void;
+};
+
+export default function DeleteSentDocumentModal(props: IProps) {
+	const { isOpen, onClose, documentUid, onDeleteSuccess } = props;
+
+	const onDelete = useCallback(
+		() =>
+			Documents.getInstance()
+				.delete(documentUid)
+				.then(() => onDeleteSuccess(documentUid))
+				.then(onClose)
+				.catch((error) => console.warn(error)),
+		[documentUid, onClose, onDeleteSuccess],
+	);
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			onClose={onClose}
+			title={"Supprimer l’envoi de document ?"}
+			firstButton={{ children: "Annuler", onClick: onClose }}
+			secondButton={{ children: "Oui, Supprimer", onClick: onDelete }}>
+			<Typography typo={ETypo.TEXT_MD_LIGHT}>Cette action annulera l'envoi du document.</Typography>
+		</Modal>
+	);
+}

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

@@ -15,6 +15,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 
 import classes from "./classes.module.scss";
 import DeleteAskedDocumentModal from "./DeleteAskedDocumentModal";
+import DeleteSentDocumentModal from "./DeleteSentDocumentModal";
 
 type IProps = {
 	documents: Document[];
@@ -33,7 +34,8 @@ export default function DocumentTables(props: IProps) {
 	const [documents, setDocuments] = useState<Document[]>(documentsProps);
 	const [documentUid, setDocumentUid] = useState<string | null>(null);
 
-	const deleteAskedOocumentModal = useOpenable();
+	const deleteAskedDocumentModal = useOpenable();
+	const deleteSentDocumentModal = useOpenable();
 
 	useEffect(() => {
 		setDocuments(documentsProps);
@@ -43,9 +45,18 @@ export default function DocumentTables(props: IProps) {
 		(uid: string | undefined) => {
 			if (!uid) return;
 			setDocumentUid(uid);
-			deleteAskedOocumentModal.open();
+			deleteAskedDocumentModal.open();
 		},
-		[deleteAskedOocumentModal],
+		[deleteAskedDocumentModal],
+	);
+
+	const openDeleteSentDocumentModal = useCallback(
+		(uid: string | undefined) => {
+			if (!uid) return;
+			setDocumentUid(uid);
+			deleteSentDocumentModal.open();
+		},
+		[deleteSentDocumentModal],
 	);
 
 	const onDownload = useCallback((doc: Document) => {
@@ -190,13 +201,13 @@ export default function DocumentTables(props: IProps) {
 						actions: (
 							<div className={classes["actions"]}>
 								<IconButton onClick={() => onDownload(document)} icon={<ArrowDownTrayIcon />} />
-								<IconButton icon={<TrashIcon onClick={() => openDeleteAskedDocumentModal(document.uid)} />} />
+								<IconButton icon={<TrashIcon onClick={() => openDeleteSentDocumentModal(document.uid)} />} />
 							</div>
 						),
 					};
 				})
 				.filter((document) => document !== null) as IRowProps[],
-		[documents, onDownload, openDeleteAskedDocumentModal],
+		[documents, onDownload, openDeleteSentDocumentModal],
 	);
 
 	const progress = useMemo(() => {
@@ -227,12 +238,20 @@ export default function DocumentTables(props: IProps) {
 			{refusedDocuments.length > 0 && <Table header={getHeader("Demandé le")} rows={refusedDocuments} />}
 			{sentDocuments.length > 0 && <Table header={getHeader("Envoyé le")} rows={sentDocuments} />}
 			{documentUid && (
-				<DeleteAskedDocumentModal
-					isOpen={deleteAskedOocumentModal.isOpen}
-					onClose={deleteAskedOocumentModal.close}
-					onDeleteSuccess={handleDelete}
-					documentUid={documentUid}
-				/>
+				<>
+					<DeleteAskedDocumentModal
+						isOpen={deleteAskedDocumentModal.isOpen}
+						onClose={deleteAskedDocumentModal.close}
+						onDeleteSuccess={handleDelete}
+						documentUid={documentUid}
+					/>
+					<DeleteSentDocumentModal
+						isOpen={deleteSentDocumentModal.isOpen}
+						onClose={deleteSentDocumentModal.close}
+						onDeleteSuccess={handleDelete}
+						documentUid={documentUid}
+					/>
+				</>
 			)}
 		</div>
 	);