115 lines
3.4 KiB
TypeScript
115 lines
3.4 KiB
TypeScript
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 = {};
|
|
|
|
interface IState {
|
|
email: string;
|
|
errorMessage: string;
|
|
successMessage: string;
|
|
isNewsletterOpen: boolean;
|
|
}
|
|
|
|
export default class Newsletter extends React.Component<IProps, IState> {
|
|
constructor(props: IProps) {
|
|
super(props);
|
|
this.state = {
|
|
email: "",
|
|
errorMessage: "",
|
|
successMessage: "",
|
|
isNewsletterOpen: false,
|
|
};
|
|
}
|
|
|
|
handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
|
this.setState({ email: e.target.value });
|
|
};
|
|
|
|
handleSubmit = async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
|
|
if (!e) return;
|
|
e.preventDefault();
|
|
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailRegex.test(this.state.email)) {
|
|
this.setState({ errorMessage: "Invalid email address", 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: "Subscription successful!", email: "" });
|
|
};
|
|
|
|
private handleNewsletterOpen(isNewsletterOpen: boolean): void {
|
|
this.setState({ isNewsletterOpen: !isNewsletterOpen });
|
|
}
|
|
|
|
public override render(): JSX.Element {
|
|
return (
|
|
<>
|
|
{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>
|
|
<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 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>
|
|
</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>
|
|
</>
|
|
);
|
|
}
|
|
}
|