104 lines
4.1 KiB
TypeScript
104 lines
4.1 KiB
TypeScript
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
|
import classes from "./classes.module.scss";
|
|
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
|
import MessageBox from "@Front/Components/Elements/MessageBox";
|
|
import SubscriptionClientInfos from "../Components/SubscriptionClientInfos";
|
|
import Button from "@Front/Components/DesignSystem/Button";
|
|
import Link from "next/link";
|
|
import Module from "@Front/Config/Module";
|
|
import { EForfeitType } from "../SubscriptionFacturation";
|
|
import SubscribeCheckoutTicket, { EPaymentFrequencyFront as EPaymentFrequency } from "../Components/SubscribeCheckoutTicket";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
|
|
import JwtService from "@Front/Services/JwtService/JwtService";
|
|
import { Subscription } from "le-coffre-resources/dist/Admin";
|
|
import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
|
|
import CookieService from "@Front/Services/CookieService/CookieService";
|
|
|
|
export default function SubscriptionSuccess() {
|
|
const [subscription, setSubscription] = useState<Subscription | null>(null);
|
|
const [customer, setCustomer] = useState<any | null>(null);
|
|
|
|
const loadSubscription = useCallback(async () => {
|
|
const jwt = JwtService.getInstance().decodeJwt();
|
|
const subscription = await Subscriptions.getInstance().get({ where: { office: { uid: jwt?.office_Id } } });
|
|
if (!subscription[0]) return;
|
|
setSubscription(subscription[0]);
|
|
const customer = await Stripe.getInstance().getCustomerBySubscriptionId(subscription[0].stripe_subscription_id!);
|
|
setCustomer(customer);
|
|
}, []);
|
|
|
|
const refreshToken = useCallback(async () => {
|
|
CookieService.getInstance().deleteCookie("leCoffreAccessToken");
|
|
const refreshToken = CookieService.getInstance().getCookie("leCoffreRefreshToken");
|
|
if (!refreshToken) return;
|
|
await JwtService.getInstance().forceRefreshToken(refreshToken);
|
|
await loadSubscription();
|
|
}, [loadSubscription]);
|
|
|
|
const getFrequency = useCallback(() => {
|
|
if (!subscription) return;
|
|
const start = new Date(subscription.start_date);
|
|
const end = new Date(subscription.end_date);
|
|
|
|
const diffTime = Math.abs(end.getTime() - start.getTime());
|
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|
return diffDays >= 365 ? EPaymentFrequency.yearly : EPaymentFrequency.monthly;
|
|
}, [subscription]);
|
|
|
|
useEffect(() => {
|
|
refreshToken();
|
|
}, [refreshToken]);
|
|
|
|
return (
|
|
<DefaultTemplate title="Abonnement réussi">
|
|
{subscription && customer && (
|
|
<div className={classes["root"]}>
|
|
<div className={classes["left"]}>
|
|
<div className={classes["title"]}>
|
|
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
|
|
Abonnement réussi !
|
|
</Typography>
|
|
</div>
|
|
<div className={classes["alert"]}>
|
|
<MessageBox type={"success"}>
|
|
Votre transaction a été effectuée avec succès !
|
|
<br />
|
|
<br />
|
|
Votre abonnement a été pris en compte et est désormais actif.
|
|
</MessageBox>
|
|
</div>
|
|
<div className={classes["separator"]} />
|
|
<div className={classes["client-infos"]}>
|
|
<SubscriptionClientInfos customer={customer} />
|
|
</div>
|
|
<div className={classes["separator"]} />
|
|
{subscription.type === "STANDARD" && (
|
|
<Link
|
|
href={
|
|
Module.getInstance().get().modules.pages.Subscription.pages.Invite.props.path +
|
|
`?nbOfCollaborators=${subscription.nb_seats ?? 0}`
|
|
}>
|
|
<Button>Inviter vos collaborateurs</Button>
|
|
</Link>
|
|
)}
|
|
{subscription.type === "UNLIMITED" && (
|
|
<Link href={Module.getInstance().get().modules.pages.Subscription.pages.Invite.props.path}>
|
|
<Button>Inviter vos collaborateurs</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
<div className={classes["right"]}>
|
|
<SubscribeCheckoutTicket
|
|
forfeitType={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}
|
|
numberOfCollaborators={subscription.nb_seats ?? 0}
|
|
disableInputs
|
|
defaultFrequency={getFrequency()}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</DefaultTemplate>
|
|
);
|
|
}
|