create-brainerce-store 1.68.0 → 1.72.0

package/templates/nextjs/designs/atelier/ui/cart/reservation-countdown.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import type { ReservationInfo } from 'brainerce';
 import { useTranslations } from '@/core/lib/translations';
 import { cn } from '@/core/lib/utils';
@@ -8,6 +8,14 @@ import { IconClock } from '@/ui/shared/icons';
 
 interface ReservationCountdownProps {
   reservation: ReservationInfo;
+  /**
+   * Fired once per reservation window when the timer reaches zero, including
+   * when the page opens on an already-expired reservation. Wired to
+   * `useCartPage().onReservationExpired`, which refreshes the cart and blocks
+   * checkout. This component only displays; it never decides what is still
+   * purchasable.
+   */
+  onExpire?: () => void;
   className?: string;
 }
 
@@ -16,9 +24,17 @@ interface ReservationCountdownProps {
  * prop comes from useCartPage().cart.reservation. Keeps the ticking logic
  * and the expired/urgent states (exposed via data-state).
  */
-export function ReservationCountdown({ reservation, className }: ReservationCountdownProps) {
+export function ReservationCountdown({
+  reservation,
+  onExpire,
+  className,
+}: ReservationCountdownProps) {
   const t = useTranslations('reservation');
-  const [remainingSeconds, setRemainingSeconds] = useState<number>(0);
+  // `null` means "not measured yet". Server-rendered HTML must not compute a
+  // time, or it disagrees with the client on hydration; starting at 0 instead
+  // would render the expired state for one frame on a perfectly live
+  // reservation, and would fire onExpire on every mount.
+  const [remainingSeconds, setRemainingSeconds] = useState<number | null>(null);
 
   const calculateRemaining = useCallback(() => {
     if (!reservation.expiresAt) return 0;
@@ -27,8 +43,29 @@ export function ReservationCountdown({ reservation, className }: ReservationCoun
     return Math.max(0, Math.floor((expiresAtMs - nowMs) / 1000));
   }, [reservation.expiresAt]);
 
+  // Report each expiry window at most once. Keyed on `expiresAt` rather than a
+  // boolean, so the cart refresh that expiry triggers (which remounts this
+  // component) cannot bounce straight back into a second report.
+  const expiresAt = reservation.expiresAt;
+  const reportedExpiryRef = useRef<string | null>(null);
+  const onExpireRef = useRef(onExpire);
+  // Kept in a ref, and synced in an effect rather than during render, so a
+  // caller passing an inline arrow does not restart the timer every render.
   useEffect(() => {
-    setRemainingSeconds(calculateRemaining());
+    onExpireRef.current = onExpire;
+  }, [onExpire]);
+
+  const reportExpired = useCallback(() => {
+    if (!expiresAt) return;
+    if (reportedExpiryRef.current === expiresAt) return;
+    reportedExpiryRef.current = expiresAt;
+    onExpireRef.current?.();
+  }, [expiresAt]);
+
+  useEffect(() => {
+    const initial = calculateRemaining();
+    setRemainingSeconds(initial);
+    if (initial <= 0) reportExpired();
 
     const interval = setInterval(() => {
       const remaining = calculateRemaining();
@@ -36,18 +73,20 @@ export function ReservationCountdown({ reservation, className }: ReservationCoun
 
       if (remaining <= 0) {
         clearInterval(interval);
+        reportExpired();
       }
     }, 1000);
 
     return () => clearInterval(interval);
-  }, [calculateRemaining]);
+  }, [calculateRemaining, reportExpired]);
 
   if (!reservation.hasReservation) return null;
 
-  const minutes = Math.floor(remainingSeconds / 60);
-  const seconds = remainingSeconds % 60;
-  const isExpired = remainingSeconds <= 0;
-  const isUrgent = remainingSeconds > 0 && remainingSeconds < 120;
+  const displaySeconds = remainingSeconds ?? 0;
+  const minutes = Math.floor(displaySeconds / 60);
+  const seconds = displaySeconds % 60;
+  const isExpired = remainingSeconds !== null && remainingSeconds <= 0;
+  const isUrgent = displaySeconds > 0 && displaySeconds < 120;
 
   const displayMessage = reservation.countdownMessage
     ? reservation.countdownMessage.replace(
@@ -72,7 +111,10 @@ export function ReservationCountdown({ reservation, className }: ReservationCoun
         <IconClock size={18} />
       </span>
       {isExpired ? (
-        <p>{t('expired')}</p>
+        <div>
+          <p>{t('expired')}</p>
+          <p className="text-xs font-normal opacity-90">{t('expiredHint')}</p>
+        </div>
       ) : displayMessage ? (
         <p>{displayMessage}</p>
       ) : (

package/templates/nextjs/designs/atelier/ui/layout/site-footer.tsx.ejs

@@ -1,142 +1,155 @@
-/**
- * Storefront footer — driven by the merchant's dashboard configuration
- * (Sell → Content → Footer), rendered as a deep-forest "signature" band:
- * brand block + tagline + social, merchant link columns, copyright bar.
- *
- * API contract:
- *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
- *   Returns null on 404 — the fallback branch renders the same designed
- *   chrome with essential storefront links so the page never looks broken.
- */
-import * as React from 'react';
-import { Link } from '@/core/lib/navigation';
-import type { Content } from 'brainerce';
-<% if (i18nEnabled) { %>
-import { getMessages, defaultLocale } from '@/i18n';
-<% } else { %>
-import { messages as staticMessages, defaultLocale } from '@/i18n';
-<% } %>
-import { IconSocial, IconShield } from '@/ui/shared/icons';
-import { resolveNavUrl } from '@/ui/layout/nav-url';
-
-interface SiteFooterProps {
-  /** Pre-fetched footer payload (server-side). `null` triggers fallback rendering. */
-  footer: Content<'FOOTER'> | null;
-  /** Store name shown in the brand block + fallback copyright. */
-  storeName?: string;
-  /** Store locale for the translation-key copy (server component). */
-  locale?: string;
-}
-
-export async function SiteFooter({ footer, storeName, locale = defaultLocale }: SiteFooterProps) {
-<% if (i18nEnabled) { %>
-  const messages = await getMessages(locale);
-<% } else { %>
-  const messages = staticMessages;
-<% } %>
-  const t = (messages.footer ?? {}) as Record<string, string>;
-
-  const data = footer?.data;
-  const columns = data?.columns ?? [];
-  const social = data?.social ?? [];
-  const year = new Date().getFullYear();
-  const brandLabel = storeName ?? 'Store';
-
-  const fallbackLinks = [
-    { url: '/products', label: t.linkProducts },
-    { url: '/faq', label: t.linkFaq },
-    { url: '/contact', label: t.linkContact },
-    { url: '/cart', label: t.linkCart },
-  ];
-
-  return (
-    <footer className="mt-auto bg-primary text-primary-foreground">
-      <div className="container-page grid gap-10 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:py-16">
-        {/* Brand block */}
-        <div className="sm:col-span-2 lg:col-span-2 lg:pe-16">
-          <Link href="/" className="font-display text-2xl font-semibold">
-            {brandLabel}
-          </Link>
-          <p className="mt-3 max-w-sm text-sm leading-6 text-primary-foreground/70">
-            {t.tagline}
-          </p>
-
-          {social.length > 0 && (
-            <div className="mt-6">
-              <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-primary-foreground/60">
-                {t.followUs}
-              </p>
-              <ul className="flex flex-wrap items-center gap-2">
-                {social.map((entry, idx) => (
-                  <li key={`${entry.platform}-${idx}`}>
-                    <a
-                      href={entry.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label={entry.platform}
-                      className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-primary-foreground/25 text-primary-foreground/85 transition-colors hover:bg-primary-foreground hover:text-primary"
-                    >
-                      <IconSocial platform={entry.platform} size={20} />
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </div>
-
-        {/* Merchant link columns (or essential fallback links) */}
-        {columns.length > 0 ? (
-          columns.map((col, idx) => (
-            <nav key={`${col.title}-${idx}`} aria-label={col.title}>
-              <h3 className="mb-4 font-sans text-sm font-semibold text-primary-foreground">
-                {col.title}
-              </h3>
-              <ul className="space-y-2.5">
-                {col.links.map((link, linkIdx) => (
-                  <li key={`${link.url}-${linkIdx}`}>
-                    <a
-                      href={resolveNavUrl(link.url)}
-                      className="text-sm text-primary-foreground/70 transition-colors hover:text-primary-foreground"
-                    >
-                      {link.label}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </nav>
-          ))
-        ) : (
-          <nav aria-label={t.quickLinksTitle}>
-            <h3 className="mb-4 font-sans text-sm font-semibold text-primary-foreground">
-              {t.quickLinksTitle}
-            </h3>
-            <ul className="space-y-2.5">
-              {fallbackLinks.map((link) => (
-                <li key={link.url}>
-                  <a
-                    href={link.url}
-                    className="text-sm text-primary-foreground/70 transition-colors hover:text-primary-foreground"
-                  >
-                    {link.label}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </nav>
-        )}
-      </div>
-
-      {/* Bottom bar */}
-      <div className="border-t border-primary-foreground/15">
-        <div className="container-page flex flex-col items-center justify-between gap-3 py-5 text-xs text-primary-foreground/60 sm:flex-row">
-          <p>{data?.copyright ?? `© ${year} ${brandLabel}. ${messages.common?.allRightsReserved ?? ''}`}</p>
-          <p className="inline-flex items-center gap-1.5">
-            <IconShield size={16} />
-            {t.securePayments}
-          </p>
-        </div>
-      </div>
-    </footer>
-  );
-}
+/**
+ * Storefront footer — driven by the merchant's dashboard configuration
+ * (Sell → Content → Footer), rendered as a deep-forest "signature" band:
+ * brand block + tagline + social, merchant link columns, copyright bar.
+ *
+ * API contract:
+ *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
+ *   Returns null on 404 — the fallback branch renders the same designed
+ *   chrome with essential storefront links so the page never looks broken.
+ */
+import * as React from 'react';
+import { Link } from '@/core/lib/navigation';
+import type { Content } from 'brainerce';
+<% if (i18nEnabled) { %>
+import { getMessages, defaultLocale } from '@/i18n';
+<% } else { %>
+import { messages as staticMessages, defaultLocale } from '@/i18n';
+<% } %>
+import { IconSocial, IconShield } from '@/ui/shared/icons';
+import { resolveNavUrl } from '@/ui/layout/nav-url';
+// Base-template component — design packs overlay, so files the pack does not
+// ship stay as base. Wired here because this pack DOES ship its own footer.
+import { NewsletterSignup } from '@/ui/layout/newsletter-signup';
+
+interface SiteFooterProps {
+  /** Pre-fetched footer payload (server-side). `null` triggers fallback rendering. */
+  footer: Content<'FOOTER'> | null;
+  /** Store name shown in the brand block + fallback copyright. */
+  storeName?: string;
+  /** Store locale for the translation-key copy (server component). */
+  locale?: string;
+}
+
+export async function SiteFooter({ footer, storeName, locale = defaultLocale }: SiteFooterProps) {
+<% if (i18nEnabled) { %>
+  const messages = await getMessages(locale);
+<% } else { %>
+  const messages = staticMessages;
+<% } %>
+  const t = (messages.footer ?? {}) as Record<string, string>;
+
+  const data = footer?.data;
+  const columns = data?.columns ?? [];
+  const social = data?.social ?? [];
+  const year = new Date().getFullYear();
+  const brandLabel = storeName ?? 'Store';
+
+  const fallbackLinks = [
+    { url: '/products', label: t.linkProducts },
+    { url: '/faq', label: t.linkFaq },
+    { url: '/contact', label: t.linkContact },
+    { url: '/cart', label: t.linkCart },
+  ];
+
+  return (
+    <footer className="mt-auto bg-primary text-primary-foreground">
+      <div className="container-page grid gap-10 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:py-16">
+        {/* Brand block */}
+        <div className="sm:col-span-2 lg:col-span-2 lg:pe-16">
+          <Link href="/" className="font-display text-2xl font-semibold">
+            {brandLabel}
+          </Link>
+          <p className="mt-3 max-w-sm text-sm leading-6 text-primary-foreground/70">
+            {t.tagline}
+          </p>
+
+          {/*
+            Newsletter signup. Remove this block if the merchant does not want a
+            mailing list — nothing else depends on it. Confirmed opt-in: the
+            address is not subscribed until the recipient clicks the emailed
+            link, which is why the success copy says "check your email".
+          */}
+          <div className="mt-8 max-w-sm">
+            <NewsletterSignup />
+          </div>
+
+          {social.length > 0 && (
+            <div className="mt-6">
+              <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-primary-foreground/60">
+                {t.followUs}
+              </p>
+              <ul className="flex flex-wrap items-center gap-2">
+                {social.map((entry, idx) => (
+                  <li key={`${entry.platform}-${idx}`}>
+                    <a
+                      href={entry.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      aria-label={entry.platform}
+                      className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-primary-foreground/25 text-primary-foreground/85 transition-colors hover:bg-primary-foreground hover:text-primary"
+                    >
+                      <IconSocial platform={entry.platform} size={20} />
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+
+        {/* Merchant link columns (or essential fallback links) */}
+        {columns.length > 0 ? (
+          columns.map((col, idx) => (
+            <nav key={`${col.title}-${idx}`} aria-label={col.title}>
+              <h3 className="mb-4 font-sans text-sm font-semibold text-primary-foreground">
+                {col.title}
+              </h3>
+              <ul className="space-y-2.5">
+                {col.links.map((link, linkIdx) => (
+                  <li key={`${link.url}-${linkIdx}`}>
+                    <a
+                      href={resolveNavUrl(link.url)}
+                      className="text-sm text-primary-foreground/70 transition-colors hover:text-primary-foreground"
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ))
+        ) : (
+          <nav aria-label={t.quickLinksTitle}>
+            <h3 className="mb-4 font-sans text-sm font-semibold text-primary-foreground">
+              {t.quickLinksTitle}
+            </h3>
+            <ul className="space-y-2.5">
+              {fallbackLinks.map((link) => (
+                <li key={link.url}>
+                  <a
+                    href={link.url}
+                    className="text-sm text-primary-foreground/70 transition-colors hover:text-primary-foreground"
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+      </div>
+
+      {/* Bottom bar */}
+      <div className="border-t border-primary-foreground/15">
+        <div className="container-page flex flex-col items-center justify-between gap-3 py-5 text-xs text-primary-foreground/60 sm:flex-row">
+          <p>{data?.copyright ?? `© ${year} ${brandLabel}. ${messages.common?.allRightsReserved ?? ''}`}</p>
+          <p className="inline-flex items-center gap-1.5">
+            <IconShield size={16} />
+            {t.securePayments}
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}