diff --git a/src/front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp.ts b/src/front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp.ts new file mode 100644 index 00000000..ec7a4d1b --- /dev/null +++ b/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); + } + } +} diff --git a/src/front/Assets/Icons/mail.svg b/src/front/Assets/Icons/mail.svg new file mode 100644 index 00000000..61fc88c6 --- /dev/null +++ b/src/front/Assets/Icons/mail.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/front/Components/DesignSystem/Button/classes.module.scss b/src/front/Components/DesignSystem/Button/classes.module.scss index 1b7192e5..bc86a437 100644 --- a/src/front/Components/DesignSystem/Button/classes.module.scss +++ b/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; diff --git a/src/front/Components/DesignSystem/Button/index.tsx b/src/front/Components/DesignSystem/Button/index.tsx index a9b28008..258a3d63 100644 --- a/src/front/Components/DesignSystem/Button/index.tsx +++ b/src/front/Components/DesignSystem/Button/index.tsx @@ -9,6 +9,7 @@ export enum EButtonVariant { SECONDARY = "secondary", GHOST = "ghost", LINE = "line", + WHITE = "white", } type IProps = { diff --git a/src/front/Components/DesignSystem/Newsletter/classes.module.scss b/src/front/Components/DesignSystem/Newsletter/classes.module.scss new file mode 100644 index 00000000..16b5674a --- /dev/null +++ b/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; + } + } +} diff --git a/src/front/Components/DesignSystem/Newsletter/index.tsx b/src/front/Components/DesignSystem/Newsletter/index.tsx new file mode 100644 index 00000000..e7fa1570 --- /dev/null +++ b/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 { + constructor(props: IProps) { + super(props); + this.state = { + email: "", + errorMessage: "", + successMessage: "", + isNewsletterOpen: this.props.isOpen ?? false, + }; + } + + handleChange = (e: React.ChangeEvent) => { + this.setState({ email: e.target.value }); + }; + + handleSubmit = async (e: React.FormEvent | 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 && ( +
+
+
+ + Restez Informé(e) avec notre Newsletter + + + Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts ! + + {this.state.errorMessage && ( +
+ + {this.state.errorMessage} + +
+ )} + {this.state.successMessage && ( +
+ + {this.state.successMessage} + +
+ )} +
+ +
+
+ +
+ +
+ +
+
+
+ )} + +
+
+ newsletter-icon this.handleNewsletterOpen(this.state.isNewsletterOpen)} + /> +
+
+ + ); + } +} diff --git a/src/front/Components/DesignSystem/Typography/classes.module.scss b/src/front/Components/DesignSystem/Typography/classes.module.scss index 35ad1b15..e3b047b2 100644 --- a/src/front/Components/DesignSystem/Typography/classes.module.scss +++ b/src/front/Components/DesignSystem/Typography/classes.module.scss @@ -159,4 +159,8 @@ &.orange-flash { color: var(--orange-flash); } + + &.white { + color: $white; + } } diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx index 0e812ac4..1cc80368 100644 --- a/src/front/Components/DesignSystem/Typography/index.tsx +++ b/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 { diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx index 097f2d11..5a5f46d0 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 { Cette action sera irréversible. + ) : (
diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx index 6601c2e3..b0a21db8 100644 --- a/src/front/Components/Layouts/Folder/index.tsx +++ b/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 { 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 { Sélectionnez un dossier
+ diff --git a/src/front/version.json b/src/front/version.json index 1d72ac1a..445cf446 100644 --- a/src/front/version.json +++ b/src/front/version.json @@ -1,3 +1,3 @@ { - "version": "v2.2.0" + "version": "v2.3.0" }