From db6027f9c5e870e090e74ec6752adbda286f5c97 Mon Sep 17 00:00:00 2001
From: Alexandre Brandizzi <alex_brandizzi@hotmail.com>
Date: Fri, 25 Sep 2026 17:27:32 -0300
Subject: [PATCH] fix(sites): Edit form map preview includes the stored ZIP

The Edit form's preview now uses the same address line as the Street
Address link and the view mode, ZIP included.
---
 .../locations/_components/site-form-fields.tsx     | 14 ++++++++++++--
 .../locations/site-detail-panel.test.tsx           |  9 ++++++---
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/app/(protected)/locations/_components/site-form-fields.tsx b/src/app/(protected)/locations/_components/site-form-fields.tsx
index dfc94ead..29be2a4f 100644
--- a/src/app/(protected)/locations/_components/site-form-fields.tsx
+++ b/src/app/(protected)/locations/_components/site-form-fields.tsx
@@ -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")}
diff --git a/src/test/app/(protected)/locations/site-detail-panel.test.tsx b/src/test/app/(protected)/locations/site-detail-panel.test.tsx
index b04a77b4..88499ad7 100644
--- a/src/test/app/(protected)/locations/site-detail-panel.test.tsx
+++ b/src/test/app/(protected)/locations/site-detail-panel.test.tsx
@@ -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",
     );
   });