Credit Card Dialog

1"use client";
2 
3import { useId } from "react";
4import { usePaymentInputs } from "react-payment-inputs";
5import images, { type CardImages } from "react-payment-inputs/images";
6 
7import { CreditCardIcon, WalletIcon } from "lucide-react";
8 
9import { Button } from "@/components/ui/button";
10import { Checkbox } from "@/components/ui/checkbox";
11import { Input } from "@/components/ui/input";
12import { Label } from "@/components/ui/label";
13import {
14  ResponsiveDialog,
15  ResponsiveDialogContent,
16  ResponsiveDialogDescription,
17  ResponsiveDialogFooter,
18  ResponsiveDialogHeader,
19  ResponsiveDialogTitle,
20  ResponsiveDialogTrigger,
21} from "@/components/ui/revola";
22 
23export default function CreditCardDialog() {
24  const id = useId();
25  const { meta, getCardNumberProps, getExpiryDateProps, getCVCProps, getCardImageProps } = usePaymentInputs();
26 
27  return (
28    <ResponsiveDialog>
29      <ResponsiveDialogTrigger asChild>
30        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
31          Update Card
32        </Button>
33      </ResponsiveDialogTrigger>
34      <ResponsiveDialogContent className="sm:max-w-sm">
35        <div className="space-y-4 overflow-y-auto p-6 max-sm:pt-4">
36          <div className="flex flex-col gap-2">
37            <div>
38              <div className="flex size-11 shrink-0 items-center justify-center rounded-full border" aria-hidden="true">
39                <WalletIcon className="opacity-80" size={16} />
40              </div>
41            </div>
42            <ResponsiveDialogHeader className="text-left">
43              <ResponsiveDialogTitle>Update your card</ResponsiveDialogTitle>
44              <ResponsiveDialogDescription>Your new card will replace your current card.</ResponsiveDialogDescription>
45            </ResponsiveDialogHeader>
46          </div>
47 
48          <form className="space-y-5">
49            <div className="space-y-4">
50              <div className="space-y-2">
51                <Label htmlFor={`name-${id}`}>Name on card</Label>
52                <Input
53                  required
54                  type="text"
55                  id={`name-${id}`}
56                  placeholder="John Doe"
57                  className="[&:-webkit-autofill]:shadow-[0_0_0_30px_theme(colors.input)_inset]"
58                />
59              </div>
60              <div className="space-y-2">
61                <Label htmlFor={`number-${id}`}>Card Number</Label>
62                <div className="relative">
63                  <Input
64                    {...getCardNumberProps()}
65// … truncated