From a2837facaa7baac09d0215414964ec604ddfb2b7 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 13:59:12 -0700
Subject: [PATCH] fix: close stale map buy modal on location change

---
 frontend/src/pages/LocationMapManager.jsx   |  4 +
 frontend/tests/location-map-manager.spec.ts | 83 +++++++++++++++++++++
 2 files changed, 87 insertions(+)

diff --git a/frontend/src/pages/LocationMapManager.jsx b/frontend/src/pages/LocationMapManager.jsx
index db414ad..943773c 100644
--- a/frontend/src/pages/LocationMapManager.jsx
+++ b/frontend/src/pages/LocationMapManager.jsx
@@ -234,6 +234,10 @@ export default function LocationMapManager() {
     [activeMap?.height, activeMap?.width, mapDraft.height, mapDraft.width]
   );
 
+  useEffect(() => {
+    setBuyModalItem(null);
+  }, [activeHousehold?.id, locationId]);
+
   useEffect(() => {
     const matchingLocation = stores.find((store) => String(store.id) === String(locationId));
     if (matchingLocation && String(activeStore?.id) !== String(matchingLocation.id)) {
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index aada160..580a1f2 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -673,6 +673,89 @@ test("resets map layer filters after switching locations", async ({ page }) => {
   await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveCount(0);
 });
 
+test("closes stale map buy modal after switching locations", async ({ page }) => {
+  await mockMapShell(page, adminHousehold, [storeLocation, secondStoreLocation]);
+
+  const firstLocationState = publishedMapState([
+    {
+      id: 491,
+      location_map_id: 901,
+      zone_id: 501,
+      zone_name: "Bakery",
+      type: "zone",
+      label: "Eastvale Bakery",
+      x: 40,
+      y: 40,
+      width: 260,
+      height: 160,
+      rotation: 0,
+      locked: false,
+      visible: true,
+      sort_order: 1,
+    },
+  ], true);
+  const nextLocationBaseState = publishedMapState([
+    {
+      id: 492,
+      location_map_id: 902,
+      zone_id: 502,
+      zone_name: "Produce",
+      type: "zone",
+      label: "Ontario Produce",
+      x: 80,
+      y: 80,
+      width: 280,
+      height: 160,
+      rotation: 0,
+      locked: false,
+      visible: true,
+      sort_order: 1,
+    },
+  ], true);
+  const nextPublishedMap = {
+    ...nextLocationBaseState.published_map,
+    id: 902,
+    store_location_id: secondStoreLocation.id,
+  };
+  const nextLocationState = {
+    ...nextLocationBaseState,
+    location: secondStoreLocation,
+    map: nextPublishedMap,
+    published_map: nextPublishedMap,
+    items: [],
+  };
+
+  await page.route("**/households/1/locations/10/map", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(firstLocationState),
+    });
+  });
+  await page.route("**/households/1/locations/11/map", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(nextLocationState),
+    });
+  });
+
+  await page.goto("/stores/100/locations/10/map");
+  await page.getByRole("button", { name: "Map area Eastvale Bakery" }).click();
+  await page.getByRole("button", { name: "Mark french bread bought" }).click();
+  await expect(page.locator(".confirm-buy-item-name")).toHaveText("french bread");
+
+  await page.evaluate(() => {
+    window.history.pushState({}, "", "/stores/100/locations/11/map");
+    window.dispatchEvent(new PopStateEvent("popstate"));
+  });
+
+  await expect(page.getByRole("button", { name: "Map area Ontario Produce" })).toBeVisible();
+  await expect(page.locator(".location-map-title span")).toHaveText("Ontario");
+  await expect(page.locator(".confirm-buy-modal")).toHaveCount(0);
+  await expect(page.getByText("french bread")).toHaveCount(0);
+});
+
 test("admin can add the first area from a blank map canvas", async ({ page }) => {
   await mockMapShell(page);