Cancel Subscription Card

1"use client";
2 
3import { useState } from "react";
4import { Button } from "@/components/ui/button";
5import { Badge } from "@/components/ui/badge";
6import { Card, CardContent } from "@/components/ui/card";
7import { type Plan } from "@/lib/billingsdk-config";
8import { cn } from "@/lib/utils";
9import { Circle } from "lucide-react";
10 
11export interface CancelSubscriptionCardProps {
12  title: string;
13  description: string;
14  plan: Plan;
15  leftPanelImageUrl?: string;
16  warningTitle?: string;
17  warningText?: string;
18  keepButtonText?: string;
19  continueButtonText?: string;
20  finalTitle?: string;
21  finalSubtitle?: string;
22  finalWarningText?: string;
23  goBackButtonText?: string;
24  confirmButtonText?: string;
25  onCancel: (planId: string) => Promise<void> | void;
26  onKeepSubscription?: (planId: string) => Promise<void> | void;
27  className?: string;
28}
29 
30export function CancelSubscriptionCard({
31  title,
32  description,
33  plan,
34  leftPanelImageUrl,
35  warningTitle,
36  warningText,
37  keepButtonText,
38  continueButtonText,
39  finalTitle,
40  finalSubtitle,
41  finalWarningText,
42  goBackButtonText,
43  confirmButtonText,
44  onCancel,
45  onKeepSubscription,
46  className,
47}: CancelSubscriptionCardProps) {
48  const [showConfirmation, setShowConfirmation] = useState(false);
49  const [isLoading, setIsLoading] = useState(false);
50  const [error, setError] = useState<string | null>(null);
51 
52  const handleContinueCancellation = () => {
53    setShowConfirmation(true);
54    setError(null);
55  };
56 
57  const handleConfirmCancellation = async () => {
58    try {
59      setIsLoading(true);
60      setError(null);
61      await onCancel(plan.id);
62    } catch (err) {
63      setError(
64        err instanceof Error ? err.message : "Failed to cancel subscription",
65      );
66    } finally {
67      setIsLoading(false);
68    }
69  };
70 
71  const handleKeepSubscription = async () => {
72    try {
73      setIsLoading(true);
74      setError(null);
75      if (onKeepSubscription) {
76        await onKeepSubscription(plan.id);
77      }
78    } catch (err) {
79      setError(
80        err instanceof Error ? err.message : "Failed to keep subscription",
81      );
82    } finally {
83      setIsLoading(false);
84    }
85  };
86 
87  const handleGoBack = () => {
88    setShowConfirmation(false);
89    setError(null);
90  };
91 
92  return (
93    <Card
94      className={cn(
95        "flex w-full flex-col overflow-hidden p-0 sm:max-w-[1000px] md:flex-row",
96        leftPanelImageUrl ? "" : "sm:max-w-[500px]",
97        className,
98      )}
99    >
100      {leftPanelImageUrl && (
101// … truncated