Highlight Menu Feature

Description / Background

The Highlight Menu feature revives and enhances the menu labeling system at Hungry Hub, introducing a Highlight Menu carousel and restoring functional Menu Tags across all platforms. This feature enables restaurants to showcase their best offerings while helping diners make faster ordering decisions.

Objectives

• Display a dedicated section for highlighted dishes on the customer-facing menu
• Display tag icons alongside menu items in the QR menu
• Enable functional tagging across all platforms (Admin, Partner Portal, Customer)
• Allow admins to manage global menu tags and icons
• Enable restaurant partners to assign tags to their menu items
• Show highlight indicators and icons to diners for faster decision-making
• Implement Highlight Menu carousel functionality
• Items in the Highlight slider are sorted by:
  • 1st: Partner manual sort order (if available)
  • 2nd: Newest added
• If a menu item has multiple tags (e.g., Popular AND Vegetarian), the UI should display up to two icons. Priority order:
  • Highlight > Chef Recommended > Popular > Vegetarian
• An item must have an image to be eligible for the “Highlight Menu” slider. If a Partner tags an item without an image as “Highlight,” the system should show a warning: “Image required for Highlight slider.”
• Send automated email and Dashboard Notification to Partners: “New Feature: Boost your sales by setting up your Highlight Menu today!”

Scope

Platforms

Feature Components

• Highlight Menu carousel/slider
• Menu tag icons and labels
• Tag filtering sidebar
• Tag editing dialog
• Admin navbar integration

Sequence Diagram / Flow

flowchart LR
  subgraph Admin/book-bite
    filters["Menu filter dialog"]
    tags["Edit tag dialog"]
    api["Menu V2 API"]
    locales["Localized menu labels"]
  end
  
  subgraph Customer/hh-pegasus
    package["Package menu includes"]
    parser["Parse custom tag relationships"]
    card["Show tag icons on cards"]
    detail["Show tag pills in details"]
  end
  
  filters -- "updates route filters" --> api
  tags -- "saves tag selections" --> api
  locales -- "provides translated labels" --> filters
  locales -- "provides translated labels" --> tags
  api -- "customTagMenus" --> parser
  parser -- "tags" --> card
  parser -- "tags" --> detail

ERD

(To be documented)

Backend Implementation

_navbar.html.erb

• Adds a Menu Tags link under the Menu dropdown
• Builds the new link from AdminSetting.hh_menu_frontend_host with the menu-tags path
• Opens the new menu tags page in a new tab
• Removes the old Custom Tag HH Menu V2 link from the lower admin links section

PR: https://github.com/hungryhub-team/hh-server/pull/8197

Hybrid and Partner Portal Implementation

• Wraps menu title with inline tag rendering support

• Shows tag icons beside menu titles when available

• Adds helpers for filtering tags and reading labels/icons

• Includes tags when opening menu detail data

• Passes tags from parent menu data into MenuDetail

• Preserves existing menu detail fields and click behavior

• Displays menu tags as rounded pills in detail view

• Renders optional tag icons with localized tag labels

• Adds computed filtering for tags with visible labels

• Adds helpers for tag label and icon lookup

• Adds MenuCategoryTag type for custom tag data

• Resolves customTagMenus relationships from included resources

• Attaches parsed tag data to menu attributes

• Adds package menu debug logging

• Adds optional tags support to include attributes

• Types customTagMenus relationship references with id and type

• Extends MenuDetail with optional tag metadata

• Add menu-specific sidebar filter form

• Displays filter options for menu categories and tags

• Integrate filters and custom tag editing

• Display tagged menus in list view

• Add dialog for editing menu tags

• Allow partners to select/assign tags to menu items

• Add custom tag and category APIs

• Endpoints for tag CRUD operations

• Add category and tag table columns

• Store custom tags and category menus

• State management for tag data

• hh-pegasus: https://github.com/hungryhub-team/hh-pegasus/pull/2953

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

• hh-server: https://github.com/hungryhub-team/hh-server/pull/8197

Mobile Implementation

(N/A)

PRD & Task

• PRD: https://app.clickup.com/9003122396/v/dc/8ca1fpw-7922/8ca1fpw-55616
• Task [Highlight Menu] Partner Portal & HH-Menu & Admin: https://app.clickup.com/t/9003122396/86d31pzp1
• Task Highlight Menu: https://app.clickup.com/t/9003122396/86d0d13zt

Design

• Figma Link

Component States

API Blueprint

New Query

(To be documented)

DB Schema / Database Migration

• MenuItems table: Added category and tag columns
• customTagMenus relationship table for tag associations

Improvement: