create-brainerce-store 1.67.0 → 1.71.0

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>
+  );
+}