@cartbase/storefront 0.1.0

package/src/reviews-ui/labels-bg.ts

@@ -0,0 +1,91 @@
+import type { ReviewsUiLabels } from "./labels"
+
+/**
+ * Bulgarian reviews-UI labels — the EXACT Alenika production copy, lifted
+ * from src/components/product/reviews-list.tsx, src/app/(main)/review/
+ * [token]/page.tsx and review-form.tsx (where it shipped hardcoded), with
+ * the numbers/emails parameterized into `{placeholder}` slots.
+ */
+export const bulgarianReviewsUiLabels: ReviewsUiLabels = {
+  sectionTitle: "Отзиви",
+  reviewSingular: "отзив",
+  reviewPlural: "отзива",
+  sortAria: "Сортирай",
+  sortDefault: "Препоръчани",
+  sortNewest: "Най-нови",
+  sortRatingDesc: "Най-високи оценки",
+  sortRatingAsc: "Най-ниски оценки",
+  verified: "Потвърден",
+  verifiedTitle: "Истински купувач, потвърден чрез линк от поръчка",
+  loadMore: "Покажи още",
+  loading: "Зарежда...",
+  dateToday: "днес",
+  dateYesterday: "вчера",
+  dateDaysAgo: "преди {n} дни",
+  showPhoto: "Покажи снимка",
+  playVideo: "Пусни видео",
+  close: "Затвори",
+  expiredTitle: "Този линк за отзив е изтекъл",
+  expiredBody:
+    "Линкът беше валиден 60 дни от датата на покупката. Ако искаш да оставиш отзив, пиши ни на {email}.",
+  invalidTitle: "Този линк за отзив не е валиден",
+  invalidBody:
+    "Възможно е да си натиснал/а на стар линк. Ако имаш въпроси, пиши ни на {email}.",
+  alreadyTitle: "Благодарим за отзива!",
+  alreadyBodyWithProduct: "Вече сме получили твоя отзив за {name}.",
+  alreadyBody: "Този отзив вече е изпратен.",
+  greeting: "Здравей",
+  headingRate: "Сподели мнението си",
+  headingPhoto: "Остана само една крачка",
+  introRate:
+    "Кратък отзив с твоето мнение помага на хора, които сега обмислят същия избор.",
+  introPhoto:
+    "Оценката ти е запазена. Добави снимка на продукта и получаваш {pct}% отстъпка за следващата поръчка.",
+  productLabel: "Продукт",
+  ratingLabel: "Оценка",
+  ratingOutOf: "{n} от 5",
+  ratingAria: "{n} от 5 звезди",
+  bodyLabel: "Какво ти хареса или не?",
+  bodyPlaceholder:
+    "Опиши с твои думи. Колкото повече детайл, толкова по-полезно за следващите.",
+  consentNote:
+    "Изпращайки отзива, се съгласяваш да го публикуваме на страницата на продукта.",
+  continue: "Продължи",
+  submitting: "Изпращане...",
+  bonusBadge: "Бонус",
+  photoTitle: "Покажи ни го, вземи подарък {pct}%",
+  photoSubtitle:
+    "Добави снимка или кратко видео на продукта и ти подаряваме {pct}% отстъпка за следваща поръчка.",
+  dropHint: "Пусни файлове тук или кликни, за да избереш",
+  dropLimits: "До {n} снимки (JPG/PNG/WEBP, 8 MB), 1 видео (MP4/MOV, 50 MB, 60 сек)",
+  skip: "Пропусни",
+  skipAria: "Пропусни",
+  submitPhoto: "Изпрати и вземи {pct}%",
+  waitingUpload: "Изчакай качването...",
+  remove: "Премахни",
+  thanksTitle: "Благодарим!",
+  thanksBody: "Отзивът ти е получен и вече е публикуван на страницата на продукта.",
+  rewardTitle: "Твоята отстъпка от {pct}%",
+  copy: "Копирай",
+  copied: "Копирано",
+  copyAria: "Копирай кода",
+  rewardNote:
+    "Изпратихме кода и на имейла ти. Използвай го при следващата си поръчка - валиден е за еднократна употреба.",
+  codeUnavailable:
+    "Снимката е запазена. Възникна проблем с генерирането на кода за отстъпка - пиши ни на {email} и веднага ще ти го изпратим.",
+  viewProduct: "Виж продукта",
+  toStore: "Към магазина",
+  errUnsupported: "Файлът {name} не е поддържан формат.",
+  errMaxImages: "Максимум {n} снимки.",
+  errImageTooLarge: "Снимката {name} е по-голяма от {mb} MB.",
+  errMaxVideos: "Максимум {n} видео.",
+  errVideoTooLarge: "Видеото е по-голямо от {mb} MB.",
+  errVideoTooLong: "Видеото е по-дълго от {s} секунди.",
+  errVideoMeta: "Не успяхме да прочетем продължителността на видеото.",
+  errUploadFailed: "Качването на {name} не успя. Опитай отново.",
+  errRateLimited: "Изпратени са твърде много отзиви от този адрес. Опитай по-късно.",
+  errAlreadySubmitted: "Този отзив вече е изпратен.",
+  errExpired: "Линкът за отзив е изтекъл.",
+  errGeneric: "Нещо се обърка. Опитай отново.",
+  errPhotoSave: "Снимката не можа да се запази. Опитай отново.",
+}

package/src/reviews-ui/labels.ts

@@ -0,0 +1,199 @@
+/**
+ * Reviews UI label pack. The Alenika production storefront shipped this
+ * copy hardcoded in Bulgarian (src/components/product/reviews-list.tsx +
+ * src/app/(main)/review/[token]/review-form.tsx); the barter port lifts
+ * every string into the family's labels/labels-bg discipline. English
+ * defaults here; the exact production Bulgarian copy in `labels-bg.ts`.
+ *
+ * Templates use `{placeholder}` slots resolved via `formatLabel()`
+ * (helpers.ts): `{n}`, `{name}`, `{mb}`, `{s}`, `{pct}`, `{email}`.
+ */
+export type ReviewsUiLabels = {
+  // — list / widget —
+  sectionTitle: string
+  /** "1 review" singular noun. */
+  reviewSingular: string
+  /** "N reviews" plural noun. */
+  reviewPlural: string
+  sortAria: string
+  sortDefault: string
+  sortNewest: string
+  sortRatingDesc: string
+  sortRatingAsc: string
+  verified: string
+  verifiedTitle: string
+  loadMore: string
+  loading: string
+  dateToday: string
+  dateYesterday: string
+  /** `{n}` = day count. */
+  dateDaysAgo: string
+  showPhoto: string
+  playVideo: string
+  close: string
+  // — wizard: entry states (ported from the alenika /review/[token] page) —
+  expiredTitle: string
+  /** `{email}` = store support email. */
+  expiredBody: string
+  invalidTitle: string
+  /** `{email}` = store support email. */
+  invalidBody: string
+  /** Terminal "thanks" panel: consumed token with NO review row. */
+  alreadyTitle: string
+  /** `{name}` = product title. */
+  alreadyBodyWithProduct: string
+  alreadyBody: string
+  /** Greeting prefix — the component appends ", {firstName}". */
+  greeting: string
+  headingRate: string
+  headingPhoto: string
+  introRate: string
+  /** `{pct}` = reward percentage. */
+  introPhoto: string
+  productLabel: string
+  // — wizard: rate step —
+  ratingLabel: string
+  /** `{n}` = chosen rating. */
+  ratingOutOf: string
+  /** `{n}` = star value (aria). */
+  ratingAria: string
+  bodyLabel: string
+  bodyPlaceholder: string
+  consentNote: string
+  continue: string
+  submitting: string
+  // — wizard: photo step —
+  bonusBadge: string
+  /** `{pct}` = reward percentage. */
+  photoTitle: string
+  /** `{pct}` = reward percentage. */
+  photoSubtitle: string
+  dropHint: string
+  /** `{n}` = max images. */
+  dropLimits: string
+  skip: string
+  skipAria: string
+  /** `{pct}` = reward percentage. */
+  submitPhoto: string
+  waitingUpload: string
+  remove: string
+  // — wizard: done step —
+  thanksTitle: string
+  thanksBody: string
+  /** `{pct}` = reward percentage. */
+  rewardTitle: string
+  copy: string
+  copied: string
+  copyAria: string
+  rewardNote: string
+  /** `{email}` = store support email. */
+  codeUnavailable: string
+  viewProduct: string
+  toStore: string
+  // — upload errors —
+  /** `{name}` = file name. */
+  errUnsupported: string
+  /** `{n}` = max images. */
+  errMaxImages: string
+  /** `{name}` file, `{mb}` cap. */
+  errImageTooLarge: string
+  /** `{n}` = max videos. */
+  errMaxVideos: string
+  /** `{mb}` = cap. */
+  errVideoTooLarge: string
+  /** `{s}` = max seconds. */
+  errVideoTooLong: string
+  errVideoMeta: string
+  /** `{name}` = file name. */
+  errUploadFailed: string
+  // — submit errors (status → copy map, wizard-state.ts) —
+  errRateLimited: string
+  errAlreadySubmitted: string
+  errExpired: string
+  errGeneric: string
+  errPhotoSave: string
+}
+
+export const defaultReviewsUiLabels: ReviewsUiLabels = {
+  sectionTitle: "Reviews",
+  reviewSingular: "review",
+  reviewPlural: "reviews",
+  sortAria: "Sort",
+  sortDefault: "Recommended",
+  sortNewest: "Newest",
+  sortRatingDesc: "Highest rated",
+  sortRatingAsc: "Lowest rated",
+  verified: "Verified",
+  verifiedTitle: "Real buyer, verified via an order link",
+  loadMore: "Show more",
+  loading: "Loading...",
+  dateToday: "today",
+  dateYesterday: "yesterday",
+  dateDaysAgo: "{n} days ago",
+  showPhoto: "View photo",
+  playVideo: "Play video",
+  close: "Close",
+  expiredTitle: "This review link has expired",
+  expiredBody:
+    "The link was valid for 60 days after your purchase. If you'd like to leave a review, write to us at {email}.",
+  invalidTitle: "This review link is not valid",
+  invalidBody:
+    "You may have followed an old link. If you have any questions, write to us at {email}.",
+  alreadyTitle: "Thanks for your review!",
+  alreadyBodyWithProduct: "We already received your review for {name}.",
+  alreadyBody: "This review has already been sent.",
+  greeting: "Hello",
+  headingRate: "Share your thoughts",
+  headingPhoto: "One step left",
+  introRate:
+    "A short review in your own words helps people who are considering the same choice.",
+  introPhoto:
+    "Your rating is saved. Add a photo of the product and get a {pct}% discount on your next order.",
+  productLabel: "Product",
+  ratingLabel: "Rating",
+  ratingOutOf: "{n} of 5",
+  ratingAria: "{n} of 5 stars",
+  bodyLabel: "What did you like or dislike?",
+  bodyPlaceholder:
+    "Describe it in your own words. The more detail, the more helpful for the next customer.",
+  consentNote:
+    "By sending the review you agree that we may publish it on the product page.",
+  continue: "Continue",
+  submitting: "Sending...",
+  bonusBadge: "Bonus",
+  photoTitle: "Show it off, get {pct}% back",
+  photoSubtitle:
+    "Add a photo or a short video of the product and we will gift you a {pct}% discount for your next order.",
+  dropHint: "Drop files here or click to choose",
+  dropLimits: "Up to {n} photos (JPG/PNG/WEBP, 8 MB), 1 video (MP4/MOV, 50 MB, 60 sec)",
+  skip: "Skip",
+  skipAria: "Skip",
+  submitPhoto: "Send and get {pct}%",
+  waitingUpload: "Waiting for the upload...",
+  remove: "Remove",
+  thanksTitle: "Thank you!",
+  thanksBody: "Your review was received and is now published on the product page.",
+  rewardTitle: "Your {pct}% discount",
+  copy: "Copy",
+  copied: "Copied",
+  copyAria: "Copy the code",
+  rewardNote:
+    "We also emailed you the code. Use it on your next order — it is valid for a single use.",
+  codeUnavailable:
+    "The photo was saved. Something went wrong generating your discount code — write to us at {email} and we will send it right away.",
+  viewProduct: "View product",
+  toStore: "Back to the store",
+  errUnsupported: "The file {name} is not a supported format.",
+  errMaxImages: "Maximum {n} photos.",
+  errImageTooLarge: "The photo {name} is larger than {mb} MB.",
+  errMaxVideos: "Maximum {n} video.",
+  errVideoTooLarge: "The video is larger than {mb} MB.",
+  errVideoTooLong: "The video is longer than {s} seconds.",
+  errVideoMeta: "We could not read the video duration.",
+  errUploadFailed: "Uploading {name} failed. Try again.",
+  errRateLimited: "Too many reviews were sent from this address. Try again later.",
+  errAlreadySubmitted: "This review has already been sent.",
+  errExpired: "The review link has expired.",
+  errGeneric: "Something went wrong. Try again.",
+  errPhotoSave: "The photo could not be saved. Try again.",
+}

package/src/reviews-ui/photo-upload.tsx

@@ -0,0 +1,345 @@
+"use client"
+
+import { useCallback, useRef, useState } from "react"
+import { Loader2, Upload, X } from "lucide-react"
+import type { StorefrontClient } from "../api/http"
+import { createUploadUrl, type ReviewMedia } from "../api/reviews"
+import { cn } from "../lib/utils"
+import { defaultReviewsUiLabels, type ReviewsUiLabels } from "./labels"
+import {
+  MAX_IMAGES,
+  MAX_VIDEOS,
+  MAX_VIDEO_SECONDS,
+  UPLOAD_ACCEPT,
+  checkFileForUpload,
+  formatLabel,
+} from "./helpers"
+
+/**
+ * Review media uploader — drag-drop zone + preview grid + the signed-PUT
+ * pipeline. Ported from the Alenika review-form's media handling
+ * (src/app/(main)/review/[token]/review-form.tsx) with the barter seam:
+ * the signed URL comes from `api/reviews.createUploadUrl(client, {token,
+ * name, type, size})` (docs/storefront/reviews.md) instead of the Medusa
+ * `/store/files/upload-url` helper; the raw-file PUT to R2 is unchanged.
+ *
+ * Pipeline per file:
+ *   1. user drops / picks
+ *   2. client-side validation (mime, size — `checkFileForUpload`, with
+ *      the local slot counters so a multi-select batch can't overshoot
+ *      the caps; production fix) + async video-duration check (60s)
+ *   3. POST upload-url → signed R2 PUT URL
+ *   4. PUT the raw file body to the signed URL
+ *   5. swap the blob preview for the returned `publicUrl` in `media[]`
+ *      (and revoke the blob so a 50 MB video doesn't stay resident —
+ *      production fix)
+ *
+ * Constraints: ≤ 6 images (jpg/png/webp, 8 MB) + 1 video (mp4/mov,
+ * 50 MB, 60 sec) — mirrors the server rules.
+ */
+
+export type LocalMedia = ReviewMedia & {
+  /** Local-only id for the preview grid key — never sent to the API. */
+  _localId: string
+  _uploading?: boolean
+  _failed?: boolean
+}
+
+/** The attach payload: uploaded-and-ready entries, persisted fields only. */
+export function readyMedia(media: readonly LocalMedia[]): ReviewMedia[] {
+  return media
+    .filter((m) => !m._uploading && !m._failed)
+    .map<ReviewMedia>((m) => ({
+      type: m.type,
+      url: m.url,
+      thumb: m.thumb,
+      w: m.w,
+      h: m.h,
+      bytes: m.bytes,
+    }))
+}
+
+/**
+ * Direct PUT to the signed R2 upload URL. Browsers handle the CORS
+ * preflight automatically; the bucket must allow the storefront origin.
+ * Same mechanism as the admin file picker.
+ */
+export async function putToSignedUrl(args: {
+  uploadUrl: string
+  file: File
+}): Promise<boolean> {
+  try {
+    const res = await fetch(args.uploadUrl, {
+      method: "PUT",
+      headers: { "Content-Type": args.file.type },
+      body: args.file,
+    })
+    return res.ok
+  } catch {
+    return false
+  }
+}
+
+/** Promise wrapper around <video> metadata-load to get duration. */
+function readVideoDuration(file: File): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(file)
+    const video = document.createElement("video")
+    video.preload = "metadata"
+    video.onloadedmetadata = () => {
+      URL.revokeObjectURL(url)
+      resolve(video.duration)
+    }
+    video.onerror = () => {
+      URL.revokeObjectURL(url)
+      reject(new Error("could not read video metadata"))
+    }
+    video.src = url
+  })
+}
+
+/** Promise wrapper around <img> load to get natural dimensions. */
+function readImageDimensions(file: File): Promise<{ w: number; h: number }> {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(file)
+    const img = new window.Image()
+    img.onload = () => {
+      URL.revokeObjectURL(url)
+      resolve({ w: img.naturalWidth, h: img.naturalHeight })
+    }
+    img.onerror = () => {
+      URL.revokeObjectURL(url)
+      reject(new Error("could not read image"))
+    }
+    img.src = url
+  })
+}
+
+export interface ReviewPhotoUploadProps {
+  client: StorefrontClient
+  /** The review token — it is the upload auth (consumed tokens accepted). */
+  token: string
+  media: LocalMedia[]
+  onChange: (update: (prev: LocalMedia[]) => LocalMedia[]) => void
+  /** Validation/upload error copy (already formatted); null clears. */
+  onError: (message: string | null) => void
+  labels?: Partial<ReviewsUiLabels>
+}
+
+export function ReviewPhotoUpload({
+  client,
+  token,
+  media,
+  onChange,
+  onError,
+  labels,
+}: ReviewPhotoUploadProps) {
+  const l = { ...defaultReviewsUiLabels, ...labels }
+  const [dragging, setDragging] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const imagesCount = media.filter((m) => m.type === "image").length
+  const videosCount = media.filter((m) => m.type === "video").length
+
+  const handleFiles = useCallback(
+    async (files: FileList | File[]) => {
+      onError(null)
+      // Running slot counts for THIS batch — see checkFileForUpload.
+      const slots = {
+        imgSlots: MAX_IMAGES - imagesCount,
+        vidSlots: MAX_VIDEOS - videosCount,
+      }
+      for (const file of Array.from(files)) {
+        const check = checkFileForUpload(
+          { name: file.name, type: file.type, size: file.size },
+          slots
+        )
+        if (!check.ok) {
+          onError(formatLabel(l[check.errorKey], check.vars))
+          continue
+        }
+        const isImage = check.kind === "image"
+        if (isImage) {
+          slots.imgSlots--
+        } else {
+          try {
+            const duration = await readVideoDuration(file)
+            if (duration > MAX_VIDEO_SECONDS) {
+              onError(formatLabel(l.errVideoTooLong, { s: MAX_VIDEO_SECONDS }))
+              continue
+            }
+          } catch {
+            onError(l.errVideoMeta)
+            continue
+          }
+          slots.vidSlots--
+        }
+
+        const localId =
+          typeof crypto !== "undefined" && "randomUUID" in crypto
+            ? crypto.randomUUID()
+            : `${Date.now()}-${Math.random()}`
+        const placeholderUrl = URL.createObjectURL(file)
+
+        onChange((prev) => [
+          ...prev,
+          {
+            _localId: localId,
+            type: isImage ? "image" : "video",
+            url: placeholderUrl,
+            thumb: placeholderUrl,
+            w: 0,
+            h: 0,
+            bytes: file.size,
+            _uploading: true,
+          },
+        ])
+
+        // Kick off upload + signed-URL exchange.
+        ;(async () => {
+          try {
+            const signed = await createUploadUrl(client, {
+              token,
+              name: file.name,
+              type: file.type,
+              size: file.size,
+            })
+
+            const ok = await putToSignedUrl({
+              uploadUrl: signed.uploadUrl,
+              file,
+            })
+            if (!ok) throw new Error("upload failed")
+
+            const dims = isImage
+              ? await readImageDimensions(file).catch(() => ({ w: 0, h: 0 }))
+              : { w: 0, h: 0 }
+
+            // Free the blob preview now that the real URL is in — otherwise
+            // a 50 MB video blob stays resident until page unload (mobile).
+            URL.revokeObjectURL(placeholderUrl)
+
+            onChange((prev) =>
+              prev.map((m) =>
+                m._localId === localId
+                  ? {
+                      ...m,
+                      url: signed.publicUrl,
+                      thumb: signed.publicUrl,
+                      w: dims.w,
+                      h: dims.h,
+                      _uploading: false,
+                    }
+                  : m
+              )
+            )
+          } catch {
+            onChange((prev) =>
+              prev.map((m) =>
+                m._localId === localId
+                  ? { ...m, _uploading: false, _failed: true }
+                  : m
+              )
+            )
+            onError(formatLabel(l.errUploadFailed, { name: file.name }))
+          }
+        })()
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [imagesCount, videosCount, token, client]
+  )
+
+  const removeMedia = (localId: string) => {
+    onChange((prev) => {
+      const target = prev.find((m) => m._localId === localId)
+      if (target?.url?.startsWith("blob:")) URL.revokeObjectURL(target.url)
+      return prev.filter((m) => m._localId !== localId)
+    })
+  }
+
+  const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    setDragging(false)
+    if (e.dataTransfer.files.length > 0) handleFiles(e.dataTransfer.files)
+  }
+  const onDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    setDragging(true)
+  }
+  const onDragLeave = () => setDragging(false)
+
+  return (
+    <>
+      <div
+        onDrop={onDrop}
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onClick={() => fileInputRef.current?.click()}
+        className={cn(
+          "mt-5 rounded-[2px] border-2 border-dashed px-4 py-8 text-center cursor-pointer transition-colors",
+          dragging
+            ? "border-primary bg-primary/5"
+            : "border-border hover:bg-muted/30"
+        )}
+      >
+        <Upload className="w-6 h-6 mx-auto text-muted-foreground mb-2" />
+        <p className="text-sm text-foreground">{l.dropHint}</p>
+        <p className="text-xs text-muted-foreground mt-1">
+          {formatLabel(l.dropLimits, { n: MAX_IMAGES })}
+        </p>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept={UPLOAD_ACCEPT}
+          multiple
+          onChange={(e) => {
+            if (e.target.files) handleFiles(e.target.files)
+            e.target.value = ""
+          }}
+          className="hidden"
+        />
+      </div>
+
+      {media.length > 0 && (
+        <div className="grid grid-cols-3 sm:grid-cols-4 gap-2 mt-3">
+          {media.map((m) => (
+            <div
+              key={m._localId}
+              className={cn(
+                "relative aspect-square rounded-[2px] overflow-hidden bg-muted",
+                m._failed && "ring-1 ring-destructive"
+              )}
+            >
+              {m.type === "image" ? (
+                <img
+                  src={m.thumb || m.url}
+                  alt=""
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+              ) : (
+                <video
+                  src={m.url}
+                  className="absolute inset-0 w-full h-full object-cover bg-black"
+                />
+              )}
+              {m._uploading && (
+                <div className="absolute inset-0 flex items-center justify-center bg-background/60">
+                  <Loader2 className="w-5 h-5 animate-spin text-foreground" />
+                </div>
+              )}
+              <button
+                type="button"
+                onClick={() => removeMedia(m._localId)}
+                aria-label={l.remove}
+                className="absolute top-1 right-1 w-6 h-6 rounded-full bg-background/80 hover:bg-background text-foreground flex items-center justify-center"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  )
+}