keystone-design-bootstrap 1.0.56 → 1.0.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.56",
+  "version": "1.0.57",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",

package/src/design_system/portal/LoginForm.tsx

@@ -2,7 +2,6 @@
 
 import React, { useState, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
-import { loginAction, signupAction, initiateAuthAction } from './actions';
 import { countries } from '../../utils/countries';
 import { getNationalMask, formatDigitsToMask } from '../../utils/phone-helpers';
 
@@ -67,16 +66,22 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     setError(null);
     setLoading(true);
     try {
-      const result = await initiateAuthAction({ email: emailVal, phone: fullPhone });
+      const res = await fetch('/api/consumer/initiate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: emailVal, phone: fullPhone }),
+      });
+      const result = await res.json().catch(() => ({ exists: null }));
       if (result.exists === true) {
         setWelcomeName(result.firstName ?? null);
         setStep(result.hasPassword === false ? 'new' : 'returning');
       } else if (result.exists === false) {
         setStep('new');
       } else {
-        // exists === null — network/server error. Stay on identifier step with a message.
         setError('Something went wrong. Please check your connection and try again.');
       }
+    } catch {
+      setError('Something went wrong. Please check your connection and try again.');
     } finally {
       setLoading(false);
     }
@@ -87,17 +92,24 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     setError(null);
     setLoading(true);
     try {
-      const result = await loginAction({ email: emailVal, phone: fullPhone, password });
-      if (result.error) {
+      const res = await fetch('/api/consumer/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: emailVal, phone: fullPhone, password }),
+      });
+      const result = await res.json().catch(() => ({}));
+      if (!res.ok) {
         if (result.code === 'not_found' || result.code === 'no_password') {
           setStep('new');
           setError(null);
           return;
         }
-        setError(result.error);
+        setError(result.error || 'Login failed. Please try again.');
         return;
       }
       if (onSuccess) onSuccess(); else router.refresh();
+    } catch {
+      setError('Something went wrong. Please check your connection and try again.');
     } finally {
       setLoading(false);
     }
@@ -109,16 +121,23 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     setError(null);
     setLoading(true);
     try {
-      const result = await signupAction({
-        email: emailVal,
-        phone: fullPhone,
-        password,
-        password_confirmation: passwordConfirm,
-        first_name: firstName.trim() || undefined,
-        last_name: lastName.trim() || undefined,
+      const res = await fetch('/api/consumer/signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email: emailVal,
+          phone: fullPhone,
+          password,
+          password_confirmation: passwordConfirm,
+          first_name: firstName.trim() || undefined,
+          last_name: lastName.trim() || undefined,
+        }),
       });
-      if (result.error) { setError(result.error); return; }
+      const result = await res.json().catch(() => ({}));
+      if (!res.ok) { setError(result.error || 'Signup failed. Please try again.'); return; }
       if (onSuccess) onSuccess(); else router.refresh();
+    } catch {
+      setError('Something went wrong. Please check your connection and try again.');
     } finally {
       setLoading(false);
     }

package/src/design_system/portal/LogoutButton.tsx

@@ -1,13 +1,12 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import { logoutAction } from './actions';
 
 export function LogoutButton() {
   const router = useRouter();
 
   const handleLogout = async () => {
-    await logoutAction();
+    await fetch('/api/consumer/logout', { method: 'POST' });
     router.refresh();
   };
 

package/src/design_system/portal/MessageComposer.tsx

@@ -2,7 +2,6 @@
 
 import React, { useState, useTransition, useRef, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { sendMessageAction } from './actions';
 
 export function MessageComposer({ contactId }: { contactId: number }) {
   const [body, setBody] = useState('');
@@ -23,12 +22,21 @@ export function MessageComposer({ contactId }: { contactId: number }) {
     if (!body.trim() || isPending) return;
     setError(null);
     startTransition(async () => {
-      const result = await sendMessageAction({ contactId, body: body.trim() });
-      if (result.error) {
-        setError(result.error);
-      } else {
-        setBody('');
-        router.refresh();
+      try {
+        const res = await fetch('/api/chat', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ contact_id: contactId, body: body.trim() }),
+        });
+        const result = await res.json().catch(() => ({}));
+        if (!res.ok) {
+          setError(result.error || 'Failed to send message.');
+        } else {
+          setBody('');
+          router.refresh();
+        }
+      } catch {
+        setError('Failed to send message.');
       }
     });
   }

package/src/next/routes/consumer-auth.ts

@@ -1,19 +1,23 @@
 /**
- * Factory functions for consumer auth Next.js API route handlers.
+ * Consumer auth API route handlers for Next.js App Router.
  *
- * Usage in customer site:
- *   // app/api/consumer/login/route.ts
+ * Usage in a customer site:
+ *   // app/api/consumer/[action]/route.ts
  *   import { NextResponse } from 'next/server';
- *   import { createConsumerLoginHandler } from 'keystone-design-bootstrap/next/routes/consumer-auth';
- *   export const { POST } = createConsumerLoginHandler({ NextResponse });
+ *   import { createConsumerAuthHandlers } from 'keystone-design-bootstrap/next/routes/consumer-auth';
+ *   export const { POST } = createConsumerAuthHandlers({ NextResponse });
+ *
+ * Handles: initiate, login, signup, logout
+ *
+ * Env (server-side only):
+ * - API_URL (default: http://localhost:3000/api/v1)
+ * - API_KEY
  */
 
 import { CONSUMER_TOKEN_COOKIE } from '../../lib/consumer-session';
 
-interface NextResponseLike {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  json: (body: unknown, init?: ResponseInit) => any;
-}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type NextResponseLike = { json: (body: unknown, init?: ResponseInit) => any };
 
 const COOKIE_MAX_AGE = 60 * 60 * 24 * 30; // 30 days
 
@@ -21,93 +25,156 @@ function getApiUrl(): string {
   return process.env.API_URL || 'http://localhost:3000/api/v1';
 }
 
-function setCookieOnResponse(response: Response, token: string): void {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (response as any).cookies.set(CONSUMER_TOKEN_COOKIE, token, {
+function getApiKey(): string {
+  return process.env.API_KEY || '';
+}
+
+function apiHeaders(): Record<string, string> {
+  const key = getApiKey();
+  return {
+    'Content-Type': 'application/json',
+    ...(key ? { 'X-API-Key': key } : {}),
+  };
+}
+
+// POST /api/consumer/initiate
+// Looks up an existing user by email or phone, creating a Contact if needed.
+// Returns { exists, firstName, hasPassword }.
+async function handleInitiate(request: Request, NR: NextResponseLike): Promise<Response> {
+  const body = await request.json().catch(() => ({})) as Record<string, unknown>;
+  const { email, phone } = body;
+
+  if (!email && !phone) {
+    return NR.json({ exists: null });
+  }
+
+  try {
+    const res = await fetch(`${getApiUrl()}/consumer/auth/initiate`, {
+      method: 'POST',
+      headers: apiHeaders(),
+      body: JSON.stringify({ email: email || undefined, phone: phone || undefined }),
+    });
+
+    if (res.status === 404) return NR.json({ exists: false });
+    if (!res.ok) return NR.json({ exists: null });
+
+    const json = await res.json().catch(() => ({}));
+    const data = json.data as Record<string, unknown> | undefined;
+    return NR.json({
+      exists: true,
+      firstName: data?.first_name ?? undefined,
+      hasPassword: data?.has_password != null ? Boolean(data.has_password) : true,
+    });
+  } catch {
+    return NR.json({ exists: null });
+  }
+}
+
+// POST /api/consumer/login
+// Authenticates an existing user. Sets HttpOnly JWT cookie on success.
+// Returns {} on success or { error, code } on failure.
+async function handleLogin(request: Request, NR: NextResponseLike): Promise<Response> {
+  const body = await request.json().catch(() => ({})) as Record<string, string>;
+  const { email, phone, password } = body;
+
+  if (!email && !phone) return NR.json({ error: 'Email or phone is required.' }, { status: 422 });
+  if (!password) return NR.json({ error: 'Password is required.' }, { status: 422 });
+
+  const res = await fetch(`${getApiUrl()}/consumer/auth/login`, {
+    method: 'POST',
+    headers: apiHeaders(),
+    body: JSON.stringify({ email: email || undefined, phone: phone || undefined, password }),
+  });
+
+  const json = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    return NR.json(
+      { error: json.error || 'Login failed. Please try again.', code: json.code },
+      { status: res.status }
+    );
+  }
+
+  const token = json.data?.token;
+  if (!token) return NR.json({ error: 'No token received.' }, { status: 500 });
+
+  const response = NR.json({});
+  response.cookies.set(CONSUMER_TOKEN_COOKIE, token, {
     httpOnly: true,
     secure: process.env.NODE_ENV === 'production',
     sameSite: 'lax',
     path: '/',
     maxAge: COOKIE_MAX_AGE,
   });
+  return response;
 }
 
-export function createConsumerLoginHandler({ NextResponse }: { NextResponse: NextResponseLike }) {
-  return {
-    async POST(request: Request) {
-      const body = await request.json().catch(() => ({})) as Record<string, string>;
-      const { email, phone, password } = body;
-
-      if (!email && !phone) {
-        return NextResponse.json({ error: 'Email or phone is required' }, { status: 422 });
-      }
-      if (!password) {
-        return NextResponse.json({ error: 'Password is required' }, { status: 422 });
-      }
-
-      const apiRes = await fetch(`${getApiUrl()}/consumer/auth/login`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: email || undefined, phone: phone || undefined, password }),
-      });
-
-      const json = await apiRes.json().catch(() => ({}));
-      if (!apiRes.ok) {
-        return NextResponse.json({ error: json.error || 'Login failed' }, { status: apiRes.status });
-      }
-
-      const token = json.data?.token;
-      if (!token) {
-        return NextResponse.json({ error: 'No token received' }, { status: 500 });
-      }
-
-      const response = NextResponse.json({ success: true });
-      setCookieOnResponse(response, token);
-      return response;
-    },
-  };
+// POST /api/consumer/signup
+// Creates a new account (or claims an existing contact). Sets HttpOnly JWT cookie on success.
+// Returns {} on success or { error } on failure.
+async function handleSignup(request: Request, NR: NextResponseLike): Promise<Response> {
+  const body = await request.json().catch(() => ({})) as Record<string, string>;
+  const { email, phone, password, password_confirmation, first_name, last_name } = body;
+
+  if (!email && !phone) return NR.json({ error: 'Email or phone is required.' }, { status: 422 });
+
+  const res = await fetch(`${getApiUrl()}/consumer/auth/signup`, {
+    method: 'POST',
+    headers: apiHeaders(),
+    body: JSON.stringify({
+      email: email || undefined,
+      phone: phone || undefined,
+      password,
+      password_confirmation,
+      first_name: first_name || undefined,
+      last_name: last_name || undefined,
+    }),
+  });
+
+  const json = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    return NR.json({ error: json.error || 'Signup failed. Please try again.' }, { status: res.status });
+  }
+
+  const token = json.data?.token;
+  if (!token) return NR.json({ error: 'No token received.' }, { status: 500 });
+
+  const response = NR.json({ claimed: json.data?.claimed ?? false });
+  response.cookies.set(CONSUMER_TOKEN_COOKIE, token, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    path: '/',
+    maxAge: COOKIE_MAX_AGE,
+  });
+  return response;
 }
 
-export function createConsumerSignupHandler({ NextResponse }: { NextResponse: NextResponseLike }) {
-  return {
-    async POST(request: Request) {
-      const body = await request.json().catch(() => ({})) as Record<string, string>;
-      const { email, phone, password, password_confirmation } = body;
-
-      if (!email && !phone) {
-        return NextResponse.json({ error: 'Email or phone is required' }, { status: 422 });
-      }
-
-      const apiRes = await fetch(`${getApiUrl()}/consumer/auth/signup`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: email || undefined, phone: phone || undefined, password, password_confirmation }),
-      });
-
-      const json = await apiRes.json().catch(() => ({}));
-      if (!apiRes.ok) {
-        return NextResponse.json({ error: json.error || 'Signup failed' }, { status: apiRes.status });
-      }
-
-      const token = json.data?.token;
-      if (!token) {
-        return NextResponse.json({ error: 'No token received' }, { status: 500 });
-      }
-
-      const response = NextResponse.json({ success: true, claimed: json.data?.claimed ?? false });
-      setCookieOnResponse(response, token);
-      return response;
-    },
-  };
+// POST /api/consumer/logout
+// Clears the JWT cookie.
+async function handleLogout(_request: Request, NR: NextResponseLike): Promise<Response> {
+  const response = NR.json({ success: true });
+  response.cookies.delete(CONSUMER_TOKEN_COOKIE);
+  return response;
 }
 
-export function createConsumerLogoutHandler({ NextResponse }: { NextResponse: NextResponseLike }) {
+/**
+ * Creates a single POST handler that routes to the correct auth action based on
+ * the dynamic `[action]` path segment.
+ *
+ * Compatible with Next.js 14 (sync params) and 15 (async params).
+ */
+export function createConsumerAuthHandlers({ NextResponse }: { NextResponse: NextResponseLike }) {
   return {
-    async POST() {
-      const response = NextResponse.json({ success: true });
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (response as any).cookies.delete(CONSUMER_TOKEN_COOKIE);
-      return response;
+    POST: async (
+      request: Request,
+      context: { params: Promise<{ action: string }> | { action: string } }
+    ): Promise<Response> => {
+      const { action } = await Promise.resolve(context.params);
+      if (action === 'initiate') return handleInitiate(request, NextResponse);
+      if (action === 'login') return handleLogin(request, NextResponse);
+      if (action === 'signup') return handleSignup(request, NextResponse);
+      if (action === 'logout') return handleLogout(request, NextResponse);
+      return NextResponse.json({ error: 'Not found' }, { status: 404 });
     },
   };
 }

package/src/design_system/portal/actions.ts

@@ -1,160 +0,0 @@
-'use server';
-
-import { cookies } from 'next/headers';
-import { CONSUMER_TOKEN_COOKIE } from '../../lib/consumer-session';
-
-const COOKIE_MAX_AGE = 60 * 60 * 24 * 30; // 30 days
-
-function getApiUrl(): string {
-  return process.env.API_URL || 'http://localhost:3000/api/v1';
-}
-
-function getApiKey(): string {
-  return process.env.API_KEY || '';
-}
-
-async function setConsumerCookie(token: string): Promise<void> {
-  const cookieStore = await cookies();
-  cookieStore.set(CONSUMER_TOKEN_COOKIE, token, {
-    httpOnly: true,
-    secure: process.env.NODE_ENV === 'production',
-    sameSite: 'lax',
-    path: '/',
-    maxAge: COOKIE_MAX_AGE,
-  });
-}
-
-export async function loginAction(payload: {
-  email: string | null;
-  phone: string | null;
-  password: string;
-}): Promise<{ error?: string; code?: string }> {
-  const { email, phone, password } = payload;
-
-  if (!email && !phone) return { error: 'Email or phone is required.' };
-  if (!password) return { error: 'Password is required.' };
-
-  const apiKey = getApiKey();
-  const res = await fetch(`${getApiUrl()}/consumer/auth/login`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      ...(apiKey ? { 'X-API-Key': apiKey } : {}),
-    },
-    body: JSON.stringify({ email: email || undefined, phone: phone || undefined, password }),
-  });
-
-  const rawBody = await res.text();
-  let json: Record<string, unknown> = {};
-  try { json = JSON.parse(rawBody); } catch { /* ignore */ }
-  if (!res.ok) return { error: (json as { error?: string }).error || 'Login failed. Please try again.', code: (json as { code?: string }).code };
-
-  const token = (json.data as Record<string, unknown> | undefined)?.token as string | undefined;
-  if (!token) return { error: 'No token received from server.' };
-
-  await setConsumerCookie(token);
-  return {};
-}
-
-export async function initiateAuthAction(payload: {
-  email: string | null;
-  phone: string | null;
-}): Promise<{ exists: boolean | null; firstName?: string; hasPassword?: boolean }> {
-  const { email, phone } = payload;
-  if (!email && !phone) return { exists: null };
-  try {
-    const apiKey = getApiKey();
-    const res = await fetch(`${getApiUrl()}/consumer/auth/initiate`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        ...(apiKey ? { 'X-API-Key': apiKey } : {}),
-      },
-      body: JSON.stringify({ email: email || undefined, phone: phone || undefined }),
-    });
-    const rawBody = await res.text();
-    if (res.status === 404) return { exists: false };
-    if (!res.ok) return { exists: null };
-    let json: Record<string, unknown> = {};
-    try { json = JSON.parse(rawBody); } catch { /* ignore */ }
-    const data = json.data as Record<string, unknown> | undefined;
-    return { exists: true, firstName: data?.first_name as string | undefined, hasPassword: data?.has_password != null ? Boolean(data.has_password) : true };
-  } catch {
-    return { exists: null };
-  }
-}
-
-export async function signupAction(payload: {
-  email: string | null;
-  phone: string | null;
-  password: string;
-  password_confirmation: string;
-  first_name?: string;
-  last_name?: string;
-}): Promise<{ error?: string; claimed?: boolean }> {
-  const { email, phone, password, password_confirmation, first_name, last_name } = payload;
-
-  if (!email && !phone) return { error: 'Email or phone is required.' };
-
-  const apiKey = getApiKey();
-  const res = await fetch(`${getApiUrl()}/consumer/auth/signup`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      ...(apiKey ? { 'X-API-Key': apiKey } : {}),
-    },
-    body: JSON.stringify({
-      email: email || undefined,
-      phone: phone || undefined,
-      password,
-      password_confirmation,
-      first_name: first_name || undefined,
-      last_name: last_name || undefined,
-    }),
-  });
-
-  const rawBody = await res.text();
-  let json: Record<string, unknown> = {};
-  try { json = JSON.parse(rawBody); } catch { /* ignore */ }
-  if (!res.ok) return { error: (json as { error?: string }).error || 'Signup failed. Please try again.' };
-
-  const token = (json.data as Record<string, unknown> | undefined)?.token as string | undefined;
-  if (!token) return { error: 'No token received from server.' };
-
-  await setConsumerCookie(token);
-  return { claimed: (json.data as Record<string, unknown> | undefined)?.claimed as boolean ?? false };
-}
-
-export async function sendMessageAction(payload: {
-  contactId: number;
-  body: string;
-}): Promise<{ error?: string }> {
-  const { contactId, body } = payload;
-  if (!body.trim()) return { error: 'Message cannot be empty.' };
-
-  const apiKey = getApiKey();
-  if (!apiKey) return { error: 'Service not configured.' };
-
-  try {
-    const res = await fetch(`${getApiUrl()}/public/messages`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'X-API-Key': apiKey,
-      },
-      body: JSON.stringify({ contact_id: contactId, body }),
-    });
-    if (!res.ok) {
-      const json = await res.json().catch(() => ({}));
-      return { error: json.error || 'Failed to send message.' };
-    }
-    return {};
-  } catch {
-    return { error: 'Failed to send message.' };
-  }
-}
-
-export async function logoutAction(): Promise<void> {
-  const cookieStore = await cookies();
-  cookieStore.delete(CONSUMER_TOKEN_COOKIE);
-}