Payment Details Two

1"use client";
2 
3import { useForm } from "react-hook-form";
4import { Input } from "@/components/ui/input";
5import { Label } from "@/components/ui/label";
6import { Textarea } from "@/components/ui/textarea";
7import {
8  Select,
9  SelectContent,
10  SelectItem,
11  SelectTrigger,
12  SelectValue,
13} from "@/components/ui/select";
14import {
15  detectCardType,
16  formatCardNumber,
17  formatExpiryDate,
18  validateLuhn,
19} from "@/utils/card-validation";
20import {
21  Check,
22  CreditCard,
23  Shield,
24  ChevronLeft,
25  ChevronRight,
26} from "lucide-react";
27import { useState, useEffect } from "react";
28import { cn } from "@/lib/utils";
29import { Button } from "@/components/ui/button";
30import {
31  Card,
32  CardContent,
33  CardDescription,
34  CardFooter,
35  CardHeader,
36  CardTitle,
37} from "@/components/ui/card";
38import { motion, AnimatePresence } from "motion/react";
39import { Country, State, City } from "country-state-city";
40 
41export interface PaymentFormData {
42  nameOnCard?: string;
43  cardNumber?: string;
44  validTill?: string;
45  cvv?: string;
46  firstName?: string;
47  middleLastName?: string;
48  country?: string;
49  state?: string;
50  city?: string;
51  billingAddress?: string;
52  pinCode?: string;
53  contactNumber?: string;
54  general?: string;
55}
56 
57const CardLogo = ({ type }: { type: string }) => {
58  switch (type) {
59    case "visa":
60      return (
61        <div className="flex h-5 w-10 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
62          VISA
63        </div>
64      );
65    case "mastercard":
66      return (
67        <div className="flex items-center">
68          <div className="h-5 w-5 rounded-full bg-red-500"></div>
69          <div className="-ml-2 h-5 w-5 rounded-full bg-orange-400"></div>
70        </div>
71      );
72    case "amex":
73      return (
74        <div className="flex h-6 w-10 items-center justify-center rounded bg-blue-500 text-xs font-bold text-white">
75          AMEX
76        </div>
77      );
78    case "rupay":
79      return (
80        <div className="flex h-5 w-10 items-center justify-center rounded bg-green-600 text-xs font-bold text-white">
81          RuPay
82        </div>
83      );
84    case "discover":
85      return (
86        <div className="flex h-6 w-10 items-center justify-center rounded bg-orange-600 text-xs font-bold text-white">
87          DISC
88        </div>
89      );
90    default:
91      return <CreditCard className="text-muted-foreground h-5 w-5" />;
92  }
93};
94 
95export function PaymentDetailsTwo({
96  className,
97  onSubmit,
98  onDiscard,
99  countries,
100  states,
101  cities,
102}: {
103// … truncated