184 lines
5.9 KiB
TypeScript
184 lines
5.9 KiB
TypeScript
import React from "react";
|
|
import classes from "./classes.module.scss";
|
|
import Image from "next/image";
|
|
import LogoIcon from "@Assets/logo_standard_neutral.svg";
|
|
import Link from "next/link";
|
|
import Navigation from "./Navigation";
|
|
import Notifications from "./Notifications";
|
|
import Profile from "./Profile";
|
|
import BurgerMenu from "./BurgerMenu";
|
|
import WindowStore from "@Front/Stores/WindowStore";
|
|
import Module from "@Front/Config/Module";
|
|
import Head from "next/head";
|
|
import { useRouter } from "next/router";
|
|
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, { ETypo, ETypoColor } from "../Typography";
|
|
import { InformationCircleIcon } from "@heroicons/react/24/outline";
|
|
|
|
enum EHeaderOpeningState {
|
|
OPEN = "open",
|
|
CLOSED = "closed",
|
|
IDLE = "idle",
|
|
}
|
|
|
|
type IProps = {
|
|
isUserConnected: boolean;
|
|
};
|
|
|
|
type IPropsClass = IProps & {
|
|
isOnCustomerLoginPage: boolean;
|
|
};
|
|
|
|
type IState = {
|
|
open: EHeaderOpeningState;
|
|
isBurgerMenuOpen: boolean;
|
|
isNotificationMenuOpen: boolean;
|
|
isProfileMenuOpen: boolean;
|
|
cancelAt: Date | null;
|
|
};
|
|
|
|
class HeaderClass extends React.Component<IPropsClass, IState> {
|
|
private onWindowResize = () => {};
|
|
private headerBreakpoint = 1300;
|
|
|
|
constructor(props: IPropsClass) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
open: EHeaderOpeningState.OPEN,
|
|
isBurgerMenuOpen: false,
|
|
isNotificationMenuOpen: false,
|
|
isProfileMenuOpen: false,
|
|
cancelAt: null,
|
|
};
|
|
this.openBurgerMenu = this.openBurgerMenu.bind(this);
|
|
this.closeBurgerMenu = this.closeBurgerMenu.bind(this);
|
|
this.openNotificationMenu = this.openNotificationMenu.bind(this);
|
|
this.closeNotificationMenu = this.closeNotificationMenu.bind(this);
|
|
this.closeProfileMenu = this.closeProfileMenu.bind(this);
|
|
this.openProfileMenu = this.openProfileMenu.bind(this);
|
|
this.loadSubscription = this.loadSubscription.bind(this);
|
|
}
|
|
|
|
public override render(): JSX.Element {
|
|
return (
|
|
<>
|
|
<div className={classes["root"]} data-open={this.state.open}>
|
|
<Head>
|
|
<link rel="shortcut icon" href={"/favicon.svg"} />
|
|
</Head>
|
|
<div className={classes["logo-container"]}>
|
|
<Link href={Module.getInstance().get().modules.pages.Folder.props.path}>
|
|
<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>
|
|
{this.state.cancelAt && (
|
|
<div className={classes["subscription-line"]}>
|
|
<InformationCircleIcon height="24" />;
|
|
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
|
Assurez vous de sauvegarder tout ce dont vous avez besoin avant la fin de votre abonnement le{" "}
|
|
{this.state.cancelAt.toLocaleDateString()}.
|
|
</Typography>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
public override componentDidMount() {
|
|
this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window));
|
|
this.loadSubscription();
|
|
}
|
|
|
|
public override componentWillUnmount() {
|
|
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) {
|
|
if (window.innerWidth > this.headerBreakpoint && this.state.isBurgerMenuOpen) this.setState({ isBurgerMenuOpen: false });
|
|
if (window.innerWidth < this.headerBreakpoint && this.state.isProfileMenuOpen) this.setState({ isProfileMenuOpen: false });
|
|
}
|
|
|
|
private openBurgerMenu() {
|
|
this.setState({ isBurgerMenuOpen: true });
|
|
}
|
|
|
|
private closeBurgerMenu() {
|
|
this.setState({ isBurgerMenuOpen: false });
|
|
}
|
|
|
|
private openNotificationMenu() {
|
|
this.setState({ isNotificationMenuOpen: true });
|
|
}
|
|
|
|
private closeNotificationMenu() {
|
|
this.setState({ isNotificationMenuOpen: false });
|
|
}
|
|
|
|
private openProfileMenu() {
|
|
this.setState({ isProfileMenuOpen: true });
|
|
}
|
|
|
|
private closeProfileMenu() {
|
|
this.setState({ isProfileMenuOpen: false });
|
|
}
|
|
}
|
|
|
|
export default function Header(props: IProps) {
|
|
const router = useRouter();
|
|
const { pathname } = router;
|
|
let isActive = Module.getInstance().get().modules.pages.CustomersLogin.props.path === pathname;
|
|
return <HeaderClass {...props} isOnCustomerLoginPage={isActive} />;
|
|
}
|