Plan change preview

1"use client"
2 
3import * as React from "react"
4import { ArrowRight, AlertCircle } from "lucide-react"
5import {
6  Card,
7  CardContent,
8  CardDescription,
9  CardHeader,
10  CardTitle,
11} from "@/registry/new-york/ui/card"
12import { Badge } from "@/registry/new-york/ui/badge"
13import { Skeleton } from "@/registry/new-york/ui/skeleton"
14import { Separator } from "@/registry/new-york/ui/separator"
15import { Alert, AlertDescription } from "@/registry/new-york/ui/alert"
16import { cn } from "@/lib/utils"
17import type { PlanChangePreviewData } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types"
18import {
19  formatMoney,
20  formatDate,
21  formatBillingCycle,
22  formatProrationMode,
23} from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format"
24 
25/** Props for the `PlanChangePreview` component. */
26export type PlanChangePreviewProps = {
27  preview?: PlanChangePreviewData
28  /**
29   * Paddle proration billing mode passed to `PATCH /subscriptions/{id}/preview`.
30   * The component derives the billing row label and effective date from this value.
31   */
32  prorationBillingMode?:
33    | "prorated_immediately"
34    | "full_immediately"
35    | "prorated_next_billing_period"
36    | "full_next_billing_period"
37    | "do_not_bill"
38  className?: string
39}
40 
41export function PlanChangePreview({
42  preview,
43  prorationBillingMode,
44  className,
45}: PlanChangePreviewProps) {
46  if (!preview) {
47    return <PlanChangePreviewSkeleton className={className} />
48  }
49 
50  const {
51    currency,
52    currentPlan,
53    newPlan,
54    costImpact,
55    discount,
56    scheduledChange,
57    subscriptionStatus,
58    collectionMode,
59  } = preview
60  const isCharge = costImpact.resultDirection === "charge"
61  const isCredit = costImpact.resultDirection === "credit"
62  const isNeutral = costImpact.resultDirection === "none"
63  const isManual = collectionMode === "manual"
64  const isTrialing = subscriptionStatus === "trialing"
65 
66  const changeType = isCharge ? "upgrade" : isCredit ? "downgrade" : "change"
67 
68  const prorationLabel = prorationBillingMode
69    ? formatProrationMode(prorationBillingMode)
70    : undefined
71 
72  const isImmediate =
73    prorationBillingMode?.includes("immediately") || prorationBillingMode === "do_not_bill"
74 
75  function resolveEffectiveDate(): string | undefined {
76    if (prorationBillingMode) {
77      if (isImmediate) return "Immediately"
78      return costImpact.nextBillDate ? formatDate(costImpact.nextBillDate) : undefined
79    }
80    if (costImpact.immediateAmount !== undefined) return "Immediately"
81// … truncated