Credit Card Dialog

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { CreditCardDialog } from "@/components/ruixen/credit-card-dialog";
 
export default function App() {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
 
  const handleActivate = async (code: string): Promise<void> => {
    console.log(`Activating card with code: ${code}`);
 
    // Simulate API call
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log("✅ Card activated successfully!");
        setIsDialogOpen(false);
        resolve();
      }, 2000);
    });
  };
 
  return (
    <div>
      <Button onClick={() => setIsDialogOpen(true)}>Activate Card</Button>
 
      <CreditCardDialog
        open={isDialogOpen}
        onOpenChange={setIsDialogOpen}
        onActivate={handleActivate}
        backgroundImage="https://example.com/card-background.jpg"
      />
    </div>
  );
}

const handleActivate = async (code: string): Promise<void> => {
  try {
    const response = await activateCard(code);
    if (response.success) {
      setIsDialogOpen(false);
      showSuccessMessage("Card activated successfully!");
    }
  } catch (error) {
    showErrorMessage("Activation failed. Please try again.");
    throw error; // Keep dialog open on error
  }
};

<CreditCardDialog
  backgroundImage="https://your-domain.com/premium-card-bg.jpg"
  onActivate={handleActivate}
/>