Subscription Management

1"use client";
2 
3import {
4  Card,
5  CardContent,
6  CardDescription,
7  CardHeader,
8  CardTitle,
9} from "@/components/ui/card";
10import { Badge } from "@/components/ui/badge";
11import { Separator } from "@/components/ui/separator";
12import { Calendar, CreditCard } from "lucide-react";
13import { CurrentPlan } from "@/lib/billingsdk-config";
14import { cn } from "@/lib/utils";
15import {
16  CancelSubscriptionDialog,
17  type CancelSubscriptionDialogProps,
18} from "@/components/billingsdk/cancel-subscription-dialog";
19import {
20  UpdatePlanDialog,
21  type UpdatePlanDialogProps,
22} from "@/components/billingsdk/update-plan-dialog";
23 
24export interface SubscriptionManagementProps {
25  className?: string;
26  currentPlan: CurrentPlan;
27  cancelSubscription: CancelSubscriptionDialogProps;
28  updatePlan: UpdatePlanDialogProps;
29}
30 
31export function SubscriptionManagement({
32  className,
33  currentPlan,
34  cancelSubscription,
35  updatePlan,
36}: SubscriptionManagementProps) {
37  return (
38    <div className={cn("w-full text-left", className)}>
39      <Card className="shadow-lg">
40        <CardHeader className="px-4 pb-4 sm:px-6 sm:pb-6">
41          <CardTitle className="flex items-center gap-2 text-lg sm:gap-3 sm:text-xl">
42            <div className="bg-primary/10 ring-primary/20 rounded-lg p-1.5 ring-1 sm:p-2">
43              <CreditCard className="text-primary h-4 w-4 sm:h-5 sm:w-5" />
44            </div>
45            Current Subscription
46          </CardTitle>
47          <CardDescription className="text-sm sm:text-base">
48            Manage your billing and subscription settings
49          </CardDescription>
50        </CardHeader>
51 
52        <CardContent className="space-y-6 px-4 sm:space-y-8 sm:px-6">
53          {/* Current Plan Details with highlighted styling */}
54          <div className="from-muted/30 via-muted/20 to-muted/30 border-border/50 relative overflow-hidden rounded-xl border bg-gradient-to-r p-3 sm:p-4">
55            <div className="relative">
56              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-0">
57                <div className="w-full">
58                  <div className="mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
59                    <div className="flex items-center gap-2">
60                      <h3 className="text-lg font-semibold sm:text-xl">
61                        {currentPlan.plan.title} Plan
62                      </h3>
63                    </div>
64                    <div className="flex flex-wrap items-center gap-2">
65// … truncated