263 lines
10 KiB
TypeScript
263 lines
10 KiB
TypeScript
import { Badge } from "@xtablo/ui/components/badge";
|
|
import { Button } from "@xtablo/ui/components/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@xtablo/ui/components/card";
|
|
import { Text } from "@xtablo/ui/components/typography";
|
|
import { AlertCircle, CheckCircle2, CreditCard, Loader2Icon } from "lucide-react";
|
|
import {
|
|
useCancelSubscription,
|
|
useCreateCheckoutSession,
|
|
useCreatePortalSession,
|
|
useReactivateSubscription,
|
|
useSubscription,
|
|
} from "../hooks/stripe";
|
|
import { useUser } from "../providers/UserStoreProvider";
|
|
|
|
/**
|
|
* Subscription management card for Settings page
|
|
* Shows current subscription status and allows users to upgrade/manage
|
|
*/
|
|
export function SubscriptionCard() {
|
|
const user = useUser();
|
|
const { data: subscription, isLoading: subscriptionLoading } = useSubscription();
|
|
const { mutate: createCheckout, isPending: checkoutPending } = useCreateCheckoutSession();
|
|
const { mutate: openPortal, isPending: portalPending } = useCreatePortalSession();
|
|
const { mutate: cancelSubscription, isPending: cancelPending } = useCancelSubscription();
|
|
const { mutate: reactivateSubscription, isPending: reactivatePending } =
|
|
useReactivateSubscription();
|
|
|
|
const isPaying = user.plan !== "none";
|
|
|
|
console.log({ subscription });
|
|
|
|
// Replace with your actual price ID from Stripe Dashboard
|
|
const STANDARD_MONTHLY_PRICE_ID = import.meta.env.VITE_STRIPE_STANDARD_MONTHLY_PRICE_ID || "";
|
|
|
|
const getStatusBadge = () => {
|
|
if (!subscription) {
|
|
return (
|
|
<Badge variant="secondary" className="gap-1.5">
|
|
<AlertCircle className="w-3 h-3" />
|
|
Gratuit
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
switch (subscription.status) {
|
|
case "active":
|
|
return (
|
|
<Badge className="gap-1.5 bg-green-500 hover:bg-green-600">
|
|
<CheckCircle2 className="w-3 h-3" />
|
|
Actif
|
|
</Badge>
|
|
);
|
|
case "trialing":
|
|
return (
|
|
<Badge className="gap-1.5 bg-blue-500 hover:bg-blue-600">
|
|
<CheckCircle2 className="w-3 h-3" />
|
|
Période d'essai
|
|
</Badge>
|
|
);
|
|
case "past_due":
|
|
return (
|
|
<Badge variant="destructive" className="gap-1.5">
|
|
<AlertCircle className="w-3 h-3" />
|
|
Paiement en retard
|
|
</Badge>
|
|
);
|
|
default:
|
|
return (
|
|
<Badge variant="secondary" className="gap-1.5">
|
|
{subscription.status}
|
|
</Badge>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<CreditCard className="w-5 h-5" />
|
|
<CardTitle>Abonnement</CardTitle>
|
|
</div>
|
|
{getStatusBadge()}
|
|
</div>
|
|
<CardDescription>
|
|
{isPaying
|
|
? "Gérez votre abonnement et votre facturation"
|
|
: "Passez à Standard pour débloquer toutes les fonctionnalités"}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{subscriptionLoading ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loader2Icon className="w-6 h-6 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Free Tier */}
|
|
{!isPaying && (
|
|
<div className="space-y-4">
|
|
<div className="bg-gradient-to-br from-purple-50 to-blue-50 dark:from-purple-950/20 dark:to-blue-950/20 border border-purple-200 dark:border-purple-800 rounded-lg p-4">
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium text-purple-900 dark:text-purple-100">
|
|
Plan Gratuit
|
|
</p>
|
|
<p className="text-xs text-purple-700 dark:text-purple-300">
|
|
Fonctionnalités limitées
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
onClick={() =>
|
|
createCheckout({
|
|
priceId: STANDARD_MONTHLY_PRICE_ID,
|
|
successUrl: `${window.location.origin}/settings?success=true`,
|
|
cancelUrl: `${window.location.origin}/settings?canceled=true`,
|
|
})
|
|
}
|
|
disabled={checkoutPending || !STANDARD_MONTHLY_PRICE_ID}
|
|
className="w-full gap-2 bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600"
|
|
>
|
|
{checkoutPending ? (
|
|
<>
|
|
<Loader2Icon className="w-4 h-4 animate-spin" />
|
|
Chargement...
|
|
</>
|
|
) : (
|
|
<>
|
|
<CheckCircle2 className="w-4 h-4" />
|
|
Passer à Standard
|
|
</>
|
|
)}
|
|
</Button>
|
|
{!STANDARD_MONTHLY_PRICE_ID && (
|
|
<Text className="text-xs text-red-600 dark:text-red-400">
|
|
Configuration Stripe requise
|
|
</Text>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Standard Tier - Active */}
|
|
{isPaying && subscription && !subscription.cancel_at_period_end && (
|
|
<div className="space-y-4">
|
|
<div className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-950/20 dark:to-emerald-950/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<p className="text-sm font-medium text-green-900 dark:text-green-100">
|
|
Plan Standard
|
|
</p>
|
|
<p className="text-xs text-green-700 dark:text-green-300 mt-1">
|
|
Toutes les fonctionnalités débloquées
|
|
</p>
|
|
</div>
|
|
{subscription.current_period_end && (
|
|
<div className="pt-2 border-t border-green-200 dark:border-green-800">
|
|
<p className="text-xs text-green-600 dark:text-green-400">
|
|
Renouvellement le{" "}
|
|
{new Date(subscription.current_period_end * 1000).toLocaleDateString(
|
|
"fr-FR",
|
|
{
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
}
|
|
)}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => openPortal(window.location.href)}
|
|
disabled={portalPending}
|
|
className="flex-1"
|
|
>
|
|
{portalPending ? (
|
|
<>
|
|
<Loader2Icon className="w-4 h-4 mr-2 animate-spin" />
|
|
Chargement...
|
|
</>
|
|
) : (
|
|
"Gérer l'abonnement"
|
|
)}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => cancelSubscription()}
|
|
disabled={cancelPending}
|
|
className="text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950"
|
|
>
|
|
{cancelPending ? <Loader2Icon className="w-4 h-4 animate-spin" /> : "Annuler"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Standard Tier - Canceling */}
|
|
{isPaying && subscription?.cancel_at_period_end && (
|
|
<div className="space-y-4">
|
|
<div className="bg-gradient-to-br from-orange-50 to-red-50 dark:from-orange-950/20 dark:to-red-950/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
|
|
<div className="space-y-3">
|
|
<div className="flex items-start gap-2">
|
|
<AlertCircle className="w-5 h-5 text-orange-600 dark:text-orange-400 shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="text-sm font-medium text-orange-900 dark:text-orange-100">
|
|
Abonnement en cours d'annulation
|
|
</p>
|
|
<p className="text-xs text-orange-700 dark:text-orange-300 mt-1">
|
|
Votre abonnement Standard sera annulé le{" "}
|
|
{subscription.current_period_end &&
|
|
new Date(subscription.current_period_end * 1000).toLocaleDateString(
|
|
"fr-FR",
|
|
{
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
}
|
|
)}
|
|
</p>
|
|
<p className="text-xs text-orange-600 dark:text-orange-400 mt-2">
|
|
Vous aurez accès aux fonctionnalités Standard jusqu'à cette date.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={() => reactivateSubscription()}
|
|
disabled={reactivatePending}
|
|
className="w-full gap-2 bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600"
|
|
>
|
|
{reactivatePending ? (
|
|
<>
|
|
<Loader2Icon className="w-4 h-4 animate-spin" />
|
|
Chargement...
|
|
</>
|
|
) : (
|
|
<>
|
|
<CheckCircle2 className="w-4 h-4" />
|
|
Réactiver l'abonnement
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|