adam/shoc-frontend-new
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/shoc-frontend-new.git synced 2026-10-03 23:43:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(sites): Edit form map preview includes the stored ZIP

Browse source 
The Edit form's preview now uses the same address line as the Street
Address link and the view mode, ZIP included.
This commit is contained in:
Alexandre Brandizzi 2026-09-25 17:27:32 -03:00
parent a2b985b14a
commit db6027f9c5
2 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/app/(protected)/locations/_components/site-form-fields.tsx
View file

@ -27,7 +27,11 @@ export function SiteFormFields({
register,
formState: { errors },
} = form;
const [address, city, state] = useWatch({ control, name: ["address", "city", "state"] });
// ZIP is carried through unedited, so the preview shows the same line as the Street Address link.
const [address, city, state, zipCode] = useWatch({
control,
name: ["address", "city", "state", "zipCode"],
});
const { field: addressField } = useController({ control, name: "address" });
const { field: cityField } = useController({ control, name: "city" });
const { field: stateField } = useController({ control, name: "state" });
@ -84,7 +88,13 @@ export function SiteFormFields({
/>
<StateSelect control={control} error={errors.state} />
</Stack>
<SiteMapPreview address={address} city={city} state={state} placeholderUntilComplete />
<SiteMapPreview
address={address}
city={city}
state={state}
zipCode={zipCode}
placeholderUntilComplete
/>
<Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
<TextField
{...register("sitePhone")}

9
src/test/app/(protected)/locations/site-detail-panel.test.tsx
View file

@ -145,11 +145,14 @@ describe("Sites page detail panel", () => {
).not.toBeInTheDocument();
});
it("edit mode swaps the map for the placeholder while City is cleared", async () => {
it("edit mode previews the stored ZIP and swaps the map for the placeholder while City is cleared", async () => {
renderWithProviders(<LocationsListPage />, { withAuth: false });
const region = await openSite("DAL1");
fireEvent.click(within(region).getByRole("button", { name: "Edit" }));
expect(within(region).getByTitle("Site location map")).toBeInTheDocument();
expect(within(region).getByTitle("Site location map")).toHaveAttribute(
"src",
"https://www.google.com/maps?q=3811%20Distribution%20Dr%2C%20Dallas%2C%20TX%2075201&output=embed",
);
const city = within(region).getByRole("textbox", { name: "City" });
fireEvent.change(city, { target: { value: "" } });
@ -162,7 +165,7 @@ describe("Sites page detail panel", () => {
fireEvent.change(city, { target: { value: "Fort Worth" } });
expect(await within(region).findByTitle("Site location map")).toHaveAttribute(
"src",
"https://www.google.com/maps?q=3811%20Distribution%20Dr%2C%20Fort%20Worth%2C%20TX&output=embed",
"https://www.google.com/maps?q=3811%20Distribution%20Dr%2C%20Fort%20Worth%2C%20TX%2075201&output=embed",
);
});