ponzischeme89
106 lines
3.9 KiB
Markdown
106 lines
3.9 KiB
Markdown
# Booking Form
|
|
|
|
`frontend/src/components/BookingForm.svelte`
|
|
|
|
The booking form is the shared two-step Meet & Greet form used across the public site. It collects owner details first, then dog details, and submits one JSON payload to `/api/contact`.
|
|
|
|
When the user enters a dog name on Step 2, the step heading updates from `Tell us about your dog` to `Tell us about {dog name}`.
|
|
|
|
## What it collects
|
|
|
|
- `name`
|
|
- `email`
|
|
- `phone`
|
|
- `services`
|
|
- `petName`
|
|
- `petBreed`
|
|
- `location`
|
|
- `message`
|
|
|
|
It also sends:
|
|
|
|
- `service`
|
|
- `serviceAreaStatus`
|
|
|
|
`serviceAreaStatus` is:
|
|
|
|
- `in_area`
|
|
- `outside_area`
|
|
- `unknown`
|
|
|
|
## Breed autocomplete
|
|
|
|
- Breed suggestions come from `frontend/src/lib/booking/options.js`.
|
|
- The autocomplete list is intentionally curated to common small and medium breeds only.
|
|
- The current curated list contains 38 small and medium breed entries, including common crossbreeds such as `Cavoodle`, `Cockapoo`, `Labradoodle Mini`, `Schnoodle`, and `Spoodle`.
|
|
- The Step 2 heading includes a circular placeholder dog image by default.
|
|
- As the user types, the breed field shows controlled in-form suggestions rather than relying on the browser `datalist` UI.
|
|
- When a breed suggestion is selected, the heading image swaps from the placeholder to the matched breed preview photo.
|
|
- Common typed variants can also resolve to the supported breed entry, for example `Shitzu` maps to `Shih Tzu`.
|
|
- If the breed does not exactly match a supported option, the field still submits and the heading keeps the generic dog image.
|
|
- Breed preview images are stored locally in `frontend/public/images/breeds`.
|
|
- Source and attribution notes for the downloaded free-use breed images live in `frontend/public/images/breeds/ATTRIBUTION.md`.
|
|
|
|
## Suburb autocomplete
|
|
|
|
- Suburb suggestions also come from `frontend/src/lib/booking/options.js`.
|
|
- The suburb field now uses controlled in-form autocomplete suggestions, so typing prefixes like `Pons` can resolve to `Ponsonby`.
|
|
- The programmed suburb list now covers a broader Auckland suburb set, so places like `Long Bay` can still be recognized and marked as outside the regular route.
|
|
- The list includes:
|
|
- regular service-area suburbs
|
|
- a small set of nearby suburbs outside the normal route
|
|
- Selecting an in-area suburb shows a compact green confirmation state directly under the suburb field.
|
|
- Selecting an out-of-area suburb shows a small warning banner directly under the suburb field.
|
|
- The warning does not block form submission. Users can still contact the business because route exceptions may be possible.
|
|
- Step 2 is laid out as two compact columns so pet name and breed sit on the left while suburb and its autocomplete feedback sit on the right, with the message field spanning full width below.
|
|
|
|
## Analytics
|
|
|
|
The form keeps experiment analytics non-blocking and emits:
|
|
|
|
- `form_start`
|
|
- `form_submit`
|
|
- `conversion`
|
|
|
|
## Files involved
|
|
|
|
- `frontend/src/components/BookingForm.svelte`
|
|
- `frontend/src/lib/booking/options.js`
|
|
|
|
## Updating breeds
|
|
|
|
Edit `frontend/src/lib/booking/options.js`.
|
|
|
|
Each breed entry defines:
|
|
|
|
- `name`
|
|
- `sizeLabel`
|
|
- `image`
|
|
|
|
The image is only for the preview avatar UI and does not affect submission.
|
|
|
|
When adding a new local breed image:
|
|
|
|
- save it under `frontend/public/images/breeds`
|
|
- add or update its source entry in `frontend/public/images/breeds/ATTRIBUTION.md`
|
|
- keep the image path local so the form does not depend on third-party runtime hosts
|
|
|
|
## Updating suburbs
|
|
|
|
Edit `frontend/src/lib/booking/options.js`.
|
|
|
|
- Core service suburbs are derived from the shared site content.
|
|
- Nearby but out-of-area suburbs are listed separately so the warning banner can appear without blocking contact.
|
|
|
|
## Testing expectations
|
|
|
|
Component tests should cover:
|
|
|
|
- step navigation
|
|
- breed match avatar rendering
|
|
- breed prefix autocomplete for newly added breeds
|
|
- in-area suburb confirmation
|
|
- out-of-area suburb warning
|
|
- successful and failed submission
|
|
- payload inclusion for `petBreed` and `serviceAreaStatus`
|