Show price cadence and require a pay agreement at booking

Every price a student meets on the front end now carries the cadence it is
billed on — at booking, up front, weekly, monthly — so a bare amount can no
longer read as a one-off when it is a recurring charge.

Both registration forms then restate the price and require a second, separate
tick agreeing to pay it, distinct from the policy acceptances above it. The
agreed figure includes the studio HST so it matches Payment::total(), the amount
actually billed; the rate reaches the browser as a new localized `taxRate`.

A weekly reservation is charged per lesson for every week it claims, and a week
another student takes first is simply not claimed, so its total is quoted as a
ceiling ("up to 12 lessons") rather than a promise. Free offerings have nothing
to agree to and show no price block at all.

The formatting and the agreement live in one shared helper (`window.usPricing`,
registered as `us-scheduler-pricing`) so a price reads the same in the booking
form, the class catalogue and the editor preview.

Closes #124

Co-Authored-By: Claude Opus 5 <[email protected]>

assets/js/booking.js

@@ -360,13 +360,27 @@
             </div>`;
     }
 
-    // "Piano Lesson (60 min — $50.00 CAD)" / "Trial Lesson (Free)"
+    // "Piano Lesson (60 min — 50.00 CAD at booking)" / "Trial Lesson (Free)"
     function offeringLabel(o) {
         const duration = o.duration_minutes ? `${o.duration_minutes} min — ` : '';
-        const price = Number(o.price) > 0
-            ? `$${Number(o.price).toFixed(2)} ${o.currency}`
-            : 'Free';
-        return `${o.title} (${duration}${price})`;
+        return `${o.title} (${duration}${window.usPricing.priceLabel(o)})`;
+    }
+
+    // How many lessons a weekly reservation can claim, mirroring
+    // BookingEndpoint::MAX_WEEKLY_OCCURRENCES so the quoted total is never
+    // higher than the server will actually charge for.
+    const MAX_WEEKLY_OCCURRENCES = 12;
+
+    // The open times a weekly reservation of this slot would claim: every
+    // still-unbooked slot of its recurring group, capped the way the server
+    // caps it. Some may be taken by another student first, so this is the
+    // upper bound on what will be booked, not a guarantee.
+    function weeklyOccurrences(slot) {
+        if (!slot.recurrence_group) return 1;
+
+        const inGroup = allSlots.filter((s) => s.recurrence_group === slot.recurrence_group).length;
+
+        return Math.min(Math.max(inGroup, 1), MAX_WEEKLY_OCCURRENCES);
     }
 
     function openRegistration(slot) {
@@ -443,6 +457,7 @@
                     <div id="us-questions"></div>
                     ${policies.map(policyField).join('')}
                     ${weekly}
+                    <div id="us-price-summary"></div>
                     <p>
                         <button type="submit" class="us-book-btn">Confirm Booking</button>
                         <button type="button" id="us-cancel" class="us-cancel-btn">Back</button>
@@ -458,6 +473,26 @@
         let questions  = [];
 
         const questionsBox = document.getElementById('us-questions');
+        const priceBox     = document.getElementById('us-price-summary');
+        const weeklyEl     = document.getElementById('us-weekly');
+
+        // What the booking will cost and the agreement to pay it, restated
+        // whenever the choices that decide the amount change: the lesson type
+        // carries the price, and a weekly reservation multiplies a per-lesson
+        // one-time price by every week it claims. A slot tied to a type the
+        // catalog no longer carries has no price to quote, so it shows nothing
+        // rather than a figure it cannot stand behind.
+        function renderPrice() {
+            const offering = selectedId ? catalog.find((o) => Number(o.id) === selectedId) : null;
+            priceBox.innerHTML = offering
+                ? window.usPricing.summaryHtml({
+                    price: offering.price,
+                    currency: offering.currency,
+                    billing_mode: offering.billing_mode,
+                    occurrences: weeklyEl && weeklyEl.checked ? weeklyOccurrences(slot) : 1,
+                })
+                : '';
+        }
 
         function loadQuestions() {
             questions = [];
@@ -475,10 +510,14 @@
             document.getElementById('us-offering').addEventListener('change', (e) => {
                 selectedId = Number(e.target.value) || 0;
                 loadQuestions();
+                renderPrice();
             });
         }
 
+        if (weeklyEl) weeklyEl.addEventListener('change', renderPrice);
+
         loadQuestions();
+        renderPrice();
 
         document.getElementById('us-cancel').addEventListener('click', loadSlots);
         document.getElementById('us-register-form').addEventListener('submit', (e) => {
@@ -487,6 +526,10 @@
                 showError('Please choose a lesson type.');
                 return;
             }
+            if (!window.usPricing.agreed(e.target)) {
+                showError(window.usPricing.AGREE_REQUIRED);
+                return;
+            }
             submitBooking(e.target, slot, selectedId, questions);
         });
     }