@salesforce/webapp-template-app-react-sample-b2x-experimental 1.68.0 → 1.69.0

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

@@ -31,11 +31,23 @@ export default function PropertyListings() {
 					<Input
 						type="text"
 						defaultValue="San Francisco, CA"
-						className="min-w-[200px] flex-1 flex-[1_1_200px]"
+						className="min-w-[200px] flex-1 flex-[1_1_200px] rounded-xl"
 					/>
-					<Button variant="outline">Price</Button>
-					<Button variant="outline">Beds/Bath</Button>
-					<Button>All Filters</Button>
+					<Button
+						variant="outline"
+						className="cursor-pointer rounded-xl transition-colors duration-200"
+					>
+						Price
+					</Button>
+					<Button
+						variant="outline"
+						className="cursor-pointer rounded-xl transition-colors duration-200"
+					>
+						Beds/Bath
+					</Button>
+					<Button className="cursor-pointer rounded-xl transition-colors duration-200">
+						All Filters
+					</Button>
 				</div>
 				<h2 className="mb-1 text-lg font-semibold text-foreground">
 					2 Bedroom Apartments for Rent in San Francisco CA
@@ -43,13 +55,13 @@ export default function PropertyListings() {
 				<p className="mb-4 text-sm text-muted-foreground">1,181 Rentals Available</p>
 				<div className="space-y-4">
 					{listings.map((p) => (
-						<Card key={p.name}>
+						<Card key={p.name} className="rounded-2xl shadow-md">
 							<CardContent className="flex gap-4 p-4">
 								<Link
 									to={`/property/${p.id}`}
-									className="relative block size-[200px] shrink-0 rounded-xl bg-muted"
+									className="relative block size-[200px] shrink-0 cursor-pointer rounded-xl bg-muted transition-opacity duration-200 hover:opacity-95"
 								>
-									<span className="absolute left-2 top-2 rounded-md bg-primary px-2 py-1 text-xs text-primary-foreground">
+									<span className="absolute left-2 top-2 rounded-full bg-violet-600 px-2 py-0.5 text-xs font-medium text-white">
 										Virtual Tours
 									</span>
 								</Link>
@@ -57,7 +69,7 @@ export default function PropertyListings() {
 									<h3 className="mb-1 text-base font-semibold">
 										<Link
 											to={`/property/${p.id}`}
-											className="text-primary no-underline hover:underline"
+											className="cursor-pointer text-primary no-underline transition-colors duration-200 hover:underline"
 										>
 											{p.name}
 										</Link>
@@ -70,8 +82,12 @@ export default function PropertyListings() {
 										In Unit Washer & Dryer, Pets Allowed, Fitness Center
 									</p>
 									<p className="mb-2 text-sm text-primary">{p.phone}</p>
-									<Button asChild size="sm">
-										<Link to={`/property/${p.id}`}>Email Property</Link>
+									<Button
+										asChild
+										size="sm"
+										className="cursor-pointer rounded-xl transition-colors duration-200"
+									>
+										<Link to={`/application?listingId=${encodeURIComponent(p.id)}`}>Apply</Link>
 									</Button>
 								</div>
 							</CardContent>

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

@@ -0,0 +1,165 @@
+/**
+ * Property Search page – ZENLEASE-style layout.
+ * Map ~2/3 left, scrollable listings ~1/3 right; search/filter bar above.
+ */
+import { useState, useCallback, useMemo, useEffect } from "react";
+import { useSearchParams } from "react-router";
+import { DEFAULT_PAGE_SIZE } from "@/constants";
+import { usePropertyListingSearch } from "@/hooks/usePropertyListingSearch";
+import {
+	usePropertyPrimaryImages,
+	getPropertyIdFromRecord,
+} from "@/hooks/usePropertyPrimaryImages";
+import { usePropertyAddresses } from "@/hooks/usePropertyAddresses";
+import { usePropertyMapMarkers } from "@/hooks/usePropertyMapMarkers";
+import { Input } from "@/components/ui/input";
+import SearchPagination from "@/components/search/SearchPagination";
+import PropertyListingCard from "@/components/PropertyListingCard";
+import PropertyMap from "@/components/PropertyMap";
+import PropertySearchPlaceholder from "./PropertySearchPlaceholder";
+
+const MAP_CENTER_SF: [number, number] = [37.7749, -122.4194];
+
+export default function PropertySearch() {
+	const [searchParams] = useSearchParams();
+	const initialSearch = searchParams.get("search") ?? "";
+	const [searchQuery, setSearchQuery] = useState(initialSearch);
+	const [searchPageSize, setSearchPageSize] = useState(DEFAULT_PAGE_SIZE);
+	const [searchPageToken, setSearchPageToken] = useState("0");
+
+	// Sync from URL when navigating with ?search=... (e.g. from Home "Find Home")
+	useEffect(() => {
+		const q = searchParams.get("search") ?? "";
+		setSearchQuery(q);
+		setSearchPageToken("0");
+	}, [searchParams]);
+
+	const {
+		results,
+		nextPageToken,
+		previousPageToken,
+		currentPageToken,
+		resultsLoading,
+		resultsError,
+	} = usePropertyListingSearch(searchQuery, searchPageSize, searchPageToken);
+
+	const primaryImagesMap = usePropertyPrimaryImages(results);
+	const propertyAddressMap = usePropertyAddresses(results);
+	const { markers: mapMarkers } = usePropertyMapMarkers(results);
+	const apiUnavailable = Boolean(resultsError);
+
+	const validResults = useMemo(() => results.filter((r) => r?.record?.id), [results]);
+
+	const handlePageChange = useCallback((newPageToken: string) => {
+		setSearchPageToken(newPageToken);
+	}, []);
+
+	const handlePageSizeChange = useCallback((newPageSize: number) => {
+		setSearchPageSize(newPageSize);
+		setSearchPageToken("0");
+	}, []);
+
+	const handleSearchSubmit = useCallback(() => {
+		setSearchPageToken("0");
+	}, []);
+
+	return (
+		<div className="flex h-[calc(100vh-4rem)] min-h-[500px] flex-col">
+			{/* Search bar */}
+			<div className="flex shrink-0 flex-wrap items-center gap-2 border-b bg-background px-4 py-3">
+				<Input
+					type="text"
+					value={searchQuery}
+					onChange={(e) => setSearchQuery(e.target.value)}
+					onKeyDown={(e) => e.key === "Enter" && handleSearchSubmit()}
+					placeholder="Add area or search"
+					className="h-9 w-48 max-w-[200px]"
+					aria-label="Search property listings"
+				/>
+			</div>
+
+			{/* Main: map left (2/3), list right (1/3) */}
+			<div className="flex min-h-0 flex-1 flex-col lg:flex-row">
+				{/* Map – takes ~2/3 on desktop */}
+				<div className="h-64 shrink-0 lg:h-full lg:min-h-0 lg:w-2/3" aria-label="Map">
+					<PropertyMap
+						center={MAP_CENTER_SF}
+						zoom={mapMarkers.length > 0 ? 12 : 11}
+						markers={mapMarkers}
+						className="h-full w-full"
+					/>
+				</div>
+
+				{/* Listings – scrollable, ~1/3 */}
+				<aside className="flex w-full flex-col border-t border-border bg-background lg:w-1/3 lg:border-l lg:border-t-0">
+					<div className="shrink-0 border-b bg-muted/30 px-4 py-3">
+						<h2 className="text-base font-semibold text-foreground">
+							Property Listings
+							{searchQuery.trim() ? ` matching "${searchQuery.trim()}"` : ""}
+						</h2>
+						<p className="text-sm text-muted-foreground">
+							{apiUnavailable
+								? "Placeholder (API unavailable)"
+								: resultsLoading
+									? "Loading…"
+									: `${results.length} result(s)`}
+						</p>
+					</div>
+					<div className="flex-1 overflow-y-auto p-4">
+						{apiUnavailable ? (
+							<PropertySearchPlaceholder
+								message={resultsError ?? "Search is temporarily unavailable."}
+							/>
+						) : resultsLoading ? (
+							<div className="space-y-4" role="status">
+								{[1, 2, 3].map((i) => (
+									<div key={i} className="overflow-hidden rounded-lg border">
+										<div className="aspect-[16/10] animate-pulse bg-muted" />
+										<div className="space-y-2 p-3">
+											<div className="h-4 w-3/4 animate-pulse rounded bg-muted" />
+											<div className="h-4 w-1/2 animate-pulse rounded bg-muted" />
+										</div>
+									</div>
+								))}
+							</div>
+						) : results.length === 0 ? (
+							<div className="py-12 text-center">
+								<p className="mb-2 font-medium">No results found</p>
+								<p className="text-sm text-muted-foreground">Try adjusting search or filters</p>
+							</div>
+						) : (
+							<>
+								<ul className="space-y-4" role="list" aria-label="Search results">
+									{validResults.map((record, index) => {
+										const propertyId = getPropertyIdFromRecord(record.record);
+										const imageUrl = propertyId ? (primaryImagesMap[propertyId] ?? null) : null;
+										const address = propertyId ? (propertyAddressMap[propertyId] ?? null) : null;
+										return (
+											<li key={record.record.id ?? index}>
+												<PropertyListingCard
+													record={record.record}
+													imageUrl={imageUrl}
+													address={address}
+												/>
+											</li>
+										);
+									})}
+								</ul>
+								<div className="mt-4">
+									<SearchPagination
+										currentPageToken={currentPageToken}
+										nextPageToken={nextPageToken}
+										previousPageToken={previousPageToken}
+										pageSize={searchPageSize}
+										onPageChange={handlePageChange}
+										onPageSizeChange={handlePageSizeChange}
+									/>
+								</div>
+							</>
+						)}
+					</div>
+				</aside>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,49 @@
+/**
+ * Placeholder content when Property List search API is unavailable.
+ * Shows skeleton cards and a friendly message so the layout still feels like the search experience.
+ */
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { AlertCircle } from "lucide-react";
+
+const SKELETON_CARD_COUNT = 3;
+
+export default function PropertySearchPlaceholder({
+	message = "Search is temporarily unavailable. Please try again later.",
+}: {
+	message?: string;
+}) {
+	return (
+		<div className="space-y-4" role="status" aria-live="polite">
+			<Alert
+				variant="default"
+				className="border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/30"
+			>
+				<AlertCircle className="h-4 w-4" aria-hidden="true" />
+				<AlertTitle>Service temporarily unavailable</AlertTitle>
+				<AlertDescription>{message}</AlertDescription>
+			</Alert>
+			<p className="text-sm text-muted-foreground">Showing placeholder results</p>
+			<div className="space-y-4" aria-hidden="true">
+				{[...Array(SKELETON_CARD_COUNT)].map((_, i) => (
+					<Card key={i}>
+						<CardContent className="flex gap-4 p-4">
+							<Skeleton className="size-[200px] shrink-0 rounded-xl" />
+							<div className="min-w-0 flex-1 space-y-3">
+								<Skeleton className="h-5 w-3/4" />
+								<Skeleton className="h-4 w-full" />
+								<Skeleton className="h-4 w-1/2" />
+								<Skeleton className="h-4 w-2/3" />
+								<div className="flex gap-2 pt-2">
+									<Skeleton className="h-9 w-24" />
+									<Skeleton className="h-9 w-28" />
+								</div>
+							</div>
+						</CardContent>
+					</Card>
+				))}
+			</div>
+		</div>
+	);
+}

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

@@ -2,12 +2,16 @@ import type { RouteObject } from 'react-router';
 import AppLayout from './appLayout';
 import Home from '@/pages/Home';
 import NotFound from '@/pages/NotFound';
+import GlobalSearch from "./pages/GlobalSearch";
+import DetailPage from "./pages/DetailPage";
+import { Suspense } from "react";
+import LoadingFallback from "./components/LoadingFallback";
 import Dashboard from "@/pages/Dashboard";
 import Maintenance from "@/pages/Maintenance";
-import PropertyListings from "@/pages/PropertyListings";
+import PropertySearch from "@/pages/PropertySearch";
 import PropertyDetails from "@/pages/PropertyDetails";
 import Application from "@/pages/Application";
-import HelpCenter from "@/pages/HelpCenter";
+import Contact from "@/pages/Contact";
 
 export const routes: RouteObject[] = [
   {
@@ -23,6 +27,24 @@ export const routes: RouteObject[] = [
         path: "*",
         element: <NotFound />
       },
+      {
+        path: "global-search/:query",
+        element: (
+					<Suspense fallback={<LoadingFallback />}>
+						<GlobalSearch />
+					</Suspense>
+				),
+        handle: { showInNavigation: false }
+      },
+      {
+        path: "object/:objectApiName/:recordId",
+        element: (
+					<Suspense fallback={<LoadingFallback />}>
+						<DetailPage />
+					</Suspense>
+				),
+        handle: { showInNavigation: false }
+      },
       {
         path: "dashboard",
         element: <Dashboard />,
@@ -30,13 +52,17 @@ export const routes: RouteObject[] = [
       },
       {
         path: "properties",
-        element: <PropertyListings />,
+        element: <PropertySearch />,
         handle: { showInNavigation: true, label: "Property Search" }
       },
       {
         path: "property/:id",
         element: <PropertyDetails />
       },
+      {
+        path: "object/Property_Listing__c/:id",
+        element: <PropertyDetails />
+      },
       {
         path: "maintenance",
         element: <Maintenance />,
@@ -47,9 +73,9 @@ export const routes: RouteObject[] = [
         element: <Application />
       },
       {
-        path: "help",
-        element: <HelpCenter />,
-        handle: { showInNavigation: true, label: "Help Center" }
+        path: "contact",
+        element: <Contact />,
+        handle: { showInNavigation: true, label: "Contact" }
       }
     ]
   }

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/styles/global.css

@@ -134,69 +134,29 @@
   }
 }
 
-@layer base {
-	:root {
-		color-scheme: light;
-		--background: oklch(0.985 0.002 247.858);
-		--foreground: oklch(0.145 0 0);
-		--card: oklch(1 0 0);
-		--card-foreground: oklch(0.145 0 0);
-		--popover: oklch(1 0 0);
-		--popover-foreground: oklch(0.145 0 0);
-		--primary: oklch(0.488 0.09 195.75);
-		--primary-foreground: oklch(0.985 0 0);
-		--secondary: oklch(0.97 0.01 195);
-		--secondary-foreground: oklch(0.205 0 0);
-		--muted: oklch(0.97 0.005 195);
-		--muted-foreground: oklch(0.556 0 0);
-		--accent: oklch(0.97 0.01 195);
-		--accent-foreground: oklch(0.205 0 0);
-		--destructive: oklch(0.577 0.245 27.325);
-		--destructive-foreground: oklch(0.985 0 0);
-		--border: oklch(0.922 0 0);
-		--input: oklch(0.922 0 0);
-		--ring: oklch(0.488 0.09 195.75);
-		--radius: 0.625rem;
-		--spacing: 0.25rem;
-	}
-	@media (prefers-reduced-motion: reduce) {
-		* {
-			animation-duration: 0.01ms !important;
-			animation-iteration-count: 1 !important;
-			transition-duration: 0.01ms !important;
-			scroll-behavior: auto !important;
-		}
-	}
-	* {
-		@apply border-[var(--border)];
-	}
-	body {
-		@apply bg-[var(--background)] text-[var(--foreground)] antialiased;
-	}
+/* ZENLEASE design language: teal primary, cream background, soft rounded corners */
+
+:root {
+	/* Primary: deep teal (#20888F / #2c8a8d) */
+	--primary: oklch(0.52 0.09 192);
+	--primary-foreground: oklch(0.985 0 0);
+	/* Background: warm cream (#F8F6F1) */
+	--background: oklch(0.97 0.01 85);
+	--foreground: oklch(0.21 0.02 260);
+	/* Card: white with subtle warmth */
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.21 0.02 260);
+	/* Muted: light cream for secondary surfaces */
+	--muted: oklch(0.955 0.01 85);
+	--muted-foreground: oklch(0.48 0.02 260);
+	/* Border / input: soft teal-tinted gray */
+	--border: oklch(0.91 0.02 192);
+	--input: oklch(0.91 0.02 192);
+	--ring: oklch(0.52 0.09 192);
+	/* Slightly larger radius for soft, friendly feel (screenshots use 16–24px) */
+	--radius: 0.75rem;
 }
 
-@theme inline {
-	--color-background: var(--background);
-	--color-foreground: var(--foreground);
-	--color-card: var(--card);
-	--color-card-foreground: var(--card-foreground);
-	--color-popover: var(--popover);
-	--color-popover-foreground: var(--popover-foreground);
-	--color-primary: var(--primary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-secondary: var(--secondary);
-	--color-secondary-foreground: var(--secondary-foreground);
-	--color-muted: var(--muted);
-	--color-muted-foreground: var(--muted-foreground);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-foreground);
-	--color-destructive: var(--destructive);
-	--color-border: var(--border);
-	--color-input: var(--input);
-	--color-ring: var(--ring);
-	--radius-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 4px);
-	--spacing: var(--spacing);
+body {
+	@apply bg-background text-foreground;
 }

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/types/filters/filters.ts

@@ -0,0 +1,120 @@
+import { z } from "zod";
+
+/**
+ * Type definitions for filter structures
+ * All types are derived from Zod schemas using z.infer for type safety
+ */
+
+/**
+ * Allowed filter operators for Salesforce search queries
+ */
+export const FILTER_OPERATORS = [
+	"eq", // Equals
+	"ne", // Not equals
+	"like", // Pattern matching (contains)
+	"gt", // Greater than
+	"gte", // Greater than or equal
+	"lt", // Less than
+	"lte", // Less than or equal
+] as const;
+
+/**
+ * Filter operator type
+ */
+export type FilterOperator = (typeof FILTER_OPERATORS)[number];
+
+/**
+ * Salesforce field path validation regex
+ * Validates field paths like:
+ * - Simple fields: "Name", "FieldName__c"
+ * - Relationship fields: "Account__r.Name", "Owner__r.FieldName__c"
+ * - Nested relationships: "Account__r.Owner__r.Name"
+ *
+ * Pattern explanation:
+ * - ^[A-Za-z][A-Za-z0-9_]* - Starts with letter, followed by letters/numbers/underscores
+ * - (__[cr])? - Optional relationship suffix (__r or __c)
+ * - (\.[A-Za-z][A-Za-z0-9_]*(__[cr])?)* - Optional relationship traversal (dot notation)
+ */
+const SALESFORCE_FIELD_PATH_REGEX =
+	/^[A-Za-z][A-Za-z0-9_]*(__[cr])?(\.[A-Za-z][A-Za-z0-9_]*(__[cr])?)*$/;
+
+/**
+ * Validates Salesforce field path format
+ * @param fieldPath - The field path to validate
+ * @returns true if valid, false otherwise
+ */
+function isValidSalesforceFieldPath(fieldPath: string): boolean {
+	if (!fieldPath || fieldPath.trim().length === 0) {
+		return false;
+	}
+	return SALESFORCE_FIELD_PATH_REGEX.test(fieldPath);
+}
+
+// Zod Schema for Filter Attributes
+const FilterAttributesSchema = z.object({
+	affordance: z.string().optional(),
+	placeholder: z.string().optional(),
+});
+
+/**
+ * Filter attributes containing input-specific properties
+ */
+export type FilterAttributes = z.infer<typeof FilterAttributesSchema>;
+
+// Zod Schema for Filter
+const FilterSchema = z.object({
+	affordance: z.string(),
+	attributes: FilterAttributesSchema.optional(),
+	defaultValues: z.array(z.string()).optional(),
+	helpMessage: z.string().nullable().optional(),
+	label: z.string(),
+	targetFieldPath: z.string().refine((value) => isValidSalesforceFieldPath(value), {
+		message:
+			"Invalid Salesforce field path format. Field paths must start with a letter and can contain letters, numbers, underscores, and relationship notation (__r or __c). Use dot notation for relationships (e.g., 'Account__r.Name').",
+	}),
+	type: z.string(),
+});
+
+/**
+ * Single filter definition from getObjectListFilters API
+ */
+export type Filter = z.infer<typeof FilterSchema>;
+
+// Export schema for validation
+export const FilterArraySchema = z.array(FilterSchema);
+
+// Zod Schema for Filter Criteria with operator and field path validation
+const FilterCriteriaSchema = z.object({
+	objectApiName: z.string().min(1, "Object API name is required"),
+	fieldPath: z
+		.string()
+		.min(1, "Field path is required")
+		.refine((value) => isValidSalesforceFieldPath(value), {
+			message:
+				"Invalid Salesforce field path format. Field paths must start with a letter and can contain letters, numbers, underscores, and relationship notation (__r or __c). Use dot notation for relationships (e.g., 'Account__r.Name').",
+		}),
+	operator: z.enum(FILTER_OPERATORS, {
+		message: `Operator must be one of: ${FILTER_OPERATORS.join(", ")}`,
+	}),
+	values: z.array(z.union([z.string(), z.number()])).min(1, "At least one value is required"),
+});
+
+/**
+ * Filter criteria structure for filtering search results
+ */
+export type FilterCriteria = z.infer<typeof FilterCriteriaSchema>;
+
+// Export schema for validation
+export const FilterCriteriaArraySchema = z.array(FilterCriteriaSchema);
+
+// Zod Schema for Filters Response
+const FiltersResponseSchema = z.record(z.string(), z.unknown()).and(
+	z.object({
+		filters: FilterArraySchema.optional(),
+	}),
+);
+
+/**
+ * Filters response structure
+ */
+export type FiltersResponse = z.infer<typeof FiltersResponseSchema>;