JavaScript Integration

async function submitContactForm(formData) {
  try {
    const response = await fetch(
      'https://veranta.app/api/v1/clinics/your-clinic/forms/contact',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-API-Key': 'pk_live_your_api_key'
        },
        body: JSON.stringify({
          firstName: formData.firstName,
          lastName: formData.lastName,
          email: formData.email,
          phone: formData.phone,
          message: formData.message,
          gdprConsent: true,
          marketingConsent: formData.marketingConsent || false
        })
      }
    );

    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.error || `HTTP error! status: ${response.status}`);
    }

    const result = await response.json();
    console.log('Submission successful:', result);
    
    // Show success message to user
    alert(`Thank you! Your reference number is: ${result.data.referenceNumber}`);
    
    return result;
  } catch (error) {
    console.error('Submission failed:', error);
    
    // Show error message to user
    if (error.message.includes('429')) {
      alert('Too many submissions. Please try again later.');
    } else {
      alert('Unable to submit form. Please try again.');
    }
    
    throw error;
  }
}

// Example usage
document.getElementById('contact-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const formData = {
    firstName: document.getElementById('firstName').value,
    lastName: document.getElementById('lastName').value,
    email: document.getElementById('email').value,
    phone: document.getElementById('phone').value,
    message: document.getElementById('message').value,
    marketingConsent: document.getElementById('marketing').checked
  };
  
  await submitContactForm(formData);
});

async function submitWithErrorHandling(formData) {
  try {
    const result = await submitContactForm(formData);
    return { success: true, data: result };
  } catch (error) {
    // Parse error response
    let errorMessage = 'An unexpected error occurred';
    let errorDetails = {};
    
    if (error.response) {
      const errorData = await error.response.json();
      errorMessage = errorData.error || errorMessage;
      errorDetails = errorData.details || {};
    }
    
    // Handle specific error cases
    if (error.message.includes('401')) {
      errorMessage = 'API configuration error. Please contact support.';
    } else if (error.message.includes('429')) {
      errorMessage = 'Too many requests. Please wait before trying again.';
    } else if (error.message.includes('400') && errorDetails) {
      // Format validation errors
      const validationErrors = Object.entries(errorDetails)
        .map(([field, message]) => `${field}: ${message}`)
        .join('\n');
      errorMessage = `Please fix the following errors:\n${validationErrors}`;
    }
    
    return { 
      success: false, 
      error: errorMessage,
      details: errorDetails 
    };
  }
}