| import React, { useState } from 'react'; |
| import { Loader2 } from 'lucide-react'; |
| import { Button } from '@/components/ui/button'; |
| import { Input } from '@/components/ui/input'; |
| import { apiFetch } from '@/lib/api'; |
|
|
| const EMPTY_DRAFT = { first_name: '', last_name: '', email: '', title: '', phone: '' }; |
|
|
| |
| |
| |
| |
| |
| |
| |
| export default function AddContactForm({ companyName, onAdded, className }) { |
| const [draft, setDraft] = useState(EMPTY_DRAFT); |
| const [saving, setSaving] = useState(false); |
| const [error, setError] = useState(''); |
|
|
| const setField = (key, value) => setDraft((d) => ({ ...d, [key]: value })); |
|
|
| const save = async () => { |
| const email = draft.email.trim(); |
| if (!email) { |
| setError('Email is required'); |
| return; |
| } |
| if (!email.includes('@')) { |
| setError('Enter a valid email address'); |
| return; |
| } |
| setSaving(true); |
| setError(''); |
| try { |
| const res = await apiFetch('/api/contacts', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ |
| first_name: draft.first_name.trim(), |
| last_name: draft.last_name.trim(), |
| email, |
| title: draft.title.trim(), |
| phone: draft.phone.trim(), |
| company: companyName, |
| }), |
| }); |
| const data = await res.json().catch(() => ({})); |
| if (!res.ok) { |
| setError(typeof data.detail === 'string' ? data.detail : 'Could not save contact'); |
| return; |
| } |
| setDraft(EMPTY_DRAFT); |
| onAdded && onAdded(data); |
| } catch (e) { |
| console.error(e); |
| setError('Network error'); |
| } finally { |
| setSaving(false); |
| } |
| }; |
|
|
| return ( |
| <div className={className || 'rounded-xl border border-slate-200 bg-slate-50/50 p-4'}> |
| <h5 className="mb-3 text-sm font-semibold text-slate-700">Add a contact</h5> |
| <div className="grid grid-cols-1 gap-2 sm:grid-cols-2"> |
| <Input |
| className="bg-white text-sm" |
| placeholder="First name" |
| value={draft.first_name} |
| onChange={(e) => setField('first_name', e.target.value)} |
| disabled={saving} |
| /> |
| <Input |
| className="bg-white text-sm" |
| placeholder="Last name" |
| value={draft.last_name} |
| onChange={(e) => setField('last_name', e.target.value)} |
| disabled={saving} |
| /> |
| <Input |
| className="bg-white text-sm sm:col-span-2" |
| type="email" |
| placeholder="Email" |
| value={draft.email} |
| onChange={(e) => setField('email', e.target.value)} |
| disabled={saving} |
| /> |
| <Input |
| className="bg-white text-sm" |
| placeholder="Title" |
| value={draft.title} |
| onChange={(e) => setField('title', e.target.value)} |
| disabled={saving} |
| /> |
| <Input |
| className="bg-white text-sm" |
| type="tel" |
| placeholder="Contact number" |
| value={draft.phone} |
| onChange={(e) => setField('phone', e.target.value)} |
| disabled={saving} |
| /> |
| </div> |
| {error ? <p className="mt-2 text-xs text-red-600">{error}</p> : null} |
| <Button type="button" className="mt-3 w-full" onClick={save} disabled={saving}> |
| {saving ? ( |
| <> |
| <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden /> |
| Saving… |
| </> |
| ) : ( |
| 'Add contact' |
| )} |
| </Button> |
| </div> |
| ); |
| } |
|
|
