@salesforce/webapp-template-app-react-sample-b2x-experimental 1.112.7 → 1.112.9

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/api/graphqlClient.ts

@@ -2,21 +2,24 @@
  * 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";
+import { createDataSDK } from '@salesforce/sdk-data';
 
-export async function executeGraphQL<TData, TVariables = Record<string, unknown>>(
-	query: string | { kind: string; definitions: unknown[] },
-	variables?: TVariables,
+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>(
-		query as unknown as string,
-		variables as Record<string, unknown>,
-	);
-	if (response?.errors?.length) {
-		const msg = response.errors.map((e) => e.message).join("; ");
-		throw new Error(`GraphQL Error: ${msg}`);
-	}
-	return (response?.data ?? {}) as 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/dist/force-app/main/default/webapplications/appreactsampleb2x/src/api/{propertyListingGraphQL.ts → properties/propertyListingGraphQL.ts}

@@ -13,7 +13,7 @@ import type {
 	SearchResultRecord,
 	SearchResultRecordData,
 	FieldValue,
-} from "@/features/global-search/types/search/searchResults.js";
+} from "@/types/searchResults.js";
 
 const OBJECT_API_NAME = "Property_Listing__c";
 

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

@@ -1,13 +1,15 @@
 import { useState } from "react";
 import { Outlet } from "react-router";
-import { TopBar } from "@/components/TopBar";
-import { NavMenu } from "@/components/NavMenu";
+import { TopBar } from "@/components/layout/TopBar";
+import { NavMenu } from "@/components/layout/VerticalNav";
+import { Toaster } from "@/components/ui/sonner";
 
 export default function AppLayout() {
 	const [isNavOpen, setIsNavOpen] = useState(false);
 
 	return (
 		<div className="flex flex-col">
+			<Toaster />
 			<TopBar onMenuClick={() => setIsNavOpen(true)} />
 
 			<div className="flex flex-1 overflow-hidden">

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/{TopBar.tsx → layout/TopBar.tsx}

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { ChevronDown, Menu, UserPen, LogOut, User, Loader2 } from "lucide-react";
 import { Link } from "react-router";
-import { useAuth } from "../features/authentication/context/AuthContext";
-import { ROUTES } from "../features/authentication/authenticationConfig";
+import { useAuth } from "@/features/authentication/context/AuthContext";
+import { ROUTES } from "@/features/authentication/authenticationConfig";
 import zenLogo from "@/assets/icons/zen-logo.svg";
 
 export interface TopBarProps {

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/{MaintenanceRequestList.tsx → maintenanceRequests/MaintenanceRequestList.tsx}

@@ -1,7 +1,7 @@
 import { useState } from "react";
-import type { MaintenanceRequestSummary } from "@/api/maintenanceRequestApi";
-import MaintenanceRequestListItem from "@/components/MaintenanceRequestListItem";
-import MaintenanceDetailsModal from "@/components/MaintenanceDetailsModal";
+import type { MaintenanceRequestSummary } from "@/api/maintenanceRequests/maintenanceRequestApi";
+import MaintenanceRequestListItem from "@/components/maintenanceRequests/MaintenanceRequestListItem";
+import MaintenanceSummaryDetailsModal from "@/components/maintenanceRequests/MaintenanceSummaryDetailsModal";
 import { SkeletonListRows } from "@/components/SkeletonPrimitives";
 
 interface MaintenanceRequestListProps {
@@ -22,7 +22,7 @@ export default function MaintenanceRequestList({
 	return (
 		<>
 			{selectedRequest && (
-				<MaintenanceDetailsModal
+				<MaintenanceSummaryDetailsModal
 					request={selectedRequest}
 					onClose={() => setSelectedRequest(null)}
 				/>

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/{MaintenanceRequestListItem.tsx → maintenanceRequests/MaintenanceRequestListItem.tsx}

@@ -2,9 +2,9 @@
  * Single maintenance request row: icon (teal) | Type & address + title | tenant (gray circle) [| status].
  */
 import { useCallback } from "react";
-import type { MaintenanceRequestSummary } from "@/api/maintenanceRequestApi";
-import { MaintenanceRequestIcon } from "@/components/MaintenanceRequestIcon";
-import { StatusBadge } from "@/components/StatusBadge";
+import type { MaintenanceRequestSummary } from "@/api/maintenanceRequests/maintenanceRequestApi";
+import { MaintenanceRequestIcon } from "@/components/maintenanceRequests/MaintenanceRequestIcon";
+import { StatusBadge } from "@/components/maintenanceRequests/StatusBadge";
 
 export interface MaintenanceRequestListItemProps {
 	request: MaintenanceRequestSummary;

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/maintenanceRequests/MaintenanceSummaryDetailsModal.tsx

@@ -0,0 +1,87 @@
+/**
+ * Read-only maintenance details for B2C Maintenance page (summary rows from maintenanceRequestApi).
+ */
+import { useEffect } from "react";
+import { X } from "lucide-react";
+import { StatusBadge } from "@/components/maintenanceRequests/StatusBadge";
+import type { MaintenanceRequestSummary } from "@/api/maintenanceRequests/maintenanceRequestApi";
+
+export interface MaintenanceSummaryDetailsModalProps {
+	request: MaintenanceRequestSummary;
+	onClose: () => void;
+}
+
+function formatDate(value: string | null): string {
+	if (!value?.trim()) return "—";
+	try {
+		const d = new Date(value);
+		return d.toLocaleDateString("en-US", {
+			month: "short",
+			day: "numeric",
+			year: "numeric",
+			hour: "numeric",
+			minute: "2-digit",
+			hour12: true,
+		});
+	} catch {
+		return value;
+	}
+}
+
+export default function MaintenanceSummaryDetailsModal({
+	request,
+	onClose,
+}: MaintenanceSummaryDetailsModalProps) {
+	useEffect(() => {
+		const handleEscape = (e: KeyboardEvent) => {
+			if (e.key === "Escape") onClose();
+		};
+		document.addEventListener("keydown", handleEscape);
+		return () => document.removeEventListener("keydown", handleEscape);
+	}, [onClose]);
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+			<div className="fixed inset-0 bg-black/50" onClick={onClose} aria-hidden />
+			<div
+				role="dialog"
+				aria-modal
+				className="relative max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-lg bg-white shadow-xl"
+			>
+				<div className="flex items-center justify-between border-b p-4">
+					<h2 className="text-lg font-semibold">{request.title ?? request.name ?? "Request"}</h2>
+					<button type="button" onClick={onClose} className="text-gray-500 hover:text-gray-800">
+						<X className="h-5 w-5" />
+					</button>
+				</div>
+				<div className="space-y-3 p-4 text-sm">
+					{request.description && <p className="text-gray-700">{request.description}</p>}
+					<div className="flex flex-wrap gap-2">
+						{request.type && (
+							<span className="rounded bg-gray-100 px-2 py-0.5">{request.type}</span>
+						)}
+						{request.priority && (
+							<span className="rounded bg-gray-100 px-2 py-0.5">{request.priority}</span>
+						)}
+						{request.status && <StatusBadge status={request.status} />}
+					</div>
+					{request.propertyAddress && (
+						<p>
+							<span className="font-medium">Property:</span> {request.propertyAddress}
+						</p>
+					)}
+					{request.tenantName && (
+						<p>
+							<span className="font-medium">Tenant:</span> {request.tenantName}
+						</p>
+					)}
+					{request.dateRequested && (
+						<p>
+							<span className="font-medium">Requested:</span> {formatDate(request.dateRequested)}
+						</p>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/{PropertyListingCard.tsx → properties/PropertyListingCard.tsx}

@@ -6,7 +6,7 @@ import { useNavigate } from "react-router";
 import { useCallback, type MouseEvent } from "react";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
-import type { SearchResultRecordData } from "@/features/global-search/types/search/searchResults.js";
+import type { SearchResultRecordData } from "@/types/searchResults.js";
 
 function fieldDisplay(
 	fields: Record<string, { value?: unknown; displayValue?: string | null }> | undefined,

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/{features/global-search/components/search/SearchPagination.tsx → components/properties/PropertyListingSearchPagination.tsx}

@@ -1,39 +1,35 @@
 /**
- * SearchPagination Component
- *
- * Displays pagination controls for search results.
- * Previous/Next are disabled using hasPreviousPage/hasNextPage from the API so no request is made when there is no page.
- *
- * @remarks
- * - Layout: page size selector on the left, prev/page/next controls on the right (corners).
- * - Previous disabled when !hasPreviousPage (cursor stack enables prev when pageIndex > 0).
- * - Next disabled when !hasNextPage or nextPageToken is null.
+ * Pagination controls for Property_Listing__c consumer search (token-based).
+ * Replaces feature-react-global-search SearchPagination without pulling in that feature.
  */
-import { Button } from "../../../../components/ui/button";
+import { Button } from "@/components/ui/button";
 import {
 	Select,
 	SelectContent,
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
-} from "../../../../components/ui/select";
-import { Label } from "../../../../components/ui/label";
-import { PAGE_SIZE_OPTIONS, getValidPageSize, isValidPageSize } from "../../utils/paginationUtils";
+} from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import {
+	PAGE_SIZE_OPTIONS,
+	getValidPageSize,
+	isValidPageSize,
+} from "@/utils/propertyListingPaginationUtils";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
-interface SearchPaginationProps {
+interface PropertyListingSearchPaginationProps {
 	currentPageToken: string;
 	nextPageToken: string | null;
 	previousPageToken: string | null;
 	hasNextPage?: boolean;
 	hasPreviousPage?: boolean;
 	pageSize: number;
-	/** direction: 'prev' | 'next' | 'first'. When 'first' (e.g. page size change), parent typically resets pagination; token may be '' for prev when going to page 0. */
 	onPageChange: (newPageToken: string, direction?: "next" | "prev" | "first") => void;
 	onPageSizeChange: (newPageSize: number) => void;
 }
 
-export default function SearchPagination({
+export default function PropertyListingSearchPagination({
 	currentPageToken,
 	nextPageToken,
 	previousPageToken,
@@ -42,7 +38,7 @@ export default function SearchPagination({
 	pageSize,
 	onPageChange,
 	onPageSizeChange,
-}: SearchPaginationProps) {
+}: PropertyListingSearchPaginationProps) {
 	const validPageSize = getValidPageSize(pageSize);
 
 	const currentPageTokenNum = parseInt(currentPageToken, 10) || 0;
@@ -73,23 +69,19 @@ export default function SearchPagination({
 
 	return (
 		<nav
-			className="w-full flex flex-row flex-wrap items-center justify-between gap-4 py-2"
+			className="flex w-full flex-row flex-wrap items-center justify-between gap-4 py-2"
 			aria-label="Search results pagination"
 		>
 			<div
-				className="flex items-center gap-2 shrink-0"
+				className="flex shrink-0 items-center gap-2"
 				role="group"
 				aria-label="Page size selector"
 			>
-				<Label htmlFor="page-size-select" className="text-sm font-normal whitespace-nowrap">
+				<Label htmlFor="page-size-select" className="whitespace-nowrap text-sm font-normal">
 					Results per page:
 				</Label>
 				<Select value={validPageSize.toString()} onValueChange={handlePageSizeChange}>
-					<SelectTrigger
-						id="page-size-select"
-						className="w-[70px]"
-						aria-label="Select number of results per page"
-					>
+					<SelectTrigger id="page-size-select" className="w-[70px]" aria-label="Results per page">
 						<SelectValue />
 					</SelectTrigger>
 					<SelectContent>
@@ -102,7 +94,7 @@ export default function SearchPagination({
 				</Select>
 			</div>
 
-			<div className="flex items-center gap-1 shrink-0" role="group" aria-label="Page navigation">
+			<div className="flex shrink-0 items-center gap-1" role="group" aria-label="Page navigation">
 				<Button
 					type="button"
 					variant="outline"
@@ -119,9 +111,9 @@ export default function SearchPagination({
 					Previous
 				</Button>
 				<span
-					className="min-w-[4rem] text-center text-sm text-muted-foreground px-2"
-					aria-label={`Page ${currentPage}, current page`}
+					className="min-w-[4rem] px-2 text-center text-sm text-muted-foreground"
 					aria-current="page"
+					aria-label={`Page ${currentPage}, current page`}
 				>
 					Page {currentPage}
 				</span>

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/constants/propertyListing.ts

@@ -0,0 +1,4 @@
+/**
+ * Defaults for consumer property listing search (map + list), independent of object-search admin pages.
+ */
+export const DEFAULT_PAGE_SIZE = 20;

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/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/dist/force-app/main/default/webapplications/appreactsampleb2x/src/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/dist/force-app/main/default/webapplications/appreactsampleb2x/src/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
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/object-search/__examples__/api/query/getAccountDetail.graphql

@@ -0,0 +1,121 @@
+query GetAccountDetail($id: ID!) {
+	uiapi {
+		query {
+			Account(where: { Id: { eq: $id } }) {
+				edges {
+					node {
+						Id
+						Name @optional {
+							value
+							displayValue
+						}
+						Owner @optional {
+							Name @optional {
+								value
+								displayValue
+							}
+						}
+						Phone @optional {
+							value
+							displayValue
+						}
+						Fax @optional {
+							value
+							displayValue
+						}
+						Parent @optional {
+							Name @optional {
+								value
+								displayValue
+							}
+						}
+						Website @optional {
+							value
+							displayValue
+						}
+						Type @optional {
+							value
+							displayValue
+						}
+						NumberOfEmployees @optional {
+							value
+							displayValue
+						}
+						Industry @optional {
+							value
+							displayValue
+						}
+						AnnualRevenue @optional {
+							value
+							displayValue
+						}
+						Description @optional {
+							value
+							displayValue
+						}
+						BillingStreet @optional {
+							value
+							displayValue
+						}
+						BillingCity @optional {
+							value
+							displayValue
+						}
+						BillingState @optional {
+							value
+							displayValue
+						}
+						BillingPostalCode @optional {
+							value
+							displayValue
+						}
+						BillingCountry @optional {
+							value
+							displayValue
+						}
+						ShippingStreet @optional {
+							value
+							displayValue
+						}
+						ShippingCity @optional {
+							value
+							displayValue
+						}
+						ShippingState @optional {
+							value
+							displayValue
+						}
+						ShippingPostalCode @optional {
+							value
+							displayValue
+						}
+						ShippingCountry @optional {
+							value
+							displayValue
+						}
+						CreatedBy @optional {
+							Name @optional {
+								value
+								displayValue
+							}
+						}
+						CreatedDate @optional {
+							value
+							displayValue
+						}
+						LastModifiedBy @optional {
+							Name @optional {
+								value
+								displayValue
+							}
+						}
+						LastModifiedDate @optional {
+							value
+							displayValue
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/object-search/__examples__/api/query/searchAccounts.graphql

@@ -0,0 +1,51 @@
+query SearchAccounts(
+	$first: Int
+	$after: String
+	$where: Account_Filter
+	$orderBy: Account_OrderBy
+) {
+	uiapi {
+		query {
+			Account(first: $first, after: $after, where: $where, orderBy: $orderBy) {
+				edges {
+					node {
+						Id
+						Name @optional {
+							value
+							displayValue
+						}
+						Industry @optional {
+							value
+							displayValue
+						}
+						Type @optional {
+							value
+							displayValue
+						}
+						Phone @optional {
+							value
+							displayValue
+						}
+						Owner @optional {
+							Name @optional {
+								value
+								displayValue
+							}
+						}
+						AnnualRevenue @optional {
+							value
+							displayValue
+						}
+					}
+				}
+				pageInfo {
+					hasNextPage
+					hasPreviousPage
+					endCursor
+					startCursor
+				}
+				totalCount
+			}
+		}
+	}
+}