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

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Maxime Lalo 2024-04-23 15:13:45 +02:00
commit 64f8afe353
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;
}
}
.help-section {
display: inline-flex;
cursor: pointer;
> :first-child {
margin-right: 32px;
}
}
}
.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;
}

39
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 { 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, { ITypo, ITypoColor } from "../Typography";
import { InformationCircleIcon } from "@heroicons/react/24/outline";
enum EHeaderOpeningState {
OPEN = "open",
@ -32,6 +38,7 @@ type IState = {
isBurgerMenuOpen: boolean;
isNotificationMenuOpen: boolean;
isProfileMenuOpen: boolean;
cancelAt: Date | null;
};
class HeaderClass extends React.Component<IPropsClass, IState> {
@ -46,6 +53,7 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
isBurgerMenuOpen: false,
isNotificationMenuOpen: false,
isProfileMenuOpen: false,
cancelAt: null,
};
this.openBurgerMenu = this.openBurgerMenu.bind(this);
this.closeBurgerMenu = this.closeBurgerMenu.bind(this);
@ -53,9 +61,12 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
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"} />
@ -69,6 +80,11 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
<>
<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}
@ -95,17 +111,40 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
)}
{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={ITypo.P_16} color={ITypoColor.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 });