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
2026-03-15 13:24:27 +00:00 · 2026-01-17 00:29:49 -06:00
parent fb60178c86
commit 583a25a6f6
56 changed files with 2676 additions and 491 deletions
--- a/components/booking/date-picker.tsx
+++ b/components/booking/date-picker.tsx
@@ -0,0 +1,105 @@
+import { useState } from 'react'
+import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isSameDay, isToday, addMonths, subMonths } from 'date-fns'
+import { es } from 'date-fns/locale'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+interface DatePickerProps {
+  selectedDate: Date | null
+  onDateSelect: (date: Date) => void
+  minDate?: Date
+  disabled?: boolean
+}
+
+export default function DatePicker({ selectedDate, onDateSelect, minDate, disabled }: DatePickerProps) {
+  const [currentMonth, setCurrentMonth] = useState(selectedDate ? new Date(selectedDate) : new Date())
+
+  const days = eachDayOfInterval({
+    start: startOfMonth(currentMonth),
+    end: endOfMonth(currentMonth)
+  })
+
+  const previousMonth = () => setCurrentMonth(subMonths(currentMonth, 1))
+  const nextMonth = () => setCurrentMonth(addMonths(currentMonth, 1))
+
+  const isDateDisabled = (date: Date) => {
+    if (minDate) {
+      return date < minDate
+    }
+    return false
+  }
+
+  const isDateSelected = (date: Date) => {
+    return selectedDate && isSameDay(date, selectedDate)
+  }
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center justify-between mb-4">
+        <button
+          type="button"
+          onClick={previousMonth}
+          disabled={disabled}
+          className="p-2 hover:bg-[var(--mocha-taupe)]/10 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <ChevronLeft className="w-5 h-5" style={{ color: 'var(--charcoal-brown)' }} />
+        </button>
+        <h3 className="text-lg font-medium" style={{ color: 'var(--charcoal-brown)' }}>
+          {format(currentMonth, 'MMMM yyyy', { locale: es })}
+        </h3>
+        <button
+          type="button"
+          onClick={nextMonth}
+          disabled={disabled}
+          className="p-2 hover:bg-[var(--mocha-taupe)]/10 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <ChevronRight className="w-5 h-5" style={{ color: 'var(--charcoal-brown)' }} />
+        </button>
+      </div>
+
+      <div className="grid grid-cols-7 gap-1 mb-2">
+        {['L', 'M', 'X', 'J', 'V', 'S', 'D'].map((day, index) => (
+          <div
+            key={index}
+            className="text-center text-sm font-medium py-2"
+            style={{ color: 'var(--mocha-taupe)' }}
+          >
+            {day}
+          </div>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-7 gap-1">
+        {days.map((date, index) => {
+          const disabled = isDateDisabled(date)
+          const selected = isDateSelected(date)
+          const today = isToday(date)
+          const notCurrentMonth = !isSameMonth(date, currentMonth)
+
+          return (
+            <button
+              key={index}
+              type="button"
+              onClick={() => !disabled && !notCurrentMonth && onDateSelect(date)}
+              disabled={disabled || notCurrentMonth}
+              className={`
+                relative p-2 text-sm font-medium rounded-md transition-all
+                ${disabled || notCurrentMonth ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer hover:bg-[var(--mocha-taupe)]/10'}
+                ${selected ? 'text-white' : ''}
+                ${today && !selected ? 'font-bold' : ''}
+              `}
+              style={selected ? { background: 'var(--deep-earth)' } : { color: 'var(--charcoal-brown)' }}
+            >
+              {format(date, 'd')}
+              {today && !selected && (
+                <span
+                  className="absolute bottom-1 left-1/2 transform -translate-x-1/2 w-1 h-1 rounded-full"
+                  style={{ background: 'var(--deep-earth)' }}
+                />
+              )}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
--- a/components/booking/mock-payment-form.tsx
+++ b/components/booking/mock-payment-form.tsx
@@ -0,0 +1,210 @@
+import { useState } from 'react'
+import { CreditCard, Lock } from 'lucide-react'
+
+interface MockPaymentFormProps {
+  amount: number
+  onSubmit: (paymentMethod: any) => Promise<void>
+  disabled?: boolean
+}
+
+export default function MockPaymentForm({ amount, onSubmit, disabled }: MockPaymentFormProps) {
+  const [cardNumber, setCardNumber] = useState('')
+  const [expiry, setExpiry] = useState('')
+  const [cvc, setCvc] = useState('')
+  const [name, setName] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  const formatCardNumber = (value: string) => {
+    const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
+    const matches = v.match(/\d{4,16}/g)
+    const match = (matches && matches[0]) || ''
+    const parts = []
+
+    for (let i = 0, len = match.length; i < len; i += 4) {
+      parts.push(match.substring(i, i + 4))
+    }
+
+    if (parts.length) {
+      return parts.join(' ')
+    } else {
+      return v
+    }
+  }
+
+  const formatExpiry = (value: string) => {
+    const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
+    if (v.length >= 2) {
+      return v.substring(0, 2) + '/' + v.substring(2, 4)
+    }
+    return v
+  }
+
+  const validate = () => {
+    const newErrors: Record<string, string> = {}
+
+    if (cardNumber.length < 19) {
+      newErrors.cardNumber = 'Número de tarjeta inválido'
+    }
+
+    if (expiry.length < 5) {
+      newErrors.expiry = 'Fecha de expiración inválida'
+    }
+
+    if (cvc.length < 3) {
+      newErrors.cvc = 'CVC inválido'
+    }
+
+    if (!name.trim()) {
+      newErrors.name = 'Nombre requerido'
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (!validate()) return
+
+    setLoading(true)
+    try {
+      await onSubmit({
+        cardNumber: cardNumber.replace(/\s/g, ''),
+        expiry,
+        cvc,
+        name,
+        type: 'card'
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleCardNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formatted = formatCardNumber(e.target.value)
+    if (formatted.length <= 19) {
+      setCardNumber(formatted)
+    }
+  }
+
+  const handleExpiryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formatted = formatExpiry(e.target.value)
+    if (formatted.length <= 5) {
+      setExpiry(formatted)
+    }
+  }
+
+  return (
+    <div className="p-6 rounded-xl" style={{ background: 'var(--bone-white)' }}>
+      <div className="flex items-center gap-2 mb-4">
+        <Lock className="w-4 h-4" style={{ color: 'var(--mocha-taupe)' }} />
+        <span className="text-sm font-medium" style={{ color: 'var(--charcoal-brown)' }}>
+          Pago Seguro (Demo Mode)
+        </span>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium mb-2" style={{ color: 'var(--charcoal-brown)' }}>
+            Número de Tarjeta
+          </label>
+          <div className="relative">
+            <input
+              type="text"
+              value={cardNumber}
+              onChange={handleCardNumberChange}
+              placeholder="1234 5678 9012 3456"
+              disabled={disabled || loading}
+              className="w-full px-4 py-3 border rounded-lg pr-12"
+              style={{ borderColor: errors.cardNumber ? '#ef4444' : 'var(--mocha-taupe)' }}
+            />
+            <CreditCard className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5" style={{ color: 'var(--mocha-taupe)' }} />
+          </div>
+          {errors.cardNumber && <p className="text-sm mt-1" style={{ color: '#ef4444' }}>{errors.cardNumber}</p>}
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--charcoal-brown)' }}>
+              Expiración (MM/AA)
+            </label>
+            <input
+              type="text"
+              value={expiry}
+              onChange={handleExpiryChange}
+              placeholder="12/28"
+              disabled={disabled || loading}
+              className="w-full px-4 py-3 border rounded-lg"
+              style={{ borderColor: errors.expiry ? '#ef4444' : 'var(--mocha-taupe)' }}
+            />
+            {errors.expiry && <p className="text-sm mt-1" style={{ color: '#ef4444' }}>{errors.expiry}</p>}
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--charcoal-brown)' }}>
+              CVC
+            </label>
+            <input
+              type="text"
+              value={cvc}
+              onChange={(e) => setCvc(e.target.value.replace(/[^0-9]/g, ''))}
+              placeholder="123"
+              disabled={disabled || loading}
+              className="w-full px-4 py-3 border rounded-lg"
+              style={{ borderColor: errors.cvc ? '#ef4444' : 'var(--mocha-taupe)' }}
+            />
+            {errors.cvc && <p className="text-sm mt-1" style={{ color: '#ef4444' }}>{errors.cvc}</p>}
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2" style={{ color: 'var(--charcoal-brown)' }}>
+            Nombre en la tarjeta
+          </label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="MARÍA GARCÍA"
+            disabled={disabled || loading}
+            className="w-full px-4 py-3 border rounded-lg uppercase"
+            style={{ borderColor: errors.name ? '#ef4444' : 'var(--mocha-taupe)' }}
+          />
+          {errors.name && <p className="text-sm mt-1" style={{ color: '#ef4444' }}>{errors.name}</p>}
+        </div>
+
+      <div className="pt-2">
+        <div className="flex items-center justify-between mb-4">
+          <span className="text-sm" style={{ color: 'var(--charcoal-brown)', opacity: 0.7 }}>
+            Total a pagar
+          </span>
+          <span className="text-2xl font-semibold" style={{ color: 'var(--charcoal-brown)' }}>
+            ${amount.toFixed(2)} USD
+          </span>
+        </div>
+
+        <button
+          type="submit"
+          disabled={disabled || loading}
+          className="w-full px-6 py-4 rounded-lg font-medium text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+          style={{ background: 'var(--deep-earth)' }}
+        >
+          {loading ? 'Procesando...' : 'Pagar y Confirmar Reserva'}
+        </button>
+
+        <div className="mt-4 p-3 rounded-lg" style={{ background: 'rgba(111, 94, 79, 0.1)', border: '1px solid var(--mocha-taupe)' }}>
+          <p className="text-xs text-center" style={{ color: 'var(--charcoal-brown)', opacity: 0.8 }}>
+            <Lock className="inline w-3 h-3 mr-1" />
+            <span className="font-medium">Modo de prueba:</span> Este es un formulario de demostración. No se procesará ningún pago real.
+          </p>
+          <p className="text-xs text-center mt-1" style={{ color: 'var(--charcoal-brown)', opacity: 0.6 }}>
+            Consulta STRIPE_SETUP.md para activar pagos reales
+          </p>
+        </div>
+      </div>
+      </form>
+    </div>
+  )
+}
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -20,14 +20,14 @@ const SelectTrigger = React.forwardRef<
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "select-trigger flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="h-4 w-4 opacity-50" style={{ color: 'var(--charcoal-brown)' }} />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
 ))
@@ -46,6 +46,7 @@ const SelectScrollUpButton = React.forwardRef<
      "flex cursor-default items-center justify-center py-1",
      className
    )}
+    style={{ color: 'var(--charcoal-brown)' }}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
@@ -66,6 +67,7 @@ const SelectScrollDownButton = React.forwardRef<
      "flex cursor-default items-center justify-center py-1",
      className
    )}
+    style={{ color: 'var(--charcoal-brown)' }}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
@@ -84,7 +86,7 @@ const SelectContent = React.forwardRef<
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "select-content relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className
@@ -133,14 +135,14 @@ const SelectItem = React.forwardRef<
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "select-item relative flex w-full cursor-default select-none items-center rounded-sm py-2 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="h-4 w-4" style={{ color: 'var(--deep-earth)' }} />
      </SelectPrimitive.ItemIndicator>
    </span>

@@ -158,7 +160,8 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator
    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("-mx-1 my-1 h-px", className)}
+    style={{ background: 'var(--mocha-taupe)', opacity: 0.3 }}
    {...props}
  />
 ))