diff --git a/src/front/Assets/Icons/life_buoy.svg b/src/front/Assets/Icons/life_buoy.svg new file mode 100644 index 00000000..224edada --- /dev/null +++ b/src/front/Assets/Icons/life_buoy.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/front/Components/DesignSystem/Header/classes.module.scss b/src/front/Components/DesignSystem/Header/classes.module.scss index 0d83f71b..5fe25b71 100644 --- a/src/front/Components/DesignSystem/Header/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/classes.module.scss @@ -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; +} diff --git a/src/front/Components/DesignSystem/Header/index.tsx b/src/front/Components/DesignSystem/Header/index.tsx index e28eddb8..c5d7cfe5 100644 --- a/src/front/Components/DesignSystem/Header/index.tsx +++ b/src/front/Components/DesignSystem/Header/index.tsx @@ -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 { @@ -46,6 +53,7 @@ class HeaderClass extends React.Component { isBurgerMenuOpen: false, isNotificationMenuOpen: false, isProfileMenuOpen: false, + cancelAt: null, }; this.openBurgerMenu = this.openBurgerMenu.bind(this); this.closeBurgerMenu = this.closeBurgerMenu.bind(this); @@ -53,59 +61,90 @@ class HeaderClass extends React.Component { 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 ( -
- - - -
- - logo - + <> +
+ + + +
+ + logo + +
+ {this.props.isUserConnected && ( + <> + +
+
+ + help + +
+
+ +
+
+ +
+
+ +
+
+ + )} + {this.props.isOnCustomerLoginPage && ciel-nature}
- {this.props.isUserConnected && ( - <> - -
-
- -
-
- -
-
- -
-
- + {this.state.cancelAt && ( +
+ ; + + Assurez vous de sauvegarder tout ce dont vous avez besoin avant la fin de votre abonnement le{" "} + {this.state.cancelAt.toLocaleDateString()}. + +
)} - {this.props.isOnCustomerLoginPage && ciel-nature} -
+ ); } 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 });