Preprod (#166)

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,61 @@
+.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;
+		}
+	}
+}
+
+.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;
+		}
+	}
+}

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

@@ -0,0 +1,116 @@
+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";
+import Mail from "@Assets/Icons/mail.svg";
+import Image from "next/image";
+
+type IProps = {
+	isOpen?: boolean;
+};
+
+interface IState {
+	email: string;
+	errorMessage: string;
+	successMessage: string;
+	isNewsletterOpen: boolean;
+}
+
+export default class Newsletter extends React.Component<IProps, IState> {
+	constructor(props: IProps) {
+		super(props);
+		this.state = {
+			email: "",
+			errorMessage: "",
+			successMessage: "",
+			isNewsletterOpen: this.props.isOpen ?? false,
+		};
+	}
+
+	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: "L'adresse email que vous avez saisie est déjà inscrite ou est invalide.", 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: "Félicitations ! Vous êtes maintenant inscrit(e).", email: "" });
+	};
+
+	private handleNewsletterOpen(isNewsletterOpen: boolean): void {
+		this.setState({ isNewsletterOpen: !isNewsletterOpen });
+	}
+
+	public override render(): JSX.Element {
+		return (
+			<>
+				{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>
+								<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>
+				)}
+
+				<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>
+			</>
+		);
+	}
+}

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/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 isOpen={false} />
 							</div>
 						) : (
 							<div className={classes["no-folder-selected"]}>

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

@@ -4,6 +4,7 @@ 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";
 
 type IProps = {};
 type IState = {
@@ -15,7 +16,7 @@ export default class Folder extends BasePage<IProps, IState> {
 		super(props);
 		this.state = {
 			selectedFolder: null,
-			isArchivedModalOpen: false,
+			isArchivedModalOpen: true,
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 	}
@@ -32,6 +33,7 @@ export default class Folder extends BasePage<IProps, IState> {
 								Sélectionnez un dossier
 							</Typography>
 						</div>
+						<Newletter isOpen />
 					</div>
 				</div>
 			</DefaultNotaryDashboard>

src/front/version.json

@@ -1,3 +1,3 @@
 {
-	"version": "v2.2.0"
+	"version": "v2.3.0"
 }