77 lines
3.5 KiB
TypeScript
77 lines
3.5 KiB
TypeScript
|
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
import { Button } from '../../ui/button';
|
||
|
|
import { X, RefreshCcw, UploadCloud } from 'lucide-react';
|
||
|
|
import { useToast } from '../../../context/ToastContext';
|
||
|
|
|
||
|
|
interface RefundRequestModalProps {
|
||
|
|
orderId: string;
|
||
|
|
onClose: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({ orderId, onClose }) => {
|
||
|
|
const { addToast } = useToast();
|
||
|
|
const [reason, setReason] = useState('Duplicate Purchase');
|
||
|
|
const [details, setDetails] = useState('');
|
||
|
|
|
||
|
|
const handleSubmit = () => {
|
||
|
|
addToast(`Refund request submitted for Order #${orderId}`, "success");
|
||
|
|
onClose();
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
||
|
|
<div className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm" onClick={onClose}></div>
|
||
|
|
<div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
|
||
|
|
|
||
|
|
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
|
||
|
|
<h3 className="font-bold text-white flex items-center gap-2">
|
||
|
|
<RefreshCcw className="w-4 h-4 text-kodo-orange" /> Request Refund
|
||
|
|
</h3>
|
||
|
|
<button onClick={onClose}><X className="w-5 h-5 text-gray-400 hover:text-white" /></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-6 space-y-4">
|
||
|
|
<p className="text-sm text-gray-400">
|
||
|
|
Refund requests are subject to approval. Please provide details below for Order <span className="font-mono text-white">#{orderId}</span>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-bold text-gray-400 uppercase mb-2">Reason</label>
|
||
|
|
<select
|
||
|
|
className="w-full bg-kodo-void border border-kodo-steel rounded-lg px-4 py-2.5 text-white focus:border-kodo-cyan outline-none"
|
||
|
|
value={reason}
|
||
|
|
onChange={(e) => setReason(e.target.value)}
|
||
|
|
>
|
||
|
|
<option>Duplicate Purchase</option>
|
||
|
|
<option>Accidental Purchase</option>
|
||
|
|
<option>Quality Issue / Corrupted File</option>
|
||
|
|
<option>Other</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-bold text-gray-400 uppercase mb-2">Details</label>
|
||
|
|
<textarea
|
||
|
|
className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none text-sm resize-none h-24"
|
||
|
|
placeholder="Please explain why you are requesting a refund..."
|
||
|
|
value={details}
|
||
|
|
onChange={(e) => setDetails(e.target.value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="border-2 border-dashed border-kodo-steel rounded-lg p-6 flex flex-col items-center justify-center text-gray-500 hover:text-white hover:border-gray-500 cursor-pointer transition-colors">
|
||
|
|
<UploadCloud className="w-8 h-8 mb-2" />
|
||
|
|
<span className="text-xs font-bold uppercase">Upload Evidence (Optional)</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
|
||
|
|
<Button variant="ghost" onClick={onClose}>Cancel</Button>
|
||
|
|
<Button variant="primary" onClick={handleSubmit}>Submit Request</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|