create-brainerce-store 1.50.5 → 1.52.0

package/templates/nextjs/designs/atelier/ui/product/product-listing.tsx

@@ -0,0 +1,260 @@
+'use client';
+
+import {
+  useProductListing,
+  sortOptions,
+  type CategoryNode,
+} from '@/core/hooks/use-product-listing';
+import { ProductGrid } from '@/ui/product/product-grid';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { SelectMenu, type SelectMenuOption } from '@/ui/shared/select-menu';
+import { useTranslations } from '@/core/lib/translations';
+
+/**
+ * Flatten the category tree into indented options so nested categories stay
+ * selectable in the styled dropdown.
+ */
+function flattenCategories(items: CategoryNode[], depth = 0): SelectMenuOption[] {
+  return items.flatMap((node) => [
+    { value: node.id, label: `${'— '.repeat(depth)}${node.name}` },
+    ...flattenCategories(node.children, depth + 1),
+  ]);
+}
+
+/** Shimmer skeleton card shown while the grid loads — no layout jump. */
+function SkeletonGrid() {
+  return (
+    <div
+      className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4 lg:gap-6"
+      role="status"
+      aria-label="Loading"
+    >
+      {Array.from({ length: 8 }).map((_, i) => (
+        <div key={i} className="card overflow-hidden">
+          <div className="aspect-square animate-pulse bg-secondary" />
+          <div className="space-y-2.5 p-4">
+            <div className="h-4 w-3/4 animate-pulse rounded bg-secondary" />
+            <div className="h-4 w-1/3 animate-pulse rounded bg-secondary" />
+            <div className="mt-2 h-9 w-full animate-pulse rounded-full bg-secondary" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Product listing page: page header band, filter/sort toolbar, grid,
+ * load-more. All data and URL-state behavior comes from `useProductListing`;
+ * this component is presentation only. Must be rendered inside `<Suspense>`
+ * (URL params).
+ */
+export function ProductListing() {
+  const t = useTranslations('products');
+  const tc = useTranslations('common');
+
+  const {
+    products,
+    loading,
+    loadingMore,
+    page,
+    totalPages,
+    total,
+    categories,
+    brands,
+    tags,
+    metafieldDefs,
+    searchQuery,
+    categoryId,
+    brandId,
+    tagId,
+    sortIndex,
+    handleLoadMore,
+    updateParam,
+    handleCategorySelect,
+    getSelectedMetafieldValues,
+    setMetafieldValue,
+  } = useProductListing();
+
+  return (
+    <section>
+      {/* Page header band */}
+      <header className="wash-hero relative overflow-hidden">
+        <div className="container-page py-10 text-center lg:py-14">
+          <h1 className="text-4xl sm:text-5xl">
+            {searchQuery ? `${t('searchPrefix')} "${searchQuery}"` : t('allProducts')}
+          </h1>
+          <p className="mx-auto mt-3 max-w-xl text-muted-foreground">
+            {searchQuery ? (
+              !loading && (
+                <>
+                  {total} {total === 1 ? tc('product') : tc('products')} {tc('found')}
+                </>
+              )
+            ) : (
+              t('listingSubtitle')
+            )}
+          </p>
+        </div>
+      </header>
+
+      <div className="container-page pb-16 pt-8 lg:pb-20">
+        {/* Filters + sort toolbar */}
+        <div className="mb-8 flex flex-wrap items-center gap-3">
+          {/* Category filter — nested tree flattened into a select */}
+          {categories.length > 0 && (
+            <SelectMenu
+              value={categoryId}
+              options={[{ value: '', label: tc('all') }, ...flattenCategories(categories)]}
+              onChange={(v) => (v ? handleCategorySelect(v) : updateParam('category', ''))}
+              ariaLabel={t('filtersLabel')}
+            />
+          )}
+
+          {/* Brand Filter */}
+          {brands.length > 0 && (
+            <SelectMenu
+              value={brandId}
+              options={[
+                { value: '', label: t('allBrands') },
+                ...brands.map((b) => ({ value: b.id, label: b.name })),
+              ]}
+              onChange={(v) => updateParam('brand', v)}
+              ariaLabel={t('allBrands')}
+            />
+          )}
+
+          {/* Tag Filter */}
+          {tags.length > 0 && (
+            <SelectMenu
+              value={tagId}
+              options={[
+                { value: '', label: t('allTags') },
+                ...tags.map((tg) => ({ value: tg.id, label: tg.name })),
+              ]}
+              onChange={(v) => updateParam('tag', v)}
+              ariaLabel={t('allTags')}
+            />
+          )}
+
+          {/* Custom-field (metafield) facets — rendered per definition type.
+              Only definitions flagged `filterable: true` and published to
+              this sales channel reach this list. */}
+          {metafieldDefs.map((def) => {
+            const selected = getSelectedMetafieldValues(def.key);
+
+            if (def.type === 'BOOLEAN') {
+              const isOn = selected.includes('true');
+              return (
+                <label
+                  key={def.id}
+                  className="inline-flex h-10 cursor-pointer items-center gap-2 rounded-full border bg-background px-4 text-sm font-medium"
+                >
+                  <input
+                    type="checkbox"
+                    checked={isOn}
+                    onChange={(e) => setMetafieldValue(def.key, e.target.checked ? ['true'] : [])}
+                    className="h-4 w-4 accent-primary"
+                  />
+                  {def.name}
+                </label>
+              );
+            }
+
+            if (def.type === 'SELECT') {
+              return (
+                <SelectMenu
+                  key={def.id}
+                  value={selected[0] || ''}
+                  options={[
+                    { value: '', label: `${tc('all')} ${def.name}` },
+                    ...(def.enumValues || []).map((v) => ({
+                      value: v.value,
+                      label: v.label || v.value,
+                    })),
+                  ]}
+                  onChange={(v) => setMetafieldValue(def.key, v ? [v] : [])}
+                  ariaLabel={def.name}
+                />
+              );
+            }
+
+            // MULTI_SELECT — checkbox toggles. Each click adds/removes one value.
+            return (
+              <fieldset
+                key={def.id}
+                className="inline-flex flex-wrap items-center gap-2 rounded-full border bg-background px-4 py-2"
+              >
+                <legend className="sr-only">{def.name}</legend>
+                <span className="text-sm font-medium text-muted-foreground">{def.name}:</span>
+                {(def.enumValues || []).map((v) => {
+                  const active = selected.includes(v.value);
+                  return (
+                    <label
+                      key={v.value}
+                      className="inline-flex cursor-pointer items-center gap-1.5 text-sm"
+                    >
+                      <input
+                        type="checkbox"
+                        checked={active}
+                        onChange={() =>
+                          setMetafieldValue(
+                            def.key,
+                            active ? selected.filter((s) => s !== v.value) : [...selected, v.value]
+                          )
+                        }
+                        className="h-4 w-4 accent-primary"
+                      />
+                      {v.label || v.value}
+                    </label>
+                  );
+                })}
+              </fieldset>
+            );
+          })}
+
+          {/* Result count + sort — pushed to the end of the toolbar */}
+          <div className="ms-auto flex items-center gap-3">
+            {!loading && (
+              <p className="hidden text-sm text-muted-foreground sm:block">
+                {total} {total === 1 ? tc('product') : tc('products')}
+              </p>
+            )}
+            <SelectMenu
+              value={String(sortIndex)}
+              options={sortOptions.map((opt, idx) => ({
+                value: String(idx),
+                label: t(opt.labelKey),
+              }))}
+              onChange={(v) => updateParam('sort', v)}
+              ariaLabel={tc('sortBy')}
+            />
+          </div>
+        </div>
+
+        {/* Products Grid */}
+        {loading ? (
+          <SkeletonGrid />
+        ) : (
+          <>
+            <ProductGrid products={products} />
+
+            {/* Load More */}
+            {page < totalPages && (
+              <div className="mt-10 flex justify-center">
+                <button
+                  type="button"
+                  onClick={handleLoadMore}
+                  disabled={loadingMore}
+                  className="btn-outline btn-md min-w-44"
+                >
+                  {loadingMore ? <LoadingSpinner size="sm" /> : t('loadMore')}
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,95 @@
+'use client';
+
+import { Link } from '@/core/lib/navigation';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { ProductRecommendation } from 'brainerce';
+import { PriceDisplay } from '@/ui/product/price-display';
+import { cn } from '@/core/lib/utils';
+
+interface RecommendationCardProps {
+  item: ProductRecommendation;
+  className?: string;
+}
+
+function RecommendationCard({ item, className }: RecommendationCardProps) {
+  const firstImage = item.images?.[0];
+  const imageUrl = typeof firstImage === 'string' ? firstImage : firstImage?.url || null;
+  const slug = item.slug || item.id;
+  const basePrice = parseFloat(item.basePrice);
+  const salePrice = item.salePrice ? parseFloat(item.salePrice) : undefined;
+  const isOnSale = salePrice != null && salePrice < basePrice;
+
+  return (
+    <Link
+      href={`/products/${slug}`}
+      className={cn('group card card-hover block overflow-hidden', className)}
+    >
+      {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
+      <span className="relative block aspect-square overflow-hidden bg-secondary">
+        {imageUrl ? (
+          <Image
+            src={imageUrl}
+            alt={item.name}
+            fill
+            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
+            className="img-zoom object-cover"
+          />
+        ) : null}
+      </span>
+      <span className="block space-y-1 p-4">
+        <span className="block text-sm font-semibold leading-snug text-foreground group-hover:text-primary">
+          {item.name}
+        </span>
+        <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
+      </span>
+    </Link>
+  );
+}
+
+interface RecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+/** Recommendation strip on the product page (upsells / related). */
+export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <section className={cn('border-t pt-10', className)}>
+      <h2 className="mb-6 text-2xl">{title}</h2>
+      <div className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4">
+        {items.slice(0, 4).map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+interface CartRecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+/** Cross-sell strip on the cart page ("you might also need"). */
+export function CartRecommendationSection({
+  title,
+  items,
+  className,
+}: CartRecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <section className={cn('border-t pt-10', className)}>
+      <h2 className="mb-6 text-2xl">{title}</h2>
+      <div className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4">
+        {items.slice(0, 4).map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +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';
+import { IconStar } from '@/ui/shared/icons';
+
+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).
+ */
+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" className="text-sm text-muted-foreground">{t('loading')}</p>;
+  }
+
+  if (stage.kind === 'signed_out') {
+    return (
+      <p className="text-sm text-muted-foreground">
+        <a href="/account/login" className="font-semibold text-primary underline underline-offset-2">{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 className="text-sm text-muted-foreground">{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="mt-4 flex flex-wrap items-center gap-2 border-t pt-4">
+        <p className="text-xs text-muted-foreground">{t('startOver')}</p>
+        <button type="button" onClick={handleDelete} disabled={deleting} className="text-xs font-semibold text-destructive underline underline-offset-2 disabled:opacity-50">
+          {deleting ? t('deleting') : t('deleteReview')}
+        </button>
+      </div>
+      {deleteError && <p role="alert" className="mt-2 text-sm font-medium text-destructive">{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" className="text-sm font-semibold text-primary">{mode === 'edit' ? t('thanksUpdated') : t('thanksSubmitted')}</p>;
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <h3 className="font-sans text-base font-semibold">{mode === 'edit' ? t('editYourReview') : t('writeReview')}</h3>
+
+      <fieldset>
+        <legend className="mb-1.5 text-sm font-medium">{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={n <= rating ? 'text-primary' : 'text-border hover:text-primary/50'}
+            >
+              <IconStar size={24} filled={n <= rating} />
+              <span className="sr-only">{n}</span>
+            </button>
+          ))}
+        </div>
+      </fieldset>
+
+      <label className="block text-sm font-medium">
+        {t('yourReview')} <span className="font-normal text-muted-foreground">({t('optionalField')})</span>
+        <textarea
+          value={body}
+          onChange={(event) => setBody(event.target.value)}
+          maxLength={5000}
+          rows={4}
+          className="input mt-1.5 h-auto min-h-24 py-2.5"
+        />
+      </label>
+
+      {error && <p role="alert" className="text-sm font-medium text-destructive">{error}</p>}
+
+      <button type="submit" disabled={submitting} className="btn-primary btn-sm">
+        {submitting
+          ? mode === 'edit'
+            ? t('saving')
+            : t('submittingBtn')
+          : mode === 'edit'
+            ? t('saveChanges')
+            : t('submitReview')}
+      </button>
+    </form>
+  );
+}