done

src/front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp.ts

@@ -0,0 +1,35 @@
+import BaseNotary from "../BaseNotary";
+
+// export interface IPostMailchimpParams {
+// 	email: string;
+// }
+
+export default class Mailchimp extends BaseNotary {
+	private static instance: Mailchimp;
+	private readonly baseURl = this.namespaceUrl.concat("/mailchimp");
+
+	private constructor() {
+		super();
+	}
+
+	public static getInstance() {
+		if (!this.instance) {
+			return new this();
+		} else {
+			return this.instance;
+		}
+	}
+
+	/**
+	 * @description : Add to mail list
+	 */
+	public async post(body: any) {
+		const url = new URL(this.baseURl);
+		try {
+			return await this.postRequest(url, body);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+}

src/front/Assets/Icons/mail.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.75 3.75V14.25C20.75 15.4926 19.7426 16.5 18.5 16.5H3.5C2.25736 16.5 1.25 15.4926 1.25 14.25V3.75M20.75 3.75C20.75 2.50736 19.7426 1.5 18.5 1.5H3.5C2.25736 1.5 1.25 2.50736 1.25 3.75M20.75 3.75V3.99271C20.75 4.77405 20.3447 5.49945 19.6792 5.90894L12.1792 10.5243C11.4561 10.9694 10.5439 10.9694 9.82078 10.5243L2.32078 5.90894C1.65535 5.49945 1.25 4.77405 1.25 3.99271V3.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -91,6 +91,33 @@
 		}
 	}
 
+	&[variant="white"] {
+		color: $pink-flash;
+		background-color: white;
+		border-color: $pink-flash;
+		padding: 24px 48px;
+		font-weight: 400;
+		font-size: 18px;
+		line-height: 22px;
+
+		svg {
+			path {
+				stroke: $white;
+			}
+		}
+
+		&:hover {
+			border-color: $pink-hover;
+			color: $pink-hover;
+		}
+
+		&:disabled {
+			border-color: $pink-soft;
+			background-color: $pink-soft;
+			pointer-events: none;
+		}
+	}
+
 	&[fullwidthattr="true"] {
 		width: 100%;
 		flex: 1;

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

@@ -9,6 +9,7 @@ export enum EButtonVariant {
 	SECONDARY = "secondary",
 	GHOST = "ghost",
 	LINE = "line",
+	WHITE = "white",
 }
 
 type IProps = {

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

@@ -1,154 +1,38 @@
 .container {
-	padding: 24px;
+	padding: 4px;
-	background-color: #3d006f; // Adjusted to match the background color in the image
+	background-color: #320756; // Adjusted to match the background color in the image
 	border-radius: 10px;
-	color: #fff;
+	max-width: 504px;
-	font-family: "Arial", sans-serif;
-	max-width: 400px;
 	margin: auto;
-	text-align: center;
+	text-align: left;
+	position: absolute;
+	bottom: 114px;
+	right: 48px;
 
 	.root {
-		padding: 24px;
+		margin: 44px;
-		background-color: var(--white);
+		background-color: #320756;
-		border: 1px dashed #e7e7e7;
 		height: fit-content;
-
-		&[data-drag-over="true"] {
-			border: 1px dashed var(--grey);
-		}
-
-		&.validated {
-			border: 1px dashed var(--green-flash);
-		}
-
-		.top-container {
-			display: flex;
-			align-items: center;
-
-			.left {
-				margin-right: 28px;
-			}
-
-			.separator {
-				background-color: #939393;
-				width: 1px;
-				align-self: stretch;
-			}
-
-			.right {
-				margin-left: 18px;
-
-				.validated {
-					color: var(--green-flash);
-				}
-
-				.refused-button {
-					font-size: 14px;
-					color: var(--re-hover);
-					margin-left: 8px;
-				}
-
-				.title {
-					display: flex;
-					align-items: center;
-					gap: 8px;
-				}
-			}
-		}
-
-		.documents-container {
-			display: flex;
-			flex-direction: column;
-			gap: 16px;
-			margin-top: 16px;
-
-			.file-container {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-
-				.left-part {
-					display: flex;
-					align-items: center;
-					gap: 8px;
-					.loader {
-						width: 32px;
-						height: 32px;
-					}
-				}
-
-				.cross {
-					cursor: pointer;
-				}
-			}
-		}
-
-		.bottom-container {
-			margin-top: 16px;
-
-			.add-button {
-				.add-document {
-					display: flex;
-					align-items: center;
-					gap: 14px;
-				}
-			}
-		}
-
-		.text {
-			margin-bottom: 12px;
-		}
-	}
-
-	.modal-content {
 		display: flex;
 		flex-direction: column;
-		gap: 16px;
+		gap: 24px;
-	}
 
-	.error-message {
+		.text {
-		color: var(--red-flash);
+			display: flex;
-		margin-top: 8px;
+			flex-direction: column;
-	}
+			gap: 24px;
+		}
 
-	h2 {
+		.form {
-		font-size: 24px;
+			display: flex;
-		margin-bottom: 8px;
+			flex-direction: column;
-	}
+			gap: 4px;
+		}
 
-	.subtitle {
+		.buttons {
-		font-size: 16px;
+			display: flex;
-		margin-bottom: 20px;
+			flex-direction: column;
-	}
+			gap: 4px;
-
-	.email-input {
-		width: 100%;
-		padding: 10px;
-		border: 1px solid #ccc;
-		border-radius: 5px;
-		margin-bottom: 20px;
-		font-size: 16px;
-		color: #333;
-	}
-
-	.submit-button {
-		width: 100%;
-		padding: 10px;
-		background-color: #e91e63; // Adjusted to match the button color in the image
-		border: none;
-		border-radius: 5px;
-		font-size: 16px;
-		color: #fff;
-		cursor: pointer;
-		transition: background-color 0.3s;
-
-		&:hover {
-			background-color: #d81b60; // Darker shade for hover effect
 		}
 	}
-
-	.response {
-		margin-top: 10px;
-	}
 }

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

@@ -2,6 +2,9 @@ import React from "react";
 import classes from "./classes.module.scss";
 import TextField from "../Form/TextField";
 import Button, { EButtonVariant } from "../Button";
+import Typography, { ITypo, ITypoColor } from "../Typography";
+import Mailchimp from "@Front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp";
+import Form from "../Form";
 
 type IProps = {};
 
@@ -25,9 +28,9 @@ export default class Newsletter extends React.Component<IProps, IState> {
 		this.setState({ email: e.target.value });
 	};
 
-	handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+	handleSubmit = async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
+		if (!e) return;
 		e.preventDefault();
-		console.log("submit");
 
 		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 		if (!emailRegex.test(this.state.email)) {
@@ -35,6 +38,7 @@ export default class Newsletter extends React.Component<IProps, IState> {
 			return;
 		}
 
+		Mailchimp.getInstance().post({ email: this.state.email });
 		// Clear error message
 		this.setState({ errorMessage: "" });
 
@@ -46,13 +50,40 @@ export default class Newsletter extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["container"]}>
-				<h2>Restez Informé(e) avec notre Newsletter</h2>
+				<div className={classes["root"]}>
-				<p className="subtitle">Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !</p>
+					<div className={classes["text"]}>
-				<TextField name="EMAIL" placeholder="Email" onChange={this.handleChange} />
+						<Typography typo={ITypo.H3} color={ITypoColor.WHITE}>
-				<div className={classes["buttons-container"]}>
+							Restez Informé(e) avec notre Newsletter
-					<Button fullwidth type="submit" variant={EButtonVariant.GHOST}>
+						</Typography>
-						Envoyer
+						<Typography typo={ITypo.P_18} color={ITypoColor.WHITE}>
-					</Button>
+							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 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>
 				</div>
 			</div>
 		);

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

@@ -159,4 +159,8 @@
 	&.orange-flash {
 		color: var(--orange-flash);
 	}
+
+	&.white {
+		color: $white;
+	}
 }

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

@@ -41,6 +41,7 @@ export enum ITypoColor {
 	GREEN_FLASH = "green-flash",
 	ORANGE_FLASH = "orange-flash",
 	RED_FLASH = "red-flash",
+	WHITE = "white",
 }
 
 export default class Typography extends React.Component<IProps, IState> {

src/front/Components/Layouts/Folder/classes.module.scss

@@ -69,4 +69,24 @@
 			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;
+		}
+	}
 }

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

@@ -5,11 +5,14 @@ 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";
 
 type IProps = {};
 type IState = {
 	selectedFolder: OfficeFolder | null;
 	isArchivedModalOpen: boolean;
+	isNewsletterOpen: boolean;
 };
 export default class Folder extends BasePage<IProps, IState> {
 	public constructor(props: IProps) {
@@ -17,6 +20,7 @@ export default class Folder extends BasePage<IProps, IState> {
 		this.state = {
 			selectedFolder: null,
 			isArchivedModalOpen: false,
+			isNewsletterOpen: false,
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 	}
@@ -33,7 +37,16 @@ export default class Folder extends BasePage<IProps, IState> {
 								Sélectionnez un dossier
 							</Typography>
 						</div>
-						<Newletter />
+						{this.state.isNewsletterOpen && <Newletter />}
+
+						<div className={classes["newsletter"]}>
+							<Image
+								src={Mail}
+								alt="newsletter-icon"
+								className={classes["newsletter-icon"]}
+								onClick={() => this.handleNewsletterOpen(this.state.isNewsletterOpen)}
+							/>
+						</div>
 					</div>
 				</div>
 			</DefaultNotaryDashboard>
@@ -43,4 +56,8 @@ export default class Folder extends BasePage<IProps, IState> {
 	private onSelectedFolder(folder: OfficeFolder): void {
 		this.setState({ selectedFolder: folder });
 	}
+
+	private handleNewsletterOpen(isNewsletterOpen: boolean): void {
+		this.setState({ isNewsletterOpen: !isNewsletterOpen });
+	}
 }