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