keystone-design-bootstrap 1.0.55 → 1.0.56

package/src/lib/hooks/use-image-cycle.ts

@@ -0,0 +1,105 @@
+'use client';
+
+import { useState, useEffect, useMemo } from 'react';
+import type { PhotoAttachment } from '../../types/api/photos';
+
+const CYCLE_INTERVAL_MIN_MS = 6000;
+const CYCLE_INTERVAL_MAX_MS = 8000;
+export const CROSSFADE_DURATION_MS = 600;
+
+export interface CycledImage {
+  url: string;
+  alt: string;
+}
+
+export interface UseImageCycleResult {
+  list: CycledImage[];
+  currentIndex: number;
+  nextIndex: number;
+  transitioning: boolean;
+}
+
+/** Stable value in [0, 1) derived from seed string (FNV-1a hash). Same seed always produces same value. */
+function seedToUnit(seed: string): number {
+  let h = 2166136261 >>> 0;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = (Math.imul(h, 16777619) >>> 0) >>> 0;
+  }
+  return (h >>> 0) / 4294967296;
+}
+
+/** Seeded Fisher-Yates shuffle. Same seed produces same order (SSR-safe). */
+function shuffleWithSeed<T>(array: T[], seed: string): T[] {
+  if (array.length <= 1) return array;
+  const arr = [...array];
+  let h = 2166136261 >>> 0;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = (Math.imul(h, 16777619) >>> 0) >>> 0;
+  }
+  const next = (step: number) => {
+    h = (Math.imul(1664525, (h + step) >>> 0) + 1013904223) >>> 0;
+    return (h >>> 0) / 4294967296;
+  };
+  for (let i = arr.length - 1; i > 0; i--) {
+    const j = Math.floor(next(i) * (i + 1));
+    [arr[i], arr[j]] = [arr[j], arr[i]];
+  }
+  return arr;
+}
+
+function photoUrlFromAttachment(pa: PhotoAttachment): string | undefined {
+  return pa.photo?.large_url || pa.photo?.medium_url || pa.photo?.thumbnail_url;
+}
+
+function photoAltFromAttachment(pa: PhotoAttachment): string {
+  return pa.photo?.alt_text || pa.photo?.title || '';
+}
+
+/**
+ * Cycles through a list of photo attachments with a seeded shuffle and crossfade transitions.
+ *
+ * Each card uses a unique seed so intervals are staggered — cards don't all transition in sync.
+ * The shuffle is deterministic (SSR-safe) and the timer only activates when there are 2+ images.
+ */
+export function useImageCycle(
+  photoAttachments: PhotoAttachment[] | undefined,
+  seed: string
+): UseImageCycleResult {
+  const list = useMemo<CycledImage[]>(() => {
+    const arr = Array.isArray(photoAttachments) && photoAttachments.length > 0 ? photoAttachments : [];
+    if (arr.length === 0) return [];
+    return shuffleWithSeed(arr, seed)
+      .map((pa) => ({ url: photoUrlFromAttachment(pa) ?? '', alt: photoAltFromAttachment(pa) }))
+      .filter((x) => x.url);
+  }, [photoAttachments, seed]);
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [transitioning, setTransitioning] = useState(false);
+
+  // Per-card random interval (6–8 s) so cards don't all transition in sync
+  const intervalMs = useMemo(
+    () => CYCLE_INTERVAL_MIN_MS + Math.floor(seedToUnit(seed) * (CYCLE_INTERVAL_MAX_MS - CYCLE_INTERVAL_MIN_MS + 1)),
+    [seed]
+  );
+
+  useEffect(() => {
+    if (list.length <= 1) return;
+    const id = setInterval(() => setTransitioning(true), intervalMs);
+    return () => clearInterval(id);
+  }, [list.length, intervalMs]);
+
+  useEffect(() => {
+    if (!transitioning || list.length <= 1) return;
+    const t = setTimeout(() => {
+      setCurrentIndex((i) => (i + 1) % list.length);
+      setTransitioning(false);
+    }, CROSSFADE_DURATION_MS);
+    return () => clearTimeout(t);
+  }, [transitioning, list.length]);
+
+  const nextIndex = list.length > 1 ? (currentIndex + 1) % list.length : 0;
+
+  return { list, currentIndex, nextIndex, transitioning };
+}

package/src/lib/server-api.ts

@@ -5,6 +5,7 @@
 
 import type { CompanyInformation } from '../types/api/company-information';
 import type { Service } from '../types/api/service';
+import type { Package } from '../types/api/package';
 import type { WebsitePhotos } from '../types/api/website-photos';
 
 const API_URL = process.env.API_URL || 'http://localhost:3000/api/v1';
@@ -77,8 +78,8 @@ export function getMetaPixelId(adsConfig: { meta_pixel_id?: string } | null | un
   return str !== '' && str !== 'null' && /^\d+$/.test(str) ? str : null;
 }
 
-export async function getServices() {
-  return serverFetch('/public/services', defaultOptions);
+export async function getServices(): Promise<Service[] | null> {
+  return serverFetch<Service[]>('/public/services', defaultOptions);
 }
 
 export async function getService(slug: string): Promise<Service | null> {
@@ -130,12 +131,12 @@ export async function getSocialPosts() {
 }
 
 /** Packages (bundles of service items). */
-export async function getPackages() {
-  return serverFetch('/public/packages', defaultOptions);
+export async function getPackages(): Promise<Package[] | null> {
+  return serverFetch<Package[]>('/public/packages', defaultOptions);
 }
 
-export async function getPackage(slug: string) {
-  return serverFetch(`/public/packages/by_slug/${encodeURIComponent(slug)}`, defaultOptions);
+export async function getPackage(slug: string): Promise<Package | null> {
+  return serverFetch<Package>(`/public/packages/by_slug/${encodeURIComponent(slug)}`, defaultOptions);
 }
 
 // Alias for testimonials (API uses "reviews")

package/src/next/routes/chat.ts

@@ -5,6 +5,10 @@
  *   // app/api/chat/route.ts
  *   export { GET, POST } from 'keystone-design-bootstrap/next/routes/chat';
  *
+ * Supports both anonymous (session-based) and authenticated (contact-driven) flows.
+ * Both flows hit the same backend endpoint (`/public/messages`); the discriminator
+ * is whether `identifier` (session string) or `contact_id` (integer) is supplied.
+ *
  * Env (server-side only):
  * - API_URL (default: http://localhost:3000/api/v1)
  * - API_KEY
@@ -26,105 +30,73 @@ export function createChatRouteHandlers(deps?: { NextResponse?: { json: JsonResp
   const json: JsonResponder = deps?.NextResponse?.json ?? ((body, init) => Response.json(body, init));
 
   return {
+    // POST /api/chat — send a message (session-based or contact-driven)
     POST: async (request: Request): Promise<Response> => {
       try {
         const body = await request.json();
-        const { identifier, body: messageBody, display_name, page_url } = body;
+        const { identifier, contact_id, body: messageBody, display_name, page_url } = body;
 
-        if (!identifier || !messageBody) {
+        if (!messageBody) {
+          return json({ success: false, error: 'Message body is required.' }, { status: 400 });
+        }
+        if (!identifier && !contact_id) {
           return json(
-            { success: false, error: 'Identifier and message body are required.' },
+            { success: false, error: 'identifier or contact_id is required.' },
             { status: 400 }
           );
         }
 
         const response = await fetch(`${API_URL}/public/messages`, {
           method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'X-API-Key': API_KEY,
-          },
-          body: JSON.stringify({
-            identifier,
-            body: messageBody,
-            display_name,
-            page_url,
-          }),
+          headers: { 'Content-Type': 'application/json', 'X-API-Key': API_KEY },
+          body: JSON.stringify({ identifier, contact_id, body: messageBody, display_name, page_url }),
         });
 
         const data = await response.json();
-
         if (!response.ok) {
           return json(
-            {
-              success: false,
-              error: data.error || 'Failed to send message. Please try again.',
-            },
+            { success: false, error: data.error || 'Failed to send message. Please try again.' },
             { status: response.status }
           );
         }
-
-        return json({
-          success: true,
-          data: data.data,
-        });
+        return json({ success: true, data: data.data });
       } catch (error) {
         console.error('Chat message error:', error);
-        return json(
-          {
-            success: false,
-            error: 'Network error. Please try again later.',
-          },
-          { status: 500 }
-        );
+        return json({ success: false, error: 'Network error. Please try again later.' }, { status: 500 });
       }
     },
 
+    // GET /api/chat?identifier=... or ?contact_id=... — load message history
     GET: async (request: Request): Promise<Response> => {
       try {
         const { searchParams } = new URL(request.url);
         const identifier = searchParams.get('identifier');
+        const contactId = searchParams.get('contact_id');
 
-        if (!identifier) {
-          return json({ success: false, error: 'Identifier is required.' }, { status: 400 });
+        if (!identifier && !contactId) {
+          return json({ success: false, error: 'identifier or contact_id is required.' }, { status: 400 });
         }
 
-        const response = await fetch(
-          `${API_URL}/public/messages?identifier=${encodeURIComponent(identifier)}`,
-          {
-            headers: {
-              'X-API-Key': API_KEY,
-            },
-          }
-        );
+        const query = contactId
+          ? `contact_id=${encodeURIComponent(contactId)}`
+          : `identifier=${encodeURIComponent(identifier!)}`;
 
-        const data = await response.json();
+        const response = await fetch(`${API_URL}/public/messages?${query}`, {
+          headers: { 'X-API-Key': API_KEY },
+        });
 
+        const data = await response.json();
         if (!response.ok) {
           return json(
-            {
-              success: false,
-              error: data.error || 'Failed to load messages.',
-            },
+            { success: false, error: data.error || 'Failed to load messages.' },
             { status: response.status }
           );
         }
-
-        return json({
-          success: true,
-          data: data.data || [],
-        });
+        return json({ success: true, data: data.data || [] });
       } catch (error) {
         console.error('Chat history error:', error);
-        return json(
-          {
-            success: false,
-            error: 'Network error. Please try again later.',
-          },
-          { status: 500 }
-        );
+        return json({ success: false, error: 'Network error. Please try again later.' }, { status: 500 });
       }
     },
   };
 }
-

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

@@ -0,0 +1,113 @@
+/**
+ * Factory functions for consumer auth Next.js API route handlers.
+ *
+ * Usage in customer site:
+ *   // app/api/consumer/login/route.ts
+ *   import { NextResponse } from 'next/server';
+ *   import { createConsumerLoginHandler } from 'keystone-design-bootstrap/next/routes/consumer-auth';
+ *   export const { POST } = createConsumerLoginHandler({ NextResponse });
+ */
+
+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;
+}
+
+const COOKIE_MAX_AGE = 60 * 60 * 24 * 30; // 30 days
+
+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, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    path: '/',
+    maxAge: COOKIE_MAX_AGE,
+  });
+}
+
+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;
+    },
+  };
+}
+
+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;
+    },
+  };
+}
+
+export function createConsumerLogoutHandler({ 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;
+    },
+  };
+}

package/src/types/api/consumer.ts

@@ -0,0 +1,39 @@
+/** Consumer and messaging types (aligned with Rails ConsumerSerializer and conversation endpoints). */
+
+export interface Consumer {
+  id: number;
+  email: string | null;
+  phone: string | null;
+  primary_identifier: string | null;
+  contacts?: ConsumerContact[];
+}
+
+export interface ConsumerContact {
+  id: number;
+  display_name: string;
+  account?: { id: number; name: string; slug?: string };
+}
+
+export interface ConversationSummary {
+  contact_id: number;
+  business?: { id: number; name: string; company_name?: string };
+  last_message_at: string | null;
+  last_message_preview?: string | null;
+  message_count: number;
+}
+
+export interface Message {
+  id: number;
+  body: string | null;
+  /** "outbound" = sent by the business; "inbound" = sent by the contact/member. */
+  direction: 'inbound' | 'outbound';
+  sender_type: 'contact' | 'agent' | 'human';
+  sender_display_name?: string;
+  created_at: string;
+}
+
+export interface ContactSummary {
+  id: number;
+  display_name: string;
+  business?: { id: number; name: string; company_name?: string };
+}

package/src/types/api/offer.ts

@@ -6,7 +6,7 @@ export interface OfferPublic {
   name: string;
   description: string | null;
   value_terms: string | null;
-  active: boolean;
+  active?: boolean;
   expires_at?: string | null;
   expired?: boolean;
   photo_attachments?: PhotoAttachment[];

package/src/types/api/package.ts

@@ -0,0 +1,20 @@
+import type { PhotoAttachment } from './photos';
+import type { OfferPublic } from './offer';
+
+export interface PackageItem {
+  quantity: number;
+  service_item?: { id: number; name: string; slug: string; summary?: string | null };
+}
+
+export interface Package {
+  id: number;
+  name: string;
+  slug: string;
+  summary?: string | null;
+  description_markdown?: string | null;
+  pricing_info?: string | null;
+  price_cents?: number | null;
+  photo_attachments?: PhotoAttachment[];
+  package_items?: PackageItem[];
+  offers?: OfferPublic[];
+}

package/src/types/api/service.ts

@@ -1,4 +1,6 @@
-// Service type definitions (aligned with Rails ServiceSerializer)
+import type { PhotoAttachment } from './photos';
+import type { OfferPublic } from './offer';
+
 export interface Service {
   id: number;
   name: string;
@@ -9,27 +11,12 @@ export interface Service {
   features_markdown?: string;
   featured: boolean;
   sort_order: number;
-  photo_attachments?: Array<{
-    id: number;
-    featured: boolean;
-    attachable_id?: number;
-    attachable_type?: string;
-    photo?: {
-      id: number;
-      title: string;
-      thumbnail_url?: string;
-      medium_url?: string;
-      large_url?: string;
-      original_url?: string;
-    };
-  }>;
-  /** Menu items under this service category (when loaded with associations). */
+  photo_attachments?: PhotoAttachment[];
   service_items?: ServiceItem[];
   created_at: string;
   updated_at: string;
 }
 
-/** Single menu item under a service category. */
 export interface ServiceItem {
   id: number;
   name: string;
@@ -41,13 +28,8 @@ export interface ServiceItem {
   duration_minutes?: number | null;
   sort_order: number;
   service_id?: number;
-  /** Present when loaded for public/menu (from related service’s photos). */
-  photo_attachments?: Array<{
-    id: number;
-    photo?: { thumbnail_url?: string; medium_url?: string; large_url?: string; original_url?: string; title?: string; alt_text?: string };
-  }>;
-  /** Active offers that apply to this menu item (public API). */
-  offers?: import('./offer').OfferPublic[];
+  photo_attachments?: PhotoAttachment[];
+  offers?: OfferPublic[];
 }
 
 export interface ServiceParams {

package/src/types/index.ts

@@ -9,12 +9,14 @@ export * from './config';
 // Re-export API types
 export * from './api/blog-post';
 export * from './api/company-information';
+export * from './api/consumer';
 export * from './api/contact';
 export * from './api/form';
 export * from './api/faq';
 export * from './api/job-posting';
 export * from './api/location';
 export * from './api/offer';
+export * from './api/package';
 export * from './api/photos';
 export * from './api/service';
 export * from './api/social-post';

package/src/utils/phone-helpers.ts

@@ -0,0 +1,27 @@
+import type countries from './countries';
+
+type Country = (typeof countries)[0];
+
+/** Get national-format mask from country by stripping the country code prefix (e.g. "+1 (###) ###-####" → "(###) ###-####"). */
+export function getNationalMask(country: Country | undefined): string {
+  if (!country?.phoneMask) return '';
+  const code = country.phoneCode.startsWith('+') ? country.phoneCode : `+${country.phoneCode}`;
+  const escaped = code.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return country.phoneMask.replace(new RegExp(`^\\s*${escaped}[\\s-]*`), '').trim();
+}
+
+/** Format a raw digit string into a mask pattern where '#' represents one digit. No trailing literals so backspace works naturally. */
+export function formatDigitsToMask(digits: string, mask: string): string {
+  if (digits.length === 0) return '';
+  let i = 0;
+  let out = '';
+  for (const c of mask) {
+    if (c === '#') {
+      if (i < digits.length) out += digits[i++];
+      else break;
+    } else if (i < digits.length) {
+      out += c;
+    }
+  }
+  return out;
+}

package/dist/blog-post-DGjaJ3wf.d.ts

@@ -1,50 +0,0 @@
-import { P as PhotoAttachment } from './website-photos-Bm-CBK9g.js';
-
-interface BlogPost {
-    id: number;
-    title: string;
-    slug: string;
-    status: string;
-    published_at?: string;
-    excerpt_markdown?: string;
-    content_markdown: string;
-    featured: boolean;
-    seo_title?: string;
-    seo_description?: string;
-    seo_keywords?: string;
-    created_at: string;
-    updated_at: string;
-    photo_attachments?: PhotoAttachment[];
-    blog_post_authors?: BlogPostAuthor[];
-    blog_post_tags?: BlogPostTag[];
-}
-interface BlogPostParams {
-    status?: string;
-    author_id?: number;
-    tag_id?: number;
-    q?: string;
-    page?: number;
-    per_page?: number;
-    featured?: boolean;
-}
-type BlogPostResponse = BlogPost[];
-interface BlogPostAuthor {
-    id: number;
-    name: string;
-    slug: string;
-    bio_markdown?: string;
-    active: boolean;
-    created_at: string;
-    updated_at: string;
-    photo_attachments?: PhotoAttachment[];
-}
-interface BlogPostTag {
-    id: number;
-    name: string;
-    slug: string;
-    description?: string;
-    created_at: string;
-    updated_at: string;
-}
-
-export type { BlogPost as B, BlogPostAuthor as a, BlogPostParams as b, BlogPostResponse as c, BlogPostTag as d };

package/dist/contexts/index.d.ts

@@ -1,13 +0,0 @@
-import * as React$1 from 'react';
-import { Theme } from '../themes/index.js';
-
-interface ThemeContextValue {
-    theme: Theme;
-}
-declare function ThemeProvider({ theme, children }: {
-    theme: Theme;
-    children: React.ReactNode;
-}): React$1.JSX.Element;
-declare function useTheme(): ThemeContextValue;
-
-export { ThemeProvider, useTheme };