@cartbase/storefront 0.1.0

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

@@ -0,0 +1,249 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { ShieldCheck, X } from "lucide-react"
+import type { PublicReview } from "../api/reviews"
+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 barter 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 = { ...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
+}) {
+  // 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 ?? defaultReviewsUiLabels.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>
+  )
+}

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

@@ -0,0 +1,224 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import type { StorefrontClient } from "../api/http"
+import {
+  getWidget,
+  listReviews,
+  type PublicReview,
+  type ReviewWidgetPayload,
+} from "../api/reviews"
+import { cn } from "../lib/utils"
+import { defaultReviewsUiLabels, type ReviewsUiLabels } from "./labels"
+import { sortParamsFor, type ReviewSortKey } from "./helpers"
+import { RatingDistribution, StarBadge } from "./star-badge"
+import { ReviewList } from "./review-list"
+
+/**
+ * PDP reviews widget: aggregate header (score + distribution + sort) +
+ * masonry card list + load-more. Ported from the Alenika PDP section
+ * (src/components/product/reviews-list.tsx) with the barter data seam:
+ *
+ *  - Bootstrap is ONE call — `api/reviews.getWidget(client, productId)`
+ *    (aggregate + first page sized/sorted per the store's Settings →
+ *    Reviews display options; edge-cached 60s). Server-fetch it and pass
+ *    `initialData` (recommended — no client waterfall, mirrors the
+ *    production server-fetched first page); when omitted the widget
+ *    fetches it on mount.
+ *  - Sort changes and load-more re-fetch client-side via `listReviews`
+ *    (the API enforces ordering; the client just passes params — the
+ *    default sort is with-media-first then newest).
+ *  - Aggregate fallback preserved (production fix): if the aggregate is
+ *    missing but reviews loaded, derive avg + distribution from the
+ *    loaded page rather than showing a misleading "0.0" next to a filled
+ *    star. The whole section renders null only when there are genuinely
+ *    zero reviews.
+ *
+ * Settings that shape it (admin → Settings → Reviews): `widget_layout`
+ * (masonry|list), `widget_page_size`, `widget_photo_first` — all arrive
+ * via `getWidget().options`; moderation decides what is visible at all.
+ */
+export interface ReviewWidgetProps {
+  client: StorefrontClient
+  productId: string
+  /** Server-fetched `getWidget` payload (recommended). */
+  initialData?: ReviewWidgetPayload | null
+  labels?: Partial<ReviewsUiLabels>
+  className?: string
+}
+
+export function ReviewWidget({
+  client,
+  productId,
+  initialData,
+  labels,
+  className,
+}: ReviewWidgetProps) {
+  const l = { ...defaultReviewsUiLabels, ...labels }
+  const [data, setData] = useState<ReviewWidgetPayload | null>(
+    initialData ?? null
+  )
+  const [sort, setSort] = useState<ReviewSortKey>("default")
+  const [reviews, setReviews] = useState<PublicReview[]>(
+    initialData?.reviews ?? []
+  )
+  const [count, setCount] = useState<number>(initialData?.count ?? 0)
+  const [hasMore, setHasMore] = useState<boolean>(initialData?.has_more ?? false)
+  const [loading, setLoading] = useState(false)
+
+  const pageSize = data?.options.page_size ?? 10
+
+  // No server-provided bootstrap → fetch it on mount.
+  useEffect(() => {
+    if (initialData) return
+    let cancelled = false
+    ;(async () => {
+      try {
+        const payload = await getWidget(client, productId)
+        if (cancelled) return
+        setData(payload)
+        setReviews(payload.reviews)
+        setCount(payload.count)
+        setHasMore(payload.has_more)
+      } catch {
+        /* widget is decorative — a failed bootstrap renders nothing */
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [client, productId])
+
+  // Re-fetch the first page whenever the sort changes (post-mount only —
+  // the bootstrap page covers sort='default', so no extra round-trip).
+  useEffect(() => {
+    if (sort === "default") return
+    let cancelled = false
+    setLoading(true)
+    ;(async () => {
+      try {
+        const params = sortParamsFor(sort)
+        const res = await listReviews(client, {
+          product_id: productId,
+          ...params,
+          limit: pageSize,
+          offset: 0,
+        })
+        if (cancelled) return
+        setReviews(res.reviews)
+        setCount(res.count)
+        setHasMore(res.has_more)
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sort, productId, pageSize])
+
+  const loadMore = useCallback(async () => {
+    setLoading(true)
+    try {
+      const params = sortParamsFor(sort)
+      const res = await listReviews(client, {
+        product_id: productId,
+        ...params,
+        limit: pageSize,
+        offset: reviews.length,
+      })
+      setReviews((prev) => [...prev, ...res.reviews])
+      setCount(res.count)
+      setHasMore(res.has_more)
+    } finally {
+      setLoading(false)
+    }
+  }, [client, productId, sort, pageSize, reviews.length])
+
+  // Header summary uses the full aggregate when available; else derive
+  // from the loaded reviews (see the header comment).
+  const aggregate = data?.aggregate ?? null
+  const total = aggregate?.count ?? count
+  const avg =
+    aggregate?.avg_rating ??
+    (reviews.length
+      ? reviews.reduce((s, r) => s + r.rating, 0) / reviews.length
+      : 0)
+  const distribution =
+    aggregate?.distribution ??
+    reviews.reduce(
+      (d, r) => {
+        const key = String(r.rating) as "1" | "2" | "3" | "4" | "5"
+        if (key in d) d[key]++
+        return d
+      },
+      { "1": 0, "2": 0, "3": 0, "4": 0, "5": 0 } as Record<
+        "1" | "2" | "3" | "4" | "5",
+        number
+      >
+    )
+
+  if (total === 0) {
+    return null // Hide the section entirely when there are no reviews
+  }
+
+  return (
+    <section
+      id="reviews"
+      className={
+        className ?? "max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-10 my-16 sm:my-24"
+      }
+    >
+      <header className="mb-10">
+        <h2 className="text-2xl sm:text-3xl font-semibold text-foreground mb-6">
+          {l.sectionTitle}
+        </h2>
+
+        <div className="flex flex-col md:flex-row md:items-center gap-6 md:gap-12">
+          <StarBadge
+            aggregate={{ count: total, avg_rating: avg }}
+            labels={l}
+          />
+
+          <RatingDistribution distribution={distribution} total={total} />
+
+          <select
+            value={sort}
+            onChange={(e) => setSort(e.target.value as ReviewSortKey)}
+            aria-label={l.sortAria}
+            className="md:ml-auto md:self-start px-3 py-2 rounded-[2px] border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/30"
+          >
+            <option value="default">{l.sortDefault}</option>
+            <option value="date">{l.sortNewest}</option>
+            <option value="rating-desc">{l.sortRatingDesc}</option>
+            <option value="rating-asc">{l.sortRatingAsc}</option>
+          </select>
+        </div>
+      </header>
+
+      <ReviewList
+        reviews={reviews}
+        layout={data?.options.layout ?? "masonry"}
+        labels={l}
+      />
+
+      {hasMore && (
+        <div className="mt-8 text-center">
+          <button
+            type="button"
+            onClick={loadMore}
+            disabled={loading}
+            className={cn(
+              "inline-flex items-center justify-center px-6 py-2.5 rounded-[2px] border border-border text-sm font-medium transition-colors",
+              loading ? "opacity-50 cursor-not-allowed" : "hover:bg-muted"
+            )}
+          >
+            {loading ? l.loading : l.loadMore}
+          </button>
+        </div>
+      )}
+    </section>
+  )
+}