diff --git a/components/escrow/DisputeForm.tsx b/components/escrow/DisputeForm.tsx index adf707a..9d69149 100644 --- a/components/escrow/DisputeForm.tsx +++ b/components/escrow/DisputeForm.tsx @@ -1,9 +1,13 @@ 'use client'; -import { useState, useRef } from 'react'; +import { useState, useRef, type ReactElement, type ChangeEvent } from 'react'; import { AlertCircle, Upload, X, CheckCircle2 } from 'lucide-react'; import { toast } from 'sonner'; -import { useDisputeForm, DisputeFormData, OpenDisputeResponse } from '@/hooks/useDisputeForm'; +import { + useDisputeForm, + DisputeFormData, + OpenDisputeResponse, +} from '@/hooks/useDisputeForm'; interface DisputeFormProps { deliveryId: string; @@ -15,10 +19,26 @@ interface DisputeFormProps { type FormStep = 'dispute_reason' | 'evidence' | 'confirmation' | 'success'; const DISPUTE_REASONS = [ - { value: 'damaged_items', label: 'Items Damaged', description: 'Items arrived damaged or broken' }, - { value: 'non_delivery', label: 'Non-Delivery', description: 'Items were not delivered' }, - { value: 'incorrect_items', label: 'Incorrect Items', description: 'Wrong items were delivered' }, - { value: 'other', label: 'Other Issue', description: 'Something else went wrong' }, + { + value: 'damaged_items', + label: 'Items Damaged', + description: 'Items arrived damaged or broken', + }, + { + value: 'non_delivery', + label: 'Non-Delivery', + description: 'Items were not delivered', + }, + { + value: 'incorrect_items', + label: 'Incorrect Items', + description: 'Wrong items were delivered', + }, + { + value: 'other', + label: 'Other Issue', + description: 'Something else went wrong', + }, ] as const; /** @@ -36,14 +56,15 @@ function ConfirmationDialog({ onConfirm: () => void; onCancel: () => void; isSubmitting: boolean; -}): JSX.Element { +}): ReactElement { const overlayRef = useRef(null); const handleOverlayClick = (e: React.MouseEvent) => { if (e.target === overlayRef.current && !isSubmitting) onCancel(); }; - const reasonLabel = DISPUTE_REASONS.find(r => r.value === reason)?.label || reason; + const reasonLabel = + DISPUTE_REASONS.find((r) => r.value === reason)?.label || reason; return (
-

+

Confirm Dispute

- Opening a dispute will freeze the escrow funds during arbitration. Confirm your dispute details below. + Opening a dispute will freeze the escrow funds during arbitration. + Confirm your dispute details below.

-

Dispute Reason

-

{reasonLabel}

+

+ Dispute Reason +

+

+ {reasonLabel} +

-

Description

-

{description}

+

+ Description +

+

+ {description} +

- ⚠️ Important: Your funds will be locked in escrow during arbitration. You will not be able to withdraw them until the dispute is resolved. + ⚠️ Important: Your funds will be locked in escrow + during arbitration. You will not be able to withdraw them until the + dispute is resolved.

@@ -122,27 +157,32 @@ function SuccessView({ }: { disputeId?: string; transactionHash?: string; -}): JSX.Element { +}): ReactElement { return (
-

Dispute Submitted

+

+ Dispute Submitted +

- Your dispute has been successfully opened. The escrow funds are now frozen. + Your dispute has been successfully opened. The escrow funds are now + frozen.

{disputeId && (

- Dispute ID: {disputeId} + Dispute ID:{' '} + {disputeId}

)} {transactionHash && (

- Transaction: {transactionHash} + Transaction:{' '} + {transactionHash}

)} @@ -152,7 +192,7 @@ function SuccessView({ /** * DisputeForm Component - Multi-step form for opening a delivery dispute - * + * * Flow: * 1. Select dispute reason * 2. Upload evidence files @@ -164,7 +204,7 @@ export default function DisputeForm({ walletAddress, onSuccess, onError, -}: DisputeFormProps): JSX.Element { +}: DisputeFormProps): ReactElement | null { const { register, handleSubmit, @@ -176,7 +216,9 @@ export default function DisputeForm({ const [currentStep, setCurrentStep] = useState('dispute_reason'); const [uploadedFiles, setUploadedFiles] = useState([]); - const [successData, setSuccessData] = useState(null); + const [successData, setSuccessData] = useState( + null + ); const fileInputRef = useRef(null); const selectedReason = watch('reason'); @@ -192,9 +234,11 @@ export default function DisputeForm({ return; } - const validFiles = files.filter(file => { + const validFiles = files.filter((file) => { if (!file.type.startsWith('image/') && file.type !== 'application/pdf') { - toast.error(`${file.name} is not a supported format. Use images or PDF.`); + toast.error( + `${file.name} is not a supported format. Use images or PDF.` + ); return false; } if (file.size > 10 * 1024 * 1024) { @@ -255,14 +299,21 @@ export default function DisputeForm({ return (
-

Open a Dispute

-

Step 1 of 3: Select the reason for your dispute

+

+ Open a Dispute +

+

+ Step 1 of 3: Select the reason for your dispute +

{/* Transaction ID */}
-
@@ -305,19 +358,26 @@ export default function DisputeForm({ />

{reason.label}

-

{reason.description}

+

+ {reason.description} +

))}
{errors.reason && ( -

{errors.reason.message}

+

+ {errors.reason.message} +

)}
{/* Description */}
-