✨ load subscription in success/error
This commit is contained in:
Maxime Lalo
parent
493b2d8a80
commit
f5ce057a26
@ -1,41 +1,77 @@
|
||||
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
||||
import classes from "./classes.module.scss";
|
||||
import SubscriptionTicket from "../Components/SubscriptionTicket";
|
||||
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";
|
||||
|
||||
export default function SubscriptionError() {
|
||||
const [subscription, setSubscription] = useState<Subscription | null>(null);
|
||||
|
||||
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]);
|
||||
}, []);
|
||||
|
||||
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">
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["left"]}>
|
||||
<div className={classes["title"]}>
|
||||
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
|
||||
Paiement échoué
|
||||
</Typography>
|
||||
{subscription && (
|
||||
<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 />
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<Button>Réessayer le paiement</Button>
|
||||
</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 className={classes["right"]}>
|
||||
<SubscribeCheckoutTicket
|
||||
forfeitType={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}
|
||||
numberOfCollaborators={subscription.nb_seats ?? 0}
|
||||
disableInputs
|
||||
defaultFrequency={getFrequency()}
|
||||
/>
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<div className={classes["client-infos"]}>
|
||||
<SubscriptionClientInfos />
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<Button>Réessayer le paiement</Button>
|
||||
</div>
|
||||
<div className={classes["right"]}>
|
||||
<SubscriptionTicket />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DefaultTemplate>
|
||||
);
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscripti
|
||||
import { useCallback, useState } from "react";
|
||||
import { TrashIcon } from "@heroicons/react/24/outline";
|
||||
import PlusIcon from "@Assets/Icons/plus.svg";
|
||||
import Module from "@Front/Config/Module";
|
||||
|
||||
type EmailLine = {
|
||||
element: JSX.Element;
|
||||
@ -51,6 +52,7 @@ export default function SubscriptionInvite() {
|
||||
await Subscriptions.getInstance().post({
|
||||
emails,
|
||||
});
|
||||
router.push(Module.getInstance().get().modules.pages.Subscription.pages.Manage.props.path);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
@ -8,48 +8,84 @@ import Link from "next/link";
|
||||
import Module from "@Front/Config/Module";
|
||||
import { EForfeitType } from "../SubscriptionFacturation";
|
||||
import SubscribeCheckoutTicket, { 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";
|
||||
|
||||
let numberOfCollaborators = 5;
|
||||
export default function SubscriptionSuccess() {
|
||||
const [subscription, setSubscription] = useState<Subscription | null>(null);
|
||||
|
||||
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]);
|
||||
}, []);
|
||||
|
||||
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="Abonnement réussi">
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["left"]}>
|
||||
<div className={classes["title"]}>
|
||||
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
|
||||
Abonnement réussi !
|
||||
</Typography>
|
||||
{subscription && (
|
||||
<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 />
|
||||
</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["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 className={classes["right"]}>
|
||||
<SubscribeCheckoutTicket
|
||||
forfeitType={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}
|
||||
numberOfCollaborators={subscription.nb_seats ?? 0}
|
||||
disableInputs
|
||||
defaultFrequency={getFrequency()}
|
||||
/>
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<div className={classes["client-infos"]}>
|
||||
<SubscriptionClientInfos />
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<Link
|
||||
href={
|
||||
Module.getInstance().get().modules.pages.Subscription.pages.Invite.props.path +
|
||||
`?nbOfCollaborators=${numberOfCollaborators}`
|
||||
}>
|
||||
<Button>Inviter vos collaborateurs</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className={classes["right"]}>
|
||||
<SubscribeCheckoutTicket
|
||||
forfeitType={EForfeitType.standard}
|
||||
numberOfCollaborators={numberOfCollaborators}
|
||||
disableInputs
|
||||
defaultFrequency={EPaymentFrequency.yearly}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DefaultTemplate>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user