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

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Vins 2024-06-19 15:03:37 +02:00
commit e2907fe1d3
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 Typography, { ITypo, ITypoColor } from "../Typography";
import Mailchimp from "@Front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp"; import Mailchimp from "@Front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp";
import Form from "../Form"; import Form from "../Form";
import Mail from "@Assets/Icons/mail.svg";
import Image from "next/image";
type IProps = {}; type IProps = {};
@ -12,6 +14,7 @@ interface IState {
email: string; email: string;
errorMessage: string; errorMessage: string;
successMessage: string; successMessage: string;
isNewsletterOpen: boolean;
} }
export default class Newsletter extends React.Component<IProps, IState> { export default class Newsletter extends React.Component<IProps, IState> {
@ -21,6 +24,7 @@ export default class Newsletter extends React.Component<IProps, IState> {
email: "", email: "",
errorMessage: "", errorMessage: "",
successMessage: "", successMessage: "",
isNewsletterOpen: false,
}; };
} }
@ -47,45 +51,64 @@ export default class Newsletter extends React.Component<IProps, IState> {
this.setState({ successMessage: "Subscription successful!", email: "" }); this.setState({ successMessage: "Subscription successful!", email: "" });
}; };
private handleNewsletterOpen(isNewsletterOpen: boolean): void {
this.setState({ isNewsletterOpen: !isNewsletterOpen });
}
public override render(): JSX.Element { public override render(): JSX.Element {
return ( return (
<div className={classes["container"]}> <>
<div className={classes["root"]}> {this.state.isNewsletterOpen && (
<div className={classes["text"]}> <div className={classes["container"]}>
<Typography typo={ITypo.H3} color={ITypoColor.WHITE}> <div className={classes["root"]}>
Restez Informé(e) avec notre Newsletter <div className={classes["text"]}>
</Typography> <Typography typo={ITypo.H3} color={ITypoColor.WHITE}>
<Typography typo={ITypo.P_18} color={ITypoColor.WHITE}> Restez Informé(e) avec notre Newsletter
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> </Typography>
</div> <Typography typo={ITypo.P_18} color={ITypoColor.WHITE}>
)} Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !
{this.state.successMessage && (
<div>
<Typography typo={ITypo.P_16} color={ITypoColor.GREEN_FLASH}>
{this.state.successMessage}
</Typography> </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>
<div className={classes["buttons"]}> <div className={classes["buttons"]}>
<Form onSubmit={this.handleSubmit} className={classes["form"]}> <Form onSubmit={this.handleSubmit} className={classes["form"]}>
<TextField name="EMAIL" placeholder="Email" onChange={this.handleChange} /> <TextField name="EMAIL" placeholder="Email" onChange={this.handleChange} />
<div className={classes["buttons-container"]}> <div className={classes["buttons-container"]}>
<Button fullwidth type="submit" variant={EButtonVariant.WHITE}> <Button fullwidth type="submit" variant={EButtonVariant.WHITE}>
Envoyer Envoyer
</Button> </Button>
</div>
</Form>
</div> </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> </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 classes from "./classes.module.scss";
import ClientSection from "./ClientSection"; import ClientSection from "./ClientSection";
import Loader from "@Front/Components/DesignSystem/Loader"; import Loader from "@Front/Components/DesignSystem/Loader";
import Newsletter from "@Front/Components/DesignSystem/Newsletter";
export enum AnchorStatus { export enum AnchorStatus {
"VERIFIED_ON_CHAIN" = "VERIFIED_ON_CHAIN", "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> <Typography typo={ITypo.P_16}>Cette action sera irréversible.</Typography>
</div> </div>
</Confirm> </Confirm>
<Newsletter />
</div> </div>
) : ( ) : (
<div className={classes["no-folder-selected"]}> <div className={classes["no-folder-selected"]}>

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

@ -69,24 +69,4 @@
margin-bottom: 24px; 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 BasePage from "../Base";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Newletter from "@Front/Components/DesignSystem/Newsletter"; import Newletter from "@Front/Components/DesignSystem/Newsletter";
import Image from "next/image"; // import Image from "next/image";
import Mail from "@Assets/Icons/mail.svg"; // import Mail from "@Assets/Icons/mail.svg";
type IProps = {}; type IProps = {};
type IState = { type IState = {
selectedFolder: OfficeFolder | null; selectedFolder: OfficeFolder | null;
isArchivedModalOpen: boolean; isArchivedModalOpen: boolean;
isNewsletterOpen: boolean;
}; };
export default class Folder extends BasePage<IProps, IState> { export default class Folder extends BasePage<IProps, IState> {
public constructor(props: IProps) { public constructor(props: IProps) {
@ -20,7 +19,6 @@ export default class Folder extends BasePage<IProps, IState> {
this.state = { this.state = {
selectedFolder: null, selectedFolder: null,
isArchivedModalOpen: false, isArchivedModalOpen: false,
isNewsletterOpen: false,
}; };
this.onSelectedFolder = this.onSelectedFolder.bind(this); this.onSelectedFolder = this.onSelectedFolder.bind(this);
} }
@ -37,16 +35,16 @@ export default class Folder extends BasePage<IProps, IState> {
Sélectionnez un dossier Sélectionnez un dossier
</Typography> </Typography>
</div> </div>
{this.state.isNewsletterOpen && <Newletter />} <Newletter />
<div className={classes["newsletter"]}> {/* <div className={classes["newsletter"]}>
<Image <Image
src={Mail} src={Mail}
alt="newsletter-icon" alt="newsletter-icon"
className={classes["newsletter-icon"]} className={classes["newsletter-icon"]}
onClick={() => this.handleNewsletterOpen(this.state.isNewsletterOpen)} onClick={() => this.handleNewsletterOpen(this.state.isNewsletterOpen)}
/> />
</div> </div> */}
</div> </div>
</div> </div>
</DefaultNotaryDashboard> </DefaultNotaryDashboard>
@ -57,7 +55,7 @@ export default class Folder extends BasePage<IProps, IState> {
this.setState({ selectedFolder: folder }); this.setState({ selectedFolder: folder });
} }
private handleNewsletterOpen(isNewsletterOpen: boolean): void { // private handleNewsletterOpen(isNewsletterOpen: boolean): void {
this.setState({ isNewsletterOpen: !isNewsletterOpen }); // this.setState({ isNewsletterOpen: !isNewsletterOpen });
} // }
} }