unsupervised-scheduler/assets/js/booking.js

/* global usScheduler */
(function () {
    'use strict';

    const app = document.getElementById('us-booking-app');
    if (!app) return;

    const slotList = document.getElementById('us-slot-list');
    const confirm  = document.getElementById('us-booking-confirmation');
    const errorBox = document.getElementById('us-booking-error');
    const { restUrl, nonce } = usScheduler;

    function apiFetch(path, options = {}) {
        return fetch(restUrl + path, {
            ...options,
            headers: {
                'Content-Type': 'application/json',
                'X-WP-Nonce': nonce,
                ...(options.headers || {}),
            },
        }).then(async (res) => {
            const data = await res.json();
            if (!res.ok) throw new Error(data.message || 'Request failed');
            return data;
        });
    }

    function showError(message) {
        errorBox.textContent = message;
        errorBox.style.display = 'block';
    }

    function clearError() {
        errorBox.style.display = 'none';
    }

    function escHtml(str) {
        return String(str)
            .replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

    const dayKey  = (dt) => String(dt).slice(0, 10);
    const timeOf  = (dt) => String(dt).slice(11, 16);

    function dayLabel(key) {
        const date = new Date(key + 'T00:00:00');
        if (Number.isNaN(date.getTime())) return key;
        return date.toLocaleDateString(undefined, {
            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',
        });
    }

    function groupByDay(slots) {
        const groups = new Map();
        slots.forEach((slot) => {
            const key = dayKey(slot.start_dt);
            if (!groups.has(key)) groups.set(key, []);
            groups.get(key).push(slot);
        });
        return [...groups.entries()].sort((a, b) => a[0].localeCompare(b[0]));
    }

    // Agenda-style calendar: available slots grouped by day.
    function renderSlots(slots) {
        if (!slots.length) {
            slotList.innerHTML = '<p>No available lesson slots at this time.</p>';
            return;
        }

        slotList.innerHTML = groupByDay(slots).map(([key, daySlots]) => `
            <div class="us-day">
                <h3 class="us-day-heading">${escHtml(dayLabel(key))}</h3>
                ${daySlots.map((slot) => `
                    <div class="us-slot">
                        <span>${escHtml(timeOf(slot.start_dt))}–${escHtml(timeOf(slot.end_dt))} (${escHtml(String(slot.duration_minutes))} min)</span>
                        <button data-slot-id="${slot.id}" class="us-book-btn">Book</button>
                    </div>
                `).join('')}
            </div>
        `).join('');

        slotList.querySelectorAll('.us-book-btn').forEach((btn) => {
            const slot = slots.find((s) => String(s.id) === btn.dataset.slotId);
            btn.addEventListener('click', () => openRegistration(slot));
        });
    }

    function questionField(q) {
        const name = `q_${q.id}`;
        const required = q.is_required ? 'required' : '';
        let input;
        if (q.field_type === 'textarea') {
            input = `<textarea name="${name}" ${required}></textarea>`;
        } else if (q.field_type === 'select') {
            const opts = (q.options || []).map((o) => `<option value="${escHtml(o)}">${escHtml(o)}</option>`).join('');
            input = `<select name="${name}" ${required}><option value="">—</option>${opts}</select>`;
        } else if (q.field_type === 'checkbox') {
            input = `<input type="checkbox" name="${name}" value="1">`;
        } else {
            input = `<input type="text" name="${name}" ${required}>`;
        }
        return `<p class="us-question"><label>${escHtml(q.label)}<br>${input}</label></p>`;
    }

    function policyField(p) {
        return `
            <div class="us-policy">
                <h4>${escHtml(p.title)}</h4>
                <div class="us-policy-body">${p.body || ''}</div>
                <label><input type="checkbox" class="us-policy-accept" value="${p.policy_version_id}" required> I have read and agree to the ${escHtml(p.title)}.</label>
            </div>`;
    }

    function openRegistration(slot) {
        clearError();

        const offeringId = Number(slot.offering_id) || 0;
        const qPath = offeringId ? `offerings/${offeringId}/questions` : null;

        Promise.all([
            qPath ? apiFetch(qPath) : Promise.resolve([]),
            apiFetch('policies?scope=booking'),
        ])
            .then(([questions, policies]) => {
                renderRegistration(slot, offeringId, questions, policies);
            })
            .catch((err) => showError(err.message));
    }

    function renderRegistration(slot, offeringId, questions, policies) {
        const weekly = slot.recurrence_group
            ? `<p><label><input type="checkbox" id="us-weekly"> Reserve this time weekly for the term</label></p>`
            : '';

        slotList.innerHTML = `
            <div class="us-register">
                <h3>${escHtml(dayLabel(dayKey(slot.start_dt)))} · ${escHtml(timeOf(slot.start_dt))}–${escHtml(timeOf(slot.end_dt))}</h3>
                <form id="us-register-form">
                    ${questions.map(questionField).join('')}
                    ${policies.map(policyField).join('')}
                    ${weekly}
                    <p>
                        <button type="submit" class="us-book-btn">Confirm Booking</button>
                        <button type="button" id="us-cancel" class="us-cancel-btn">Back</button>
                    </p>
                </form>
            </div>`;

        document.getElementById('us-cancel').addEventListener('click', loadSlots);
        document.getElementById('us-register-form').addEventListener('submit', (e) => {
            e.preventDefault();
            submitBooking(e.target, slot, offeringId, questions);
        });
    }

    function submitBooking(form, slot, offeringId, questions) {
        clearError();

        const answers = {};
        questions.forEach((q) => {
            const field = form.elements[`q_${q.id}`];
            if (!field) return;
            answers[q.id] = field.type === 'checkbox' ? (field.checked ? '1' : '0') : field.value;
        });

        const accepted = [...form.querySelectorAll('.us-policy-accept:checked')].map((c) => Number(c.value));
        const weeklyEl = document.getElementById('us-weekly');

        apiFetch('bookings', {
            method: 'POST',
            body: JSON.stringify({
                slot_id: slot.id,
                offering_id: offeringId,
                recurrence: weeklyEl && weeklyEl.checked ? 'weekly' : 'single',
                answers,
                accepted_policy_version_ids: accepted,
            }),
        })
            .then((res) => window.usPayment.collect('lesson', (res.ids || [])[0], slotList))
            .then((result) => showConfirmation(window.usPayment.message(result)))
            .catch((err) => showError(err.message));
    }

    function showConfirmation(message) {
        confirm.textContent = message;
        slotList.style.display = 'none';
        confirm.style.display = 'block';
    }

    function loadSlots() {
        clearError();
        slotList.style.display = 'block';
        confirm.style.display = 'none';
        apiFetch('availability')
            .then(renderSlots)
            .catch((err) => showError(err.message));
    }

    loadSlots();
}());