create-brainerce-store 1.74.0 → 1.76.0

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

@@ -1,67 +1,74 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter, Link } from '@/core/lib/navigation';
-import { useAuth } from '@/core/providers/store-provider';
-import { proxyRegister } from '@/core/lib/auth';
-import { RegisterForm } from '@/components/auth/register-form';
-import { OAuthButtons } from '@/components/auth/oauth-buttons';
-import { useTranslations } from '@/core/lib/translations';
-
-export default function RegisterPage() {
-  const router = useRouter();
-  const auth = useAuth();
-  const t = useTranslations('auth');
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleRegister(data: {
-    firstName: string;
-    lastName: string;
-    email: string;
-    password: string;
-    acceptsMarketing: boolean;
-    /** Month and day only, never a year. Present together or not at all. */
-    birthMonth?: number;
-    birthDay?: number;
-  }) {
-    try {
-      setError(null);
-      const result = await proxyRegister(data);
-
-      if (result.requiresVerification) {
-        // Cookie already set by proxy; verify-email uses it for auth
-        router.push('/verify-email');
-        return;
-      }
-
-      // Cookie was set by the proxy; refresh auth state
-      await auth.login();
-      router.push('/');
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Registration failed. Please try again.';
-      setError(message);
-    }
-  }
-
-  return (
-    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
-      <div className="w-full max-w-md space-y-6">
-        <div className="text-center">
-          <h1 className="text-foreground text-2xl font-bold">{t('createAccountTitle')}</h1>
-          <p className="text-muted-foreground mt-1 text-sm">{t('joinSubtitle')}</p>
-        </div>
-
-        <RegisterForm onSubmit={handleRegister} error={error} />
-
-        <OAuthButtons />
-
-        <p className="text-muted-foreground text-center text-sm">
-          {t('alreadyHaveAccount')}{' '}
-          <Link href="/login" className="text-primary font-medium hover:underline">
-            {t('signIn')}
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { useRouter, Link } from '@/core/lib/navigation';
+import { useAuth } from '@/core/providers/store-provider';
+import { proxyRegister } from '@/core/lib/auth';
+import { RegisterForm } from '@/components/auth/register-form';
+import { OAuthButtons } from '@/components/auth/oauth-buttons';
+import { useTranslations } from '@/core/lib/translations';
+import { clearReferralCookie } from '@/core/lib/referral';
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const auth = useAuth();
+  const t = useTranslations('auth');
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleRegister(data: {
+    firstName: string;
+    lastName: string;
+    email: string;
+    password: string;
+    acceptsMarketing: boolean;
+    /** Month and day only, never a year. Present together or not at all. */
+    birthMonth?: number;
+    birthDay?: number;
+    /** Referral share code captured from a `?ref=` link, when there was one. */
+    referralCode?: string;
+  }) {
+    try {
+      setError(null);
+      const result = await proxyRegister(data);
+
+      // The code has been spent. Drop it so the next account created in this
+      // browser does not silently credit the same referrer again.
+      if (data.referralCode) clearReferralCookie();
+
+      if (result.requiresVerification) {
+        // Cookie already set by proxy; verify-email uses it for auth
+        router.push('/verify-email');
+        return;
+      }
+
+      // Cookie was set by the proxy; refresh auth state
+      await auth.login();
+      router.push('/');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Registration failed. Please try again.';
+      setError(message);
+    }
+  }
+
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+      <div className="w-full max-w-md space-y-6">
+        <div className="text-center">
+          <h1 className="text-foreground text-2xl font-bold">{t('createAccountTitle')}</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{t('joinSubtitle')}</p>
+        </div>
+
+        <RegisterForm onSubmit={handleRegister} error={error} />
+
+        <OAuthButtons />
+
+        <p className="text-muted-foreground text-center text-sm">
+          {t('alreadyHaveAccount')}{' '}
+          <Link href="/login" className="text-primary font-medium hover:underline">
+            {t('signIn')}
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -3,6 +3,25 @@
 /**
  * Loyalty — points balance, tier progress, and the reward catalogue.
  *
+ * ⛔ THE HOSTED WIDGET COMES FIRST. `getLoyaltyWidgetSession()` returns an
+ * `embedUrl` that drops straight into an `<iframe src>`, and when it resolves
+ * this panel renders that instead of the hand-built UI below. The hosted widget
+ * is maintained by the platform: new loyalty features (badges, membership,
+ * referrals) appear in it without anyone touching this file, and it cannot
+ * drift out of step with the API. Reach for the hand-built panel only when you
+ * need a look the widget cannot give you.
+ *
+ * The `embedUrl` carries a scoped ~15-minute session token, never the real
+ * customerToken. It is minted on mount, so any navigation that remounts this
+ * panel refreshes it; a page left open past the expiry shows the widget's own
+ * expired state, and a reload fixes it.
+ *
+ * ⛔ THE HAND-BUILT PANEL BELOW IS THE FALLBACK, NOT DEAD CODE. The session call
+ * fails on an older backend, on a network blip, and wherever the widget is not
+ * provisioned. Everything from here down is what the shopper sees then, so it
+ * has to keep working. Do not delete it because the widget renders on your
+ * machine.
+ *
  * ⛔ REDEEMING DOES NOT DISCOUNT ANYTHING BY ITSELF. `redeemLoyaltyReward()`
  * spends the points and mints a ONE-TIME COUPON CODE, which the shopper still
  * has to apply at checkout. If the panel says "redeemed!" and stops there, the
@@ -16,11 +35,17 @@
  * than an absent one. Build the panel anyway: the merchant turns the program on
  * from the dashboard without touching this code.
  *
- * ⛔ `pointsBalance` EXCLUDES PENDING POINTS. Points from a recent order sit
- * pending for a merchant-set number of days before they can be spent, so a
- * shopper who just bought something sees a balance that does not include it.
- * That is correct, and it is why the copy says "ready to spend" rather than
- * "earned".
+ * ⛔ `pointsBalance` EXCLUDES PENDING POINTS — SO YOU MUST RENDER
+ * `pendingPoints` TOO. Points from a recent order sit pending for a
+ * merchant-set number of days (`program.pendingDays`) before they can be
+ * spent, so a shopper who just bought something sees a balance that does not
+ * include them. Showing only `pointsBalance` therefore answers "I just
+ * ordered, where are my points?" with a bare 0, which reads as a broken
+ * programme rather than a waiting period — the single most common support
+ * question this panel gets. Show the pending line whenever `pendingPoints > 0`,
+ * dated with `pendingPointsConfirmAt` (the night they actually confirm, not the
+ * window's end). The balance copy still says "ready to spend" rather than
+ * "earned", because that is precisely what distinguishes the two numbers.
  *
  * ⛔ A REWARD CAN BE VISIBLE AND UNREDEEMABLE. Two independent gates:
  * `pointsCost` above the balance, and `minTierLevel` above the shopper's tier.
@@ -57,6 +82,7 @@ export function LoyaltyPanel({ className }: LoyaltyPanelProps) {
   const t = useTranslations('loyalty');
   const [status, setStatus] = useState<LoyaltyStatus | null>(null);
   const [rewards, setRewards] = useState<LoyaltyReward[]>([]);
+  const [widgetUrl, setWidgetUrl] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [redeemingId, setRedeemingId] = useState<string | null>(null);
   const [redeemed, setRedeemed] = useState<RedeemedCoupon | null>(null);
@@ -68,14 +94,19 @@ export function LoyaltyPanel({ className }: LoyaltyPanelProps) {
     async function load() {
       const client = getClient();
       // Settled, not all: a store with rewards configured and none active
-      // still has a balance worth showing, and vice versa.
-      const [statusResult, rewardsResult] = await Promise.allSettled([
+      // still has a balance worth showing, and vice versa. The widget session
+      // rides along in the same batch rather than a second round trip, and its
+      // failure is the ordinary case on a backend that does not serve it,
+      // which is exactly why `allSettled` and not `all`.
+      const [statusResult, rewardsResult, widgetResult] = await Promise.allSettled([
         client.getLoyaltyStatus(),
         client.getAvailableRewards(),
+        client.getLoyaltyWidgetSession(),
       ]);
       if (cancelled) return;
       if (statusResult.status === 'fulfilled') setStatus(statusResult.value);
       if (rewardsResult.status === 'fulfilled') setRewards(rewardsResult.value);
+      if (widgetResult.status === 'fulfilled') setWidgetUrl(widgetResult.value.embedUrl);
       setLoading(false);
     }
 
@@ -87,8 +118,28 @@ export function LoyaltyPanel({ className }: LoyaltyPanelProps) {
 
   // No program on this store, or the status call failed: render nothing at all.
   // An empty card is worse than no card.
+  //
+  // ⛔ This guard stays FIRST, ahead of the widget branch below. A store with no
+  // loyalty program must render nothing, not an iframe that loads a panel about
+  // a program that does not exist.
   if (loading || !status?.program) return null;
 
+  // The hosted widget, when the platform minted a session for it. Everything
+  // below this branch is the fallback.
+  if (widgetUrl) {
+    return (
+      <section className={cn('border-border rounded-lg border p-6', className)}>
+        <h2 className="text-foreground text-lg font-semibold">{t('title')}</h2>
+        <iframe
+          src={widgetUrl}
+          title={t('widgetTitle')}
+          loading="lazy"
+          className="mt-4 h-[420px] w-full rounded border-0"
+        />
+      </section>
+    );
+  }
+
   const pointsName = status.program.pointsName || t('pointsFallback');
   const earningPaused = status.program.status !== 'ACTIVE';
   const tierLevel = status.tier?.level ?? 0;
@@ -123,6 +174,27 @@ export function LoyaltyPanel({ className }: LoyaltyPanelProps) {
         {earningPaused ? t('earningPaused') : t('readyToSpend')}
       </p>
 
+      {/* Points from a recent order live here, not in the balance above. Without
+          this line a shopper who just bought something sees a 0 and no reason
+          for it. Absent entirely at zero — an empty "0 pending" is noise. */}
+      {status.pendingPoints > 0 && (
+        <p className="text-muted-foreground mt-2 text-sm">
+          {status.pendingPointsConfirmAt
+            ? t('pendingWithDate', {
+                points: status.pendingPoints.toLocaleString(),
+                pointsName,
+                date: new Date(status.pendingPointsConfirmAt).toLocaleDateString(undefined, {
+                  day: 'numeric',
+                  month: 'long',
+                }),
+              })
+            : t('pending', {
+                points: status.pendingPoints.toLocaleString(),
+                pointsName,
+              })}
+        </p>
+      )}
+
       {/* Tier progress. Rendered only when the store configured tiers — the
           whole block is absent otherwise, rather than a full bar with no name. */}
       {status.tier && (

package/templates/nextjs/base/src/components/account/order-history.tsx

@@ -417,6 +417,40 @@ function OrderFinancialSummary({ order, currency }: { order: Order; currency: st
           {formatPrice(parseFloat(totalAmount), { currency }) as string}
         </span>
       </div>
+
+      {/* Order history is the record a customer checks a card statement
+          against, months later. A total with no gift-card line is the one that
+          makes them think they were charged twice. */}
+      {order.tenders && order.tenders.length > 0 && (
+        <>
+          {order.tenders.map((tender) => (
+            <div key={tender.id} className="flex items-center justify-between">
+              <span className="text-muted-foreground">
+                {tender.giftCard?.codeLast4
+                  ? `${tc('giftCard')} ····${tender.giftCard.codeLast4}`
+                  : tc('giftCard')}
+              </span>
+              <span className="text-primary">
+                -{formatPrice(parseFloat(tender.amountBase), { currency }) as string}
+              </span>
+            </div>
+          ))}
+          <div className="border-border flex items-center justify-between border-t pt-1">
+            <span className="text-foreground font-medium">{tc('amountCharged')}</span>
+            <span className="text-foreground font-semibold">
+              {
+                formatPrice(
+                  order.tenders.reduce(
+                    (due, tn) => due - parseFloat(tn.amountBase),
+                    parseFloat(totalAmount)
+                  ),
+                  { currency }
+                ) as string
+              }
+            </span>
+          </div>
+        </>
+      )}
     </div>
   );
 }