Update Plan Dialog

1"use client";
2 
3import { motion, AnimatePresence } from "motion/react";
4import { Button } from "@/components/ui/button";
5import { Badge } from "@/components/ui/badge";
6import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
7import { Toggle } from "@/components/ui/toggle";
8import { Label } from "@/components/ui/label";
9import { type Plan } from "@/lib/billingsdk-config";
10import { cn } from "@/lib/utils";
11import {
12  Dialog,
13  DialogContent,
14  DialogHeader,
15  DialogTitle,
16  DialogTrigger,
17} from "@/components/ui/dialog";
18import { useState, useCallback } from "react";
19import { useTheme } from "@/contexts/theme-context";
20import { getThemeStyles } from "@/lib/themes";
21 
22export interface UpdatePlanDialogProps {
23  currentPlan: Plan;
24  plans: Plan[];
25  triggerText: string;
26  onPlanChange: (planId: string) => void;
27  className?: string;
28  title?: string;
29}
30 
31const easing = [0.4, 0, 0.2, 1] as const;
32 
33export function UpdatePlanDialog({
34  currentPlan,
35  plans,
36  onPlanChange,
37  className,
38  title,
39  triggerText,
40}: UpdatePlanDialogProps) {
41  const [isYearly, setIsYearly] = useState(false);
42  const [selectedPlan, setSelectedPlan] = useState<string | undefined>(
43    undefined,
44  );
45  const [isOpen, setIsOpen] = useState(false);
46  const { currentTheme, previewDarkMode } = useTheme();
47  const themeStyles = getThemeStyles(currentTheme, previewDarkMode);
48 
49  const getCurrentPrice = useCallback(
50    (plan: Plan) => (isYearly ? `${plan.yearlyPrice}` : `${plan.monthlyPrice}`),
51    [isYearly],
52  );
53 
54  const handlePlanChange = useCallback((planId: string) => {
55    setSelectedPlan((prev) => (prev === planId ? undefined : planId));
56  }, []);
57 
58  const handleOpenChange = useCallback((open: boolean) => {
59    setIsOpen(open);
60    if (!open) {
61      setSelectedPlan(undefined);
62    }
63  }, []);
64 
65  return (
66    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
67      <DialogTrigger asChild>
68        <Button>{triggerText || "Update Plan"}</Button>
69      </DialogTrigger>
70      <DialogContent
71        className={cn(
72          "text-foreground flex max-h-[95vh] flex-col gap-3 sm:max-h-[90vh] sm:gap-4",
73          "w-[calc(100vw-2rem)] max-w-2xl sm:w-full",
74          "p-4 sm:p-6",
75          className,
76        )}
77        style={themeStyles}
78      >
79        <DialogHeader className="flex flex-col gap-3 pb-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4 sm:pb-0">
80          <DialogTitle className="text-lg font-semibold sm:text-xl">
81            {title || "Upgrade Plan"}
82// … truncated