"use client" import * as React from "react" import { TrendingDown, TrendingUp, Minus } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card" import { Badge } from "@/registry/new-york/ui/badge" import { Skeleton } from "@/registry/new-york/ui/skeleton" import { Separator } from "@/registry/new-york/ui/separator" import { cn } from "@/lib/utils" import type { PlanChangeBreakdownData, PlanChangeTransactionSectionData, } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types" import { formatMoney, formatDate, } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format" /** Props for the `PlanChangeBreakdown` component. */ export type PlanChangeBreakdownProps = { breakdown?: PlanChangeBreakdownData /** * Payment collection mode. From `subscription.collection_mode`. * Affects section titles: "Charged Today" vs "Invoice Created" for immediate transactions. */ collectionMode?: "automatic" | "manual" className?: string } const SECTION_TITLES: Record< "immediate" | "next" | "recurring", { automatic: string; manual: string } > = { immediate: { automatic: "Charged today", manual: "Invoice created" }, next: { automatic: "Next invoice", manual: "Next invoice" }, recurring: { automatic: "Ongoing billing", manual: "Ongoing billing" }, } function TransactionSection({ section, kind, collectionMode = "automatic", currency, }: { section: PlanChangeTransactionSectionData kind: "immediate" | "next" | "recurring" collectionMode?: "automatic" | "manual" currency: string }) { const title = SECTION_TITLES[kind][collectionMode] const description = kind === "immediate" ? collectionMode === "manual" ? "An invoice will be created for this amount" : "This amount will be charged immediately" : kind === "next" ? section.billingDate ? `Charged on ${formatDate(section.billingDate)}` : undefined : "Recurring amount after this change" return (

{title}

{description &&

{description}

}

{section.lineItems.map((item, index) => (

{item.productName} {item.quantity > 1 && `${item.quantity} \u00d7 `} {formatMoney(item.unitPrice, currency)} {item.isProrated && ( Prorated )} {item.prorationPeriod && ( {item.prorationPeriod} )}

{formatMoney(item.total, currency)}

))}

Subtotal: {formatMoney(section.totals.subtotal, currency)}
Discount: −{formatMoney(section.totals.discount, currency)}
Tax: {formatMoney(section.totals.tax, currency)}
Credit applied: −{formatMoney(section.totals.credit, currency)}
Credit to balance: {formatMoney(section.totals.creditToBalance, currency)}
Total: {formatMoney(section.totals.total, currency)}

) } export function PlanChangeBreakdown({ breakdown, collectionMode, className, }: PlanChangeBreakdownProps) { if (!breakdown) { return } const { currency, result, breakdown: summaryBreakdown, immediateTransaction, nextTransaction, recurringTransaction, } = breakdown const isCredit = result.direction === "credit" const isNone = result.direction === "none" const resultLabel = isNone ? "No charge" : isCredit ? "Credit to account" : immediateTransaction ? "Amount due" : "Added to next bill" return ( Change summary Review the financial impact of this change

{isCredit ? ( ) : isNone ? ( ) : ( )} {resultLabel}

{isCredit ? `−${formatMoney(result.amount, currency)}` : formatMoney(result.amount, currency)}

{/* Credit/charge breakdown from update_summary */} {summaryBreakdown && (summaryBreakdown.credit !== undefined || summaryBreakdown.charge !== undefined) && (

{summaryBreakdown.credit !== undefined && (

Credit from current plan −{formatMoney(summaryBreakdown.credit, currency)}

)} {summaryBreakdown.charge !== undefined && (

Charge for new plan {formatMoney(summaryBreakdown.charge, currency)}

)}

)} {immediateTransaction && ( <> )} {nextTransaction && ( <> )} {recurringTransaction && ( <> )} ) } function PlanChangeBreakdownSkeleton({ className }: { className?: string }) { return (

) }