unsupervised-scheduler/assets/js/group-classes.js

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

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

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

    // When the shortcode/block pins a single offering, only that class is
    // shown, so the page can be embedded alongside a full class description.
    const singleOfferingId = Number(app.dataset.offering || 0);

    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;');
    }

    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>`;
    }

    // Parse a Y-m-d date into local time; new Date('Y-m-d') would parse as
    // UTC midnight and can display as the previous day in western timezones.
    function formatDate(ymd) {
        const [y, m, d] = ymd.split('-').map(Number);
        return new Date(y, m - 1, d).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
    }

    function termLabel(o) {
        if (!o.term_start) return '';
        if (!o.term_end || o.term_end === o.term_start) {
            return formatDate(o.term_start);
        }
        const weekMs = 7 * 24 * 60 * 60 * 1000;
        const sessions = Math.round((new Date(o.term_end) - new Date(o.term_start)) / weekMs) + 1;
        return `${formatDate(o.term_start)} – ${formatDate(o.term_end)} (${sessions} weekly sessions)`;
    }

    // Format a stored H:i(:s) class time as a friendly local-clock label.
    function timeLabel(o) {
        if (!o.class_time) return '';
        const [h, m] = o.class_time.split(':').map(Number);
        const d = new Date();
        d.setHours(h, m, 0, 0);
        return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
    }

    // The "when" line combines the date (or date range) with the class time.
    function whenLabel(o) {
        return [termLabel(o), timeLabel(o)].filter(Boolean).join(' · ');
    }

    function renderClasses(offerings, enrolledOfferingIds) {
        let groups = offerings.filter((o) => o.kind === 'group_class');
        if (singleOfferingId) {
            groups = groups.filter((o) => Number(o.id) === singleOfferingId);
        }
        if (!groups.length) {
            list.innerHTML = singleOfferingId
                ? '<p>This class is not open for enrolment right now.</p>'
                : '<p>No group classes are open for enrolment right now.</p>';
            return;
        }

        list.innerHTML = groups.map((o) => `
            <div class="us-class">
                <h3>${escHtml(o.title)}</h3>
                ${whenLabel(o) ? `<p class="us-class-when">${escHtml(whenLabel(o))}</p>` : ''}
                ${o.instructor_name ? `<p class="us-class-instructor">With ${escHtml(o.instructor_name)}</p>` : ''}
                ${o.schedule_note ? `<p>${escHtml(o.schedule_note)}</p>` : ''}
                ${o.description ? `<p>${escHtml(o.description)}</p>` : ''}
                <p>${escHtml(Number(o.price).toFixed(2))} ${escHtml(o.currency)}</p>
                ${enrolledOfferingIds.has(Number(o.id))
        ? '<p class="us-enrolled"><strong>You are enrolled in this class.</strong></p>'
        : `<button data-offering-id="${o.id}" class="us-enrol-btn">Enrol</button>`}
            </div>
        `).join('');

        list.querySelectorAll('.us-enrol-btn').forEach((btn) => {
            const offering = groups.find((o) => String(o.id) === btn.dataset.offeringId);
            btn.addEventListener('click', () => openEnrolment(offering));
        });
    }

    function openEnrolment(offering) {
        clearError();
        Promise.all([
            apiFetch(`offerings/${offering.id}/questions`),
            apiFetch('policies?scope=booking'),
        ])
            .then(([questions, policies]) => renderEnrolment(offering, questions, policies))
            .catch((err) => showError(err.message));
    }

    function renderEnrolment(offering, questions, policies) {
        list.innerHTML = `
            <div class="us-register">
                <h3>${escHtml(offering.title)}</h3>
                <form id="us-enrol-form">
                    ${questions.map(questionField).join('')}
                    ${policies.map(policyField).join('')}
                    <p>
                        <button type="submit" class="us-enrol-btn">Confirm Enrolment</button>
                        <button type="button" id="us-group-cancel" class="us-cancel-btn">Back</button>
                    </p>
                </form>
            </div>`;

        document.getElementById('us-group-cancel').addEventListener('click', loadClasses);
        document.getElementById('us-enrol-form').addEventListener('submit', (e) => {
            e.preventDefault();
            submitEnrolment(e.target, offering, questions);
        });
    }

    function submitEnrolment(form, offering, 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));

        apiFetch('enrollments', {
            method: 'POST',
            body: JSON.stringify({
                offering_id: offering.id,
                answers,
                accepted_policy_version_ids: accepted,
            }),
        })
            // An enrolment with nothing owed has no payment, so there is no
            // payment step to run.
            .then((res) => (res.payment
                ? window.usPayment.collect('enrollment', res.id, list)
                : null))
            .then((result) => showConfirmation(window.usPayment.message(result)))
            .catch((err) => showError(err.message));
    }

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

    function loadClasses() {
        clearError();
        list.style.display = 'block';
        confirm.style.display = 'none';
        // The student's own enrolments are fetched alongside the catalog so a
        // class they already have an active enrolment in shows its status
        // instead of offering to enrol them again (the API would reject the
        // duplicate anyway). A cancelled enrolment does not block re-enrolling.
        Promise.all([
            apiFetch('offerings?kind=group_class'),
            apiFetch('enrollments'),
        ])
            .then(([offerings, enrollments]) => renderClasses(
                offerings,
                new Set(enrollments
                    .filter((e) => e.status === 'active')
                    .map((e) => Number(e.offering_id)))
            ))
            .catch((err) => showError(err.message));
    }

    loadClasses();
}());