Merge branch 'dev' into staging

package-lock.json

@@ -28,6 +28,7 @@
 				"react": "18.2.0",
 				"react-dom": "18.2.0",
 				"react-select": "^5.7.2",
+				"react-toastify": "^9.1.3",
 				"sass": "^1.59.2",
 				"sharp": "^0.32.1",
 				"typescript": "4.9.5",
@@ -4085,6 +4086,26 @@
 				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
 			}
 		},
+		"node_modules/react-toastify": {
+			"version": "9.1.3",
+			"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
+			"integrity": "sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==",
+			"dependencies": {
+				"clsx": "^1.1.1"
+			},
+			"peerDependencies": {
+				"react": ">=16",
+				"react-dom": ">=16"
+			}
+		},
+		"node_modules/react-toastify/node_modules/clsx": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+			"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/react-transition-group": {
 			"version": "4.4.5",
 			"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

package.json

@@ -30,6 +30,7 @@
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-select": "^5.7.2",
+		"react-toastify": "^9.1.3",
 		"sass": "^1.59.2",
 		"sharp": "^0.32.1",
 		"typescript": "4.9.5",

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

@@ -18,6 +18,7 @@ import Alert from "../Modal/Alert";
 import GreenCheckIcon from "@Assets/Icons/green-check.svg";
 import Loader from "../Loader";
 import TextAreaField from "../Form/TextareaField";
+import { toast } from "react-toastify";
 
 type IProps = {
 	defaultFiles?: FileCustomer[];
@@ -86,6 +87,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 
 		this.addDocument = this.addDocument.bind(this);
 		this.onFileChange = this.onFileChange.bind(this);
+		this.addFile = this.addFile.bind(this);
 		this.removeFile = this.removeFile.bind(this);
 		this.onDragOver = this.onDragOver.bind(this);
 		this.onDragDrop = this.onDragDrop.bind(this);
@@ -147,44 +149,42 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 							))}
 						</div>
 					</div>
-					{this.props.document.document_status !== EDocumentStatus.VALIDATED && this.state.files.length > 0 && (
+					<div className={classes["documents-container"]}>
-						<div className={classes["documents-container"]}>
+						{this.state.files.map((file) => {
-							{this.state.files.map((file) => {
+							const fileObj = file.file;
-								const fileObj = file.file;
+							if (file.archived) return;
-								if (file.archived) return;
+							return (
-								return (
+								<div className={classes["file-container"]} key={fileObj.name + file.index}>
-									<div className={classes["file-container"]} key={fileObj.name + file.index}>
-										<div className={classes["left-part"]}>
-											<Image src={DocumentCheckIcon} alt="Document check" />
-											<Typography typo={ITypo.P_16} color={ITypoColor.GREY} title={file.fileName ?? fileObj.name}>
-												{this.shortName(file.fileName || fileObj.name)}
-											</Typography>
-										</div>
-										<Image
-											src={CrossIcon}
-											alt="Cross icon"
-											className={classes["cross"]}
-											onClick={this.removeFile}
-											data-file={file.index}
-										/>
-									</div>
-								);
-							})}
-							{this.state.loading && (
-								<div className={classes["file-container"]}>
 									<div className={classes["left-part"]}>
-										<div className={classes["loader"]}>
+										<Image src={DocumentCheckIcon} alt="Document check" />
-											<Loader />
+										<Typography typo={ITypo.P_16} color={ITypoColor.GREY} title={file.fileName ?? fileObj.name}>
-										</div>
+											{this.shortName(file.fileName || fileObj.name)}
-										<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
-											Chargement...
 										</Typography>
 									</div>
-									<div />
+									<Image
+										src={CrossIcon}
+										alt="Cross icon"
+										className={classes["cross"]}
+										onClick={this.removeFile}
+										data-file={file.index}
+									/>
 								</div>
-							)}
+							);
-						</div>
+						})}
-					)}
+						{this.state.loading && (
+							<div className={classes["file-container"]}>
+								<div className={classes["left-part"]}>
+									<div className={classes["loader"]}>
+										<Loader />
+									</div>
+									<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+										Chargement...
+									</Typography>
+								</div>
+								<div />
+							</div>
+						)}
+					</div>
 					{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
 						<div className={classes["bottom-container"]}>
 							<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
@@ -242,6 +242,10 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		}
 	}
 
+	private openSuccessToast() {
+		toast.success("Document envoyé avec succès");
+	}
+
 	private onCloseModalShowRefusedReason() {
 		this.setState({
 			isShowRefusedReasonModalVisible: false,
@@ -343,7 +347,6 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 			alert("Ce fichier est trop volumineux");
 			return false;
 		}
-
 		this.setState({
 			loading: true,
 		});
@@ -372,6 +375,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 				fileName: newFile?.file_name ?? "",
 			},
 		];
+		this.openSuccessToast();
 		this.setState(
 			{
 				currentFiles: files,
@@ -410,8 +414,13 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		const file = files[0];
 
 		try {
-			if (file) this.addFile(file);
+			if (file) {
+				await this.setState({ loading: true }, () => {
+					this.addFile(file);
+				});
+			}
 		} catch (e) {
+			this.setState({ loading: false });
 			console.log(e);
 		}
 	}

src/front/Components/LayoutTemplates/DefaultLayout.tsx

@@ -1,7 +1,8 @@
 import Head from "next/head";
 import { ReactNode } from "react";
 type DefaultLayoutProps = { children: ReactNode };
-
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
 	return (
 		<>
@@ -9,7 +10,10 @@ export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
 				<title>LECoffre</title>
 				{/* <link rel="shortcut icon" href="/favicon.svg" /> */}
 			</Head>
-			<main>{children}</main>
+			<main>
+				{children}
+				<ToastContainer />
+			</main>
 		</>
 	);
 };

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

@@ -59,7 +59,7 @@
 		display: flex;
 		text-align: center;
 		justify-content: center;
-
+		gap: 16px;
 		.delete-folder {
 			display: flex;
 			margin-left: 12px;
@@ -72,12 +72,12 @@
 				margin-left: 0;
 				margin-top: 12px;
 
-				>* {
+				> * {
 					flex: 1;
 				}
 			}
 
-			>* {
+			> * {
 				width: 100%;
 			}
 		}

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

@@ -116,6 +116,13 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									<Button variant={EButtonVariant.GHOST} 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)}>
+											Télécharger la preuve d'ancrage
+										</Button>
+									)}
 								</div>
 							</div>
 						) : (
@@ -171,6 +178,25 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		this.setState({ isArchivedModalOpen: false });
 	}
 
+	private async downloadAnchoringProof(uid?: string) {
+		if (!uid) return;
+
+		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);
+		} catch (e) {
+			console.error(e);
+		}
+	}
+
 	private async getFolder(): Promise<OfficeFolder> {
 		const query = {
 			q: {

src/front/index.scss

@@ -64,3 +64,8 @@ a:hover {
 	font-size: 18px;
 	font-family: Inter;
 }
+
+.Toastify__toast-body {
+	font-size: 14px;
+	font-family: Inter;
+}