Award Winning Icon

Description / Background

Some restaurants have achievement data (such as michelin star, or red table) set in the backend, but this information is not currently shown to end users. To fix this, we will display the achievement label across the user interface, including in the Restaurant Tag Setting, Restaurant List, and Restaurant Detail pages, using the correct Award Badge and Award Type to ensure achievements are clearly visible to users.

Objectives

• user can see the restaurant award badge and description
• user can see the award badge on homepage
• user can see the award badge on search page
• user can see the award badge on group landing page
• user can see the award badge on restaurant card on profile
• user can see the award badge on store page
• user can see the award description on restaurant detail page
• user can see the award type when filter the restaurant
• user can see the award badge on discover more
• The is priority for displaying the label
  1. Come More Pay Less
  2. Top Up Badge
  3. Award Icon
• admin can add restaurant award type on restaurant tag
• admin can add restaurant award badge on restaurant tag

Scope

•  Restaurant Tag Setting
• Restaurant List Setting
• Award Badge
• Award Type

How to set Award badge and type tags

1. Open Admin Dashboard
2. Open Restaurants → restaurant tags

3. Pick the award badge or award type
4. Pick the tags → click action → others → manage outlet
5. Add the restaurant that you want to add to the award badge or the award type

Sequence Diagram / Flow

ERD

Backend Implementation

• RestaurantTag now recognizes AwardBadge and AwardType as categories (constants, validation, and scopes added).
• award_badge_tags and award_type_tags methods added to Restaurant models for easy access.
• Validation for max length (18 chars) on award badge tag names.
• Migration files introduce these categories and two sample tags (Michelin Guide, 1 Michelin Star).
• Adds award_badge and award_type as translatable attributes.
• Updates schema definitions and translation handling.
• All relevant serializers (admin, partner, v5, featured, etc.) now include award badge/type fields and lists.
• Primary and secondary (sub) tags for awards are exposed in API responses.
• New endpoints for award tag management:
  • award_tags, checked_award_tags, update_award_tags for listing, checking, and updating awards on restaurants.
• Award tag assignment logic handles both adding/removing tags and updating cache/UI.
• Modal for managing award tags (_modal_sub_awards.html.erb).
• Restaurant admin list supports award tag management, display, and filtering.
• Front-end code to fetch, display, update, and set primary/secondary award tags per restaurant.
• UI changes: “Facility” column becomes “Facility & Awards”; award badge and type selectors added.
• API now returns award tags with restaurant data, both as lists and as primary award info.
• Filtering logic in tag filters now supports award badge/type.
• Excludes award type from some groupings (e.g., deals listing).
• Cache invalidation and slug update jobs now correctly trigger on changes to award tags.
• The SlugWorker now takes restaurant ID instead of slug string.
• Event-driven producers and schemas include award badges/types in payloads sent for search/indexing.

[

github.com

https://github.com/hungryhub-team/hh-server/pull/6790/files

](https://github.com/hungryhub-team/hh-server/pull/6790/files)

Hybrid Implementation

• Components updated or created to display award badges:
  • PromotionBadge.vue: Added isAwardBadge prop and styling for award badges.
  • RestaurantCard.vue & RestaurantCardRoot.vue: Logic to display the correct badge (showedBadge).
  • RestaurantAwardBadge.vue: New component for rendering award badges.
  • RestaurantIcon.vue: Overlays award badge on restaurant avatars.
  • Other components such as RestaurantInformationDesktop.vue, RestaurantGalleryMobile.vue, ReviewSummariesDesktop.vue, RestaurantTags.vue, etc.
• Award badges added to search filters (both sidebar and mobile):
  • SideFilterAward.vue: New component for filtering by award badges in the sidebar.
  • FilterAwardModal.vue & FilterButtonAward.vue: New bottom sheet/modal for filtering on mobile.
  • SearchFilterMobile.vue: Integrates the award filter into the mobile UI.
  • FilterSettingModal.vue, FilterButtonSetting.vue: Integrates award filter with filter settings.
• GraphQL & TypeScript changes:
  • searchRestaurantGraphql.ts: GraphQL input extended to accept awardBadgeIds.
  • SearchTypes.ts, Restaurant.ts, restaurant.ts, restaurantCardMapper.ts, restaurantDetail.ts, restaurantPage.ts, search.ts: Updated to handle award badge/type data.
  • constants.ts: Updated for new constants related to awards.
• RestaurantFeaturedProgramDesktop.vue: Removed the offers icon from the desktop featured program for clarity.
• combined.json, search.json: Updated for text and configuration related to award badges.
• tsconfig.json: Config changes for build/types support.

[

github.com

https://github.com/hungryhub-team/hh-pegasus/pull/1766/files

](https://github.com/hungryhub-team/hh-pegasus/pull/1766/files)

PRD & Task

 PRD: Private (https://app.clickup.com/9003122396/docs/8ca1fpw-7922/8ca1fpw-49856) Private (https://app.clickup.com/t/86cxx2tbu)

Design

[

www.figma.com

https://www.figma.com/design/gqO9x3ZImyRi2qLrRx0yGb/Award-winning-icon?node-id=0-1&t=8jLWM3jXDMf2jOhj-1

](https://www.figma.com/design/gqO9x3ZImyRi2qLrRx0yGb/Award-winning-icon?node-id=0-1&t=8jLWM3jXDMf2jOhj-1)

API Blueprint

New Query

DB Schema / Database Migration

• Add new column award_badge on compact restaurant translation

Improvement: