@cartbase/storefront 0.18.1 → 0.20.0

package/src/reviews-ui/review-list.tsx

@@ -1,251 +1,193 @@
-"use client"
-
-import { useEffect, useState } from "react"
-import { ShieldCheck, X } from "lucide-react"
-import type { PublicReview } from "../api/reviews"
-import { useLocaleArea } from "../locales/context"
-import { defaultReviewsUiLabels, type ReviewsUiLabels } from "./labels"
-import { formatReviewDate, reviewDisplayName } from "./helpers"
-import { StarRow } from "./star-badge"
-
-/**
- * Review cards (masonry) + lightbox. Ported from the Alenika PDP reviews
- * section (src/components/product/reviews-list.tsx — the card grid +
- * `Lightbox`), presentational half: the fetch/sort/paging orchestration
- * lives in `ReviewWidget`. Data: `api/reviews` `PublicReview[]` (hidden
- * media is filtered out server-side — the client just renders what it
- * gets).
- *
- * Verified-purchaser badge is unconditional — every Cartbase review comes
- * from a tokenized post-purchase email, so the badge is a tautology of
- * the system, not an opt-in flag.
- *
- * Masonry: CSS multi-column so photo reviews (tall) and text-only reviews
- * (short) pack together without empty gaps; `break-inside-avoid` keeps
- * each card whole. Images-first ordering comes from the API's default
- * sort, so photo cards lead the flow. `layout="list"` (the store's
- * widget_layout setting) renders a single column instead.
- */
-export interface ReviewListProps {
-  reviews: PublicReview[]
-  /** Store display option (`getWidget().options.layout`). Default masonry. */
-  layout?: "masonry" | "list"
-  labels?: Partial<ReviewsUiLabels>
-  className?: string
-}
-
-export function ReviewList({
-  reviews,
-  layout = "masonry",
-  labels,
-  className,
-}: ReviewListProps) {
-  const l = { ...useLocaleArea("reviews", defaultReviewsUiLabels), ...labels }
-  // Lightbox: when set, the indicated review's media at the given index
-  // is shown full-bleed.
-  const [lightbox, setLightbox] = useState<{
-    reviewId: string
-    mediaIdx: number
-  } | null>(null)
-
-  return (
-    <>
-      <ul
-        className={
-          className ??
-          (layout === "list"
-            ? "columns-1 [column-gap:1rem]"
-            : "columns-1 sm:columns-2 lg:columns-3 xl:columns-4 [column-gap:1rem]")
-        }
-      >
-        {reviews.map((r) => {
-          const media = (r.media ?? []).filter(Boolean)
-          const hero = media[0]
-          const rest = media.slice(1)
-          return (
-            <li
-              key={r.id}
-              className="break-inside-avoid mb-4 rounded-[2px] border border-border bg-background overflow-hidden"
-            >
-              {/* Hero media on top */}
-              {hero && (
-                <button
-                  type="button"
-                  onClick={() => setLightbox({ reviewId: r.id, mediaIdx: 0 })}
-                  aria-label={hero.type === "image" ? l.showPhoto : l.playVideo}
-                  className="block w-full relative group"
-                >
-                  {hero.type === "image" ? (
-                    <img
-                      src={hero.thumb || hero.url}
-                      alt=""
-                      loading="lazy"
-                      className="block w-full h-auto object-cover transition-transform group-hover:scale-[1.02]"
-                    />
-                  ) : (
-                    <>
-                      <video
-                        src={hero.url}
-                        muted
-                        preload="metadata"
-                        className="block w-full h-auto object-cover bg-black"
-                      />
-                      <span className="absolute inset-0 flex items-center justify-center">
-                        <span className="w-11 h-11 rounded-full bg-background/80 flex items-center justify-center">
-                          <span
-                            aria-hidden
-                            className="w-0 h-0 border-y-[7px] border-y-transparent border-l-[12px] border-l-foreground ml-0.5"
-                          />
-                        </span>
-                      </span>
-                    </>
-                  )}
-                </button>
-              )}
-
-              <div className="p-4 sm:p-5">
-                <StarRow rating={r.rating} />
-
-                <div className="flex items-center flex-wrap gap-x-2 gap-y-0.5 mt-2">
-                  <span className="text-sm font-medium text-foreground">
-                    {reviewDisplayName(r.customer_name)}
-                  </span>
-                  <span
-                    className="inline-flex items-center gap-1 text-xs text-muted-foreground"
-                    title={l.verifiedTitle}
-                  >
-                    <ShieldCheck className="w-3.5 h-3.5" />
-                    {l.verified}
-                  </span>
-                  <span className="text-xs text-muted-foreground ml-auto">
-                    {formatReviewDate(r.created_at, l)}
-                  </span>
-                </div>
-
-                {r.title && (
-                  <h3 className="text-base font-semibold text-foreground leading-snug mt-3">
-                    {r.title}
-                  </h3>
-                )}
-                {r.body && (
-                  <p className="text-sm text-foreground/90 whitespace-pre-wrap leading-relaxed mt-1.5">
-                    {r.body}
-                  </p>
-                )}
-
-                {/* Extra media beyond the hero */}
-                {rest.length > 0 && (
-                  <div className="grid grid-cols-4 gap-2 mt-3">
-                    {rest.map((m, i) => (
-                      <button
-                        key={i}
-                        type="button"
-                        onClick={() =>
-                          setLightbox({ reviewId: r.id, mediaIdx: i + 1 })
-                        }
-                        aria-label={m.type === "image" ? l.showPhoto : l.playVideo}
-                        className="relative aspect-square rounded-[2px] overflow-hidden bg-muted"
-                      >
-                        {m.type === "image" ? (
-                          <img
-                            src={m.thumb || m.url}
-                            alt=""
-                            loading="lazy"
-                            className="absolute inset-0 w-full h-full object-cover"
-                          />
-                        ) : (
-                          <video
-                            src={m.url}
-                            muted
-                            preload="metadata"
-                            className="absolute inset-0 w-full h-full object-cover bg-black"
-                          />
-                        )}
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </li>
-          )
-        })}
-      </ul>
-
-      {lightbox && (
-        <ReviewLightbox
-          review={reviews.find((r) => r.id === lightbox.reviewId)}
-          mediaIdx={lightbox.mediaIdx}
-          closeLabel={l.close}
-          onClose={() => setLightbox(null)}
-        />
-      )}
-    </>
-  )
-}
-
-/** Simple full-bleed overlay for the picked media. Closes on Escape/backdrop. */
-export function ReviewLightbox({
-  review,
-  mediaIdx,
-  closeLabel,
-  onClose,
-}: {
-  review: PublicReview | undefined
-  mediaIdx: number
-  closeLabel?: string
-  onClose: () => void
-}) {
-  const fallback = useLocaleArea("reviews", defaultReviewsUiLabels)
-  // Close on Escape
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose()
-    }
-    window.addEventListener("keydown", onKey)
-    return () => window.removeEventListener("keydown", onKey)
-  }, [onClose])
-
-  if (!review) return null
-  // Index into the SAME filtered array the grid used to compute mediaIdx,
-  // so a falsy/hidden entry can't shift which item opens (production fix).
-  const items = (review.media ?? []).filter(Boolean)
-  const item = items[mediaIdx]
-  if (!item) return null
-
-  return (
-    <div
-      role="dialog"
-      aria-modal="true"
-      className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4"
-      onClick={onClose}
-    >
-      <button
-        type="button"
-        aria-label={closeLabel ?? fallback.close}
-        onClick={onClose}
-        className="absolute top-4 right-4 w-10 h-10 rounded-full bg-background/10 hover:bg-background/20 text-background flex items-center justify-center"
-      >
-        <X className="w-5 h-5" />
-      </button>
-      <div
-        className="max-w-5xl max-h-[90vh] w-full flex items-center justify-center"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {item.type === "image" ? (
-          <img
-            src={item.url}
-            alt=""
-            className="max-w-full max-h-[90vh] object-contain"
-          />
-        ) : (
-          <video
-            src={item.url}
-            controls
-            autoPlay
-            className="max-w-full max-h-[90vh]"
-          />
-        )}
-      </div>
-    </div>
-  )
-}
+"use client"
+
+import { useState } from "react"
+import { CircleCheck } from "lucide-react"
+import type { PublicReview } from "../api/reviews"
+import { useLocaleArea } from "../locales/context"
+import { defaultReviewsUiLabels, type ReviewsUiLabels } from "./labels"
+import { formatReviewDate, reviewDisplayName } from "./helpers"
+import { lightboxMedia, type LightboxPosition } from "./lightbox-state"
+import { ReviewLightbox } from "./review-lightbox"
+import { StarRow } from "./star-badge"
+
+/**
+ * Review cards (masonry) + the review lightbox. Ported from the Alenika PDP
+ * reviews section (src/components/product/reviews-list.tsx, the card
+ * grid), presentational half: the fetch/sort/paging orchestration lives in
+ * `ReviewWidget`. Data: `api/reviews` `PublicReview[]` (hidden media is
+ * filtered out server-side, the client just renders what it gets).
+ *
+ * A card (Loox's, as evoo.bg runs it): the first photo on top at its own
+ * height, then the reviewer with the verified badge, the date, the stars and
+ * the text. A click anywhere on a card opens that review in
+ * `ReviewLightbox`; a click on one of its photos opens it on that photo.
+ *
+ * Verified-purchaser badge is unconditional — every Cartbase review comes
+ * from a tokenized post-purchase email, so the badge is a tautology of
+ * the system, not an opt-in flag.
+ *
+ * Masonry: CSS multi-column so photo reviews (tall) and text-only reviews
+ * (short) pack together without empty gaps; `break-inside-avoid` keeps
+ * each card whole. Images-first ordering comes from the API's default
+ * sort, so photo cards lead the flow. `layout="list"` (the store's
+ * widget_layout setting) renders a single column instead.
+ */
+export interface ReviewListProps {
+  reviews: PublicReview[]
+  /** Store display option (`getWidget().options.layout`). Default masonry. */
+  layout?: "masonry" | "list"
+  /** The date on each card (`getWidget().options.show_date`). Default on. */
+  showDate?: boolean
+  labels?: Partial<ReviewsUiLabels>
+  className?: string
+}
+
+export function ReviewList({
+  reviews,
+  layout = "masonry",
+  showDate = true,
+  labels,
+  className,
+}: ReviewListProps) {
+  const l = { ...useLocaleArea("reviews", defaultReviewsUiLabels), ...labels }
+  const [open, setOpen] = useState<LightboxPosition | null>(null)
+
+  return (
+    <>
+      <ul
+        className={
+          className ??
+          (layout === "list"
+            ? "columns-1 [column-gap:1rem]"
+            : "columns-1 sm:columns-2 lg:columns-3 xl:columns-4 [column-gap:1rem]")
+        }
+      >
+        {reviews.map((r, index) => {
+          const media = lightboxMedia(r)
+          const hero = media[0]
+          const rest = media.slice(1)
+          return (
+            <li
+              key={r.id}
+              className="relative mb-4 break-inside-avoid overflow-hidden rounded-lg bg-card shadow-card"
+            >
+              {/* The whole card is the button; the photos sit above it. */}
+              <button
+                type="button"
+                onClick={() => setOpen({ review: index, media: 0 })}
+                aria-label={`${l.openReview}: ${reviewDisplayName(r.customer_name)}`}
+                className="absolute inset-0 z-0 cursor-pointer"
+              />
+
+              {/* Hero media on top */}
+              {hero && (
+                <button
+                  type="button"
+                  onClick={() => setOpen({ review: index, media: 0 })}
+                  aria-label={hero.type === "image" ? l.showPhoto : l.playVideo}
+                  className="relative z-10 block w-full group"
+                >
+                  {hero.type === "image" ? (
+                    <img
+                      src={hero.thumb || hero.url}
+                      alt=""
+                      loading="lazy"
+                      className="block w-full h-auto object-cover transition-transform group-hover:scale-[1.02]"
+                    />
+                  ) : (
+                    <>
+                      {/* `#t=0.001`: iOS Safari paints no first frame from
+                          `preload="metadata"` alone; the seek makes it. */}
+                      <video
+                        src={`${hero.url}#t=0.001`}
+                        muted
+                        playsInline
+                        preload="metadata"
+                        className="block w-full h-auto object-cover bg-black"
+                      />
+                      <span className="absolute inset-0 flex items-center justify-center">
+                        <span className="w-11 h-11 rounded-full bg-background/80 flex items-center justify-center">
+                          <span
+                            aria-hidden
+                            className="w-0 h-0 border-y-[7px] border-y-transparent border-l-[12px] border-l-foreground ml-0.5"
+                          />
+                        </span>
+                      </span>
+                    </>
+                  )}
+                </button>
+              )}
+
+              <div className="p-4">
+                <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
+                  <span className="text-body font-semibold text-foreground">
+                    {reviewDisplayName(r.customer_name)}
+                  </span>
+                  <span
+                    className="inline-flex items-center gap-1 text-caption text-foreground"
+                    title={l.verifiedTitle}
+                  >
+                    <CircleCheck aria-hidden className="size-4 fill-foreground text-background" />
+                    {l.verified}
+                  </span>
+                </div>
+                {showDate ? (
+                  <p className="mt-0.5 text-caption text-muted-foreground">
+                    {formatReviewDate(r.created_at, l)}
+                  </p>
+                ) : null}
+                <StarRow rating={r.rating} size="md" className="mt-2" />
+
+                {r.title && (
+                  <h3 className="mt-2 text-h6 text-foreground">{r.title}</h3>
+                )}
+                {r.body && (
+                  <p className="mt-2 whitespace-pre-wrap text-body text-foreground">{r.body}</p>
+                )}
+
+                {/* Extra media beyond the hero */}
+                {rest.length > 0 && (
+                  <div className="relative z-10 mt-3 grid grid-cols-4 gap-2">
+                    {rest.map((m, i) => (
+                      <button
+                        key={i}
+                        type="button"
+                        onClick={() => setOpen({ review: index, media: i + 1 })}
+                        aria-label={m.type === "image" ? l.showPhoto : l.playVideo}
+                        className="relative aspect-square overflow-hidden rounded-md bg-muted"
+                      >
+                        {m.type === "image" ? (
+                          <img
+                            src={m.thumb || m.url}
+                            alt=""
+                            loading="lazy"
+                            className="absolute inset-0 w-full h-full object-cover"
+                          />
+                        ) : (
+                          <video
+                            src={`${m.url}#t=0.001`}
+                            muted
+                            playsInline
+                            preload="metadata"
+                            className="absolute inset-0 w-full h-full object-cover bg-black"
+                          />
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+
+      <ReviewLightbox
+        reviews={reviews}
+        position={open}
+        onPositionChange={setOpen}
+        labels={labels}
+      />
+    </>
+  )
+}