Merge branch 'dev' into staging

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}>
-			{leftIcon}
+		<button
+			{...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/DesignSystem/RadioBox/index.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import Tooltip from "../ToolTip";
 import Typography, { ETypo, ETypoColor } from "../Typography";
 import classes from "./classes.module.scss";
+import classNames from "classnames";
 
 type IProps = {
 	name: string;
@@ -23,7 +24,7 @@ export default class RadioBox extends React.Component<IProps> {
 	public override render(): JSX.Element {
 		return (
 			<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
-				<label className={classes["root"]}>
+				<label className={classNames(classes["root"], this.props.disabled && classes["disabled"])}>
 					<input
 						type="radio"
 						name={this.props.name}

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

@@ -86,6 +86,54 @@ export default function DesignSystem() {
 			<Newsletter isOpen={false} />
 			<div className={classes["root"]}>
 				<div />
+				<div className={classes["rows"]}>
+					<CheckboxesInputElement
+						option={{
+							label: "Default",
+							value: "all",
+							description: "Description",
+						}}
+						toolTip="test"
+					/>
+					<CheckboxesInputElement
+						option={{
+							label: "Checked",
+							value: "all",
+							description: "Description",
+						}}
+						toolTip="test"
+						checked={true}
+					/>
+					<CheckboxesInputElement
+						option={{
+							label: "Disabled",
+							value: "all",
+							description: "Description",
+						}}
+						toolTip="test"
+						disabled={true}
+					/>
+				</div>
+
+				<div className={classes["rows"]}>
+					<RadioBox name="document" value={"new client"} description="Test" label="Créer un document" toolTip="test" />
+					<RadioBox
+						name="document"
+						value={"new client"}
+						description="Test"
+						label="Créer un document"
+						toolTip="test"
+						defaultChecked={true}
+					/>
+					<RadioBox
+						name="document"
+						value={"new client"}
+						description="Test"
+						label="Créer un document"
+						toolTip="test"
+						disabled={true}
+					/>
+				</div>
 				<div className={classes["components"]}>
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Autocomplete Multi Select</Typography>
 
@@ -946,54 +994,6 @@ export default function DesignSystem() {
 						variant={EAlertVariant.NEUTRAL}
 					/>
 				</div>
-				<div className={classes["rows"]}>
-					<CheckboxesInputElement
-						option={{
-							label: "Default",
-							value: "all",
-							description: "Description",
-						}}
-						toolTip="test"
-					/>
-					<CheckboxesInputElement
-						option={{
-							label: "Checked",
-							value: "all",
-							description: "Description",
-						}}
-						toolTip="test"
-						checked={true}
-					/>
-					<CheckboxesInputElement
-						option={{
-							label: "Disabled",
-							value: "all",
-							description: "Description",
-						}}
-						toolTip="test"
-						disabled={true}
-					/>
-				</div>
-
-				<div className={classes["rows"]}>
-					<RadioBox name="document" value={"new client"} description="Test" label="Créer un document" toolTip="test" />
-					<RadioBox
-						name="document"
-						value={"new client"}
-						description="Test"
-						label="Créer un document"
-						toolTip="test"
-						defaultChecked={true}
-					/>
-					<RadioBox
-						name="document"
-						value={"new client"}
-						description="Test"
-						label="Créer un document"
-						toolTip="test"
-						disabled={true}
-					/>
-				</div>
 
 				<Footer />
 			</div>

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"}
-			firstButton={{ children: "Fermer", onClick: onClose }}
-			secondButton={{ children: "Télécharger la preuve d’ancrage", onClick: downloadAnchoringProof }}>
+			title={isLoading ? "Téléchargement en cours..." : "Félicitations ! Dossier ancré avec succès"}
+			firstButton={{ children: "Fermer", onClick: onCloseModal }}
+			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>
 	);
 }