@schandlergarcia/sf-web-components 2.2.1 → 2.3.0

package/brands/engine/app/api/graphqlClient.ts

@@ -0,0 +1,25 @@
+/**
+ * Thin GraphQL client: createDataSDK + data.graphql with centralized error handling.
+ * Use with gql-tagged queries and generated operation types for type-safe calls.
+ */
+import { createDataSDK } from '@salesforce/sdk-data';
+
+export async function executeGraphQL<TData, TVariables>(
+  query: string,
+  variables?: TVariables
+): Promise<TData> {
+  const data = await createDataSDK();
+  // SDK types graphql() first param as string; at runtime it may accept gql DocumentNode too
+  const response = await data.graphql?.<TData, TVariables>(query, variables);
+
+  if (!response) {
+    throw new Error('GraphQL response is undefined');
+  }
+
+  if (response?.errors?.length) {
+    const msg = response.errors.map(e => e.message).join('; ');
+    throw new Error(`GraphQL Error: ${msg}`);
+  }
+
+  return response.data;
+}

package/brands/engine/app/api/partnerQueries.ts

@@ -0,0 +1,212 @@
+import { gql } from "@salesforce/sdk-data";
+
+/**
+ * Partner Hub GraphQL Queries
+ *
+ * These queries fetch partner dashboard data from Salesforce using UI API GraphQL.
+ * All custom fields use @optional to handle null values gracefully.
+ */
+
+// Get current user
+export const GET_CURRENT_USER = gql`
+  query GetCurrentUser {
+    uiapi {
+      currentUser {
+        Id
+        Name @optional { value }
+        Email @optional { value }
+      }
+    }
+  }
+`;
+
+// Get partner Account with custom fields
+export const GET_PARTNER_ACCOUNT = gql`
+  query GetPartnerAccount($accountId: ID!) {
+    uiapi {
+      query {
+        Account(where: { Id: { eq: $accountId } }, first: 1) {
+          edges {
+            node {
+              Id
+              Name @optional { value }
+              Type @optional { value }
+              Partner_Tier__c @optional { value }
+              Commission_Rate__c @optional { value }
+              Partner_Status__c @optional { value }
+              Total_Properties__c @optional { value }
+              Total_Reservations__c @optional { value }
+              Total_Revenue__c @optional { value }
+              Contract_Start_Date__c @optional { value }
+              Contract_End_Date__c @optional { value }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+// Find first Partner account (when no partnerId provided)
+export const FIND_PARTNER_ACCOUNT = gql`
+  query FindPartnerAccount {
+    uiapi {
+      query {
+        Account(where: { Type: { eq: "Partner" } }, first: 1) {
+          edges {
+            node {
+              Id
+              Name @optional { value }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+// Get contracts for partner
+export const GET_CONTRACTS = gql`
+  query GetContracts($accountId: ID!) {
+    uiapi {
+      query {
+        Contract__c(where: { Hotel_Partner__c: { eq: $accountId } }, first: 50) {
+          edges {
+            node {
+              Id
+              Name @optional { value }
+              Contract_Status__c @optional { value }
+              Attrition_Calculation_Method__c @optional { value }
+              Attrition_Threshold_Percentage__c @optional { value }
+              Resale_Credit_Policy__c @optional { value }
+              Resale_Credit_Percentage__c @optional { value }
+              Commission_Rate__c @optional { value }
+              Start_Date__c @optional { value }
+              End_Date__c @optional { value }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+// Get invoices for partner
+export const GET_INVOICES = gql`
+  query GetInvoices($accountId: ID!) {
+    uiapi {
+      query {
+        Invoice__c(where: { Hotel_Partner__c: { eq: $accountId } }, first: 50, orderBy: { Invoice_Date__c: { order: DESC } }) {
+          edges {
+            node {
+              Id
+              Name @optional { value }
+              Invoice_Status__c @optional { value }
+              Invoice_Date__c @optional { value }
+              Due_Date__c @optional { value }
+              Invoice_Period_Start__c @optional { value }
+              Invoice_Period_End__c @optional { value }
+              Invoice_Total__c @optional { value }
+              Total_Commission__c @optional { value }
+              Total_Attrition_Penalties__c @optional { value }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+// Get attrition penalties for partner (via Contract relationship)
+export const GET_PENALTIES = gql`
+  query GetPenalties($accountId: ID!) {
+    uiapi {
+      query {
+        Attrition_Penalty__c(
+          where: {
+            Contract__r: { Hotel_Partner__c: { eq: $accountId } }
+          }
+          first: 50
+        ) {
+          edges {
+            node {
+              Id
+              Name @optional { value }
+              Penalty_Status__c @optional { value }
+              Original_Room_Block__c @optional { value }
+              Actual_Rooms_Used__c @optional { value }
+              Unused_Rooms__c @optional { value }
+              Room_Rate__c @optional { value }
+              Number_of_Nights__c @optional { value }
+              Rooms_Resold__c @optional { value }
+              Penalty_Amount_Calculated__c @optional { value }
+              Resale_Credit_Applied__c @optional { value }
+              Final_Penalty_Amount__c @optional { value }
+              Penalty_Date__c @optional { value }
+              Contract__c @optional { value }
+              Property__r @optional {
+                Name @optional { value }
+                Property_Name__c @optional { value }
+              }
+              Customer_Company__r @optional {
+                Name @optional { value }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+// Get disputes (Cases with Partner_Dispute RecordType)
+export const GET_DISPUTES = gql`
+  query GetDisputes($accountId: ID!) {
+    uiapi {
+      query {
+        Case(where: { AccountId: { eq: $accountId }, RecordType: { DeveloperName: { eq: "Partner_Dispute" } } }, first: 50) {
+          edges {
+            node {
+              Id
+              CaseNumber @optional { value }
+              Subject @optional { value }
+              Status @optional { value }
+              Priority @optional { value }
+              Dispute_Type__c @optional { value }
+              Disputed_Amount__c @optional { value }
+              Agent_Handled__c @optional { value }
+              Escalation_Reason__c @optional { value }
+              CreatedDate @optional { value }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+// Get properties for partner
+export const GET_PROPERTIES = gql`
+  query GetProperties($accountId: ID!) {
+    uiapi {
+      query {
+        Property__c(where: { Hotel_Partner__c: { eq: $accountId } }, first: 50) {
+          edges {
+            node {
+              Id
+              Name @optional { value }
+              Property_Name__c @optional { value }
+              Property_Type__c @optional { value }
+              City__c @optional { value }
+              State__c @optional { value }
+              Country__c @optional { value }
+              Star_Rating__c @optional { value }
+              Total_Rooms__c @optional { value }
+              Active__c @optional { value }
+            }
+          }
+        }
+      }
+    }
+  }
+`;

package/brands/engine/app/appLayout.tsx

@@ -0,0 +1,13 @@
+import { AgentforceConversationClient } from "./components/AgentforceConversationClient";
+import { Outlet, Link, useLocation } from "react-router";
+import { getAllRoutes } from "./router-utils";
+import { useState } from "react";
+
+export default function AppLayout() {
+	return (
+		<>
+			<Outlet />
+			<AgentforceConversationClient agentId="<USER_AGENT_ID_18_CHAR_0Xx...>" />
+		</>
+	);
+}

package/brands/engine/app/components/AgentforceConversationClient.tsx

@@ -0,0 +1,201 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client";
+import type { AgentforceClientConfig } from "@salesforce/agentforce-conversation-client";
+import { useEffect, useMemo, useRef } from "react";
+import type {
+	ResolvedEmbedOptions,
+	AgentforceConversationClientProps,
+} from "../types/conversation";
+
+const GLOBAL_HOST_ID = "agentforce-conversation-client-global-host";
+
+const DEFAULT_STYLE_TOKENS: NonNullable<AgentforceClientConfig["styleTokens"]> = {
+	containerBackground: "#fafafa",
+
+	headerBlockBackground: "#372949",
+	headerBlockTextColor: "#ffffff",
+	headerBlockIconColor: "#ffffff",
+	headerBlockBorderBottomColor: "#3b0764",
+	headerBlockFocusBorder: "#c4b5fd",
+
+	messageBlockInboundBackgroundColor: "#ffffff",
+	messageBlockInboundTextColor: "#1f2937",
+	messageBlockInboundBorder: "1px solid #e5e7eb",
+
+	messageBlockOutboundBackgroundColor: "#ede9fe",
+	messageBlockOutboundTextColor: "#1f2937",
+	messageBlockOutboundBorder: "1px solid #d8b4fe",
+
+	messageInputTextColor: "#1f2937",
+	messageInputTextBackgroundColor: "#ffffff",
+	messageInputFooterBorderColor: "#d1d5db",
+	messageInputFooterBorderFocusColor: "#9ca3af",
+	messageInputFocusShadow: "0 0 0 3px rgba(156, 163, 175, 0.25)",
+	messageInputFooterPlaceholderText: "#6b7280",
+
+	messageInputFooterSendButton: "#7e22ce",
+	messageInputFooterSendButtonHoverColor: "#6b21a8",
+	messageInputSendButtonIconColor: "#ffffff",
+	messageInputSendButtonDisabledColor: "#e5e7eb",
+	messageInputActionButtonFocusBorder: "#a855f7",
+};
+const SINGLETON_KEY = "__agentforceConversationClientSingleton";
+
+interface AgentforceConversationClientSingleton {
+	initPromise?: Promise<void>;
+	initialized: boolean;
+}
+
+interface WindowWithAgentforceSingleton extends Window {
+	[SINGLETON_KEY]?: AgentforceConversationClientSingleton;
+}
+
+function getSingleton(): AgentforceConversationClientSingleton {
+	const win = window as WindowWithAgentforceSingleton;
+	if (!win[SINGLETON_KEY]) {
+		win[SINGLETON_KEY] = {
+			initialized: false,
+		};
+	}
+	return win[SINGLETON_KEY]!;
+}
+
+function getOrCreateGlobalHost(): HTMLDivElement {
+	let host = document.getElementById(GLOBAL_HOST_ID) as HTMLDivElement | null;
+	if (!host) {
+		host = document.createElement("div");
+		host.id = GLOBAL_HOST_ID;
+		document.body.appendChild(host);
+	}
+	return host;
+}
+
+function getDefaultEmbedOptions(): ResolvedEmbedOptions {
+	return { salesforceOrigin: window.location.origin };
+}
+
+/**
+ * React wrapper that embeds the Agentforce Conversation Client (copilot/agent UI)
+ * using Lightning Out. Requires a valid Salesforce session for the given org.
+ * Config is passed through from the consumer to the embed client as-is.
+ */
+export function AgentforceConversationClient({
+	agentId,
+	agentLabel,
+	inline: inlineProp,
+	headerEnabled,
+	showHeaderIcon,
+	width,
+	height,
+	styleTokens,
+	salesforceOrigin,
+	frontdoorUrl,
+}: AgentforceConversationClientProps) {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const normalizedAgentforceClientConfig = useMemo<AgentforceClientConfig>(() => {
+		const renderingConfig: NonNullable<AgentforceClientConfig["renderingConfig"]> = {
+			mode: inlineProp ? "inline" : "floating",
+			...(headerEnabled !== undefined && { headerEnabled }),
+			...(showHeaderIcon !== undefined && { showHeaderIcon }),
+			...{ showAvatar: false },
+			...(width !== undefined && { width }),
+			...(height !== undefined && { height }),
+		};
+
+		return {
+			...(agentId !== undefined && { agentId }),
+			agentLabel: agentLabel ?? "Chat with us",
+			styleTokens: { ...DEFAULT_STYLE_TOKENS, ...styleTokens },
+			renderingConfig,
+		};
+	}, [agentId, agentLabel, inlineProp, headerEnabled, showHeaderIcon, width, height, styleTokens]);
+
+	const inline = normalizedAgentforceClientConfig?.renderingConfig?.mode === "inline";
+
+	useEffect(() => {
+		if (!normalizedAgentforceClientConfig?.agentId) {
+			throw new Error(
+				"AgentforceConversationClient requires agentId. " +
+					"Pass flat props only (agentId, agentLabel, inline, headerEnabled, showHeaderIcon, width, height, styleTokens).",
+			);
+		}
+
+		const singleton = getSingleton();
+		if (singleton.initialized || singleton.initPromise) {
+			return;
+		}
+
+		if (inline && !containerRef.current) {
+			return;
+		}
+
+		const initialize = (options: ResolvedEmbedOptions) => {
+			if (singleton.initialized) {
+				return;
+			}
+			const existingEmbed = document.querySelector('lightning-out-application[data-lo="acc"]');
+			if (existingEmbed) {
+				singleton.initialized = true;
+				return;
+			}
+			const host = inline ? containerRef.current! : getOrCreateGlobalHost();
+
+			embedAgentforceClient({
+				container: host,
+				salesforceOrigin: salesforceOrigin ?? options.salesforceOrigin,
+				frontdoorUrl: frontdoorUrl ?? options.frontdoorUrl,
+				agentforceClientConfig: normalizedAgentforceClientConfig,
+			});
+			singleton.initialized = true;
+		};
+
+		const shouldFetchFrontdoor = window.location.hostname === "localhost";
+
+		if (shouldFetchFrontdoor) {
+			singleton.initPromise = fetch("/__lo/frontdoor")
+				.then(async (res) => {
+					if (!res.ok) {
+						console.error("frontdoor fetch failed");
+						return;
+					}
+					const { frontdoorUrl: resolvedFrontdoorUrl } = await res.json();
+					initialize({ frontdoorUrl: resolvedFrontdoorUrl });
+				})
+				.catch((err) => {
+					console.error("AgentforceConversationClient: failed to fetch frontdoor URL", err);
+				})
+				.finally(() => {
+					singleton.initPromise = undefined;
+				});
+		} else {
+			singleton.initPromise = Promise.resolve()
+				.then(() => {
+					initialize(getDefaultEmbedOptions());
+				})
+				.catch((err) => {
+					console.error("AgentforceConversationClient: failed to embed Agentforce client", err);
+				})
+				.finally(() => {
+					singleton.initPromise = undefined;
+				});
+		}
+
+		return () => {
+			// Intentionally no cleanup:
+			// This component guarantees a single LO initialization per window.
+		};
+	}, [salesforceOrigin, frontdoorUrl, normalizedAgentforceClientConfig, inline]);
+
+	if (!inline) {
+		return null;
+	}
+
+	return <div ref={containerRef} />;
+}
+
+export default AgentforceConversationClient;

package/brands/engine/app/components/__inherit_AgentforceConversationClient.tsx

@@ -0,0 +1,3 @@
+function AgentforceConversationClient() {}
+
+export { AgentforceConversationClient };

package/brands/engine/app/components/alerts/status-alert.tsx

@@ -0,0 +1,49 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { AlertCircleIcon, CheckCircle2Icon } from 'lucide-react';
+import { Alert, AlertDescription } from '../../components/ui/alert';
+import { useId } from 'react';
+
+const statusAlertVariants = cva('', {
+  variants: {
+    variant: {
+      error: '',
+      success: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'error',
+  },
+});
+
+interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
+  children?: React.ReactNode;
+  /** Alert variant type. @default "error" */
+  variant?: 'error' | 'success';
+}
+
+/**
+ * Status alert component for displaying error or success messages.
+ * Returns null if no children are provided.
+ */
+export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
+  const descriptionId = useId();
+  if (!children) return null;
+
+  const isError = variant === 'error';
+
+  return (
+    <Alert
+      variant={isError ? 'destructive' : 'default'}
+      className={statusAlertVariants({ variant })}
+      aria-describedby={descriptionId}
+      role={isError ? 'alert' : 'status'}
+    >
+      {isError ? (
+        <AlertCircleIcon aria-hidden="true" />
+      ) : (
+        <CheckCircle2Icon aria-hidden="true" />
+      )}
+      <AlertDescription id={descriptionId}>{children}</AlertDescription>
+    </Alert>
+  );
+}

package/brands/engine/app/components/layouts/card-layout.tsx

@@ -0,0 +1,29 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../../components/ui/card';
+
+interface CardLayoutProps {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * Card layout component for authentication pages.
+ * Provides CardHeader with title and optional description, and CardContent.
+ */
+export function CardLayout({ title, description, children }: CardLayoutProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-2xl">{title}</CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}

package/brands/engine/app/components/workspace/CommandCenter.tsx

@@ -0,0 +1,16 @@
+import AppThemeProvider from "@/components/library/theme/AppThemeProvider";
+import DataModeProvider from "@/components/library/data/DataModeProvider";
+import { ENABLE_SAMPLE_DATA_CACHE } from "@/lib/dataStrategy";
+import { Toaster } from "sonner";
+import PartnerHubDashboard from "../../pages/PartnerHubDashboard";
+
+export default function CommandCenter() {
+  return (
+    <AppThemeProvider initialMode="light">
+      <DataModeProvider initialMode={ENABLE_SAMPLE_DATA_CACHE ? "sample" : "live"}>
+        <PartnerHubDashboard />
+        <Toaster position="bottom-right" />
+      </DataModeProvider>
+    </AppThemeProvider>
+  );
+}

package/brands/engine/app/config/agentApi.ts

@@ -0,0 +1,36 @@
+/**
+ * Agentforce Agent API Configuration
+ *
+ * These values connect the ChatBar to the real Agentforce agent (Eva)
+ * via the REST-based Agent API instead of the iframe-based
+ * AgentforceConversationClient.
+ *
+ * Flow: OAuth token → create session → send messages → end session
+ *
+ * All requests are proxied through the Vite dev server to avoid CORS.
+ * See vite.config.ts proxy rules:
+ *   /sf-oauth/*  → myDomainUrl (for OAuth token)
+ *   /sf-agent/*  → agentApiBaseUrl (for Agent API calls)
+ */
+
+export const AGENT_API_CONFIG = {
+  myDomainUrl: "https://tdx26-keynote-org-1com.my.salesforce.com",
+
+  clientId:
+    "3MVG9Gm6vbdjgMWSOIAuIN3VSB5Rju6PgYQ5rl1yH3bVTTg9E2as4.C61Q0cyT.zqv2vUWNaxrm.A7SW5o3t7",
+  clientSecret:
+    "9ADF795A183A6B074A2E4B4CB1748B8DF7090C74191AF1C190213B512A733E03",
+
+  agentId: "0Xxa5000000rQlxCAE",
+
+  agentApiBaseUrl: "https://api.salesforce.com",
+
+  bypassUser: true,
+
+  demoTraveler: {
+    contactId: "003a500000mj4TlAAI",
+    email: "sarah.chen@arcline.ai",
+    firstName: "Sarah",
+    lastName: "Chen",
+  },
+};

package/brands/engine/app/features/object-search/__examples__/api/accountSearchService.ts

@@ -0,0 +1,46 @@
+import SEARCH_ACCOUNTS_QUERY from "./query/searchAccounts.graphql?raw";
+import DISTINCT_INDUSTRIES_QUERY from "./query/distinctAccountIndustries.graphql?raw";
+import DISTINCT_TYPES_QUERY from "./query/distinctAccountTypes.graphql?raw";
+import {
+	searchObjects,
+	fetchDistinctValues,
+	type ObjectSearchOptions,
+	type PicklistOption,
+} from "../../api/objectSearchService";
+import type {
+	SearchAccountsQuery,
+	SearchAccountsQueryVariables,
+	DistinctAccountIndustriesQuery,
+	DistinctAccountTypesQuery,
+} from "../../../../api/graphql-operations-types";
+
+export type AccountSearchResult = NonNullable<SearchAccountsQuery["uiapi"]["query"]["Account"]>;
+
+export type AccountSearchOptions = ObjectSearchOptions<
+	SearchAccountsQueryVariables["where"],
+	SearchAccountsQueryVariables["orderBy"]
+>;
+
+export type { PicklistOption };
+
+export async function searchAccounts(
+	options: AccountSearchOptions = {},
+): Promise<AccountSearchResult> {
+	return searchObjects<AccountSearchResult, SearchAccountsQuery, SearchAccountsQueryVariables>(
+		SEARCH_ACCOUNTS_QUERY,
+		"Account",
+		options,
+	);
+}
+
+export async function fetchDistinctIndustries(): Promise<PicklistOption[]> {
+	return fetchDistinctValues<DistinctAccountIndustriesQuery>(
+		DISTINCT_INDUSTRIES_QUERY,
+		"Account",
+		"Industry",
+	);
+}
+
+export async function fetchDistinctTypes(): Promise<PicklistOption[]> {
+	return fetchDistinctValues<DistinctAccountTypesQuery>(DISTINCT_TYPES_QUERY, "Account", "Type");
+}

package/brands/engine/app/features/object-search/__examples__/api/query/distinctAccountIndustries.graphql

@@ -0,0 +1,19 @@
+query DistinctAccountIndustries {
+	uiapi {
+		aggregate {
+			Account(groupBy: { Industry: { group: true } }) {
+				edges {
+					node {
+						aggregate @optional {
+							Industry @optional {
+								value
+								displayValue
+								label
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/brands/engine/app/features/object-search/__examples__/api/query/distinctAccountTypes.graphql

@@ -0,0 +1,19 @@
+query DistinctAccountTypes {
+	uiapi {
+		aggregate {
+			Account(groupBy: { Type: { group: true } }) {
+				edges {
+					node {
+						aggregate @optional {
+							Type @optional {
+								value
+								displayValue
+								label
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}