test: cover member map buying flow

frontend/tests/location-map-manager.spec.ts

@@ -5094,6 +5094,83 @@ test("members can view a published map but cannot edit it", async ({ page }) =>
   await expect(page.getByRole("button", { name: "Publish" })).toHaveCount(0);
 });
 
+test("members can buy items from a published map", async ({ page }) => {
+  await mockMapShell(page, memberHousehold);
+
+  const memberItems = [
+    {
+      id: 1721,
+      item_name: "bagels",
+      quantity: 1,
+      bought: false,
+      zone_id: 501,
+      zone: "Bakery",
+      added_by_users: ["map-user"],
+    },
+  ];
+  const mapState = {
+    ...publishedMapState([
+      {
+        id: 1720,
+        location_map_id: 901,
+        zone_id: 501,
+        zone_name: "Bakery",
+        type: "zone",
+        label: "Bakery",
+        x: 40,
+        y: 40,
+        width: 260,
+        height: 160,
+        rotation: 0,
+        locked: false,
+        visible: true,
+        sort_order: 1,
+      },
+    ], false),
+    items: memberItems,
+  };
+  const boughtPayloads: Array<Record<string, unknown>> = [];
+
+  await page.route("**/households/1/locations/10/map", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(mapState),
+    });
+  });
+
+  await page.route("**/households/1/locations/10/list/item**", async (route) => {
+    boughtPayloads.push(await route.request().postDataJSON());
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ success: true }),
+    });
+  });
+
+  await page.goto("/stores/100/locations/10/map");
+
+  await expect(page.getByRole("button", { name: "Edit Draft" })).toHaveCount(0);
+  await page.getByRole("button", { name: "Map area Bakery, 1 item" }).click();
+  await page.getByRole("button", { name: "Mark bagels bought" }).click();
+  await expect(page.locator(".confirm-buy-item-name")).toHaveText("bagels");
+  await page.getByRole("button", { name: "Mark as Bought" }).click();
+
+  await expect.poll(() => boughtPayloads.length).toBe(1);
+  expect(boughtPayloads[0]).toMatchObject({
+    item_name: "bagels",
+    bought: true,
+    quantity_bought: 1,
+  });
+  await expect(page.locator(".confirm-buy-modal")).toHaveCount(0);
+
+  const hiddenZoneState = page.getByRole("group", { name: "Zone items" }).locator(".location-map-inline-state", { hasText: "Hidden" });
+  await expect(hiddenZoneState).toContainText("1");
+  await expect(page.getByRole("button", { name: "bagels bought" })).toHaveCount(0);
+  await hiddenZoneState.getByRole("button", { name: "Show Zone Items" }).click();
+  await expect(page.getByRole("button", { name: "bagels bought" })).toBeDisabled();
+});
+
 test("members see a clean empty state when no map is published", async ({ page }) => {
   await mockMapShell(page, memberHousehold);