Update Plan Card

1"use client";
2 
3import { useState, useCallback } from "react";
4import { motion, AnimatePresence } from "motion/react";
5import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
6import { Button } from "@/components/ui/button";
7import { Badge } from "@/components/ui/badge";
8import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
9import { Toggle } from "@/components/ui/toggle";
10import { Label } from "@/components/ui/label";
11import { type Plan } from "@/lib/billingsdk-config";
12import { cn } from "@/lib/utils";
13 
14export interface UpdatePlanCardProps {
15  currentPlan: Plan;
16  plans: Plan[];
17  onPlanChange: (planId: string) => void;
18  className?: string;
19  title?: string;
20}
21 
22const easing = [0.4, 0, 0.2, 1] as const;
23 
24export function UpdatePlanCard({
25  currentPlan,
26  plans,
27  onPlanChange,
28  className,
29  title,
30}: UpdatePlanCardProps) {
31  const [isYearly, setIsYearly] = useState(false);
32  const [selectedPlan, setSelectedPlan] = useState<string | undefined>(
33    undefined,
34  );
35 
36  const getCurrentPrice = useCallback(
37    (plan: Plan) => (isYearly ? `${plan.yearlyPrice}` : `${plan.monthlyPrice}`),
38    [isYearly],
39  );
40 
41  const handlePlanChange = useCallback((planId: string) => {
42    setSelectedPlan((prev) => (prev === planId ? undefined : planId));
43  }, []);
44 
45  return (
46    <Card
47      className={cn(
48        "mx-auto w-full max-w-xl overflow-hidden text-left shadow-lg",
49        className,
50      )}
51    >
52      <CardHeader className="flex flex-row items-center justify-between pb-2">
53        <CardTitle className="text-base font-semibold">
54          {title || "Upgrade Plan"}
55        </CardTitle>
56        <div className="flex items-center gap-2 text-sm">
57          <Toggle
58            size="sm"
59            pressed={!isYearly}
60            onPressedChange={(pressed) => setIsYearly(!pressed)}
61            className="px-3"
62          >
63            Monthly
64          </Toggle>
65          <Toggle
66            pressed={isYearly}
67            onPressedChange={(pressed) => setIsYearly(pressed)}
68            className="px-3"
69          >
70            Yearly
71          </Toggle>
72        </div>
73      </CardHeader>
74      <CardContent className="space-y-3">
75        <RadioGroup value={selectedPlan} onValueChange={handlePlanChange}>
76          <div className="space-y-2.5 sm:space-y-3">
77            {plans.map((plan, index) => (
78              <motion.div
79                key={plan.id}
80                layout
81                initial={{ opacity: 0, y: 20 }}
82// … truncated