69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
|
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
import { Button } from '../../ui/button';
|
||
|
|
import { Input } from '../../ui/input';
|
||
|
|
import { X, Tag, Check, AlertCircle } from 'lucide-react';
|
||
|
|
|
||
|
|
interface PromoCodeModalProps {
|
||
|
|
onClose: () => void;
|
||
|
|
onApply: (discountPercent: number, code: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const PromoCodeModal: React.FC<PromoCodeModalProps> = ({ onClose, onApply }) => {
|
||
|
|
const [code, setCode] = useState('');
|
||
|
|
const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle');
|
||
|
|
|
||
|
|
const handleApply = () => {
|
||
|
|
// Mock validation
|
||
|
|
if (code.toUpperCase() === 'VEZA20') {
|
||
|
|
setStatus('success');
|
||
|
|
setTimeout(() => {
|
||
|
|
onApply(20, 'VEZA20');
|
||
|
|
onClose();
|
||
|
|
}, 1000);
|
||
|
|
} else {
|
||
|
|
setStatus('error');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
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-sm 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">
|
||
|
|
<Tag className="w-4 h-4 text-kodo-cyan" /> Add Promo Code
|
||
|
|
</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">
|
||
|
|
<Input
|
||
|
|
placeholder="Enter code (e.g. VEZA20)"
|
||
|
|
value={code}
|
||
|
|
onChange={(e) => { setCode(e.target.value); setStatus('idle'); }}
|
||
|
|
className={status === 'error' ? 'border-kodo-red focus:border-kodo-red' : ''}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{status === 'error' && (
|
||
|
|
<div className="flex items-center gap-2 text-xs text-kodo-red animate-shake">
|
||
|
|
<AlertCircle className="w-3 h-3" /> Invalid promo code
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{status === 'success' && (
|
||
|
|
<div className="flex items-center gap-2 text-xs text-kodo-lime animate-fadeIn">
|
||
|
|
<Check className="w-3 h-3" /> Code applied! 20% Off
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<Button variant="primary" className="w-full" onClick={handleApply} disabled={!code}>
|
||
|
|
Apply Discount
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|