diff --git a/frontend/src/components/manage/ManageStores.jsx b/frontend/src/components/manage/ManageStores.jsx index 8a81c46..1edec68 100644 --- a/frontend/src/components/manage/ManageStores.jsx +++ b/frontend/src/components/manage/ManageStores.jsx @@ -91,6 +91,14 @@ export default function ManageStores() { {/* Current Stores Section */}

Your Stores ({householdStores.length})

+

+ Available item management lives inside each store card below. +

+ {!isAdmin && ( +

+ Only household owners and admins can manage store item catalogs. +

+ )} {householdStores.length === 0 ? (

No stores added yet.

) : ( diff --git a/frontend/src/components/manage/StoreAvailableItemsManager.jsx b/frontend/src/components/manage/StoreAvailableItemsManager.jsx index 5d8bcdf..dec357c 100644 --- a/frontend/src/components/manage/StoreAvailableItemsManager.jsx +++ b/frontend/src/components/manage/StoreAvailableItemsManager.jsx @@ -21,7 +21,7 @@ function itemImageSource(item) { export default function StoreAvailableItemsManager({ householdId, store, isAdmin }) { const toast = useActionToast(); - const [expanded, setExpanded] = useState(false); + const [expanded, setExpanded] = useState(true); const [items, setItems] = useState([]); const [query, setQuery] = useState(""); const [loading, setLoading] = useState(false); @@ -123,15 +123,15 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
-

Available Items

-

Curate what members see for {store.name}.

+

Store Item Catalog

+

Manage the available item list for {store.name}.

diff --git a/frontend/src/styles/components/manage/ManageStores.css b/frontend/src/styles/components/manage/ManageStores.css index 2023aa8..32275f1 100644 --- a/frontend/src/styles/components/manage/ManageStores.css +++ b/frontend/src/styles/components/manage/ManageStores.css @@ -25,6 +25,20 @@ margin-bottom: 1rem; } +.manage-stores-help { + margin: -0.25rem 0 1rem; + color: var(--text-secondary); +} + +.manage-stores-note { + margin: -0.25rem 0 1rem; + padding: 0.875rem 1rem; + border: 1px solid var(--border); + border-radius: 8px; + background: var(--background); + color: var(--text-secondary); +} + /* Stores List */ .stores-list { display: grid; diff --git a/frontend/tests/available-items-catalog.spec.ts b/frontend/tests/available-items-catalog.spec.ts index 229c96c..7acad8c 100644 --- a/frontend/tests/available-items-catalog.spec.ts +++ b/frontend/tests/available-items-catalog.spec.ts @@ -154,7 +154,7 @@ test("manage stores lets admins import and curate available items", async ({ pag const storeCard = page.locator(".store-card").filter({ hasText: "Costco" }); await expect(storeCard).toBeVisible(); - await storeCard.getByRole("button", { name: "Manage" }).click(); + await expect(storeCard.getByText("Store Item Catalog")).toBeVisible(); await expect(storeCard.getByText("milk")).toBeVisible();