From 332eb9cda78996069b1a0718c98d581a7e597643 Mon Sep 17 00:00:00 2001 From: Vins Date: Tue, 18 Jun 2024 09:39:36 +0200 Subject: [PATCH 1/7] WIP --- .../Newsletter/classes.module.scss | 154 ++++++++++++++++++ .../DesignSystem/Newsletter/index.tsx | 60 +++++++ src/front/Components/Layouts/Folder/index.tsx | 2 + 3 files changed, 216 insertions(+) create mode 100644 src/front/Components/DesignSystem/Newsletter/classes.module.scss create mode 100644 src/front/Components/DesignSystem/Newsletter/index.tsx 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..1b280bdc --- /dev/null +++ b/src/front/Components/DesignSystem/Newsletter/classes.module.scss @@ -0,0 +1,154 @@ +.container { + padding: 24px; + background-color: #3d006f; // Adjusted to match the background color in the image + border-radius: 10px; + color: #fff; + font-family: "Arial", sans-serif; + max-width: 400px; + margin: auto; + text-align: center; + + .root { + padding: 24px; + background-color: var(--white); + 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; + } + + .error-message { + color: var(--red-flash); + margin-top: 8px; + } + + h2 { + font-size: 24px; + margin-bottom: 8px; + } + + .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 + } + } + + .response { + margin-top: 10px; + } +} diff --git a/src/front/Components/DesignSystem/Newsletter/index.tsx b/src/front/Components/DesignSystem/Newsletter/index.tsx new file mode 100644 index 00000000..63e99194 --- /dev/null +++ b/src/front/Components/DesignSystem/Newsletter/index.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import classes from "./classes.module.scss"; +import TextField from "../Form/TextField"; +import Button, { EButtonVariant } from "../Button"; + +type IProps = {}; + +interface IState { + email: string; + errorMessage: string; + successMessage: string; +} + +export default class Newsletter extends React.Component { + constructor(props: IProps) { + super(props); + this.state = { + email: "", + errorMessage: "", + successMessage: "", + }; + } + + handleChange = (e: React.ChangeEvent) => { + this.setState({ email: e.target.value }); + }; + + handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + console.log("submit"); + + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(this.state.email)) { + this.setState({ errorMessage: "Invalid email address", successMessage: "" }); + return; + } + + // 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 ( +
+

Restez Informé(e) avec notre Newsletter

+

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

+ +
+ +
+
+ ); + } +} diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx index 6601c2e3..8abfb38a 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 = { @@ -32,6 +33,7 @@ export default class Folder extends BasePage { Sélectionnez un dossier + From d4bc725ccf7fe6523e4560ebf591b57243c56772 Mon Sep 17 00:00:00 2001 From: Vins Date: Tue, 18 Jun 2024 11:11:50 +0200 Subject: [PATCH 2/7] done --- .../LeCoffreApi/Notary/Mailchimp/Mailchimp.ts | 35 ++++ src/front/Assets/Icons/mail.svg | 3 + .../DesignSystem/Button/classes.module.scss | 27 +++ .../Components/DesignSystem/Button/index.tsx | 1 + .../Newsletter/classes.module.scss | 164 +++--------------- .../DesignSystem/Newsletter/index.tsx | 49 +++++- .../Typography/classes.module.scss | 4 + .../DesignSystem/Typography/index.tsx | 1 + .../Layouts/Folder/classes.module.scss | 20 +++ src/front/Components/Layouts/Folder/index.tsx | 19 +- 10 files changed, 173 insertions(+), 150 deletions(-) create mode 100644 src/front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp.ts create mode 100644 src/front/Assets/Icons/mail.svg 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 }); + } } From a3b3f9b74d0c24694a6052633dae0bafeb88bdaa Mon Sep 17 00:00:00 2001 From: Vins Date: Wed, 19 Jun 2024 15:01:48 +0200 Subject: [PATCH 3/7] Newsletter on multi page --- .../Newsletter/classes.module.scss | 23 +++++ .../DesignSystem/Newsletter/index.tsx | 83 ++++++++++++------- .../Folder/FolderInformation/index.tsx | 2 + .../Layouts/Folder/classes.module.scss | 20 ----- src/front/Components/Layouts/Folder/index.tsx | 18 ++-- 5 files changed, 86 insertions(+), 60 deletions(-) diff --git a/src/front/Components/DesignSystem/Newsletter/classes.module.scss b/src/front/Components/DesignSystem/Newsletter/classes.module.scss index 3800eef5..16b5674a 100644 --- a/src/front/Components/DesignSystem/Newsletter/classes.module.scss +++ b/src/front/Components/DesignSystem/Newsletter/classes.module.scss @@ -36,3 +36,26 @@ } } } + +.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 index 9d8b4483..95167245 100644 --- a/src/front/Components/DesignSystem/Newsletter/index.tsx +++ b/src/front/Components/DesignSystem/Newsletter/index.tsx @@ -5,6 +5,8 @@ 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 = {}; @@ -12,6 +14,7 @@ interface IState { email: string; errorMessage: string; successMessage: string; + isNewsletterOpen: boolean; } export default class Newsletter extends React.Component { @@ -21,6 +24,7 @@ export default class Newsletter extends React.Component { email: "", errorMessage: "", successMessage: "", + isNewsletterOpen: false, }; } @@ -47,45 +51,64 @@ export default class Newsletter extends React.Component { this.setState({ successMessage: "Subscription successful!", email: "" }); }; + private handleNewsletterOpen(isNewsletterOpen: boolean): void { + this.setState({ isNewsletterOpen: !isNewsletterOpen }); + } + 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 ! - - {this.state.errorMessage && ( -
- - {this.state.errorMessage} + <> + {this.state.isNewsletterOpen && ( +
+
+
+ + Restez Informé(e) avec notre Newsletter -
- )} - {this.state.successMessage && ( -
- - {this.state.successMessage} + + 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/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx index 097f2d11..73714694 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/classes.module.scss b/src/front/Components/Layouts/Folder/classes.module.scss index 25f65c9c..a425a01a 100644 --- a/src/front/Components/Layouts/Folder/classes.module.scss +++ b/src/front/Components/Layouts/Folder/classes.module.scss @@ -69,24 +69,4 @@ 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 72f16926..57ed26c7 100644 --- a/src/front/Components/Layouts/Folder/index.tsx +++ b/src/front/Components/Layouts/Folder/index.tsx @@ -5,14 +5,13 @@ 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"; +// 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) { @@ -20,7 +19,6 @@ export default class Folder extends BasePage { this.state = { selectedFolder: null, isArchivedModalOpen: false, - isNewsletterOpen: false, }; this.onSelectedFolder = this.onSelectedFolder.bind(this); } @@ -37,16 +35,16 @@ export default class Folder extends BasePage { Sélectionnez un dossier
- {this.state.isNewsletterOpen && } + -
+ {/*
newsletter-icon this.handleNewsletterOpen(this.state.isNewsletterOpen)} /> -
+
*/}
@@ -57,7 +55,7 @@ export default class Folder extends BasePage { this.setState({ selectedFolder: folder }); } - private handleNewsletterOpen(isNewsletterOpen: boolean): void { - this.setState({ isNewsletterOpen: !isNewsletterOpen }); - } + // private handleNewsletterOpen(isNewsletterOpen: boolean): void { + // this.setState({ isNewsletterOpen: !isNewsletterOpen }); + // } } From f342ca9c80b37153a4d2a6d541cf968a3f94ab39 Mon Sep 17 00:00:00 2001 From: Vins Date: Thu, 20 Jun 2024 09:51:50 +0200 Subject: [PATCH 4/7] Auto open newsletter --- .../DesignSystem/Newsletter/index.tsx | 77 ++++++++++--------- src/front/Components/Layouts/Folder/index.tsx | 19 +---- 2 files changed, 42 insertions(+), 54 deletions(-) diff --git a/src/front/Components/DesignSystem/Newsletter/index.tsx b/src/front/Components/DesignSystem/Newsletter/index.tsx index 95167245..bc26cd19 100644 --- a/src/front/Components/DesignSystem/Newsletter/index.tsx +++ b/src/front/Components/DesignSystem/Newsletter/index.tsx @@ -8,7 +8,9 @@ import Form from "../Form"; import Mail from "@Assets/Icons/mail.svg"; import Image from "next/image"; -type IProps = {}; +type IProps = { + isOpen?: boolean; +}; interface IState { email: string; @@ -58,45 +60,46 @@ export default class Newsletter extends React.Component { 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} - -
- )} -
+ {this.state.isNewsletterOpen || + (this.props.isOpen && ( +
+
+
+ + 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/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx index 57ed26c7..b0a21db8 100644 --- a/src/front/Components/Layouts/Folder/index.tsx +++ b/src/front/Components/Layouts/Folder/index.tsx @@ -5,8 +5,6 @@ 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 = { @@ -18,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); } @@ -35,16 +33,7 @@ export default class Folder extends BasePage { Sélectionnez un dossier
- - - {/*
- newsletter-icon this.handleNewsletterOpen(this.state.isNewsletterOpen)} - /> -
*/} +
@@ -54,8 +43,4 @@ export default class Folder extends BasePage { private onSelectedFolder(folder: OfficeFolder): void { this.setState({ selectedFolder: folder }); } - - // private handleNewsletterOpen(isNewsletterOpen: boolean): void { - // this.setState({ isNewsletterOpen: !isNewsletterOpen }); - // } } From 3c7daecad70d0fba1970cebaaa4164b0f5da4da2 Mon Sep 17 00:00:00 2001 From: Vins Date: Thu, 20 Jun 2024 09:55:01 +0200 Subject: [PATCH 5/7] changed version --- src/front/version.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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" } From 90926a278e533c13267f06fa00a227febfe5bc9b Mon Sep 17 00:00:00 2001 From: Vins Date: Thu, 20 Jun 2024 10:15:46 +0200 Subject: [PATCH 6/7] Fixed newsletter --- .../DesignSystem/Newsletter/index.tsx | 75 +++++++++---------- .../Folder/FolderInformation/index.tsx | 2 +- 2 files changed, 38 insertions(+), 39 deletions(-) diff --git a/src/front/Components/DesignSystem/Newsletter/index.tsx b/src/front/Components/DesignSystem/Newsletter/index.tsx index bc26cd19..c81e6c78 100644 --- a/src/front/Components/DesignSystem/Newsletter/index.tsx +++ b/src/front/Components/DesignSystem/Newsletter/index.tsx @@ -26,7 +26,7 @@ export default class Newsletter extends React.Component { email: "", errorMessage: "", successMessage: "", - isNewsletterOpen: false, + isNewsletterOpen: this.props.isOpen ?? false, }; } @@ -60,46 +60,45 @@ export default class Newsletter extends React.Component { public override render(): JSX.Element { return ( <> - {this.state.isNewsletterOpen || - (this.props.isOpen && ( -
-
-
- - 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} - -
- )} -
+ {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} + +
+ )} +
-
-
- -
- -
- -
+
+
+ +
+ +
+
- ))} +
+ )}
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx index 73714694..5a5f46d0 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx +++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx @@ -231,7 +231,7 @@ class FolderInformationClass extends BasePage { Cette action sera irréversible.
- +
) : (
From 2b75db2a4af59561d59e65369b8135b3d08a3d2e Mon Sep 17 00:00:00 2001 From: Vins Date: Thu, 20 Jun 2024 10:31:27 +0200 Subject: [PATCH 7/7] Changed newsletter message --- src/front/Components/DesignSystem/Newsletter/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/front/Components/DesignSystem/Newsletter/index.tsx b/src/front/Components/DesignSystem/Newsletter/index.tsx index c81e6c78..e7fa1570 100644 --- a/src/front/Components/DesignSystem/Newsletter/index.tsx +++ b/src/front/Components/DesignSystem/Newsletter/index.tsx @@ -40,7 +40,7 @@ export default class Newsletter extends React.Component { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(this.state.email)) { - this.setState({ errorMessage: "Invalid email address", successMessage: "" }); + this.setState({ errorMessage: "L'adresse email que vous avez saisie est déjà inscrite ou est invalide.", successMessage: "" }); return; } @@ -50,7 +50,7 @@ export default class Newsletter extends React.Component { // Normally, form submission would happen here // For demo purposes, we'll just show a success message - this.setState({ successMessage: "Subscription successful!", email: "" }); + this.setState({ successMessage: "Félicitations ! Vous êtes maintenant inscrit(e).", email: "" }); }; private handleNewsletterOpen(isNewsletterOpen: boolean): void {