nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Add store location map manager #20

Open
nalalangan wants to merge 206 commits from feature/location-map-manager into feature/store-selector-modal
pull from: feature/location-map-manager
merge into: nalalangan:feature/store-selector-modal
Conversation 0 Commits 206 Files Changed 47 +18 -2
3 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d5b38b6711 - Show all commits

4
frontend/src/components/modals/ConfirmBuyModal.jsx
View File

@ -93,7 +93,9 @@ export default function ConfirmBuyModal({
{imageUrl ? ( {imageUrl ? (
<img src={imageUrl} alt={item.item_name} className="confirm-buy-image" /> <img src={imageUrl} alt={item.item_name} className="confirm-buy-image" />
) : ( ) : (
<div className="confirm-buy-image-placeholder">[ ]</div> <div className="confirm-buy-image-placeholder" role="img" aria-label="No item photo">
<span aria-hidden="true">{"\uD83D\uDCE6"}</span>
</div>
)} )}
</div> </div>

15
frontend/src/styles/ConfirmBuyModal.css
View File

@ -100,8 +100,21 @@
} }
.confirm-buy-image-placeholder { .confirm-buy-image-placeholder {
font-size: 4em; width: min(58%, 150px);
aspect-ratio: 1;
display: inline-flex;
align-items: center;
justify-content: center;
border: var(--border-width-medium) solid var(--color-border-light);
border-radius: var(--border-radius-lg);
background: var(--color-gray-100);
color: var(--color-border-medium); color: var(--color-border-medium);
font-size: 4.75em;
line-height: 1;
}
.confirm-buy-image-placeholder span {
transform: translateY(0.02em);
} }
.confirm-buy-quantity-section { .confirm-buy-quantity-section {

1
frontend/tests/location-map-manager.spec.ts
View File

@ -2325,6 +2325,7 @@ test("viewer can buy selected zone items from the map", async ({ page }) => {
await page.getByRole("button", { name: "Mark french bread bought" }).click(); await page.getByRole("button", { name: "Mark french bread bought" }).click();
await expect(page.locator(".confirm-buy-modal")).toBeVisible(); await expect(page.locator(".confirm-buy-modal")).toBeVisible();
await expect(page.locator(".confirm-buy-item-name")).toHaveText("french bread"); await expect(page.locator(".confirm-buy-item-name")).toHaveText("french bread");
await expect(page.getByRole("img", { name: "No item photo" })).toHaveText("\uD83D\uDCE6");
await page.getByRole("button", { name: "Mark as Bought" }).click(); await page.getByRole("button", { name: "Mark as Bought" }).click();
await expect.poll(() => boughtPayloads.length).toBe(1); await expect.poll(() => boughtPayloads.length).toBe(1);