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:T2d14,"use client" import * as React from "react" import { ArrowRight, AlertCircle } 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 { Alert, AlertDescription } from "@/registry/new-york/ui/alert" import { cn } from "@/lib/utils" import type { PlanChangePreviewData } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types" import { formatMoney, formatDate, formatBillingCycle, formatProrationMode, } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format" /** Props for the `PlanChangePreview` component. */ export type PlanChangePreviewProps = { preview?: PlanChangePreviewData /** * Paddle proration billing mode passed to `PATCH /subscriptions/{id}/preview`. * The component derives the billing row label and effective date from this value. */ prorationBillingMode?: | "prorated_immediately" | "full_immediately" | "prorated_next_billing_period" | "full_next_billing_period" | "do_not_bill" className?: string } export function PlanChangePreview({ preview, prorationBillingMode, className, }: PlanChangePreviewProps) { if (!preview) { return } const { currency, currentPlan, newPlan, costImpact, discount, scheduledChange, subscriptionStatus, collectionMode, } = preview const isCharge = costImpact.resultDirection === "charge" const isCredit = costImpact.resultDirection === "credit" const isNeutral = costImpact.resultDirection === "none" const isManual = collectionMode === "manual" const isTrialing = subscriptionStatus === "trialing" const changeType = isCharge ? "upgrade" : isCredit ? "downgrade" : "change" const prorationLabel = prorationBillingMode ? formatProrationMode(prorationBillingMode) : undefined const isImmediate = prorationBillingMode?.includes("immediately") || prorationBillingMode === "do_not_bill" function resolveEffectiveDate(): string | undefined { if (prorationBillingMode) { if (isImmediate) return "Immediately" return costImpact.nextBillDate ? formatDate(costImpact.nextBillDate) : undefined } if (costImpact.immediateAmount !== undefined) return "Immediately" return costImpact.nextBillDate ? formatDate(costImpact.nextBillDate) : undefined } const effectiveDate = resolveEffectiveDate() function resolveScheduledChangeMessage(): string | undefined { if (!scheduledChange) return undefined if (scheduledChange.action === "resume") return undefined const actionLabel = scheduledChange.action === "cancel" ? "Cancellation" : "Pause" return `${actionLabel} scheduled for ${formatDate(scheduledChange.effectiveAt)}. Billing options may be restricted.` } const scheduledChangeMessage = resolveScheduledChangeMessage() const hasBreakdownRows = costImpact.credit !== undefined || costImpact.charge !== undefined const totalLabel = isCredit ? "Credit to account" : isNeutral ? "No charge" : isManual ? "Invoice amount" : costImpact.immediateAmount !== undefined ? "Amount due now" : "Amount at next billing" const currentIntervalLabel = formatBillingCycle({ interval: currentPlan.interval, frequency: currentPlan.billingFrequency ?? 1, }) ?? currentPlan.interval const newIntervalLabel = formatBillingCycle({ interval: newPlan.interval, frequency: newPlan.billingFrequency ?? 1, }) ?? newPlan.interval return ( Change summary Review the overview of this change {scheduledChangeMessage && ( {scheduledChangeMessage} )}

Current plan

{currentPlan.productName}

{formatMoney(currentPlan.price, currency)} / {currentIntervalLabel}

New plan

{newPlan.productName}

{formatMoney(newPlan.price, currency)} / {newIntervalLabel}

Change type {changeType === "upgrade" ? "Upgrade" : changeType === "downgrade" ? "Downgrade" : "Change"}

{prorationLabel && (

Billing {prorationLabel}

)} {effectiveDate && (

Effective {effectiveDate}

)} {discount && (

Discount {discount.description} {discount.endsAt && ( until {formatDate(discount.endsAt)} )}

)}

Current {formatMoney(currentPlan.price, currency)} / {currentIntervalLabel}

New {formatMoney(newPlan.price, currency)} / {newIntervalLabel}

{/* Financial summary — credit/charge breakdown + total row */} {(hasBreakdownRows || !isNeutral) && ( <>

{costImpact.credit !== undefined && (

Credit −{formatMoney(costImpact.credit, currency)}

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

Charge {formatMoney(costImpact.charge, currency)}

)}

{totalLabel} {isCredit ? "−" : ""} {formatMoney(costImpact.resultAmount, currency)}

)} {/* Contextual notes derived from subscription state */} {isTrialing && isNeutral && (

No charges during your trial. Billing begins when your trial ends.

)} {isManual && isCharge && (

An invoice will be created for this amount.

)} ) } function PlanChangePreviewSkeleton({ className }: { className?: string }) { return (

) } 53:T71b,"use client" import * as React from "react" import { mapPreviewToPlanChangeData } from "@/registry/new-york/blocks/plan-change-preview/lib/plan-change-preview-utils" import { PlanChangePreview, type PlanChangePreviewProps } from "./plan-change-preview" type PaddleSubscription = Parameters[0] type PreviewResponse = Parameters[1] type PaddleDiscount = Parameters[2] export type PaddlePlanChangePreviewProps = { /** Current Paddle Subscription (before the change) */ subscription: PaddleSubscription /** Subscription update preview response with the proposed changes */ previewResponse: PreviewResponse /** Paddle Discount for enriched discount display */ discount?: PaddleDiscount } & Omit /** * Paddle-aware wrapper for `PlanChangePreview`. * * Accepts the current subscription entity and the Paddle preview update response, * maps them to `PlanChangePreviewData`, and renders the UI component. * * Pass `prorationBillingMode` through to control which billing row and label * the component displays. * * `subscription.items[].price.unit_price` must be present for the current plan * price to display correctly — fetch with full price details, not a list response. * * @example * */ export function PaddlePlanChangePreview({ subscription, previewResponse, discount, ...uiProps }: PaddlePlanChangePreviewProps) { const preview = mapPreviewToPlanChangeData(subscription, previewResponse, discount) return } 54:T181e,import type { PlanChangePreviewData } 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. // The preview endpoint (PATCH /subscriptions/{id}/preview) returns a full // subscription snapshot plus update_summary and transaction previews. // --- type AmountWithCurrency = { amount: string currencyCode: string } type UpdateSummary = { credit: AmountWithCurrency charge: AmountWithCurrency result: { action: "credit" | "charge" amount: string currencyCode: string } } type TransactionPreview = { billingPeriod?: { startsAt?: string | null } | null details?: { totals?: { grandTotal?: string | null } | null } | null } | null type RecurringDetails = { totals: { total: string; currencyCode: string } lineItems?: Array<{ totals: { total: string } }> | null } type PlanItem = { product: { name: string } price: { unitPrice?: { amount: string; currencyCode: string } | null billingCycle?: { interval: string; frequency: number } | null } } type SubscriptionPreviewResponse = { currencyCode: string billingCycle: { interval: string; frequency: number } updateSummary: UpdateSummary immediateTransaction?: TransactionPreview nextTransaction?: TransactionPreview recurringTransactionDetails: RecurringDetails items: PlanItem[] } // Matches SDK SubscriptionDiscount — subscription.discount only has id + dates type SubscriptionDiscountField = { id: string startsAt?: string | null endsAt?: string | null } | null type PaddleSubscription = { currencyCode: string billingCycle: { interval: string; frequency: number } items: PlanItem[] status?: "active" | "canceled" | "past_due" | "paused" | "trialing" collectionMode?: "automatic" | "manual" scheduledChange?: { action: "cancel" | "pause" | "resume" effectiveAt: string } | null discount?: SubscriptionDiscountField } // 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 } /** * Maps a Paddle subscription preview API response to the `PlanChangePreviewData` * display contract consumed by `PlanChangePreview`. * * Pass `prorationBillingMode` directly to the `` component as a prop. * Optionally pass a Paddle `Discount` to enrich the discount display. * * @param subscription - Current Paddle Subscription (before the change) * @param preview - Subscription update preview response * @param discount - Paddle Discount for enriched discount display * @returns Mapped preview data for `` * * @example * const subscription = await paddle.subscriptions.get(subscriptionId) * const preview = await paddle.subscriptions.previewUpdate(subscriptionId, { * items: [{ priceId: newPriceId, quantity: 1 }], * prorationBillingMode: "prorated_immediately", * }) * const data = mapPreviewToPlanChangeData(subscription, preview) */ export function mapPreviewToPlanChangeData( subscription: PaddleSubscription, preview: SubscriptionPreviewResponse, discount?: PaddleDiscount | null ): PlanChangePreviewData { const currencyCode = preview.currencyCode const { 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 resultDirection: PlanChangePreviewData["costImpact"]["resultDirection"] = resultAmount === 0 ? "none" : updateSummary.result.action const immediateAmount = immediateTransaction?.details?.totals?.grandTotal ? parseAmount(immediateTransaction.details.totals.grandTotal, currencyCode) : undefined const nextBillAmount = nextTransaction?.details?.totals?.grandTotal ? parseAmount(nextTransaction.details.totals.grandTotal, currencyCode) : undefined const nextBillDate = nextTransaction?.billingPeriod?.startsAt ?? undefined const currentItem = subscription.items[0] const newItem = preview.items[0] // description is required by PlanChangePreviewData.discount — only set when full entity provided const discountOutput: PlanChangePreviewData["discount"] = discount ? { description: discount.description, endsAt: subscription.discount?.endsAt ?? undefined, } : undefined const scheduledChange: PlanChangePreviewData["scheduledChange"] = subscription.scheduledChange ? { action: subscription.scheduledChange.action, effectiveAt: subscription.scheduledChange.effectiveAt, } : undefined return { currency: currencyCode, currentPlan: { productName: currentItem.product.name, price: currentItem.price.unitPrice ? parseAmount(currentItem.price.unitPrice.amount, currencyCode) : 0, interval: subscription.billingCycle.interval, billingFrequency: subscription.billingCycle.frequency, }, newPlan: { productName: newItem.product.name, price: parseAmount(recurringTransactionDetails.totals.total, currencyCode), interval: preview.billingCycle.interval, billingFrequency: preview.billingCycle.frequency, }, costImpact: { resultDirection, resultAmount, credit: creditAmount > 0 ? creditAmount : undefined, charge: chargeAmount > 0 ? chargeAmount : undefined, immediateAmount, nextBillAmount, nextBillDate, newRecurringTotal: parseAmount(recurringTransactionDetails.totals.total, currencyCode), newBillingInterval: preview.billingCycle.interval, newBillingFrequency: preview.billingCycle.frequency, }, discount: discountOutput, scheduledChange, subscriptionStatus: subscription.status, collectionMode: subscription.collectionMode, } } 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","alert"]}]]}],["$","$L50",null,{"sourceUrl":"https://developer.paddle.com/r/plan-change-preview.json","proxyUrl":"https://shadcnregistry.com/r/paddle/plan-change-preview","itemId":"@paddle/plan-change-preview"}],["$","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-preview/components/plan-change-preview.tsx","content":"$52","type":"registry:component"},{"path":"registry/new-york/blocks/plan-change-preview/components/paddle-plan-change-preview.tsx","content":"$53","type":"registry:component"},{"path":"registry/new-york/blocks/plan-change-preview/lib/plan-change-preview-utils.ts","content":"$54","type":"registry:lib"}]}]]}],"$L55"]}]

Plan Change Preview

Installation

Files

components

lib

Styles