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 index 1b280bdc..3800eef5 100644 --- a/src/front/Components/DesignSystem/Newsletter/classes.module.scss +++ b/src/front/Components/DesignSystem/Newsletter/classes.module.scss @@ -1,154 +1,38 @@ .container { - padding: 24px; - background-color: #3d006f; // Adjusted to match the background color in the image + padding: 4px; + background-color: #320756; // Adjusted to match the background color in the image border-radius: 10px; - color: #fff; - font-family: "Arial", sans-serif; - max-width: 400px; + max-width: 504px; margin: auto; - text-align: center; + text-align: left; + position: absolute; + bottom: 114px; + right: 48px; .root { - padding: 24px; - background-color: var(--white); - border: 1px dashed #e7e7e7; + margin: 44px; + background-color: #320756; 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 { - color: var(--red-flash); - margin-top: 8px; - } + .text { + display: flex; + flex-direction: column; + gap: 24px; + } - h2 { - font-size: 24px; - margin-bottom: 8px; - } + .form { + display: flex; + flex-direction: column; + gap: 4px; + } - .subtitle { - font-size: 16px; - margin-bottom: 20px; - } - - .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 + .buttons { + display: flex; + flex-direction: column; + gap: 4px; } } - - .response { - margin-top: 10px; - } } diff --git a/src/front/Components/DesignSystem/Newsletter/index.tsx b/src/front/Components/DesignSystem/Newsletter/index.tsx index 63e99194..9d8b4483 100644 --- a/src/front/Components/DesignSystem/Newsletter/index.tsx +++ b/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 { this.setState({ email: e.target.value }); }; - handleSubmit = (e: React.FormEvent) => { + handleSubmit = async (e: React.FormEvent | 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 { 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 { public override render(): JSX.Element { return (
-

Restez Informé(e) avec notre Newsletter

-

Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !

- -
- +
+
+ + 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} + +
+ )} +
+ +
+
+ +
+ +
+ +
); 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/classes.module.scss b/src/front/Components/Layouts/Folder/classes.module.scss index a425a01a..25f65c9c 100644 --- a/src/front/Components/Layouts/Folder/classes.module.scss +++ b/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; + } + } } diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx index 8abfb38a..72f16926 100644 --- a/src/front/Components/Layouts/Folder/index.tsx +++ b/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 { public constructor(props: IProps) { @@ -17,6 +20,7 @@ export default class Folder extends BasePage { this.state = { selectedFolder: null, isArchivedModalOpen: false, + isNewsletterOpen: false, }; this.onSelectedFolder = this.onSelectedFolder.bind(this); } @@ -33,7 +37,16 @@ export default class Folder extends BasePage { Sélectionnez un dossier
- + {this.state.isNewsletterOpen && } + +
+ newsletter-icon this.handleNewsletterOpen(this.state.isNewsletterOpen)} + /> +
@@ -43,4 +56,8 @@ export default class Folder extends BasePage { private onSelectedFolder(folder: OfficeFolder): void { this.setState({ selectedFolder: folder }); } + + private handleNewsletterOpen(isNewsletterOpen: boolean): void { + this.setState({ isNewsletterOpen: !isNewsletterOpen }); + } }