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

Single Review Page

Description / Background

This document describes the implementation of a Single Review Page feature, allowing users to view the full details of individual customer reviews directly from a store page. This improves user engagement by offering a more in-depth and visually enhanced review experience.

The Single Review Page was introduced to address feedback that users wanted to see detailed customer reviews without leaving the store page. By surfacing richer review details, we aim to increase engagement, trust, and time spent per page.

Glossary

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

Objectives

  • User can see the review section on store page
  • User can click the individual review to see the details
  • User can see the single review page

Scope

 Web → store page → review section

Sequence Diagram / Flow

ERD

 

Backend Implementation

  • Updated the string delimiter for "dine_in" to single quotes 'dine_in' for consistency.
  • Added the EncryptableHelper module.
  • Updated the create method's JSON response formatting for better readability.
  • Introduced a new show method:
    • Decrypts the review ID received through the request.
    • Fetches the review using the decrypted ID.
    • Implements caching for the response.
    • Handles errors like missing required parameters.
  • Added rating_types:
    • Determines the rating dimensions based on the service_type of the reservation.
  • New Attributes:
    • reservation_service_type: Returns the service type or an empty string if not present.
    • ratings: Constructs a hash of rating dimensions and their associated values.
    • occasion: Formats and returns the occasion.
    • recommendations: Fetches and formats recommended dimensions.
  • Added a new show route for the reviews resource under api/v5.

[

github.com

https://github.com/hungryhub-team/hh-server/commit/2301d5b3f56c89084d0c2ebc443d469c61004624

](https://github.com/hungryhub-team/hh-server/commit/2301d5b3f56c89084d0c2ebc443d469c61004624)

[

github.com

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

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

Frontend Implementation

  • Added new components and pages for a detailed review experience:
    • ReviewExperience.vue
    • ReviewGallery.vue
    • ReviewHeader.vue
    • ReviewRatingItem.vue
    • ReviewRatings.vue
    • ReviewSection.vue
    • ReviewPage.astro
    • reviewDetail.ts service for fetching review details.
    • index.astro and [client].astro to handle review detail pages.
  • Added a new function redirectToReviewDetail in redirection.ts, which navigates to a detailed review page using the restaurant's slug and an encrypted review ID.
  • Added optional fields to attributesReviewsSchema:
    • occasion, recommendations, reservationServiceType, and ratings (with subfields like ambience, food, service, and value).
  • Updated components like ReviewStarSummary.vue, ReviewStarSummaryDesktop.vue, and ReviewStarSummaryMobile.vue to include a new event, onViewReviewDetail, for navigating to the review detail page.
  • Modified helper functions such as onViewReviewDetail in reviewHelper.ts for handling the view-review-detail functionality.
  • Improved the breadcrumb component (Breadcrumb.vue) by adding flex-wrap to the class for better responsiveness.
  • Adjusted CustomerReviewGalleryDesktop.vue:
    • Made the photo dimensions larger (215x215 instead of 145x145) for better visuals.
    • Introduced a dynamic minimum photo count (minPhotosNeedSlider) to determine if a slider is required.
  • Added click handlers and emitted events (on-view-review-detail) in CustomerReviewHeader.vue and ResturantCustomerReview.vue.
  • Improved CSS styles and responsiveness across components.
  • Enhanced error handling for review-related operations.
  • Consolidated and enhanced the review helper methods in reviewHelper.ts.
  • Added dummy data fields in createDummyReviews to include new schema fields.
  • Fixed slider behavior in CustomerReviewGalleryDesktop.vue.
  • Addressed minor CSS issues such as background gradient layering in ReviewStarSummaryMobile.vue.

[

github.com

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

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

PRD & Task

 PRD → Private (https://app.clickup.com/9003122396/docs/8ca1fpw-7922/8ca1fpw-48116)

Private (https://app.clickup.com/t/86cy8203g) Private (https://app.clickup.com/t/86cykpg40) Private (https://app.clickup.com/t/86cyb4579)

Design

[

www.figma.com

https://www.figma.com/design/co41MQXvIT2Cu4lUZNZF0Z/Review-%26-Rating?node-id=835-1419&p=f&t=CO0dRBFf51hPcStI-0

](https://www.figma.com/design/co41MQXvIT2Cu4lUZNZF0Z/Review-%26-Rating?node-id=835-1419&p=f&t=CO0dRBFf51hPcStI-0)

API Blueprint

MethodPathURLDescriptionPayloadResponse
 GET /api/v5/reviews/:id get single review review id{ "data": { "id": "52948", "type": "reviews", "attributes": { "rating": 5, "title": null, "created_at": "2025-03-14T06:44:58.000Z", "user_name": "Hungry Hub Diner", "review_recommended_fors": [ { "id": 59468, "review_id": 52948, "dimension_id": 5, "created_at": "2025-03-14T06:45:10.000Z", "updated_at": "2025-03-14T06:45:10.000Z" } ], "packages": [ { "id": 4368, "name": "All You Can Eat Pay Now", "package_type": "ayce" } ], "review": "Good", "encrypted_id": "doDNp", "user_avatar": { "thumb": "https://hh-engineering.my.id/uploads/user/avatar/188925/WhatsApp_Image_2024-08-16_at_11.34.32_AM.jpeg", "medium": "https://hh-engineering.my.id/uploads/user/avatar/188925/WhatsApp_Image_2024-08-16_at_11.34.32_AM.jpeg", "original": "https://hh-engineering.my.id/uploads/user/avatar/188925/WhatsApp_Image_2024-08-16_at_11.34.32_AM.jpeg" }, "pictures": [ { "thumb": "/uploads/review_photo/photo/39234/00.jpeg", "original": "/uploads/review_photo/photo/39234/00.jpeg", "caption": "Le Normandile Review" } ], "avatar": "https://hh-engineering.sgp1.cdn.digitaloceanspaces.com/assets/v2/mr_hungry-09b1fe8ac22e6907bae45ba17a49a4b3566ab6e9663380a56e35176d803b4466.png", "restaurant": { "id": 1631, "name": "Le Normandile", "link": "le-normandile-bangkok" }, "link": "https://hh-engineering.my.id/restaurants/le-normandile-bangkok/reviews/doDNp", "reservation_service_type": "dine_in", "ratings": { "food": 5, "ambience": 5, "service": 5, "value": 5 }, "occasion": "Date", "recommendations": [ "Solo Dining" ] } }, "success": true, "message": null}

New Query

 -

DB Schema / Database Migration

 -

Improvement:

Feature NameDateWhat ChangedDescription
 single review April 2025 initial document