Enquiries

{
  "name": "Jane Nakato",
  "phone": "+256700000000",
  "email": "[email protected]",
  "subject": "Senior 1 places for 2027",
  "message": "Do you have space for a day scholar?",
  "class": "Senior 1",
  "type": "enquiry"
}

curl "$NAALYA_API/api/v1/enquiry" \
  -H "X-API-Key: $NAALYA_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"name":"Jane Nakato","phone":"+256700000000","subject":"Senior 1 places","message":"Do you have space for a day scholar?"}'

{
  "id": "6b1f0e7e-2d7a-4a13-9d3c-0f1b2a3c4d5e",
  "reference": "ENQ_7K2PQ"
}

import { useState } from 'react'

const NAALYA_API = 'https://api.example' // the base URL from the Overview page
const API_KEY = 'sk_nly_...' // a publishable key, created in the Hub

export function EnquiryForm() {
  const [state, setState] = useState<'idle' | 'sending' | 'sent' | 'failed'>(
    'idle',
  )
  const [reference, setReference] = useState('')

  async function submit(form: FormData) {
    setState('sending')
    const res = await fetch(`${NAALYA_API}/api/v1/enquiry`, {
      method: 'POST',
      headers: { 'content-type': 'application/json', 'x-api-key': API_KEY },
      body: JSON.stringify({
        name: form.get('name'),
        phone: form.get('phone'),
        email: form.get('email') || undefined,
        subject: form.get('subject'),
        message: form.get('message'),
        type: 'enquiry',
      }),
    })
    if (!res.ok) return setState('failed')
    const enquiry = await res.json()
    setReference(enquiry.reference)
    setState('sent')
  }

  if (state === 'sent') return <p>Thank you. Your reference is {reference}.</p>

  return (
    <form action={submit}>
      <input name="name" placeholder="Your name" required />
      <input name="phone" placeholder="Phone number" required />
      <input name="email" type="email" placeholder="Email (optional)" />
      <input name="subject" placeholder="Subject" required />
      <textarea name="message" placeholder="Your message" required />
      <button disabled={state === 'sending'}>Send</button>
      {state === 'failed' && <p>Something went wrong. Please try again.</p>}
    </form>
  )
}