create-brainerce-store 1.73.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}`;

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

@@ -15,7 +15,7 @@ import type {
 } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { getClient } from '@/core/lib/brainerce';
-import { useStoreInfo, useCart, useAuth } from '@/core/providers/store-provider';
+import { useStoreInfo, useCart, useAuth, useRegion } from '@/core/providers/store-provider';
 import { useCurrency } from '@/core/lib/use-currency';
 import { CheckoutForm } from '@/components/checkout/checkout-form';
 import { ShippingStep } from '@/components/checkout/shipping-step';
@@ -25,7 +25,9 @@ import { PickupStep } from '@/components/checkout/pickup-step';
 import { CustomFieldsStep } from '@/components/checkout/custom-fields-step';
 import { TaxDisplay } from '@/components/checkout/tax-display';
 import { OrderBumpCard } from '@/components/checkout/order-bump-card';
+import { OrderCustomizations } from '@/components/account/order-customizations';
 import { CouponInput } from '@/ui/cart/coupon-input';
+import { GiftCardInput } from '@/ui/cart/gift-card-input';
 import { ReservationCountdown } from '@/ui/cart/reservation-countdown';
 import { LoadingSpinner } from '@/ui/shared/loading-spinner';
 import { useTranslations } from '@/core/lib/translations';
@@ -40,6 +42,11 @@ function CheckoutContent() {
   const { storeInfo } = useStoreInfo();
   const { cart, refreshCart } = useCart();
   const { isLoggedIn } = useAuth();
+  // ⛔ THE call the region feature exists for. Product reads alone and the
+  // shopper is SHOWN one price and CHARGED another: the checkout records the
+  // region for reporting and for scoping which payment providers are offered.
+  // `undefined` on a store with no regions, and the field is then omitted.
+  const { regionId } = useRegion();
   const currency = useCurrency();
   const t = useTranslations('checkout');
   const tc = useTranslations('common');
@@ -111,6 +118,16 @@ function CheckoutContent() {
   const checkoutIdParam = searchParams.get('checkout_id');
   const existingCheckoutId = isValidCheckoutId(checkoutIdParam) ? checkoutIdParam : null;
 
+  // ---- Partial checkout ----
+  //
+  // The cart page hands the ticked lines over as `?items=id1,id2` and omits
+  // the param entirely for a full cart. Read as a raw string here and resolved
+  // against the live cart inside initCheckout: it is URL input, so it is only
+  // ever used after filtering against ids the cart actually has, and it is
+  // read once at init rather than added to the effect's deps — a change must
+  // not silently create a SECOND checkout for the same cart.
+  const selectedItemsParam = searchParams.get('items');
+
   // Pre-fill address and customer data from profile when logged in
   useEffect(() => {
     if (!isLoggedIn) return;
@@ -198,8 +215,27 @@ function CheckoutContent() {
           return;
         }
 
-        // Create new checkout — cart is always server-side now
-        const newCheckout = await client.createCheckout({ cartId: cart.id });
+        // Create new checkout — cart is always server-side now.
+        //
+        // `selectedItemIds` scopes the checkout to a subset of the cart: after
+        // payment those lines are removed and the rest stay in the still-ACTIVE
+        // cart. Sent ONLY when the shopper picked a strict, non-empty subset —
+        // an empty result (a stale link, or ids from another cart) and a
+        // full-cart selection both fall through to the normal whole-cart call,
+        // because omitting the field is what "check out everything" means.
+        const cartItemIds = new Set(cart.items.map((item) => item.id));
+        const requestedItemIds = (selectedItemsParam ?? '')
+          .split(',')
+          .map((id) => id.trim())
+          .filter((id) => cartItemIds.has(id));
+        const isStrictSubset =
+          requestedItemIds.length > 0 && requestedItemIds.length < cartItemIds.size;
+
+        const newCheckout = await client.createCheckout({
+          cartId: cart.id,
+          ...(isStrictSubset ? { selectedItemIds: requestedItemIds } : {}),
+          ...(regionId ? { regionId } : {}),
+        });
         setCheckout(newCheckout);
 
         // If all items are downloadable, skip shipping — show contact info step
@@ -225,7 +261,11 @@ function CheckoutContent() {
     };
 
     initCheckout();
-  }, [cart?.id, existingCheckoutId]);
+    // `regionId` is a dependency because a checkout is created ONCE per cart:
+    // if the shopper switches region on the cart page and lands here, the
+    // effect has to re-run or the checkout is stamped with the region they
+    // just left.
+  }, [cart?.id, existingCheckoutId, regionId]);
 
   // Load order bumps when checkout is available
   useEffect(() => {
@@ -838,45 +878,57 @@ function CheckoutContent() {
                   const lineTotal = parseFloat(item.unitPrice) * item.quantity;
 
                   return (
-                    <div key={item.id} className="flex gap-3">
-                      <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
-                        {imageUrl ? (
-                          <Image
-                            src={imageUrl}
-                            alt={name}
-                            fill
-                            sizes="48px"
-                            className="object-cover"
-                          />
-                        ) : (
-                          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-                            <svg
-                              className="h-5 w-5"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={1.5}
-                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                              />
-                            </svg>
-                          </div>
-                        )}
-                      </div>
+                    <div key={item.id} className="space-y-1">
+                      <div className="flex gap-3">
+                        <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
+                          {imageUrl ? (
+                            <Image
+                              src={imageUrl}
+                              alt={name}
+                              fill
+                              sizes="48px"
+                              className="object-cover"
+                            />
+                          ) : (
+                            <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+                              <svg
+                                className="h-5 w-5"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                              >
+                                <path
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  strokeWidth={1.5}
+                                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                                />
+                              </svg>
+                            </div>
+                          )}
+                        </div>
+
+                        <div className="min-w-0 flex-1">
+                          <p className="text-foreground truncate text-sm">{name}</p>
+                          <p className="text-muted-foreground text-xs">
+                            {tc('qty')} {item.quantity}
+                          </p>
+                        </div>
 
-                      <div className="min-w-0 flex-1">
-                        <p className="text-foreground truncate text-sm">{name}</p>
-                        <p className="text-muted-foreground text-xs">
-                          {tc('qty')} {item.quantity}
-                        </p>
+                        <span className="text-foreground flex-shrink-0 text-sm font-medium">
+                          {formatPrice(lineTotal, { currency }) as string}
+                        </span>
                       </div>
 
-                      <span className="text-foreground flex-shrink-0 text-sm font-medium">
-                        {formatPrice(lineTotal, { currency }) as string}
-                      </span>
+                      {/* The buyer's own input on this line — engraving text,
+                          uploaded photo, picked colour — so it can be checked
+                          before paying. `CheckoutLineItem.customizations` is
+                          the SDK's resolved label/value/type map, absent on a
+                          line with no customization, so a plain order renders
+                          exactly as before. */}
+                      {item.customizations && (
+                        <OrderCustomizations customizations={item.customizations} />
+                      )}
                     </div>
                   );
                 })}
@@ -919,6 +971,22 @@ function CheckoutContent() {
                     checkoutId={checkout?.id}
                     onUpdate={handleCouponUpdate}
                   />
+                  {/* Beside the coupon field, and deliberately NOT inside it. A
+                      coupon reduces what the order is worth; a gift card pays
+                      for an order still worth the same. They look adjacent
+                      because a shopper reaches for them at the same moment, and
+                      they behave differently because they are different things. */}
+                  {checkout?.id && (
+                    <GiftCardInput
+                      className="mt-3"
+                      checkoutId={checkout.id}
+                      tenders={checkout.tenders ?? []}
+                      formatAmount={(value) =>
+                        formatPrice(parseFloat(value), { currency }) as string
+                      }
+                      onUpdate={handleCouponUpdate}
+                    />
+                  )}
                 </div>
               )}
 
@@ -1048,6 +1116,43 @@ function CheckoutContent() {
                           {formatPrice(parseFloat(checkout.total), { currency }) as string}
                         </span>
                       </div>
+
+                      {/* Gift cards sit BELOW the total, not among the discounts
+                          above it. The total is what the order is worth and does
+                          not move; what changes is only what the card leaves for
+                          the payment provider to charge. Putting this in the
+                          discount block would understate the taxable base to the
+                          shopper and on the receipt. */}
+                      {checkout.tenders && checkout.tenders.length > 0 && (
+                        <>
+                          {checkout.tenders.map((tender) => (
+                            <div
+                              key={tender.tenderId}
+                              className="mt-2 flex items-center justify-between text-sm"
+                            >
+                              <span className="text-muted-foreground">{tc('giftCard')}</span>
+                              <span className="text-primary">
+                                -
+                                {
+                                  formatPrice(parseFloat(tender.amountApplied), {
+                                    currency,
+                                  }) as string
+                                }
+                              </span>
+                            </div>
+                          ))}
+                          <div className="border-border mt-2 flex items-center justify-between border-t pt-2">
+                            <span className="text-foreground font-semibold">{tc('amountDue')}</span>
+                            <span className="text-foreground text-base font-semibold">
+                              {
+                                formatPrice(parseFloat(checkout.providerAmountDue ?? checkout.total), {
+                                  currency,
+                                }) as string
+                              }
+                            </span>
+                          </div>
+                        </>
+                      )}
                     </div>
                   </div>
                 );