Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Menu Item on Partner Portal Tab Bar

Description / Background

The Partner Portal includes QR-code menu functionality. This feature lets owners upload and manage menu images directly, reducing operational dependency on the HH team.

Glossary

https://app.clickup.com/9003122396/docs/8ca1fpw-35796/8ca1fpw-41516

Objectives

  • The owner can access the Menu Items setting on Partner Portal.
  • The owner can see the main and optional languages of menu items.
  • The owner can search for menu item names.
  • The owner can filter menu items to display only items without images.
  • The owner can choose table pagination size.
  • The owner can view item list details:
    1. No -> list number
    2. Image -> menu item image
    3. Name -> menu item name (main and optional language)
    4. Description -> menu item description (main and optional language)
    5. Category -> menu category
    6. Price -> menu price
    7. Action -> Remove Image button when image exists
  • If the menu item has an image, show Change Image.
  • If the menu item does not have an image, show Upload Image.
  • The menu item tab is visible for both individual and group logins.

Scope

New menu item feature on Partner Portal.

Location

Partner Portal.

Sequence Diagram / Flow

ERD

Backend Implementation

  • Updated pagination implementation from JSONAPI::Pagination to Pagy::Backend.
  • Added filter for menus without images.
  • Added filter for menu name search (title_th / title_en).
  • Returned pagination metadata and links.

https://github.com/hungryhub-team/hh-menu/pull/237/files

Frontend Implementation

  • Added jsona and sanitize-html dependencies.
  • Added Menu V2 files (MenuItems.js, MenuList.vue, ImageUpload.vue, RemoveImage.vue, etc.).
  • Added APP_HH_MENU_API_URL configuration.
  • Updated sidebar logic and i18n translations (cn, en, th).

https://github.com/hungryhub-team/book-bite/pull/768

PRD & Task

https://app.clickup.com/9003122396/docs/8ca1fpw-30456/8ca1fpw-43576 https://app.clickup.com/t/86cwyhv7r

Design

https://www.figma.com/design/ymdLN2ZKzfI0oyX4kps2GQ/Partner-Portal-Desktop?node-id=14028-131&p=f&t=GxpjJ0hS5vSg5IRe-0

API Blueprint

Using the HH Menu API: https://menu.hh-engineering.my.id/api-docs/index.html

MethodPathURLDescriptionRequest
GETrestaurants/${id}/master_menuhttps://menu.hh-engineering.my.id/api/v1/Get master menu dataNone
GETrestaurants/${restaurantId}/master_menus/${masterMenuId}/menushttps://menu.hh-engineering.my.id/api/v1/Get menu item list from master menuQuery params (page[number], page[size], filters)
POSTmy_imageshttps://menu.hh-engineering.my.id/api/v1/Upload menu item imageFormData(image, menu_id)
PUTmy_images/${imageId}https://menu.hh-engineering.my.id/api/v1/Update menu item imageFormData(image)
DELETEmy_images/${imageId}https://menu.hh-engineering.my.id/api/v1/Delete menu item imageNone

Improvement

Feature NameDateWhat ChangedDescription
Menu item tab2025-02-24Initial documentNew menu item feature on Partner Portal to allow owners to manage menu item images.