Merge branch 'dev' into staging

src/front/Components/Layouts/Login/index.tsx

@@ -77,7 +77,7 @@ export default function Login() {
 				confirmText={"OK"}>
 				<div className={classes["modal-content"]}>
 					<Typography typo={ITypo.P_16} className={classes["text"]}>
-						Une erreur est survenue lors de la connexion. Veuillez réessayer.
+						Vous ne disposez pas d'un abonnement, veuillez contacter l'administrateur de votre office.
 					</Typography>
 				</div>
 			</Confirm>

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

@@ -21,6 +21,7 @@ type IProps = {
 	numberOfCollaborators: number;
 	hasNavTab?: boolean;
 	defaultFrequency?: EPaymentFrequency;
+	disableInputs?: boolean;
 };
 
 export enum EPaymentFrequency {
@@ -72,14 +73,16 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 						name="paymentFrequency"
 						value={EPaymentFrequency.yearly.toString()}
 						onChange={handleFrequencyChange}
-						defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
+						defaultChecked={paymentFrequency === EPaymentFrequency.yearly}
+						disabled={props.disableInputs}>
 						<Typography typo={ITypo.P_ERR_18}>Annuel</Typography>
 					</RadioBox>
 					<RadioBox
 						name="paymentFrequency"
 						value={EPaymentFrequency.monthly.toString()}
 						onChange={handleFrequencyChange}
-						defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
+						defaultChecked={paymentFrequency === EPaymentFrequency.monthly}
+						disabled={props.disableInputs}>
 						<Typography typo={ITypo.P_ERR_18}>Mensuel</Typography>
 					</RadioBox>
 				</div>
@@ -186,9 +189,11 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 						)}
 					</div>
 				</div>
-				<Button onClick={handleSubmitPayment} fullwidth className={classes["payment-button"]}>
+				{!props.disableInputs && (
-					{hasNavTab ? "Passer au paiement" : "Mettre à jour l'abonnement"}
+					<Button onClick={handleSubmitPayment} fullwidth className={classes["payment-button"]}>
-				</Button>
+						{hasNavTab ? "Passer au paiement" : "Mettre à jour l'abonnement"}
+					</Button>
+				)}
 			</div>
 		</div>
 	);

src/front/Components/Layouts/Subscription/Components/SubscriptionTicket/classes.module.scss

@@ -1,31 +0,0 @@
-.root {
-	width: 372px;
-	display: flex;
-	flex-direction: column;
-	gap: 40px;
-
-	box-shadow: 0px 8px 10px 0px #00000012;
-	padding: 24px;
-	border-radius: 16px;
-	.top-category {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.category {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		.line {
-			display: flex;
-			justify-content: space-between;
-		}
-	}
-
-	.separator {
-		width: 100%;
-		height: 2px;
-		background: var(--grey-medium);
-	}
-}

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

@@ -1,84 +0,0 @@
-import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
-import classes from "./classes.module.scss";
-
-type IProps = {};
-export default function SubscriptionTicket(props: IProps) {
-	return (
-		<div className={classes["root"]}>
-			<div className={classes["top-category"]}>
-				<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
-					Récapitulatif
-				</Typography>
-			</div>
-			<div className={classes["separator"]} />
-
-			<div className={classes["top-category"]}>
-				<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
-					Forfait standard
-				</Typography>
-			</div>
-			<div className={classes["separator"]} />
-			<div className={classes["category"]}>
-				<div className={classes["line"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
-						Plan individuel
-					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
-						99&nbsp;€
-					</Typography>
-				</div>
-				<div className={classes["line"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
-						2 collaborateurs
-					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
-						13,98&nbsp;€
-					</Typography>
-				</div>
-				<div className={classes["sub-line"]}>
-					<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.BLACK}>
-						6,99&nbsp;€ x 2
-					</Typography>
-				</div>
-			</div>
-			<div className={classes["separator"]} />
-			<div className={classes["category"]}>
-				<div className={classes["line"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
-						Sous-total
-					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
-						112,98&nbsp;€
-					</Typography>
-				</div>
-				<div className={classes["line"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
-						FR TVA
-					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
-						14&nbsp;€
-					</Typography>
-				</div>
-				<div className={classes["line"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
-						Taxes
-					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
-						14&nbsp;€
-					</Typography>
-				</div>
-			</div>
-			<div className={classes["separator"]} />
-			<div className={classes["category"]}>
-				<div className={classes["line"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
-						Total
-					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
-						112,98&nbsp;€
-					</Typography>
-				</div>
-			</div>
-		</div>
-	);
-}

src/front/Components/Layouts/Subscription/SubscriptionError/classes.module.scss

@@ -3,7 +3,11 @@
 	gap: 104px;
 	justify-content: center;
 
+	max-width: 1200px;
+	margin: auto;
+
 	.left {
+		flex: 1;
 		display: flex;
 		flex-direction: column;
 		gap: 32px;

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,11 +9,8 @@ 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";
 
-export enum EForfeitType {
-	"standard",
-	"unlimited",
-}
 type EmailLine = {
 	element: JSX.Element;
 	id: number;
@@ -55,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/SubscriptionNew/index.tsx

@@ -8,7 +8,7 @@ import Link from "next/link";
 
 export default function SubscriptionNew() {
 	return (
-		<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
+		<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
 			<div className={classes["root"]}>
 				<div className={classes["top-container"]}>
 					<div className={classes["top-container-title"]}>

src/front/Components/Layouts/Subscription/SubscriptionSuccess/classes.module.scss

@@ -3,7 +3,11 @@
 	gap: 104px;
 	justify-content: center;
 
+	max-width: 1200px;
+	margin: auto;
+
 	.left {
+		flex: 1;
 		display: flex;
 		flex-direction: column;
 		gap: 32px;

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

@@ -1,44 +1,91 @@
 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 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";
 
 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}>
-						<Button>Inviter vos collaborateurs</Button>
-					</Link>
 				</div>
-				<div className={classes["right"]}>
+			)}
-					<SubscriptionTicket />
-				</div>
-			</div>
 		</DefaultTemplate>
 	);
 }