Aficchage abonnement anule + cancelorReactivate subscription

src/front/Api/LeCoffreApi/Admin/Stripe/Stripe.ts

@@ -12,6 +12,7 @@ export type IPostStripeResponse = {
 
 export type IGetClientPortalSessionResponse = {
 	url: string;
+	cancel_at?: number;
 };
 
 export interface IGetCustomerBySubscriptionIdParams {
@@ -45,7 +46,7 @@ export default class Stripe extends BaseAdmin {
 		}
 	}
 
-	public async getClientPortalSession(stripe_subscription_id: string) {
+	public async getStripeSubscriptionByUid(stripe_subscription_id: string) {
 		const url = new URL(this.baseURl.concat(`/${stripe_subscription_id}`));
 		try {
 			return await this.getRequest<IGetClientPortalSessionResponse>(url);
@@ -55,6 +56,16 @@ export default class Stripe extends BaseAdmin {
 		}
 	}
 
+	public async getClientPortalSession(stripe_subscription_id: string) {
+		const url = new URL(this.baseURl.concat(`/${stripe_subscription_id}/client-portal`));
+		try {
+			return await this.getRequest<IGetClientPortalSessionResponse>(url);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+
 	public async getCustomerBySubscriptionId(subscriptionId: string) {
 		const url = new URL(this.baseURl.concat(`/${subscriptionId}/customer`));
 		try {

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

@@ -27,6 +27,7 @@ export const forfeitsPrices: Record<EForfeitType, number> = {
 export default function SubscriptionFacturation() {
 	const router = useRouter();
 	const [subscription, setSubscription] = useState<Subscription | null>(null);
+	const [cancelAt, setCancelAt] = useState<Date | null>(null);
 
 	const { close: closeCancelSubscription, isOpen: isCancelSubscriptionOpen } = useOpenable();
 	const { close: closeConfirmation, isOpen: isConfirmationOpen } = useOpenable();
@@ -47,13 +48,17 @@ export default function SubscriptionFacturation() {
 		} catch (error) {}
 	};
 
-	const cancelSubscription = async () => {
+	const cancelOrReactivateSubscription = async () => {
 		try {
 			const jwt = JwtService.getInstance().decodeJwt();
 			const subscription = await Subscriptions.getInstance().get({ where: { office: { uid: jwt?.office_Id } } });
 			if (!subscription[0]) return;
 			const stripe_client_portal = await Stripe.getInstance().getClientPortalSession(subscription[0].stripe_subscription_id!);
+			if (!cancelAt) {
 				router.push(stripe_client_portal.url + "/subscriptions/" + subscription[0].stripe_subscription_id + "/cancel");
+			} else {
+				router.push(stripe_client_portal.url + "/subscriptions/" + subscription[0].stripe_subscription_id + "/reactivate");
+			}
 		} catch (error) {}
 	};
 
@@ -73,6 +78,8 @@ export default function SubscriptionFacturation() {
 		if (!subscription[0]) {
 			router.push(Module.getInstance().get().modules.pages.Subscription.pages.New.props.path);
 		} else {
+			const stripeSubscription = await Stripe.getInstance().getStripeSubscriptionByUid(subscription[0].stripe_subscription_id!);
+			if (stripeSubscription.cancel_at !== null) setCancelAt(new Date(stripeSubscription.cancel_at! * 1000));
 			setSubscription(subscription[0]);
 		}
 	}, [router]);
@@ -110,13 +117,20 @@ export default function SubscriptionFacturation() {
 										Plan par utilisateur
 									</Typography>
 								</div>
-								{subscription.type === "STANDARD" && (
+								{subscription.type === "STANDARD" && !cancelAt && (
 									<div className={classes["active-plan"]}>
 										<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
 											Plan actif
 										</Typography>
 									</div>
 								)}
+								{subscription.type === "STANDARD" && cancelAt && (
+									<div className={classes["active-plan"]}>
+										<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
+											Plan actif jusqu'au {cancelAt.toLocaleDateString()}
+										</Typography>
+									</div>
+								)}
 							</div>
 							<div className={classes["separator"]} />
 							<div className={classes["price-container"]}>
@@ -174,13 +188,20 @@ export default function SubscriptionFacturation() {
 										Plan par office
 									</Typography>
 								</div>
-								{subscription.type === "UNLIMITED" && (
+								{subscription.type === "UNLIMITED" && !cancelAt && (
 									<div className={classes["active-plan"]}>
 										<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
 											Plan actif
 										</Typography>
 									</div>
 								)}
+								{subscription.type === "UNLIMITED" && cancelAt && (
+									<div className={classes["active-plan"]}>
+										<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
+											Plan actif jusqu'au {cancelAt.toLocaleDateString()}
+										</Typography>
+									</div>
+								)}
 							</div>
 							<div className={classes["separator"]} />
 							<div className={classes["price-container"]}>
@@ -213,10 +234,17 @@ export default function SubscriptionFacturation() {
 						</div>
 					</div>
 					<div className={classes["actions-container"]}>
-						<Button variant={EButtonVariant.LINE} onClick={cancelSubscription}>
+						<Button variant={EButtonVariant.LINE} onClick={cancelOrReactivateSubscription}>
+							{!cancelAt && (
 								<Typography typo={ITypo.P_18} color={ITypoColor.RED_FLASH}>
 									Arrêter l'abonnement
 								</Typography>
+							)}
+							{cancelAt && (
+								<Typography typo={ITypo.P_18} color={ITypoColor.RED_FLASH}>
+									Renouveler l'abonnement
+								</Typography>
+							)}
 						</Button>
 						<Button onClick={manageBilling}>Gérer la facturation</Button>
 					</div>
@@ -225,7 +253,7 @@ export default function SubscriptionFacturation() {
 			<Confirm
 				isOpen={isCancelSubscriptionOpen}
 				onClose={closeCancelSubscription}
-				onAccept={cancelSubscription}
+				onAccept={cancelOrReactivateSubscription}
 				closeBtn
 				header={"Êtes-vous sûr de vouloir arrêter votre abonnement ?"}
 				confirmText={"Confirmer"}