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

assets/js/group-classes.js

@@ -152,7 +152,7 @@
                 ${o.instructor_name ? `<p class="us-class-instructor">With ${escHtml(o.instructor_name)}</p>` : ''}
                 ${o.schedule_note ? `<p>${escHtml(o.schedule_note)}</p>` : ''}
                 ${!singleOfferingId && o.description ? `<p>${escHtml(o.description)}</p>` : ''}
-                <p>${escHtml(Number(o.price).toFixed(2))} ${escHtml(o.currency)}</p>
+                <p class="us-class-price">${escHtml(window.usPricing.priceLabel(o))}</p>
                 ${!enrolledMap.has(Number(o.id)) && isEnrollmentOpen(o) && enrolmentDeadline(o)
         ? `<p class="us-enrol-deadline">Enrol by ${escHtml(formatDate(enrolmentDeadline(o)))}</p>`
         : ''}
@@ -204,6 +204,7 @@
                 <form id="us-enrol-form">
                     ${questions.map(questionField).join('')}
                     ${policies.map(policyField).join('')}
+                    ${window.usPricing.summaryHtml(offering)}
                     <p>
                         <button type="submit" class="us-enrol-btn">Confirm Enrolment</button>
                         <button type="button" id="us-group-cancel" class="us-cancel-btn">Back</button>
@@ -214,6 +215,10 @@
         document.getElementById('us-group-cancel').addEventListener('click', loadClasses);
         document.getElementById('us-enrol-form').addEventListener('submit', (e) => {
             e.preventDefault();
+            if (!window.usPricing.agreed(e.target)) {
+                showError(window.usPricing.AGREE_REQUIRED);
+                return;
+            }
             submitEnrolment(e.target, offering, questions);
         });
     }

assets/js/pricing.js

@@ -0,0 +1,145 @@
+/* global usScheduler */
+(function () {
+    'use strict';
+
+    // Cadence wording for each offering billing mode, in the phrasing a student
+    // sees beside a price. Mirrors Offering::VALID_BILLING_MODES.
+    const CADENCE = {
+        one_time: 'at booking',
+        full_term: 'up front',
+        weekly: 'weekly',
+        monthly: 'monthly',
+    };
+
+    // How each cadence is actually collected, spelled out beneath the price so
+    // the one-word cadence is never the only thing a student has to go on.
+    const CADENCE_NOTE = {
+        one_time: 'Charged once, when you book.',
+        full_term: 'Charged once, up front, for the whole term.',
+        weekly: 'Charged for each lesson, 24 hours before it starts.',
+        monthly: 'Charged on the 1st of each month, for that month’s lessons.',
+    };
+
+    // The billing modes whose price is a per-lesson fee billed again and again,
+    // rather than a single charge. Mirrors Offering::SCHEDULED_BILLING_MODES.
+    const RECURRING = ['weekly', 'monthly'];
+
+    function escHtml(str) {
+        return String(str)
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+    }
+
+    function mode(billingMode) {
+        return CADENCE[billingMode] ? billingMode : 'one_time';
+    }
+
+    // "50.00 CAD" — amount then currency code, the format used throughout the
+    // ledger, receipts and payment notices.
+    function money(amount, currency) {
+        return `${(Number(amount) || 0).toFixed(2)} ${String(currency || '')}`.trim();
+    }
+
+    // The studio's HST rate as a percentage, frozen onto every payment at
+    // booking time (comped students are the one exception — they are not taxed).
+    function taxRate() {
+        return Number(usScheduler.taxRate) || 0;
+    }
+
+    // Tax on a pre-tax amount, rounded the same way PaymentService does.
+    function tax(amount) {
+        return Math.round((Number(amount) || 0) * taxRate()) / 100;
+    }
+
+    function total(amount) {
+        return (Number(amount) || 0) + tax(amount);
+    }
+
+    // "50.00 CAD at booking" / "Free" — the catalogue label, always carrying the
+    // cadence so a price is never shown without saying when it is due.
+    function priceLabel(offering) {
+        const price = Number(offering.price) || 0;
+        if (price <= 0) {
+            return 'Free';
+        }
+
+        return `${money(price, offering.currency)} ${CADENCE[mode(offering.billing_mode)]}`;
+    }
+
+    // The price block shown on a booking/enrolment form, followed by the
+    // agreement the student must tick to confirm they will pay it. A free
+    // offering has nothing to agree to, so it renders nothing at all.
+    //
+    // opts: { price, currency, billing_mode, occurrences }
+    // `occurrences` is how many lessons a one-time price is charged for in this
+    // one registration (a weekly reservation claims several at once); it is
+    // ignored for the other modes, whose price is charged per period regardless.
+    function summaryHtml(opts) {
+        const price = Number(opts.price) || 0;
+        if (price <= 0) {
+            return '';
+        }
+
+        const billingMode = mode(opts.billing_mode);
+        const currency    = opts.currency;
+        const each        = total(price);
+        const count       = 'one_time' === billingMode ? Math.max(1, Number(opts.occurrences) || 1) : 1;
+
+        const taxLine = taxRate() > 0
+            ? `<p class="us-price-tax">${escHtml(`Plus ${taxRate()}% HST — ${money(each, currency)}${count > 1 ? ' per lesson' : ''}.`)}</p>`
+            : '';
+
+        return `
+            <div class="us-price">
+                <h4>Price</h4>
+                <p class="us-price-amount">
+                    <strong>${escHtml(money(price, currency))}</strong>
+                    <span class="us-price-cadence">${escHtml(CADENCE[billingMode])}</span>
+                </p>
+                ${taxLine}
+                <p class="us-price-note">${escHtml(count > 1
+                    ? 'Charged once, when you book — for every week reserved.'
+                    : CADENCE_NOTE[billingMode])}</p>
+                <label class="us-price-agree">
+                    <input type="checkbox" class="us-price-accept" required>
+                    ${escHtml(agreeText(each, currency, billingMode, count))}
+                </label>
+            </div>`;
+    }
+
+    // What the student is ticking: the amount actually billed (tax included),
+    // and when. A weekly reservation is charged per lesson for every week it
+    // claims, and the claim can come up short when another student takes one of
+    // the times first — so its total is stated as a ceiling, never a promise.
+    function agreeText(each, currency, billingMode, count) {
+        if (RECURRING.indexOf(billingMode) !== -1) {
+            return `I agree to pay ${money(each, currency)} per lesson, billed ${CADENCE[billingMode]}.`;
+        }
+
+        if (count > 1) {
+            return `I agree to pay ${money(each, currency)} per lesson at booking — `
+                + `up to ${count} lessons, ${money(each * count, currency)} in total.`;
+        }
+
+        return `I agree to pay ${money(each, currency)} ${CADENCE[billingMode]}.`;
+    }
+
+    // Whether the payment agreement has been ticked. A form without one (a free
+    // offering) has nothing outstanding, so it counts as agreed.
+    function agreed(root) {
+        const box = root.querySelector('.us-price-accept');
+
+        return !box || box.checked;
+    }
+
+    // Shared by the booking and group-class flows so a price reads the same
+    // wherever a student meets it.
+    window.usPricing = {
+        priceLabel,
+        summaryHtml,
+        agreed,
+        AGREE_REQUIRED: 'Please confirm you agree to pay the amount shown.',
+    };
+}());