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>
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
import { useSearchParams } from "react-router-dom";
|
||||||
import type { Service } from "@groombook/types";
|
import type { Service } from "@groombook/types";
|
||||||
|
|
||||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||||
@@ -125,6 +126,28 @@ export function BookPage() {
|
|||||||
});
|
});
|
||||||
const [formError, setFormError] = useState<string | null>(null);
|
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
|
// Step 4 — result
|
||||||
const [submitting, setSubmitting] = useState(false);
|
const [submitting, setSubmitting] = useState(false);
|
||||||
const [result, setResult] = useState<BookingResult | null>(null);
|
const [result, setResult] = useState<BookingResult | null>(null);
|
||||||
|
|||||||
Reference in New Issue
Block a user