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

✨ Bandeau abonnement

Browse Source
This commit is contained in:
Maxime Lalo 2024-04-23 15:13:34 +02:00
parent b09af4df47
commit 5284445697
2 changed files with 86 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -13,6 +13,11 @@ 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 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",
@ -33,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> {
@ -47,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);
@ -54,64 +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["help-section"]}> Assurez vous de sauvegarder tout ce dont vous avez besoin avant la fin de votre abonnement le{" "}
<Link href="https://tally.so/r/mBGaNY" target="blank"> {this.state.cancelAt.toLocaleDateString()}.
<Image src={LifeBuoy} alt="help" /> </Typography>
</Link> </div>
</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>
); );
} }
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 });