create-brainerce-store 1.50.1 → 1.51.0

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

@@ -0,0 +1,294 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getClient } from '@/core/lib/brainerce';
+import { checkAuthStatus } from '@/core/lib/auth';
+import { useTranslations } from '@/core/lib/translations';
+import type { MyProductReview, ProductReview } from 'brainerce';
+
+interface ReviewFormProps {
+  productId: string;
+}
+
+type Stage =
+  | { kind: 'loading' }
+  | { kind: 'signed_out' }
+  | { kind: 'not_eligible'; reason: MyProductReview['reason'] }
+  | { kind: 'submit' }
+  | { kind: 'edit'; review: ProductReview };
+
+/**
+ * Single component that decides which UI to render for a customer on a PDP:
+ * - Loading while we check auth state and eligibility
+ * - Signed out -> sign-in CTA
+ * - Signed in but not eligible -> "purchase this product to review"
+ * - Eligible without review -> submit form
+ * - Eligible with existing review -> edit/delete form (rating + body prefilled)
+ */
+export function ReviewForm({ productId }: ReviewFormProps) {
+  const [stage, setStage] = useState<Stage>({ kind: 'loading' });
+  const t = useTranslations('reviews');
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      const auth = await checkAuthStatus();
+      if (cancelled) return;
+      if (!auth.isLoggedIn) {
+        setStage({ kind: 'signed_out' });
+        return;
+      }
+      try {
+        const me = await getClient().getMyProductReview(productId);
+        if (cancelled) return;
+        if (!me.eligible) {
+          setStage({ kind: 'not_eligible', reason: me.reason });
+          return;
+        }
+        if (me.myReview) {
+          setStage({ kind: 'edit', review: me.myReview });
+          return;
+        }
+        setStage({ kind: 'submit' });
+      } catch {
+        if (!cancelled) setStage({ kind: 'not_eligible', reason: 'product_not_found' });
+      }
+    }
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [productId]);
+
+  if (stage.kind === 'loading') {
+    return <div className="text-muted-foreground text-sm">{t('loading')}</div>;
+  }
+
+  if (stage.kind === 'signed_out') {
+    return (
+      <div className="border p-4">
+        <p className="text-sm">
+          <a href="/account/login" className="font-medium underline">
+            {t('signIn')}
+          </a>{' '}
+          {t('signInSuffix')}
+        </p>
+      </div>
+    );
+  }
+
+  if (stage.kind === 'not_eligible') {
+    return <NotEligibleMessage reason={stage.reason} />;
+  }
+
+  if (stage.kind === 'edit') {
+    return (
+      <EditReviewBlock
+        productId={productId}
+        initial={stage.review}
+        onDeleted={() => setStage({ kind: 'submit' })}
+      />
+    );
+  }
+
+  return <SubmitReviewBlock productId={productId} />;
+}
+
+function NotEligibleMessage({ reason }: { reason: MyProductReview['reason'] }) {
+  const t = useTranslations('reviews');
+  let message: string;
+  switch (reason) {
+    case 'no_eligible_order':
+      message = t('onlyPurchasers');
+      break;
+    case 'reviews_disabled':
+      message = t('reviewsDisabled');
+      break;
+    default:
+      message = t('cannotReview');
+  }
+  return (
+    <div className="bg-muted/30 border p-4">
+      <p className="text-muted-foreground text-sm">{message}</p>
+    </div>
+  );
+}
+
+function SubmitReviewBlock({ productId }: { productId: string }) {
+  return <ReviewEditor productId={productId} mode="create" initialRating={5} initialBody="" />;
+}
+
+function EditReviewBlock({
+  productId,
+  initial,
+  onDeleted,
+}: {
+  productId: string;
+  initial: ProductReview;
+  onDeleted: () => void;
+}) {
+  const [deleting, setDeleting] = useState(false);
+  const t = useTranslations('reviews');
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+
+  async function handleDelete() {
+    if (!window.confirm(t('confirmDelete'))) return;
+    setDeleting(true);
+    setDeleteError(null);
+    try {
+      await getClient().deleteMyProductReview(productId);
+      onDeleted();
+      window.location.reload();
+    } catch {
+      setDeleteError(t('deleteFailed'));
+    } finally {
+      setDeleting(false);
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      <ReviewEditor
+        productId={productId}
+        mode="edit"
+        initialRating={initial.rating}
+        initialBody={initial.body ?? ''}
+      />
+      <div className="border-border bg-muted/40 flex items-center justify-between border p-3">
+        <p className="text-destructive text-xs">{t('startOver')}</p>
+        <button
+          type="button"
+          onClick={handleDelete}
+          disabled={deleting}
+          className="text-destructive text-xs font-medium underline disabled:opacity-50"
+        >
+          {deleting ? t('deleting') : t('deleteReview')}
+        </button>
+      </div>
+      {deleteError && (
+        <p role="alert" className="text-sm text-red-700">
+          {deleteError}
+        </p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * The actual form. Same shape for create and edit — only the API method
+ * and the heading differ. Optimistic UX: success state + page reload to
+ * let the server-rendered reviews list pick up the change.
+ */
+function ReviewEditor({
+  productId,
+  mode,
+  initialRating,
+  initialBody,
+}: {
+  productId: string;
+  mode: 'create' | 'edit';
+  initialRating: number;
+  initialBody: string;
+}) {
+  const [rating, setRating] = useState(initialRating);
+  const t = useTranslations('reviews');
+  const [body, setBody] = useState(initialBody);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      const client = getClient();
+      const input = { rating, body: body.trim() || undefined };
+      if (mode === 'edit') {
+        await client.updateMyProductReview(productId, input);
+      } else {
+        await client.submitProductReview(productId, input);
+      }
+      setSuccess(true);
+      setTimeout(() => window.location.reload(), 1200);
+    } catch (err) {
+      const status = (err as { status?: number })?.status;
+      if (status === 409) {
+        setError(t('alreadySubmitted'));
+      } else if (status === 403) {
+        setError(t('onlyPurchasers'));
+      } else if (status === 429) {
+        setError(t('tooMany'));
+      } else {
+        setError(
+          mode === 'edit' ? t('updateFailed') : t('submitFailed')
+        );
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (success) {
+    return (
+      <p className="border-border bg-surface text-foreground border p-3 text-sm">
+        {mode === 'edit' ? t('thanksUpdated') : t('thanksSubmitted')}
+      </p>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-3 border p-4">
+      <h3 className="font-medium">{mode === 'edit' ? t('editYourReview') : t('writeReview')}</h3>
+
+      <fieldset>
+        <legend className="mb-1 text-sm">{t('yourRating')}</legend>
+        <div className="inline-flex gap-1" role="radiogroup" aria-label={t('starRating')}>
+          {[1, 2, 3, 4, 5].map((n) => (
+            <button
+              key={n}
+              type="button"
+              role="radio"
+              aria-checked={rating === n}
+              onClick={() => setRating(n)}
+              className={`text-2xl leading-none ${n <= rating ? 'text-accent' : 'text-border'}`}
+            >
+              ★
+            </button>
+          ))}
+        </div>
+      </fieldset>
+
+      <label className="block text-sm">
+        {t('yourReview')} <span className="text-muted-foreground text-xs">({t('optionalField')})</span>
+        <textarea
+          value={body}
+          onChange={(event) => setBody(event.target.value)}
+          maxLength={5000}
+          rows={4}
+          className="mt-1 block w-full rounded border px-2 py-1.5 text-sm"
+        />
+      </label>
+
+      {error && (
+        <p role="alert" className="text-sm text-red-700">
+          {error}
+        </p>
+      )}
+
+      <button
+        type="submit"
+        disabled={submitting}
+        className="bg-primary text-primary-foreground inline-flex items-center px-4 py-2 text-sm font-semibold disabled:opacity-50"
+      >
+        {submitting
+          ? mode === 'edit'
+            ? t('saving')
+            : t('submittingBtn')
+          : mode === 'edit'
+            ? t('saveChanges')
+            : t('submitReview')}
+      </button>
+    </form>
+  );
+}

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

@@ -0,0 +1,96 @@
+import type { ProductReview } from 'brainerce';
+import { getServerClient } from '@/core/lib/brainerce';
+import { ReviewForm } from './review-form';
+
+// Server component — it renders before any client i18n context exists, so the
+// three wrapper strings live here, keyed by locale. The store's default
+// language is baked in at scaffold time as the fallback.
+const STRINGS: Record<string, { title: string; empty: string; verified: string }> = {
+  he: { title: 'ביקורות', empty: 'אין עדיין ביקורות — היו הראשונים לשתף.', verified: 'רכישה מאומתת' },
+  en: { title: 'Reviews', empty: 'No reviews yet — be the first to share your experience.', verified: 'Verified purchase' },
+};
+const DEFAULT_LOCALE = '<%= language %>';
+
+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 = DEFAULT_LOCALE,
+}: ReviewsSectionProps) {
+  const s = STRINGS[locale] ?? STRINGS[DEFAULT_LOCALE] ?? STRINGS.en;
+  let reviews: ProductReview[] = initialReviews ?? [];
+
+  if (!initialReviews) {
+    try {
+      const result = await getServerClient().listProductReviews(productId, { page: 1, limit: 20 });
+      reviews = result.data;
+    } catch {
+      // Reviews disabled at store level or network error — render the form anyway.
+      reviews = [];
+    }
+  }
+
+  return (
+    <section className="mt-8" aria-labelledby="reviews-heading">
+      <h2 id="reviews-heading" className="mb-4 text-xl font-normal">
+        {s.title}
+      </h2>
+
+      {reviews.length === 0 ? (
+        <p className="text-muted-foreground mb-6 text-sm">{s.empty}</p>
+      ) : (
+        <ul className="mb-6 space-y-4">
+          {reviews.map((review) => (
+            <ReviewCard key={review.id} review={review} verifiedLabel={s.verified} />
+          ))}
+        </ul>
+      )}
+
+      <ReviewForm productId={productId} />
+    </section>
+  );
+}
+
+function ReviewCard({ review, verifiedLabel }: { review: ProductReview; verifiedLabel: string }) {
+  return (
+    <li className="border-border bg-surface border p-4">
+      <header className="flex flex-wrap items-center gap-2">
+        <Stars rating={review.rating} />
+        <span className="text-sm font-medium">{review.authorName}</span>
+        {review.verifiedPurchase && (
+          <span className="text-accent text-xs tracking-[0.08em]">{verifiedLabel}</span>
+        )}
+        <time className="text-muted-foreground ms-auto text-xs">
+          {new Date(review.createdAt).toLocaleDateString()}
+        </time>
+      </header>
+      {review.body && <p className="mt-2 whitespace-pre-line break-words text-sm">{review.body}</p>}
+    </li>
+  );
+}
+
+function Stars({ rating }: { rating: number }) {
+  return (
+    <span aria-label={`${rating} of 5 stars`} className="inline-flex">
+      {[1, 2, 3, 4, 5].map((n) => (
+        <span key={n} className={n <= rating ? 'text-accent' : 'text-border'}>
+          ★
+        </span>
+      ))}
+    </span>
+  );
+}

package/templates/nextjs/designs/passepartout/ui/product/stock-badge.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import type { InventoryInfo } from 'brainerce';
+import { cn } from '@/core/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+
+interface StockBadgeProps {
+  inventory: InventoryInfo | null | undefined;
+  lowStockThreshold?: number;
+  className?: string;
+}
+
+/**
+ * Stock as a museum placard caption — silence means available.
+ * The placard only speaks when scarcity or absence needs saying:
+ * low stock gets a quiet terracotta dot, absence gets terracotta text.
+ */
+export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
+  const t = useTranslations('productDetail');
+
+  const caption = 'text-[0.6875rem] tracking-[0.08em]';
+
+  if (!inventory) {
+    return <span className={cn('text-destructive', caption, className)}>{t('outOfStock')}</span>;
+  }
+
+  const { trackingMode, inStock, available } = inventory;
+
+  if (trackingMode === 'DISABLED') {
+    return <span className={cn('text-destructive', caption, className)}>{t('unavailable')}</span>;
+  }
+  if (!inStock) {
+    return <span className={cn('text-destructive', caption, className)}>{t('outOfStock')}</span>;
+  }
+  if (trackingMode === 'TRACKED' && available <= lowStockThreshold) {
+    return (
+      <span
+        className={cn(
+          'text-muted-foreground inline-flex items-center gap-1.5',
+          caption,
+          className
+        )}
+      >
+        <span aria-hidden="true" className="bg-destructive h-1.5 w-1.5 rounded-full" />
+        {t('onlyLeft').replace('{available}', String(available))}
+      </span>
+    );
+  }
+
+  // In stock, no scarcity — the placard stays silent.
+  return null;
+}