create-nextblock 0.15.8 → 0.15.9

package/templates/nextblock-template/app/providers.tsx

@@ -1,96 +1,96 @@
-"use client";
-
-import { ThemeProvider } from "next-themes";
-
-// Suppress the React 19 warning for the <script> tag generated by next-themes in development
-if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
-  const orig = console.error;
-  console.error = (...args: any[]) => {
-    if (typeof args[0] === 'string' && args[0].includes('Encountered a script tag')) {
-      return;
-    }
-    orig.apply(console, args);
-  };
-}
-import { AuthProvider } from '../context/AuthContext';
-import { LanguageProvider, useLanguage } from '../context/LanguageContext';
-import { CurrentContentProvider } from '../context/CurrentContentContext';
-import { ThemeCatalogProvider } from '../context/ThemeCatalogContext';
-import { DeferredCartTranslator } from '../components/DeferredCartTranslator';
-import { CurrencyProvider } from '@nextblock-cms/ecommerce/CurrencyProvider';
-import { TranslationsProvider } from '@nextblock-cms/utils';
-
-function TranslationBridge({
-  children,
-  translations,
-}: {
-  children: React.ReactNode;
-  translations: { key: string; translations: Record<string, string> }[];
-}) {
-  const { currentLocale } = useLanguage();
-
-  return (
-    <TranslationsProvider translations={translations} lang={currentLocale}>
-      {children}
-    </TranslationsProvider>
-  );
-}
-
-export function Providers({ children, ...props }: { children: React.ReactNode;[key: string]: any; }) {
-  const {
-    serverUser,
-    serverProfile,
-    serverLocale,
-    initialCurrencies,
-    initialCurrencyCode,
-    initialAvailableLanguages,
-    initialDefaultLanguage,
-    rememberVisitorChoice,
-    translations,
-    nonce,
-    themeSlugs,
-    initialTheme,
-    themeCatalog,
-  } = props;
-
-  // Themes come from the site_themes table. Fall back to the three that ship in
-  // libs/ui/src/styles/theme.css if the table is empty or unreachable, so the
-  // switcher never renders an empty list.
-  const resolvedThemes: string[] =
-    Array.isArray(themeSlugs) && themeSlugs.length > 0 ? themeSlugs : ['light', 'dark', 'vibrant'];
-  const resolvedDefault: string =
-    typeof initialTheme === 'string' && resolvedThemes.includes(initialTheme) ? initialTheme : 'light';
-
-  return (
-    <AuthProvider serverUser={serverUser} serverProfile={serverProfile}>
-      <LanguageProvider
-        serverLocale={serverLocale}
-        initialAvailableLanguages={initialAvailableLanguages}
-        initialDefaultLanguage={initialDefaultLanguage}
-        rememberVisitorChoice={rememberVisitorChoice}
-      >
-        <CurrencyProvider
-          initialCurrencies={initialCurrencies}
-          initialCurrencyCode={initialCurrencyCode}
-          locale={serverLocale}
-        >
-          <CurrentContentProvider>
-            <DeferredCartTranslator />
-            <TranslationBridge translations={translations}>
-              <ThemeProvider
-                attribute="class"
-                defaultTheme={resolvedDefault}
-                enableSystem
-                disableTransitionOnChange
-                nonce={nonce}
-                themes={resolvedThemes}
-              >
-                <ThemeCatalogProvider themes={themeCatalog}>{children}</ThemeCatalogProvider>
-              </ThemeProvider>
-            </TranslationBridge>
-          </CurrentContentProvider>
-        </CurrencyProvider>
-      </LanguageProvider>
-    </AuthProvider>
-  );
-}
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+// Suppress the React 19 warning for the <script> tag generated by next-themes in development
+if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
+  const orig = console.error;
+  console.error = (...args: any[]) => {
+    if (typeof args[0] === 'string' && args[0].includes('Encountered a script tag')) {
+      return;
+    }
+    orig.apply(console, args);
+  };
+}
+import { AuthProvider } from '../context/AuthContext';
+import { LanguageProvider, useLanguage } from '../context/LanguageContext';
+import { CurrentContentProvider } from '../context/CurrentContentContext';
+import { ThemeCatalogProvider } from '../context/ThemeCatalogContext';
+import { DeferredCartTranslator } from '../components/DeferredCartTranslator';
+import { CurrencyProvider } from '@nextblock-cms/ecommerce/CurrencyProvider';
+import { TranslationsProvider } from '@nextblock-cms/utils';
+
+function TranslationBridge({
+  children,
+  translations,
+}: {
+  children: React.ReactNode;
+  translations: { key: string; translations: Record<string, string> }[];
+}) {
+  const { currentLocale } = useLanguage();
+
+  return (
+    <TranslationsProvider translations={translations} lang={currentLocale}>
+      {children}
+    </TranslationsProvider>
+  );
+}
+
+export function Providers({ children, ...props }: { children: React.ReactNode;[key: string]: any; }) {
+  const {
+    serverUser,
+    serverProfile,
+    serverLocale,
+    initialCurrencies,
+    initialCurrencyCode,
+    initialAvailableLanguages,
+    initialDefaultLanguage,
+    rememberVisitorChoice,
+    translations,
+    nonce,
+    themeSlugs,
+    initialTheme,
+    themeCatalog,
+  } = props;
+
+  // Themes come from the site_themes table. Fall back to the three that ship in
+  // libs/ui/src/styles/theme.css if the table is empty or unreachable, so the
+  // switcher never renders an empty list.
+  const resolvedThemes: string[] =
+    Array.isArray(themeSlugs) && themeSlugs.length > 0 ? themeSlugs : ['light', 'dark', 'vibrant'];
+  const resolvedDefault: string =
+    typeof initialTheme === 'string' && resolvedThemes.includes(initialTheme) ? initialTheme : 'light';
+
+  return (
+    <AuthProvider serverUser={serverUser} serverProfile={serverProfile}>
+      <LanguageProvider
+        serverLocale={serverLocale}
+        initialAvailableLanguages={initialAvailableLanguages}
+        initialDefaultLanguage={initialDefaultLanguage}
+        rememberVisitorChoice={rememberVisitorChoice}
+      >
+        <CurrencyProvider
+          initialCurrencies={initialCurrencies}
+          initialCurrencyCode={initialCurrencyCode}
+          locale={serverLocale}
+        >
+          <CurrentContentProvider>
+            <DeferredCartTranslator />
+            <TranslationBridge translations={translations}>
+              <ThemeProvider
+                attribute="class"
+                defaultTheme={resolvedDefault}
+                enableSystem
+                disableTransitionOnChange
+                nonce={nonce}
+                themes={resolvedThemes}
+              >
+                <ThemeCatalogProvider themes={themeCatalog}>{children}</ThemeCatalogProvider>
+              </ThemeProvider>
+            </TranslationBridge>
+          </CurrentContentProvider>
+        </CurrencyProvider>
+      </LanguageProvider>
+    </AuthProvider>
+  );
+}

package/templates/nextblock-template/app/thread/ThreadView.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { useActionState } from 'react';
+import { useFormStatus } from 'react-dom';
+import { Button } from '@nextblock-cms/ui';
+import { Textarea } from '@nextblock-cms/ui';
+import { useTranslations } from '@nextblock-cms/utils';
+import { CheckCircle2, Loader2, Send } from 'lucide-react';
+
+import { AuthBotProtection } from '../../components/auth/AuthBotProtection';
+import { submitThreadReply, type ThreadReplyState } from '../actions/threadActions';
+
+export interface ThreadMessage {
+  id: string;
+  direction: 'inbound' | 'outbound';
+  body: string;
+  author_name: string | null;
+  created_at: string;
+}
+
+interface ThreadViewProps {
+  invalid?: boolean;
+  subjectLabel?: string;
+  closed?: boolean;
+  messages?: ThreadMessage[];
+  botProtectionProvider?: 'none' | 'turnstile' | 'recaptcha';
+  botProtectionSiteKey?: string;
+  scriptNonce?: string;
+}
+
+const INITIAL_STATE: ThreadReplyState = { success: false, messageKey: '' };
+
+// `t()` returns the key itself when a translation row is missing, so every string
+// carries the English literal it should fall back to.
+const FALLBACKS: Record<string, string> = {
+  'thread.heading': 'Your conversation',
+  'thread.reply_label': 'Write a reply',
+  'thread.send': 'Send reply',
+  'thread.sending': 'Sending…',
+  'thread.sent': 'Thanks - your reply has been sent.',
+  'thread.error': "Sorry, your reply couldn't be sent. Please try again in a moment.",
+  'thread.throttled': "You've sent several replies already. Please wait a few minutes.",
+  'thread.closed': 'This conversation has been closed.',
+  'thread.invalid':
+    'This link has expired or is no longer valid. If you still need help, please contact us again from our website.',
+  'thread.you': 'You',
+};
+
+function SendButton({ label, pendingLabel }: { label: string; pendingLabel: string }) {
+  const { pending } = useFormStatus();
+  return (
+    <Button type="submit" disabled={pending} className="min-w-[140px]">
+      {pending ? (
+        <>
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          {pendingLabel}
+        </>
+      ) : (
+        <>
+          <Send className="mr-2 h-4 w-4" />
+          {label}
+        </>
+      )}
+    </Button>
+  );
+}
+
+export default function ThreadView({
+  invalid = false,
+  subjectLabel,
+  closed = false,
+  messages = [],
+  botProtectionProvider = 'none',
+  botProtectionSiteKey = '',
+  scriptNonce,
+}: ThreadViewProps) {
+  const { t } = useTranslations();
+  const [state, formAction] = useActionState(submitThreadReply, INITIAL_STATE);
+
+  const label = (key: string): string => {
+    const value = t(key);
+    return value === key ? (FALLBACKS[key] ?? key) : value;
+  };
+
+  // One page for every failure: expired, revoked, and never-existed are indistinguishable
+  // on purpose, so this page cannot be used to probe for valid threads.
+  if (invalid) {
+    return (
+      <div className="rounded-2xl border border-border/80 bg-card/50 p-6 text-center">
+        <p className="text-sm text-muted-foreground">{label('thread.invalid')}</p>
+      </div>
+    );
+  }
+
+  const errorText = state.message || (!state.success && state.messageKey ? label(state.messageKey) : null);
+
+  return (
+    <div className="space-y-6">
+      <header>
+        <h1 className="text-xl font-semibold text-foreground">{label('thread.heading')}</h1>
+        {subjectLabel && <p className="text-sm text-muted-foreground">{subjectLabel}</p>}
+      </header>
+
+      <ol className="space-y-4">
+        {messages.map((message) => {
+          const fromVisitor = message.direction === 'inbound';
+          return (
+            <li
+              key={message.id}
+              className={`rounded-2xl border p-4 ${
+                fromVisitor
+                  ? 'border-border/80 bg-card/50'
+                  : 'border-primary/30 bg-primary/5'
+              }`}
+            >
+              <div className="mb-1 flex items-baseline justify-between gap-3">
+                <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                  {fromVisitor ? label('thread.you') : message.author_name || 'Support'}
+                </span>
+                <time className="text-xs text-muted-foreground" suppressHydrationWarning>
+                  {new Date(message.created_at).toLocaleString()}
+                </time>
+              </div>
+              <p className="whitespace-pre-wrap text-sm text-foreground">{message.body}</p>
+            </li>
+          );
+        })}
+      </ol>
+
+      {state.success ? (
+        <div className="flex items-start gap-3 rounded-2xl border border-emerald-200 bg-emerald-50 p-4 dark:border-emerald-900/50 dark:bg-emerald-950/30">
+          <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-emerald-600 dark:text-emerald-400" />
+          <p className="text-sm text-emerald-900 dark:text-emerald-200">{label('thread.sent')}</p>
+        </div>
+      ) : closed ? (
+        <p className="rounded-2xl border border-dashed border-border p-4 text-center text-sm text-muted-foreground">
+          {label('thread.closed')}
+        </p>
+      ) : (
+        <form action={formAction} className="space-y-3 rounded-2xl border border-border/80 bg-card/50 p-4">
+          <label
+            htmlFor="thread-reply"
+            className="block text-xs font-semibold uppercase tracking-wider text-muted-foreground"
+          >
+            {label('thread.reply_label')}
+          </label>
+          <Textarea id="thread-reply" name="body" required maxLength={5000} className="min-h-[120px]" />
+
+          <AuthBotProtection
+            provider={botProtectionProvider}
+            siteKey={botProtectionSiteKey}
+            scriptNonce={scriptNonce}
+          />
+
+          {errorText && <p className="text-sm font-semibold text-destructive">{errorText}</p>}
+
+          <div className="flex justify-end">
+            <SendButton label={label('thread.send')} pendingLabel={label('thread.sending')} />
+          </div>
+        </form>
+      )}
+    </div>
+  );
+}

package/templates/nextblock-template/app/thread/[token]/route.ts

@@ -0,0 +1,57 @@
+import { NextResponse } from 'next/server';
+import { getServiceRoleSupabaseClient } from '@nextblock-cms/db/server';
+
+import { setSecureCookie } from '../../../lib/auth/cookies';
+import {
+  THREAD_COOKIE,
+  secondsUntilExpiry,
+  verifyThreadToken,
+} from '../../../lib/messages/thread-token';
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+/**
+ * Exchange a mailed thread link for a session cookie, then get the token out of the URL.
+ *
+ * This redirect is the most important control in the whole feature. The app sends
+ * `Referrer-Policy: strict-origin-when-cross-origin`, which means the FULL url travels in
+ * the Referer header on same-origin navigations — so a token left in the address bar
+ * would leak to every internal link the visitor clicks, into browser history, into any
+ * screenshot they share, and into proxy access logs. Held in an HttpOnly cookie it does
+ * none of that, and script on the page cannot read it either.
+ *
+ * Every failure lands on the same token-less page with no cookie set. The visitor is
+ * never told which kind of failure it was: distinguishing "expired" from "never existed"
+ * would turn this route into an oracle.
+ */
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ token: string }> }
+) {
+  const { token } = await params;
+  // Built from the REQUEST's own origin, not the configured site URL: the visitor must
+  // land back on the host they arrived at. Deriving it from settings sends anyone whose
+  // host differs from NEXT_PUBLIC_URL (a preview deploy, a custom domain, local dev on a
+  // non-default port) to the wrong origin — and the cookie set here would not follow.
+  const redirect = NextResponse.redirect(new URL('/thread', request.url), { status: 302 });
+  redirect.headers.set('Cache-Control', 'no-store');
+
+  try {
+    const supabase = getServiceRoleSupabaseClient();
+    const verification = await verifyThreadToken(supabase, token);
+
+    if (!verification.valid) {
+      console.warn(`[thread] Rejected thread link (${verification.reason}).`);
+      return redirect;
+    }
+
+    const maxAge = secondsUntilExpiry(verification.thread.token_expires_at);
+    if (maxAge <= 0) return redirect;
+
+    await setSecureCookie(THREAD_COOKIE, token, maxAge);
+  } catch (error) {
+    console.error('[thread] Could not process a thread link:', error);
+  }
+
+  return redirect;
+}

package/templates/nextblock-template/app/thread/layout.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+/**
+ * A private conversation between one visitor and the store. Never indexed: the page is
+ * reached by a personal link, and a search engine that crawled it would both expose the
+ * exchange and burn the token by following it.
+ */
+export const metadata = {
+  title: 'Your conversation',
+  robots: { index: false, follow: false },
+};
+
+export default function ThreadLayout({ children }: { children: ReactNode }) {
+  return <div className="mx-auto w-full max-w-2xl px-4 py-10 sm:py-16">{children}</div>;
+}

package/templates/nextblock-template/app/thread/page.tsx

@@ -0,0 +1,98 @@
+import { headers } from 'next/headers';
+import { getServiceRoleSupabaseClient } from '@nextblock-cms/db/server';
+
+import { getCookieValue } from '../../lib/auth/cookies';
+import {
+  THREAD_COOKIE,
+  touchThreadToken,
+  verifyThreadToken,
+} from '../../lib/messages/thread-token';
+import ThreadView, { type ThreadMessage } from './ThreadView';
+
+// A conversation changes whenever either side writes; a cached copy would show the
+// visitor a reply that is no longer the latest, or hide one that just arrived.
+export const dynamic = 'force-dynamic';
+export const fetchCache = 'force-no-store';
+
+const MAX_MESSAGES = 200;
+
+/**
+ * The visitor's half of a private conversation.
+ *
+ * Authentication is the HttpOnly cookie set by `/thread/[token]`, verified here in
+ * application code and then read with the service role — no RLS policy in this schema
+ * authenticates an anonymous caller by token, and this page does not invent one.
+ *
+ * There is exactly one failure page. A visitor whose link expired, was revoked, or never
+ * existed sees the same words, because anything else would let someone probe for valid
+ * threads.
+ */
+export default async function ThreadPage() {
+  const supabase = getServiceRoleSupabaseClient();
+  const token = await getCookieValue(THREAD_COOKIE);
+  const check = await verifyThreadToken(supabase, token);
+
+  if (!check.valid) {
+    return <ThreadView invalid />;
+  }
+
+  const thread = check.thread;
+
+  const [{ data: rows }, botProtection, scriptNonce] = await Promise.all([
+    supabase
+      .from('thread_messages')
+      .select('id, direction, body, author_name, created_at')
+      .eq('thread_id', thread.id)
+      .order('created_at', { ascending: true })
+      .limit(MAX_MESSAGES),
+    loadBotProtection(supabase),
+    loadNonce(),
+  ]);
+
+  // The visitor is looking at it, so it is no longer unread for them.
+  if (thread.unread_for_visitor) {
+    await supabase
+      .from('message_threads')
+      .update({ unread_for_visitor: false })
+      .eq('id', thread.id);
+  }
+  await touchThreadToken(supabase, thread.id);
+
+  return (
+    <ThreadView
+      subjectLabel={thread.subject_label}
+      closed={thread.status === 'closed'}
+      messages={(rows ?? []) as ThreadMessage[]}
+      botProtectionProvider={botProtection.provider}
+      botProtectionSiteKey={botProtection.siteKey}
+      scriptNonce={scriptNonce}
+    />
+  );
+}
+
+async function loadBotProtection(supabase: {
+  from: (table: string) => any;
+}): Promise<{ provider: 'none' | 'turnstile' | 'recaptcha'; siteKey: string }> {
+  try {
+    const { data } = await supabase
+      .from('site_settings')
+      .select('value')
+      .eq('key', 'bot_protection_public')
+      .maybeSingle();
+    if (data?.value) {
+      const value = data.value as Record<string, any>;
+      return { provider: value.provider || 'none', siteKey: value.siteKey || '' };
+    }
+  } catch (error) {
+    console.error('[thread] Could not load bot protection settings:', error);
+  }
+  return { provider: 'none', siteKey: '' };
+}
+
+async function loadNonce(): Promise<string> {
+  try {
+    return (await headers()).get('x-nonce') || '';
+  } catch {
+    return '';
+  }
+}