81 lines
3.3 KiB
TypeScript
81 lines
3.3 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 { useCallback, useEffect, useState } from "react";
|
|
import { Subscription } from "le-coffre-resources/dist/Admin";
|
|
import JwtService from "@Front/Services/JwtService/JwtService";
|
|
import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
|
|
import SubscribeCheckoutTicket, { EPaymentFrequency } from "../Components/SubscribeCheckoutTicket";
|
|
import { EForfeitType } from "../SubscriptionFacturation";
|
|
import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
|
|
|
|
export default function SubscriptionError() {
|
|
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 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(() => {
|
|
loadSubscription();
|
|
}, [loadSubscription]);
|
|
|
|
return (
|
|
<DefaultTemplate title="Erreur à la souscription">
|
|
{subscription && customer && (
|
|
<div className={classes["root"]}>
|
|
<div className={classes["left"]}>
|
|
<div className={classes["title"]}>
|
|
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
|
|
Paiement échoué
|
|
</Typography>
|
|
</div>
|
|
<div className={classes["alert"]}>
|
|
<MessageBox type={"error"}>
|
|
Votre transaction n'a pas pu être complétée.
|
|
<br />
|
|
<br />
|
|
Malheureusement, nous n'avons pas pu traiter votre paiement et votre abonnement n'a pas été activé. Veuillez
|
|
vérifier vos informations de paiement et essayer à nouveau.
|
|
</MessageBox>
|
|
</div>
|
|
<div className={classes["separator"]} />
|
|
<div className={classes["client-infos"]}>
|
|
<SubscriptionClientInfos customer={customer} />
|
|
</div>
|
|
<div className={classes["separator"]} />
|
|
<Button>Réessayer le paiement</Button>
|
|
</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>
|
|
);
|
|
}
|