create-brainerce-store 1.72.0 → 1.74.0

package/templates/nextjs/base/src/app/account/page.tsx

@@ -1,122 +1,168 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { useRouter } from '@/core/lib/navigation';
-import type { CustomerProfile, Order } from 'brainerce';
-import { getClient } from '@/core/lib/brainerce';
-import { useAuth } from '@/core/providers/store-provider';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { ProfileSection } from '@/components/account/profile-section';
-import { AddressBook } from '@/components/account/address-book';
-import { OrderHistory } from '@/components/account/order-history';
-import { useTranslations } from '@/core/lib/translations';
-
-export default function AccountPage() {
-  const router = useRouter();
-  const { isLoggedIn, authLoading, logout } = useAuth();
-  const t = useTranslations('account');
-  const tc = useTranslations('common');
-  const [profile, setProfile] = useState<CustomerProfile | null>(null);
-  const [orders, setOrders] = useState<Order[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (authLoading) return;
-
-    if (!isLoggedIn) {
-      router.push('/login');
-      return;
-    }
-
-    async function loadAccountData() {
-      try {
-        const client = getClient();
-        const [profileResult, ordersResult] = await Promise.allSettled([
-          client.getMyProfile(),
-          client.getMyOrders({ limit: 20 }),
-        ]);
-
-        if (profileResult.status === 'fulfilled') {
-          setProfile(profileResult.value);
-        } else {
-          setError('Failed to load profile.');
-        }
-
-        if (ordersResult.status === 'fulfilled') {
-          setOrders(ordersResult.value.data);
-        }
-      } catch (err) {
-        const message = err instanceof Error ? err.message : 'Failed to load account data.';
-        setError(message);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    loadAccountData();
-  }, [isLoggedIn, authLoading, router]);
-
-  if (authLoading || !isLoggedIn) {
-    return null;
-  }
-
-  if (loading) {
-    return (
-      <div className="flex min-h-[60vh] items-center justify-center">
-        <LoadingSpinner size="lg" />
-      </div>
-    );
-  }
-
-  if (error && !profile) {
-    return (
-      <div className="mx-auto max-w-3xl px-4 py-16 text-center sm:px-6 lg:px-8">
-        <h1 className="text-foreground text-2xl font-bold">{tc('error')}</h1>
-        <p className="text-muted-foreground mt-2">{error}</p>
-        <button
-          type="button"
-          onClick={() => window.location.reload()}
-          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
-        >
-          {tc('tryAgain')}
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
-      <div className="mb-6 flex items-center justify-between">
-        <h1 className="text-foreground text-2xl font-bold">{t('myAccount')}</h1>
-        <button
-          type="button"
-          onClick={logout}
-          className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-        >
-          {t('signOut')}
-        </button>
-      </div>
-
-      {/* Profile Section */}
-      {profile && (
-        <ProfileSection profile={profile} onProfileUpdate={setProfile} className="mb-6" />
-      )}
-
-      {/* Address Book */}
-      {profile && (
-        <AddressBook
-          addresses={profile.addresses ?? []}
-          onUpdate={(updated) => setProfile((p) => (p ? { ...p, addresses: updated } : p))}
-          className="mb-8"
-        />
-      )}
-
-      {/* Order History */}
-      <div>
-        <h2 className="text-foreground mb-4 text-lg font-semibold">{t('orderHistory')}</h2>
-        <OrderHistory orders={orders} />
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useRouter } from '@/core/lib/navigation';
+import type { CustomerProfile, Order } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useAuth } from '@/core/providers/store-provider';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { ProfileSection } from '@/components/account/profile-section';
+import { AddressBook } from '@/components/account/address-book';
+import { OrderHistory } from '@/components/account/order-history';
+import { LoyaltyPanel } from '@/components/account/loyalty-panel';
+import { SavedPaymentMethods } from '@/components/account/saved-payment-methods';
+import { useTranslations } from '@/core/lib/translations';
+
+/** Orders fetched per page. The API caps `limit` at 100. */
+const ORDERS_PAGE_SIZE = 20;
+
+export default function AccountPage() {
+  const router = useRouter();
+  const { isLoggedIn, authLoading, logout } = useAuth();
+  const t = useTranslations('account');
+  const tc = useTranslations('common');
+  const [profile, setProfile] = useState<CustomerProfile | null>(null);
+  const [orders, setOrders] = useState<Order[]>([]);
+  // Order history is paginated: `getMyOrders` answers the standard
+  // { data, meta: { page, limit, total, totalPages } } envelope. Without the
+  // page cursor below, order 21 is unreachable forever.
+  const [ordersPage, setOrdersPage] = useState(1);
+  const [ordersTotalPages, setOrdersTotalPages] = useState(1);
+  const [ordersLoadingMore, setOrdersLoadingMore] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  /** Fetch one page of orders. `append` distinguishes load-more from a reload. */
+  const loadOrders = useCallback(async (page: number, append: boolean) => {
+    if (append) setOrdersLoadingMore(true);
+    try {
+      const result = await getClient().getMyOrders({ page, limit: ORDERS_PAGE_SIZE });
+      setOrders((prev) => (append ? [...prev, ...result.data] : result.data));
+      setOrdersPage(result.meta.page);
+      setOrdersTotalPages(result.meta.totalPages);
+    } catch {
+      // A failed page must not blank the pages already on screen.
+    } finally {
+      if (append) setOrdersLoadingMore(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (authLoading) return;
+
+    if (!isLoggedIn) {
+      router.push('/login');
+      return;
+    }
+
+    async function loadAccountData() {
+      try {
+        const client = getClient();
+        const [profileResult, ordersResult] = await Promise.allSettled([
+          client.getMyProfile(),
+          client.getMyOrders({ page: 1, limit: ORDERS_PAGE_SIZE }),
+        ]);
+
+        if (profileResult.status === 'fulfilled') {
+          setProfile(profileResult.value);
+        } else {
+          setError('Failed to load profile.');
+        }
+
+        if (ordersResult.status === 'fulfilled') {
+          setOrders(ordersResult.value.data);
+          setOrdersPage(ordersResult.value.meta.page);
+          setOrdersTotalPages(ordersResult.value.meta.totalPages);
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Failed to load account data.';
+        setError(message);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadAccountData();
+  }, [isLoggedIn, authLoading, router]);
+
+  if (authLoading || !isLoggedIn) {
+    return null;
+  }
+
+  if (loading) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  if (error && !profile) {
+    return (
+      <div className="mx-auto max-w-3xl px-4 py-16 text-center sm:px-6 lg:px-8">
+        <h1 className="text-foreground text-2xl font-bold">{tc('error')}</h1>
+        <p className="text-muted-foreground mt-2">{error}</p>
+        <button
+          type="button"
+          onClick={() => window.location.reload()}
+          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+        >
+          {tc('tryAgain')}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-foreground text-2xl font-bold">{t('myAccount')}</h1>
+        <button
+          type="button"
+          onClick={logout}
+          className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+        >
+          {t('signOut')}
+        </button>
+      </div>
+
+      {/* Profile Section */}
+      {profile && (
+        <ProfileSection profile={profile} onProfileUpdate={setProfile} className="mb-6" />
+      )}
+
+      {/* Address Book */}
+      {profile && (
+        <AddressBook
+          addresses={profile.addresses ?? []}
+          onUpdate={(updated) => setProfile((p) => (p ? { ...p, addresses: updated } : p))}
+          className="mb-8"
+        />
+      )}
+
+      {/* Saved cards. Renders nothing at all until the customer has vaulted
+          one by checking out with saveCard, which is the normal case, so it
+          is mounted unconditionally and hides itself. Read-only on purpose:
+          the only storefront call that CHARGES a vaulted card is
+          subscribeToMembership, so there is no "pay with this card" action to
+          offer here. */}
+      <SavedPaymentMethods className="mb-8" />
+
+      {/* Rewards. Renders nothing at all when the store has no loyalty
+          programme, which is the normal case until the merchant turns one on —
+          so it is mounted unconditionally and hides itself. */}
+      <LoyaltyPanel className="mb-8" />
+
+      {/* Order History */}
+      <div>
+        <h2 className="text-foreground mb-4 text-lg font-semibold">{t('orderHistory')}</h2>
+        <OrderHistory
+          orders={orders}
+          hasMore={ordersPage < ordersTotalPages}
+          loadingMore={ordersLoadingMore}
+          onLoadMore={() => loadOrders(ordersPage + 1, true)}
+        />
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/app/category/[slug]/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { BrainerceError } from 'brainerce';
 import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce.server';
+import { getRegionId } from '@/core/lib/region.server';
 import { buildMetaDescription } from '@/core/lib/seo';
 import { sanitizeHtml } from '@/core/lib/sanitize';
 import { decodeSlug } from '@/core/lib/utils';
@@ -103,7 +104,15 @@ export default async function CategoryPage({ params }: Props) {
 
   // The listing endpoint owns pagination/FX/publish gating — reuse it rather
   // than duplicating a product query here.
-  const { data: products } = await client.getProducts({ categories: [category.id], limit: 48 });
+  // `regionId` on the listing read too: a category grid that prices in the
+  // default region while the product page prices in the buyer's is worse than
+  // neither doing it. Resolves to undefined on a single-region store, which
+  // makes this call byte-identical to what it was.
+  const { data: products } = await client.getProducts({
+    categories: [category.id],
+    limit: 48,
+    regionId: await getRegionId(),
+  });
 
   const baseUrl = await getCanonicalSiteUrl();
   const url = `${baseUrl}/category/${category.slug || slug}`;