Payment Details

1"use client";
2 
3import { useState } from "react";
4import { Calendar, Shield, Check, CreditCard } from "lucide-react";
5import { cn } from "@/lib/utils";
6import { useTheme } from "@/contexts/theme-context";
7import { getThemeStyles } from "@/lib/themes";
8import { Country, State, City, IState, ICity } from "country-state-city";
9/**
10 * Detects the card type based on the card number
11 * @param cardNumber - The card number to analyze
12 * @returns The detected card type (visa, mastercard, amex, rupay, diners, or unknown)
13 * @note This is a best-effort detection based on known BIN ranges
14 */
15const detectCardType = (
16  cardNumber: string,
17):
18  | "visa"
19  | "mastercard"
20  | "amex"
21  | "rupay"
22  | "diners"
23  | "discover"
24  | "unknown" => {
25  const number = cardNumber.replace(/\s/g, "");
26 
27  // Order matters: check more specific patterns first
28  if (/^4/.test(number)) return "visa";
29  if (/^3[47]/.test(number)) return "amex";
30  // Diners Club with expanded prefixes
31  if (/^3(?:0[0-5]|09|095|6|8)/.test(number)) return "diners";
32  // Mastercard with expanded range (51-55 and 2221-2720)
33  if (
34    /^5[1-5]/.test(number) ||
35    /^222[1-9]/.test(number) ||
36    /^22[3-9]\d/.test(number) ||
37    /^2[3-6]\d{2}/.test(number) ||
38    /^27[0-1]\d/.test(number) ||
39    /^2720/.test(number)
40  )
41    return "mastercard";
42  // Discover with expanded prefixes
43  if (
44    /^6011/.test(number) ||
45    /^65/.test(number) ||
46    /^64[4-9]/.test(number) ||
47    /^622(?:12[6-9]|1[3-9]\d|[2-8]\d{2}|9[0-1]\d|92[0-5])/.test(number)
48  )
49    return "discover";
50  // More specific RuPay BIN ranges (best effort)
51  if (
52    /^60/.test(number) ||
53    /^81/.test(number) ||
54    /^82/.test(number) ||
55    /^508/.test(number)
56  )
57    return "rupay";
58 
59  return "unknown";
60};
61 
62/**
63 * Formats a card number by adding spaces every 4 digits
64 * @param value - The raw card number input
65 * @returns The formatted card number with spaces
66 */
67const formatCardNumber = (value: string): string => {
68  const number = value.replace(/\s/g, "").replace(/[^0-9]/gi, "");
69  const matches = number.match(/\d{4,16}/g);
70  const match = (matches && matches[0]) || "";
71  const parts = [];
72 
73  for (let i = 0, len = match.length; i < len; i += 4) {
74    parts.push(match.substring(i, i + 4));
75  }
76 
77  if (parts.length) {
78    return parts.join(" ");
79  } else {
80    return number;
81  }
82};
83 
84/**
85 * Formats an expiry date in MM/YY format
86 * @param value - The raw expiry date input
87 * @returns The formatted expiry date (MM/YY)
88 */
89// … truncated