Checkout Dialog

1"use client";
2 
3import { useEffect, useId, useRef, useState } from "react";
4import { usePaymentInputs } from "react-payment-inputs";
5import images, { type CardImages } from "react-payment-inputs/images";
6 
7import { CreditCardIcon, StoreIcon } from "lucide-react";
8 
9import { Badge } from "@/components/ui/badge";
10import { Button } from "@/components/ui/button";
11import { Input } from "@/components/ui/input";
12import { Label } from "@/components/ui/label";
13import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
14import {
15  ResponsiveDialog,
16  ResponsiveDialogContent,
17  ResponsiveDialogDescription,
18  ResponsiveDialogHeader,
19  ResponsiveDialogTitle,
20  ResponsiveDialogTrigger,
21} from "@/components/ui/revola";
22 
23export default function CheckoutDialog() {
24  const id = useId();
25  const { meta, getCardNumberProps, getExpiryDateProps, getCVCProps, getCardImageProps } = usePaymentInputs();
26  const couponInputRef = useRef<HTMLInputElement>(null);
27  const [showCouponInput, setShowCouponInput] = useState(false);
28  const [couponCode, setCouponCode] = useState("");
29 
30  // Auto-focus the coupon input when it's shown
31  useEffect(() => {
32    if (showCouponInput && couponInputRef.current) {
33      couponInputRef.current.focus();
34    }
35  }, [showCouponInput]);
36 
37  return (
38    <ResponsiveDialog>
39      <ResponsiveDialogTrigger asChild>
40        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
41          Checkout
42        </Button>
43      </ResponsiveDialogTrigger>
44      <ResponsiveDialogContent className="sm:max-w-[400px]">
45        <div className="space-y-4 overflow-y-auto p-6 max-sm:pt-4">
46          <div className="mb-2 flex flex-col gap-2">
47            <div className="flex size-11 shrink-0 items-center justify-center rounded-full border" aria-hidden="true">
48              <StoreIcon className="opacity-80" size={16} />
49            </div>
50            <ResponsiveDialogHeader className="text-left">
51              <ResponsiveDialogTitle>Confirm and pay</ResponsiveDialogTitle>
52              <ResponsiveDialogDescription>Pay securely and cancel any time.</ResponsiveDialogDescription>
53            </ResponsiveDialogHeader>
54          </div>
55 
56          <form className="space-y-5">
57            <div className="space-y-4">
58              <RadioGroup className="grid-cols-2" defaultValue="yearly">
59                {/* Monthly */}
60// … truncated