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

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.

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

// 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.

• ID: ecommerce-reviews.display-ux.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:

  // 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>
    )
  }