Booking API

<div id="booking"></div>
<script type="module">
  const BASE = 'https://<your-workspace>.apros.app';
  const SLUG = 'intro-call';
  const visitorTz = Intl.DateTimeFormat().resolvedOptions().timeZone;

  async function api(path, options = {}) {
    const res = await fetch(BASE + path, {
      ...options,
      headers: { 'Content-Type': 'application/json', ...options.headers },
    });
    const body = await res.json();
    if (!body.success) {
      throw Object.assign(new Error(body.error.message), { code: body.error.code });
    }
    return body.data;
  }

  async function render() {
    const link = await api(`/api/public/booking/${SLUG}`);
    const from = new Date();
    const to = new Date(from.getTime() + 30 * 24 * 60 * 60 * 1000);
    const { slots } = await api(
      `/api/public/booking/${SLUG}/availability?from=${from.toISOString()}&to=${to.toISOString()}`,
    );

    const format = new Intl.DateTimeFormat(link.locale ?? undefined, {
      timeZone: visitorTz,
      dateStyle: 'medium',
      timeStyle: 'short',
      hour12: link.timeFormat === '12h',
    });

    const root = document.getElementById('booking');
    root.replaceChildren();
    for (const slot of slots) {
      const button = document.createElement('button');
      button.textContent = format.format(new Date(slot));
      button.onclick = () => book(slot);
      root.append(button);
    }
  }

  async function book(startAt) {
    try {
      const booking = await api(`/api/public/booking/${SLUG}`, {
        method: 'POST',
        body: JSON.stringify({
          name: 'Ivan Petrenko',
          email: 'ivan@example.com',
          startAt,
          timezone: visitorTz,
        }),
      });
      alert(`Booked. Join the call at ${booking.joinUrl}`);
    } catch (error) {
      if (error.code === 'SLOT_TAKEN') {
        alert('That time was just taken. Please pick another.');
        render();
      } else {
        alert(error.message);
      }
    }
  }

  render();
</script>