Un Formulario de Reservas Reutilizable

El formulario de reservas ha crecido. Tiene su propio estado, lógica de validación e interfaz de usuario. Merece su propio componente — uno que pueda configurarse con los servicios disponibles y notifique al padre cuando se envía una reserva.

Lo Que Aprenderás

Estructurar componentes complejos
Combinar props con estado interno
Manejar el envío de formularios en componentes
Comunicar eventos a los componentes padre

Responsabilidades del Componente

El componente BookingForm deberá:

Aceptar los servicios disponibles como prop
Gestionar su propio estado del formulario internamente
Validar la entrada antes del envío
Notificar al padre cuando se envíe

La página padre deberá:

Proveer la lista de servicios
Manejar la lógica real de reservas (llamadas a la API, etc.)

Crear la Estructura Base del Componente

Comienza con la estructura básica:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  // Props: data from parent
  let { services = [], onsubmit } = $props();
  
  // Internal state: form fields
  let customerName = $state('');
  let customerEmail = $state('');
  let bookingDate = $state('');
  let selectedTime = $state('');
  let selectedService = $state('');
  let notes = $state('');
  
  // Form status
  let isSubmitting = $state(false);
</script>

<form>
  <!-- Form fields will go here -->
</form>

<style>
  /* Styles */
</style>

Nota: los servicios provienen de props, pero los campos del formulario son estado interno.

Agregar la Estructura del Formulario

Construye las secciones del formulario:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  let { services = [], onsubmit } = $props();
  
  let customerName = $state('');
  let customerEmail = $state('');
  let bookingDate = $state('');
  let selectedTime = $state('');
  let selectedService = $state('');
  let notes = $state('');
  let isSubmitting = $state(false);
  
  // Derived values
  let selectedServiceDetails = $derived(
    services.find(s => s.slug === selectedService)
  );
  
  // Time slots
  function generateTimeSlots() {
    const slots = [];
    for (let hour = 9; hour < 17; hour++) {
      for (let minute of [0, 30]) {
        const value = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
        const period = hour >= 12 ? 'PM' : 'AM';
        const displayHour = hour > 12 ? hour - 12 : hour;
        const label = `${displayHour}:${minute.toString().padStart(2, '0')} ${period}`;
        slots.push({ value, label });
      }
    }
    return slots;
  }
  
  const timeSlots = generateTimeSlots();
</script>

<form>
  <fieldset>
    <legend>Contact Information</legend>
    
    <div class="field">
      <label for="name">Your Name</label>
      <input 
        type="text" 
        id="name" 
        bind:value={customerName}
        required 
      />
    </div>
    
    <div class="field">
      <label for="email">Email Address</label>
      <input 
        type="email" 
        id="email" 
        bind:value={customerEmail}
        required 
      />
    </div>
  </fieldset>
  
  <fieldset>
    <legend>Select a Service</legend>
    
    <div class="service-options">
      {#each services as service (service.id)}
        <label class="service-option" class:selected={selectedService === service.slug}>
          <input 
            type="radio" 
            name="service" 
            value={service.slug}
            bind:group={selectedService}
            required
          />
          <span class="service-name">{service.name}</span>
          <span class="service-price">${service.price}</span>
        </label>
      {/each}
    </div>
  </fieldset>
  
  <fieldset>
    <legend>Appointment Time</legend>
    
    <div class="field">
      <label for="date">Date</label>
      <input 
        type="date" 
        id="date"
        bind:value={bookingDate}
        required 
      />
    </div>
    
    <div class="field">
      <label for="time">Time</label>
      <select id="time" bind:value={selectedTime} required>
        <option value="">Choose a time...</option>
        {#each timeSlots as slot}
          <option value={slot.value}>{slot.label}</option>
        {/each}
      </select>
    </div>
  </fieldset>
  
  <fieldset>
    <legend>Additional Notes</legend>
    
    <div class="field">
      <label for="notes">Special Instructions (Optional)</label>
      <textarea 
        id="notes"
        bind:value={notes}
        rows="3"
      ></textarea>
    </div>
  </fieldset>
  
  <button type="submit" disabled={isSubmitting}>
    {isSubmitting ? 'Submitting...' : 'Request Booking'}
  </button>
</form>

Manejar el Envío del Formulario

Cuando el formulario se envía, reúne los datos y notifica al padre:

<script>
  let { services = [], onsubmit } = $props();
  
  // ... state declarations ...
  
  async function handleSubmit(event) {
    event.preventDefault();
    
    if (!onsubmit) return;
    
    isSubmitting = true;
    
    const bookingData = {
      customerName,
      customerEmail,
      bookingDate,
      selectedTime,
      selectedService,
      notes,
      // Include computed values
      serviceDetails: selectedServiceDetails
    };
    
    try {
      await onsubmit(bookingData);
      // Reset form on success
      resetForm();
    } catch (error) {
      console.error('Booking failed:', error);
    } finally {
      isSubmitting = false;
    }
  }
  
  function resetForm() {
    customerName = '';
    customerEmail = '';
    bookingDate = '';
    selectedTime = '';
    selectedService = '';
    notes = '';
  }
</script>

<form onsubmit={handleSubmit}>
  <!-- ... form fields ... -->
</form>

La prop onsubmit es una función que el padre proporciona.

Usar el Componente

Ahora usa BookingForm en una página:

<!-- filename: src/routes/book/+page.svelte -->
<script>
  import BookingForm from '$lib/components/BookingForm.svelte';
  
  const services = [
    { id: '1', slug: 'lawn-mowing', name: 'Lawn Mowing', price: 50, duration: 60 },
    { id: '2', slug: 'hedge-trimming', name: 'Hedge Trimming', price: 75, duration: 90 },
    { id: '3', slug: 'consultation', name: 'Garden Consultation', price: 100, duration: 60 }
  ];
  
  let bookingConfirmed = $state(false);
  let confirmedBooking = $state(null);
  
  async function handleBooking(data) {
    // In a real app, send to server
    console.log('Booking submitted:', data);
    
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    confirmedBooking = data;
    bookingConfirmed = true;
  }
</script>

<h1>Book a Service</h1>

{#if bookingConfirmed}
  <div class="confirmation">
    <h2>✓ Booking Confirmed!</h2>
    <p>Thank you, {confirmedBooking.customerName}!</p>
    <p>We'll contact you at {confirmedBooking.customerEmail} to confirm your 
       {confirmedBooking.serviceDetails.name} appointment.</p>
    <button onclick={() => bookingConfirmed = false}>
      Book Another Service
    </button>
  </div>
{:else}
  <BookingForm {services} onsubmit={handleBooking} />
{/if}

La página controla la lista de servicios y maneja lo que sucede después del envío.

Preseleccionar un Servicio

¿Qué pasa si alguien navega desde la página de un servicio para reservar ese servicio específico?

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  let { 
    services = [], 
    onsubmit,
    initialService = ''  // New prop for pre-selection
  } = $props();
  
  // Initialize with the provided service
  let selectedService = $state(initialService);
</script>

Uso:

<!-- Pre-select lawn mowing -->
<BookingForm {services} onsubmit={handleBooking} initialService="lawn-mowing" />

El Componente Completo

Aquí está el BookingForm completo con estilos:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  let { 
    services = [], 
    onsubmit,
    initialService = ''
  } = $props();
  
  // Form state
  let customerName = $state('');
  let customerEmail = $state('');
  let bookingDate = $state('');
  let selectedTime = $state('');
  let selectedService = $state(initialService);
  let notes = $state('');
  let isSubmitting = $state(false);
  
  // Derived
  let selectedServiceDetails = $derived(
    services.find(s => s.slug === selectedService)
  );
  
  // Generate time slots
  const timeSlots = (() => {
    const slots = [];
    for (let hour = 9; hour < 17; hour++) {
      for (let minute of [0, 30]) {
        const value = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
        const period = hour >= 12 ? 'PM' : 'AM';
        const displayHour = hour > 12 ? hour - 12 : hour;
        slots.push({ value, label: `${displayHour}:${minute.toString().padStart(2, '0')} ${period}` });
      }
    }
    return slots;
  })();
  
  async function handleSubmit(event) {
    event.preventDefault();
    if (!onsubmit) return;
    
    isSubmitting = true;
    
    try {
      await onsubmit({
        customerName,
        customerEmail,
        bookingDate,
        selectedTime,
        selectedService,
        notes,
        serviceDetails: selectedServiceDetails
      });
      resetForm();
    } finally {
      isSubmitting = false;
    }
  }
  
  function resetForm() {
    customerName = '';
    customerEmail = '';
    bookingDate = '';
    selectedTime = '';
    selectedService = initialService;
    notes = '';
  }
</script>

<form class="booking-form" onsubmit={handleSubmit}>
  <!-- Form content as shown above -->
</form>

<style>
  .booking-form {
    max-width: 600px;
  }
  
  fieldset {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  legend {
    font-weight: 600;
    padding: 0 0.5rem;
  }
  
  .field {
    margin-bottom: 1rem;
  }
  
  .field:last-child {
    margin-bottom: 0;
  }
  
  label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
  }
  
  input, select, textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
  }
  
  button[type="submit"] {
    width: 100%;
    padding: 0.75rem;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
  }
  
  button[type="submit"]:disabled {
    background: #ccc;
    cursor: not-allowed;
  }
</style>

Resumen

Los formularios complejos funcionan bien como componentes. Acepta la configuración a través de props, gestiona el estado del formulario internamente y comunica el envío mediante props de callback. Esto mantiene las páginas simples y los formularios reutilizables.

Puntos clave:

Props para datos de configuración (lista de servicios)
Estado interno para los campos del formulario
Props de callback para eventos (onsubmit)
Restablecer el formulario al enviar exitosamente

Próximos Pasos

Creemos un componente más pequeño y sencillo. Continúa con Crear el Componente PriceBadge para aprender sobre props con valores predeterminados.