Return to a bookable calendar after a booking is confirmed

showConfirmation() hid the slot list and put the confirmation in its place, which is a dead end: a student wanting a second lesson had nothing to click and no way back short of reloading the page. Enrolling in a group class did the same thing. The confirmation is now a dismissible notice above the calendar. The calendar is reloaded first — so the slot just taken is already gone and the upcoming-lessons panel is current — and the notice is shown over it, which is why loadSlots() had to start returning its promise. "It worked" and "book another" are the same screen. The notice clears when dismissed, when another slot's form is opened, and on any reload of the calendar. group-classes.js gets the identical treatment. It is built from DOM nodes rather than innerHTML because the message can carry a studio's e-transfer address, and it is toggled with the `hidden` attribute rather than an inline display — an inline style would outrank the stylesheet's display:flex and stack the notice's parts. `hidden` needs the !important guard for the same reason the upcoming-lessons panel does: the div{display:block} theme reset outranks the UA sheet. The slotList/list `display = 'block'` lines went with it. Nothing hides those any more, so restoring them each load only implied otherwise. Verified in a headless browser against a stubbed REST API: booking twice in a row without a reload, the booked slot leaving the calendar, the upcoming panel updating, dismissal, the notice clearing when the next form opens, and the notice staying hidden under div{display:block}. Closes #143 Co-Authored-By: Claude Opus 5 <[email protected]>
2026-07-29 22:57:16 -03:00
parent 1b42d20541
commit 699e479805
7 changed files with 154 additions and 25 deletions
@@ -21,12 +21,17 @@ $studentsJson = wp_json_encode(array_values($students));
    <div id="us-my-lessons"></div>
    <?php endif; ?>
    <?php if ($showBooking) : ?>
+    <?php
+    /*
+     * Above the calendar, because it reports on what the student just did and
+     * the calendar below it is what they do next. Filled and shown by
+     * booking.js; empty and hidden until then.
+     */
+    ?>
+    <div id="us-booking-confirmation" class="us-notice" role="status" aria-live="polite" hidden></div>
    <div id="us-slot-list">
        <p><?php esc_html_e('Loading available slots…', 'unsupervised-schedular'); ?></p>
    </div>
-    <div id="us-booking-confirmation" style="display:none;">
-        <p><?php esc_html_e('Your lesson has been booked. The instructor will confirm shortly.', 'unsupervised-schedular'); ?></p>
-    </div>
    <?php endif; ?>
    <div id="us-booking-error" style="display:none;" role="alert"></div>
 </div>