2026-04-15 00:49:04 -06:00
9 changed files with 169 additions and 21 deletions
--- a/backend/src/main/java/com/petshop/backend/controller/ContactController.java
+++ b/backend/src/main/java/com/petshop/backend/controller/ContactController.java
@@ -0,0 +1,40 @@
+package com.petshop.backend.controller;
+
+import com.petshop.backend.entity.User;
+import com.petshop.backend.repository.UserRepository;
+import com.petshop.backend.service.EmailService;
+import com.petshop.backend.util.AuthenticationHelper;
+import jakarta.validation.Valid;
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.Size;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+@RestController
+@RequestMapping("/api/v1/contact")
+public class ContactController {
+
+    private final EmailService emailService;
+    private final UserRepository userRepository;
+
+    public ContactController(EmailService emailService, UserRepository userRepository) {
+        this.emailService = emailService;
+        this.userRepository = userRepository;
+    }
+
+    public record ContactRequest(
+        @NotBlank @Size(max = 150) String subject,
+        @NotBlank @Size(max = 2000) String body
+    ) {}
+
+    @PostMapping
+    public ResponseEntity<Void> sendContactEmail(@Valid @RequestBody ContactRequest req) {
+        Long userId = AuthenticationHelper.getAuthenticatedUserId();
+        User user = userRepository.findById(userId).orElseThrow();
+        emailService.sendContactMessage(user, req.subject(), req.body());
+        return ResponseEntity.ok().build();
+    }
+}
--- a/backend/src/main/java/com/petshop/backend/service/EmailService.java
+++ b/backend/src/main/java/com/petshop/backend/service/EmailService.java
@@ -129,6 +129,19 @@ public class EmailService {
        }
    }

+    public void sendContactMessage(User user, String subject, String body) {
+        if (user.getEmail() == null || user.getEmail().isBlank()) return;
+        String html = """
+                <div style="font-family:sans-serif;max-width:600px;margin:auto">
+                  <h2>Contact form message</h2>
+                  <p><strong>From:</strong> %s (%s)</p>
+                  <p><strong>Subject:</strong> %s</p>
+                  <hr/>
+                  <p style="white-space:pre-wrap">%s</p>
+                </div>""".formatted(esc(firstName(user)), esc(user.getEmail()), esc(subject), esc(body));
+        send(user.getId(), user.getEmail(), "Contact: " + subject, html);
+    }
+
    public void sendChatTranscript(Conversation conversation, List<Message> messages, User customer) {
        if (customer == null || customer.getEmail() == null || customer.getEmail().isBlank()) return;
        String subject = "Your PetShop support transcript";
--- 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);

@@ -425,12 +433,12 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
    })
      .then((r) => r.json())
      .then(setStores)
-      .catch(() => {});
+      .catch(() => setError("Failed to load stores."));

    fetch(`${API_BASE}/api/v1/services?size=100`)
      .then((r) => r.json())
      .then((data) => setServices(data.content ?? []))
-      .catch(() => {});
+      .catch(() => setError("Failed to load services."));

    fetch(`${API_BASE}/api/v1/pets?size=200&sort=id,asc&status=Available`)
      .then((r) => r.json())
@@ -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) => (
--- a/web/app/cart/page.js
+++ b/web/app/cart/page.js
@@ -43,6 +43,9 @@ function PaymentForm({ clientSecret, totalAmount, onSuccess, onCancel }) {
      try {
        await apiCompleteCheckout(token, paymentIntentId);
      } catch {
+        setPayError("Order confirmation failed. Please contact support.");
+        setPaying(false);
+        return;
      }
      onSuccess();
    }
--- a/web/app/chat/page.js
+++ b/web/app/chat/page.js
@@ -57,7 +57,7 @@ function ChatPage() {
    } 
    
    catch {
-      //Silent fail
+      setError("Failed to load messages.");
    }
  }, [token]);

@@ -139,7 +139,7 @@ function ChatPage() {
            if (open) convId = open.id;
          }
        } catch {
-          //
+          setError("Failed to load conversations.");
        }
      }

@@ -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.
--- a/web/app/contact/page.js
+++ b/web/app/contact/page.js
@@ -1,12 +1,29 @@
 "use client";

 import { useState, useEffect } from "react";
+import { useAuth } from "@/context/AuthContext";
+
+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 { token } = useAuth();
  const [locations, setLocations] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

+  const [subject, setSubject] = useState("");
+  const [body, setBody] = useState("");
+  const [sending, setSending] = useState(false);
+  const [sendError, setSendError] = useState(null);
+  const [sendSuccess, setSendSuccess] = useState(false);
+
  useEffect(() => {
    const params = new URLSearchParams({ page: "0", size: "100", sort: "storeName,asc" });
    fetch(`/api/v1/stores?${params}`)
@@ -19,6 +36,27 @@ export default function ContactPage() {
      .finally(() => setLoading(false));
  }, []);

+  async function handleSend(e) {
+    e.preventDefault();
+    setSending(true);
+    setSendError(null);
+    try {
+      const res = await fetch("/api/v1/contact", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
+        body: JSON.stringify({ subject, body }),
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      setSendSuccess(true);
+      setSubject("");
+      setBody("");
+    } catch (err) {
+      setSendError("Failed to send message. Please try again.");
+    } finally {
+      setSending(false);
+    }
+  }
+
  return (
    <main className="info-page">
      <section className="info-hero">
@@ -30,11 +68,49 @@ export default function ContactPage() {
      <section className="info-content">
        <div className="info-card">
          <h2>General Contact</h2>
-          <p>Email: support@petshop.com</p>
-          <p>Phone: (000) 000-0000</p>
+          <p>Email: hello@leonspetstore.com.au</p>
+          <p>Phone: (03) 9000 0000</p>
          <p>Hours: Mon–Sat, 9:00 AM – 6:00 PM</p>
        </div>

+        {token && (
+          <div className="info-card">
+            <h2>Send Us a Message</h2>
+            {sendSuccess ? (
+              <p className="contact-success">Your message has been sent. We&apos;ll be in touch soon.</p>
+            ) : (
+              <form className="contact-form" onSubmit={handleSend}>
+                <label className="contact-label">
+                  Subject
+                  <input
+                    className="contact-input"
+                    type="text"
+                    value={subject}
+                    onChange={(e) => setSubject(e.target.value)}
+                    required
+                    maxLength={150}
+                  />
+                </label>
+                <label className="contact-label">
+                  Message
+                  <textarea
+                    className="contact-textarea"
+                    value={body}
+                    onChange={(e) => setBody(e.target.value)}
+                    required
+                    maxLength={2000}
+                    rows={6}
+                  />
+                </label>
+                {sendError && <p className="contact-error">{sendError}</p>}
+                <button className="contact-submit-btn" type="submit" disabled={sending}>
+                  {sending ? "Sending…" : "Send Message"}
+                </button>
+              </form>
+            )}
+          </div>
+        )}
+
        <div className="info-card">
          <h2>Store Locations</h2>

@@ -52,7 +128,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) => {
--- 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);
@@ -2927,3 +2921,13 @@ html, body {
 img, video, iframe {
  max-width: 100%;
 }
+
+.contact-form { display: flex; flex-direction: column; gap: 1rem; }
+.contact-label { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 500; color: #333; font-size: 0.95rem; }
+.contact-input, .contact-textarea { border: 1px solid #ddd; border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.95rem; font-family: inherit; resize: vertical; }
+.contact-input:focus, .contact-textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }
+.contact-submit-btn { align-self: flex-start; background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: 0.65rem 1.4rem; font-size: 0.95rem; cursor: pointer; }
+.contact-submit-btn:hover:not(:disabled) { background: #1d4ed8; }
+.contact-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+.contact-error { color: #c0392b; font-size: 0.9rem; }
+.contact-success { color: #166534; background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 8px; padding: 0.75rem 1rem; }
--- a/web/app/register/page.js
+++ b/web/app/register/page.js
@@ -135,6 +135,8 @@ function RegisterPage() {
              value={form.phone}
              onChange={handleChange}
              required
+              pattern="[0-9\-\+\(\) ]{7,15}"
+              title="Enter a valid phone number"
            />
          </label>

@@ -161,6 +163,7 @@ function RegisterPage() {
              value={form.confirmPassword}
              onChange={handleChange}
              required
+              minLength={6}
              autoComplete="new-password"
            />
          </label>
--- a/web/components/Navigation.js
+++ b/web/components/Navigation.js
@@ -15,14 +15,11 @@ export default function DisplayNav() {
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
-    if (!token) return;
-    fetch("/api/v1/stores?size=100", {
-      headers: { Authorization: `Bearer ${token}` },
-    })
+    fetch("/api/v1/stores?size=100")
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => { if (data) setStores(data.content ?? []); })
      .catch(() => {});
-  }, [token]);
+  }, []);

  function handleLogout() {
    logout();