create-brainerce-store 1.65.0 → 1.67.0

package/templates/nextjs/ui-canvas/product/review-form.tsx

@@ -1,266 +1,267 @@
-'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)
- *
- * DESIGN ME — review submit/edit form; auth via checkAuthStatus(), eligibility
- * + existing review via getClient().getMyProductReview(productId).
- *
- * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
- */
-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 <p role="status">{t('loading')}</p>;
-  }
-
-  if (stage.kind === 'signed_out') {
-    return (
-      <p>
-        <a href="/account/login">{t('signIn')}</a> {t('signInSuffix')}
-      </p>
-    );
-  }
-
-  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 <p>{message}</p>;
-}
-
-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>
-      <ReviewEditor
-        productId={productId}
-        mode="edit"
-        initialRating={initial.rating}
-        initialBody={initial.body ?? ''}
-      />
-      <div className="flex items-center gap-2">
-        <p>{t('startOver')}</p>
-        <button type="button" onClick={handleDelete} disabled={deleting}>
-          {deleting ? t('deleting') : t('deleteReview')}
-        </button>
-      </div>
-      {deleteError && <p role="alert">{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 role="status">{mode === 'edit' ? t('thanksUpdated') : t('thanksSubmitted')}</p>;
-  }
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <h3>{mode === 'edit' ? t('editYourReview') : t('writeReview')}</h3>
-
-      <fieldset>
-        <legend>{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)}
-            >
-              {n <= rating ? '★' : '☆'}
-            </button>
-          ))}
-        </div>
-      </fieldset>
-
-      <label className="block">
-        {t('yourReview')} <span>({t('optionalField')})</span>
-        <textarea
-          value={body}
-          onChange={(event) => setBody(event.target.value)}
-          maxLength={5000}
-          rows={4}
-          className="block w-full"
-        />
-      </label>
-
-      {error && <p role="alert">{error}</p>}
-
-      <button type="submit" disabled={submitting}>
-        {submitting
-          ? mode === 'edit'
-            ? t('saving')
-            : t('submittingBtn')
-          : mode === 'edit'
-            ? t('saveChanges')
-            : t('submitReview')}
-      </button>
-    </form>
-  );
-}
+'use client';
+
+import { useEffect, useState } from 'react';
+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';
+
+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)
+ *
+ * DESIGN ME — review submit/edit form; auth via checkAuthStatus(), eligibility
+ * + existing review via getClient().getMyProductReview(productId).
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+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 <p role="status">{t('loading')}</p>;
+  }
+
+  if (stage.kind === 'signed_out') {
+    return (
+      <p>
+        <Link href="/login">{t('signIn')}</Link> {t('signInSuffix')}
+      </p>
+    );
+  }
+
+  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 <p>{message}</p>;
+}
+
+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>
+      <ReviewEditor
+        productId={productId}
+        mode="edit"
+        initialRating={initial.rating}
+        initialBody={initial.body ?? ''}
+      />
+      <div className="flex items-center gap-2">
+        <p>{t('startOver')}</p>
+        <button type="button" onClick={handleDelete} disabled={deleting}>
+          {deleting ? t('deleting') : t('deleteReview')}
+        </button>
+      </div>
+      {deleteError && <p role="alert">{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 role="status">{mode === 'edit' ? t('thanksUpdated') : t('thanksSubmitted')}</p>;
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <h3>{mode === 'edit' ? t('editYourReview') : t('writeReview')}</h3>
+
+      <fieldset>
+        <legend>{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)}
+            >
+              {n <= rating ? '★' : '☆'}
+            </button>
+          ))}
+        </div>
+      </fieldset>
+
+      <label className="block">
+        {t('yourReview')} <span>({t('optionalField')})</span>
+        <textarea
+          value={body}
+          onChange={(event) => setBody(event.target.value)}
+          maxLength={5000}
+          rows={4}
+          className="block w-full"
+        />
+      </label>
+
+      {error && <p role="alert">{error}</p>}
+
+      <button type="submit" disabled={submitting}>
+        {submitting
+          ? mode === 'edit'
+            ? t('saving')
+            : t('submittingBtn')
+          : mode === 'edit'
+            ? t('saveChanges')
+            : t('submitReview')}
+      </button>
+    </form>
+  );
+}