50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T3c7f,"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 (

) } 54:T70d,"use client" import * as React from "react" import { mapSubscriptionToStatusData } from "@/registry/new-york/blocks/subscription-status-card/lib/subscription-status-card-utils" import { SubscriptionStatusCard, type SubscriptionStatusCardProps, } from "./subscription-status-card" type PaddleSubscription = Parameters[0] type RecurringTransactionDetails = Parameters[1] type PaddleDiscount = Parameters[2] export type PaddleSubscriptionStatusCardProps = { subscription: PaddleSubscription recurringTransactionDetails: RecurringTransactionDetails discount?: PaddleDiscount } & Omit /** * Paddle-aware wrapper for `SubscriptionStatusCard`. * * Accepts the raw Paddle subscription entity and `recurringTransactionDetails` * (from `GET /subscriptions/{id}?include=recurring_transaction_details`), * maps them to `SubscriptionStatusData`, and renders the UI component. * * Optionally pass a Paddle `Discount` to * enrich the discount display with a code and derived description label. * * All display-only props (`onChangePlan`, `onManageSubscription`, etc.) are * passed through directly. * * @example * setShowPlanChange(true)} * /> */ export function PaddleSubscriptionStatusCard({ subscription, recurringTransactionDetails, discount, ...uiProps }: PaddleSubscriptionStatusCardProps) { const data = mapSubscriptionToStatusData(subscription, recurringTransactionDetails, discount) return } 55:T1426,import type { SubscriptionStatusData } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types" import { parseAmount } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format" // --- // Input shapes — minimal types matching the Paddle Node SDK / API response. // Field names use camelCase (Node SDK convention). Pass the raw API response // or destructure these fields from your own subscription fetch. // --- type SubscriptionItem = { product: { name: string description?: string | null imageUrl?: string | null } price?: { name?: string | null unitPrice?: { amount: string; currencyCode: string } | null } | null quantity: number } type RecurringLineItem = { totals: { subtotal: string; total: string } } type ScheduledChange = { action: "cancel" | "pause" | "resume" effectiveAt: string resumeAt?: string | null } | null // Matches SDK SubscriptionDiscount — subscription.discount only has id + dates type SubscriptionDiscountField = { id: string startsAt?: string | null endsAt?: string | null } | null // Full Discount catalog entity — fetched separately via paddle.discounts.get(id) type PaddleDiscount = { id: string description: string code?: string | null type: "flat" | "flat_per_seat" | "percentage" amount: string } type PaddleSubscription = { id: string status: "active" | "canceled" | "past_due" | "paused" | "trialing" currencyCode: string billingCycle: { interval: string; frequency: number } collectionMode?: "automatic" | "manual" startedAt: string nextBilledAt?: string | null canceledAt?: string | null scheduledChange?: ScheduledChange discount?: SubscriptionDiscountField items: SubscriptionItem[] } type RecurringTransactionDetails = { totals: { total: string; discount?: string } lineItems: RecurringLineItem[] } /** * Maps a Paddle subscription API response to the `SubscriptionStatusData` * display contract consumed by `SubscriptionStatusCard`. * * Pass the raw Paddle subscription and the * `recurring_transaction_details` include (required for accurate totals). * Optionally pass a Paddle `Discount` to enrich the discount display * with `code` and a derived description label. * * @param subscription - Paddle Subscription * @param recurringTransactionDetails - `subscription.recurringTransactionDetails` from the same response * @param discount - Paddle Discount for enriched discount display * @returns Mapped status data for `` * * @example * const data = await paddle.subscriptions.get(subscriptionId, { * include: ["recurring_transaction_details"], * }) * const statusData = mapSubscriptionToStatusData(data, data.recurringTransactionDetails) */ export function mapSubscriptionToStatusData( subscription: PaddleSubscription, recurringTransactionDetails: RecurringTransactionDetails, discount?: PaddleDiscount | null ): SubscriptionStatusData { const { currencyCode } = subscription const items = subscription.items.map((item, i) => ({ productName: item.product.name, productDescription: item.product.description ?? undefined, productImageUrl: item.product.imageUrl ?? undefined, priceName: item.price?.name ?? undefined, quantity: item.quantity, unitPrice: item.price?.unitPrice ? parseAmount(item.price.unitPrice.amount, currencyCode) : undefined, lineTotal: parseAmount( recurringTransactionDetails.lineItems[i]?.totals.subtotal ?? "0", currencyCode ), })) const discountAmount = recurringTransactionDetails.totals.discount ? parseAmount(recurringTransactionDetails.totals.discount, currencyCode) : 0 // Percentage discounts produce e.g. "-15%"; flat discounts leave description // undefined so the component formats it from savingsAmount + currency. const discountDescription = discount?.type === "percentage" ? `-${discount.description}` : undefined const discountOutput: SubscriptionStatusData["discount"] = subscription.discount && discountAmount > 0 ? { savingsAmount: discountAmount, endsAt: subscription.discount.endsAt ?? undefined, code: discount?.code ?? undefined, description: discountDescription, } : undefined const scheduledChange: SubscriptionStatusData["scheduledChange"] = subscription.scheduledChange ? { action: subscription.scheduledChange.action, effectiveAt: subscription.scheduledChange.effectiveAt, resumeAt: subscription.scheduledChange.resumeAt ?? undefined, } : undefined return { id: subscription.id, items, totalAmount: parseAmount(recurringTransactionDetails.totals.total, currencyCode), currency: currencyCode, interval: subscription.billingCycle.interval, billingFrequency: subscription.billingCycle.frequency, status: subscription.status, collectionMode: subscription.collectionMode, startedAt: subscription.startedAt, nextBilledAt: subscription.nextBilledAt ?? undefined, canceledAt: subscription.canceledAt ?? undefined, scheduledChange, discount: discountOutput, } } 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["@paddle/paddle-helpers","card","badge","button","separator","alert","skeleton"]}]]}],["$","$L51",null,{"sourceUrl":"https://developer.paddle.com/r/subscription-status-card.json","proxyUrl":"https://shadcnregistry.com/r/paddle/subscription-status-card","itemId":"@paddle/subscription-status-card"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/new-york/blocks/subscription-status-card/components/subscription-status-card.tsx","content":"$53","type":"registry:component"},{"path":"registry/new-york/blocks/subscription-status-card/components/paddle-subscription-status-card.tsx","content":"$54","type":"registry:component"},{"path":"registry/new-york/blocks/subscription-status-card/lib/subscription-status-card-utils.ts","content":"$55","type":"registry:lib"}]}]]}],"$L56"]}]

Subscription Status Card

Installation

Files

components

lib

Styles