mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 16:24:30 +00:00
583a25a6f6
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
372 lines
15 KiB
TypeScript
372 lines
15 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
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, 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
|
|
duration_minutes: number
|
|
base_price: number
|
|
}
|
|
|
|
interface Location {
|
|
id: string
|
|
name: string
|
|
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<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()
|
|
fetchLocations()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (selectedService && selectedLocation && selectedDate) {
|
|
fetchTimeSlots()
|
|
}
|
|
}, [selectedService, selectedLocation, selectedDate])
|
|
|
|
const fetchServices = async () => {
|
|
try {
|
|
const response = await fetch('/api/services')
|
|
const data = await response.json()
|
|
if (data.services) {
|
|
setServices(data.services)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching services:', error)
|
|
setErrors({ ...errors, services: 'Error al cargar servicios' })
|
|
}
|
|
}
|
|
|
|
const fetchLocations = async () => {
|
|
try {
|
|
const response = await fetch('/api/locations')
|
|
const data = await response.json()
|
|
if (data.locations) {
|
|
setLocations(data.locations)
|
|
if (data.locations.length > 0) {
|
|
setSelectedLocation(data.locations[0].id)
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching locations:', error)
|
|
setErrors({ ...errors, locations: 'Error al cargar ubicaciones' })
|
|
}
|
|
}
|
|
|
|
const fetchTimeSlots = async () => {
|
|
if (!selectedService || !selectedLocation || !selectedDate) return
|
|
|
|
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=${formattedDate}`
|
|
)
|
|
const data = await response.json()
|
|
if (data.availability) {
|
|
setTimeSlots(data.availability)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching time slots:', error)
|
|
setErrors({ ...errors, timeSlots: 'Error al cargar horarios' })
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
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: format(selectedDate!, 'yyyy-MM-dd'),
|
|
time: selectedTime
|
|
})
|
|
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" 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-lg" style={{ color: 'var(--charcoal-brown)', opacity: 0.75 }}>
|
|
Selecciona el servicio y horario de tu preferencia
|
|
</p>
|
|
</header>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
)}
|
|
|
|
{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>
|
|
)
|
|
} |