Billing Subscription Settings

1"use client";
2 
3import { Calendar, Loader2, Pause, Play, RefreshCw, X } from "lucide-react";
4import { useState } from "react";
5import { cn } from "@/lib/utils";
6import {
7  AlertDialog,
8  AlertDialogAction,
9  AlertDialogCancel,
10  AlertDialogContent,
11  AlertDialogDescription,
12  AlertDialogFooter,
13  AlertDialogHeader,
14  AlertDialogTitle,
15} from "@/registry/new-york/ui/alert-dialog";
16import { Badge } from "@/registry/new-york/ui/badge";
17import { Button } from "@/registry/new-york/ui/button";
18import {
19  Card,
20  CardContent,
21  CardDescription,
22  CardHeader,
23  CardTitle,
24} from "@/registry/new-york/ui/card";
25import {
26  Select,
27  SelectContent,
28  SelectItem,
29  SelectTrigger,
30  SelectValue,
31} from "@/registry/new-york/ui/select";
32import { Separator } from "@/registry/new-york/ui/separator";
33import { Switch } from "@/registry/new-york/ui/switch";
34 
35export interface SubscriptionSettings {
36  id: string;
37  planName: string;
38  status: "active" | "paused" | "canceled" | "expired";
39  billingPeriod: "monthly" | "annual";
40  currentBillingDate: Date;
41  nextBillingDate?: Date;
42  pausedUntil?: Date;
43  canceledAt?: Date;
44  cancelAtPeriodEnd?: boolean;
45  autoRenew: boolean;
46  prorationPreview?: {
47    newAmount: number;
48    creditAmount: number;
49    nextBillingDate: Date;
50  };
51}
52 
53export interface BillingSubscriptionSettingsProps {
54  subscription: SubscriptionSettings;
55  onPause?: (resumeDate?: Date) => Promise<void>;
56  onResume?: () => Promise<void>;
57  onChangeBillingPeriod?: (period: "monthly" | "annual") => Promise<void>;
58  onUpdateBillingDate?: (date: Date) => Promise<void>;
59  onCancel?: (feedback?: string) => Promise<void>;
60  onReactivate?: () => Promise<void>;
61  onToggleAutoRenew?: (enabled: boolean) => Promise<void>;
62  className?: string;
63  currency?: string;
64}
65 
66function formatDate(date: Date): string {
67  const year = date.getFullYear();
68  const month = date.toLocaleString("en-US", { month: "short" });
69  const day = date.getDate();
70  return `${month} ${day}, ${year}`;
71}
72 
73function formatPrice(amount: number, currency = "USD"): string {
74  return new Intl.NumberFormat("en-US", {
75    style: "currency",
76    currency,
77    minimumFractionDigits: 2,
78    maximumFractionDigits: 2,
79  }).format(amount);
80}
81 
82export default function BillingSubscriptionSettings({
83  subscription,
84  onPause,
85  onResume,
86  onChangeBillingPeriod,
87  onUpdateBillingDate,
88  onCancel,
89  onReactivate,
90  onToggleAutoRenew,
91  className,
92  currency = "USD",
93}: BillingSubscriptionSettingsProps) {
94// … truncated