✨ load subscription in success/error

src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx

@@ -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"]}>
+			{subscription && (
-				<div className={classes["left"]}>
+				<div className={classes["root"]}>
-					<div className={classes["title"]}>
+					<div className={classes["left"]}>
-						<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+						<div className={classes["title"]}>
-							Paiement échoué
+							<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
-						</Typography>
+								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"]}>
+					<div className={classes["right"]}>
-						<MessageBox type={"error"}>
+						<SubscribeCheckoutTicket
-							Votre transaction n'a pas pu être complétée.
+							forfeitType={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}
-							<br />
+							numberOfCollaborators={subscription.nb_seats ?? 0}
-							<br />
+							disableInputs
-							Malheureusement, nous n'avons pas pu traiter votre paiement et votre abonnement n'a pas été activé. Veuillez
+							defaultFrequency={getFrequency()}
-							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["right"]}>
+			)}
-					<SubscriptionTicket />
-				</div>
-			</div>
 		</DefaultTemplate>
 	);
 }

src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx

@@ -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);
 		}

src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx

@@ -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"]}>
+			{subscription && (
-				<div className={classes["left"]}>
+				<div className={classes["root"]}>
-					<div className={classes["title"]}>
+					<div className={classes["left"]}>
-						<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+						<div className={classes["title"]}>
-							Abonnement réussi !
+							<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
-						</Typography>
+								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"]}>
+					<div className={classes["right"]}>
-						<MessageBox type={"success"}>
+						<SubscribeCheckoutTicket
-							Votre transaction a été effectuée avec succès !
+							forfeitType={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}
-							<br />
+							numberOfCollaborators={subscription.nb_seats ?? 0}
-							<br />
+							disableInputs
-							Votre abonnement a été pris en compte et est désormais actif.
+							defaultFrequency={getFrequency()}
-						</MessageBox>
+						/>
 					</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>
 	);
 }