@schandlergarcia/sf-web-components 2.0.0 → 2.2.0

package/brands/engine/schema.graphql

@@ -0,0 +1,292 @@
+"""
+Generated schema for Engine Travel Command Center
+Source: src/data/engine-sample-data.js field names
+Note: This is a minimal schema for GraphQL tooling when introspection is broken
+"""
+
+schema {
+  query: Query
+}
+
+type Query {
+  uiapi: UIAPI!
+}
+
+type UIAPI {
+  query: UIAPIQuery!
+}
+
+type UIAPIQuery {
+  Contact(first: Int, after: String, where: ContactFilter): ContactConnection
+  Trip__c(first: Int, after: String, where: Trip__cFilter): Trip__cConnection
+  Flight__c(first: Int, after: String, where: Flight__cFilter): Flight__cConnection
+  Booking__c(first: Int, after: String, where: Booking__cFilter): Booking__cConnection
+  Disruption__c(first: Int, after: String, where: Disruption__cFilter): Disruption__cConnection
+  Rebooking_Action__c(first: Int, after: String, where: Rebooking_Action__cFilter): Rebooking_Action__cConnection
+  Travel_Policy__c(first: Int, after: String, where: Travel_Policy__cFilter): Travel_Policy__cConnection
+}
+
+# Field value wrappers for FLS
+type FieldValueString {
+  value: String
+  displayValue: String
+}
+
+type FieldValueFloat {
+  value: Float
+  displayValue: String
+}
+
+type FieldValueBoolean {
+  value: Boolean
+  displayValue: String
+}
+
+type FieldValueID {
+  value: ID
+  displayValue: String
+}
+
+# Contact (Travelers)
+type Contact {
+  Id: ID!
+  FirstName: FieldValueString
+  LastName: FieldValueString
+  Department: FieldValueString
+  Home_Airport__c: FieldValueString
+  Travel_Policy_Tier__c: FieldValueString
+  Is_Active_Traveler__c: FieldValueBoolean
+  Role__c: FieldValueString
+}
+
+type ContactEdge {
+  node: Contact!
+  cursor: String!
+}
+
+type ContactConnection {
+  edges: [ContactEdge!]!
+  pageInfo: PageInfo!
+  totalCount: Int
+}
+
+input ContactFilter {
+  Id: IDFilter
+  FirstName: StringFilter
+  LastName: StringFilter
+  Department: StringFilter
+}
+
+# Trip__c
+type Trip__c {
+  Id: ID!
+  Trip_Name__c: FieldValueString
+  Contact__c: FieldValueString
+  Origin_City__c: FieldValueString
+  Origin_Airport__c: FieldValueString
+  Destination_City__c: FieldValueString
+  Destination_Airport__c: FieldValueString
+  Start_Date__c: FieldValueString
+  End_Date__c: FieldValueString
+  Status__c: FieldValueString
+  Total_Cost__c: FieldValueFloat
+  In_Policy__c: FieldValueBoolean
+  Has_Disruption__c: FieldValueBoolean
+}
+
+type Trip__cEdge {
+  node: Trip__c!
+  cursor: String!
+}
+
+type Trip__cConnection {
+  edges: [Trip__cEdge!]!
+  pageInfo: PageInfo!
+  totalCount: Int
+}
+
+input Trip__cFilter {
+  Id: IDFilter
+  Trip_Name__c: StringFilter
+  Status__c: StringFilter
+}
+
+# Flight__c
+type Flight__c {
+  Id: ID!
+  Flight_Number__c: FieldValueString
+  Airline__c: FieldValueString
+  Departure_Airport__c: FieldValueString
+  Departure_City__c: FieldValueString
+  Departure_Longitude__c: FieldValueFloat
+  Departure_Latitude__c: FieldValueFloat
+  Arrival_Airport__c: FieldValueString
+  Arrival_City__c: FieldValueString
+  Arrival_Longitude__c: FieldValueFloat
+  Arrival_Latitude__c: FieldValueFloat
+  Departure_DateTime__c: FieldValueString
+  Flight_Status__c: FieldValueString
+  Delay_Minutes__c: FieldValueFloat
+  Cabin_Class__c: FieldValueString
+  Contact__c: FieldValueString
+}
+
+type Flight__cEdge {
+  node: Flight__c!
+  cursor: String!
+}
+
+type Flight__cConnection {
+  edges: [Flight__cEdge!]!
+  pageInfo: PageInfo!
+  totalCount: Int
+}
+
+input Flight__cFilter {
+  Id: IDFilter
+  Flight_Number__c: StringFilter
+  Flight_Status__c: StringFilter
+}
+
+# Booking__c
+type Booking__c {
+  Id: ID!
+  Contact__c: FieldValueString
+  Booking_Type__c: FieldValueString
+  Status__c: FieldValueString
+  Cost__c: FieldValueFloat
+  In_Policy__c: FieldValueBoolean
+}
+
+type Booking__cEdge {
+  node: Booking__c!
+  cursor: String!
+}
+
+type Booking__cConnection {
+  edges: [Booking__cEdge!]!
+  pageInfo: PageInfo!
+  totalCount: Int
+}
+
+input Booking__cFilter {
+  Id: IDFilter
+  Status__c: StringFilter
+}
+
+# Disruption__c
+type Disruption__c {
+  Id: ID!
+  Flight_Number__c: FieldValueString
+  Disruption_Type__c: FieldValueString
+  Severity__c: FieldValueString
+  Status__c: FieldValueString
+  Impacted_Flight__c: FieldValueString
+  Trip__c: FieldValueString
+  City__c: FieldValueString
+  Affected_Traveler_Count__c: FieldValueFloat
+  Auto_Rebook_Eligible__c: FieldValueBoolean
+  Recommended_Action__c: FieldValueString
+  Description__c: FieldValueString
+}
+
+type Disruption__cEdge {
+  node: Disruption__c!
+  cursor: String!
+}
+
+type Disruption__cConnection {
+  edges: [Disruption__cEdge!]!
+  pageInfo: PageInfo!
+  totalCount: Int
+}
+
+input Disruption__cFilter {
+  Id: IDFilter
+  Severity__c: StringFilter
+  Status__c: StringFilter
+}
+
+# Rebooking_Action__c
+type Rebooking_Action__c {
+  Id: ID!
+  Action_Type__c: FieldValueString
+  Status__c: FieldValueString
+  Handled_By__c: FieldValueString
+  Contact__c: FieldValueString
+  Original_Flight__c: FieldValueString
+  New_Flight__c: FieldValueString
+  Cost_Difference__c: FieldValueFloat
+  Notes__c: FieldValueString
+  Created_DateTime__c: FieldValueString
+}
+
+type Rebooking_Action__cEdge {
+  node: Rebooking_Action__c!
+  cursor: String!
+}
+
+type Rebooking_Action__cConnection {
+  edges: [Rebooking_Action__cEdge!]!
+  pageInfo: PageInfo!
+  totalCount: Int
+}
+
+input Rebooking_Action__cFilter {
+  Id: IDFilter
+  Status__c: StringFilter
+}
+
+# Travel_Policy__c
+type Travel_Policy__c {
+  Id: ID!
+  Name: FieldValueString
+  Description__c: FieldValueString
+  Active__c: FieldValueBoolean
+  Policy_Tier__c: FieldValueString
+  Max_Flight_Cost__c: FieldValueFloat
+  Max_Hotel_Rate__c: FieldValueFloat
+  Advance_Booking_Days__c: FieldValueFloat
+  Preferred_Airlines__c: FieldValueString
+  Preferred_Hotel_Chains__c: FieldValueString
+}
+
+type Travel_Policy__cEdge {
+  node: Travel_Policy__c!
+  cursor: String!
+}
+
+type Travel_Policy__cConnection {
+  edges: [Travel_Policy__cEdge!]!
+  pageInfo: PageInfo!
+  totalCount: Int
+}
+
+input Travel_Policy__cFilter {
+  Id: IDFilter
+  Policy_Tier__c: StringFilter
+}
+
+# Pagination
+type PageInfo {
+  hasNextPage: Boolean!
+  hasPreviousPage: Boolean!
+  startCursor: String
+  endCursor: String
+}
+
+# Filter input types
+input IDFilter {
+  eq: ID
+  ne: ID
+  in: [ID!]
+  nin: [ID!]
+}
+
+input StringFilter {
+  eq: String
+  ne: String
+  like: String
+  in: [String!]
+  nin: [String!]
+}

package/brands/engine/useEngineLiveData.ts

@@ -0,0 +1,49 @@
+import { useState, useEffect } from "react";
+import * as live from "@/data/engine-live-data";
+
+const SIMULATED_LOAD_MS = 2000;
+
+export interface EngineLiveData {
+  loading: boolean;
+  mapMarkers: typeof live.MAP_MARKERS;
+  mapArcs: typeof live.MAP_ARCS;
+  mapOverlays: typeof live.MAP_OVERLAYS;
+  flightStatusList: typeof live.FLIGHT_STATUS_LIST;
+  travelerCards: typeof live.TRAVELER_CARDS;
+  disruptionCards: typeof live.DISRUPTION_CARDS;
+  escalationCards: typeof live.ESCALATION_CARDS;
+  monthlySpend: typeof live.MONTHLY_SPEND;
+  metrics: typeof live.METRICS;
+}
+
+/**
+ * Provides the live dataset for the Engine Travel Command Center.
+ *
+ * Simulates a 2-second network fetch, then resolves with all live data.
+ * Does NOT control the data mode — that's handled by ENABLE_SAMPLE_DATA_CACHE
+ * in src/lib/dataStrategy.ts. When the flag is false, every useDataSource call
+ * returns its live prop (which this hook provides) instead of its sample prop.
+ */
+export function useEngineLiveData(): EngineLiveData {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, SIMULATED_LOAD_MS);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return {
+    loading,
+    mapMarkers: live.MAP_MARKERS,
+    mapArcs: live.MAP_ARCS,
+    mapOverlays: live.MAP_OVERLAYS,
+    flightStatusList: live.FLIGHT_STATUS_LIST,
+    travelerCards: live.TRAVELER_CARDS,
+    disruptionCards: live.DISRUPTION_CARDS,
+    escalationCards: live.ESCALATION_CARDS,
+    monthlySpend: live.MONTHLY_SPEND,
+    metrics: live.METRICS,
+  };
+}

package/brands/engine/useEvaAgent.ts

@@ -0,0 +1,288 @@
+/**
+ * useEvaAgent — React hook for the Agentforce Agent REST API
+ *
+ * Handles the full lifecycle:
+ *   1. OAuth client-credentials → access_token
+ *   2. POST …/sessions → sessionId + message href
+ *   3. POST …/messages → agent response text
+ *   4. DELETE …/sessions → cleanup on unmount
+ *
+ * All HTTP calls go through the Vite proxy (see vite.config.ts):
+ *   /sf-oauth/*  → myDomainUrl
+ *   /sf-agent/*  → agentApiBaseUrl
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AGENT_API_CONFIG } from "@/config/agentApi";
+
+export interface AgentMessage {
+  role: "user" | "agent";
+  text: string;
+  id: string;
+  timestamp: string;
+}
+
+interface SessionState {
+  accessToken: string;
+  sessionId: string;
+  messagesHref: string;
+  endHref: string;
+}
+
+export default function useEvaAgent() {
+  const [messages, setMessages] = useState<AgentMessage[]>([]);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const sessionRef = useRef<SessionState | null>(null);
+  const sequenceRef = useRef(1);
+  const abortRef = useRef<AbortController | null>(null);
+
+  /* ── Step 1: OAuth token ──────────────────────────────── */
+  async function authenticate(signal: AbortSignal): Promise<string> {
+    const { clientId, clientSecret } = AGENT_API_CONFIG;
+
+    const body = new URLSearchParams({
+      grant_type: "client_credentials",
+      client_id: clientId,
+      client_secret: clientSecret,
+    });
+
+    const res = await fetch("/sf-oauth/services/oauth2/token", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body,
+      signal,
+    });
+
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(`OAuth failed (${res.status}): ${text}`);
+    }
+
+    const data = await res.json();
+    return data.access_token;
+  }
+
+  /* ── Step 2: Create session ───────────────────────────── */
+  async function createSession(
+    accessToken: string,
+    signal: AbortSignal
+  ): Promise<Omit<SessionState, "accessToken">> {
+    const { agentId, bypassUser, demoTraveler, myDomainUrl } =
+      AGENT_API_CONFIG;
+
+    const payload = {
+      externalSessionKey: crypto.randomUUID(),
+      instanceConfig: { endpoint: myDomainUrl },
+      streamingCapabilities: { chunkTypes: ["Text"] },
+      bypassUser,
+      variables: [
+        {
+          name: "$Context.EndUserId",
+          type: "Text",
+          value: demoTraveler.contactId,
+        },
+        {
+          name: "$Context.EndUserEmail",
+          type: "Text",
+          value: demoTraveler.email,
+        },
+        {
+          name: "$Context.EndUserFirstName",
+          type: "Text",
+          value: demoTraveler.firstName,
+        },
+        {
+          name: "$Context.EndUserLastName",
+          type: "Text",
+          value: demoTraveler.lastName,
+        },
+      ],
+    };
+
+    const res = await fetch(
+      `/sf-agent/einstein/ai-agent/v1/agents/${agentId}/sessions`,
+      {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+        signal,
+      }
+    );
+
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(`Session creation failed (${res.status}): ${text}`);
+    }
+
+    const data = await res.json();
+    return {
+      sessionId: data.sessionId,
+      messagesHref: data._links?.messages?.href ?? "",
+      endHref: data._links?.end?.href ?? "",
+    };
+  }
+
+  /* ── Step 3: Send message ─────────────────────────────── */
+  const sendMessage = useCallback(async (text: string) => {
+    const session = sessionRef.current;
+    if (!session) return;
+
+    const userMsg: AgentMessage = {
+      role: "user",
+      text,
+      id: `user-${Date.now()}`,
+      timestamp: new Date().toISOString(),
+    };
+    setMessages((prev) => [...prev, userMsg]);
+    setIsSending(true);
+
+    try {
+      const seqId = sequenceRef.current++;
+
+      const messagesUrl = session.messagesHref.startsWith("http")
+        ? `/sf-agent${new URL(session.messagesHref).pathname}`
+        : `/sf-agent${session.messagesHref}`;
+
+      const res = await fetch(messagesUrl, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${session.accessToken}`,
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify({
+          message: { sequenceId: seqId, type: "Text", text },
+        }),
+      });
+
+      if (!res.ok) {
+        const errText = await res.text();
+        throw new Error(`Agent message failed (${res.status}): ${errText}`);
+      }
+
+      const data = await res.json();
+
+      const agentTexts: string[] = [];
+      if (Array.isArray(data.messages)) {
+        for (const m of data.messages) {
+          if (m.type === "Inform" && m.message) {
+            agentTexts.push(m.message);
+          } else if (m.type === "Text" && m.message) {
+            agentTexts.push(m.message);
+          }
+        }
+      }
+
+      const responseText =
+        agentTexts.length > 0
+          ? agentTexts.join("\n\n")
+          : data.message ?? "No response from agent.";
+
+      const agentMsg: AgentMessage = {
+        role: "agent",
+        text: responseText,
+        id: `agent-${Date.now()}`,
+        timestamp: new Date().toISOString(),
+      };
+      setMessages((prev) => [...prev, agentMsg]);
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : "Unknown error";
+      setError(msg);
+      const errMsg: AgentMessage = {
+        role: "agent",
+        text: `Error: ${msg}`,
+        id: `error-${Date.now()}`,
+        timestamp: new Date().toISOString(),
+      };
+      setMessages((prev) => [...prev, errMsg]);
+    } finally {
+      setIsSending(false);
+    }
+  }, []);
+
+  /* ── Step 4: End session ──────────────────────────────── */
+  const endSession = useCallback(async () => {
+    const session = sessionRef.current;
+    if (!session) return;
+
+    try {
+      const endUrl = session.endHref.startsWith("http")
+        ? `/sf-agent${new URL(session.endHref).pathname}`
+        : `/sf-agent${session.endHref}`;
+
+      await fetch(endUrl, {
+        method: "DELETE",
+        headers: { Authorization: `Bearer ${session.accessToken}` },
+      });
+    } catch {
+      /* best-effort cleanup */
+    }
+
+    sessionRef.current = null;
+    setIsReady(false);
+  }, []);
+
+  /* ── Init: authenticate + create session on mount ─────── */
+  const connect = useCallback(async () => {
+    if (sessionRef.current) return;
+
+    abortRef.current = new AbortController();
+    const { signal } = abortRef.current;
+
+    setIsConnecting(true);
+    setError(null);
+
+    try {
+      const accessToken = await authenticate(signal);
+      const session = await createSession(accessToken, signal);
+
+      sessionRef.current = { accessToken, ...session };
+      sequenceRef.current = 1;
+      setIsReady(true);
+    } catch (err: unknown) {
+      if ((err as Error).name !== "AbortError") {
+        const msg = err instanceof Error ? err.message : "Connection failed";
+        setError(msg);
+      }
+    } finally {
+      setIsConnecting(false);
+    }
+  }, []);
+
+  /* ── Cleanup on unmount ───────────────────────────────── */
+  useEffect(() => {
+    return () => {
+      abortRef.current?.abort();
+      if (sessionRef.current) {
+        const session = sessionRef.current;
+        const endUrl = session.endHref.startsWith("http")
+          ? `/sf-agent${new URL(session.endHref).pathname}`
+          : `/sf-agent${session.endHref}`;
+
+        fetch(endUrl, {
+          method: "DELETE",
+          headers: { Authorization: `Bearer ${session.accessToken}` },
+        }).catch(() => {});
+        sessionRef.current = null;
+      }
+    };
+  }, []);
+
+  return {
+    messages,
+    isConnecting,
+    isReady,
+    isSending,
+    error,
+    connect,
+    sendMessage,
+    endSession,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",
@@ -27,6 +27,7 @@
   "files": [
     "dist",
     "scripts",
+    "brands",
     "src/templates",
     "src/components",
     "src/lib",
@@ -50,7 +51,10 @@
     "postinstall": "node scripts/postinstall.mjs",
     "reset:command-center": "bash scripts/reset-command-center.sh",
     "validate:dashboard": "bash scripts/validate-dashboard.sh",
-    "graphql:schema": "node scripts/get-graphql-schema.mjs"
+    "graphql:schema": "node scripts/get-graphql-schema.mjs",
+    "brand:engine": "node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs engine",
+    "brand:reset": "node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs --reset",
+    "brand:list": "node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs --list"
   },
   "peerDependencies": {
     "@heroicons/react": "^2.0.0",