From a3b3f9b74d0c24694a6052633dae0bafeb88bdaa Mon Sep 17 00:00:00 2001
From: Vins <vincent.alamelle@smart-chain.fr>
Date: Wed, 19 Jun 2024 15:01:48 +0200
Subject: [PATCH] Newsletter on multi page

---
 .../Newsletter/classes.module.scss            | 23 +++++
 .../DesignSystem/Newsletter/index.tsx         | 83 ++++++++++++-------
 .../Folder/FolderInformation/index.tsx        |  2 +
 .../Layouts/Folder/classes.module.scss        | 20 -----
 src/front/Components/Layouts/Folder/index.tsx | 18 ++--
 5 files changed, 86 insertions(+), 60 deletions(-)

diff --git a/src/front/Components/DesignSystem/Newsletter/classes.module.scss b/src/front/Components/DesignSystem/Newsletter/classes.module.scss
index 3800eef5..16b5674a 100644
--- a/src/front/Components/DesignSystem/Newsletter/classes.module.scss
+++ b/src/front/Components/DesignSystem/Newsletter/classes.module.scss
@@ -36,3 +36,26 @@
 		}
 	}
 }
+
+.container-icon {
+	.newsletter {
+		position: absolute;
+		bottom: 44px;
+		right: 48px;
+		background-color: #320756;
+		width: 56px;
+		height: 56px;
+		border-radius: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+
+		.newsletter-icon {
+			position: absolute;
+			width: 24px;
+			height: 24px;
+			font-size: 24px;
+		}
+	}
+}
diff --git a/src/front/Components/DesignSystem/Newsletter/index.tsx b/src/front/Components/DesignSystem/Newsletter/index.tsx
index 9d8b4483..95167245 100644
--- a/src/front/Components/DesignSystem/Newsletter/index.tsx
+++ b/src/front/Components/DesignSystem/Newsletter/index.tsx
@@ -5,6 +5,8 @@ import Button, { EButtonVariant } from "../Button";
 import Typography, { ITypo, ITypoColor } from "../Typography";
 import Mailchimp from "@Front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp";
 import Form from "../Form";
+import Mail from "@Assets/Icons/mail.svg";
+import Image from "next/image";
 
 type IProps = {};
 
@@ -12,6 +14,7 @@ interface IState {
 	email: string;
 	errorMessage: string;
 	successMessage: string;
+	isNewsletterOpen: boolean;
 }
 
 export default class Newsletter extends React.Component<IProps, IState> {
@@ -21,6 +24,7 @@ export default class Newsletter extends React.Component<IProps, IState> {
 			email: "",
 			errorMessage: "",
 			successMessage: "",
+			isNewsletterOpen: false,
 		};
 	}
 
@@ -47,45 +51,64 @@ export default class Newsletter extends React.Component<IProps, IState> {
 		this.setState({ successMessage: "Subscription successful!", email: "" });
 	};
 
+	private handleNewsletterOpen(isNewsletterOpen: boolean): void {
+		this.setState({ isNewsletterOpen: !isNewsletterOpen });
+	}
+
 	public override render(): JSX.Element {
 		return (
-			<div className={classes["container"]}>
-				<div className={classes["root"]}>
-					<div className={classes["text"]}>
-						<Typography typo={ITypo.H3} color={ITypoColor.WHITE}>
-							Restez Informé(e) avec notre Newsletter
-						</Typography>
-						<Typography typo={ITypo.P_18} color={ITypoColor.WHITE}>
-							Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !
-						</Typography>
-						{this.state.errorMessage && (
-							<div>
-								<Typography typo={ITypo.P_ERR_16} color={ITypoColor.RED_FLASH}>
-									{this.state.errorMessage}
+			<>
+				{this.state.isNewsletterOpen && (
+					<div className={classes["container"]}>
+						<div className={classes["root"]}>
+							<div className={classes["text"]}>
+								<Typography typo={ITypo.H3} color={ITypoColor.WHITE}>
+									Restez Informé(e) avec notre Newsletter
 								</Typography>
-							</div>
-						)}
-						{this.state.successMessage && (
-							<div>
-								<Typography typo={ITypo.P_16} color={ITypoColor.GREEN_FLASH}>
-									{this.state.successMessage}
+								<Typography typo={ITypo.P_18} color={ITypoColor.WHITE}>
+									Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !
 								</Typography>
+								{this.state.errorMessage && (
+									<div>
+										<Typography typo={ITypo.P_ERR_16} color={ITypoColor.RED_FLASH}>
+											{this.state.errorMessage}
+										</Typography>
+									</div>
+								)}
+								{this.state.successMessage && (
+									<div>
+										<Typography typo={ITypo.P_16} color={ITypoColor.GREEN_FLASH}>
+											{this.state.successMessage}
+										</Typography>
+									</div>
+								)}
 							</div>
-						)}
-					</div>
 
-					<div className={classes["buttons"]}>
-						<Form onSubmit={this.handleSubmit} className={classes["form"]}>
-							<TextField name="EMAIL" placeholder="Email" onChange={this.handleChange} />
-							<div className={classes["buttons-container"]}>
-								<Button fullwidth type="submit" variant={EButtonVariant.WHITE}>
-									Envoyer
-								</Button>
+							<div className={classes["buttons"]}>
+								<Form onSubmit={this.handleSubmit} className={classes["form"]}>
+									<TextField name="EMAIL" placeholder="Email" onChange={this.handleChange} />
+									<div className={classes["buttons-container"]}>
+										<Button fullwidth type="submit" variant={EButtonVariant.WHITE}>
+											Envoyer
+										</Button>
+									</div>
+								</Form>
 							</div>
-						</Form>
+						</div>
+					</div>
+				)}
+
+				<div className={classes["container-icon"]}>
+					<div className={classes["newsletter"]}>
+						<Image
+							src={Mail}
+							alt="newsletter-icon"
+							className={classes["newsletter-icon"]}
+							onClick={() => this.handleNewsletterOpen(this.state.isNewsletterOpen)}
+						/>
 					</div>
 				</div>
-			</div>
+			</>
 		);
 	}
 }
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
index 097f2d11..73714694 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
@@ -21,6 +21,7 @@ import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import ClientSection from "./ClientSection";
 import Loader from "@Front/Components/DesignSystem/Loader";
+import Newsletter from "@Front/Components/DesignSystem/Newsletter";
 
 export enum AnchorStatus {
 	"VERIFIED_ON_CHAIN" = "VERIFIED_ON_CHAIN",
@@ -230,6 +231,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 										<Typography typo={ITypo.P_16}>Cette action sera irréversible.</Typography>
 									</div>
 								</Confirm>
+								<Newsletter />
 							</div>
 						) : (
 							<div className={classes["no-folder-selected"]}>
diff --git a/src/front/Components/Layouts/Folder/classes.module.scss b/src/front/Components/Layouts/Folder/classes.module.scss
index 25f65c9c..a425a01a 100644
--- a/src/front/Components/Layouts/Folder/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/classes.module.scss
@@ -69,24 +69,4 @@
 			margin-bottom: 24px;
 		}
 	}
-	.newsletter {
-		position: absolute;
-		bottom: 44px;
-		right: 48px;
-		background-color: #320756;
-		width: 56px;
-		height: 56px;
-		border-radius: 50%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		cursor: pointer;
-
-		.newsletter-icon {
-			width: 24px;
-			height: 24px;
-
-			font-size: 24px;
-		}
-	}
 }
diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx
index 72f16926..57ed26c7 100644
--- a/src/front/Components/Layouts/Folder/index.tsx
+++ b/src/front/Components/Layouts/Folder/index.tsx
@@ -5,14 +5,13 @@ import { OfficeFolder } from "le-coffre-resources/dist/Notary";
 import BasePage from "../Base";
 import classes from "./classes.module.scss";
 import Newletter from "@Front/Components/DesignSystem/Newsletter";
-import Image from "next/image";
-import Mail from "@Assets/Icons/mail.svg";
+// import Image from "next/image";
+// import Mail from "@Assets/Icons/mail.svg";
 
 type IProps = {};
 type IState = {
 	selectedFolder: OfficeFolder | null;
 	isArchivedModalOpen: boolean;
-	isNewsletterOpen: boolean;
 };
 export default class Folder extends BasePage<IProps, IState> {
 	public constructor(props: IProps) {
@@ -20,7 +19,6 @@ export default class Folder extends BasePage<IProps, IState> {
 		this.state = {
 			selectedFolder: null,
 			isArchivedModalOpen: false,
-			isNewsletterOpen: false,
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 	}
@@ -37,16 +35,16 @@ export default class Folder extends BasePage<IProps, IState> {
 								Sélectionnez un dossier
 							</Typography>
 						</div>
-						{this.state.isNewsletterOpen && <Newletter />}
+						<Newletter />
 
-						<div className={classes["newsletter"]}>
+						{/* <div className={classes["newsletter"]}>
 							<Image
 								src={Mail}
 								alt="newsletter-icon"
 								className={classes["newsletter-icon"]}
 								onClick={() => this.handleNewsletterOpen(this.state.isNewsletterOpen)}
 							/>
-						</div>
+						</div> */}
 					</div>
 				</div>
 			</DefaultNotaryDashboard>
@@ -57,7 +55,7 @@ export default class Folder extends BasePage<IProps, IState> {
 		this.setState({ selectedFolder: folder });
 	}
 
-	private handleNewsletterOpen(isNewsletterOpen: boolean): void {
-		this.setState({ isNewsletterOpen: !isNewsletterOpen });
-	}
+	// private handleNewsletterOpen(isNewsletterOpen: boolean): void {
+	// 	this.setState({ isNewsletterOpen: !isNewsletterOpen });
+	// }
 }