Product Review

Overview

The Product Review Submission feature allows users to review products they have purchased. It supports star ratings, media attachments (images/videos), aspect-specific feedback (e.g., performance, reliability), and moderation-ready validation.

This documentation outlines the front-end implementation of the review page using Nuxt 3, Pinia for state management, Vue Composition API, and Tailwind CSS for styling.

Technology Used

Layer	Tools
State Management	Pinia (useBazaarvoiceStore)
Styling	Tailwind CSS
State Management	File API + Conditional rendering

---

Utility Responsibilities

Main Template Structure

• Conditionals:
  • v-if="bazaarvoicestore.product_detail && !bazaarvoicestore.is_review_submitted": Main form rendering.
  • v-if="bazaarvoicestore.is_review_submitted": Displays a thank-you message post submission.
  • Breadcrumb Navigation: Dynamically computed via breadcrumb_data.
    • Dynamic Back Link: Renders a different back route based on current route.
    • Product Info Display:
      • Product image, brand, and name using bazaarvoicestore.product_detail.
    • Form Components:
      • RatingsMDPreview: Custom rating component used for overall and aspect ratings.
      • TsInput, TsTextarea, TsRadio: Used for nickname, title, comments, and recommendation options.
      • Media uploader supports both images and videos.
      • Dynamic UI for desktop and mobile.

State Management: useBazaarvoiceStore

• This Pinia store manages:

Property	Purpose
product_detail	Holds fetched product data.
review_form	Contains fields like rating, title, recommendation, etc.
is_loading	Controls loading spinner visibility.
is_review_submitted	Toggles between form and thank-you view.
review_form_errors	Field-level error validation.
addPhoto(file) / addVideo(file)	Media file handling.
submitProductReview()	Submits review payload.
getProductDetail(slug)	Fetches product detail by route param.

---

Review Form Fields

Field	Type	Validation
rating	Number (1-5)	Required
usernickname	String	Required
title	String	Required
ReviewText	String (>= 50)	Required
isrecommended	Boolean	Optional
photos / File	Media file handling.	Optional
rating_prestaties, rating_eigenschappen, etc.	Number (1-5)	Optional

---

Media Upload Logic

• Trigger Input: triggerFileInput() uses a ref to click the hidden <input type="file">.
• Handle Upload:
  • handleFileUpload() checks file type and delegates to addPhoto() or addVideo().
  • Removes uploaded files via removePhoto(file) or removeVideo(url, id).

Review Submission Flow

• On component mount: getProductDetail(route.params.slug)
• User fills the form.
• submitProductReview() is triggered on submit.
• If successful:
  • is_review_submitted becomes true.
  • Success message is shown with a thank-you GIF.

Feature Flow

This section describes the step-by-step interaction flow, covering both User Interface (UI) behavior and State Store (Pinia) operations to guide developers and QA in understanding how the feature behaves at runtime.

1. Page Load & Product Detail Fetch

Step	Description
1.1	User lands on route: /account/order-history/:slug/product-review
1.2	onMounted() lifecycle hook triggers bazaarvoicestore.getProductDetail(slug)
1.3	Product information is retrieved from the backend and stored in bazaarvoicestore.product_detail
1.4	If data is loading, is displayed
1.5	Once loaded, the product image, brand, and name are shown in a TsCard component

---

2. Filling Out the Review Form

Step	Description
2.1	User provides an overall star rating using RatingsMDPreview
2.2	User optionally uploads photos/videos by triggering file_input.click() via triggerFileInput()
2.3	handleFileUpload() reads selected file and calls

• bazaarvoicestore.addPhoto(file) for images
• bazaarvoicestore.addVideo(file) for videos | | 2.4 | User enters:
• Nickname (usernickname)
• Review title (title)
• Detailed text feedback (ReviewText)
• Recommendation (radio input: Yes/No) | | 2.5 | User optionally rates specific product aspects:
• rating_prestaties (Performance)
• rating_eigenschappen (Properties)
• rating_betrouwbaarheid_1 (Price/Quality Ratio)
• rating_prijskwaliteitverhouding (Reliability) |

3. Form Submission & Validation

Step	Description
3.1	User clicks the Submit button
3.2	submitProductReview() is called from bazaarvoicestore
3.3	The store validates all required fields

• Ensures rating, usernickname, title, ReviewText (min 50 chars) are filled | | 3.4 | On success:
• Review is posted to the backend API
• is_review_submitted is set to true | | 3.5 | On failure:
• review_form_errors is populated with relevant field messages
• Errors are shown via TsLabel components with variant="danger" |

4. Cleanup on Unmount

Step	Description
4.1	When the component is unmounted, onUnmounted() calls bazaarvoicestore.$reset()
4.2	This clears form fields, validation errors, and media state to prevent residual data on re-entry