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

248
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,134 +41,158 @@ 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">
<div className={classes["root"]}> {subscription && (
<div className={classes["top-container"]}> <div className={classes["root"]}>
<div className={classes["top-container-title"]}> <div className={classes["top-container"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}> <div className={classes["top-container-title"]}>
Abonnement <Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
</Typography> Abonnement
</Typography>
</div>
<div className={classes["sub-title"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
Nos forfaits sont adaptés à la taille de votre office
</Typography>
</div>
</div> </div>
<div className={classes["sub-title"]}> <div className={classes["forfeits-container"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}> <div
Nos forfaits sont adaptés à la taille de votre office className={classes["forfeit-block"]}
</Typography> data-inactive={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}>
</div> <div className={classes["forfeit-header"]}>
</div> <div className={classes["left"]}>
<div className={classes["forfeits-container"]}> <Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
<div className={classes["forfeit-block"]} data-inactive={forfeitType !== EForfeitType.standard}> Forfait standard
<div className={classes["forfeit-header"]}> </Typography>
<div className={classes["left"]}> <Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}> Plan par utilisateur
Forfait standard
</Typography>
<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
Plan par utilisateur
</Typography>
</div>
{forfeitType === EForfeitType.standard && (
<div className={classes["active-plan"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
Plan actif
</Typography> </Typography>
</div> </div>
)} {subscription.type === "STANDARD" && (
</div> <div className={classes["active-plan"]}>
<div className={classes["separator"]} /> <Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
<div className={classes["price-container"]}> Plan actif
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}> </Typography>
99€ </div>
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}> )}
&nbsp;HT&nbsp; </div>
<div className={classes["separator"]} />
<div className={classes["price-container"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
99€
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
&nbsp;HT&nbsp;
</Typography>
/ mois
</Typography> </Typography>
/ mois <Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
</Typography> + 6,99€ / collaborateur / mois
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}> </Typography>
+ 6,99€ / collaborateur / mois </div>
</Typography> <div className={classes["button-container"]}>
</div> {subscription.type === "UNLIMITED" && (
<div className={classes["button-container"]}>
{forfeitType !== EForfeitType.standard && (
<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 && (
<>
<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}>
Gérer mon abonnement
</Button>
</Link>
<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 Rétrograder mon abonnement
</Button> </Button>
</Link> </Link>
</> )}
)} {subscription.type === "STANDARD" && (
</div> <>
</div> <Link
<div className={classes["forfeit-block"]} data-inactive={forfeitType === EForfeitType.standard}> href={
<div className={classes["forfeit-header"]}> Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Standard.props.path
<div className={classes["left"]}> }>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}> <Button fullwidth variant={EButtonVariant.PRIMARY}>
Forfait illimité Gérer mon abonnement
</Typography> </Button>
<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}> </Link>
Plan par office <Link
</Typography> href={
Module.getInstance().get().modules.pages.Subscription.pages.ManageCollaborators.props.path
}>
<Button fullwidth variant={EButtonVariant.GHOST}>
Ajouter des collaborateurs
</Button>
</Link>
</>
)}
</div> </div>
{forfeitType !== EForfeitType.standard && ( </div>
<div className={classes["active-plan"]}> <div
<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}> className={classes["forfeit-block"]}
Plan actif 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}>
Forfait illimité
</Typography>
<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
Plan par office
</Typography> </Typography>
</div> </div>
)} {subscription.type === "UNLIMITED" && (
</div> <div className={classes["active-plan"]}>
<div className={classes["separator"]} /> <Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
<div className={classes["price-container"]}> Plan actif
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}> </Typography>
249€ </div>
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}> )}
&nbsp;HT&nbsp; </div>
<div className={classes["separator"]} />
<div className={classes["price-container"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
249€
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
&nbsp;HT&nbsp;
</Typography>
/ mois
</Typography> </Typography>
/ mois <Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
</Typography> Sans limite de collaborateurs
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}> </Typography>
Sans limite de collaborateurs </div>
</Typography> <div className={classes["button-container"]}>
</div> {subscription.type === "UNLIMITED" && (
<div className={classes["button-container"]}> <Button fullwidth variant={EButtonVariant.PRIMARY} disabled>
{forfeitType !== EForfeitType.standard && ( Abonnement Max Activé
<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}>
<Button fullwidth variant={EButtonVariant.GHOST}>
Améliorer mon abonnement
</Button> </Button>
</Link> )}
)} {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>
</Link>
)}
</div>
</div> </div>
</div> </div>
<div className={classes["actions-container"]}>
<Button variant={EButtonVariant.LINE} onClick={openCancelSubscription}>
<Typography typo={ITypo.P_18} color={ITypoColor.RED_FLASH}>
Arrêter l'abonnement
</Typography>
</Button>
<Button onClick={manageBilling}>Gérer la facturation</Button>
</div>
</div> </div>
<div className={classes["actions-container"]}> )}
<Button variant={EButtonVariant.LINE} onClick={openCancelSubscription}>
<Typography typo={ITypo.P_18} color={ITypoColor.RED_FLASH}>
Arrêter l'abonnement
</Typography>
</Button>
<Button onClick={manageBilling}>Gérer la facturation</Button>
</div>
</div>
<Confirm <Confirm
isOpen={isCancelSubscriptionOpen} isOpen={isCancelSubscriptionOpen}
onClose={closeCancelSubscription} onClose={closeCancelSubscription}