From 2e13c0cea0f4df421f79e174dfa01d6d3d46ec1a Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Wed, 15 Apr 2026 00:44:07 -0600
Subject: [PATCH] web issue fixes

---
 web/app/appointments/page.js | 15 +++++++++++++--
 web/app/chat/page.js         |  3 ++-
 web/app/contact/page.js      | 11 ++++++++++-
 web/app/globals.css          |  6 ------
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/web/app/appointments/page.js b/web/app/appointments/page.js
index 78fd3d89..1733fb45 100644
--- a/web/app/appointments/page.js
+++ b/web/app/appointments/page.js
@@ -2,6 +2,7 @@
 
 import dynamic from "next/dynamic";
 import { useState, useEffect, useCallback, useRef } from "react";
+import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useAuth } from "@/context/AuthContext";
 
@@ -339,6 +340,7 @@ function AppointmentsPage() {
   const adoptionStoreName  = searchParams.get("storeName") || "";
 
   const didPreselectRef = useRef(false);
+  const errorRef = useRef(null);
 
   // Adoption-mode URL verification
   const [adoptionVerified, setAdoptionVerified]       = useState(!adoptionMode);
@@ -364,6 +366,12 @@ function AppointmentsPage() {
   const [error, setError] = useState(null);
   const [success, setSuccess] = useState(null);
 
+  useEffect(() => {
+    if (error && errorRef.current) {
+      errorRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }, [error]);
+
   const [appointments, setAppointments] = useState([]);
   const [loadingAppointments, setLoadingAppointments] = useState(false);
 
@@ -779,7 +787,7 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
           <form className="appt-form" onSubmit={handleSubmit}>
             <h2 className="appt-form-title">{adoptionMode ? "New Adoption" : "New Appointment"}</h2>
 
-            {error && <div className="appt-error">{error}</div>}
+            {error && <div className="appt-error" ref={errorRef}>{error}</div>}
 
             {adoptionMode && adoptionVerifyLoading && (
               <p className="appt-loading">Verifying pet details…</p>
@@ -805,7 +813,10 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
               <div className="appt-label">
                 <span>Select Your Pet</span>
                 {eligiblePets.length === 0 ? (
-                  <p className="appt-no-slots">You have no adopted pets available for appointments.</p>
+                  <p className="appt-no-slots">
+                    You have no adopted pets available.{" "}
+                    <Link href="/profile">Add a pet on your profile page.</Link>
+                  </p>
                 ) : (
                   <div className="appt-pets-grid">
                     {eligiblePets.map((p) => (
diff --git a/web/app/chat/page.js b/web/app/chat/page.js
index 4d8d9314..f49be420 100644
--- a/web/app/chat/page.js
+++ b/web/app/chat/page.js
@@ -265,6 +265,7 @@ function ChatPage() {
   const isHuman = conversation?.mode === "HUMAN";
   const hasStaff = !!conversation?.staffId;
   const isClosed = conversation?.status === "CLOSED";
+  const hasStaffMessage = messages.some((m) => m.senderId !== user?.id);
 
   const staffStatusLabel = isClosed
     ? "Conversation closed"
@@ -322,7 +323,7 @@ function ChatPage() {
               </button>
             </div>
 
-            {!hasStaff && !isClosed && (
+            {!hasStaff && !hasStaffMessage && !isClosed && (
               <div style={s.waitingBanner}>
                 <span style={s.waitingSpinner} />
                 A support agent will be with you shortly. You can send messages while you wait.
diff --git a/web/app/contact/page.js b/web/app/contact/page.js
index fa5c04ae..f5da828f 100644
--- a/web/app/contact/page.js
+++ b/web/app/contact/page.js
@@ -2,6 +2,15 @@
 
 import { useState, useEffect } from "react";
 
+function getStoreImage(store) {
+  if (store.imageUrl) return store.imageUrl;
+  const name = store.storeName?.toLowerCase() ?? "";
+  if (name.includes("downtown")) return "/stores/downtown.webp";
+  if (name.includes("north")) return "/stores/north.webp";
+  if (name.includes("west")) return "/stores/west.webp";
+  return "/images/pet-placeholder.png";
+}
+
 export default function ContactPage() {
   const [locations, setLocations] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -52,7 +61,7 @@ export default function ContactPage() {
                 <article key={location.storeId} className="info-mini-card location-card">
                   <div className="location-card-image-wrapper">
                     <img
-                      src={location.imageUrl || "/images/pet-placeholder.png"}
+                      src={getStoreImage(location)}
                       alt={location.storeName}
                       className="location-card-image"
                       onError={(e) => {
diff --git a/web/app/globals.css b/web/app/globals.css
index 2dbbe14a..71632aae 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -12,12 +12,6 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
 
 body {
   background: var(--background);