Vue.js / Nuxt Integration

<template>
  <form @submit.prevent="handleSubmit" class="space-y-4">
    <div v-if="successMessage" class="alert alert-success">
      {{ successMessage }}
      <p class="text-sm">Reference: {{ referenceNumber }}</p>
    </div>

    <div v-if="errorMessage" class="alert alert-error">
      {{ errorMessage }}
    </div>

    <div class="form-group">
      <label for="firstName">First Name *</label>
      <input
        id="firstName"
        v-model="form.firstName"
        type="text"
        required
        :disabled="isSubmitting"
        class="form-input"
      />
    </div>

    <div class="form-group">
      <label for="lastName">Last Name *</label>
      <input
        id="lastName"
        v-model="form.lastName"
        type="text"
        required
        :disabled="isSubmitting"
        class="form-input"
      />
    </div>

    <div class="form-group">
      <label for="email">Email *</label>
      <input
        id="email"
        v-model="form.email"
        type="email"
        required
        :disabled="isSubmitting"
        class="form-input"
      />
    </div>

    <div class="form-group">
      <label for="phone">Phone</label>
      <input
        id="phone"
        v-model="form.phone"
        type="tel"
        :disabled="isSubmitting"
        class="form-input"
      />
    </div>

    <div class="form-group">
      <label for="message">Message *</label>
      <textarea
        id="message"
        v-model="form.message"
        required
        rows="4"
        :disabled="isSubmitting"
        class="form-textarea"
      ></textarea>
    </div>

    <div class="form-group">
      <label class="checkbox-label">
        <input
          v-model="form.gdprConsent"
          type="checkbox"
          required
          :disabled="isSubmitting"
        />
        I agree to the privacy policy *
      </label>
    </div>

    <div class="form-group">
      <label class="checkbox-label">
        <input
          v-model="form.marketingConsent"
          type="checkbox"
          :disabled="isSubmitting"
        />
        I would like to receive marketing communications
      </label>
    </div>

    <button
      type="submit"
      :disabled="isSubmitting"
      class="btn btn-primary"
    >
      {{ isSubmitting ? 'Sending...' : 'Send Message' }}
    </button>
  </form>
</template>

<script setup>
import { ref, reactive } from 'vue'

// Configuration
const API_KEY = import.meta.env.VITE_CLINIC_API_KEY
const CLINIC_ID = import.meta.env.VITE_CLINIC_ID
const API_URL = import.meta.env.VITE_VERANTA_API_URL || 'https://veranta.app/api/v1'

// Form state
const form = reactive({
  firstName: '',
  lastName: '',
  email: '',
  phone: '',
  message: '',
  gdprConsent: false,
  marketingConsent: false
})

const isSubmitting = ref(false)
const successMessage = ref('')
const errorMessage = ref('')
const referenceNumber = ref('')

// Submit handler
const handleSubmit = async () => {
  isSubmitting.value = true
  successMessage.value = ''
  errorMessage.value = ''

  try {
    const response = await fetch(
      `${API_URL}/clinics/${CLINIC_ID}/forms/contact`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-API-Key': API_KEY
        },
        body: JSON.stringify({
          firstName: form.firstName,
          lastName: form.lastName,
          email: form.email,
          phone: form.phone,
          message: form.message,
          gdprConsent: form.gdprConsent,
          marketingConsent: form.marketingConsent
        })
      }
    )

    const data = await response.json()

    if (!response.ok) {
      throw new Error(data.error || 'Submission failed')
    }

    // Success
    successMessage.value = 'Thank you for your message. We will contact you soon!'
    referenceNumber.value = data.data.referenceNumber

    // Reset form
    Object.keys(form).forEach(key => {
      form[key] = typeof form[key] === 'boolean' ? false : ''
    })

  } catch (error) {
    console.error('Submission error:', error)
    errorMessage.value = error.message || 'Unable to send message. Please try again.'
  } finally {
    isSubmitting.value = false
  }
}
</script>