b783627890
Before: 'Gérer l'abonnement' opened the generic Customer Portal. If the user cancelled, the portal's 'return_url' was just a button label — nothing auto-redirected back to Freedge, so the user was stranded on billing.stripe.com after clicking 'Cancel'. Now: dedicated 'Annuler' button on the Profile SubscriptionCard that calls a new backend endpoint POST /stripe/portal/cancel. This creates a portal session with flow_data.type = 'subscription_cancel' deep-linked to the user's active subscription, plus after_completion.type = 'redirect' so Stripe automatically redirects to /subscription/cancelled when the cancellation is confirmed. New page /subscription/cancelled: - Animated heart badge (spring + pulsing halo) - 'À bientôt, on l'espère' title - Info box showing the period-end date (fetched via sync on mount) so the user knows they still have access until the end of the already-paid period - Re-engagement message + 'Retour aux recettes' / 'Voir les plans' CTAs - On mount: calls /stripe/sync so the DB is updated immediately (doesn't wait for the customer.subscription.updated webhook) Profile SubscriptionCard paid-state footer now has two buttons side by side: 'Gérer' (outline) and 'Annuler' (ghost with red hover). Backend verified: Stripe SDK v12 supports flow_data.after_completion. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
import { apiService } from "./base";
|
|
|
|
export interface StripePlan {
|
|
id: "essential" | "premium";
|
|
name: string;
|
|
description: string;
|
|
monthlyRecipes: number | null;
|
|
features: string[];
|
|
available: boolean;
|
|
}
|
|
|
|
export interface SubscriptionStatus {
|
|
plan: "free" | "essential" | "premium";
|
|
status: string | null;
|
|
currentPeriodEnd: string | null;
|
|
hasActiveSubscription: boolean;
|
|
}
|
|
|
|
const stripeService = {
|
|
/** Récupère la liste des plans disponibles */
|
|
getPlans: (): Promise<{ plans: StripePlan[] }> => apiService.get("/stripe/plans"),
|
|
|
|
/** Récupère le statut d'abonnement de l'utilisateur courant */
|
|
getSubscription: (): Promise<SubscriptionStatus> =>
|
|
apiService.get("/stripe/subscription"),
|
|
|
|
/** Démarre un Checkout Stripe — redirige vers l'URL renvoyée */
|
|
startCheckout: async (plan: "essential" | "premium"): Promise<void> => {
|
|
const { url } = await apiService.post<{ url: string; sessionId: string }>(
|
|
"/stripe/checkout",
|
|
{ plan }
|
|
);
|
|
if (!url) throw new Error("Pas d'URL de checkout reçue");
|
|
window.location.href = url;
|
|
},
|
|
|
|
/** Ouvre le Customer Portal pour gérer l'abonnement */
|
|
openPortal: async (): Promise<void> => {
|
|
const { url } = await apiService.post<{ url: string }>("/stripe/portal", {});
|
|
if (!url) throw new Error("Pas d'URL de portail reçue");
|
|
window.location.href = url;
|
|
},
|
|
|
|
/**
|
|
* Ouvre directement le flow d'annulation du Customer Portal.
|
|
* Après validation, Stripe redirige automatiquement vers
|
|
* /subscription/cancelled (géré par flow_data.after_completion côté backend).
|
|
*/
|
|
openCancelFlow: async (): Promise<void> => {
|
|
const { url } = await apiService.post<{ url: string }>("/stripe/portal/cancel", {});
|
|
if (!url) throw new Error("Pas d'URL de portail reçue");
|
|
window.location.href = url;
|
|
},
|
|
|
|
/**
|
|
* Resynchronise l'abonnement depuis Stripe. Utile quand le webhook
|
|
* n'est pas arrivé (mode dev sans `stripe listen`, latence, etc.).
|
|
*/
|
|
syncSubscription: (): Promise<SubscriptionStatus & { synced: boolean }> =>
|
|
apiService.post("/stripe/sync", {}),
|
|
};
|
|
|
|
export default stripeService;
|