create-brainerce-store 1.67.0 → 1.71.0

package/templates/nextjs/designs/atelier/ui/product/review-form.tsx

@@ -5,19 +5,29 @@ import { Link } from '@/core/lib/navigation';
 import { getClient } from '@/core/lib/brainerce';
 import { checkAuthStatus } from '@/core/lib/auth';
 import { useTranslations } from '@/core/lib/translations';
-import type { MyProductReview, ProductReview } from 'brainerce';
+import type { MyProductReview, ProductReview, ReviewPhotoUpload } from 'brainerce';
 import { IconStar } from '@/ui/shared/icons';
 
 interface ReviewFormProps {
   productId: string;
 }
 
+type PhotoPolicy = MyProductReview['photos'];
+
 type Stage =
   | { kind: 'loading' }
   | { kind: 'signed_out' }
   | { kind: 'not_eligible'; reason: MyProductReview['reason'] }
-  | { kind: 'submit' }
-  | { kind: 'edit'; review: ProductReview };
+  | { kind: 'submit'; photos: PhotoPolicy }
+  // `existingPhotos` comes from myImages, which INCLUDES photos still awaiting
+  // the merchant — so a customer editing their review sees the one they already
+  // uploaded instead of a form that looks like it lost it.
+  | {
+      kind: 'edit';
+      review: ProductReview;
+      photos: PhotoPolicy;
+      existingPhotos: ReviewPhotoUpload[];
+    };
 
 /**
  * Single component that decides which UI to render for a customer on a PDP:
@@ -50,11 +60,17 @@ export function ReviewForm({ productId }: ReviewFormProps) {
           setStage({ kind: 'not_eligible', reason: me.reason });
           return;
         }
+        const existingPhotos: ReviewPhotoUpload[] = me.myImages.map((img) => ({
+          key: img.assetKey,
+          url: img.thumbnailUrl ?? img.url,
+          width: img.width,
+          height: img.height,
+        }));
         if (me.myReview) {
-          setStage({ kind: 'edit', review: me.myReview });
+          setStage({ kind: 'edit', review: me.myReview, photos: me.photos, existingPhotos });
           return;
         }
-        setStage({ kind: 'submit' });
+        setStage({ kind: 'submit', photos: me.photos });
       } catch {
         if (!cancelled) setStage({ kind: 'not_eligible', reason: 'product_not_found' });
       }
@@ -93,12 +109,14 @@ export function ReviewForm({ productId }: ReviewFormProps) {
       <EditReviewBlock
         productId={productId}
         initial={stage.review}
-        onDeleted={() => setStage({ kind: 'submit' })}
+        photos={stage.photos}
+        existingPhotos={stage.existingPhotos}
+        onDeleted={() => setStage({ kind: 'submit', photos: stage.photos })}
       />
     );
   }
 
-  return <SubmitReviewBlock productId={productId} />;
+  return <SubmitReviewBlock productId={productId} photos={stage.photos} />;
 }
 
 function NotEligibleMessage({ reason }: { reason: MyProductReview['reason'] }) {
@@ -117,17 +135,30 @@ function NotEligibleMessage({ reason }: { reason: MyProductReview['reason'] }) {
   return <p className="text-muted-foreground text-sm">{message}</p>;
 }
 
-function SubmitReviewBlock({ productId }: { productId: string }) {
-  return <ReviewEditor productId={productId} mode="create" initialRating={5} initialBody="" />;
+function SubmitReviewBlock({ productId, photos }: { productId: string; photos: PhotoPolicy }) {
+  return (
+    <ReviewEditor
+      productId={productId}
+      mode="create"
+      initialRating={5}
+      initialBody=""
+      photos={photos}
+      initialPhotos={[]}
+    />
+  );
 }
 
 function EditReviewBlock({
   productId,
   initial,
+  photos,
+  existingPhotos,
   onDeleted,
 }: {
   productId: string;
   initial: ProductReview;
+  photos: PhotoPolicy;
+  existingPhotos: ReviewPhotoUpload[];
   onDeleted: () => void;
 }) {
   const [deleting, setDeleting] = useState(false);
@@ -156,6 +187,8 @@ function EditReviewBlock({
         mode="edit"
         initialRating={initial.rating}
         initialBody={initial.body ?? ''}
+        photos={photos}
+        initialPhotos={existingPhotos}
       />
       <div className="mt-4 flex flex-wrap items-center gap-2 border-t pt-4">
         <p className="text-muted-foreground text-xs">{t('startOver')}</p>
@@ -187,11 +220,15 @@ function ReviewEditor({
   mode,
   initialRating,
   initialBody,
+  photos,
+  initialPhotos,
 }: {
   productId: string;
   mode: 'create' | 'edit';
   initialRating: number;
   initialBody: string;
+  photos: PhotoPolicy;
+  initialPhotos: ReviewPhotoUpload[];
 }) {
   const [rating, setRating] = useState(initialRating);
   const t = useTranslations('reviews');
@@ -199,6 +236,34 @@ function ReviewEditor({
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
+  const [uploads, setUploads] = useState<ReviewPhotoUpload[]>(initialPhotos);
+  const [uploading, setUploading] = useState(false);
+  const roomLeft = photos.maxPerReview - uploads.length;
+
+  async function handleFiles(event: React.ChangeEvent<HTMLInputElement>) {
+    const picked = Array.from(event.target.files ?? []);
+    // Reset the input so picking the same file twice still fires a change event.
+    event.target.value = '';
+    if (picked.length === 0) return;
+
+    const tooBig = picked.some((file) => file.size > photos.maxBytes);
+    const accepted = picked.filter((file) => file.size <= photos.maxBytes).slice(0, roomLeft);
+    if (tooBig) setError(t('photoTooLarge'));
+
+    if (accepted.length === 0) return;
+    setUploading(true);
+    try {
+      const done = await Promise.all(
+        accepted.map((file) => getClient().uploadReviewPhoto(productId, file))
+      );
+      setUploads((prev) => [...prev, ...done]);
+      if (!tooBig) setError(null);
+    } catch {
+      setError(t('photoUploadFailed'));
+    } finally {
+      setUploading(false);
+    }
+  }
 
   async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -206,7 +271,13 @@ function ReviewEditor({
     setSubmitting(true);
     try {
       const client = getClient();
-      const input = { rating, body: body.trim() || undefined };
+      // imageKeys REPLACES the photo set, so send every key we still want. Keys,
+      // never urls — the url on an upload is only good for the local preview.
+      const input = {
+        rating,
+        body: body.trim() || undefined,
+        ...(photos.enabled ? { imageKeys: uploads.map((upload) => upload.key) } : {}),
+      };
       if (mode === 'edit') {
         await client.updateMyProductReview(productId, input);
       } else {
@@ -275,13 +346,66 @@ function ReviewEditor({
         />
       </label>
 
+      {photos.enabled && (
+        <fieldset className="space-y-2">
+          <legend className="text-foreground text-sm">
+            {t('addPhotos')}{' '}
+            <span className="text-muted-foreground text-xs">
+              ({uploads.length}/{photos.maxPerReview})
+            </span>
+          </legend>
+
+          {uploads.length > 0 && (
+            <ul className="flex flex-wrap gap-2">
+              {uploads.map((upload) => (
+                <li key={upload.key} className="relative">
+                  <img
+                    src={upload.url}
+                    alt=""
+                    width={upload.width ?? undefined}
+                    height={upload.height ?? undefined}
+                    className="border-border h-20 w-20 rounded-sm border object-cover"
+                  />
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setUploads((prev) => prev.filter((item) => item.key !== upload.key))
+                    }
+                    aria-label={t('removePhoto')}
+                    className="bg-background/90 text-foreground absolute end-1 top-1 rounded-full px-1.5 text-xs leading-5 shadow-sm"
+                  >
+                    &times;
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          <input
+            type="file"
+            accept="image/jpeg,image/png,image/webp,image/gif"
+            multiple
+            disabled={uploading || roomLeft <= 0}
+            onChange={handleFiles}
+            className="text-muted-foreground block text-sm"
+          />
+
+          {uploading && <p className="text-muted-foreground text-xs">{t('photoUploading')}</p>}
+          {/* Said BEFORE they submit: a shopper who uploads, submits, and cannot
+              find their photo will conclude the site is broken. */}
+          {photos.requiresApproval && (
+            <p className="text-muted-foreground text-xs">{t('photosNeedApproval')}</p>
+          )}
+        </fieldset>
+      )}
+
       {error && (
         <p role="alert" className="text-destructive text-sm font-medium">
           {error}
         </p>
       )}
 
-      <button type="submit" disabled={submitting} className="btn-primary btn-sm">
+      <button type="submit" disabled={submitting || uploading} className="btn-primary btn-sm">
         {submitting
           ? mode === 'edit'
             ? t('saving')

package/templates/nextjs/designs/atelier/ui/product/reviews-section.tsx.ejs

@@ -1,148 +1,179 @@
-import type { ProductReview } from 'brainerce';
-import { getServerClient } from '@/core/lib/brainerce.server';
-<% if (i18nEnabled) { %>
-import { getMessages, defaultLocale } from '@/i18n';
-<% } else { %>
-import { messages as staticMessages, defaultLocale } from '@/i18n';
-<% } %>
-import { ReviewForm } from './review-form';
-import { IconStar } from '@/ui/shared/icons';
-
-// Server component — it renders before any client i18n context exists, so the
-// wrapper strings (title / empty state / verified badge) are read straight
-// from the `reviews` namespace in messages/, keyed by the store locale.
-type ReviewStrings = Record<string, string>;
-
-async function getReviewStrings(locale: string): Promise<ReviewStrings> {
-<% if (i18nEnabled) { %>
-  return ((await getMessages(locale)).reviews ?? {}) as ReviewStrings;
-<% } else { %>
-  return (staticMessages.reviews ?? {}) as ReviewStrings;
-<% } %>
-}
-
-interface ReviewsSectionProps {
-  productId: string;
-  initialReviews?: ProductReview[];
-  locale?: string;
-  /** Where to send users back to after submit (defaults to the current product URL). */
-  returnUrl?: string;
-}
-
-/**
- * Renders the visible reviews for a product plus a submit form.
- *
- * Server component — fetches with the SDK on the server so reviews are in
- * the initial HTML payload (good for SEO; JSON-LD on the same page already
- * carries `aggregateRating` when reviewCount > 0).
- */
-export async function ReviewsSection({
-  productId,
-  initialReviews,
-  locale = defaultLocale,
-}: ReviewsSectionProps) {
-  const t = await getReviewStrings(locale);
-  let reviews: ProductReview[] = initialReviews ?? [];
-
-  if (!initialReviews) {
-    try {
-      const result = await (await getServerClient()).listProductReviews(productId, { page: 1, limit: 20 });
-      reviews = result.data;
-    } catch {
-      // Review listing disabled at store level or network error — render the form anyway.
-      reviews = [];
-    }
-  }
-
-  const avg =
-    reviews.length > 0
-      ? Math.round((reviews.reduce((s, r) => s + r.rating, 0) / reviews.length) * 10) / 10
-      : null;
-
-  return (
-    <section aria-labelledby="reviews-heading" className="border-t bg-secondary/40">
-      <div className="container-narrow grid gap-10 py-14 lg:grid-cols-3 lg:py-16">
-        {/* Summary column */}
-        <div>
-          <h2 id="reviews-heading" className="text-2xl sm:text-3xl">
-            {t.title}
-          </h2>
-          {avg !== null && (
-            <p className="mt-4 flex items-center gap-3">
-              <span className="font-display text-4xl text-foreground">{avg}</span>
-              <span className="inline-flex flex-col gap-1">
-                <Stars rating={Math.round(avg)} />
-                <span className="text-xs text-muted-foreground">
-                  ({reviews.length})
-                </span>
-              </span>
-            </p>
-          )}
-
-          {/* Submit / edit form */}
-          <div className="card mt-6 p-5">
-            <ReviewForm productId={productId} />
-          </div>
-        </div>
-
-        {/* Review list */}
-        <div className="lg:col-span-2">
-          {reviews.length === 0 ? (
-            <div className="card flex h-full min-h-40 flex-col items-center justify-center gap-2 p-8 text-center">
-              <Stars rating={0} />
-              <p className="font-medium text-foreground">{t.beFirst ?? t.noReviews}</p>
-              <p className="text-sm text-muted-foreground">{t.noReviews}</p>
-            </div>
-          ) : (
-            <ul className="space-y-4">
-              {reviews.map((review) => (
-                <ReviewCard key={review.id} review={review} verifiedLabel={t.verifiedPurchase} />
-              ))}
-            </ul>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function ReviewCard({ review, verifiedLabel }: { review: ProductReview; verifiedLabel: string }) {
-  return (
-    <li>
-      <article className="card p-5">
-        <header className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
-          <Stars rating={review.rating} />
-          <span className="text-sm font-semibold text-foreground">{review.authorName}</span>
-          {review.verifiedPurchase && <span className="badge-soft">{verifiedLabel}</span>}
-          <time
-            dateTime={review.createdAt}
-            className="ms-auto text-xs text-muted-foreground"
-          >
-            {new Date(review.createdAt).toLocaleDateString()}
-          </time>
-        </header>
-        {review.body && (
-          <p className="mt-3 whitespace-pre-line break-words text-sm leading-6 text-foreground">
-            {review.body}
-          </p>
-        )}
-      </article>
-    </li>
-  );
-}
-
-function Stars({ rating }: { rating: number }) {
-  return (
-    <span aria-label={`${rating} of 5 stars`} className="inline-flex gap-0.5">
-      {[1, 2, 3, 4, 5].map((n) => (
-        <span
-          key={n}
-          aria-hidden="true"
-          className={n <= rating ? 'text-primary' : 'text-border'}
-        >
-          <IconStar size={16} filled={n <= rating} />
-        </span>
-      ))}
-    </span>
-  );
-}
+import type { ProductReview } from 'brainerce';
+import { getServerClient } from '@/core/lib/brainerce.server';
+import { CdnImage } from '@/ui/shared/cdn-image';
+<% if (i18nEnabled) { %>
+import { getMessages, defaultLocale } from '@/i18n';
+<% } else { %>
+import { messages as staticMessages, defaultLocale } from '@/i18n';
+<% } %>
+import { ReviewForm } from './review-form';
+import { IconStar } from '@/ui/shared/icons';
+
+// Server component — it renders before any client i18n context exists, so the
+// wrapper strings (title / empty state / verified badge) are read straight
+// from the `reviews` namespace in messages/, keyed by the store locale.
+type ReviewStrings = Record<string, string>;
+
+async function getReviewStrings(locale: string): Promise<ReviewStrings> {
+<% if (i18nEnabled) { %>
+  return ((await getMessages(locale)).reviews ?? {}) as ReviewStrings;
+<% } else { %>
+  return (staticMessages.reviews ?? {}) as ReviewStrings;
+<% } %>
+}
+
+interface ReviewsSectionProps {
+  productId: string;
+  initialReviews?: ProductReview[];
+  locale?: string;
+  /** Where to send users back to after submit (defaults to the current product URL). */
+  returnUrl?: string;
+}
+
+/**
+ * Renders the visible reviews for a product plus a submit form.
+ *
+ * Server component — fetches with the SDK on the server so reviews are in
+ * the initial HTML payload (good for SEO; JSON-LD on the same page already
+ * carries `aggregateRating` when reviewCount > 0).
+ */
+export async function ReviewsSection({
+  productId,
+  initialReviews,
+  locale = defaultLocale,
+}: ReviewsSectionProps) {
+  const t = await getReviewStrings(locale);
+  let reviews: ProductReview[] = initialReviews ?? [];
+
+  if (!initialReviews) {
+    try {
+      const result = await (await getServerClient()).listProductReviews(productId, { page: 1, limit: 20, sort: 'photos_first' });
+      reviews = result.data;
+    } catch {
+      // Review listing disabled at store level or network error — render the form anyway.
+      reviews = [];
+    }
+  }
+
+  const avg =
+    reviews.length > 0
+      ? Math.round((reviews.reduce((s, r) => s + r.rating, 0) / reviews.length) * 10) / 10
+      : null;
+
+  return (
+    <section aria-labelledby="reviews-heading" className="border-t bg-secondary/40">
+      <div className="container-narrow grid gap-10 py-14 lg:grid-cols-3 lg:py-16">
+        {/* Summary column */}
+        <div>
+          <h2 id="reviews-heading" className="text-2xl sm:text-3xl">
+            {t.title}
+          </h2>
+          {avg !== null && (
+            <p className="mt-4 flex items-center gap-3">
+              <span className="font-display text-4xl text-foreground">{avg}</span>
+              <span className="inline-flex flex-col gap-1">
+                <Stars rating={Math.round(avg)} />
+                <span className="text-xs text-muted-foreground">
+                  ({reviews.length})
+                </span>
+              </span>
+            </p>
+          )}
+
+          {/* Submit / edit form */}
+          <div className="card mt-6 p-5">
+            <ReviewForm productId={productId} />
+          </div>
+        </div>
+
+        {/* Review list */}
+        <div className="lg:col-span-2">
+          {reviews.length === 0 ? (
+            <div className="card flex h-full min-h-40 flex-col items-center justify-center gap-2 p-8 text-center">
+              <Stars rating={0} />
+              <p className="font-medium text-foreground">{t.beFirst ?? t.noReviews}</p>
+              <p className="text-sm text-muted-foreground">{t.noReviews}</p>
+            </div>
+          ) : (
+            <ul className="space-y-4">
+              {reviews.map((review) => (
+                <ReviewCard key={review.id} review={review} verifiedLabel={t.verifiedPurchase} />
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ReviewCard({ review, verifiedLabel }: { review: ProductReview; verifiedLabel: string }) {
+  return (
+    <li>
+      <article className="card p-5">
+        <header className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
+          <Stars rating={review.rating} />
+          <span className="text-sm font-semibold text-foreground">{review.authorName}</span>
+          {review.verifiedPurchase && <span className="badge-soft">{verifiedLabel}</span>}
+          <time
+            dateTime={review.createdAt}
+            className="ms-auto text-xs text-muted-foreground"
+          >
+            {new Date(review.createdAt).toLocaleDateString()}
+          </time>
+        </header>
+        {review.body && (
+          <p className="mt-3 whitespace-pre-line break-words text-sm leading-6 text-foreground">
+            {review.body}
+          </p>
+        )}
+        <ReviewPhotos review={review} />
+      </article>
+    </li>
+  );
+}
+
+/**
+ * Photos the reviewer attached. `review.images` is always an array and already
+ * carries only what shoppers are allowed to see, so there is nothing to filter.
+ *
+ * The intrinsic width/height come back from the API — passing them through is
+ * what stops the page jumping as the photos load.
+ */
+function ReviewPhotos({ review }: { review: ProductReview }) {
+  if (review.images.length === 0) return null;
+
+  return (
+    <ul className="mt-3 flex flex-wrap gap-2">
+      {review.images.map((image) => (
+        <li key={image.id}>
+          <a href={image.url} target="_blank" rel="noopener noreferrer">
+            <CdnImage
+              src={image.thumbnailUrl ?? image.url}
+              alt=""
+              width={image.width ?? 96}
+              height={image.height ?? 96}
+              className="h-24 w-24 rounded-md border object-cover"
+            />
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Stars({ rating }: { rating: number }) {
+  return (
+    <span aria-label={`${rating} of 5 stars`} className="inline-flex gap-0.5">
+      {[1, 2, 3, 4, 5].map((n) => (
+        <span
+          key={n}
+          aria-hidden="true"
+          className={n <= rating ? 'text-primary' : 'text-border'}
+        >
+          <IconStar size={16} filled={n <= rating} />
+        </span>
+      ))}
+    </span>
+  );
+}