@cartbase/storefront 0.20.0 → 0.20.1

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

@@ -1,193 +1,193 @@
-"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}
-      />
-    </>
-  )
-}
+"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-2 sm:columns-[14rem] [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}
+      />
+    </>
+  )
+}