@salesforce/webapp-template-app-react-sample-b2e-experimental 1.64.0 → 1.66.0

package/dist/force-app/main/default/webapplications/appreactsampleb2e/package.json

@@ -15,19 +15,21 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.64.0",
-    "@salesforce/webapp-experimental": "^1.64.0",
+    "@salesforce/agentforce-conversation-client": "^1.66.0",
+    "@salesforce/sdk-data": "^1.66.0",
+    "@salesforce/webapp-experimental": "^1.66.0",
     "@tailwindcss/vite": "^4.1.17",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-router": "^7.10.1",
-    "tailwindcss": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
     "lucide-react": "^0.562.0",
     "radix-ui": "^1.4.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router": "^7.10.1",
     "shadcn": "^3.8.5",
     "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
@@ -38,7 +40,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-webapp-experimental": "^1.64.0",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.66.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/api/applications.ts

@@ -0,0 +1,142 @@
+import { getDataSDK, gql } from "@salesforce/sdk-data";
+import type { Application } from "../lib/types.js";
+import type {
+	GetApplicationsQuery,
+	UpdateApplicationStatusMutationVariables,
+	UpdateApplicationStatusMutation,
+} from "./graphql-operations-types.js";
+
+// Query to get all applications
+const GET_APPLICATIONS = gql`
+	query GetApplications {
+		uiapi {
+			query {
+				Application__c(orderBy: { Start_Date__c: { order: DESC } }) {
+					edges {
+						node {
+							Id
+							Name {
+								value
+							}
+							User__r {
+								FirstName {
+									value
+								}
+								LastName {
+									value
+								}
+							}
+							Property__r {
+								Name {
+									value
+								}
+								Address__c {
+									value
+								}
+							}
+							Start_Date__c {
+								value
+							}
+							Status__c {
+								value
+							}
+							Employment__c {
+								value
+							}
+							References__c {
+								value
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
+
+// Mutation to update application status
+const UPDATE_APPLICATION_STATUS = gql`
+	mutation UpdateApplicationStatus($input: Application__cUpdateInput!) {
+		uiapi {
+			Application__cUpdate(input: $input) {
+				Record {
+					Id
+					Status__c {
+						value
+					}
+				}
+				success
+			}
+		}
+	}
+`;
+
+export async function getApplications(): Promise<Application[]> {
+	try {
+		const data = await getDataSDK();
+		const result = await data.graphql?.<GetApplicationsQuery>(GET_APPLICATIONS);
+
+		if (result?.errors?.length) {
+			const errorMessages = result.errors.map((e) => e.message).join("; ");
+			throw new Error(`GraphQL Error: ${errorMessages}`);
+		}
+
+		const edges = result?.data?.uiapi?.query?.Application__c?.edges || [];
+
+		return edges
+			.map((edge) => {
+				if (!edge || !edge.node) return null;
+				const node = edge.node;
+				const firstName = node.User__r?.FirstName?.value || "";
+				const lastName = node.User__r?.LastName?.value || "";
+				const applicantName = `${firstName} ${lastName}`.trim() || "Unknown";
+
+				return {
+					id: node.Id,
+					applicantName,
+					propertyAddress: node.Property__r?.Address__c?.value || "Unknown Property",
+					propertyName: node.Property__r?.Name?.value || "",
+					submittedDate: node.Start_Date__c?.value || "",
+					startDate: node.Start_Date__c?.value || "",
+					status: node.Status__c?.value || "Unknown",
+					employment: node.Employment__c?.value || "",
+					references: node.References__c?.value || "",
+				};
+			})
+			.filter((app) => app !== null) as Application[];
+	} catch (error) {
+		console.error("Error fetching applications:", error);
+		return [];
+	}
+}
+
+export async function updateApplicationStatus(
+	applicationId: string,
+	status: string,
+): Promise<boolean> {
+	const variables: UpdateApplicationStatusMutationVariables = {
+		input: {
+			Id: applicationId,
+			Application__c: {
+				Status__c: status,
+			},
+		},
+	};
+	try {
+		const data = await getDataSDK();
+		const result = await data.graphql?.<
+			UpdateApplicationStatusMutation,
+			UpdateApplicationStatusMutationVariables
+		>(UPDATE_APPLICATION_STATUS, variables);
+
+		if (result?.errors?.length) {
+			const errorMessages = result.errors.map((e) => e.message).join("; ");
+			throw new Error(`GraphQL Error: ${errorMessages}`);
+		}
+
+		return !!result?.data?.uiapi?.Application__cUpdate?.success;
+	} catch (error) {
+		console.error("Error updating application status:", error);
+		return false;
+	}
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/api/dashboard.ts

@@ -1,6 +1,5 @@
-import { getDataSDK } from "@salesforce/sdk-data";
+import { getDataSDK, gql } from "@salesforce/sdk-data";
 import type { DashboardMetrics, Application } from "../lib/types.js";
-import { gql } from "./utils.js";
 import type {
 	GetDashboardMetricsQuery,
 	GetOpenApplicationsQuery,

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/api/maintenance.ts

@@ -1,11 +1,12 @@
-import { getDataSDK } from "@salesforce/sdk-data";
+import { getDataSDK, gql } from "@salesforce/sdk-data";
 import type { MaintenanceRequest } from "../lib/types.js";
-import { gql } from "./utils.js";
 import type {
 	GetMaintenanceRequestsQuery,
 	GetMaintenanceRequestsQueryVariables,
 	GetAllMaintenanceRequestsQuery,
 	GetAllMaintenanceRequestsQueryVariables,
+	UpdateMaintenanceStatusMutation,
+	UpdateMaintenanceStatusMutationVariables,
 } from "./graphql-operations-types.js";
 
 // Query to get recent maintenance requests
@@ -127,6 +128,23 @@ const GET_ALL_MAINTENANCE_REQUESTS = gql`
 	}
 `;
 
+// Mutation to update maintenance request status
+const UPDATE_MAINTENANCE_STATUS = gql`
+	mutation UpdateMaintenanceStatus($input: Maintenance_Request__cUpdateInput!) {
+		uiapi {
+			Maintenance_Request__cUpdate(input: $input) {
+				Record {
+					Id
+					Status__c {
+						value
+					}
+				}
+				success
+			}
+		}
+	}
+`;
+
 // Fetch maintenance requests for dashboard
 export async function getMaintenanceRequests(first: number = 5): Promise<MaintenanceRequest[]> {
 	const variables: GetMaintenanceRequestsQueryVariables = { first };
@@ -171,6 +189,16 @@ export async function getAllMaintenanceRequests(
 	return requests;
 }
 
+// Helper function to map priority values to badge format
+function mapPriority(priority: string | undefined): "emergency" | "high" | "medium" | "low" {
+	if (!priority) return "medium";
+	const priorityLower = priority.toLowerCase();
+	if (priorityLower.includes("emergency")) return "emergency";
+	if (priorityLower.includes("high")) return "high";
+	if (priorityLower.includes("low")) return "low";
+	return "medium";
+}
+
 // Helper function to transform maintenance request data
 function transformMaintenanceRequest(node: any): MaintenanceRequest {
 	const scheduledDate = node.Scheduled__c?.value
@@ -181,8 +209,8 @@ function transformMaintenanceRequest(node: any): MaintenanceRequest {
 		id: node.Id,
 		propertyAddress: node.Property__r?.Address__c?.value || "Unknown Address",
 		issueType: node.Type__c?.value || "General",
-		priority: node.Priority__c?.value?.toLowerCase() || "medium",
-		status: node.Status__c?.value?.toLowerCase() || "new",
+		priority: mapPriority(node.Priority__c?.value),
+		status: node.Status__c?.value || "New",
 		assignedWorker: undefined,
 		scheduledDateTime: scheduledDate,
 		description: node.Description__c?.value || "",
@@ -220,8 +248,8 @@ function transformMaintenanceTaskFull(node: any): MaintenanceRequest {
 		id: node.Id,
 		propertyAddress: node.Property__r?.Address__c?.value || "Unknown Address",
 		issueType: node.Type__c?.value || "General",
-		priority: node.Priority__c?.value?.toLowerCase() || "medium",
-		status: node.Status__c?.value?.toLowerCase().replace(" ", "_") || "new",
+		priority: mapPriority(node.Priority__c?.value),
+		status: node.Status__c?.value || "New",
 		assignedWorker: assignedWorkerName,
 		scheduledDateTime: scheduledDate?.toLocaleString(),
 		description: node.Description__c?.value || "",
@@ -233,3 +261,32 @@ function transformMaintenanceTaskFull(node: any): MaintenanceRequest {
 		formattedDate,
 	};
 }
+
+// Update maintenance request status
+export async function updateMaintenanceStatus(requestId: string, status: string): Promise<boolean> {
+	const variables: UpdateMaintenanceStatusMutationVariables = {
+		input: {
+			Id: requestId,
+			Maintenance_Request__c: {
+				Status__c: status,
+			},
+		},
+	};
+	try {
+		const data = await getDataSDK();
+		const result = await data.graphql?.<
+			UpdateMaintenanceStatusMutation,
+			UpdateMaintenanceStatusMutationVariables
+		>(UPDATE_MAINTENANCE_STATUS, variables);
+
+		if (result?.errors?.length) {
+			const errorMessages = result.errors.map((e) => e.message).join("; ");
+			throw new Error(`GraphQL Error: ${errorMessages}`);
+		}
+
+		return !!result?.data?.uiapi?.Maintenance_Request__cUpdate?.success;
+	} catch (error) {
+		console.error("Error updating maintenance status:", error);
+		return false;
+	}
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/api/properties.ts

@@ -1,6 +1,5 @@
-import { getDataSDK } from "@salesforce/sdk-data";
+import { getDataSDK, gql } from "@salesforce/sdk-data";
 import type { Property } from "../lib/types.js";
-import { gql } from "./utils.js";
 import type {
 	GetPropertiesQueryVariables,
 	GetPropertiesQuery,

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/appLayout.tsx

@@ -1,6 +1,7 @@
 import { Outlet } from "react-router";
 import { TopBar } from "./components/TopBar.js";
 import { VerticalNav } from "./components/VerticalNav.js";
+import { AgentforceConversationClient } from "./components/AgentforceConversationClient";
 
 export default function AppLayout() {
 	return (
@@ -18,6 +19,9 @@ export default function AppLayout() {
 					<Outlet />
 				</main>
 			</div>
+
+			{/* Agentforce Conversation Client */}
+			<AgentforceConversationClient />
 		</div>
 	);
 }

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/AgentforceConversationClient.tsx

@@ -0,0 +1,127 @@
+/**
+ * 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 { useEffect } from "react";
+import type {
+	ResolvedEmbedOptions,
+	AgentforceConversationClientProps,
+} from "../types/conversation";
+
+const GLOBAL_HOST_ID = "agentforce-conversation-client-global-host";
+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({
+	agentforceClientConfig,
+	salesforceOrigin,
+	frontdoorUrl,
+}: AgentforceConversationClientProps) {
+	useEffect(() => {
+		const singleton = getSingleton();
+		if (singleton.initialized || singleton.initPromise) {
+			return;
+		}
+
+		const initialize = (options: ResolvedEmbedOptions) => {
+			// If already initialized while this flow was in progress, no-op.
+			if (singleton.initialized) {
+				return;
+			}
+			const existingEmbed = document.querySelector('lightning-out-application[data-lo="acc"]');
+			if (existingEmbed) {
+				singleton.initialized = true;
+				return;
+			}
+			const host = getOrCreateGlobalHost();
+
+			embedAgentforceClient({
+				container: host,
+				salesforceOrigin: salesforceOrigin ?? options.salesforceOrigin,
+				frontdoorUrl: frontdoorUrl ?? options.frontdoorUrl,
+				agentforceClientConfig: agentforceClientConfig,
+			});
+			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, agentforceClientConfig]);
+
+	return null;
+}
+
+export default AgentforceConversationClient;

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/ApplicationDetailsModal.tsx

@@ -0,0 +1,150 @@
+import React, { useState } from "react";
+import { X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { Application } from "../lib/types.js";
+
+interface ApplicationDetailsModalProps {
+	application: Application;
+	isOpen: boolean;
+	onClose: () => void;
+	onSave: (applicationId: string, status: string) => Promise<void>;
+}
+
+export const ApplicationDetailsModal: React.FC<ApplicationDetailsModalProps> = ({
+	application,
+	isOpen,
+	onClose,
+	onSave,
+}) => {
+	const [selectedStatus, setSelectedStatus] = useState(application.status);
+	const [isSaving, setIsSaving] = useState(false);
+
+	// Determine if status is editable
+	const isStatusEditable =
+		application.status.toLowerCase() !== "approved" &&
+		application.status.toLowerCase() !== "rejected";
+
+	// Common status options
+	const statusOptions = ["Submitted", "Background Check", "Under Review", "Approved", "Rejected"];
+
+	const handleSave = async () => {
+		if (!isStatusEditable) return;
+
+		setIsSaving(true);
+		try {
+			await onSave(application.id, selectedStatus);
+			onClose();
+		} catch (error) {
+			console.error("Error saving status:", error);
+		} finally {
+			setIsSaving(false);
+		}
+	};
+
+	if (!isOpen) return null;
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			{/* Backdrop */}
+			<div className="fixed inset-0 bg-black bg-opacity-50" onClick={onClose} />
+
+			{/* Modal */}
+			<div className="relative bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
+				{/* Header */}
+				<div className="flex items-center justify-between p-6 border-b border-gray-200">
+					<h2 className="text-xl font-semibold text-gray-900">Application Details</h2>
+					<button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
+						<X className="w-6 h-6" />
+					</button>
+				</div>
+
+				{/* Content */}
+				<div className="p-6 space-y-6">
+					{/* Applicant Info */}
+					<div>
+						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+							Applicant
+						</h3>
+						<p className="text-lg font-medium text-gray-900">{application.applicantName}</p>
+					</div>
+
+					{/* Property Info */}
+					<div>
+						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+							Property
+						</h3>
+						<p className="text-base text-gray-900">
+							{application.propertyName && (
+								<span className="font-medium">{application.propertyName}</span>
+							)}
+						</p>
+						<p className="text-sm text-gray-600">{application.propertyAddress}</p>
+					</div>
+
+					{/* Employment Info */}
+					{application.employment && (
+						<div>
+							<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+								Employment
+							</h3>
+							<p className="text-sm text-gray-700 whitespace-pre-wrap">{application.employment}</p>
+						</div>
+					)}
+
+					{/* References */}
+					{application.references && (
+						<div>
+							<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+								References
+							</h3>
+							<p className="text-sm text-gray-700 whitespace-pre-wrap">{application.references}</p>
+						</div>
+					)}
+
+					{/* Status */}
+					<div>
+						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
+							Status
+						</h3>
+						{isStatusEditable ? (
+							<select
+								value={selectedStatus}
+								onChange={(e) => setSelectedStatus(e.target.value)}
+								className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+							>
+								{statusOptions.map((status) => (
+									<option key={status} value={status}>
+										{status}
+									</option>
+								))}
+							</select>
+						) : (
+							<div className="flex items-center">
+								<span className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md font-medium">
+									{application.status}
+								</span>
+								<span className="ml-3 text-sm text-gray-500">(Cannot be modified)</span>
+							</div>
+						)}
+					</div>
+				</div>
+
+				{/* Footer */}
+				<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200">
+					<Button variant="outline" onClick={onClose} disabled={isSaving}>
+						Close
+					</Button>
+					{isStatusEditable && (
+						<Button
+							onClick={handleSave}
+							disabled={isSaving || selectedStatus === application.status}
+							className="bg-purple-600 hover:bg-purple-700"
+						>
+							{isSaving ? "Saving..." : "Save Changes"}
+						</Button>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};