Review submission form is present and accessible

Without a review submission form, buyers have no path to contribute social proof, and the store loses the user-generated content that drives conversion on product pages. Missing or incomplete forms also break schema.org AggregateRating eligibility, which strips star snippets from Google search results and reduces click-through. Shoppers who cannot review also cannot warn others about defects, so trust signals stagnate and repeat purchase rates drop.

Build a review submission form at components/ReviewForm.tsx exposing at minimum a 1-5 star rating input, a text area for the review body, and a submit button wired to a POST handler. Mount it on product pages or a dedicated /products/:id/review route, and render inline error and success states:

<form onSubmit={handleSubmit}>
  <StarInput value={rating} onChange={setRating} required />
  <textarea value={text} onChange={(e) => setText(e.target.value)} required />
  <button type="submit">Submit Review</button>
</form>

• ID: ecommerce-reviews.review-collection.submission-form-exists

• Severity: critical

• What to look for: Enumerate all product page components and review-related routes. For each, classify whether it contains a review submission form. Count the number of form fields present (rating input, text area, submit button, error/success messaging).

• Pass criteria: A review submission form with at least 3 form elements (rating input, text area, submit button) is present on product pages or accessible via a dedicated route such as /products/:id/review or a modal trigger. The form must include a rating input (1-5 stars) and a text area for review body content.

• Fail criteria: No review submission form exists anywhere in the codebase, or the form exists but has fewer than 3 required elements (rating input, text area, submit button). Do not pass when a form component file exists but contains only a placeholder or TODO comment.

• Skip (N/A) when: Search package.json dependencies and all component directories for review-related terms (review, rating, feedback). If no review/rating functionality exists and the project is not an e-commerce site, skip.

• Detail on fail: Describe what's missing with the count. Example: "Found 1 of 3 required form elements (text area only, no star rating or submit button). Review form at components/ReviewForm.tsx is incomplete." or "No review submission form found across 12 product page components."

• Cross-reference: Related to ecommerce-reviews.review-collection.star-input-accessible (accessibility of the rating input) and ecommerce-reviews.display-ux.aggregate-rating-visible (display of collected ratings).

• Remediation: Create a review submission form in components/ReviewForm.tsx with at minimum a star rating input (1-5 stars), a text area for review content, and a submit button. Use accessible components like radio buttons or a visually clear star picker:

  // components/ReviewForm.tsx
  export function ReviewForm({ productId }) {
    const [rating, setRating] = useState(0)
    const [text, setText] = useState('')
  
    return (
      <form onSubmit={handleSubmit}>
        <label>Rating</label>
        <StarInput value={rating} onChange={setRating} />
  
        <label>Your Review</label>
        <textarea value={text} onChange={(e) => setText(e.target.value)} />
  
        <button type="submit">Submit Review</button>
      </form>
    )
  }