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

done

Browse Source
This commit is contained in:
Vins 2024-06-18 11:11:50 +02:00
parent 332eb9cda7
commit d4bc725ccf
10 changed files with 173 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp.ts Normal file
View File

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

3
src/front/Assets/Icons/mail.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.75 3.75V14.25C20.75 15.4926 19.7426 16.5 18.5 16.5H3.5C2.25736 16.5 1.25 15.4926 1.25 14.25V3.75M20.75 3.75C20.75 2.50736 19.7426 1.5 18.5 1.5H3.5C2.25736 1.5 1.25 2.50736 1.25 3.75M20.75 3.75V3.99271C20.75 4.77405 20.3447 5.49945 19.6792 5.90894L12.1792 10.5243C11.4561 10.9694 10.5439 10.9694 9.82078 10.5243L2.32078 5.90894C1.65535 5.49945 1.25 4.77405 1.25 3.99271V3.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 574 B

27
src/front/Components/DesignSystem/Button/classes.module.scss
View File

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

1
src/front/Components/DesignSystem/Button/index.tsx
View File

@ -9,6 +9,7 @@ export enum EButtonVariant {
SECONDARY = "secondary",
GHOST = "ghost",
LINE = "line",
WHITE = "white",
}
type IProps = {

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

@ -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;
}
}
}
gap: 24px;
.text {
margin-bottom: 12px;
}
}
.modal-content {
display: flex;
flex-direction: column;
gap: 16px;
gap: 24px;
}
.error-message {
color: var(--red-flash);
margin-top: 8px;
.form {
display: flex;
flex-direction: column;
gap: 4px;
}
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
.buttons {
display: flex;
flex-direction: column;
gap: 4px;
}
}
.response {
margin-top: 10px;
}
}

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

@ -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<IProps, IState> {
this.setState({ email: e.target.value });
};
handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
handleSubmit = async (e: React.FormEvent<HTMLFormElement> | 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<IProps, IState> {
return;
}
Mailchimp.getInstance().post({ email: this.state.email });
// Clear error message
this.setState({ errorMessage: "" });
@ -46,14 +50,41 @@ export default class Newsletter extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return (
<div className={classes["container"]}>
<h2>Restez Informé(e) avec notre Newsletter</h2>
<p className="subtitle">Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !</p>
<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.GHOST}>
<Button fullwidth type="submit" variant={EButtonVariant.WHITE}>
Envoyer
</Button>
</div>
</Form>
</div>
</div>
</div>
);
}

4
src/front/Components/DesignSystem/Typography/classes.module.scss
View File

@ -159,4 +159,8 @@
&.orange-flash {
color: var(--orange-flash);
}
&.white {
color: $white;
}
}

1
src/front/Components/DesignSystem/Typography/index.tsx
View File

@ -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<IProps, IState> {

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

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

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

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