import InputError from '@/components/input-error'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import Main from '@/layouts/main'; import { onHandleChange } from '@/lib/inertia'; import { SharedData } from '@/types/global'; import { Head, useForm, usePage } from '@inertiajs/react'; import { CheckCircle2, CreditCard, Info, XCircle } from 'lucide-react'; import { FormEvent, ReactNode } from 'react'; import { Editor } from 'richtor'; import 'richtor/styles'; interface Item { id: number; title: string; slug: string; } interface OfflinePaymentProps extends SharedData { user: User; item: Item; amount: number; currency: string; payment_instructions: string; payment_details: string; errors?: Record; } const Index = () => { const { props } = usePage(); const { user, item, amount, currency, payment_instructions, payment_details, errors } = props; const { data, setData, post, processing } = useForm({ payment_info: '', payment_date: new Date().toISOString().split('T')[0], attachment: null, }); const handleSubmit = (e: FormEvent) => { e.preventDefault(); post(route('payments.offline.submit')); }; return ( <>
{/* Header */}

Offline Payment Instructions

Please complete the payment and submit your transaction details below

{/* Order Summary */} Order Summary
Item: {item.title}
Customer: {user.name}
Total Amount: {currency} {Number(amount).toFixed(2)}
{/* Payment Instructions */} {payment_instructions && (

Payment Instructions

)} {/* Payment Details */} {payment_details && (

Payment Details

)} {/* Payment Submission Form */} Submit Payment Details
{/* Payment Method */}
setData('payment_info', value as string)} />
{/* Payment Date */}
onHandleChange(e, setData)} />
{/* Attachment */}
onHandleChange(e, setData)} />
{/* Info Alert */}

Important Notice

Your enrollment will be activated once our team verifies your payment. This usually takes 1-2 business days. You will receive an email notification once your payment is confirmed.

{/* Action Buttons */}
); }; Index.layout = (page: ReactNode) =>
; export default Index;