From 0196733be8d63087f33e3ae4a3b259f44af6a7a6 Mon Sep 17 00:00:00 2001
From: Philip Peterson <1326208+philip-peterson@users.noreply.github.com>
Date: Mon, 8 Jun 2026 19:14:22 -0700
Subject: [PATCH] scroll

---
 .../riverside_pt/js/components/rpt-booking.js | 20 +++++++++++++++++--
 web/modules/custom/riverside_pt/js/scroll.js  | 13 ++++++++----
 2 files changed, 27 insertions(+), 6 deletions(-)

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 63cc205..c735f7f 100644
--- a/web/modules/custom/riverside_pt/js/components/rpt-booking.js
+++ b/web/modules/custom/riverside_pt/js/components/rpt-booking.js
@@ -123,6 +123,9 @@ function BookingPanel({ service, settings }) {
   const selectedDateSlotsRef = useRef([]);
   const currentEventsRef = useRef([]);
   const initDate = useMemo(nextBusinessDay, []);
+  const formRef = useRef(null);
+  const prevSlotIdRef = useRef(null);
+  const successRef = useRef(null);
 
   function buildEventsUrl() {
     return settings.eventsUrl + "?service=" + service;
@@ -273,6 +276,19 @@ function BookingPanel({ service, settings }) {
     }
   }, [fetchedEvents]);
 
+  useEffect(function () {
+    if (selectedSlotId && !prevSlotIdRef.current && formRef.current) {
+      window.rptScrollTo(formRef.current, true);
+    }
+    prevSlotIdRef.current = selectedSlotId;
+  }, [selectedSlotId]);
+
+  useEffect(function () {
+    if (success && successRef.current) {
+      window.rptScrollTo(successRef.current, true);
+    }
+  }, [success]);
+
   function handleSlotClick(slot) {
     setSelectedSlotId(slot.id);
     setSubmitError(null);
@@ -373,7 +389,7 @@ function BookingPanel({ service, settings }) {
       </div>
 
       ${!success && selectedSlot ? html`
-        <form onSubmit=${handleSubmit} autocomplete="on" class=${CX.formSection}>
+        <form ref=${formRef} onSubmit=${handleSubmit} autocomplete="on" class=${CX.formSection}>
           <p class=${CX.formHeading}>Your Details</p>
 
           <div class=${CX.formGrid}>
@@ -466,7 +482,7 @@ function BookingPanel({ service, settings }) {
       ` : null}
 
       ${success && confirmedAppointment ? html`
-        <div class=${CX.successSection}>
+        <div ref=${successRef} class=${CX.successSection}>
           <div class=${CX.successBox}>
             <p class=${CX.successTitle}>Request received!</p>
             <div class=${CX.successSummary}>
diff --git a/web/modules/custom/riverside_pt/js/scroll.js b/web/modules/custom/riverside_pt/js/scroll.js
index c9eef26..5e6c731 100644
--- a/web/modules/custom/riverside_pt/js/scroll.js
+++ b/web/modules/custom/riverside_pt/js/scroll.js
@@ -1,5 +1,3 @@
-import zenscroll from "https://esm.sh/zenscroll@4.0.2";
-
 var FIXED_BUFFER = 0; // breathing room below fixed header when menu is closed
 
 // Returns the effective scroll offset to clear the header.
@@ -15,6 +13,13 @@ function headerOffset() {
   return header.offsetHeight + (menuOpen ? 0 : FIXED_BUFFER);
 }
 
+function scrollToEl(el, animate) {
+  var top = Math.max(0, el.getBoundingClientRect().top + window.scrollY - headerOffset());
+  window.scrollTo({ top: top, behavior: animate ? "smooth" : "instant" });
+}
+
+window.rptScrollTo = scrollToEl;
+
 // On load: scroll to the anchor from either the URL hash or drupalSettings
 // (set by the server when rendering the home page at a clean URL like /services).
 document.addEventListener("DOMContentLoaded", function () {
@@ -24,7 +29,7 @@ document.addEventListener("DOMContentLoaded", function () {
   var target = document.querySelector(anchor);
   if (!target) return;
   requestAnimationFrame(function () {
-    zenscroll.toY(Math.max(0, target.getBoundingClientRect().top + window.scrollY - headerOffset()), 0);
+    scrollToEl(target, false);
   });
 });
 
@@ -35,5 +40,5 @@ document.addEventListener("click", function (e) {
   if (!target) return;
   e.preventDefault();
   history.pushState({}, "", link.getAttribute("href"));
-  zenscroll.toY(Math.max(0, target.getBoundingClientRect().top + window.scrollY - headerOffset()), 400);
+  scrollToEl(target, true);
 });