85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
import React, { useState } from 'react'
|
|
import type { OrderDialogBaseProps } from '@packages/shared'
|
|
import { p as P, BottomDialog, pInput as PInput } from 'web-components'
|
|
import { trpc } from '@/lib/trpc-client'
|
|
import { XCircle } from 'lucide-react'
|
|
|
|
interface CancelOrderDialogProps extends OrderDialogBaseProps {
|
|
onSuccess?: () => void
|
|
}
|
|
|
|
export default function CancelOrderDialog({ orderId, open, onClose, onSuccess }: CancelOrderDialogProps) {
|
|
const [cancelReason, setCancelReason] = useState('')
|
|
const cancelOrderMutation = trpc.admin.order.cancelOrder.useMutation()
|
|
|
|
const handleCancel = () => {
|
|
if (!cancelReason.trim()) {
|
|
window.alert('Error: Please enter a cancellation reason')
|
|
return
|
|
}
|
|
|
|
const confirmed = window.confirm(
|
|
'Cancel Order? Are you sure you want to cancel this order? This action cannot be undone.'
|
|
)
|
|
if (!confirmed) return
|
|
|
|
cancelOrderMutation.mutate(
|
|
{ orderId, reason: cancelReason },
|
|
{
|
|
onSuccess: () => {
|
|
onClose()
|
|
setCancelReason('')
|
|
onSuccess?.()
|
|
},
|
|
onError: (error: any) => {
|
|
window.alert(`Error: ${error.message || 'Failed to cancel order'}`)
|
|
},
|
|
}
|
|
)
|
|
}
|
|
|
|
return (
|
|
<BottomDialog open={open} onClose={onClose}>
|
|
<div className="p-6">
|
|
<div className="items-center mb-6 flex flex-col">
|
|
<div className="w-12 h-12 bg-red-100 rounded-full items-center justify-center mb-3 flex">
|
|
<XCircle className="h-6 w-6 text-red-600" />
|
|
</div>
|
|
<P className="text-xl font-bold text-gray-900 text-center">
|
|
Cancel Order
|
|
</P>
|
|
<P className="text-gray-500 text-center mt-2 text-sm leading-5">
|
|
This will cancel the order and mark it as cancelled by admin. A refund record will be created.
|
|
</P>
|
|
</div>
|
|
|
|
<PInput
|
|
topLabel="Cancellation Reason *"
|
|
value={cancelReason}
|
|
onChange={(e) => setCancelReason(e.target.value)}
|
|
placeholder="Enter reason for cancellation..."
|
|
multiline
|
|
className="h-24"
|
|
/>
|
|
|
|
<div className="flex flex-row gap-3 mt-6">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="flex-1 bg-gray-100 py-3.5 rounded-xl items-center text-gray-700 font-bold"
|
|
>
|
|
Keep Order
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleCancel}
|
|
disabled={cancelOrderMutation.isPending || !cancelReason.trim()}
|
|
className={`flex-1 bg-red-500 py-3.5 rounded-xl items-center shadow-sm text-white font-bold disabled:opacity-50 ${cancelOrderMutation.isPending ? 'opacity-50' : ''}`}
|
|
>
|
|
{cancelOrderMutation.isPending ? 'Cancelling...' : 'Cancel Order'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</BottomDialog>
|
|
)
|
|
}
|