Let students cancel their own lessons from the booking page

Adds POST /bookings/{id}/cancel (owner-only, idempotent): marks the lesson cancelled, releases the availability slot for rebooking, and voids a still-pending payment so it leaves the admin confirmation queue. Paid payments are untouched — refunds stay a manual admin decision. The instructor PATCH /bookings/{id}/status path now does the same slot release and payment voiding on cancellation (previously cancelled lessons left their slot permanently booked), and reinstating a cancelled lesson re-claims the slot, rejecting with 409 if the freed time was rebooked. The "Your upcoming lessons" panel gets a Cancel button with a confirm prompt; on success both the lesson list and the slot calendar refresh. Co-Authored-By: Claude Fable 5 <[email protected]>
2026-07-05 17:17:30 -03:00
parent 9dd3c39ddd
commit ab90dae638
9 changed files with 263 additions and 4 deletions
@@ -306,10 +306,27 @@
                ${upcoming.map((l) => `
                    <div class="us-my-lesson">
                        <span>${escHtml(dayLabel(dayKey(l.start_dt)))} · ${escHtml(timeOf(l.start_dt))}–${escHtml(timeOf(l.end_dt))}</span>
-                        <span class="us-lesson-status us-lesson-status-${escHtml(String(l.status))}">${escHtml(lessonStatusLabel(String(l.status)))}</span>
+                        <span class="us-my-lesson-actions">
+                            <span class="us-lesson-status us-lesson-status-${escHtml(String(l.status))}">${escHtml(lessonStatusLabel(String(l.status)))}</span>
+                            <button type="button" class="us-cancel-lesson" data-lesson-id="${l.id}">Cancel</button>
+                        </span>
                    </div>
                `).join('')}
            </div>`;
+
+        myLessons.querySelectorAll('.us-cancel-lesson').forEach((btn) => {
+            btn.addEventListener('click', () => cancelLesson(Number(btn.dataset.lessonId)));
+        });
+    }
+
+    function cancelLesson(id) {
+        if (!window.confirm('Cancel this lesson? The time will be released for other students.')) {
+            return;
+        }
+        clearError();
+        apiFetch(`bookings/${id}/cancel`, { method: 'POST' })
+            .then(loadSlots)
+            .catch((err) => showError(err.message));
    }

    function loadMyLessons() {