import { BreadcrumbItem, UserKycVerification } from '@/types'; import { Head, useForm } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import SettingsLayout from '@/layouts/settings/layout'; import HeadingSmall from '@/components/heading-small'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; import { Building, ChevronLeft, ChevronRight, Upload, FileText, Camera, Info } from 'lucide-react'; import { Link } from '@inertiajs/react'; import InputError from '@/components/input-error'; import { useState } from 'react'; import { cn } from '@/lib/utils'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Settings', href: '/settings/profile', }, { title: 'KYC Verification', href: '/settings/kyc', }, { title: 'Business Verification', href: '/settings/kyc/business', }, ]; interface Props { kyc: UserKycVerification; } const steps = [ { id: 1, name: 'Business Info', icon: Building }, { id: 2, name: 'Documents', icon: FileText }, { id: 3, name: 'Selfie', icon: Camera }, ]; export default function KycBusiness({ kyc }: Props) { const [currentStep, setCurrentStep] = useState(1); const { data, setData, post, processing, errors } = useForm({ business_name: kyc?.business_name || '', business_registration_number: kyc?.business_registration_number || '', business_type: kyc?.business_type || '', business_address_line1: kyc?.business_address_line1 || '', business_address_line2: kyc?.business_address_line2 || '', business_city: kyc?.business_city || '', business_state: kyc?.business_state || '', business_postal_code: kyc?.business_postal_code || '', business_country: kyc?.business_country || 'US', id_document_type: kyc?.id_document_type || '', id_document: null as File | null, business_document: null as File | null, selfie_with_id: null as File | null, }); const [previews, setPreviews] = useState<{ id_document?: string; business_document?: string; selfie_with_id?: string; }>({}); const handleFileChange = (field: 'id_document' | 'business_document' | 'selfie_with_id', file: File | null) => { if (file) { setData(field, file); const reader = new FileReader(); reader.onloadend = () => { setPreviews(prev => ({ ...prev, [field]: reader.result as string })); }; reader.readAsDataURL(file); } else { setData(field, null); setPreviews(prev => ({ ...prev, [field]: undefined })); } }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post('/settings/kyc/business'); }; const canGoNext = () => { if (currentStep === 1) { return data.business_name && data.business_registration_number && data.business_type && data.business_address_line1 && data.business_city && data.business_state && data.business_postal_code && data.business_country; } if (currentStep === 2) { return data.id_document_type && data.id_document && data.business_document; } return false; }; return (
{/* Header */}
{/* Info Alert */} Business Information

Provide your business information to complete the verification process.

{/* Progress Stepper */}
{steps.map((step, index) => { const StepIcon = step.icon; const isActive = currentStep === step.id; const isComplete = currentStep > step.id; return (
{step.name}
{index < steps.length - 1 && (
)}
); })}
{/* Form */}
{/* Step 1: Business Information */} {currentStep === 1 && ( Business Information Provide your company details
setData('business_name', e.target.value)} placeholder="Acme Corporation" required />
setData('business_registration_number', e.target.value)} placeholder="123456789" required />
setData('business_address_line1', e.target.value)} placeholder="123 Main Street" required />
setData('business_address_line2', e.target.value)} placeholder="Suite 100" />
setData('business_city', e.target.value)} placeholder="New York" required />
setData('business_state', e.target.value)} placeholder="NY" required />
setData('business_postal_code', e.target.value)} placeholder="10001" required />
)} {/* Step 2: Documents */} {currentStep === 2 && ( Upload Documents Provide clear copies of your identification and business documents {/* ID Document Type */}
{/* ID Document Upload */}
handleFileChange('id_document', e.target.files?.[0] || null)} className="hidden" />
{previews.id_document && ( ID preview )}

JPG, PNG or PDF (max 5MB). Ensure all details are clearly visible.

{/* Business Document Upload */}
handleFileChange('business_document', e.target.files?.[0] || null)} className="hidden" />
{previews.business_document && ( Business doc preview )}

Certificate of incorporation, business license, or tax certificate.

)} {/* Step 3: Selfie */} {currentStep === 3 && ( Selfie Verification Take a photo of yourself holding your ID next to your face Photo Requirements
  • • Your face must be clearly visible
  • • Hold your ID document next to your face
  • • Details on the ID must be readable
  • • Good lighting and focus required
  • • No filters or editing
handleFileChange('selfie_with_id', e.target.files?.[0] || null)} className="hidden" />
{previews.selfie_with_id && ( Selfie preview )}

JPG or PNG (max 5MB)

)} {/* Navigation Buttons */}
{currentStep < 3 ? ( ) : ( )}
{/* Privacy Notice */}

Privacy & Review Process

All documents are encrypted and stored securely. Our compliance team will review your submission within 24-48 hours. You'll receive an email notification with the results.

By submitting, you confirm that all information provided is accurate and the documents are genuine.

); }