Permitir que los Usuarios Reserven de Nuevo

Después de enviar una reserva, los usuarios a menudo quieren hacer otra — para una fecha, servicio o persona diferente. Sin un mecanismo de restablecimiento, la única opción es actualizar la página.

Agreguemos un flujo de restablecimiento adecuado para que los usuarios puedan reservar múltiples servicios en una sola sesión.

Lo que Aprenderás

Cómo restablecer múltiples variables $state
Cómo devolver la UI a su vista inicial
Cómo crear un ciclo de vida completo del formulario

Agregar el Botón "Reservar Otro"

En la sección de confirmación, agrega un botón que permita a los usuarios comenzar de nuevo:

<!-- filename: src/lib/components/BookingForm.svelte -->
{#if submitted}
  <div class="confirmation">
    <h2>✓ Booking Requested!</h2>
    <p>Thank you, {customerName}. We've received your booking request.</p>
    <p>We'll send confirmation details to {email}.</p>
    
    <button onclick={resetForm}>Book Another Service</button>
  </div>
{:else}
  <!-- ... form ... -->
{/if}

Al hacer clic, llama a resetForm para limpiar todo y mostrar el formulario nuevamente.

Crear la Función de Restablecimiento

La función de restablecimiento devuelve cada variable de estado a su valor inicial:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  let customerName = $state('');
  let email = $state('');
  let date = $state('');
  let time = $state('');
  let notes = $state('');
  let submitted = $state(false);
  
  function handleSubmit(event) {
    event.preventDefault();
    console.log('Booking submitted:', { customerName, email, date, time, notes });
    submitted = true;
  }
  
  function resetForm() {
    customerName = '';
    email = '';
    date = '';
    time = '';
    notes = '';
    submitted = false;
  }
</script>

Cada asignación limpia un campo. Establecer submitted = false regresa a la vista del formulario.

Probar el Ciclo Completo

Completa el formulario de reserva
Haz clic en "Solicitar Reserva"
Ve el mensaje de confirmación
Haz clic en "Reservar Otro Servicio"
El formulario vuelve a aparecer, vacío y listo

El ciclo puede repetirse indefinidamente sin actualizar la página.

Por Qué Funciona Esto

El sistema de reactividad de Svelte rastrea los cambios en las variables $state. Cuando asignamos nuevos valores, Svelte actualiza el DOM automáticamente. Al restablecer todas las variables a sus valores iniciales, la UI regresa a su estado inicial.

Este enfoque manual es sencillo y funciona bien para formularios con unos pocos campos. Para esta etapa de aprendizaje, es exactamente lo que necesitamos.

Nota: A medida que los formularios crecen, existen patrones alternativos como agrupar campos en un objeto para facilitar los restablecimientos. Exploraremos esas técnicas en lecciones más avanzadas.

El Componente Completo

Aquí está el BookingForm.svelte final con el ciclo de vida completo:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  let customerName = $state('');
  let email = $state('');
  let date = $state('');
  let time = $state('');
  let notes = $state('');
  let submitted = $state(false);
  
  function formatDate(dateString) {
    if (!dateString) return 'Not selected';
    const dateObj = new Date(dateString + 'T00:00:00');
    return dateObj.toLocaleDateString('en-US', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  }
  
  function formatTime(timeString) {
    if (!timeString) return 'Not selected';
    const [hours, minutes] = timeString.split(':');
    const hour = parseInt(hours);
    const ampm = hour >= 12 ? 'PM' : 'AM';
    const displayHour = hour % 12 || 12;
    return `${displayHour}:${minutes} ${ampm}`;
  }
  
  function handleSubmit(event) {
    event.preventDefault();
    console.log('Booking submitted:', { customerName, email, date, time, notes });
    submitted = true;
  }
  
  function resetForm() {
    customerName = '';
    email = '';
    date = '';
    time = '';
    notes = '';
    submitted = false;
  }
</script>

<div class="booking-container">
  {#if submitted}
    <div class="confirmation">
      <h2>✓ Booking Requested!</h2>
      <p>Thank you, {customerName}. We've received your booking request.</p>
      
      <dl>
        <dt>Service Date</dt>
        <dd>{formatDate(date)} at {formatTime(time)}</dd>
        
        <dt>Confirmation Email</dt>
        <dd>We'll send details to {email}</dd>
      </dl>
      
      <p>We'll contact you within 24 hours to confirm your appointment.</p>
      
      <button onclick={resetForm}>Book Another Service</button>
    </div>
  {:else}
    <form onsubmit={handleSubmit}>
      <h2>Book a Service</h2>
      
      <div class="field">
        <label for="name">Your Name</label>
        <input 
          type="text" 
          id="name" 
          placeholder="Jane Smith"
          bind:value={customerName}
          required 
        />
      </div>
      
      <div class="field">
        <label for="email">Email Address</label>
        <input 
          type="email" 
          id="email" 
          placeholder="jane@example.com"
          bind:value={email}
          required 
        />
      </div>
      
      <div class="field">
        <label for="date">Preferred Date</label>
        <input type="date" id="date" bind:value={date} required />
      </div>
      
      <div class="field">
        <label for="time">Preferred Time</label>
        <select id="time" bind:value={time} required>
          <option value="">Select a time...</option>
          <option value="09:00">9:00 AM</option>
          <option value="10:00">10:00 AM</option>
          <option value="11:00">11:00 AM</option>
          <option value="13:00">1:00 PM</option>
          <option value="14:00">2:00 PM</option>
          <option value="15:00">3:00 PM</option>
        </select>
      </div>
      
      <div class="field">
        <label for="notes">Additional Notes</label>
        <textarea 
          id="notes" 
          rows="3"
          placeholder="Any special requests?"
          bind:value={notes}
        ></textarea>
      </div>
      
      <button type="submit">Request Booking</button>
    </form>
    
    <aside class="preview">
      <h3>Booking Preview</h3>
      
      <dl>
        <dt>Name</dt>
        <dd>{customerName || 'Not entered'}</dd>
        
        <dt>Email</dt>
        <dd>{email || 'Not entered'}</dd>
        
        <dt>Date</dt>
        <dd>{formatDate(date)}</dd>
        
        <dt>Time</dt>
        <dd>{formatTime(time)}</dd>
        
        <dt>Notes</dt>
        <dd>{notes || 'None'}</dd>
      </dl>
    </aside>
  {/if}
</div>

Errores Comunes

Olvidar Restablecer `submitted`

function resetForm() {
  customerName = '';
  email = '';
  date = '';
  time = '';
  notes = '';
  // ❌ Forgot submitted — still shows confirmation!
}

Siempre restablece el estado que controla qué vista se muestra:

function resetForm() {
  customerName = '';
  email = '';
  date = '';
  time = '';
  notes = '';
  submitted = false;  // ✅ Now the form appears again
}

Resumen

El formulario de reserva ahora tiene un ciclo de vida completo: completar → enviar → confirmar → restablecer. Los usuarios pueden hacer múltiples reservas sin actualizar la página, y todo el estado se restablece limpiamente a los valores iniciales.

Puntos clave:

Las funciones de restablecimiento devuelven cada variable de estado a su valor inicial
No olvides el estado de control de la UI como submitted
El restablecimiento manual funciona bien para formularios simples

¡Módulo Completo! 🎉

Has terminado el Módulo 4: Fundamentos de Reactividad. El formulario de reservas de BookIt ahora:

Rastrea todos los valores de campos con $state
Muestra una vista previa en vivo mientras los usuarios escriben
Maneja el envío del formulario
Muestra la confirmación con los detalles de la reserva
Se restablece para reservas adicionales

Lo que has aprendido:

Por qué se necesita $state para las actualizaciones reactivas
Enlace bidireccional con bind:value
Manejo de eventos con onsubmit y onclick
Gestión del estado de la UI para diferentes vistas

Próximos Pasos

El formulario de reservas funciona, pero la página de servicios solo muestra una lista simple. Continúa con Módulo 5: Flujo de Control para aprender cómo mostrar contenido de forma condicional y manejar estados vacíos.