343 lines
13 KiB
TypeScript
343 lines
13 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { AlertCircle, Check, Image as ImageIcon, Loader2, MapPin, Power, Save, Store, Upload } from 'lucide-react';
|
|
import { api, resolveMediaUrl } from '../../api';
|
|
|
|
interface Restaurant {
|
|
id: string;
|
|
owner_email: string;
|
|
name: string;
|
|
description: string;
|
|
address: string;
|
|
latitude: number;
|
|
longitude: number;
|
|
image_url: string | null;
|
|
status: 'active' | 'closed';
|
|
}
|
|
|
|
interface RestaurantProfileFormProps {
|
|
onRestaurantUpdated?: (restaurant: Restaurant) => void;
|
|
}
|
|
|
|
export default function RestaurantProfileForm({ onRestaurantUpdated }: RestaurantProfileFormProps) {
|
|
const queryClient = useQueryClient();
|
|
const [msg, setMsg] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
|
|
const [uploading, setUploading] = useState(false);
|
|
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
description: '',
|
|
address: '',
|
|
latitude: 37.7749,
|
|
longitude: -122.4194,
|
|
image_url: '',
|
|
status: 'active' as 'active' | 'closed',
|
|
});
|
|
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ['restaurant-me'],
|
|
queryFn: async () => {
|
|
const res = await api.get('/api/restaurants/me');
|
|
return (res.data?.restaurant || null) as Restaurant | null;
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (data) {
|
|
setFormData({
|
|
name: data.name || '',
|
|
description: data.description || '',
|
|
address: data.address || '',
|
|
latitude: typeof data.latitude === 'number' ? data.latitude : 37.7749,
|
|
longitude: typeof data.longitude === 'number' ? data.longitude : -122.4194,
|
|
image_url: data.image_url || '',
|
|
status: data.status || 'active',
|
|
});
|
|
if (onRestaurantUpdated) {
|
|
onRestaurantUpdated(data);
|
|
}
|
|
}
|
|
}, [data, onRestaurantUpdated]);
|
|
|
|
const uploadMutation = useMutation({
|
|
mutationFn: async (file: File) => {
|
|
const fd = new FormData();
|
|
fd.append('file', file);
|
|
const res = await api.post('/api/upload', fd, {
|
|
headers: { 'Content-Type': undefined },
|
|
});
|
|
return res.data?.url as string;
|
|
},
|
|
onSuccess: (url) => {
|
|
setFormData((prev) => ({ ...prev, image_url: url }));
|
|
setMsg({ type: 'success', text: 'Image uploaded successfully' });
|
|
setUploading(false);
|
|
},
|
|
onError: () => {
|
|
setMsg({ type: 'error', text: 'Failed to upload image' });
|
|
setUploading(false);
|
|
},
|
|
});
|
|
|
|
const saveMutation = useMutation({
|
|
mutationFn: async () => {
|
|
if (data?.id) {
|
|
const res = await api.patch(`/api/restaurants/${data.id}`, {
|
|
name: formData.name,
|
|
description: formData.description,
|
|
address: formData.address,
|
|
latitude: Number(formData.latitude),
|
|
longitude: Number(formData.longitude),
|
|
image_url: formData.image_url,
|
|
status: formData.status,
|
|
});
|
|
return res.data?.restaurant as Restaurant;
|
|
} else {
|
|
const res = await api.post('/api/restaurants', {
|
|
name: formData.name,
|
|
description: formData.description,
|
|
address: formData.address,
|
|
latitude: Number(formData.latitude),
|
|
longitude: Number(formData.longitude),
|
|
image_url: formData.image_url,
|
|
});
|
|
return res.data?.restaurant as Restaurant;
|
|
}
|
|
},
|
|
onSuccess: (updatedRestaurant) => {
|
|
queryClient.invalidateQueries({ queryKey: ['restaurant-me'] });
|
|
queryClient.invalidateQueries({ queryKey: ['restaurants'] });
|
|
setMsg({ type: 'success', text: 'Restaurant profile saved successfully!' });
|
|
if (onRestaurantUpdated && updatedRestaurant) {
|
|
onRestaurantUpdated(updatedRestaurant);
|
|
}
|
|
},
|
|
onError: (err: any) => {
|
|
setMsg({ type: 'error', text: err?.response?.data?.msg || 'Failed to save restaurant profile' });
|
|
},
|
|
});
|
|
|
|
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) {
|
|
setUploading(true);
|
|
uploadMutation.mutate(file);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setMsg(null);
|
|
saveMutation.mutate();
|
|
};
|
|
|
|
const handleToggleStatus = async () => {
|
|
const newStatus = formData.status === 'active' ? 'closed' : 'active';
|
|
setFormData((prev) => ({ ...prev, status: newStatus }));
|
|
if (data?.id) {
|
|
try {
|
|
await api.patch(`/api/restaurants/${data.id}`, {
|
|
status: newStatus,
|
|
});
|
|
queryClient.invalidateQueries({ queryKey: ['restaurant-me'] });
|
|
setMsg({ type: 'success', text: `Store status changed to ${newStatus}` });
|
|
} catch (err) {
|
|
setFormData((prev) => ({ ...prev, status: data.status }));
|
|
setMsg({ type: 'error', text: 'Failed to update store status' });
|
|
}
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center p-12 bg-surface rounded-xl border border-border">
|
|
<Loader2 className="w-6 h-6 animate-spin text-accent mr-2" />
|
|
<span className="text-sm font-medium text-mutedForeground">Loading kitchen profile...</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-surface rounded-xl border border-border p-6 shadow-sm">
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-divider">
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<Store className="w-5 h-5 text-accent" />
|
|
<h2 className="text-xl font-bold font-display text-foreground">
|
|
{data ? 'Kitchen Profile & Settings' : 'Register Your Restaurant'}
|
|
</h2>
|
|
</div>
|
|
<p className="text-sm text-mutedForeground mt-1">
|
|
Configure your store details, operational status, and location for delivery dispatch.
|
|
</p>
|
|
</div>
|
|
|
|
{data && (
|
|
<div className="flex items-center gap-3 bg-surfaceSecondary p-2 rounded-lg border border-border">
|
|
<span className="text-xs font-semibold text-foreground uppercase tracking-wider">
|
|
Store Status:
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={handleToggleStatus}
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-colors ${
|
|
formData.status === 'active'
|
|
? 'bg-success text-successForeground'
|
|
: 'bg-destructive text-destructiveForeground'
|
|
}`}
|
|
>
|
|
<Power className="w-3.5 h-3.5" />
|
|
{formData.status === 'active' ? 'OPEN FOR ORDERS' : 'CLOSED'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{msg && (
|
|
<div
|
|
className={`mt-4 p-3 rounded-lg text-sm flex items-center gap-2 ${
|
|
msg.type === 'success'
|
|
? 'bg-success/10 text-success border border-success/20'
|
|
: 'bg-destructive/10 text-destructive border border-destructive/20'
|
|
}`}
|
|
>
|
|
{msg.type === 'success' ? <Check className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
|
|
<span>{msg.text}</span>
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="mt-6 space-y-5">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-foreground uppercase mb-1">
|
|
Restaurant Name *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
placeholder="e.g. Spice Garden Bistro"
|
|
className="w-full px-3 py-2 bg-background border border-border rounded-md text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-accent"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-foreground uppercase mb-1">
|
|
Street Address *
|
|
</label>
|
|
<div className="relative">
|
|
<MapPin className="w-4 h-4 absolute left-3 top-2.5 text-mutedForeground" />
|
|
<input
|
|
type="text"
|
|
required
|
|
value={formData.address}
|
|
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
|
|
placeholder="123 Culinary Way, Downtown"
|
|
className="w-full pl-9 pr-3 py-2 bg-background border border-border rounded-md text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-accent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-foreground uppercase mb-1">
|
|
Store Description
|
|
</label>
|
|
<textarea
|
|
rows={2}
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
placeholder="Authentic artisanal meals prepared daily with fresh ingredients."
|
|
className="w-full px-3 py-2 bg-background border border-border rounded-md text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-accent"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-foreground uppercase mb-1">
|
|
Latitude Coords *
|
|
</label>
|
|
<input
|
|
type="number"
|
|
step="any"
|
|
required
|
|
value={formData.latitude}
|
|
onChange={(e) => setFormData({ ...formData, latitude: parseFloat(e.target.value) || 0 })}
|
|
className="w-full px-3 py-2 bg-background border border-border rounded-md text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-accent"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-foreground uppercase mb-1">
|
|
Longitude Coords *
|
|
</label>
|
|
<input
|
|
type="number"
|
|
step="any"
|
|
required
|
|
value={formData.longitude}
|
|
onChange={(e) => setFormData({ ...formData, longitude: parseFloat(e.target.value) || 0 })}
|
|
className="w-full px-3 py-2 bg-background border border-border rounded-md text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-accent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-foreground uppercase mb-2">
|
|
Store Banner Image
|
|
</label>
|
|
<div className="flex flex-col sm:flex-row items-center gap-4">
|
|
{formData.image_url ? (
|
|
<div className="relative w-full sm:w-48 h-28 rounded-lg overflow-hidden border border-border bg-muted">
|
|
<img
|
|
src={resolveMediaUrl(formData.image_url)}
|
|
alt="Store Banner"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="w-full sm:w-48 h-28 rounded-lg border border-dashed border-border bg-surfaceSecondary flex flex-col items-center justify-center text-mutedForeground">
|
|
<ImageIcon className="w-8 h-8 mb-1 opacity-50" />
|
|
<span className="text-xs">No image set</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex-1 w-full">
|
|
<label className="inline-flex items-center justify-center gap-2 px-4 py-2 border border-border rounded-md shadow-sm text-xs font-semibold text-foreground bg-surface hover:bg-surfaceSecondary cursor-pointer transition-colors">
|
|
{uploading ? <Loader2 className="w-4 h-4 animate-spin text-accent" /> : <Upload className="w-4 h-4 text-accent" />}
|
|
{uploading ? 'Uploading...' : 'Choose Cover Photo'}
|
|
<input
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={handleImageChange}
|
|
disabled={uploading}
|
|
className="hidden"
|
|
/>
|
|
</label>
|
|
<p className="text-xs text-mutedForeground mt-1.5">
|
|
PNG, JPG or WebP images up to 5MB. Formats stored securely via R2 storage.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-4 border-t border-divider flex justify-end">
|
|
<button
|
|
type="submit"
|
|
disabled={saveMutation.isPending || uploading}
|
|
className="flex items-center gap-2 px-6 py-2.5 bg-primary text-primaryForeground hover:opacity-90 rounded-md text-sm font-semibold transition-opacity disabled:opacity-50"
|
|
>
|
|
{saveMutation.isPending ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : (
|
|
<Save className="w-4 h-4" />
|
|
)}
|
|
{data ? 'Save Changes' : 'Create Restaurant Profile'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|