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

Merge branch 'staging' into preprod

Browse Source
This commit is contained in:
Maxime Lalo 2024-04-23 15:13:59 +02:00
commit 885e5bed83
3 changed files with 98 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,3 @@
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.364 4.13604L12.8284 7.67157M12.8284 13.3284L16.364 16.864M7.17157 7.67157L3.63604 4.13604M7.17157 13.3284L3.63604 16.864M19 10.5C19 15.4706 14.9706 19.5 10 19.5C5.02944 19.5 1 15.4706 1 10.5C1 5.52944 5.02944 1.5 10 1.5C14.9706 1.5 19 5.52944 19 10.5ZM14 10.5C14 12.7091 12.2091 14.5 10 14.5C7.79086 14.5 6 12.7091 6 10.5C6 8.29086 7.79086 6.5 10 6.5C12.2091 6.5 14 8.29086 14 10.5Z" stroke="black" stroke-width="2" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 558 B

19
src/front/Components/DesignSystem/Header/classes.module.scss
View File

@ -46,6 +46,14 @@
margin-right: 32px; margin-right: 32px;
} }
} }
.help-section {
display: inline-flex;
cursor: pointer;
> :first-child {
margin-right: 32px;
}
}
} }
.burger-menu { .burger-menu {
@ -61,3 +69,14 @@
} }
} }
} }
.subscription-line {
position: sticky;
top: 83px;
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
background-color: var(--grey-soft);
padding: 14px 0;
}

113
src/front/Components/DesignSystem/Header/index.tsx
View File

@ -12,6 +12,12 @@ import Module from "@Front/Config/Module";
import Head from "next/head"; import Head from "next/head";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import LogoCielNatureIcon from "./logo-ciel-notaires.jpeg"; import LogoCielNatureIcon from "./logo-ciel-notaires.jpeg";
import LifeBuoy from "@Assets/Icons/life_buoy.svg";
import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
import JwtService from "@Front/Services/JwtService/JwtService";
import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
import Typography, { ITypo, ITypoColor } from "../Typography";
import { InformationCircleIcon } from "@heroicons/react/24/outline";
enum EHeaderOpeningState { enum EHeaderOpeningState {
OPEN = "open", OPEN = "open",
@ -32,6 +38,7 @@ type IState = {
isBurgerMenuOpen: boolean; isBurgerMenuOpen: boolean;
isNotificationMenuOpen: boolean; isNotificationMenuOpen: boolean;
isProfileMenuOpen: boolean; isProfileMenuOpen: boolean;
cancelAt: Date | null;
}; };
class HeaderClass extends React.Component<IPropsClass, IState> { class HeaderClass extends React.Component<IPropsClass, IState> {
@ -46,6 +53,7 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
isBurgerMenuOpen: false, isBurgerMenuOpen: false,
isNotificationMenuOpen: false, isNotificationMenuOpen: false,
isProfileMenuOpen: false, isProfileMenuOpen: false,
cancelAt: null,
}; };
this.openBurgerMenu = this.openBurgerMenu.bind(this); this.openBurgerMenu = this.openBurgerMenu.bind(this);
this.closeBurgerMenu = this.closeBurgerMenu.bind(this); this.closeBurgerMenu = this.closeBurgerMenu.bind(this);
@ -53,59 +61,90 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
this.closeNotificationMenu = this.closeNotificationMenu.bind(this); this.closeNotificationMenu = this.closeNotificationMenu.bind(this);
this.closeProfileMenu = this.closeProfileMenu.bind(this); this.closeProfileMenu = this.closeProfileMenu.bind(this);
this.openProfileMenu = this.openProfileMenu.bind(this); this.openProfileMenu = this.openProfileMenu.bind(this);
this.loadSubscription = this.loadSubscription.bind(this);
} }
public override render(): JSX.Element { public override render(): JSX.Element {
return ( return (
<div className={classes["root"]} data-open={this.state.open}> <>
<Head> <div className={classes["root"]} data-open={this.state.open}>
<link rel="shortcut icon" href={"/favicon.svg"} /> <Head>
</Head> <link rel="shortcut icon" href={"/favicon.svg"} />
<div className={classes["logo-container"]}> </Head>
<Link href={"#"}> <div className={classes["logo-container"]}>
<Image src={LogoIcon} alt="logo" className={classes["logo"]} /> <Link href={"#"}>
</Link> <Image src={LogoIcon} alt="logo" className={classes["logo"]} />
</Link>
</div>
{this.props.isUserConnected && (
<>
<Navigation />
<div className={classes["right-section"]}>
<div className={classes["help-section"]}>
<Link href="https://tally.so/r/mBGaNY" target="blank">
<Image src={LifeBuoy} alt="help" />
</Link>
</div>
<div className={classes["notification-section"]}>
<Notifications
isModalOpen={this.state.isNotificationMenuOpen}
openNotificationModal={this.openNotificationMenu}
closeNotificationModal={this.closeNotificationMenu}
/>
</div>
<div className={classes["profile-section"]}>
<Profile
isModalOpen={this.state.isProfileMenuOpen}
closeProfileModal={this.closeProfileMenu}
openProfileModal={this.openProfileMenu}
/>
</div>
<div className={classes["burger-menu"]}>
<BurgerMenu
isModalOpen={this.state.isBurgerMenuOpen}
closeBurgerMenu={this.closeBurgerMenu}
openBurgerMenu={this.openBurgerMenu}
/>
</div>
</div>
</>
)}
{this.props.isOnCustomerLoginPage && <Image width={70} height={70} alt="ciel-nature" src={LogoCielNatureIcon}></Image>}
</div> </div>
{this.props.isUserConnected && ( {this.state.cancelAt && (
<> <div className={classes["subscription-line"]}>
<Navigation /> <InformationCircleIcon height="24" />;
<div className={classes["right-section"]}> <Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
<div className={classes["notification-section"]}> Assurez vous de sauvegarder tout ce dont vous avez besoin avant la fin de votre abonnement le{" "}
<Notifications {this.state.cancelAt.toLocaleDateString()}.
isModalOpen={this.state.isNotificationMenuOpen} </Typography>
openNotificationModal={this.openNotificationMenu} </div>
closeNotificationModal={this.closeNotificationMenu}
/>
</div>
<div className={classes["profile-section"]}>
<Profile
isModalOpen={this.state.isProfileMenuOpen}
closeProfileModal={this.closeProfileMenu}
openProfileModal={this.openProfileMenu}
/>
</div>
<div className={classes["burger-menu"]}>
<BurgerMenu
isModalOpen={this.state.isBurgerMenuOpen}
closeBurgerMenu={this.closeBurgerMenu}
openBurgerMenu={this.openBurgerMenu}
/>
</div>
</div>
</>
)} )}
{this.props.isOnCustomerLoginPage && <Image width={70} height={70} alt="ciel-nature" src={LogoCielNatureIcon}></Image>} </>
</div>
); );
} }
public override componentDidMount() { public override componentDidMount() {
this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window)); this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window));
this.loadSubscription();
} }
public override componentWillUnmount() { public override componentWillUnmount() {
this.onWindowResize(); this.onWindowResize();
} }
public async loadSubscription() {
const jwt = JwtService.getInstance().decodeJwt();
const subscription = await Subscriptions.getInstance().get({ where: { office: { uid: jwt?.office_Id } } });
if (subscription[0]) {
const stripeSubscription = await Stripe.getInstance().getStripeSubscriptionByUid(subscription[0].stripe_subscription_id!);
if (stripeSubscription.cancel_at !== null)
this.setState({
...this.state,
cancelAt: new Date(stripeSubscription.cancel_at! * 1000),
});
}
}
private onResize(window: Window) { private onResize(window: Window) {
if (window.innerWidth > this.headerBreakpoint && this.state.isBurgerMenuOpen) this.setState({ isBurgerMenuOpen: false }); if (window.innerWidth > this.headerBreakpoint && this.state.isBurgerMenuOpen) this.setState({ isBurgerMenuOpen: false });
if (window.innerWidth < this.headerBreakpoint && this.state.isProfileMenuOpen) this.setState({ isProfileMenuOpen: false }); if (window.innerWidth < this.headerBreakpoint && this.state.isProfileMenuOpen) this.setState({ isProfileMenuOpen: false });