106 lines
4.5 KiB
JavaScript
106 lines
4.5 KiB
JavaScript
import { useState } from 'react';
|
||
import apiClient from '../api/client';
|
||
|
||
export default function RegisterBusinessModal({ onClose }) {
|
||
const [url, setUrl] = useState('');
|
||
const [status, setStatus] = useState('idle'); // idle | loading | success | error
|
||
const [brandName, setBrandName] = useState('');
|
||
const [error, setError] = useState('');
|
||
|
||
async function handleSubmit(e) {
|
||
e.preventDefault();
|
||
if (!url.trim()) return;
|
||
setStatus('loading');
|
||
setError('');
|
||
try {
|
||
const res = await apiClient.post('/api/businesses', { websiteUrl: url.trim() });
|
||
setBrandName(res.data.brandName);
|
||
setStatus('success');
|
||
} catch (err) {
|
||
setError(err.response?.data?.error || 'Something went wrong. Please try again.');
|
||
setStatus('error');
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 backdrop-blur-sm">
|
||
<div className="bg-white border border-gray-200 rounded-xl p-8 w-full max-w-md shadow-xl">
|
||
|
||
{/* Success */}
|
||
{status === 'success' && (
|
||
<div className="text-center">
|
||
<div className="w-14 h-14 rounded-full bg-green-50 text-green-600 flex items-center justify-center mx-auto mb-4 text-2xl">✓</div>
|
||
<h2 className="text-xl font-bold text-gray-900 mb-2">Business Added!</h2>
|
||
<p className="text-gray-500 text-sm mb-1 font-medium">Brand detected:</p>
|
||
<p className="text-indigo-600 font-bold text-lg mb-6 tracking-tight">{brandName}</p>
|
||
<button
|
||
onClick={onClose}
|
||
className="w-full py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 shadow-sm text-white font-medium transition"
|
||
>
|
||
Done
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Form */}
|
||
{(status === 'idle' || status === 'loading' || status === 'error') && (
|
||
<>
|
||
<div className="mb-6">
|
||
<h2 className="text-xl font-bold text-gray-900 mb-2 tracking-tight">Add a Business</h2>
|
||
<p className="text-gray-500 text-sm leading-relaxed">
|
||
Enter your website URL. We'll scrape your site and extract brand context to generate TRAI-compliant SMS templates.
|
||
</p>
|
||
</div>
|
||
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold text-gray-700 mb-1.5 tracking-wide">Website URL</label>
|
||
<input
|
||
type="url"
|
||
value={url}
|
||
onChange={e => setUrl(e.target.value)}
|
||
placeholder="https://yourstore.com"
|
||
disabled={status === 'loading'}
|
||
className="w-full px-4 py-2.5 rounded-lg bg-white border border-gray-300 text-gray-900 placeholder-gray-400 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent transition disabled:opacity-50 text-sm shadow-sm"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
{status === 'error' && (
|
||
<p className="text-sm text-red-600 font-medium bg-red-50 border border-red-200 rounded-lg px-3 py-2">{error}</p>
|
||
)}
|
||
|
||
<div className="flex gap-3 pt-2">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
disabled={status === 'loading'}
|
||
className="flex-[0.8] py-2.5 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 text-sm font-medium transition disabled:opacity-50"
|
||
>
|
||
Cancel
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
disabled={status === 'loading' || !url.trim()}
|
||
className="flex-[1.2] py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium transition shadow-sm disabled:opacity-50 flex items-center justify-center gap-2"
|
||
>
|
||
{status === 'loading' ? (
|
||
<><span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> Analysing…</>
|
||
) : 'Add Business'}
|
||
</button>
|
||
</div>
|
||
|
||
{status === 'loading' && (
|
||
<p className="text-xs text-gray-500 font-medium text-center pt-2">
|
||
Scraping your site and extracting brand context. This may take 20–30 seconds.
|
||
</p>
|
||
)}
|
||
</form>
|
||
</>
|
||
)}
|
||
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|