@cartbase/storefront 0.20.0 → 0.20.1

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

@@ -1,271 +1,271 @@
-"use client"
-
-import { useEffect, type ReactNode } from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { ChevronLeft, ChevronRight, CircleCheck, Info, X } from "lucide-react"
-import type { PublicReview } from "../api/reviews"
-import { cn } from "../lib/utils"
-import { useLocaleArea } from "../locales/context"
-import { DialogOverlay, DialogPortal } from "../primitives/ui/dialog"
-import { Popover, PopoverContent, PopoverTrigger } from "../primitives/ui/popover"
-import { formatLabel, formatReviewDate, reviewDisplayName } from "./helpers"
-import { defaultReviewsUiLabels, type ReviewsUiLabels } from "./labels"
-import { lightboxMedia, stepLightbox, type LightboxPosition } from "./lightbox-state"
-import { StarRow } from "./star-badge"
-
-/**
- * The review lightbox: one review, whole. The photo or video on the left
- * over a blurred copy of itself, the review on the right: the reviewer's
- * name, "Verified" with a button that says what it means, the stars, the
- * date, the text and the store's reply. On a phone the photo sits on top
- * and the review scrolls under it.
- *
- * Every widget that shows reviews opens this one: it takes the widget's
- * own list and a position, so the arrows (and the arrow keys) walk through
- * the open review's photos and then on to the next review. The dots jump
- * between one review's photos. Built on the package's Dialog (focus trap,
- * scroll lock, Escape and a click outside close it).
- *
- *   const [open, setOpen] = useState<LightboxPosition | null>(null)
- *   <ReviewLightbox reviews={reviews} position={open} onPositionChange={setOpen} />
- *
- * Alenika's production fixes are kept: the media index counts from the
- * same filtered list the cards use, and a video plays inline on iPhone
- * with its controls as the answer to a blocked autoplay.
- */
-export interface ReviewLightboxProps {
-  /** The reviews the opening widget shows, in its order. */
-  reviews: PublicReview[]
-  /** The open review and which of its photos; null when closed. */
-  position: LightboxPosition | null
-  /** The new position when the shopper steps, null when they close. */
-  onPositionChange: (position: LightboxPosition | null) => void
-  labels?: Partial<ReviewsUiLabels>
-}
-
-export function ReviewLightbox({ reviews, position, onPositionChange, labels }: ReviewLightboxProps) {
-  const l = { ...useLocaleArea("reviews", defaultReviewsUiLabels), ...labels }
-  const review = position ? reviews[position.review] : undefined
-  const media = lightboxMedia(review)
-  const item = position ? media[position.media] : undefined
-  const previous = position ? stepLightbox(reviews, position, -1) : null
-  const next = position ? stepLightbox(reviews, position, 1) : null
-
-  // The arrow keys step as the arrows do; a video keeps its own keys.
-  useEffect(() => {
-    if (!position) return
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return
-      if ((event.target as HTMLElement | null)?.closest?.("video, input, textarea, select")) return
-      const to = stepLightbox(reviews, position, event.key === "ArrowLeft" ? -1 : 1)
-      if (to) onPositionChange(to)
-    }
-    window.addEventListener("keydown", onKey)
-    return () => window.removeEventListener("keydown", onKey)
-  }, [position, reviews, onPositionChange])
-
-  const name = review ? reviewDisplayName(review.customer_name) : ""
-  const stepping = Boolean(previous || next)
-
-  return (
-    <DialogPrimitive.Root
-      open={Boolean(review)}
-      onOpenChange={(open) => {
-        if (!open) onPositionChange(null)
-      }}
-    >
-      <DialogPortal>
-        <DialogOverlay />
-        <DialogPrimitive.Content
-          aria-describedby={undefined}
-          className={cn(
-            "fixed inset-0 z-50 outline-none data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
-            "md:inset-auto md:left-1/2 md:top-1/2 md:w-[calc(100%-10rem)] md:-translate-x-1/2 md:-translate-y-1/2 md:data-[state=open]:zoom-in-95 md:data-[state=closed]:zoom-out-95",
-            item ? "md:max-w-[55rem]" : "md:max-w-lg"
-          )}
-        >
-          {review ? (
-            <>
-              <DialogPrimitive.Close
-                aria-label={l.close}
-                className={cn(
-                  "absolute left-4 top-4 z-10 flex size-10 items-center justify-center rounded-md transition-colors",
-                  item
-                    ? "bg-black/40 text-white hover:bg-black/55"
-                    : "bg-muted text-foreground hover:bg-border"
-                )}
-              >
-                <X className="size-5" />
-              </DialogPrimitive.Close>
-
-              <div
-                className={cn(
-                  "flex h-full flex-col overflow-y-auto bg-background md:overflow-hidden md:rounded-lg md:shadow-popover",
-                  item ? "md:h-[min(40rem,calc(100dvh-4rem))] md:flex-row" : "md:h-auto md:max-h-[calc(100dvh-4rem)]"
-                )}
-              >
-                {item && position ? (
-                  <div className="relative flex h-[min(60vh,32rem)] shrink-0 items-center justify-center overflow-hidden bg-muted md:h-full md:w-[54%]">
-                    {item.type === "image" ? (
-                      <>
-                        <img
-                          src={item.url}
-                          alt=""
-                          aria-hidden
-                          className="pointer-events-none absolute inset-0 size-full scale-110 object-cover blur-2xl"
-                        />
-                        <img
-                          key={item.url}
-                          src={item.url}
-                          alt={formatLabel(l.mediaAlt, {
-                            n: position.media + 1,
-                            total: media.length,
-                            name,
-                          })}
-                          className="relative size-full object-contain"
-                        />
-                      </>
-                    ) : (
-                      <video
-                        key={item.url}
-                        src={`${item.url}#t=0.001`}
-                        controls
-                        autoPlay
-                        playsInline
-                        preload="metadata"
-                        className="relative size-full bg-black object-contain"
-                      />
-                    )}
-
-                    {media.length > 1 ? (
-                      <div
-                        className={cn(
-                          "absolute inset-x-0 flex justify-center gap-1.5",
-                          item.type === "video" ? "top-4" : "bottom-4"
-                        )}
-                      >
-                        {media.map((entry, index) => (
-                          <button
-                            key={`${entry.url}-${index}`}
-                            type="button"
-                            aria-label={formatLabel(l.showMediaAt, { n: index + 1 })}
-                            aria-current={index === position.media}
-                            onClick={() => onPositionChange({ review: position.review, media: index })}
-                            className={cn(
-                              "size-2 rounded-full ring-1 ring-black/20 transition-colors",
-                              index === position.media ? "bg-white" : "bg-white/50 hover:bg-white/80"
-                            )}
-                          />
-                        ))}
-                      </div>
-                    ) : null}
-                  </div>
-                ) : null}
-
-                <div
-                  className={cn(
-                    "flex min-w-0 flex-1 flex-col gap-4 p-6 md:overflow-y-auto md:p-7",
-                    !item && "pt-16 md:pt-16",
-                    stepping && "pb-20 md:pb-7"
-                  )}
-                >
-                  <div className="flex flex-col gap-1.5">
-                    <div className="flex items-center justify-between gap-3">
-                      <DialogPrimitive.Title className="min-w-0 truncate text-body text-foreground">
-                        {name}
-                      </DialogPrimitive.Title>
-                      <div className="flex shrink-0 items-center gap-2 text-body-small text-foreground">
-                        <span className="flex items-center gap-1.5">
-                          <CircleCheck aria-hidden className="size-4.5 fill-foreground text-background" />
-                          {l.verified}
-                        </span>
-                        <span aria-hidden className="h-5 w-px bg-border" />
-                        <Popover>
-                          <PopoverTrigger
-                            aria-label={l.verifiedInfo}
-                            className="flex size-7 items-center justify-center rounded-full transition-colors hover:bg-muted"
-                          >
-                            <Info className="size-4.5" />
-                          </PopoverTrigger>
-                          <PopoverContent align="end" className="w-64 text-body-small">
-                            {l.verifiedTitle}
-                          </PopoverContent>
-                        </Popover>
-                      </div>
-                    </div>
-                    <div className="flex items-center justify-between gap-3">
-                      <StarRow rating={review.rating} size="lg" />
-                      <span className="shrink-0 text-caption text-muted-foreground">
-                        {formatReviewDate(review.created_at, l)}
-                      </span>
-                    </div>
-                  </div>
-
-                  {review.title ? <p className="text-h6 text-foreground">{review.title}</p> : null}
-                  {review.body ? (
-                    <p className="whitespace-pre-wrap text-body text-foreground">{review.body}</p>
-                  ) : null}
-
-                  {review.admin_response ? (
-                    <div className="rounded-md bg-muted p-4">
-                      <p className="text-caption text-muted-foreground">{l.storeReply}</p>
-                      <p className="mt-1 whitespace-pre-wrap text-body-small text-foreground">
-                        {review.admin_response}
-                      </p>
-                    </div>
-                  ) : null}
-                </div>
-              </div>
-
-              {previous ? (
-                <StepButton
-                  label={l.previous}
-                  onClick={() => onPositionChange(previous)}
-                  className="bottom-4 left-4 md:-left-14"
-                >
-                  <ChevronLeft className="size-5" />
-                </StepButton>
-              ) : null}
-              {next ? (
-                <StepButton
-                  label={l.next}
-                  onClick={() => onPositionChange(next)}
-                  className="bottom-4 right-4 md:-right-14"
-                >
-                  <ChevronRight className="size-5" />
-                </StepButton>
-              ) : null}
-            </>
-          ) : null}
-        </DialogPrimitive.Content>
-      </DialogPortal>
-    </DialogPrimitive.Root>
-  )
-}
-
-/** A round arrow: in the bottom corners on a phone, beside the card on a wider screen. */
-function StepButton({
-  label,
-  onClick,
-  className,
-  children,
-}: {
-  label: string
-  onClick: () => void
-  className: string
-  children: ReactNode
-}) {
-  return (
-    <button
-      type="button"
-      aria-label={label}
-      onClick={onClick}
-      className={cn(
-        "absolute z-10 flex size-10 items-center justify-center rounded-full bg-background text-foreground shadow-popover transition-colors hover:bg-muted md:bottom-auto md:top-1/2 md:-translate-y-1/2",
-        className
-      )}
-    >
-      {children}
-    </button>
-  )
-}
+"use client"
+
+import { useEffect, type ReactNode } from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { ChevronLeft, ChevronRight, CircleCheck, Info, X } from "lucide-react"
+import type { PublicReview } from "../api/reviews"
+import { cn } from "../lib/utils"
+import { useLocaleArea } from "../locales/context"
+import { DialogOverlay, DialogPortal } from "../primitives/ui/dialog"
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/ui/popover"
+import { formatLabel, formatReviewDate, reviewDisplayName } from "./helpers"
+import { defaultReviewsUiLabels, type ReviewsUiLabels } from "./labels"
+import { lightboxMedia, stepLightbox, type LightboxPosition } from "./lightbox-state"
+import { StarRow } from "./star-badge"
+
+/**
+ * The review lightbox: one review, whole. The photo or video on the left
+ * over a blurred copy of itself, the review on the right: the reviewer's
+ * name, "Verified" with a button that says what it means, the stars, the
+ * date, the text and the store's reply. On a phone the photo sits on top
+ * and the review scrolls under it.
+ *
+ * Every widget that shows reviews opens this one: it takes the widget's
+ * own list and a position, so the arrows (and the arrow keys) walk through
+ * the open review's photos and then on to the next review. The dots jump
+ * between one review's photos. Built on the package's Dialog (focus trap,
+ * scroll lock, Escape and a click outside close it).
+ *
+ *   const [open, setOpen] = useState<LightboxPosition | null>(null)
+ *   <ReviewLightbox reviews={reviews} position={open} onPositionChange={setOpen} />
+ *
+ * Alenika's production fixes are kept: the media index counts from the
+ * same filtered list the cards use, and a video plays inline on iPhone
+ * with its controls as the answer to a blocked autoplay.
+ */
+export interface ReviewLightboxProps {
+  /** The reviews the opening widget shows, in its order. */
+  reviews: PublicReview[]
+  /** The open review and which of its photos; null when closed. */
+  position: LightboxPosition | null
+  /** The new position when the shopper steps, null when they close. */
+  onPositionChange: (position: LightboxPosition | null) => void
+  labels?: Partial<ReviewsUiLabels>
+}
+
+export function ReviewLightbox({ reviews, position, onPositionChange, labels }: ReviewLightboxProps) {
+  const l = { ...useLocaleArea("reviews", defaultReviewsUiLabels), ...labels }
+  const review = position ? reviews[position.review] : undefined
+  const media = lightboxMedia(review)
+  const item = position ? media[position.media] : undefined
+  const previous = position ? stepLightbox(reviews, position, -1) : null
+  const next = position ? stepLightbox(reviews, position, 1) : null
+
+  // The arrow keys step as the arrows do; a video keeps its own keys.
+  useEffect(() => {
+    if (!position) return
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return
+      if ((event.target as HTMLElement | null)?.closest?.("video, input, textarea, select")) return
+      const to = stepLightbox(reviews, position, event.key === "ArrowLeft" ? -1 : 1)
+      if (to) onPositionChange(to)
+    }
+    window.addEventListener("keydown", onKey)
+    return () => window.removeEventListener("keydown", onKey)
+  }, [position, reviews, onPositionChange])
+
+  const name = review ? reviewDisplayName(review.customer_name) : ""
+  const stepping = Boolean(previous || next)
+
+  return (
+    <DialogPrimitive.Root
+      open={Boolean(review)}
+      onOpenChange={(open) => {
+        if (!open) onPositionChange(null)
+      }}
+    >
+      <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+          aria-describedby={undefined}
+          className={cn(
+            "fixed inset-0 z-50 outline-none data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+            "md:inset-auto md:left-1/2 md:top-1/2 md:w-[calc(100%-10rem)] md:-translate-x-1/2 md:-translate-y-1/2 md:data-[state=open]:zoom-in-95 md:data-[state=closed]:zoom-out-95",
+            item ? "md:max-w-[55rem]" : "md:max-w-lg"
+          )}
+        >
+          {review ? (
+            <>
+              <DialogPrimitive.Close
+                aria-label={l.close}
+                className={cn(
+                  "absolute left-4 top-4 z-10 flex size-10 items-center justify-center rounded-md transition-colors",
+                  item
+                    ? "bg-black/40 text-white hover:bg-black/55"
+                    : "bg-muted text-foreground hover:bg-border"
+                )}
+              >
+                <X className="size-5" />
+              </DialogPrimitive.Close>
+
+              <div
+                className={cn(
+                  "flex h-full flex-col overflow-y-auto bg-background md:overflow-hidden md:rounded-lg md:shadow-popover",
+                  item ? "md:h-[min(40rem,calc(100dvh-4rem))] md:flex-row" : "md:h-auto md:max-h-[calc(100dvh-4rem)]"
+                )}
+              >
+                {item && position ? (
+                  <div className="relative flex h-[min(60vh,32rem)] shrink-0 items-center justify-center overflow-hidden bg-muted md:h-full md:w-[54%]">
+                    {item.type === "image" ? (
+                      <>
+                        <img
+                          src={item.url}
+                          alt=""
+                          aria-hidden
+                          className="pointer-events-none absolute inset-0 size-full scale-110 object-cover blur-2xl"
+                        />
+                        <img
+                          key={item.url}
+                          src={item.url}
+                          alt={formatLabel(l.mediaAlt, {
+                            n: position.media + 1,
+                            total: media.length,
+                            name,
+                          })}
+                          className="relative size-full object-contain"
+                        />
+                      </>
+                    ) : (
+                      <video
+                        key={item.url}
+                        src={`${item.url}#t=0.001`}
+                        controls
+                        autoPlay
+                        playsInline
+                        preload="metadata"
+                        className="relative size-full bg-black object-contain"
+                      />
+                    )}
+
+                    {media.length > 1 ? (
+                      <div
+                        className={cn(
+                          "absolute inset-x-0 flex justify-center gap-1.5",
+                          item.type === "video" ? "top-4" : "bottom-4"
+                        )}
+                      >
+                        {media.map((entry, index) => (
+                          <button
+                            key={`${entry.url}-${index}`}
+                            type="button"
+                            aria-label={formatLabel(l.showMediaAt, { n: index + 1 })}
+                            aria-current={index === position.media}
+                            onClick={() => onPositionChange({ review: position.review, media: index })}
+                            className={cn(
+                              "size-2 rounded-full ring-1 ring-black/20 transition-colors",
+                              index === position.media ? "bg-white" : "bg-white/50 hover:bg-white/80"
+                            )}
+                          />
+                        ))}
+                      </div>
+                    ) : null}
+                  </div>
+                ) : null}
+
+                <div
+                  className={cn(
+                    "flex min-w-0 flex-1 flex-col gap-4 p-6 md:overflow-y-auto md:p-7",
+                    !item && "pt-16 md:pt-16",
+                    stepping && "pb-20 md:pb-7"
+                  )}
+                >
+                  <div className="flex flex-col gap-1.5">
+                    <div className="flex items-center justify-between gap-3">
+                      <DialogPrimitive.Title className="min-w-0 truncate text-body text-foreground">
+                        {name}
+                      </DialogPrimitive.Title>
+                      <div className="flex shrink-0 items-center gap-2 text-body-small text-foreground">
+                        <span className="flex items-center gap-1.5">
+                          <CircleCheck aria-hidden className="size-4.5 fill-foreground text-background" />
+                          {l.verified}
+                        </span>
+                        <span aria-hidden className="h-5 w-px bg-border" />
+                        <Popover>
+                          <PopoverTrigger
+                            aria-label={l.verifiedInfo}
+                            className="flex size-7 items-center justify-center rounded-full transition-colors hover:bg-muted"
+                          >
+                            <Info className="size-4.5" />
+                          </PopoverTrigger>
+                          <PopoverContent align="end" className="w-64 text-body-small">
+                            {l.verifiedTitle}
+                          </PopoverContent>
+                        </Popover>
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-between gap-3">
+                      <StarRow rating={review.rating} size="lg" />
+                      <span className="shrink-0 text-caption text-muted-foreground">
+                        {formatReviewDate(review.created_at, l)}
+                      </span>
+                    </div>
+                  </div>
+
+                  {review.title ? <p className="text-h6 text-foreground">{review.title}</p> : null}
+                  {review.body ? (
+                    <p className="whitespace-pre-wrap text-body text-foreground">{review.body}</p>
+                  ) : null}
+
+                  {review.admin_response ? (
+                    <div className="rounded-md bg-muted p-4">
+                      <p className="text-caption text-muted-foreground">{l.storeReply}</p>
+                      <p className="mt-1 whitespace-pre-wrap text-body-small text-foreground">
+                        {review.admin_response}
+                      </p>
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+
+              {previous ? (
+                <StepButton
+                  label={l.previous}
+                  onClick={() => onPositionChange(previous)}
+                  className="bottom-4 left-4 md:-left-14"
+                >
+                  <ChevronLeft className="size-5" />
+                </StepButton>
+              ) : null}
+              {next ? (
+                <StepButton
+                  label={l.next}
+                  onClick={() => onPositionChange(next)}
+                  className="bottom-4 right-4 md:-right-14"
+                >
+                  <ChevronRight className="size-5" />
+                </StepButton>
+              ) : null}
+            </>
+          ) : null}
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    </DialogPrimitive.Root>
+  )
+}
+
+/** A round arrow: in the bottom corners on a phone, beside the card on a wider screen. */
+function StepButton({
+  label,
+  onClick,
+  className,
+  children,
+}: {
+  label: string
+  onClick: () => void
+  className: string
+  children: ReactNode
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      onClick={onClick}
+      className={cn(
+        "absolute z-10 flex size-10 items-center justify-center rounded-full bg-background text-foreground shadow-popover transition-colors hover:bg-muted md:bottom-auto md:top-1/2 md:-translate-y-1/2",
+        className
+      )}
+    >
+      {children}
+    </button>
+  )
+}