Plan change breakdown

1"use client"
2 
3import * as React from "react"
4import { TrendingDown, TrendingUp, Minus } 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 { cn } from "@/lib/utils"
16import type {
17  PlanChangeBreakdownData,
18  PlanChangeTransactionSectionData,
19} from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types"
20import {
21  formatMoney,
22  formatDate,
23} from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format"
24 
25/** Props for the `PlanChangeBreakdown` component. */
26export type PlanChangeBreakdownProps = {
27  breakdown?: PlanChangeBreakdownData
28  /**
29   * Payment collection mode. From `subscription.collection_mode`.
30   * Affects section titles: "Charged Today" vs "Invoice Created" for immediate transactions.
31   */
32  collectionMode?: "automatic" | "manual"
33  className?: string
34}
35 
36const SECTION_TITLES: Record<
37  "immediate" | "next" | "recurring",
38  { automatic: string; manual: string }
39> = {
40  immediate: { automatic: "Charged today", manual: "Invoice created" },
41  next: { automatic: "Next invoice", manual: "Next invoice" },
42  recurring: { automatic: "Ongoing billing", manual: "Ongoing billing" },
43}
44 
45function TransactionSection({
46  section,
47  kind,
48  collectionMode = "automatic",
49  currency,
50}: {
51  section: PlanChangeTransactionSectionData
52  kind: "immediate" | "next" | "recurring"
53  collectionMode?: "automatic" | "manual"
54  currency: string
55}) {
56  const title = SECTION_TITLES[kind][collectionMode]
57 
58  const description =
59    kind === "immediate"
60      ? collectionMode === "manual"
61        ? "An invoice will be created for this amount"
62        : "This amount will be charged immediately"
63      : kind === "next"
64        ? section.billingDate
65          ? `Charged on ${formatDate(section.billingDate)}`
66          : undefined
67        : "Recurring amount after this change"
68 
69  return (
70    <div className="flex flex-col gap-3">
71      <div>
72        <h4 className="text-sm font-medium">{title}</h4>
73        {description && <p className="text-xs text-muted-foreground">{description}</p>}
74      </div>
75 
76      <div className="flex flex-col gap-2">
77        {section.lineItems.map((item, index) => (
78          <div key={index} className="flex items-start justify-between gap-4 text-sm">
79// … truncated