4f: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"] 50: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"] 51: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"] 52:T3097,"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 (

) } 53:T53a,"use client" import * as React from "react" import { mapPreviewToBreakdownData } from "@/registry/new-york/blocks/plan-change-breakdown/lib/plan-change-breakdown-utils" import { PlanChangeBreakdown, type PlanChangeBreakdownProps } from "./plan-change-breakdown" type BreakdownPreviewResponse = Parameters[0] export type PaddlePlanChangeBreakdownProps = { /** Subscription update preview response with the proposed changes */ previewResponse: BreakdownPreviewResponse } & Omit /** * Paddle-aware wrapper for `PlanChangeBreakdown`. * * Accepts the response from the Paddle preview update endpoint, maps it to * `PlanChangeBreakdownData`, and renders the detailed financial breakdown UI. * * Pass `collectionMode` from the subscription to control billing terminology * (e.g. "Invoice created" vs "Charged today"). * * @example * */ export function PaddlePlanChangeBreakdown({ previewResponse, ...uiProps }: PaddlePlanChangeBreakdownProps) { const breakdown = mapPreviewToBreakdownData(previewResponse) return } 54:T1938,import type { PlanChangeBreakdownData, PlanChangeLineItemData, PlanChangeTransactionSectionData, PlanChangeTransactionTotalsData, } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types" import { parseAmount } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format" // --- // Input shapes — matching Paddle Node SDK / API response structures. // `immediate_transaction` and `next_transaction` share a shape with // `details.line_items` and `details.totals`. `recurring_transaction_details` // has `line_items` and `totals` at the top level (no `details` wrapper) // and omits `billing_period`. // --- type AmountWithCurrency = { amount: string currencyCode: string } type LineItemTotals = { subtotal: string total: string tax: string discount: string } type Proration = { rate: string billingPeriod: { startsAt: string endsAt: string } } | null type LineItem = { product: { name: string } quantity: number unitTotals: { subtotal: string } totals: LineItemTotals proration?: Proration } type TransactionTotals = { subtotal: string discount: string tax: string total: string grandTotal: string credit: string creditToBalance?: string } type TransactionPreview = { billingPeriod?: { startsAt?: string | null; endsAt?: string | null } | null details: { totals: TransactionTotals lineItems: LineItem[] } } type RecurringTransactionDetails = { totals: TransactionTotals & { currencyCode: string } lineItems: LineItem[] } type UpdateSummary = { credit: AmountWithCurrency charge: AmountWithCurrency result: { action: "credit" | "charge" amount: string currencyCode: string } } type BreakdownPreviewResponse = { currencyCode: string updateSummary: UpdateSummary immediateTransaction?: TransactionPreview | null nextTransaction?: TransactionPreview | null recurringTransactionDetails?: RecurringTransactionDetails | null } function mapLineItems(items: LineItem[], currencyCode: string): PlanChangeLineItemData[] { return items.map((item) => { const hasProration = item.proration != null let prorationPeriod: string | undefined if (hasProration && item.proration) { const rate = parseFloat(item.proration.rate) if (!isNaN(rate) && rate > 0 && rate < 1) { const start = new Date(item.proration.billingPeriod.startsAt) const end = new Date(item.proration.billingPeriod.endsAt) const totalDays = Math.round((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)) const proratedDays = Math.round(totalDays * rate) prorationPeriod = `${proratedDays} of ${totalDays} days` } } return { productName: item.product.name, quantity: item.quantity, unitPrice: parseAmount(item.unitTotals.subtotal, currencyCode), total: parseAmount(item.totals.total, currencyCode), isProrated: hasProration || undefined, prorationPeriod, } }) } function mapTotals( totals: TransactionTotals, currencyCode: string ): PlanChangeTransactionTotalsData { const discount = parseAmount(totals.discount, currencyCode) const credit = parseAmount(totals.credit, currencyCode) const creditToBalance = totals.creditToBalance ? parseAmount(totals.creditToBalance, currencyCode) : 0 return { subtotal: parseAmount(totals.subtotal, currencyCode), discount: discount > 0 ? discount : undefined, tax: parseAmount(totals.tax, currencyCode), credit: credit > 0 ? credit : undefined, creditToBalance: creditToBalance > 0 ? creditToBalance : undefined, total: parseAmount(totals.grandTotal, currencyCode), } } /** * Maps a Paddle subscription preview API response to the `PlanChangeBreakdownData` * display contract consumed by `PlanChangeBreakdown`. * * Provides full financial detail — line items, tax, proration periods, and totals. * Pass `collectionMode` directly to `` as a prop. * * @param preview - Subscription update preview response * @returns Mapped breakdown data for `` * * @example * const preview = await paddle.subscriptions.previewUpdate(subscriptionId, { * items: [{ priceId: newPriceId, quantity: 1 }], * prorationBillingMode: "prorated_immediately", * }) * const data = mapPreviewToBreakdownData(preview) */ export function mapPreviewToBreakdownData( preview: BreakdownPreviewResponse ): PlanChangeBreakdownData { const { currencyCode, updateSummary, immediateTransaction, nextTransaction, recurringTransactionDetails, } = preview const resultAmount = parseAmount(updateSummary.result.amount, currencyCode) const creditAmount = parseAmount(updateSummary.credit.amount, currencyCode) const chargeAmount = parseAmount(updateSummary.charge.amount, currencyCode) const isNone = resultAmount === 0 const result: PlanChangeBreakdownData["result"] = { direction: isNone ? "none" : updateSummary.result.action, amount: resultAmount, } const breakdown: PlanChangeBreakdownData["breakdown"] = creditAmount > 0 || chargeAmount > 0 ? { credit: creditAmount > 0 ? creditAmount : undefined, charge: chargeAmount > 0 ? chargeAmount : undefined, } : undefined let immediateSectionData: PlanChangeTransactionSectionData | undefined if (immediateTransaction) { immediateSectionData = { lineItems: mapLineItems(immediateTransaction.details.lineItems, currencyCode), totals: mapTotals(immediateTransaction.details.totals, currencyCode), } } let nextSectionData: PlanChangeTransactionSectionData | undefined if (nextTransaction) { nextSectionData = { billingDate: nextTransaction.billingPeriod?.startsAt ?? undefined, lineItems: mapLineItems(nextTransaction.details.lineItems, currencyCode), totals: mapTotals(nextTransaction.details.totals, currencyCode), } } let recurringSectionData: PlanChangeTransactionSectionData | undefined if (recurringTransactionDetails) { recurringSectionData = { lineItems: mapLineItems(recurringTransactionDetails.lineItems, currencyCode), totals: mapTotals(recurringTransactionDetails.totals, currencyCode), } } return { currency: currencyCode, result, breakdown, immediateTransaction: immediateSectionData, nextTransaction: nextSectionData, recurringTransaction: recurringSectionData, } } 4b:["$","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"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["@paddle/paddle-helpers","card","badge","skeleton","separator"]}]]}],["$","$L50",null,{"sourceUrl":"https://developer.paddle.com/r/plan-change-breakdown.json","proxyUrl":"https://shadcnregistry.com/r/paddle/plan-change-breakdown","itemId":"@paddle/plan-change-breakdown"}],["$","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"}],["$","$L51",null,{"files":[{"path":"registry/new-york/blocks/plan-change-breakdown/components/plan-change-breakdown.tsx","content":"$52","type":"registry:component"},{"path":"registry/new-york/blocks/plan-change-breakdown/components/paddle-plan-change-breakdown.tsx","content":"$53","type":"registry:component"},{"path":"registry/new-york/blocks/plan-change-breakdown/lib/plan-change-breakdown-utils.ts","content":"$54","type":"registry:lib"}]}]]}],"$L55"]}]

Plan Change Breakdown

Installation

Files

components

lib

Styles