"use client";
import { useState, useMemo } from "react";
import {
CreditCard,
Lock,
Loader2,
Check,
Calendar,
ShieldCheck,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { cn } from "@/lib/utils";
type CardType = "visa" | "mastercard" | "amex" | "discover" | "unknown";
const detectCardType = (number: string): CardType => {
const cleaned = number.replace(/\s/g, "");
if (/^4/.test(cleaned)) return "visa";
if (/^5[1-5]/.test(cleaned) || /^2[2-7]/.test(cleaned)) return "mastercard";
if (/^3[47]/.test(cleaned)) return "amex";
if (/^6(?:011|5)/.test(cleaned)) return "discover";
return "unknown";
};
const formatCardNumber = (value: string): string => {
const cleaned = value.replace(/\D/g, "");
const groups = cleaned.match(/.{1,4}/g);
return groups ? groups.join(" ").substring(0, 19) : "";
};
const formatExpiry = (value: string): string => {
const cleaned = value.replace(/\D/g, "");
if (cleaned.length >= 2) {
return cleaned.substring(0, 2) + "/" + cleaned.substring(2, 4);
}
return cleaned;
};
export const title = "React Dialog Block Add Card";
export default function DialogAddCard() {
const [open, setOpen] = useState(false);
const [cardNumber, setCardNumber] = useState("");
const [cardName, setCardName] = useState("");
const [expiry, setExpiry] = useState("");
const [cvv, setCvv] = useState("");
const [saveCard, setSaveCard] = useState(true);
const [isSubmitting, setIsSubmitting] = useState(false);
const cardType = useMemo(() => detectCardType(cardNumber), [cardNumber]);
const cleanedNumber = cardNumber.replace(/\s/g, "");
const isValid =
cleanedNumber.length >= 15 &&
cardName.trim().length >= 2 &&
expiry.length === 5 &&
cvv.length >= 3;
const handleCardNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setCardNumber(formatCardNumber(e.target.value));
};
const handleExpiryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value.replace(/\D/g, "");
if (value.length <= 4) {
setExpiry(formatExpiry(value));
}
};
const handleCvvChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value.replace(/\D/g, "");
const maxLength = cardType === "amex" ? 4 : 3;
setCvv(value.substring(0, maxLength));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!isValid) return;
setIsSubmitting(true);
await new Promise((resolve) => setTimeout(resolve, 1500));
setIsSubmitting(false);
setOpen(false);
};
const handleClose = () => {
setOpen(false);
setTimeout(() => {
setCardNumber("");
setCardName("");
setExpiry("");
setCvv("");
setSaveCard(true);
}, 200);
};
const maskedNumber = cleanedNumber.length > 4
? "•••• •••• •••• " + cleanedNumber.slice(-4)
: cardNumber || "•••• •••• •••• ••••";
return (
<Dialog open={open} onOpenChange={setOpen}>
<div className="flex min-h-[350px] items-center justify-center">
<DialogTrigger asChild>
<Button variant="outline">
<CreditCard className="mr-2 h-4 w-4" />
Add Card
</Button>
</DialogTrigger>
</div>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<CreditCard className="h-5 w-5" />
Add Payment Card
</DialogTitle>
<DialogDescription>
Enter your card details to add a new payment method.
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4 py-4">
{/* Card Preview */}
<div className="flex flex-col justify-between h-44 rounded-xl border bg-gradient-to-br from-slate-800 to-slate-900 p-5 text-white overflow-hidden">
<div className="flex items-start justify-between">
<div className="h-8 w-10 rounded bg-gradient-to-br from-yellow-300 to-yellow-500" />
<div>
{cardType === "visa" && (
<span className="text-xl font-bold italic">VISA</span>
)}
{cardType === "mastercard" && (
<div className="flex">
<div className="h-8 w-8 rounded-full bg-red-500 opacity-80" />
<div className="h-8 w-8 -ml-3 rounded-full bg-yellow-500 opacity-80" />
</div>
)}
{cardType === "amex" && (
<span className="text-lg font-bold">AMEX</span>
)}
{cardType === "discover" && (
<span className="text-lg font-bold">DISCOVER</span>
)}
{cardType === "unknown" && (
<CreditCard className="h-8 w-8 opacity-50" />
)}
</div>
</div>
<p className="font-mono text-lg tracking-wider">{maskedNumber}</p>
<div className="flex items-end justify-between gap-4">
<div className="min-w-0 flex-1">
<p className="text-[10px] uppercase text-white/60 mb-0.5">Cardholder</p>
<p className="text-sm font-medium truncate">{cardName || "YOUR NAME"}</p>
</div>
<div className="text-right shrink-0">
<p className="text-[10px] uppercase text-white/60 mb-0.5">Expires</p>
<p className="text-sm font-medium font-mono">{expiry || "MM/YY"}</p>
</div>
</div>
</div>
{/* Card Number */}
<div className="space-y-2">
<Label htmlFor="card-number">Card Number</Label>
<div className="relative">
<CreditCard className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
id="card-number"
placeholder="1234 5678 9012 3456"
value={cardNumber}
onChange={handleCardNumberChange}
className="pl-9 font-mono"
maxLength={19}
disabled={isSubmitting}
/>
</div>
</div>
{/* Cardholder Name */}
<div className="space-y-2">
<Label htmlFor="card-name">Cardholder Name</Label>
<Input
id="card-name"
placeholder="John Doe"
value={cardName}
onChange={(e) => setCardName(e.target.value.toUpperCase())}
className="uppercase"
disabled={isSubmitting}
/>
</div>
{/* Expiry and CVV */}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="expiry">Expiry Date</Label>
<div className="relative">
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
id="expiry"
placeholder="MM/YY"
value={expiry}
onChange={handleExpiryChange}
className="pl-9 font-mono"
maxLength={5}
disabled={isSubmitting}
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="cvv">CVV</Label>
<div className="relative">
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
id="cvv"
type="password"
placeholder={cardType === "amex" ? "••••" : "•••"}
value={cvv}
onChange={handleCvvChange}
className="pl-9 font-mono"
maxLength={cardType === "amex" ? 4 : 3}
disabled={isSubmitting}
/>
</div>
</div>
</div>
{/* Save Card */}
<div className="flex items-center gap-2 rounded-lg border p-3">
<Checkbox
id="save-card"
checked={saveCard}
onCheckedChange={(checked) => setSaveCard(checked === true)}
disabled={isSubmitting}
/>
<Label htmlFor="save-card" className="text-sm font-normal cursor-pointer flex-1">
Save this card for future payments
</Label>
</div>
{/* Security Note */}
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<ShieldCheck className="h-4 w-4" />
<span>Your card details are encrypted and secure</span>
</div>
</form>
<DialogFooter>
<Button variant="outline" onClick={handleClose} disabled={isSubmitting}>
Cancel
</Button>
<Button onClick={handleSubmit} disabled={!isValid || isSubmitting}>
{isSubmitting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Adding...
</>
) : (
<>
<Check className="mr-2 h-4 w-4" />
Add Card
</>
)}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}