# Individual reviews display with required information (author, rating, date, content)

- **Pattern:** `ab-001205` (`ecommerce-reviews.display-ux.review-display-complete`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001205
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001205)

## Why it matters

A review component that omits the author name, submission date, star rating, or review text fails to meet the minimum data required for schema.org `Review` markup (see `ecommerce-reviews.schema-seo.review-schema`), which costs rich-snippet eligibility. Beyond SEO, shoppers use date and author identity to gauge review credibility — an undated review from an anonymous source with no star rating carries near-zero trust weight. Inconsistent field sets across review components also break JSON-LD generation downstream: if some `ReviewItem` instances omit `datePublished` or `reviewRating`, the structured data output will be incomplete for a subset of products.

## Severity rationale

Medium because missing required review fields degrade trust signals and break schema.org Review markup without creating a security or data-integrity risk.

## Remediation

Build a single canonical review component in `components/ReviewItem.tsx` that renders all four required fields — author, date, rating, and text — with graceful fallbacks.

```tsx
// components/ReviewItem.tsx
import { formatDate } from '@/lib/format'

export function ReviewItem({ review }: { review: Review }) {
  return (
    <article className="review" itemScope itemType="https://schema.org/Review">
      <header className="review-header">
        <strong itemProp="author">{review.author_name ?? 'Anonymous'}</strong>
        <time dateTime={review.created_at.toISOString()} itemProp="datePublished">
          {formatDate(review.created_at)}
        </time>
        <StarDisplay rating={review.rating} />
      </header>
      <p itemProp="reviewBody">{review.text}</p>
    </article>
  )
}
```

Use a single component across all product pages — never inline the review template in multiple places where fields can diverge.

## Detection

- **ID:** `review-display-complete`
- **Severity:** `medium`
- **What to look for:** Count every data field rendered per review item in the display component. For each review, classify which of the 4 required fields are present: (1) author name/identifier, (2) star rating, (3) submission date, (4) review text content. Report: X of 4 required fields rendered per review.
- **Pass criteria:** Each rendered review displays at least 4 of 4 required fields: author (name, username, or "Anonymous" fallback), rating (visual stars or numeric value), date (formatted, not raw timestamp), and text content. All reviews follow the same display template component.
- **Fail criteria:** Reviews are missing 1 or more of the 4 required fields, or different review components render inconsistent field sets across the site.
- **Skip (N/A) when:** No reviews exist or are visible on the site (no review display component found in component directories).
- **Detail on fail:** `"Reviews render 2 of 4 required fields (rating and text). Missing: author name and submission date."` or `"Author name shown but rating is missing from the ReviewItem component."`
- **Remediation:** Create a complete review display component in `components/ReviewItem.tsx`:

  ```tsx
  // components/ReviewItem.tsx
  export function ReviewItem({ review }) {
    return (
      <article className="review">
        <div className="review-header">
          <div className="author-info">
            <strong>{review.author_name || 'Anonymous'}</strong>
            <span className="date">{formatDate(review.created_at)}</span>
          </div>
          <StarDisplay rating={review.rating} />
        </div>
        <p className="review-text">{review.text}</p>
      </article>
    )
  }
  ```

## External references

- schema-org Review

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001205