Submit a form with a Callout

{
  "payload": {
    "subject": "Unable to access the sandbox API",
    "description": "My test request returns an authorization error."
  }
}

{
  "id": "REQ-123"
}

{{ $user := CurrentUser req }}
<div class="container">
  <h1>{{ .page.Title }}</h1>
  {{ if not $user }}
    <p>Log in to submit a support request.</p>
  {{ else if not .calloutAction }}
    <p>The support request form is unavailable.</p>
  {{ else }}
    <form id="support-request" action="{{ .calloutAction }}" method="post">
      <div class="form-group">
        <label for="subject">Subject</label>
        <input class="form-control" id="subject" name="subject" required>
      </div>
      <div class="form-group">
        <label for="description">Description</label>
        <textarea class="form-control" id="description" name="description" required></textarea>
      </div>
      <button class="btn btn-primary" type="submit">Submit request</button>
    </form>
    <p id="submission-result" role="status" aria-live="polite"></p>
    <script src="/assets/javascripts/support-request.js" defer></script>
  {{ end }}
</div>

{
  "name": "Support Request",
  "template": "support_request",
  "layout": "portal_layout"
}

const form = document.getElementById('support-request');

if (form) {
  const output = document.getElementById('submission-result');
  const button = form.querySelector('button[type="submit"]');

  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
    if (!csrfToken) {
      output.textContent = 'Refresh the page before submitting.';
      return;
    }

    button.disabled = true;
    output.textContent = 'Submitting request...';
    let requestID = '';

    try {
      const response = await fetch(form.action, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
          Accept: 'application/json',
          'X-CSRF-Token': csrfToken,
        },
        body: new URLSearchParams(new FormData(form)),
      });
      requestID = response.headers.get('X-Callout-Request-ID') || '';

      if (!(response.headers.get('Content-Type') || '').includes('application/json')) {
        throw new Error('Unexpected response. Refresh the page and sign in if prompted. Contact support before submitting again.');
      }

      const result = await response.json();
      if (!response.ok || result.ok !== true) {
        throw new Error('The request was not confirmed. Contact support before submitting again.');
      }

      const recordID = result.data?.id;
      output.textContent = recordID
        ? `Request created: ${recordID}.`
        : 'Request completed.';
      form.reset();
    } catch (error) {
      output.textContent = error instanceof TypeError
        ? 'The result is unknown. Check your connection and contact support before submitting again.'
        : error.message;
    } finally {
      if (requestID) output.textContent += ` Reference: ${requestID}`;
      button.disabled = false;
    }
  });
}