4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Newsletter on multi page

Browse Source
This commit is contained in:
Vins 2024-06-19 15:01:48 +02:00
parent d4bc725ccf
commit a3b3f9b74d
5 changed files with 86 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/front/Components/DesignSystem/Newsletter/classes.module.scss
View File

@ -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;
}
}
}

83
src/front/Components/DesignSystem/Newsletter/index.tsx
View File

@ -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<IProps, IState> {
@ -21,6 +24,7 @@ export default class Newsletter extends React.Component<IProps, IState> {
email: "",
errorMessage: "",
successMessage: "",
isNewsletterOpen: false,
};
}
@ -47,45 +51,64 @@ export default class Newsletter extends React.Component<IProps, IState> {
this.setState({ successMessage: "Subscription successful!", email: "" });
};
private handleNewsletterOpen(isNewsletterOpen: boolean): void {
this.setState({ isNewsletterOpen: !isNewsletterOpen });
}
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}
<>
{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>
</div>
)}
{this.state.successMessage && (
<div>
<Typography typo={ITypo.P_16} color={ITypoColor.GREEN_FLASH}>
{this.state.successMessage}
<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>
<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 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>
</Form>
</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>
</div>
</>
);
}
}

2
src/front/Components/Layouts/Folder/FolderInformation/index.tsx
View File

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

20
src/front/Components/Layouts/Folder/classes.module.scss
View File

@ -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;
}
}
}

18
src/front/Components/Layouts/Folder/index.tsx
View File

@ -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<IProps, IState> {
public constructor(props: IProps) {
@ -20,7 +19,6 @@ export default class Folder extends BasePage<IProps, IState> {
this.state = {
selectedFolder: null,
isArchivedModalOpen: false,
isNewsletterOpen: false,
};
this.onSelectedFolder = this.onSelectedFolder.bind(this);
}
@ -37,16 +35,16 @@ export default class Folder extends BasePage<IProps, IState> {
Sélectionnez un dossier
</Typography>
</div>
{this.state.isNewsletterOpen && <Newletter />}
<Newletter />
<div className={classes["newsletter"]}>
{/* <div className={classes["newsletter"]}>
<Image
src={Mail}
alt="newsletter-icon"
className={classes["newsletter-icon"]}
onClick={() => this.handleNewsletterOpen(this.state.isNewsletterOpen)}
/>
</div>
</div> */}
</div>
</div>
</DefaultNotaryDashboard>
@ -57,7 +55,7 @@ export default class Folder extends BasePage<IProps, IState> {
this.setState({ selectedFolder: folder });
}
private handleNewsletterOpen(isNewsletterOpen: boolean): void {
this.setState({ isNewsletterOpen: !isNewsletterOpen });
}
// private handleNewsletterOpen(isNewsletterOpen: boolean): void {
// this.setState({ isNewsletterOpen: !isNewsletterOpen });
// }
}