mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 18:24:31 +00:00
feat: implement customer registration flow and business hours system
Major changes: - Add customer registration with email/phone lookup (app/booking/registro) - Add customers API endpoint (app/api/customers/route) - Implement business hours for locations (mon-fri 10-7, sat 10-6, sun closed) - Fix availability function type casting issues - Add business hours utilities (lib/utils/business-hours.ts) - Update Location type to include business_hours JSONB - Add mock payment component for testing - Remove Supabase auth from booking flow - Fix /cita redirect path in booking flow Database migrations: - Add category column to services table - Add business_hours JSONB column to locations table - Fix availability functions with proper type casting - Update get_detailed_availability to use business_hours Features: - Customer lookup by email or phone - Auto-redirect to registration if customer not found - Pre-fill customer data if exists - Business hours per day of week - Location-specific opening/closing times
This commit is contained in:
Marco Gallegos
@@ -5,14 +5,14 @@ import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Calendar, Clock, User } from 'lucide-react'
|
||||
import { format } from 'date-fns'
|
||||
import { Calendar, Clock, User, Check } from 'lucide-react'
|
||||
import { format, isSameDay, parseISO } from 'date-fns'
|
||||
import { es } from 'date-fns/locale'
|
||||
import DatePicker from '@/components/booking/date-picker'
|
||||
|
||||
interface Service {
|
||||
id: string
|
||||
name: string
|
||||
category: string
|
||||
duration_minutes: number
|
||||
base_price: number
|
||||
}
|
||||
@@ -23,15 +23,19 @@ interface Location {
|
||||
timezone: string
|
||||
}
|
||||
|
||||
type BookingStep = 'service' | 'datetime' | 'confirm' | 'client'
|
||||
|
||||
export default function ServiciosPage() {
|
||||
const [services, setServices] = useState<Service[]>([])
|
||||
const [locations, setLocations] = useState<Location[]>([])
|
||||
const [selectedService, setSelectedService] = useState<string>('')
|
||||
const [selectedLocation, setSelectedLocation] = useState<string>('')
|
||||
const [selectedDate, setSelectedDate] = useState<string>(format(new Date(), 'yyyy-MM-dd'))
|
||||
const [selectedDate, setSelectedDate] = useState<Date | null>(new Date())
|
||||
const [timeSlots, setTimeSlots] = useState<any[]>([])
|
||||
const [selectedTime, setSelectedTime] = useState<string>('')
|
||||
const [currentStep, setCurrentStep] = useState<BookingStep>('service')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||
|
||||
useEffect(() => {
|
||||
fetchServices()
|
||||
@@ -53,6 +57,7 @@ export default function ServiciosPage() {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching services:', error)
|
||||
setErrors({ ...errors, services: 'Error al cargar servicios' })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,6 +73,7 @@ export default function ServiciosPage() {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching locations:', error)
|
||||
setErrors({ ...errors, locations: 'Error al cargar ubicaciones' })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,8 +82,9 @@ export default function ServiciosPage() {
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const formattedDate = format(selectedDate, 'yyyy-MM-dd')
|
||||
const response = await fetch(
|
||||
`/api/availability/time-slots?location_id=${selectedLocation}&service_id=${selectedService}&date=${selectedDate}`
|
||||
`/api/availability/time-slots?location_id=${selectedLocation}&service_id=${selectedService}&date=${formattedDate}`
|
||||
)
|
||||
const data = await response.json()
|
||||
if (data.availability) {
|
||||
@@ -85,167 +92,281 @@ export default function ServiciosPage() {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching time slots:', error)
|
||||
setErrors({ ...errors, timeSlots: 'Error al cargar horarios' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleContinue = () => {
|
||||
if (selectedService && selectedLocation && selectedDate && selectedTime) {
|
||||
const handleDateSelect = (date: Date) => {
|
||||
setSelectedDate(date)
|
||||
setSelectedTime('')
|
||||
}
|
||||
|
||||
const canProceedToDateTime = () => {
|
||||
return selectedService && selectedLocation
|
||||
}
|
||||
|
||||
const canProceedToConfirm = () => {
|
||||
return selectedService && selectedLocation && selectedDate && selectedTime
|
||||
}
|
||||
|
||||
const handleProceed = () => {
|
||||
setErrors({})
|
||||
|
||||
if (currentStep === 'service') {
|
||||
if (!selectedService) {
|
||||
setErrors({ service: 'Selecciona un servicio' })
|
||||
return
|
||||
}
|
||||
if (!selectedLocation) {
|
||||
setErrors({ location: 'Selecciona una ubicación' })
|
||||
return
|
||||
}
|
||||
setCurrentStep('datetime')
|
||||
} else if (currentStep === 'datetime') {
|
||||
if (!selectedDate) {
|
||||
setErrors({ date: 'Selecciona una fecha' })
|
||||
return
|
||||
}
|
||||
if (!selectedTime) {
|
||||
setErrors({ time: 'Selecciona un horario' })
|
||||
return
|
||||
}
|
||||
setCurrentStep('confirm')
|
||||
} else if (currentStep === 'confirm') {
|
||||
const params = new URLSearchParams({
|
||||
service_id: selectedService,
|
||||
location_id: selectedLocation,
|
||||
date: selectedDate,
|
||||
date: format(selectedDate!, 'yyyy-MM-dd'),
|
||||
time: selectedTime
|
||||
})
|
||||
window.location.href = `/cita?${params.toString()}`
|
||||
window.location.href = `/booking/cita?${params.toString()}`
|
||||
}
|
||||
}
|
||||
|
||||
const handleStepBack = () => {
|
||||
if (currentStep === 'datetime') {
|
||||
setCurrentStep('service')
|
||||
} else if (currentStep === 'confirm') {
|
||||
setCurrentStep('datetime')
|
||||
}
|
||||
}
|
||||
|
||||
const selectedServiceData = services.find(s => s.id === selectedService)
|
||||
const selectedLocationData = locations.find(l => l.id === selectedLocation)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--bone-white)] pt-24">
|
||||
<div className="max-w-4xl mx-auto px-8 py-16">
|
||||
<header className="mb-12">
|
||||
<h1 className="text-5xl mb-4" style={{ color: 'var(--charcoal-brown)' }}>
|
||||
<div className="min-h-screen" style={{ background: 'var(--bone-white)' }}>
|
||||
<div className="max-w-2xl mx-auto px-6 py-24">
|
||||
<header className="mb-10">
|
||||
<h1 className="text-4xl mb-3 font-serif" style={{ color: 'var(--charcoal-brown)' }}>
|
||||
Reservar Cita
|
||||
</h1>
|
||||
<p className="text-xl opacity-80" style={{ color: 'var(--charcoal-brown)' }}>
|
||||
<p className="text-lg" style={{ color: 'var(--charcoal-brown)', opacity: 0.75 }}>
|
||||
Selecciona el servicio y horario de tu preferencia
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div className="space-y-8">
|
||||
<Card className="border-none" style={{ background: 'var(--soft-cream)' }}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2" style={{ color: 'var(--charcoal-brown)' }}>
|
||||
<User className="w-5 h-5" />
|
||||
Servicios
|
||||
</CardTitle>
|
||||
<CardDescription>Selecciona el servicio que deseas reservar</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Servicio</Label>
|
||||
<Select onValueChange={setSelectedService} value={selectedService}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Selecciona un servicio" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{services.map((service) => (
|
||||
<SelectItem key={service.id} value={service.id}>
|
||||
{service.name} - ${service.base_price} ({service.duration_minutes} min)
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="space-y-6">
|
||||
{currentStep === 'service' && (
|
||||
<>
|
||||
<Card style={{ background: 'var(--soft-cream)', borderColor: 'var(--mocha-taupe)', borderWidth: '1px' }}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2" style={{ color: 'var(--charcoal-brown)' }}>
|
||||
<User className="w-5 h-5" />
|
||||
Servicios
|
||||
</CardTitle>
|
||||
<CardDescription style={{ color: 'var(--charcoal-brown)', opacity: 0.7 }}>
|
||||
Selecciona el servicio que deseas reservar
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label className="text-sm font-medium mb-2 block" style={{ color: 'var(--charcoal-brown)' }}>
|
||||
Servicio
|
||||
</Label>
|
||||
<Select onValueChange={setSelectedService} value={selectedService}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Selecciona un servicio" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{services.map((service) => (
|
||||
<SelectItem key={service.id} value={service.id}>
|
||||
{service.name} - ${service.base_price.toFixed(2)} ({service.duration_minutes} min)
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{errors.service && <p className="text-sm mt-2" style={{ color: '#ef4444' }}>{errors.service}</p>}
|
||||
</div>
|
||||
|
||||
<Card className="border-none" style={{ background: 'var(--soft-cream)' }}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2" style={{ color: 'var(--charcoal-brown)' }}>
|
||||
<Clock className="w-5 h-5" />
|
||||
Fecha y Hora
|
||||
</CardTitle>
|
||||
<CardDescription>Selecciona la fecha y hora disponible</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Ubicación</Label>
|
||||
<Select onValueChange={setSelectedLocation} value={selectedLocation}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Selecciona ubicación" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{locations.map((location) => (
|
||||
<SelectItem key={location.id} value={location.id}>
|
||||
{location.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Fecha</Label>
|
||||
<input
|
||||
type="date"
|
||||
value={selectedDate}
|
||||
onChange={(e) => setSelectedDate(e.target.value)}
|
||||
min={format(new Date(), 'yyyy-MM-dd')}
|
||||
className="w-full px-4 py-3 border rounded-lg"
|
||||
style={{ borderColor: 'var(--mocha-taupe)' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{selectedServiceData && (
|
||||
<div>
|
||||
<Label>Duración del servicio: {selectedServiceData.duration_minutes} minutos</Label>
|
||||
<div>
|
||||
<Label className="text-sm font-medium mb-2 block" style={{ color: 'var(--charcoal-brown)' }}>
|
||||
Ubicación
|
||||
</Label>
|
||||
<Select onValueChange={setSelectedLocation} value={selectedLocation}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Selecciona ubicación" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{locations.map((location) => (
|
||||
<SelectItem key={location.id} value={location.id}>
|
||||
{location.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{errors.location && <p className="text-sm mt-2" style={{ color: '#ef4444' }}>{errors.location}</p>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-4">
|
||||
Cargando horarios...
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<Label>Horarios disponibles</Label>
|
||||
{timeSlots.length === 0 ? (
|
||||
<p className="text-sm opacity-70 mt-2">
|
||||
No hay horarios disponibles para esta fecha. Selecciona otra fecha.
|
||||
</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-2 mt-2">
|
||||
{timeSlots.map((slot, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant={selectedTime === slot.start_time ? 'default' : 'outline'}
|
||||
onClick={() => setSelectedTime(slot.start_time)}
|
||||
className={selectedTime === slot.start_time ? 'w-full' : ''}
|
||||
>
|
||||
{format(new Date(slot.start_time), 'HH:mm', { locale: es })}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{selectedServiceData && selectedTime && (
|
||||
<Card className="border-none" style={{ background: 'var(--deep-earth)' }}>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-white">
|
||||
<p className="text-lg font-semibold mb-2">Resumen de la reserva</p>
|
||||
<div className="space-y-1 opacity-90">
|
||||
<p>Servicio: {selectedServiceData.name}</p>
|
||||
<p>Fecha: {format(new Date(selectedDate), 'PPP', { locale: es })}</p>
|
||||
<p>Hora: {format(new Date(selectedTime), 'HH:mm', { locale: es })}</p>
|
||||
<p>Precio: ${selectedServiceData.base_price.toFixed(2)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleContinue}
|
||||
disabled={!selectedService || !selectedLocation || !selectedDate || !selectedTime}
|
||||
className="w-full"
|
||||
>
|
||||
Continuar con Datos del Cliente
|
||||
</Button>
|
||||
{currentStep === 'datetime' && (
|
||||
<>
|
||||
<Card style={{ background: 'var(--soft-cream)', borderColor: 'var(--mocha-taupe)', borderWidth: '1px' }}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2" style={{ color: 'var(--charcoal-brown)' }}>
|
||||
<Clock className="w-5 h-5" />
|
||||
Fecha y Hora
|
||||
</CardTitle>
|
||||
<CardDescription style={{ color: 'var(--charcoal-brown)', opacity: 0.7 }}>
|
||||
Selecciona la fecha y hora disponible
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div>
|
||||
<Label className="text-sm font-medium mb-2 block" style={{ color: 'var(--charcoal-brown)' }}>
|
||||
Fecha
|
||||
</Label>
|
||||
<DatePicker
|
||||
selectedDate={selectedDate}
|
||||
onDateSelect={handleDateSelect}
|
||||
minDate={new Date()}
|
||||
/>
|
||||
{errors.date && <p className="text-sm mt-2" style={{ color: '#ef4444' }}>{errors.date}</p>}
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-8" style={{ color: 'var(--charcoal-brown)', opacity: 0.7 }}>
|
||||
Cargando horarios...
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<Label className="text-sm font-medium mb-2 block" style={{ color: 'var(--charcoal-brown)' }}>
|
||||
Horarios disponibles
|
||||
</Label>
|
||||
{timeSlots.length === 0 ? (
|
||||
<p className="text-sm" style={{ color: 'var(--charcoal-brown)', opacity: 0.7 }}>
|
||||
No hay horarios disponibles para esta fecha. Selecciona otra fecha.
|
||||
</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{timeSlots.map((slot, index) => {
|
||||
const slotTime = new Date(slot.start_time)
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
variant={selectedTime === slot.start_time ? 'default' : 'outline'}
|
||||
onClick={() => setSelectedTime(slot.start_time)}
|
||||
className={selectedTime === slot.start_time ? 'w-full' : ''}
|
||||
style={selectedTime === slot.start_time ? { background: 'var(--deep-earth)' } : {}}
|
||||
>
|
||||
{format(slotTime, 'HH:mm', { locale: es })}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{errors.time && <p className="text-sm mt-2" style={{ color: '#ef4444' }}>{errors.time}</p>}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{selectedServiceData && (
|
||||
<div className="text-sm p-4 rounded-lg" style={{ background: 'var(--bone-white)', color: 'var(--charcoal-brown)', opacity: 0.7 }}>
|
||||
Duración del servicio: {selectedServiceData.duration_minutes} minutos
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{currentStep === 'confirm' && selectedServiceData && selectedLocationData && selectedDate && selectedTime && (
|
||||
<>
|
||||
<Card style={{ background: 'var(--deep-earth)' }}>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-white space-y-3">
|
||||
<h3 className="text-lg font-semibold mb-4">Resumen de la reserva</h3>
|
||||
<div>
|
||||
<p className="text-sm opacity-75">Servicio</p>
|
||||
<p className="font-medium">{selectedServiceData.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm opacity-75">Ubicación</p>
|
||||
<p className="font-medium">{selectedLocationData.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm opacity-75">Fecha</p>
|
||||
<p className="font-medium">{format(selectedDate, 'PPP', { locale: es })}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm opacity-75">Hora</p>
|
||||
<p className="font-medium">{format(parseISO(selectedTime), 'HH:mm', { locale: es })}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm opacity-75">Duración</p>
|
||||
<p className="font-medium">{selectedServiceData.duration_minutes} minutos</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm opacity-75">Precio</p>
|
||||
<p className="font-medium text-xl">${selectedServiceData.base_price.toFixed(2)} USD</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
|
||||
{currentStep === 'confirm' && (
|
||||
<Button
|
||||
onClick={handleProceed}
|
||||
className="w-full text-lg py-6"
|
||||
style={{ background: 'var(--deep-earth)' }}
|
||||
>
|
||||
Confirmar cita
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{currentStep !== 'confirm' && (
|
||||
<>
|
||||
<Button
|
||||
onClick={handleProceed}
|
||||
disabled={currentStep === 'service' ? !canProceedToDateTime() : !canProceedToConfirm()}
|
||||
className="w-full text-lg py-6"
|
||||
style={{ background: 'var(--deep-earth)', opacity: (currentStep === 'service' ? !canProceedToDateTime() : !canProceedToConfirm()) ? 0.5 : 1 }}
|
||||
>
|
||||
{currentStep === 'service' ? 'Continuar: Seleccionar fecha y hora' : 'Continuar: Confirmar cita'}
|
||||
</Button>
|
||||
|
||||
{currentStep !== 'service' && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleStepBack}
|
||||
className="w-full"
|
||||
style={{ borderColor: 'var(--mocha-taupe)', color: 'var(--charcoal-brown)' }}
|
||||
>
|
||||
Atrás
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user