[V0_FILE]typescriptreact:file="components/whatsapp-verification.tsx" isMerged="true" "use client" import { useState } from "react" import { MessageSquare } from "lucide-react" import { Button } from "@/components/ui/button" import OtpInput from "@/components/otp-input" interface WhatsAppVerificationProps { phone: string onVerified: () => void onBack: () => void } export default function WhatsAppVerification({ phone, onVerified, onBack }: WhatsAppVerificationProps) { const [isLoading, setIsLoading] = useState(false) const [isSending, setIsSending] = useState(false) const handleSendOtp = () => { setIsSending(true) // Simulate API call to send OTP via WhatsApp setTimeout(() => { setIsSending(false) }, 1500) } const handleVerifyOtp = (otp: string) => { if (otp.length !== 6) return setIsLoading(true) // Simulate API call to verify OTP setTimeout(() => { setIsLoading(false) onVerified() }, 1500) } return (

WhatsApp Verification

We'll send a verification code to your WhatsApp

{phone}

{isSending ? (

Sending code via WhatsApp...

) : ( <>

Didn't receive code?

)}

) } [V0_FILE]typescriptreact:file="components/verification-success.tsx" isMerged="true" "use client" import { CheckCircle } from "lucide-react" import { Button } from "@/components/ui/button" interface VerificationSuccessProps { data: { email: string phone: string isEmailVerified: boolean isPhoneVerified: boolean isWhatsAppVerified: boolean } onRestart: () => void } export default function VerificationSuccess({ data, onRestart }: VerificationSuccessProps) { return (

Verification Complete

All verification steps have been completed successfully

{data.email} {data.isEmailVerified && }

Phone

{data.phone} {data.isPhoneVerified && }

{data.phone} {data.isWhatsAppVerified && }

) } [V0_FILE]typescriptreact:file="components/otp-input.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import { Input } from "@/components/ui/input" interface OtpInputProps { length: number onComplete: (otp: string) => void } export default function OtpInput({ length, onComplete }: OtpInputProps) { const [otp, setOtp] = useState(Array(length).fill("")) const inputRefs = useRef<(HTMLInputElement | null)[]>([]) useEffect(() => { if (inputRefs.current[0]) { inputRefs.current[0].focus() } }, []) const handleChange = (e: React.ChangeEvent, index: number) => { const value = e.target.value // Only allow numbers if (!/^\d*$/.test(value)) return // Update the OTP array const newOtp = [...otp] // Take only the last character if multiple characters are pasted newOtp[index] = value.slice(-1) setOtp(newOtp) // If a digit was entered and we're not at the last input, move to the next input if (value && index < length - 1) { inputRefs.current[index + 1]?.focus() } // Check if OTP is complete const otpValue = newOtp.join("") if (otpValue.length === length) { onComplete(otpValue) } } const handleKeyDown = (e: React.KeyboardEvent, index: number) => { // Move to previous input on backspace if current input is empty if (e.key === "Backspace" && !otp[index] && index > 0) { inputRefs.current[index - 1]?.focus() } } const handlePaste = (e: React.ClipboardEvent) => { e.preventDefault() const pastedData = e.clipboardData.getData("text/plain").trim() // Check if pasted data is all digits and has the correct length if (!/^\d+$/.test(pastedData)) return const digits = pastedData.slice(0, length).split("") const newOtp = [...otp] digits.forEach((digit, idx) => { if (idx < length) { newOtp[idx] = digit } }) setOtp(newOtp) // Focus the next empty input or the last input if all are filled const nextEmptyIndex = newOtp.findIndex((val) => !val) if (nextEmptyIndex !== -1) { inputRefs.current[nextEmptyIndex]?.focus() } else { inputRefs.current[length - 1]?.focus() onComplete(newOtp.join("")) } } return (

{Array.from({ length }).map((_, index) => ( (inputRefs.current[index] = el)} type="text" inputMode="numeric" maxLength={1} value={otp[index]} onChange={(e) => handleChange(e, index)} onKeyDown={(e) => handleKeyDown(e, index)} onPaste={index === 0 ? handlePaste : undefined} className="h-12 w-12 text-center text-lg font-semibold" /> ))}

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import VerificationProgress from "@/components/verification-progress" import EmailVerification from "@/components/email-verification" import PhoneVerification from "@/components/phone-verification" import WhatsAppVerification from "@/components/whatsapp-verification" import VerificationSuccess from "@/components/verification-success" export default function VerificationFlow() { const [step, setStep] = useState(1) const [verificationData, setVerificationData] = useState({ email: "", phone: "", isEmailVerified: false, isPhoneVerified: false, isWhatsAppVerified: false, }) const updateVerificationData = (data: Partial) => { setVerificationData((prev) => ({ ...prev, ...data })) } const nextStep = () => setStep((prev) => prev + 1) const prevStep = () => setStep((prev) => Math.max(1, prev - 1)) return (

{step === 1 && ( { updateVerificationData({ phone, isPhoneVerified: true }) nextStep() }} onBack={() => {}} /> )} {step === 2 && ( { updateVerificationData({ isWhatsAppVerified: true }) nextStep() }} onBack={prevStep} /> )} {step === 3 && ( { updateVerificationData({ email, isEmailVerified: true }) nextStep() }} onBack={prevStep} /> )} {step === 4 && ( { setStep(1) setVerificationData({ email: "", phone: "", isEmailVerified: false, isPhoneVerified: false, isWhatsAppVerified: false, }) }} /> )}

) } [V0_FILE]typescriptreact:file="components/verification-progress.tsx" isEdit="true" isQuickEdit="true" import { CheckCircle2 } from "lucide-react" interface VerificationProgressProps { currentStep: number totalSteps: number } export default function VerificationProgress({ currentStep, totalSteps }: VerificationProgressProps) { return (

{Array.from({ length: totalSteps }).map((_, index) => (

{index + 1 < currentStep ? (

) : (

{index + 1}

)} {index < totalSteps - 1 && (

)}

{index + 1 === 1 && "Phone"} {index + 1 === 2 && "WhatsApp"} {index + 1 === 3 && "Email"} {index + 1 === 4 && "Complete"}

))}

) } [V0_FILE]typescriptreact:file="components/email-verification.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Mail } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import OtpInput from "@/components/otp-input" interface EmailVerificationProps { onVerified: (email: string) => void onBack: () => void } export default function EmailVerification({ onVerified, onBack }: EmailVerificationProps) { const [email, setEmail] = useState("") const [isOtpSent, setIsOtpSent] = useState(false) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const handleSendOtp = () => { if (!email || !/^\S+@\S+\.\S+$/.test(email)) { setError("Please enter a valid email address") return } setError("") setIsLoading(true) // Simulate API call to send OTP setTimeout(() => { setIsLoading(false) setIsOtpSent(true) }, 1500) } const handleVerifyOtp = (otp: string) => { if (otp.length !== 6) return setIsLoading(true) // Simulate API call to verify OTP setTimeout(() => { setIsLoading(false) onVerified(email) }, 1500) } return (

Email Verification

{isOtpSent ? "Enter the 6-digit code sent to your email" : "We'll send a verification code to your email"}

{!isOtpSent ? (

setEmail(e.target.value)} className={error ? "border-red-500" : ""} /> {error &&

{error}

}

) : (

Didn't receive code?

)}

) } [V0_FILE]typescriptreact:file="components/phone-verification.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Phone } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import OtpInput from "@/components/otp-input" interface PhoneVerificationProps { onVerified: (phone: string) => void onBack?: () => void } export default function PhoneVerification({ onVerified, onBack }: PhoneVerificationProps) { const [phone, setPhone] = useState("") const [isOtpSent, setIsOtpSent] = useState(false) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const handleSendOtp = () => { if (!phone || phone.length < 10) { setError("Please enter a valid phone number") return } setError("") setIsLoading(true) // Simulate API call to send OTP setTimeout(() => { setIsLoading(false) setIsOtpSent(true) }, 1500) } const handleVerifyOtp = (otp: string) => { if (otp.length !== 6) return setIsLoading(true) // Simulate API call to verify OTP setTimeout(() => { setIsLoading(false) onVerified(phone) }, 1500) } return (

Phone Verification

{isOtpSent ? "Enter the 6-digit code sent to your phone" : "We'll send a verification code to your phone"}

{!isOtpSent ? (

setPhone(e.target.value.replace(/[^0-9]/g, ""))} className={error ? "border-red-500" : ""} /> {error &&

{error}

}

{onBack && ( )}

) : (

Didn't receive code?

)}

) }