From a8e03cbf4c0978d972941be95dde63d5e24e0472 Mon Sep 17 00:00:00 2001
From: "groombook-ci[bot]" <ci@groombook.bot>
Date: Sun, 29 Mar 2026 12:39:52 +0000
Subject: [PATCH] fix(book): pre-fill form from URL params to ensure React
 state is set

Add useSearchParams to read URL parameters (e.g., ?clientName=Jane)
and sync them to the BookingBody state on mount via useEffect.
This ensures validation checks React state, not empty initial state.

Fixes GRO-255

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 apps/web/src/pages/Book.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/apps/web/src/pages/Book.tsx b/apps/web/src/pages/Book.tsx
index 0e0710d..33df3a8 100644
--- a/apps/web/src/pages/Book.tsx
+++ b/apps/web/src/pages/Book.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
 import type { Service } from "@groombook/types";
 
 // ─── Types ───────────────────────────────────────────────────────────────────
@@ -125,6 +126,28 @@ export function BookPage() {
   });
   const [formError, setFormError] = useState<string | null>(null);
 
+  // Pre-fill form from URL params (e.g., ?clientName=Jane&clientEmail=jane@example.com)
+  const [searchParams] = useSearchParams();
+  useEffect(() => {
+    const clientName = searchParams.get("clientName");
+    const clientEmail = searchParams.get("clientEmail");
+    const clientPhone = searchParams.get("clientPhone");
+    const petName = searchParams.get("petName");
+    const petSpecies = searchParams.get("petSpecies");
+    const petBreed = searchParams.get("petBreed");
+    if (clientName || clientEmail || clientPhone || petName || petSpecies || petBreed) {
+      setForm((f) => ({
+        ...f,
+        ...(clientName && { clientName }),
+        ...(clientEmail && { clientEmail }),
+        ...(clientPhone && { clientPhone }),
+        ...(petName && { petName }),
+        ...(petSpecies && { petSpecies }),
+        ...(petBreed && { petBreed }),
+      }));
+    }
+  }, [searchParams]);
+
   // Step 4 — result
   const [submitting, setSubmitting] = useState(false);
   const [result, setResult] = useState<BookingResult | null>(null);