Merge branch 'dev' into staging

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

@@ -0,0 +1,38 @@
+.container {
+	padding: 4px;
+	background-color: #320756; // Adjusted to match the background color in the image
+	border-radius: 10px;
+	max-width: 504px;
+	margin: auto;
+	text-align: left;
+	position: absolute;
+	bottom: 114px;
+	right: 48px;
+
+	.root {
+		margin: 44px;
+		background-color: #320756;
+		height: fit-content;
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+
+		.text {
+			display: flex;
+			flex-direction: column;
+			gap: 24px;
+		}
+
+		.form {
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+		}
+
+		.buttons {
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+		}
+	}
+}

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

@@ -0,0 +1,91 @@
+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 = {};
+
+interface IState {
+	email: string;
+	errorMessage: string;
+	successMessage: string;
+}
+
+export default class Newsletter extends React.Component<IProps, IState> {
+	constructor(props: IProps) {
+		super(props);
+		this.state = {
+			email: "",
+			errorMessage: "",
+			successMessage: "",
+		};
+	}
+
+	handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+		this.setState({ email: e.target.value });
+	};
+
+	handleSubmit = async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
+		if (!e) return;
+		e.preventDefault();
+
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		if (!emailRegex.test(this.state.email)) {
+			this.setState({ errorMessage: "Invalid email address", successMessage: "" });
+			return;
+		}
+
+		Mailchimp.getInstance().post({ email: this.state.email });
+		// Clear error message
+		this.setState({ errorMessage: "" });
+
+		// Normally, form submission would happen here
+		// For demo purposes, we'll just show a success message
+		this.setState({ successMessage: "Subscription successful!", email: "" });
+	};
+
+	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}
+								</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

@@ -4,11 +4,15 @@ 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) {
@@ -16,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);
 	}
@@ -32,6 +37,16 @@ export default class Folder extends BasePage<IProps, IState> {
 								Sélectionnez un dossier
 							</Typography>
 						</div>
+						{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>
@@ -41,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 });
+	}
 }