Cancel Subscription Dialog

1"use client";
2 
3import { useState, useEffect } from "react";
4import { Button } from "@/components/ui/button";
5import { Badge } from "@/components/ui/badge";
6import {
7  Dialog,
8  DialogClose,
9  DialogContent,
10  DialogTitle,
11  DialogTrigger,
12} from "@/components/ui/dialog";
13import { type Plan } from "@/lib/billingsdk-config";
14import { cn } from "@/lib/utils";
15import { X, Circle } from "lucide-react";
16import { useTheme } from "@/contexts/theme-context";
17import { getThemeStyles } from "@/lib/themes";
18 
19export interface CancelSubscriptionDialogProps {
20  title: string;
21  description: string;
22  plan: Plan;
23  triggerButtonText?: string;
24  leftPanelImageUrl?: string;
25  warningTitle?: string;
26  warningText?: string;
27  keepButtonText?: string;
28  continueButtonText?: string;
29  finalTitle?: string;
30  finalSubtitle?: string;
31  finalWarningText?: string;
32  goBackButtonText?: string;
33  confirmButtonText?: string;
34  onCancel: (planId: string) => Promise<void> | void;
35  onKeepSubscription?: (planId: string) => Promise<void> | void;
36  onDialogClose?: () => void;
37  className?: string;
38}
39 
40export function CancelSubscriptionDialog({
41  title,
42  description,
43  plan,
44  triggerButtonText,
45  leftPanelImageUrl,
46  warningTitle,
47  warningText,
48  keepButtonText,
49  continueButtonText,
50  finalTitle,
51  finalSubtitle,
52  finalWarningText,
53  goBackButtonText,
54  confirmButtonText,
55  onCancel,
56  onKeepSubscription,
57  onDialogClose,
58  className,
59}: CancelSubscriptionDialogProps) {
60  const [showConfirmation, setShowConfirmation] = useState(false);
61  const [isOpen, setIsOpen] = useState(false);
62  const [isLoading, setIsLoading] = useState(false);
63  const [error, setError] = useState<string | null>(null);
64  const { currentTheme, previewDarkMode } = useTheme();
65  const themeStyles = getThemeStyles(currentTheme, previewDarkMode);
66 
67  const handleContinueCancellation = () => {
68    setShowConfirmation(true);
69    setError(null);
70  };
71 
72  const handleConfirmCancellation = async () => {
73    try {
74      setIsLoading(true);
75      setError(null);
76      await onCancel(plan.id);
77      handleDialogClose();
78    } catch (err) {
79      setError(
80        err instanceof Error ? err.message : "Failed to cancel subscription",
81      );
82    } finally {
83      setIsLoading(false);
84    }
85  };
86 
87  const handleKeepSubscription = async () => {
88    try {
89      setIsLoading(true);
90      setError(null);
91      if (onKeepSubscription) {
92        await onKeepSubscription(plan.id);
93      }
94      handleDialogClose();
95    } catch (err) {
96// … truncated