✨ Toasts working on success upload

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[];
@@ -241,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,
@@ -370,6 +375,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 				fileName: newFile?.file_name ?? "",
 			},
 		];
+		this.openSuccessToast();
 		this.setState(
 			{
 				currentFiles: files,

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/index.scss

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