Subscription status card

1"use client"
2 
3import * as React from "react"
4import {
5  CheckCircle2,
6  Clock,
7  AlertCircle,
8  PauseCircle,
9  MinusCircle,
10  Sparkles,
11  CalendarIcon,
12  CreditCardIcon,
13  FileTextIcon,
14} from "lucide-react"
15import {
16  Card,
17  CardContent,
18  CardDescription,
19  CardHeader,
20  CardTitle,
21} from "@/registry/new-york/ui/card"
22import { Badge } from "@/registry/new-york/ui/badge"
23import { Button } from "@/registry/new-york/ui/button"
24import { Separator } from "@/registry/new-york/ui/separator"
25import { Alert, AlertDescription, AlertTitle } from "@/registry/new-york/ui/alert"
26import { Skeleton } from "@/registry/new-york/ui/skeleton"
27import { cn } from "@/lib/utils"
28import type { SubscriptionStatusData } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types"
29import {
30  formatMoney,
31  formatDate,
32  formatBillingCycle,
33} from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format"
34 
35export type SubscriptionStatusCardProps = {
36  subscription?: SubscriptionStatusData
37  /** Override the card title. Defaults to the first item's product name (single-item) or "Subscription" (multi-item). */
38  title?: string
39  /** Position of the status badge: "inline" next to name, or "end" aligned to card end */
40  statusBadgePosition?: "inline" | "end"
41  /**
42   * Called when the user clicks "Change plan".
43   * Only rendered when status is not `paused` or `canceled` — paused
44   * subscriptions must be resumed before items can be changed, and canceled
45   * is a terminal state.
46   */
47  onChangePlan?: () => void
48  /**
49   * Called when the user clicks "Update payment method".
50   * Only rendered for automatically-collected subscriptions that are not
51   * `paused` or `canceled` — manual subscriptions are invoice-based (no saved
52   * payment method), paused subscriptions have no active billing, and canceled
53   * is terminal.
54   */
55  onUpdatePaymentMethod?: () => void
56  /**
57   * Called when the user clicks "Manage". Always rendered when provided —
58   * the action is consumer-defined (portal link, modal, resubscribe flow, etc.)
59   * and not restricted by Paddle subscription status.
60   */
61  onManageSubscription?: () => void
62  className?: string
63}
64 
65// --- Status badge ---
66 
67type SubscriptionStatus = "active" | "canceled" | "past_due" | "paused" | "trialing"
68 
69const STATUS_CONFIG: Record<
70  SubscriptionStatus,
71  { label: string; icon: React.ElementType; className: string }
72> = {
73  active: {
74    label: "Active",
75    icon: CheckCircle2,
76// … truncated