@salesforce/ui-bundle-template-app-react-template-b2e 1.117.2

package/dist/force-app/main/default/uiBundles/reactinternalapp/src/features/object-search/utils/sortUtils.ts

@@ -0,0 +1,38 @@
+import { ResultOrder, NullOrder } from "../../../api/graphql-operations-types";
+
+export type SortFieldConfig<TFieldName extends string = string> = {
+	field: TFieldName;
+	label: string;
+};
+
+export type SortState<TFieldName extends string = string> = {
+	field: TFieldName;
+	direction: "ASC" | "DESC";
+};
+
+/**
+ * Converts a {@link SortState} into a GraphQL order-by object.
+ *
+ * @typeParam TOrderBy - The GraphQL order-by input type (e.g. `AccountOrderByInput`).
+ * @param sort - The current sort state from the UI, or `null` if no sort is applied.
+ * @returns An order-by object for the GraphQL query's `orderBy` variable, or
+ *          `undefined` if no sort is active (which uses the API's default ordering).
+ *
+ * @example
+ * ```ts
+ * const orderBy = buildOrderBy<AccountOrderByInput>({
+ *   field: "Name",
+ *   direction: "ASC",
+ * });
+ * // orderBy => { Name: { order: ResultOrder.Asc, nulls: NullOrder.Last } }
+ * ```
+ */
+export function buildOrderBy<TOrderBy>(sort: SortState | null): TOrderBy | undefined {
+	if (!sort) return undefined;
+	return {
+		[sort.field]: {
+			order: sort.direction === "ASC" ? ResultOrder.Asc : ResultOrder.Desc,
+			nulls: NullOrder.Last,
+		},
+	} as TOrderBy;
+}

package/dist/force-app/main/default/uiBundles/reactinternalapp/src/index.ts

@@ -0,0 +1,6 @@
+/**
+ * feature-react-agentforce-conversation-client – ACC Conversation Client
+ */
+
+export { AgentforceConversationClient } from "./components/AgentforceConversationClient";
+export type { AgentforceConversationClientProps, ResolvedEmbedOptions } from "./types/conversation";

package/dist/force-app/main/default/uiBundles/reactinternalapp/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/dist/force-app/main/default/uiBundles/reactinternalapp/src/navigationMenu.tsx

@@ -0,0 +1,80 @@
+import { Link, useLocation } from 'react-router';
+import { getAllRoutes } from './router-utils';
+import { useState } from 'react';
+
+export default function NavigationMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+
+  const isActive = (path: string) => location.pathname === path;
+
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  const navigationRoutes: { path: string; label: string }[] = getAllRoutes()
+    .filter(
+      route =>
+        route.handle?.showInNavigation === true &&
+        route.fullPath !== undefined &&
+        route.handle?.label !== undefined
+    )
+    .map(
+      route =>
+        ({
+          path: route.fullPath,
+          label: route.handle?.label,
+        }) as { path: string; label: string }
+    );
+
+  return (
+    <nav className="bg-white border-b border-gray-200">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <Link to="/" className="text-xl font-semibold text-gray-900">
+            React App
+          </Link>
+          <button
+            onClick={toggleMenu}
+            className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            aria-label="Toggle menu"
+          >
+            <div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? 'rotate-45 translate-y-2' : ''
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${isOpen ? 'opacity-0' : ''}`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? '-rotate-45 -translate-y-2' : ''
+                }`}
+              />
+            </div>
+          </button>
+        </div>
+        {isOpen && (
+          <div className="pb-4">
+            <div className="flex flex-col space-y-2">
+              {navigationRoutes.map(item => (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  onClick={() => setIsOpen(false)}
+                  className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                    isActive(item.path)
+                      ? 'bg-blue-100 text-blue-700'
+                      : 'text-gray-700 hover:bg-gray-100'
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}

package/dist/force-app/main/default/uiBundles/reactinternalapp/src/pages/AccountObjectDetailPage.tsx

@@ -0,0 +1,361 @@
+import { useState } from "react";
+import { useParams, useNavigate } from "react-router";
+import { createDataSDK } from "@salesforce/sdk-data";
+import { AlertCircle, ChevronDown, ChevronRight, FileQuestion } from "lucide-react";
+import GET_ACCOUNT_DETAIL from "../api/account/query/getAccountDetail.graphql?raw";
+import type {
+	GetAccountDetailQuery,
+	GetAccountDetailQueryVariables,
+} from "../api/graphql-operations-types";
+import { Alert, AlertTitle, AlertDescription } from "../components/ui/alert";
+import { Button } from "../components/ui/button";
+import { Card, CardContent } from "../components/ui/card";
+import {
+	fieldValue,
+	getAddressFieldLines,
+	formatDateTimeField,
+} from "../features/object-search/utils/fieldUtils";
+import {
+	Collapsible,
+	CollapsibleTrigger,
+	CollapsibleContent,
+} from "../components/ui/collapsible";
+import { Separator } from "../components/ui/separator";
+import { Skeleton } from "../components/ui/skeleton";
+import { useCachedAsyncData } from "../features/object-search/hooks/useCachedAsyncData";
+import { ObjectBreadcrumb } from "../features/object-search/components/ObjectBreadcrumb";
+
+type AccountNode = NonNullable<
+	NonNullable<
+		NonNullable<NonNullable<GetAccountDetailQuery["uiapi"]["query"]["Account"]>["edges"]>[number]
+	>["node"]
+>;
+
+async function fetchAccountDetail(recordId: string): Promise<AccountNode | null | undefined> {
+	const data = await createDataSDK();
+	const response = await data.graphql?.<GetAccountDetailQuery, GetAccountDetailQueryVariables>(
+		GET_ACCOUNT_DETAIL,
+		{ id: recordId },
+	);
+
+	if (response?.errors?.length) {
+		throw new Error(response.errors.map((e) => e.message).join("; "));
+	}
+
+	return response?.data?.uiapi?.query?.Account?.edges?.[0]?.node;
+}
+
+export default function AccountObjectDetail() {
+	const { recordId } = useParams();
+	const navigate = useNavigate();
+
+	const {
+		data: account,
+		loading,
+		error,
+	} = useCachedAsyncData(() => fetchAccountDetail(recordId!), [recordId], {
+		key: `account:${recordId}`,
+	});
+
+	return (
+		<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+			<ObjectBreadcrumb
+				listPath="/accounts"
+				listLabel="Accounts"
+				loading={loading}
+				recordName={
+					account
+						? (fieldValue(account.Name) ?? "")
+						: error
+							? "Error"
+							: loading
+								? undefined
+								: "Not Found"
+				}
+			/>
+
+			{/* Loading state */}
+			{loading && <AccountDetailSkeleton />}
+
+			{/* Error state */}
+			{error && <AccountDetailError onBack={() => navigate(-1)} />}
+
+			{/* Not found state */}
+			{!loading && !error && !account && <AccountDetailNotFound onBack={() => navigate(-1)} />}
+
+			{/* Content */}
+			{account && <AccountDetailContent account={account} />}
+		</div>
+	);
+}
+
+function AccountDetailContent({ account }: { account: AccountNode }) {
+	const billingAddress = getAddressFieldLines({
+		street: fieldValue(account.BillingStreet),
+		city: fieldValue(account.BillingCity),
+		state: fieldValue(account.BillingState),
+		postalCode: fieldValue(account.BillingPostalCode),
+		country: fieldValue(account.BillingCountry),
+	});
+
+	const shippingAddress = getAddressFieldLines({
+		street: fieldValue(account.ShippingStreet),
+		city: fieldValue(account.ShippingCity),
+		state: fieldValue(account.ShippingState),
+		postalCode: fieldValue(account.ShippingPostalCode),
+		country: fieldValue(account.ShippingCountry),
+	});
+
+	const dateTimeOptions = { dateStyle: "medium", timeStyle: "short" } as const;
+	const createdDate = formatDateTimeField(
+		fieldValue(account.CreatedDate),
+		undefined,
+		dateTimeOptions,
+	);
+	const lastModifiedDate = formatDateTimeField(
+		fieldValue(account.LastModifiedDate),
+		undefined,
+		dateTimeOptions,
+	);
+
+	return (
+		<>
+			<h1 className="text-2xl font-bold mb-4">Account: {fieldValue(account.Name)}</h1>
+
+			<Card>
+				<CardContent className="space-y-8 pt-6">
+					{/* Top section */}
+					<div>
+						<div className="space-y-4">
+							<FieldRow>
+								<FieldItem label="Account Owner">{fieldValue(account.Owner?.Name)}</FieldItem>
+								<FieldItem label="Phone">
+									<TelephoneField value={fieldValue(account.Phone)} />
+								</FieldItem>
+							</FieldRow>
+							<FieldRow>
+								<FieldItem label="Account Name">{fieldValue(account.Name)}</FieldItem>
+								<FieldItem label="Fax">
+									<TelephoneField value={fieldValue(account.Fax)} />
+								</FieldItem>
+							</FieldRow>
+							<FieldRow>
+								<FieldItem label="Parent Account">{fieldValue(account.Parent?.Name)}</FieldItem>
+								<FieldItem label="Website">{fieldValue(account.Website)}</FieldItem>
+							</FieldRow>
+						</div>
+					</div>
+
+					<Separator />
+
+					{/* Additional Information */}
+					<Section title="Additional Information">
+						<FieldRow>
+							<FieldItem label="Type">{fieldValue(account.Type)}</FieldItem>
+							<FieldItem label="Employees">{fieldValue(account.NumberOfEmployees)}</FieldItem>
+						</FieldRow>
+						<FieldRow>
+							<FieldItem label="Industry">{fieldValue(account.Industry)}</FieldItem>
+							<FieldItem label="Annual Revenue">{fieldValue(account.AnnualRevenue)}</FieldItem>
+						</FieldRow>
+						<FieldItem label="Description">{fieldValue(account.Description)}</FieldItem>
+					</Section>
+
+					<Separator />
+
+					{/* Address Information */}
+					<Section title="Address Information">
+						<FieldRow>
+							<FieldItem label="Billing Address">
+								{billingAddress ? billingAddress.map((line, i) => <div key={i}>{line}</div>) : null}
+							</FieldItem>
+							<FieldItem label="Shipping Address">
+								{shippingAddress
+									? shippingAddress.map((line, i) => <div key={i}>{line}</div>)
+									: null}
+							</FieldItem>
+						</FieldRow>
+					</Section>
+
+					<Separator />
+
+					{/* System Information */}
+					<Section title="System Information">
+						<FieldRow>
+							<FieldItem label="Created By">
+								{[fieldValue(account.CreatedBy?.Name), createdDate].filter(Boolean).join(" ") ||
+									null}
+							</FieldItem>
+							<FieldItem label="Last Modified By">
+								{[fieldValue(account.LastModifiedBy?.Name), lastModifiedDate]
+									.filter(Boolean)
+									.join(" ") || null}
+							</FieldItem>
+						</FieldRow>
+					</Section>
+				</CardContent>
+			</Card>
+		</>
+	);
+}
+
+function TelephoneField({ value }: { value?: string | null }) {
+	if (!value) return null;
+	return (
+		<a href={`tel:${value}`} className="underline">
+			{value}
+		</a>
+	);
+}
+
+function FieldItem({ label, children }: { label: string; children: React.ReactNode }) {
+	return (
+		<div>
+			<dt className="text-sm text-muted-foreground">{label}</dt>
+			<dd className="mt-0.5">{children ?? "—"}</dd>
+		</div>
+	);
+}
+
+function FieldRow({ children }: { children: React.ReactNode }) {
+	return <div className="grid grid-cols-2 gap-x-8 gap-y-4">{children}</div>;
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+	const [open, setOpen] = useState(true);
+	return (
+		<Collapsible open={open} onOpenChange={setOpen}>
+			<CollapsibleTrigger className="flex items-center gap-2 cursor-pointer text-lg font-semibold py-2">
+				{open ? <ChevronDown className="size-5" /> : <ChevronRight className="size-5" />}
+				{title}
+			</CollapsibleTrigger>
+			<CollapsibleContent>
+				<div className="mt-2 space-y-4">{children}</div>
+			</CollapsibleContent>
+		</Collapsible>
+	);
+}
+
+function AccountDetailError({ onBack }: { onBack: () => void }) {
+	return (
+		<>
+			<Alert variant="destructive" role="alert">
+				<AlertCircle />
+				<AlertTitle>
+					<h2>Failed to load account</h2>
+				</AlertTitle>
+				<AlertDescription>
+					Something went wrong while loading this account. Please try again later.
+				</AlertDescription>
+			</Alert>
+			<div className="mt-4 flex gap-3">
+				<Button variant="outline" onClick={onBack}>
+					← Back
+				</Button>
+				<Button variant="outline" onClick={() => window.location.reload()}>
+					Retry
+				</Button>
+			</div>
+		</>
+	);
+}
+
+function AccountDetailNotFound({ onBack }: { onBack: () => void }) {
+	return (
+		<Card>
+			<CardContent className="flex flex-col items-center justify-center py-16 text-center">
+				<FileQuestion className="size-12 text-muted-foreground mb-4" />
+				<h2 className="text-lg font-semibold mb-1">Account not found</h2>
+				<p className="text-sm text-muted-foreground mb-6">
+					The account you're looking for doesn't exist or may have been deleted.
+				</p>
+				<Button variant="outline" onClick={onBack}>
+					← Go back
+				</Button>
+			</CardContent>
+		</Card>
+	);
+}
+
+function AccountDetailSkeleton() {
+	return (
+		<>
+			<Skeleton className="h-8 w-56 mb-4" />
+
+			<Card>
+				<CardContent className="space-y-8 pt-6">
+					{/* Top section: field rows */}
+					<div>
+						<div className="space-y-4">
+							<SkeletonFieldRow />
+							<SkeletonFieldRow />
+							<SkeletonFieldRow />
+						</div>
+					</div>
+
+					<Separator />
+
+					{/* Additional Information */}
+					<SkeletonSection />
+
+					<Separator />
+
+					{/* Address Information */}
+					<div className="space-y-4">
+						<Skeleton className="h-7 w-48 py-2" />
+						<div className="grid grid-cols-2 gap-x-8 gap-y-4">
+							<div>
+								<Skeleton className="h-4 w-28 mb-1.5" />
+								<Skeleton className="h-5 w-44 mb-1" />
+								<Skeleton className="h-5 w-36 mb-1" />
+								<Skeleton className="h-5 w-28" />
+							</div>
+							<div>
+								<Skeleton className="h-4 w-32 mb-1.5" />
+								<Skeleton className="h-5 w-44 mb-1" />
+								<Skeleton className="h-5 w-36 mb-1" />
+								<Skeleton className="h-5 w-28" />
+							</div>
+						</div>
+					</div>
+
+					<Separator />
+
+					{/* System Information */}
+					<div className="space-y-4">
+						<Skeleton className="h-7 w-48 py-2" />
+						<SkeletonFieldRow />
+					</div>
+				</CardContent>
+			</Card>
+		</>
+	);
+}
+
+function SkeletonField() {
+	return (
+		<div>
+			<Skeleton className="h-4 w-24 mb-1.5" />
+			<Skeleton className="h-5 w-40" />
+		</div>
+	);
+}
+
+function SkeletonFieldRow() {
+	return (
+		<div className="grid grid-cols-2 gap-x-8 gap-y-4">
+			<SkeletonField />
+			<SkeletonField />
+		</div>
+	);
+}
+
+function SkeletonSection() {
+	return (
+		<div className="space-y-4">
+			<Skeleton className="h-7 w-48 py-2" />
+			<SkeletonFieldRow />
+			<SkeletonFieldRow />
+		</div>
+	);
+}