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

✨ connect subscription

Browse Source
This commit is contained in:
Maxime Lalo 2024-04-04 17:05:07 +02:00
parent 173481521c
commit c777132077
1 changed files with 137 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
View File

@ -2,7 +2,7 @@ import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Ty
import classes from "./classes.module.scss";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { useCallback, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import useOpenable from "@Front/Hooks/useOpenable";
import MessageBox from "@Front/Components/Elements/MessageBox";
@ -12,6 +12,7 @@ import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscripti
import JwtService from "@Front/Services/JwtService/JwtService";
import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
import { useRouter } from "next/router";
import { Subscription } from "le-coffre-resources/dist/Admin";
export enum EForfeitType {
"standard",
@ -19,7 +20,8 @@ export enum EForfeitType {
}
export default function SubscriptionFacturation() {
const router = useRouter();
const [forfeitType, _setForfeitType] = useState(EForfeitType.standard);
const [subscription, setSubscription] = useState<Subscription | null>(null);
const { close: closeCancelSubscription, isOpen: isCancelSubscriptionOpen, open: openCancelSubscription } = useOpenable();
const { close: closeConfirmation, isOpen: isConfirmationOpen, open: openConfirmation } = useOpenable();
@ -39,8 +41,20 @@ export default function SubscriptionFacturation() {
} catch (error) {}
};
const loadSubscription = useCallback(async () => {
const jwt = JwtService.getInstance().decodeJwt();
const subscription = await Subscriptions.getInstance().get({ where: { office: { uid: jwt?.office_Id } } });
console.log(subscription);
if (!subscription[0]) return;
setSubscription(subscription[0]);
}, []);
useEffect(() => {
loadSubscription();
}, [loadSubscription]);
return (
<DefaultTemplate title="Nouvelle souscription">
{subscription && (
<div className={classes["root"]}>
<div className={classes["top-container"]}>
<div className={classes["top-container-title"]}>
@ -55,7 +69,9 @@ export default function SubscriptionFacturation() {
</div>
</div>
<div className={classes["forfeits-container"]}>
<div className={classes["forfeit-block"]} data-inactive={forfeitType !== EForfeitType.standard}>
<div
className={classes["forfeit-block"]}
data-inactive={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}>
<div className={classes["forfeit-header"]}>
<div className={classes["left"]}>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
@ -65,7 +81,7 @@ export default function SubscriptionFacturation() {
Plan par utilisateur
</Typography>
</div>
{forfeitType === EForfeitType.standard && (
{subscription.type === "STANDARD" && (
<div className={classes["active-plan"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
Plan actif
@ -87,22 +103,28 @@ export default function SubscriptionFacturation() {
</Typography>
</div>
<div className={classes["button-container"]}>
{forfeitType !== EForfeitType.standard && (
<Link href={Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Standard.props.path}>
{subscription.type === "UNLIMITED" && (
<Link
href={Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Standard.props.path}>
<Button fullwidth variant={EButtonVariant.GHOST}>
Rétrograder mon abonnement
</Button>
</Link>
)}
{forfeitType === EForfeitType.standard && (
{subscription.type === "STANDARD" && (
<>
<Link
href={Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Standard.props.path}>
href={
Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Standard.props.path
}>
<Button fullwidth variant={EButtonVariant.PRIMARY}>
Gérer mon abonnement
</Button>
</Link>
<Link href={Module.getInstance().get().modules.pages.Subscription.pages.ManageCollaborators.props.path}>
<Link
href={
Module.getInstance().get().modules.pages.Subscription.pages.ManageCollaborators.props.path
}>
<Button fullwidth variant={EButtonVariant.GHOST}>
Ajouter des collaborateurs
</Button>
@ -111,7 +133,9 @@ export default function SubscriptionFacturation() {
)}
</div>
</div>
<div className={classes["forfeit-block"]} data-inactive={forfeitType === EForfeitType.standard}>
<div
className={classes["forfeit-block"]}
data-inactive={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}>
<div className={classes["forfeit-header"]}>
<div className={classes["left"]}>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
@ -121,7 +145,7 @@ export default function SubscriptionFacturation() {
Plan par office
</Typography>
</div>
{forfeitType !== EForfeitType.standard && (
{subscription.type === "UNLIMITED" && (
<div className={classes["active-plan"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
Plan actif
@ -143,13 +167,14 @@ export default function SubscriptionFacturation() {
</Typography>
</div>
<div className={classes["button-container"]}>
{forfeitType !== EForfeitType.standard && (
{subscription.type === "UNLIMITED" && (
<Button fullwidth variant={EButtonVariant.PRIMARY} disabled>
Abonnement Max Activé
</Button>
)}
{forfeitType === EForfeitType.standard && (
<Link href={Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Illimity.props.path}>
{subscription.type === "STANDARD" && (
<Link
href={Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Illimity.props.path}>
<Button fullwidth variant={EButtonVariant.GHOST}>
Améliorer mon abonnement
</Button>
@ -167,6 +192,7 @@ export default function SubscriptionFacturation() {
<Button onClick={manageBilling}>Gérer la facturation</Button>
</div>
</div>
)}
<Confirm
isOpen={isCancelSubscriptionOpen}
onClose={closeCancelSubscription}