From 6731ba3d09b1a13b234736ae48609505d7f00f95 Mon Sep 17 00:00:00 2001 From: Nico Date: Sun, 31 May 2026 18:15:52 -0700 Subject: [PATCH] fix: use item placeholder icon in store manager --- .../manage/StoreAvailableItemsManager.jsx | 7 +++++-- .../manage/StoreAvailableItemsManager.css | 7 +++++-- .../tests/available-items-catalog.spec.ts | 19 ++++++++++--------- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/manage/StoreAvailableItemsManager.jsx b/frontend/src/components/manage/StoreAvailableItemsManager.jsx index 7651bd6..a507eed 100644 --- a/frontend/src/components/manage/StoreAvailableItemsManager.jsx +++ b/frontend/src/components/manage/StoreAvailableItemsManager.jsx @@ -213,8 +213,11 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin {imageSrc ? ( ) : ( - - {item.item_name?.slice(0, 1).toUpperCase() || "?"} + )}
diff --git a/frontend/src/styles/components/manage/StoreAvailableItemsManager.css b/frontend/src/styles/components/manage/StoreAvailableItemsManager.css index 42b870b..3a93aa4 100644 --- a/frontend/src/styles/components/manage/StoreAvailableItemsManager.css +++ b/frontend/src/styles/components/manage/StoreAvailableItemsManager.css @@ -153,8 +153,11 @@ display: inline-flex; align-items: center; justify-content: center; - color: var(--color-text-secondary); - font-weight: var(--font-weight-semibold); + border: var(--border-width-medium) solid var(--color-border-light); + background: var(--color-gray-100); + color: var(--color-border-medium); + font-size: 1.75rem; + line-height: 1; } .store-available-items-copy { diff --git a/frontend/tests/available-items-catalog.spec.ts b/frontend/tests/available-items-catalog.spec.ts index 071d12c..a40c250 100644 --- a/frontend/tests/available-items-catalog.spec.ts +++ b/frontend/tests/available-items-catalog.spec.ts @@ -36,15 +36,15 @@ test("manage stores opens a modal to edit and delete household store items", asy }, ]; - await page.route("**/stores", async (route) => { + await page.route("**/households/1/stores", async (route) => { await route.fulfill({ status: 200, contentType: "application/json", - body: JSON.stringify([{ id: 10, name: "Costco" }]), + body: JSON.stringify([{ id: 10, household_store_id: 100, name: "Costco", is_default: true }]), }); }); - await page.route("**/households/1/stores/10/available-items*", async (route) => { + await page.route("**/households/1/locations/10/available-items*", async (route) => { const request = route.request(); const url = new URL(request.url()); const query = (url.searchParams.get("query") || "").toLowerCase(); @@ -62,7 +62,7 @@ test("manage stores opens a modal to edit and delete household store items", asy await route.fulfill({ status: 500 }); }); - await page.route("**/households/1/stores/10/available-items/777", async (route) => { + await page.route("**/households/1/locations/10/available-items/777", async (route) => { if (route.request().method() === "PATCH") { availableItems = availableItems.map((item) => item.item_id === 777 @@ -89,7 +89,7 @@ test("manage stores opens a modal to edit and delete household store items", asy await route.fulfill({ status: 500 }); }); - await page.route("**/households/1/stores/10/available-items/501", async (route) => { + await page.route("**/households/1/locations/10/available-items/501", async (route) => { if (route.request().method() === "DELETE") { availableItems = availableItems.filter((item) => item.item_id !== 501); await route.fulfill({ @@ -115,6 +115,7 @@ test("manage stores opens a modal to edit and delete household store items", asy await expect(managerModal).toBeVisible(); await expect(managerModal.getByText("milk", { exact: true })).toBeVisible(); await expect(managerModal.getByText("apples", { exact: true })).toBeVisible(); + await expect(managerModal.locator(".store-available-items-thumb-placeholder").first()).toHaveText("\uD83D\uDCE6"); await managerModal.locator(".store-items-table-row").filter({ hasText: "apples" }).getByRole("button", { name: "Edit Settings" }).click(); const editorModal = page.locator(".available-item-editor-modal"); @@ -156,7 +157,7 @@ test("grocery page remains unchanged and does not show a store items picker", as }); }); - await page.route("**/households/1/stores/10/list/recent", async (route) => { + await page.route("**/households/1/locations/10/list/recent", async (route) => { await route.fulfill({ status: 200, contentType: "application/json", @@ -164,7 +165,7 @@ test("grocery page remains unchanged and does not show a store items picker", as }); }); - await page.route("**/households/1/stores/10/list/suggestions**", async (route) => { + await page.route("**/households/1/locations/10/list/suggestions**", async (route) => { await route.fulfill({ status: 200, contentType: "application/json", @@ -172,7 +173,7 @@ test("grocery page remains unchanged and does not show a store items picker", as }); }); - await page.route("**/households/1/stores/10/list/item**", async (route) => { + await page.route("**/households/1/locations/10/list/item**", async (route) => { await route.fulfill({ status: 404, contentType: "application/json", @@ -180,7 +181,7 @@ test("grocery page remains unchanged and does not show a store items picker", as }); }); - await page.route("**/households/1/stores/10/list", async (route) => { + await page.route("**/households/1/locations/10/list", async (route) => { await route.fulfill({ status: 200, contentType: "application/json",