Proration Preview

1"use client";
2 
3import { motion } from "motion/react";
4import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
5import { Badge } from "@/components/ui/badge";
6import { Button } from "@/components/ui/button";
7import { Separator } from "@/components/ui/separator";
8import {
9  ArrowRight,
10  Calendar,
11  CreditCard,
12  Calculator,
13  Clock,
14} from "lucide-react";
15import { type Plan, type CurrentPlan } from "@/lib/billingsdk-config";
16import { cn } from "@/lib/utils";
17import { cva, type VariantProps } from "class-variance-authority";
18 
19const prorationPreviewVariants = cva("w-full max-w-3xl mx-auto", {
20  variants: {
21    theme: {
22      minimal: "",
23      classic:
24        "relative overflow-hidden rounded-xl border border-border/50 bg-gradient-to-br from-card/50 to-muted/30 backdrop-blur-sm",
25    },
26    size: {
27      small: "text-sm",
28      medium: "text-base",
29      large: "text-lg",
30    },
31  },
32  defaultVariants: {
33    theme: "minimal",
34    size: "medium",
35  },
36});
37 
38const cardVariants = cva("transition-all duration-300", {
39  variants: {
40    theme: {
41      minimal: "border border-border bg-card",
42      classic:
43        "border border-border/30 bg-gradient-to-br from-card/80 to-muted/20 backdrop-blur-sm shadow-md",
44    },
45  },
46  defaultVariants: {
47    theme: "minimal",
48  },
49});
50 
51/**
52 * Props for `ProrationPreview`.
53 *
54 * Combines visual variants from `prorationPreviewVariants` with
55 * the billing context needed to compute proration math.
56 *
57 * - `currentPlan` and `newPlan` supply pricing and labels
58 * - `billingCycle` controls the target cycle for the new plan
59 * - `daysRemaining` and `effectiveDate` influence credit/charge math
60 * - `onConfirm`/`onCancel` wire user actions
61 */
62export interface ProrationPreviewProps extends VariantProps<
63  typeof prorationPreviewVariants
64> {
65  className?: string;
66  currentPlan: CurrentPlan;
67  newPlan: Plan;
68  billingCycle: "monthly" | "yearly";
69  daysRemaining?: number;
70  effectiveDate?: string;
71  onConfirm?: () => void;
72  onCancel?: () => void;
73  confirmText?: string;
74  cancelText?: string;
75}
76 
77/**
78 * ProrationPreview
79 *
80 * Renders a detailed, accessible preview of billing changes when a user switches
81 * subscription plans. It calculates and displays credits for unused time,
82 * prorated charges for the new plan, and the resulting net amount, with clear
83 * visual hierarchy and responsive styles.
84 *
85 * Key UI sections:
86 * - From/To plan summary with upgrade/downgrade badges
87// … truncated