"use client" import * as React from "react" import { CheckCircle2, Clock, AlertCircle, PauseCircle, MinusCircle, Sparkles, CalendarIcon, CreditCardIcon, FileTextIcon, } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card" import { Badge } from "@/registry/new-york/ui/badge" import { Button } from "@/registry/new-york/ui/button" import { Separator } from "@/registry/new-york/ui/separator" import { Alert, AlertDescription, AlertTitle } from "@/registry/new-york/ui/alert" import { Skeleton } from "@/registry/new-york/ui/skeleton" import { cn } from "@/lib/utils" import type { SubscriptionStatusData } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types" import { formatMoney, formatDate, formatBillingCycle, } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format" export type SubscriptionStatusCardProps = { subscription?: SubscriptionStatusData /** Override the card title. Defaults to the first item's product name (single-item) or "Subscription" (multi-item). */ title?: string /** Position of the status badge: "inline" next to name, or "end" aligned to card end */ statusBadgePosition?: "inline" | "end" /** * Called when the user clicks "Change plan". * Only rendered when status is not `paused` or `canceled` — paused * subscriptions must be resumed before items can be changed, and canceled * is a terminal state. */ onChangePlan?: () => void /** * Called when the user clicks "Update payment method". * Only rendered for automatically-collected subscriptions that are not * `paused` or `canceled` — manual subscriptions are invoice-based (no saved * payment method), paused subscriptions have no active billing, and canceled * is terminal. */ onUpdatePaymentMethod?: () => void /** * Called when the user clicks "Manage". Always rendered when provided — * the action is consumer-defined (portal link, modal, resubscribe flow, etc.) * and not restricted by Paddle subscription status. */ onManageSubscription?: () => void className?: string } // --- Status badge --- type SubscriptionStatus = "active" | "canceled" | "past_due" | "paused" | "trialing" const STATUS_CONFIG: Record< SubscriptionStatus, { label: string; icon: React.ElementType; className: string } > = { active: { label: "Active", icon: CheckCircle2, className: "bg-success/15 text-success-foreground border-success/30", }, trialing: { label: "Trial", icon: Sparkles, className: "bg-info/15 text-info-foreground border-info/30", }, past_due: { label: "Past due", icon: AlertCircle, className: "bg-destructive/15 text-destructive border-destructive/30", }, paused: { label: "Paused", icon: PauseCircle, className: "bg-warning/15 text-warning-foreground border-warning/30", }, canceled: { label: "Canceled", icon: MinusCircle, className: "bg-muted text-muted-foreground border-border", }, } function StatusBadge({ status }: { status: SubscriptionStatus }) { const config = STATUS_CONFIG[status] ?? { label: status.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()), icon: AlertCircle, className: "bg-muted text-muted-foreground border-border", } const Icon = config.icon return ( {config.label} ) } // --- Scheduled change validity --- /** * Returns the scheduledChange only when it is valid for the given status. * Impossible combinations (e.g. resume on active, cancel on paused, any * scheduled change on canceled) are suppressed so the component never * renders misleading alerts. */ function getValidScheduledChange( status: SubscriptionStatus, scheduledChange?: SubscriptionStatusData["scheduledChange"] ): SubscriptionStatusData["scheduledChange"] | undefined { if (!scheduledChange) return undefined switch (status) { case "canceled": return undefined case "paused": return scheduledChange.action === "resume" ? scheduledChange : undefined default: return scheduledChange.action === "resume" ? undefined : scheduledChange } } // --- Footer billing label --- function getNextBillingLabel( status: SubscriptionStatus, scheduledChange?: SubscriptionStatusData["scheduledChange"] ): string | undefined { if (scheduledChange?.action === "cancel" || scheduledChange?.action === "pause") { return undefined } switch (status) { case "trialing": return "First billing" case "past_due": return "Payment due" case "active": return "Next billing" default: return undefined } } // --- Button visibility rules --- /** * "Change plan" is available for active, trialing, and past_due subscriptions. * Paused subscriptions must be resumed before items can be changed. * Canceled is a terminal state. */ function canShowChangePlan(status: SubscriptionStatus): boolean { return status !== "paused" && status !== "canceled" } /** * "Update payment method" requires automatic collection and an active billing * relationship. Manual subscriptions are invoice-based — no saved payment * method exists. Paused subscriptions have no active billing. Canceled is * terminal. */ function canShowUpdatePaymentMethod( status: SubscriptionStatus, collectionMode?: "automatic" | "manual" ): boolean { return status !== "canceled" && status !== "paused" && collectionMode !== "manual" } // --- Main component --- export function SubscriptionStatusCard({ subscription, title: titleOverride, statusBadgePosition = "end", onChangePlan, onUpdatePaymentMethod, onManageSubscription, className, }: SubscriptionStatusCardProps) { if (!subscription) { return } const { items, totalAmount, currency, interval, billingFrequency, status, nextBilledAt, canceledAt, collectionMode, scheduledChange, discount, } = subscription const isSingleItem = items.length === 1 const primaryItem = items[0] const isPastDue = status === "past_due" const effectiveScheduledChange = getValidScheduledChange(status, scheduledChange) const showChangePlan = !!onChangePlan && canShowChangePlan(status) const showUpdatePayment = !!onUpdatePaymentMethod && canShowUpdatePaymentMethod(status, collectionMode) const showManage = !!onManageSubscription const hasActions = showChangePlan || showUpdatePayment || showManage const cardTitle = titleOverride ?? (isSingleItem ? primaryItem?.productName : undefined) ?? "Subscription" const billingIntervalLabel = formatBillingCycle({ interval, frequency: billingFrequency ?? 1 }) ?? interval const scheduledChangeNote = effectiveScheduledChange ? effectiveScheduledChange.action === "cancel" ? `Cancels on ${formatDate(effectiveScheduledChange.effectiveAt)}` : effectiveScheduledChange.action === "pause" ? `Pauses on ${formatDate(effectiveScheduledChange.effectiveAt)}` : effectiveScheduledChange.action === "resume" ? `Resumes on ${formatDate(effectiveScheduledChange.effectiveAt)}` : undefined : undefined const nextBillingLabel = getNextBillingLabel(status, effectiveScheduledChange) return (

{cardTitle} {statusBadgePosition === "inline" && }

{isSingleItem && primaryItem?.priceName && ( {primaryItem.priceName} )}

{statusBadgePosition === "end" && } {isSingleItem && primaryItem?.productImageUrl && ( {primaryItem.productName}

)}

{isPastDue && ( {collectionMode === "manual" ? "Invoice overdue" : "Payment required"} {collectionMode === "manual" ? "Pay your outstanding invoice to avoid disruption." : "Your subscription is past due. Update your payment method to avoid disruption."} )} {scheduledChangeNote && ( Scheduled change {scheduledChangeNote} )}

{items.map((item, index) => (

0 && "pt-2 border-t" )} >

{item.productImageUrl && items.length > 1 && (

)}

{item.productName}

{item.quantity > 1 && item.unitPrice !== undefined && (

{item.quantity} × {formatMoney(item.unitPrice, currency)}

)}

{formatMoney(item.lineTotal, currency)}

))}

{discount && (

Discount {discount.code && ( {discount.code} )} {discount.endsAt && ( until {formatDate(discount.endsAt)} )} {discount.description ?? `\u2212${formatMoney(discount.savingsAmount, currency)}`}

)}

Total {formatMoney(totalAmount, currency)} / {billingIntervalLabel}

{nextBilledAt && nextBillingLabel && (

{nextBillingLabel} {formatDate(nextBilledAt)}

)} {collectionMode && !effectiveScheduledChange && status !== "past_due" && (

{collectionMode === "automatic" ? ( <> Auto-renews ) : ( <> Invoiced )}

)} {canceledAt && (

Canceled {formatDate(canceledAt)}

)}

{hasActions && (

{showChangePlan && ( )} {showUpdatePayment && ( )} {showManage && ( )}

)} ) } function SubscriptionStatusCardSkeleton({ className }: { className?: string }) { return (

) }