Loading téléchargement preuve d'ancrage

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

@@ -677,7 +677,8 @@
 		text-transform: inherit;
 	}
 
-	&[disabled="true"] {
+	&:disabled {
 		opacity: var(--opacity-disabled, 0.3);
+		pointer-events: none;
 	}
 }

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

@@ -2,6 +2,7 @@ import classNames from "classnames";
 import React from "react";
 
 import classes from "./classes.module.scss";
+import Loader from "../Loader";
 
 export enum EButtonVariant {
 	PRIMARY = "primary",
@@ -57,18 +58,23 @@ export default function Button(props: IButtonProps) {
 	} = props;
 
 	const fullwidthattr = fullwidth.toString();
-	const isloadingattr = isLoading.toString();
 
-	const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr, sizing: size, styletype };
+	const attributes = { ...props, variant, disabled, type, fullwidthattr, sizing: size, styletype };
 	delete attributes.fullwidth;
 	delete attributes.leftIcon;
 	delete attributes.rightIcon;
+	delete attributes.isLoading;
 
 	return (
-		<button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}>
+		<button
-			{leftIcon}
+			{...attributes}
+			disabled={disabled || isLoading}
+			onClick={onClick}
+			className={classNames(classes["root"], className)}
+			type={type}>
+			{!isLoading && leftIcon}
 			{children}
-			{rightIcon}
+			{!isLoading ? rightIcon : <Loader />}
 		</button>
 	);
 }

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

@@ -5,11 +5,5 @@
 }
 
 .root {
-	width: 100%;
-	height: 100%;
-	border-radius: 50%;
-	border: 8px solid;
-	border-color: var(--color-neutral-50);
-	border-right-color: var(--color-info-500-soft);
 	animation: s2 1s infinite linear;
 }

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

@@ -1,4 +1,6 @@
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
 import React from "react";
+
 import classes from "./classes.module.scss";
 
 interface IProps {
@@ -6,6 +8,6 @@ interface IProps {
 }
 export default class Loader extends React.Component<IProps> {
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}></div>;
+		return <ArrowPathIcon className={classes["root"]} />;
 	}
 }

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

@@ -1,6 +1,7 @@
 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 Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import { ArrowDownOnSquareIcon } from "@heroicons/react/24/outline";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
 import React, { useCallback } from "react";
 
@@ -13,9 +14,15 @@ type IProps = {
 export default function DownloadAnchoringProofModal(props: IProps) {
 	const { isOpen, onClose, folder } = props;
 
+	const [isLoading, setIsLoading] = React.useState(false);
+	const [error, setError] = React.useState<string | null>(null);
+
 	const downloadAnchoringProof = useCallback(async () => {
 		if (!folder?.uid) return;
 		try {
+			debugger;
+			setError(null);
+			setIsLoading(true);
 			const file = await OfficeFolderAnchors.getInstance().download(folder.uid);
 			const url = window.URL.createObjectURL(file);
 			const a = document.createElement("a");
@@ -26,22 +33,41 @@ export default function DownloadAnchoringProofModal(props: IProps) {
 			a.click();
 			window.URL.revokeObjectURL(url);
 			onClose?.();
+			setIsLoading(false);
 		} catch (e) {
 			console.warn(e);
+			setIsLoading(false);
+			setError("Une erreur est survenue lors du téléchargement de la preuve d'ancrage");
 		}
 	}, [folder?.folder_number, folder?.name, folder.uid, onClose]);
 
+	const onCloseModal = useCallback(() => {
+		setError(null);
+		setIsLoading(false);
+		onClose?.();
+	}, [onClose]);
+
 	return (
 		<Modal
 			isOpen={isOpen}
 			onClose={onClose}
-			title={"Félicitations ! Dossier ancré avec succès"}
+			title={isLoading ? "Téléchargement en cours..." : "Félicitations ! Dossier ancré avec succès"}
-			firstButton={{ children: "Fermer", onClick: onClose }}
+			firstButton={{ children: "Fermer", onClick: onCloseModal }}
-			secondButton={{ children: "Télécharger la preuve d’ancrage", onClick: downloadAnchoringProof }}>
+			secondButton={{
+				children: "Télécharger la preuve d’ancrage",
+				onClick: downloadAnchoringProof,
+				isLoading: isLoading,
+				rightIcon: <ArrowDownOnSquareIcon />,
+			}}>
 			<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>
+			{error && (
+				<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.COLOR_ERROR_600}>
+					{error}
+				</Typography>
+			)}
 		</Modal>
 	);
 }