Verified Purchases Reviews Block for React

Replace REVIEWS at the top of the file. Each review has an id, name, rating from 1 to 5, an ISO date, a title and a body, plus the purchase facts: variant, delivered (an ISO date), a masked order and verified. A guest review leaves delivered and order empty and sets verified to false. The ownership time, the "N of 6 match an order" line and both sort orders are worked out from those fields, so there are no totals to keep in step.

In this demo it means the review has an order on file in the typed data: an order line, a delivery date and a review written after delivery. The hover card lists exactly those three things, filled in from the review's own fields. Nothing is looked up. On your site, wire the same fields to your order system and keep the wording to what that system really checks.

By whole days between the delivery date and the review date, using UTC date arithmetic so the same text appears on every server and in every time zone. Under 14 days it reads in days, under 60 in weeks (to the nearest), and beyond that in months. A guest review has no delivery date, so its Owned figure says "Not stated" and "Longest owned" places it last.

Press Newest or Longest owned. The list re-orders when you press, never under the pointer, and a polite note reads out the new order. Newest sorts the ISO dates; Longest owned sorts by days owned and breaks ties by date.

The facts are always on the row: the variant, the ownership time and the order line are plain text. The hover card adds the detail of what was checked, and it opens on focus, on a keyboard press of the button and, on touch screens, on tap.

Each row stacks: the reviewer, then the stars and the words, then the purchase facts under a hairline. The ordering control sits under the count. Nothing scrolls sideways at 320 pixels, and the masked order line stays on one line.