Um Formulário de Reserva Reutilizável

O formulário de reserva cresceu. Ele tem seu próprio estado, lógica de validação e interface. Ele pertence ao seu próprio componente — um que pode ser configurado com os serviços disponíveis e notifica o pai quando uma reserva é enviada.

O Que Você Aprenderá

Estruturar componentes complexos
Combinar props com estado interno
Lidar com envio de formulários em componentes
Comunicar eventos aos componentes pai

Responsabilidades do Componente

O componente BookingForm irá:

Aceitar os serviços disponíveis como uma prop
Gerenciar seu próprio estado de formulário internamente
Validar a entrada antes do envio
Notificar o pai quando enviado

A página pai irá:

Fornecer a lista de serviços
Lidar com a lógica real de reserva (chamadas de API, etc.)

Criar a Estrutura Básica do Componente

Comece com a estrutura 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>

Observe: os serviços vêm das props, mas os campos do formulário são estado interno.

Adicionar a Estrutura do Formulário

Construa as seções do formulário:

<!-- 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>

Lidar com o Envio do Formulário

Quando o formulário for enviado, reúna os dados e notifique o pai:

<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>

A prop onsubmit é uma função fornecida pelo pai.

Usar o Componente

Agora use BookingForm em uma 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}

A página controla a lista de serviços e lida com o que acontece após o envio.

Pré-selecionar um Serviço

E se alguém navegar de uma página de serviço para reservar aquele serviço 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" />

O Componente Completo

Aqui está o BookingForm completo com estilização:

<!-- 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>

Resumo

Formulários complexos funcionam bem como componentes. Aceite configuração através de props, gerencie o estado do formulário internamente e comunique o envio por meio de props de callback. Isso mantém as páginas simples e os formulários reutilizáveis.

Principais conclusões:

Props para dados de configuração (lista de serviços)
Estado interno para campos do formulário
Props de callback para eventos (onsubmit)
Resetar o formulário após envio bem-sucedido

Próximos Passos

Vamos criar um componente menor e mais simples. Continue com Criar Componente PriceBadge para aprender sobre props com valores padrão.