Subscription payment card

1"use client"
2 
3import * as React from "react"
4import { CreditCard, Calendar, ExternalLink } from "lucide-react"
5import { Card, CardContent, CardHeader, CardTitle } from "@/registry/new-york/ui/card"
6import { Skeleton } from "@/registry/new-york/ui/skeleton"
7import { Separator } from "@/registry/new-york/ui/separator"
8import { cn } from "@/lib/utils"
9import type {
10  NextPaymentData,
11  PaymentMethodData,
12} from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types"
13import { getPaymentMethodDisplay } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-payment-method-display"
14import { getPaymentMethodIcon } from "@/registry/new-york/blocks/paddle-helpers/lib/payment-method-icons"
15import {
16  formatMoney,
17  formatDate,
18} from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format"
19 
20export type SubscriptionPaymentCardProps = {
21  /**
22   * Next payment details. Absent when subscription is paused or canceled.
23   *
24   * Pass `undefined` for all three data props (`nextPayment`, `paymentMethod`,
25   * `updatePaymentMethodUrl`) to render the skeleton loading state.
26   */
27  nextPayment?: NextPaymentData
28  /**
29   * Payment method details. Pass raw fields from `transaction.payments[0].method_details`
30   * — the component resolves the display label automatically.
31   * Absent when not available from transaction history.
32   */
33  paymentMethod?: PaymentMethodData
34  /** Portal deep link to update payment method. Absent for manual collection. */
35  updatePaymentMethodUrl?: string
36  className?: string
37}
38 
39export function SubscriptionPaymentCard({
40  nextPayment,
41  paymentMethod,
42  updatePaymentMethodUrl,
43  className,
44}: SubscriptionPaymentCardProps) {
45  const isLoading =
46    nextPayment === undefined && paymentMethod === undefined && updatePaymentMethodUrl === undefined
47 
48  if (isLoading) {
49    return <SubscriptionPaymentCardSkeleton className={className} />
50  }
51 
52  const displayLabel = paymentMethod
53    ? (paymentMethod.label ??
54      getPaymentMethodDisplay(paymentMethod.type, paymentMethod.cardBrand, paymentMethod.last4))
55    : undefined
56 
57  const PaymentMethodIcon = paymentMethod
58    ? (getPaymentMethodIcon(paymentMethod.type, paymentMethod.cardBrand) ?? CreditCard)
59    : CreditCard
60 
61  const expiryLabel =
62    paymentMethod?.expiryMonth !== undefined && paymentMethod?.expiryYear !== undefined
63      ? `Expires ${String(paymentMethod.expiryMonth).padStart(2, "0")}/${String(paymentMethod.expiryYear).slice(-2)}`
64      : undefined
65 
66  return (
67// … truncated