232 lines
8.7 KiB
TypeScript
232 lines
8.7 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { colorRequestService } from '@/src/services/api';
|
|
|
|
interface ColorRequestModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function ColorRequestModal({ isOpen, onClose }: ColorRequestModalProps) {
|
|
const [formData, setFormData] = useState({
|
|
color_name: '',
|
|
material_type: 'PLA',
|
|
finish_type: 'Basic',
|
|
user_email: '',
|
|
user_phone: ''
|
|
});
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
// Reset form when modal closes
|
|
setFormData({
|
|
color_name: '',
|
|
material_type: 'PLA',
|
|
finish_type: 'Basic',
|
|
user_email: '',
|
|
user_phone: ''
|
|
});
|
|
setMessage(null);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
setMessage(null);
|
|
|
|
try {
|
|
await colorRequestService.submit(formData);
|
|
setMessage({
|
|
type: 'success',
|
|
text: 'Vaš zahtev je uspešno poslat!'
|
|
});
|
|
|
|
// Close modal after 2 seconds on success
|
|
setTimeout(() => {
|
|
onClose();
|
|
}, 2000);
|
|
} catch (error) {
|
|
setMessage({
|
|
type: 'error',
|
|
text: 'Greška pri slanju zahteva. Pokušajte ponovo.'
|
|
});
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
|
setFormData({
|
|
...formData,
|
|
[e.target.name]: e.target.value
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* Backdrop */}
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Modal */}
|
|
<div className="fixed inset-0 z-50 overflow-y-auto">
|
|
<div className="flex min-h-full items-center justify-center p-4">
|
|
<div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
|
|
{/* Close button */}
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
|
|
<h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-gray-100">
|
|
Zatraži Novu Boju
|
|
</h2>
|
|
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Ne možete pronaći boju koju tražite? Javite nam!
|
|
</p>
|
|
|
|
{message && (
|
|
<div className={`mb-4 p-3 rounded text-sm ${
|
|
message.type === 'success'
|
|
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400'
|
|
: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400'
|
|
}`}>
|
|
{message.text}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="color_name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Naziv Boje *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="color_name"
|
|
name="color_name"
|
|
required
|
|
value={formData.color_name}
|
|
onChange={handleChange}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 appearance-none"
|
|
placeholder="npr. Sunset Orange"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label htmlFor="material_type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Materijal *
|
|
</label>
|
|
<select
|
|
id="material_type"
|
|
name="material_type"
|
|
required
|
|
value={formData.material_type}
|
|
onChange={handleChange}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 appearance-none"
|
|
>
|
|
<option value="PLA">PLA</option>
|
|
<option value="PETG">PETG</option>
|
|
<option value="ABS">ABS</option>
|
|
<option value="TPU">TPU</option>
|
|
<option value="PLA-CF">PLA-CF</option>
|
|
<option value="PETG-CF">PETG-CF</option>
|
|
<option value="Other">Ostalo</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="finish_type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Finiš
|
|
</label>
|
|
<select
|
|
id="finish_type"
|
|
name="finish_type"
|
|
value={formData.finish_type}
|
|
onChange={handleChange}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 appearance-none"
|
|
>
|
|
<option value="Basic">Basic</option>
|
|
<option value="Matte">Matte</option>
|
|
<option value="Silk">Silk</option>
|
|
<option value="Metal">Metal</option>
|
|
<option value="Sparkle">Sparkle</option>
|
|
<option value="Glow">Glow</option>
|
|
<option value="Transparent">Transparent</option>
|
|
<option value="Other">Ostalo</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="user_email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Email *
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="user_email"
|
|
name="user_email"
|
|
required
|
|
value={formData.user_email}
|
|
onChange={handleChange}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 appearance-none"
|
|
placeholder="Za obaveštenja o statusu"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="user_phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Telefon *
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
id="user_phone"
|
|
name="user_phone"
|
|
required
|
|
value={formData.user_phone}
|
|
onChange={handleChange}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 appearance-none"
|
|
placeholder="Za kontakt"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end space-x-3 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"
|
|
>
|
|
Otkaži
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className={`px-6 py-2 rounded-md text-white font-medium ${
|
|
isSubmitting
|
|
? 'bg-gray-400 cursor-not-allowed'
|
|
: 'bg-purple-600 hover:bg-purple-700'
|
|
} transition-colors`}
|
|
>
|
|
{isSubmitting ? 'Slanje...' : 'Pošalji'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
} |