create-brainerce-store 1.86.1 → 1.88.0

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

@@ -15,7 +15,13 @@ import type {
 } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { getClient } from '@/core/lib/brainerce';
-import { useStoreInfo, useCart, useAuth, useRegion } from '@/core/providers/store-provider';
+import {
+  useStoreInfo,
+  useCart,
+  useAuth,
+  useRegion,
+  useStoreCapabilities,
+} 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';
@@ -31,16 +37,68 @@ 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';
-import { toAddToCartError, type AddToCartError } from '@/core/lib/add-to-cart-error';
+import {
+  addToCartErrorMessageKey,
+  toAddToCartError,
+  type AddToCartError,
+} from '@/core/lib/add-to-cart-error';
 import { cn } from '@/core/lib/utils';
 import { isValidCheckoutId } from '@/core/lib/safe-redirect';
 import { trackBeginCheckout } from '@/core/lib/tracking';
 
+// Remembers which checkout belongs to which cart for this browser tab, so a
+// shopper who leaves /checkout and comes back (the bare link has no
+// `?checkout_id=`) resumes the same checkout instead of re-entering everything.
+const CHECKOUT_RESUME_PREFIX = 'brainerce:checkout:';
+
+function readStoredCheckoutId(cartId: string): string | null {
+  try {
+    const raw = window.sessionStorage.getItem(CHECKOUT_RESUME_PREFIX + cartId);
+    return isValidCheckoutId(raw) ? raw : null;
+  } catch {
+    return null;
+  }
+}
+
+function storeCheckoutId(cartId: string, checkoutId: string): void {
+  try {
+    window.sessionStorage.setItem(CHECKOUT_RESUME_PREFIX + cartId, checkoutId);
+  } catch {
+    // Private mode / blocked storage: resuming is a convenience, never required.
+  }
+}
+
+function clearStoredCheckoutId(cartId: string): void {
+  try {
+    window.sessionStorage.removeItem(CHECKOUT_RESUME_PREFIX + cartId);
+  } catch {
+    // ignore
+  }
+}
+
+/**
+ * A remembered checkout is only reused while it is still open AND still
+ * describes the cart: same lines, same quantities. A cart edited since would
+ * otherwise resume a checkout that charges for something else.
+ */
+function matchesCart(
+  prior: Checkout,
+  cart: { items: Array<{ productId: string; variantId?: string | null; quantity: number }> }
+): boolean {
+  if (prior.status !== 'PENDING' && prior.status !== 'SHIPPING_SET') return false;
+  const key = (i: { productId: string; variantId?: string | null; quantity: number }) =>
+    `${i.productId}:${i.variantId ?? ''}:${i.quantity}`;
+  const a = prior.lineItems.map(key).sort();
+  const b = cart.items.map(key).sort();
+  return a.length === b.length && a.every((v, i) => v === b[i]);
+}
+
 type CheckoutStep = 'method' | 'address' | 'shipping' | 'pickup' | 'custom-fields' | 'payment';
 
 function CheckoutContent() {
   const searchParams = useSearchParams();
   const { storeInfo } = useStoreInfo();
+  const { capabilities } = useStoreCapabilities();
   const { cart, refreshCart } = useCart();
   const { isLoggedIn } = useAuth();
   // ⛔ THE call the region feature exists for. Product reads alone and the
@@ -211,9 +269,27 @@ function CheckoutContent() {
         const locations = await client.getPickupLocations().catch(() => [] as PickupLocation[]);
         setPickupLocations(locations);
 
+        // The bare /checkout link carries no id. Look for the one this tab already
+        // opened for this very cart, and use it only while it still matches the
+        // cart. A shopper choosing a subset of lines always starts a fresh one.
+        let resumed: Checkout | null = null;
+        if (!existingCheckoutId && !selectedItemsParam) {
+          const storedId = readStoredCheckoutId(cart.id);
+          if (storedId) {
+            try {
+              const prior = await client.getCheckout(storedId);
+              if (matchesCart(prior, cart)) resumed = prior;
+              else clearStoredCheckoutId(cart.id);
+            } catch {
+              clearStoredCheckoutId(cart.id);
+            }
+          }
+        }
+
         // If returning with existing checkout ID, resume it
-        if (existingCheckoutId) {
-          const existing = await client.getCheckout(existingCheckoutId);
+        if (existingCheckoutId || resumed) {
+          const existing = resumed ?? (await client.getCheckout(existingCheckoutId as string));
+          storeCheckoutId(cart.id, existing.id);
           setCheckout(existing);
 
           // Preload custom field definitions and any existing values so the
@@ -279,6 +355,8 @@ function CheckoutContent() {
           ...(regionId ? { regionId } : {}),
         });
         setCheckout(newCheckout);
+        // A subset checkout belongs to those lines only, never to the whole cart.
+        if (!isStrictSubset) storeCheckoutId(cart.id, newCheckout.id);
 
         // Put the id in the URL so a RELOAD resumes instead of starting over.
         //
@@ -1057,7 +1135,7 @@ function CheckoutContent() {
                 */}
                 {bumpError && (
                   <p className="text-destructive text-xs" role="alert">
-                    {bumpError === 'CART_FULL' ? tp('cartFull') : tp('addToCartFailed')}
+                    {tp(addToCartErrorMessageKey(bumpError))}
                   </p>
                 )}
               </div>
@@ -1077,7 +1155,12 @@ function CheckoutContent() {
                       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 && (
+                  {/* Hidden while the store has gift cards off (`hasGiftCards`), so the
+                      shopper is not offered a box that can never accept a code. A card
+                      already applied keeps the field so it can still be removed. */}
+                  {checkout?.id &&
+                    (capabilities?.features.hasGiftCards === true ||
+                      (checkout.tenders?.length ?? 0) > 0) && (
                     <GiftCardInput
                       className="mt-3"
                       checkoutId={checkout.id}

package/templates/nextjs/base/src/app/order-confirmation/layout.tsx

@@ -2,6 +2,14 @@ import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
   robots: { index: false, follow: false },
+  // Static, server-rendered marker for Brainerce's Google Customer Reviews
+  // readiness check (Apps → Google → Readiness tab): it fetches this route
+  // with a plain HTTP GET, no JS execution, so the signal that the survey
+  // component is wired up has to live in server-rendered HTML, not in
+  // anything the client component below renders after mount. Keep this in
+  // place whenever `<GoogleCustomerReviewsOptIn />` is used on this route —
+  // removing one without the other makes the readiness check lie.
+  other: { 'brainerce-google-customer-reviews': '1' },
 };
 
 export default function Layout({ children }: { children: React.ReactNode }) {

package/templates/nextjs/base/src/app/order-confirmation/page.tsx

@@ -13,6 +13,7 @@ import { OrderCustomizations } from '@/components/account/order-customizations';
 import { LoadingSpinner } from '@/ui/shared/loading-spinner';
 import { useTranslations } from '@/core/lib/translations';
 import { trackPurchase } from '@/core/lib/tracking';
+import { GoogleCustomerReviewsOptIn } from '@/components/google-customer-reviews-optin';
 
 function OrderConfirmationContent() {
   const searchParams = useSearchParams();
@@ -203,6 +204,11 @@ function OrderConfirmationContent() {
           <ConfirmationDownloads orderId={result.status.orderId} checkoutId={checkoutId!} />
         )}
 
+        {/* Renders no visible markup. Self-gates entirely on whether the
+            merchant enabled Google Customer Reviews and this order has the
+            data the survey needs — see the component's own doc comment. */}
+        <GoogleCustomerReviewsOptIn checkoutId={checkoutId!} />
+
         <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
           <Link
             href="/products"

package/templates/nextjs/base/src/app/products/layout.tsx.ejs

@@ -0,0 +1,18 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: <%- language === 'he' ? "'מוצרים'" : "'Products'" %>,
+  description: <%- language === 'he' ? "'כל קטלוג המוצרים שלנו.'" : "'Browse our full collection of products.'" %>,
+  alternates: {
+    canonical: '/products',
+  },
+  openGraph: {
+    title: <%- language === 'he' ? "'מוצרים'" : "'Products'" %>,
+    description: <%- language === 'he' ? "'כל קטלוג המוצרים שלנו.'" : "'Browse our full collection of products.'" %>,
+    type: 'website',
+  },
+};
+
+export default function ProductsLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

package/templates/nextjs/base/src/components/account/loyalty-panel.tsx

@@ -87,6 +87,7 @@ export function LoyaltyPanel({ className }: LoyaltyPanelProps) {
   const [redeemingId, setRedeemingId] = useState<string | null>(null);
   const [redeemed, setRedeemed] = useState<RedeemedCoupon | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [linkCopied, setLinkCopied] = useState(false);
 
   useEffect(() => {
     let cancelled = false;
@@ -144,6 +145,18 @@ export function LoyaltyPanel({ className }: LoyaltyPanelProps) {
   const earningPaused = status.program.status !== 'ACTIVE';
   const tierLevel = status.tier?.level ?? 0;
 
+  async function copyReferralLink(code: string) {
+    const link = `${window.location.origin}/?ref=${code}`;
+    try {
+      await navigator.clipboard.writeText(link);
+      setLinkCopied(true);
+      setTimeout(() => setLinkCopied(false), 2000);
+    } catch {
+      // Clipboard access denied (permissions, insecure context) — the code is
+      // still visible on screen for the shopper to select and copy by hand.
+    }
+  }
+
   async function redeem(reward: LoyaltyReward) {
     setRedeemingId(reward.id);
     setError(null);
@@ -229,6 +242,30 @@ export function LoyaltyPanel({ className }: LoyaltyPanelProps) {
         </div>
       )}
 
+      {/* Referral share code. Null when the store has referrals disabled or
+          this customer isn't enrolled yet — absent entirely rather than an
+          empty block, same pattern as the tier/rewards sections above. */}
+      {status.referralCode && (
+        <div className="border-border mt-6 border-t pt-5">
+          <h3 className="text-foreground mb-1 text-sm font-semibold">
+            {t('referralSectionTitle')}
+          </h3>
+          <p className="text-muted-foreground text-sm">{t('referralShareHint')}</p>
+          <div className="mt-3 flex flex-wrap items-center gap-2">
+            <code className="bg-muted text-foreground rounded px-2 py-1 font-mono text-sm">
+              {status.referralCode}
+            </code>
+            <button
+              type="button"
+              onClick={() => copyReferralLink(status.referralCode as string)}
+              className="border-border rounded border px-3 py-1.5 text-sm font-medium transition-opacity hover:opacity-80"
+            >
+              {linkCopied ? t('referralLinkCopied') : t('referralCopyLink')}
+            </button>
+          </div>
+        </div>
+      )}
+
       {/* Rewards. An empty catalogue is a normal state — the merchant has not
           created any yet — so the list simply does not render. */}
       {rewards.length > 0 && (