315 lines
13 KiB
TypeScript
315 lines
13 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 { AlertCircle, CheckCircle2, CreditCard, Loader2Icon, Sparkles } from "lucide-react";
|
|
import { useOrganization } from "../hooks/organization";
|
|
import {
|
|
normalizeBillingPlan,
|
|
useCancelSubscription,
|
|
useCreateCheckoutSession,
|
|
useCreatePortalSession,
|
|
useReactivateSubscription,
|
|
useSubscription,
|
|
} from "../hooks/stripe";
|
|
import { useUser } from "../providers/UserStoreProvider";
|
|
|
|
/**
|
|
* Subscription management card for Settings page.
|
|
*/
|
|
export function SubscriptionCard() {
|
|
const user = useUser();
|
|
const { data: organizationData } = useOrganization();
|
|
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 fallbackPlan = normalizeBillingPlan(user.plan);
|
|
const activePlan = organizationData?.active_subscription_plan ?? fallbackPlan;
|
|
const isBillingOwner = organizationData?.is_billing_owner ?? false;
|
|
|
|
const isPaying = activePlan === "team" || activePlan === "annual";
|
|
const isFounder = activePlan === "annual";
|
|
|
|
const requiredPlan = organizationData?.required_plan ?? "solo";
|
|
const requiredTeamQuantity = organizationData?.required_team_quantity ?? 1;
|
|
|
|
const getStatusBadge = () => {
|
|
if (isFounder) {
|
|
return (
|
|
<Badge className="gap-1.5 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600">
|
|
<Sparkles className="w-3 h-3" />
|
|
Founder
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
if (!subscription) {
|
|
return (
|
|
<Badge variant="secondary" className="gap-1.5">
|
|
<AlertCircle className="w-3 h-3" />
|
|
Sans abonnement
|
|
</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>
|
|
{isFounder
|
|
? "Vous disposez du plan Founder (annuel) avec limites illimitées"
|
|
: isPaying
|
|
? "Gérez votre abonnement et votre facturation"
|
|
: "Choisissez Solo, Teams ou Founder"}
|
|
</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>
|
|
) : (
|
|
<>
|
|
{isFounder && (
|
|
<div className="space-y-4">
|
|
<div className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-950/20 dark:to-pink-950/20 border border-purple-200 dark:border-purple-800 rounded-lg p-4">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<Sparkles className="w-5 h-5 text-purple-600 dark:text-purple-400" />
|
|
<p className="text-sm font-medium text-purple-900 dark:text-purple-100">
|
|
Plan Founder (annuel)
|
|
</p>
|
|
</div>
|
|
<p className="text-xs text-purple-700 dark:text-purple-300">
|
|
Utilisateurs et tablos illimités.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{!isFounder && (
|
|
<div className="space-y-3">
|
|
<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">
|
|
<p className="text-sm font-medium text-purple-900 dark:text-purple-100">
|
|
Plan recommandé: {requiredPlan === "team" ? "Teams" : "Solo"}
|
|
</p>
|
|
<p className="text-xs text-purple-700 dark:text-purple-300 mt-1">
|
|
{requiredPlan === "team"
|
|
? `Votre organisation nécessite ${requiredTeamQuantity} siège${requiredTeamQuantity > 1 ? "s" : ""} Teams.`
|
|
: "Votre organisation peut continuer avec Solo (1 utilisateur, 10 tablos actifs)."}
|
|
</p>
|
|
</div>
|
|
|
|
{isBillingOwner ? (
|
|
<div className="grid grid-cols-1 gap-2">
|
|
<Button
|
|
onClick={() =>
|
|
createCheckout({
|
|
plan: requiredPlan === "team" ? "team" : "solo",
|
|
successUrl: `${window.location.origin}/settings?success=true`,
|
|
cancelUrl: `${window.location.origin}/settings?canceled=true`,
|
|
})
|
|
}
|
|
disabled={checkoutPending}
|
|
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 au plan {requiredPlan === "team" ? "Teams" : "Solo"}
|
|
</>
|
|
)}
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
onClick={() =>
|
|
createCheckout({
|
|
plan: "founder",
|
|
successUrl: `${window.location.origin}/settings?success=true`,
|
|
cancelUrl: `${window.location.origin}/settings?canceled=true`,
|
|
})
|
|
}
|
|
disabled={checkoutPending}
|
|
>
|
|
Devenir Founder (99€/an)
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2 p-3 bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800 rounded-lg">
|
|
<AlertCircle className="w-4 h-4 text-amber-600 dark:text-amber-400 shrink-0" />
|
|
<p className="text-xs text-amber-700 dark:text-amber-300">
|
|
Seul le propriétaire de facturation de l'organisation peut modifier
|
|
l'abonnement.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{isPaying && subscription && !subscription.cancel_at_period_end && isBillingOwner && (
|
|
<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 {isFounder ? "Founder" : "Teams"}
|
|
</p>
|
|
<p className="text-xs text-green-700 dark:text-green-300 mt-1">
|
|
Collaboration d'organisation activée
|
|
</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>
|
|
)}
|
|
|
|
{isPaying && subscription?.cancel_at_period_end && isBillingOwner && (
|
|
<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 {isFounder ? "Founder" : "Teams"} 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 gardez vos droits actuels 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>
|
|
);
|
|
}
|