astro-tractstack 2.0.0-rc.0

package/templates/src/utils/actions/actionButton.ts

@@ -0,0 +1,101 @@
+import { preParseClicked } from './preParse_Clicked';
+import type { BrandConfig } from '@/types/tractstack';
+
+interface ActionButtonParams {
+  callbackPayload: any;
+  targetUrl: string;
+  paneId: string;
+  config: BrandConfig;
+}
+
+// Import the sendAnalyticsEvent function to send events to backend
+async function sendAnalyticsEvent(event: {
+  contentId: string;
+  contentType: 'Pane' | 'StoryFragment';
+  eventVerb: string;
+  duration?: number;
+}): Promise<void> {
+  try {
+    const config = window.TRACTSTACK_CONFIG;
+    if (!config || !config.sessionId) return;
+
+    const sessionId = config.sessionId;
+    const formData: { [key: string]: string } = {
+      beliefId: event.contentId,
+      beliefType: event.contentType,
+      beliefValue: event.eventVerb,
+      paneId: '',
+    };
+
+    if (event.duration !== undefined) {
+      formData.duration = event.duration.toString();
+    }
+
+    await fetch(`${config.backendUrl}/api/v1/state`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'X-Tenant-ID': config.tenantId,
+        'X-TractStack-Session-ID': sessionId,
+        'X-StoryFragment-ID': config.storyfragmentId,
+      },
+      body: new URLSearchParams(formData),
+    });
+  } catch (error) {
+    console.error('⛔ API ERROR: Analytics event failed', error, event);
+  }
+}
+
+export function handleActionButtonClick({
+  callbackPayload,
+  targetUrl,
+  paneId,
+  config,
+}: ActionButtonParams): void {
+  const event = preParseClicked(paneId, callbackPayload, config);
+
+  if (event) {
+    console.log(event);
+    sendAnalyticsEvent({
+      contentId: event.targetId || event.targetSlug || event.id,
+      contentType: 'Pane',
+      eventVerb: event.verb,
+    });
+  }
+
+  // Handle URL navigation and scroll
+  if (targetUrl.startsWith('#') || targetUrl.includes('#')) {
+    const id = targetUrl.split('#')[1];
+    const element = document.getElementById(id);
+
+    if (element) {
+      // Calculate the target position
+      const elementRect = element.getBoundingClientRect();
+      const targetPosition = elementRect.top + window.scrollY;
+
+      // Perform smooth scroll
+      window.scrollTo({
+        top: targetPosition,
+        behavior: 'smooth',
+      });
+
+      // After scrolling, ensure the page layout is preserved
+      const checkScrollEnd = setInterval(() => {
+        if (
+          window.scrollY === targetPosition ||
+          Math.abs(window.scrollY - targetPosition) < 2
+        ) {
+          clearInterval(checkScrollEnd);
+          document.body.style.minHeight = `${Math.max(
+            document.body.scrollHeight,
+            document.documentElement.scrollHeight
+          )}px`;
+        }
+      }, 100);
+    } else {
+      window.location.href = targetUrl;
+    }
+  } else {
+    window.location.href = targetUrl;
+  }
+}

package/templates/src/utils/actions/lispLexer.ts

@@ -0,0 +1,57 @@
+const DOUBLEQUOTE = [`"`];
+const BRACKETLEFT = `(`;
+const BRACKETRIGHT = `)`;
+const SEMICOLON = `;`;
+const NEWLINE = `\n`;
+const WHITESPACE = [` `, `\n`, `\t`];
+
+type LispToken = string | number | LispToken[];
+
+export function lispLexer(
+  payload: string = ``,
+  inString: boolean = false
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+): [LispToken[], string] {
+  const tokens: LispToken[] = [];
+  let curToken = ``;
+
+  for (let i = 0; i < payload.length; i++) {
+    const char = payload.charAt(i);
+    if (DOUBLEQUOTE.includes(char) && inString === false) {
+      const [tokenized, remaining] = lispLexer(payload.substring(i + 1), true);
+      tokens.push(tokenized);
+      payload = remaining;
+      i = -1;
+    } else if (DOUBLEQUOTE.includes(char)) {
+      if (curToken.length) {
+        tokens.push(+curToken || curToken);
+      }
+      return [tokens, payload.substring(i + 1)];
+    } else if (char === BRACKETLEFT) {
+      // if (inString && payload?.charAt(i - 1) === ESCAPED) throw "PARSING ERROR"
+      const [tokenized, remaining] = lispLexer(payload.substring(i + 1));
+      tokens.push(tokenized);
+      payload = remaining;
+      i = -1;
+    } else if (char === BRACKETRIGHT) {
+      // if (inString && payload?.charAt(i - 1) === ESCAPED) throw "PARSING ERROR"
+      if (curToken.length) {
+        tokens.push(+curToken || curToken);
+      }
+      return [tokens, payload.substring(i + 1)];
+    } else if (char === SEMICOLON) {
+      // skip comments
+      while (payload.charAt(i) !== NEWLINE) {
+        i++;
+      }
+    } else if (WHITESPACE.includes(char) && inString !== true) {
+      if (curToken.length) {
+        tokens.push(+curToken || curToken);
+      }
+      curToken = ``;
+    } else {
+      curToken += char;
+    }
+  }
+  return [tokens, ``];
+}

package/templates/src/utils/actions/preParse_Action.ts

@@ -0,0 +1,85 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { BrandConfig } from '@/types/tractstack';
+
+export const preParseAction = (
+  payload: any,
+  slug: string,
+  isContext: boolean,
+  config: BrandConfig
+) => {
+  const thisPayload = (payload && payload[0]) || false;
+  const command = (thisPayload && thisPayload[0] && thisPayload[0][0]) || null;
+  const parameters =
+    (thisPayload && thisPayload[0] && thisPayload[0][1]) || null;
+  const parameterOne = (parameters && parameters[0]) || null;
+  const parameterTwo = (parameters && parameters[1]) || null;
+  const parameterThree = (parameters && parameters[2]) || null;
+  //const parameterFour = (parameters && parameters[3]) || null;
+
+  switch (command) {
+    case `goto`:
+      switch (parameterOne) {
+        case `storykeep`:
+          if (parameterTwo) {
+            switch (parameterTwo) {
+              case `dashboard`:
+                return `/storykeep`;
+              case `settings`:
+                return `/storykeep/settings`;
+              case `login`:
+                return `/storykeep/login?force=true`;
+              case `logout`:
+                return `/storykeep/logout`;
+              default:
+                console.log(`LispActionPayload preParse misfire`, payload);
+            }
+          }
+          if (!isContext) return `/${slug}/edit`;
+          return `/context/${slug}/edit`;
+        case `home`:
+          return `/`;
+        case `concierge`:
+          return `/concierge/${parameterTwo}`;
+        case `context`:
+          return `/context/${parameterTwo}`;
+        //case `product`:
+        //  return `/products/${parameterTwo}`;
+        case `storyFragment`:
+          if (parameterTwo !== config.HOME_SLUG) return `/${parameterTwo}`;
+          return `/`;
+        case `storyFragmentPane`:
+          if (parameterTwo && parameterThree) {
+            if (parameterTwo !== config.HOME_SLUG)
+              return `/${parameterTwo}#${parameterThree}`;
+            return `/#${parameterThree}`;
+          }
+          console.log(
+            `LispActionPayload preParse misfire on goto storyFragmentPane`,
+            parameterTwo,
+            parameterThree
+          );
+          break;
+        case `bunny`:
+          if (parameterTwo && parameterThree)
+            return `/${parameterTwo}?t=${parameterThree}s`;
+          return null;
+        case `url`:
+          return parameterTwo;
+        case `sandbox`:
+          if (parameterTwo) {
+            switch (parameterTwo) {
+              case `claim`:
+                return `/sandbox/claim`;
+            }
+          }
+          return ``;
+        default:
+          console.log(`LispActionPayload preParse misfire on goto`, payload);
+      }
+      break;
+    default:
+      console.log(`LispActionPayload preParse misfire`, payload);
+      break;
+  }
+  return ``;
+};

package/templates/src/utils/actions/preParse_Bunny.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const preParseBunny = (
+  payload: any
+): {
+  t: string;
+  videoId: string | null;
+  slug?: string;
+  isContext?: boolean;
+} | null => {
+  const thisPayload = (payload && payload[0]) || false;
+
+  // Early exit if no valid payload
+  if (!thisPayload) return null;
+
+  const command = (thisPayload && thisPayload[0] && thisPayload[0][0]) || null;
+  const parameters =
+    (thisPayload && thisPayload[0] && thisPayload[0][1]) || null;
+
+  // Handle legacy format: (goto (bunny crusade-2024-june-24 1623 252933/65c99d97-8aec-4084-b47a-3dc4c5dd3e09))
+  if (command === `goto` && parameters) {
+    const parameterOne = parameters[0] || null;
+    const parameterTwo = parameters[1] || null;
+    const parameterThree = parameters[2] || null;
+    const parameterFour = parameters[3] || null; // video ID parameter
+
+    if ([`bunny`, `bunnyContext`].includes(parameterOne)) {
+      return {
+        slug: parameterTwo as string,
+        t: parameterThree as string,
+        videoId: parameterFour as string | null,
+        isContext: parameterOne === `bunnyContext`,
+      };
+    }
+  }
+
+  // Handle new format: (bunnyMoment (252933/65c99d97-8aec-4084-b47a-3dc4c5dd3e09 1623))
+  if (command === 'bunnyMoment' && parameters) {
+    if (Array.isArray(parameters)) {
+      const videoId = parameters[0];
+      const timestamp = parameters[1];
+
+      return {
+        videoId: videoId || null,
+        t: timestamp ? timestamp.toString() : '0',
+      };
+    }
+  }
+
+  return null;
+};

package/templates/src/utils/actions/preParse_Clicked.ts

@@ -0,0 +1,87 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { BrandConfig } from '@/types/tractstack';
+
+export const preParseClicked = (
+  id: string,
+  payload: any,
+  config: BrandConfig
+) => {
+  const thisPayload = (payload && payload[0]) || false;
+
+  if (!thisPayload || !config?.HOME_SLUG) {
+    return null;
+  }
+
+  const command = (thisPayload && thisPayload[0] && thisPayload[0][0]) || null;
+  const parameters =
+    (thisPayload && thisPayload[0] && thisPayload[0][1]) || null;
+
+  if (command === 'bunnyMoment' && parameters) {
+    const videoId = parameters[0];
+    return {
+      id: id,
+      type: `StartVideoMoment`,
+      verb: `WATCHED`,
+      targetId: videoId || null,
+    };
+  }
+
+  if (command === `goto` && parameters) {
+    const parameterOne = parameters[0] || null;
+    const parameterTwo = parameters[1] || null;
+    //const parameterThree = parameters[2] || null;
+
+    switch (parameterOne) {
+      case `home`:
+        return {
+          id: id,
+          type: `PaneClicked`,
+          verb: `CLICKED`,
+          targetSlug: config?.HOME_SLUG,
+        };
+
+      case `storyFragment`:
+      case `storyFragmentPane`:
+        return {
+          id: id,
+          type: `PaneClicked`,
+          verb: `CLICKED`,
+          targetSlug: parameterTwo,
+        };
+
+      case `bunny`:
+        return {
+          id: id,
+          type: `StartVideo`,
+          verb: `WATCHED`,
+          targetSlug: parameterTwo,
+        };
+
+      case `sandbox`:
+        return {
+          id: id,
+          type: `SandboxAction`,
+          verb: `CLICKED`,
+          targetSlug: parameterTwo || 'main',
+        };
+
+      case `storykeep`:
+      case `context`:
+      case `concierge`:
+      case `product`:
+      case `url`:
+        // ignore these
+        break;
+
+      default:
+        console.log(
+          `LispActionPayload preParseEvent misfire`,
+          command,
+          parameters
+        );
+        break;
+    }
+  }
+
+  return null;
+};

package/templates/src/utils/actions/preParse_Impression.ts

@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { BrandConfig } from '@/types/tractstack';
+
+export const preParseImpression = (
+  id: string,
+  title: string,
+  parentId: string,
+  payload: any,
+  config: BrandConfig
+) => {
+  const thisPayload = (payload && payload[0]) || false;
+  const command = (thisPayload && thisPayload[0] && thisPayload[0][0]) || null;
+  const parameters =
+    (thisPayload && thisPayload[0] && thisPayload[0][1]) || null;
+  const parameterOne = (parameters && parameters[0]) || null;
+  const parameterTwo = (parameters && parameters[1]) || null;
+  //const parameterThree = (parameters && parameters[2]) || null;
+
+  if (!config.SITE_INIT) {
+    console.log(`Site misconfiguration: SITE_INIT not found`);
+    return null;
+  }
+
+  if (!config.HOME_SLUG) {
+    console.log(`Site misconfiguration: HOME_SLUG not found`);
+    return null;
+  }
+
+  switch (command) {
+    case `goto`: {
+      switch (parameterOne) {
+        case `home`:
+          return {
+            id: id,
+            parentId: parentId,
+            title,
+            type: `Impression`,
+            verb: `CLICKED`,
+            targetSlug: config.HOME_SLUG,
+          };
+
+        case `storyFragment`:
+        case `storyFragmentPane`:
+          return {
+            id: id,
+            parentId: parentId,
+            title,
+            type: `Impression`,
+            verb: `CLICKED`,
+            targetSlug: parameterTwo,
+          };
+
+        case `context`:
+        case `concierge`:
+        case `product`:
+        case `url`:
+          // ignore these
+          break;
+
+        default:
+          console.log(
+            `LispActionPayload preParseImpression misfire`,
+            command,
+            parameters
+          );
+          break;
+      }
+    }
+  }
+  return null;
+};

package/templates/src/utils/api/advancedConfig.ts

@@ -0,0 +1,66 @@
+import { TractStackAPI } from '../api';
+import type {
+  AdvancedConfigStatus,
+  AdvancedConfigUpdateRequest,
+} from '@/types/tractstack';
+
+/**
+ * Get advanced configuration status (boolean flags only)
+ */
+export async function getAdvancedConfigStatus(
+  tenantId: string
+): Promise<AdvancedConfigStatus> {
+  const api = new TractStackAPI(tenantId);
+  try {
+    const response = await api.get<AdvancedConfigStatus>(
+      '/api/v1/config/advanced'
+    );
+
+    if (!response.success || !response.data) {
+      throw new Error(response.error || 'No data received from server');
+    }
+
+    const data = response.data;
+
+    // Validate response structure
+    if (
+      typeof data.tursoConfigured !== 'boolean' ||
+      typeof data.tursoTokenSet !== 'boolean' ||
+      typeof data.adminPasswordSet !== 'boolean' ||
+      typeof data.editorPasswordSet !== 'boolean' ||
+      typeof data.aaiAPIKeySet !== 'boolean'
+    ) {
+      throw new Error('Invalid response format from server');
+    }
+
+    return data;
+  } catch (error) {
+    console.error('Failed to fetch advanced config status:', error);
+    throw new Error('Failed to load advanced configuration status');
+  }
+}
+
+/**
+ * Save advanced configuration
+ */
+export async function saveAdvancedConfig(
+  tenantId: string,
+  config: AdvancedConfigUpdateRequest
+): Promise<void> {
+  const api = new TractStackAPI(tenantId);
+  try {
+    const response = await api.put('/api/v1/config/advanced', config);
+
+    if (!response.success) {
+      throw new Error(response.error || 'Failed to save configuration');
+    }
+  } catch (error) {
+    console.error('Failed to save advanced config:', error);
+
+    if (error instanceof Error) {
+      throw error;
+    }
+
+    throw new Error('Failed to save advanced configuration');
+  }
+}

package/templates/src/utils/api/advancedHelpers.ts

@@ -0,0 +1,134 @@
+import type {
+  AdvancedConfigStatus,
+  AdvancedConfigState,
+  AdvancedConfigUpdateRequest,
+  FieldErrors,
+} from '@/types/tractstack';
+
+/**
+ * Convert backend status response to local form state
+ * Since backend only returns boolean flags, we use empty strings for form values
+ */
+export function convertToLocalState(
+  status: AdvancedConfigStatus | null
+): AdvancedConfigState {
+  if (!status) {
+    return {
+      tursoUrl: '',
+      tursoToken: '',
+      adminPassword: '',
+      editorPassword: '',
+      aaiApiKey: '',
+    };
+  }
+
+  // Convert boolean status to empty string form state
+  // The form will show as "configured" or "not configured" based on boolean flags
+  // but never expose actual values
+  return {
+    tursoUrl: '',
+    tursoToken: '',
+    adminPassword: '',
+    editorPassword: '',
+    aaiApiKey: '',
+  };
+}
+
+/**
+ * Convert local form state to backend update request format
+ * Only include fields that have values (user has entered something)
+ */
+export function convertToBackendFormat(
+  state: AdvancedConfigState
+): AdvancedConfigUpdateRequest {
+  const request: AdvancedConfigUpdateRequest = {};
+
+  // Only include fields that have been filled in
+  if (state.tursoUrl?.trim()) {
+    request.TURSO_DATABASE_URL = state.tursoUrl.trim();
+  }
+
+  if (state.tursoToken?.trim()) {
+    request.TURSO_AUTH_TOKEN = state.tursoToken.trim();
+  }
+
+  if (state.adminPassword?.trim()) {
+    request.ADMIN_PASSWORD = state.adminPassword.trim();
+  }
+
+  if (state.editorPassword?.trim()) {
+    request.EDITOR_PASSWORD = state.editorPassword.trim();
+  }
+
+  if (state.aaiApiKey?.trim()) {
+    request.AAI_API_KEY = state.aaiApiKey.trim();
+  }
+
+  return request;
+}
+
+/**
+ * Validate advanced configuration state
+ */
+export function validateAdvancedConfig(
+  state: AdvancedConfigState
+): FieldErrors {
+  const errors: FieldErrors = {};
+
+  // Turso validation: both URL and token must be provided together
+  const hasTursoUrl = Boolean(state.tursoUrl?.trim());
+  const hasTursoToken = Boolean(state.tursoToken?.trim());
+
+  if (hasTursoUrl && !hasTursoToken) {
+    errors.tursoToken =
+      'Turso Auth Token is required when Turso URL is provided';
+  }
+
+  if (hasTursoToken && !hasTursoUrl) {
+    errors.tursoUrl =
+      'Turso Database URL is required when Turso Token is provided';
+  }
+
+  // Basic URL validation for Turso
+  if (hasTursoUrl && state.tursoUrl) {
+    const urlPattern = /^libsql:\/\/.+/;
+    if (!urlPattern.test(state.tursoUrl.trim())) {
+      errors.tursoUrl = 'Turso Database URL must start with "libsql://"';
+    }
+  }
+
+  // Password strength validation (optional but recommended)
+  if (state.adminPassword && state.adminPassword.length < 8) {
+    errors.adminPassword =
+      'Admin password should be at least 8 characters long';
+  }
+
+  if (state.editorPassword && state.editorPassword.length < 8) {
+    errors.editorPassword =
+      'Editor password should be at least 8 characters long';
+  }
+
+  return errors;
+}
+
+/**
+ * State interceptor for advanced config form
+ * This allows for custom logic when state changes
+ */
+export function advancedStateIntercept(
+  newState: AdvancedConfigState,
+  field: keyof AdvancedConfigState,
+  value: any
+): AdvancedConfigState {
+  // Clear related field when one half of Turso config is cleared
+  if (field === 'tursoUrl' && !value.trim()) {
+    return { ...newState, tursoUrl: value, tursoToken: '' };
+  }
+
+  if (field === 'tursoToken' && !value.trim()) {
+    return { ...newState, tursoToken: value, tursoUrl: '' };
+  }
+
+  // Default behavior - just update the field
+  return newState;
+}