204 lines
8.8 KiB
JavaScript
204 lines
8.8 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import apiClient from '../api/client';
|
|
import { useBusiness } from '../context/BusinessContext';
|
|
import RegisterBusinessModal from '../components/RegisterBusinessModal';
|
|
|
|
function DeleteConfirmModal({ businessName, onCancel, onConfirm, deleting }) {
|
|
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">
|
|
<div className="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center mx-auto mb-4">
|
|
<span className="text-xl">🗑</span>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900 text-center mb-2">Delete Business?</h3>
|
|
<p className="text-sm text-gray-500 text-center mb-6">
|
|
This will permanently delete <span className="text-gray-900 font-medium">{businessName}</span> and all its events, templates, and images. This cannot be undone.
|
|
</p>
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={onCancel}
|
|
disabled={deleting}
|
|
className="flex-1 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
|
|
onClick={onConfirm}
|
|
disabled={deleting}
|
|
className="flex-1 py-2.5 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-medium transition shadow-sm disabled:opacity-50 flex items-center justify-center gap-2"
|
|
>
|
|
{deleting ? <><span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> Deleting…</> : 'Yes, Delete'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function Businesses() {
|
|
const navigate = useNavigate();
|
|
const { setActiveBusiness } = useBusiness();
|
|
const [businesses, setBusinesses] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [selectingBusinessId, setSelectingBusinessId] = useState('');
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [deleteTarget, setDeleteTarget] = useState(null);
|
|
const [deleting, setDeleting] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
async function load() {
|
|
setLoading(true);
|
|
try {
|
|
const res = await apiClient.get('/api/businesses');
|
|
setBusinesses(res.data.businesses || []);
|
|
} catch {
|
|
setError('Failed to load businesses');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
useEffect(() => { load(); }, []);
|
|
|
|
async function handleSelect(biz) {
|
|
setSelectingBusinessId(biz.businessId);
|
|
setError('');
|
|
try {
|
|
const setupComplete = await setActiveBusiness(biz);
|
|
navigate(`/${biz.businessId}/${setupComplete ? 'events' : 'global-sms'}`);
|
|
} catch (err) {
|
|
setError(err.response?.data?.error || 'Failed to open business');
|
|
} finally {
|
|
setSelectingBusinessId('');
|
|
}
|
|
}
|
|
|
|
async function handleDelete() {
|
|
if (!deleteTarget) return;
|
|
setDeleting(true);
|
|
try {
|
|
await apiClient.delete(`/api/businesses/${deleteTarget.businessId}`);
|
|
setDeleteTarget(null);
|
|
await load();
|
|
} catch (err) {
|
|
setError(err.response?.data?.error || 'Failed to delete business');
|
|
setDeleting(false);
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
|
<div className="w-8 h-8 border-2 border-indigo-200 border-t-indigo-600 rounded-full animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── NO BUSINESSES YET ──────────────────────────────────────────────────────
|
|
if (businesses.length === 0 && !showModal) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
|
<div className="text-center max-w-lg px-8">
|
|
<div className="w-16 h-16 rounded-2xl bg-indigo-600 flex items-center justify-center mx-auto mb-6 text-2xl font-bold text-white shadow-lg shadow-indigo-600/20">
|
|
S
|
|
</div>
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-3 tracking-tight">SMS Template Extension</h1>
|
|
<p className="text-gray-500 text-base mb-8 leading-relaxed">
|
|
Generate TRAI-compliant SMS templates for your Fynd store. Add your first business to get started.
|
|
</p>
|
|
<button
|
|
onClick={() => setShowModal(true)}
|
|
className="px-8 py-3 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-medium shadow-sm transition-all focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
|
|
>
|
|
Add Your First Business
|
|
</button>
|
|
</div>
|
|
{showModal && <RegisterBusinessModal onClose={() => { setShowModal(false); load(); }} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── BUSINESS LIST ──────────────────────────────────────────────────────────
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 p-8">
|
|
<div className="max-w-4xl mx-auto">
|
|
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900 tracking-tight">Your Businesses</h1>
|
|
<p className="text-sm text-gray-500 mt-1">Select a business to manage its SMS templates.</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowModal(true)}
|
|
className="px-4 py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold shadow-sm transition"
|
|
>
|
|
+ Add Business
|
|
</button>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mb-6 px-4 py-3 rounded-md bg-red-50 border border-red-200 text-red-700 font-medium text-sm flex items-center justify-between">
|
|
{error}
|
|
<button onClick={() => setError('')} className="text-red-500 hover:text-red-700 font-bold">×</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{businesses.map(biz => (
|
|
<div
|
|
key={biz.businessId}
|
|
className="group rounded-xl bg-white border border-gray-200 shadow-sm hover:border-indigo-300 hover:ring-1 hover:ring-indigo-300 transition-all overflow-hidden"
|
|
>
|
|
<button
|
|
className="w-full text-left p-6"
|
|
onClick={() => handleSelect(biz)}
|
|
disabled={selectingBusinessId === biz.businessId}
|
|
>
|
|
<div className="flex items-center gap-4 mb-3">
|
|
<div className="w-10 h-10 rounded-lg bg-indigo-600 flex items-center justify-center text-base font-bold text-white shrink-0 shadow-sm">
|
|
{biz.brandName?.[0]?.toUpperCase() || 'B'}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="font-bold text-gray-900 truncate">{biz.brandName}</p>
|
|
<p className="text-xs text-gray-500 font-medium truncate">{biz.domain}</p>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-gray-400 font-medium">
|
|
Added {new Date(biz.createdAt).toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' })}
|
|
</p>
|
|
{selectingBusinessId === biz.businessId && (
|
|
<div className="mt-3 inline-flex items-center gap-2 text-xs text-indigo-600 font-semibold">
|
|
<span className="w-3.5 h-3.5 border-2 border-indigo-200 border-t-indigo-600 rounded-full animate-spin" />
|
|
Opening…
|
|
</div>
|
|
)}
|
|
</button>
|
|
<div className="px-6 py-3 bg-gray-50 border-t border-gray-100 flex justify-between items-center">
|
|
<span className="text-xs text-indigo-600 font-semibold group-hover:underline">Click to manage →</span>
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); setDeleteTarget(biz); }}
|
|
className="text-xs text-red-500 hover:text-red-700 font-medium transition"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{showModal && <RegisterBusinessModal onClose={() => { setShowModal(false); load(); }} />}
|
|
{deleteTarget && (
|
|
<DeleteConfirmModal
|
|
businessName={deleteTarget.brandName}
|
|
onCancel={() => setDeleteTarget(null)}
|
|
onConfirm={handleDelete}
|
|
deleting={deleting}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|