Add group-class enrolment (year commitment, capacity, registration gate)

Implements #4: students enrol in a group_class offering via the same
registration gate as private lessons (intake questions + booking-scoped
policy acceptance). Enrolment is capacity-enforced and prevents duplicates.

- Schema: us_group_enrollments table.
- Enrollment value object + EnrollmentRepository (countActiveForOffering,
  hasActiveEnrollment, per-student/instructor/all-active queries, status).
- EnrollmentEndpoint: GET /enrollments (scoped) and POST /enrollments
  (validates group_class, capacity, no-duplicate; reuses RegistrationGate;
  records answers/acceptances type enrollment).
- GroupClassController + admin page (view_all_lessons): all active enrolments.
- Front-end: [us_group_classes] shortcode (GroupClassPage) + group-classes.js
  enrol flow (list classes -> questions + policies -> POST /enrollments).
- Wiring in Plugin, RestRegistrar, AdminMenu, ShortcodeRegistrar.

Payment is the deferred seam (#7): enrolment lands active, payment_id null.
JS left untested for parity with the repo's no-build vanilla-JS posture.

Tests: tests/Unit/GroupClass/ (Enrollment, EnrollmentRepository).
composer test (121), cs, and PHPStan level 6 all pass.

Refs #4

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

assets/js/group-classes.js

@@ -0,0 +1,162 @@
+/* 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;
+
+    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>`;
+    }
+
+    function renderClasses(offerings) {
+        const groups = offerings.filter((o) => o.kind === 'group_class');
+        if (!groups.length) {
+            list.innerHTML = '<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>
+                ${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>
+                <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,
+            }),
+        })
+            .then(() => {
+                list.style.display = 'none';
+                confirm.style.display = 'block';
+            })
+            .catch((err) => showError(err.message));
+    }
+
+    function loadClasses() {
+        clearError();
+        list.style.display = 'block';
+        confirm.style.display = 'none';
+        apiFetch('offerings?kind=group_class')
+            .then(renderClasses)
+            .catch((err) => showError(err.message));
+    }
+
+    loadClasses();
+}());