From e3c2e3e3a1facde293cc35112d3e05c15f7bb827 Mon Sep 17 00:00:00 2001
From: Philip Peterson <1326208+philip-peterson@users.noreply.github.com>
Date: Wed, 3 Jun 2026 20:35:40 -0700
Subject: [PATCH] Add nice non-restrictive phone number input formatting for
 booking
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- New pure-vanilla progressive formatter that turns typed digits into
  (123) 456-7890 (or 1 (800) 555-1212 for +1 numbers) on the fly.
- Works for free-form input: typing, pasting, editing anywhere, backspacing,
  extra chars, etc. — no hard mask or input restrictions.
- Applied to:
  - The Preact <rpt-booking> widget phone field (home page quick booking + details).
  - The final Drupal confirmation form at /schedule/book (via lightweight
    enhancer + .rpt-phone class).
- Prefills last_name / phone / comments on the confirmation form when the
  widget was used to pick the slot (so collected phone isn't lost).
- No new dependencies whatsoever:
  * Zero npm / package.json / composer changes.
  * Zero additional CDN / external scripts (uses native String.replace,
    regex, and input event + selection APIs only).
  * The new js/phone-format.js is simply attached via the pre-existing
    'app' library (already loaded on all riverside_pt.* routes).
  * Formatter logic duplicated in the ESM component (tiny pure function).
- The two other modified files (calendar.css, calendar.js) were left
  uncommitted as they are unrelated to this feature.
---
 .../riverside_pt/js/components/rpt-booking.js | 74 +++++++++++++++----
 .../custom/riverside_pt/js/phone-format.js    | 66 +++++++++++++++++
 .../riverside_pt/riverside_pt.libraries.yml   |  1 +
 .../riverside_pt/src/Form/BookingForm.php     | 22 +++---
 4 files changed, 138 insertions(+), 25 deletions(-)
 create mode 100644 web/modules/custom/riverside_pt/js/phone-format.js

diff --git a/web/modules/custom/riverside_pt/js/components/rpt-booking.js b/web/modules/custom/riverside_pt/js/components/rpt-booking.js
index 3b28a99..7f0bc0e 100644
--- a/web/modules/custom/riverside_pt/js/components/rpt-booking.js
+++ b/web/modules/custom/riverside_pt/js/components/rpt-booking.js
@@ -15,6 +15,23 @@ const CHECK = html`<svg width="14" height="11" viewBox="0 0 14 11" fill="none" x
 
 const EMPTY_FORM = { lastName: "", phone: "", comments: "" };
 
+function formatPhone(raw) {
+  let d = String(raw || "").replace(/\D/g, "");
+  if (d.length === 11 && d[0] === "1") {
+    // NANP with leading 1: show "1 (xxx) xxx-xxxx"
+    const rest = d.slice(1);
+    return "1 (" + rest.slice(0, 3) + ") " + rest.slice(3, 6) + "-" + rest.slice(6);
+  }
+  d = d.slice(0, 10);
+  if (d.length === 0) return "";
+  if (d.length <= 3) return d;
+  if (d.length <= 6) return "(" + d.slice(0, 3) + ") " + d.slice(3);
+  return "(" + d.slice(0, 3) + ") " + d.slice(3, 6) + "-" + d.slice(6);
+}
+
+var selectedDate = null;
+var selectedDateSlots = [];
+
 function localDateStr(d) {
   return d.getFullYear() + "-" +
     String(d.getMonth() + 1).padStart(2, "0") + "-" +
@@ -46,6 +63,7 @@ function Booking({ settings }) {
   const initializedRef = useRef(false);
   const prevServiceRef = useRef(null);
   const autoAdvanceRef = useRef(0);
+  const fetchedRef = useRef(false);
   const initDate = useMemo(nextBusinessDay, []);
 
   function buildEventsUrl(svc) {
@@ -79,34 +97,51 @@ function Booking({ settings }) {
         };
       },
       fixedWeekCount: false,
+      showNonCurrentDates: false,
       height: "auto",
       eventDisplay: "none",
       dayMaxEvents: false,
 
+      loading: function (isLoading) {
+        if (!isLoading) fetchedRef.current = true;
+      },
+
       datesSet: function () {
         calEl.current.querySelectorAll(".fc-daygrid-day.is-selected").forEach(function (d) {
           d.classList.remove("is-selected");
         });
-        setSlots([]);
         setSelectedSlotId(null);
+        if (selectedDate) {
+          var dayEl = calEl.current.querySelector(".fc-daygrid-day[data-date=\"" + selectedDate + "\"]");
+          if (dayEl) {
+            dayEl.classList.add("is-selected");
+            setSlots(selectedDateSlots);
+          } else {
+            setSlots([]);
+          }
+        } else {
+          setSlots([]);
+        }
       },
 
       eventsSet: function (events) {
         markDays(events);
-        if (!initializedRef.current) {
+        if (!initializedRef.current && fetchedRef.current) {
+          fetchedRef.current = false;
           var dates = [...new Set(events.map(function (e) { return e.startStr.substring(0, 10); }))].sort();
           var firstDate = dates[0];
           if (firstDate) {
             initializedRef.current = true;
             autoAdvanceRef.current = 0;
+            var firstSlots = events
+              .filter(function (e) { return e.startStr.startsWith(firstDate); })
+              .sort(function (a, b) { return a.start - b.start; });
+            selectedDate = firstDate;
+            selectedDateSlots = firstSlots;
             var targetEl = calEl.current.querySelector(".fc-daygrid-day[data-date=\"" + firstDate + "\"]");
             if (targetEl) {
               targetEl.classList.add("is-selected");
-              setSlots(
-                events
-                  .filter(function (e) { return e.startStr.startsWith(firstDate); })
-                  .sort(function (a, b) { return a.start - b.start; })
-              );
+              setSlots(firstSlots);
             }
           } else if (autoAdvanceRef.current < 12) {
             autoAdvanceRef.current++;
@@ -126,13 +161,14 @@ function Booking({ settings }) {
           d.classList.remove("is-selected");
         });
         arg.dayEl.classList.add("is-selected");
+        var daySlots = cal.getEvents()
+          .filter(function (e) { return e.startStr.startsWith(arg.dateStr); })
+          .sort(function (a, b) { return a.start - b.start; });
+        selectedDate = arg.dateStr;
+        selectedDateSlots = daySlots;
         setSelectedSlotId(null);
         setSubmitError(null);
-        setSlots(
-          cal.getEvents()
-            .filter(function (e) { return e.startStr.startsWith(arg.dateStr); })
-            .sort(function (a, b) { return a.start - b.start; })
-        );
+        setSlots(daySlots);
       },
     });
 
@@ -147,11 +183,12 @@ function Booking({ settings }) {
 
     var isInitial = prevServiceRef.current === null;
     prevServiceRef.current = service;
-    serviceRef.current = service;
-
     if (!isInitial) {
       initializedRef.current = false;
       autoAdvanceRef.current = 0;
+      fetchedRef.current = false;
+      selectedDate = null;
+      selectedDateSlots = [];
       setSlots([]);
       setSelectedSlotId(null);
       setFormData(EMPTY_FORM);
@@ -291,8 +328,13 @@ function Booking({ settings }) {
               <input
                 type="tel"
                 required
-                value=${formData.phone}
-                onInput=${function (e) { handleFormChange("phone", e.target.value); }}
+                value=${formatPhone(formData.phone)}
+                onInput=${function (e) {
+                  // Compute from the tentative input value (supports free typing/paste/backspace anywhere).
+                  // We store the formatted result so the email and prefill see it nicely displayed.
+                  const next = formatPhone(e.target.value);
+                  handleFormChange("phone", next);
+                }}
                 class=${inputClass}
               />
             </div>
diff --git a/web/modules/custom/riverside_pt/js/phone-format.js b/web/modules/custom/riverside_pt/js/phone-format.js
new file mode 100644
index 0000000..64027e0
--- /dev/null
+++ b/web/modules/custom/riverside_pt/js/phone-format.js
@@ -0,0 +1,66 @@
+(function () {
+  function formatPhone(raw) {
+    let d = String(raw || "").replace(/\D/g, "");
+    if (d.length === 11 && d[0] === "1") {
+      // NANP with leading 1: show "1 (xxx) xxx-xxxx"
+      const rest = d.slice(1);
+      return "1 (" + rest.slice(0, 3) + ") " + rest.slice(3, 6) + "-" + rest.slice(6);
+    }
+    d = d.slice(0, 10);
+    if (d.length === 0) return "";
+    if (d.length <= 3) return d;
+    if (d.length <= 6) return "(" + d.slice(0, 3) + ") " + d.slice(3);
+    return "(" + d.slice(0, 3) + ") " + d.slice(3, 6) + "-" + d.slice(6);
+  }
+
+  function enhancePhoneInput(input) {
+    if (input.dataset.phoneEnhanced) return;
+    input.dataset.phoneEnhanced = "true";
+
+    input.addEventListener("input", function () {
+      const oldValue = input.value;
+      const oldStart = input.selectionStart || 0;
+
+      const formatted = formatPhone(input.value);
+      if (oldValue !== formatted) {
+        input.value = formatted;
+
+        // Try to keep cursor relative to the digit sequence the user was editing.
+        const oldDigitsBefore = (oldValue.slice(0, oldStart).match(/\d/g) || []).length;
+
+        let newPos = 0;
+        let digitsSeen = 0;
+        for (; newPos < formatted.length; newPos++) {
+          if (/\d/.test(formatted[newPos])) {
+            digitsSeen++;
+          }
+          if (digitsSeen >= oldDigitsBefore) {
+            newPos++;
+            break;
+          }
+        }
+        if (newPos > formatted.length) newPos = formatted.length;
+
+        try {
+          input.setSelectionRange(newPos, newPos);
+        } catch (_) {}
+      }
+    });
+
+    // Format any server-provided default value on load (e.g. prefilled from tempstore)
+    if (input.value) {
+      const f = formatPhone(input.value);
+      if (input.value !== f) input.value = f;
+    }
+  }
+
+  function scan() {
+    document.querySelectorAll("input.rpt-phone").forEach(enhancePhoneInput);
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", scan);
+  } else {
+    scan();
+  }
+})();
diff --git a/web/modules/custom/riverside_pt/riverside_pt.libraries.yml b/web/modules/custom/riverside_pt/riverside_pt.libraries.yml
index 7437410..b08f972 100644
--- a/web/modules/custom/riverside_pt/riverside_pt.libraries.yml
+++ b/web/modules/custom/riverside_pt/riverside_pt.libraries.yml
@@ -4,6 +4,7 @@ app:
       css/app.css: {}
   js:
     js/nav.js: {}
+    js/phone-format.js: {}
     js/components/rpt-toggle.js: { attributes: { type: module } }
     js/components/rpt-carousel.js: { attributes: { type: module } }
     js/components/rpt-testimonials.js: { attributes: { type: module } }
diff --git a/web/modules/custom/riverside_pt/src/Form/BookingForm.php b/web/modules/custom/riverside_pt/src/Form/BookingForm.php
index 08a8348..86b75e1 100644
--- a/web/modules/custom/riverside_pt/src/Form/BookingForm.php
+++ b/web/modules/custom/riverside_pt/src/Form/BookingForm.php
@@ -72,21 +72,25 @@ class BookingForm extends FormBase {
     ];
 
     $form['last_name'] = [
-      '#type'     => 'textfield',
-      '#title'    => $this->t('Last name'),
-      '#required' => TRUE,
+      '#type'          => 'textfield',
+      '#title'         => $this->t('Last name'),
+      '#required'      => TRUE,
+      '#default_value' => $slot['last_name'] ?? '',
     ];
 
     $form['phone'] = [
-      '#type'     => 'tel',
-      '#title'    => $this->t('Phone number'),
-      '#required' => TRUE,
+      '#type'          => 'tel',
+      '#title'         => $this->t('Phone number'),
+      '#required'      => TRUE,
+      '#default_value' => $slot['phone'] ?? '',
+      '#attributes'    => ['class' => ['rpt-phone']],
     ];
 
     $form['comments'] = [
-      '#type'  => 'textarea',
-      '#title' => $this->t('Comments'),
-      '#rows'  => 4,
+      '#type'          => 'textarea',
+      '#title'         => $this->t('Comments'),
+      '#rows'          => 4,
+      '#default_value' => $slot['comments'] ?? '',
     ];
 
     $form['actions'] = ['#type' => 'actions'];