@salesforce/webapp-template-app-react-sample-b2x-experimental 1.84.0 → 1.85.0

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

@@ -0,0 +1,36 @@
+import { Check } from "lucide-react";
+
+interface StatusBadgeProps {
+	status: string;
+}
+
+export function StatusBadge({ status }: StatusBadgeProps) {
+	const statusLower = status.toLowerCase();
+
+	const getStyle = () => {
+		if (statusLower === "new") return "bg-pink-100 text-pink-700";
+		if (statusLower === "in progress") return "bg-yellow-100 text-yellow-700";
+		if (statusLower === "resolved") return "bg-green-100 text-green-700";
+		return "bg-gray-100 text-gray-700";
+	};
+
+	const getLabel = () => {
+		if (statusLower === "new") return "Needs Action";
+		if (statusLower === "in progress") return "In Progress";
+		if (statusLower === "resolved") return "Resolved";
+		return status;
+	};
+
+	const showCheckmark = statusLower === "resolved";
+	const showDot = statusLower === "new" || statusLower === "in progress";
+
+	return (
+		<span
+			className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium ${getStyle()}`}
+		>
+			{showCheckmark && <Check className="size-4" aria-hidden />}
+			{showDot && <span className="size-2 rounded-full bg-current" aria-hidden />}
+			{getLabel()}
+		</span>
+	);
+}

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

@@ -0,0 +1,107 @@
+import { useEffect, useState } from "react";
+import { Search, Bell, ChevronDown, Menu } from "lucide-react";
+import { getUserInfo } from "@/api/userApi";
+import zenLogo from "@/assets/icons/zen-logo.svg";
+
+export interface TopBarProps {
+	onMenuClick?: () => void;
+}
+
+export function TopBar({ onMenuClick }: TopBarProps) {
+	const [userName, setUserName] = useState<string>("User");
+	const [showNotifications, setShowNotifications] = useState(false);
+
+	useEffect(() => {
+		const loadUserInfo = async () => {
+			const userInfo = await getUserInfo();
+			if (userInfo) {
+				setUserName(userInfo.name);
+			}
+		};
+		loadUserInfo();
+	}, []);
+
+	const handleNotificationClick = () => {
+		setShowNotifications(!showNotifications);
+	};
+
+	const handleCloseNotifications = () => {
+		setShowNotifications(false);
+	};
+
+	return (
+		<header
+			className="flex h-16 items-center justify-between bg-teal-700 px-6 text-white"
+			role="banner"
+		>
+			<div className="flex items-center gap-4">
+				<button
+					type="button"
+					onClick={onMenuClick}
+					className="rounded-md p-2 transition-colors hover:bg-teal-600 md:hidden"
+					aria-label="Toggle menu"
+				>
+					<Menu className="size-6" aria-hidden />
+				</button>
+				<div className="flex items-center gap-2">
+					<img src={zenLogo} alt="Zenlease Logo" className="size-8" />
+					<span className="text-xl tracking-wide">
+						<span className="font-light">ZEN</span>
+						<span className="font-semibold">LEASE</span>
+					</span>
+				</div>
+			</div>
+
+			<div className="flex items-center gap-4">
+				<button
+					type="button"
+					className="rounded-md p-2 transition-colors hover:bg-teal-600 md:hidden"
+					aria-label="Search"
+				>
+					<Search className="size-5" aria-hidden />
+				</button>
+
+				<div className="relative">
+					<button
+						type="button"
+						onClick={handleNotificationClick}
+						className="relative rounded-md p-2 transition-colors hover:bg-teal-600"
+						aria-label="Notifications"
+					>
+						<Bell className="size-5" aria-hidden />
+					</button>
+
+					{showNotifications && (
+						<>
+							<div className="fixed inset-0 z-40" onClick={handleCloseNotifications} aria-hidden />
+							<div className="absolute right-0 top-full z-50 mt-2 w-80 overflow-hidden rounded-lg bg-white shadow-xl">
+								<div className="border-b border-gray-200 p-4">
+									<h3 className="text-sm font-semibold text-gray-900">Notifications</h3>
+								</div>
+								<div className="p-8 text-center">
+									<Bell className="mx-auto mb-3 size-12 text-gray-300" aria-hidden />
+									<p className="text-sm text-gray-500">No new notifications</p>
+								</div>
+							</div>
+						</>
+					)}
+				</div>
+
+				<button
+					type="button"
+					className="flex items-center gap-2 rounded-md px-3 py-2 transition-colors hover:bg-teal-600"
+					aria-label="User menu"
+				>
+					<div
+						className="flex size-8 items-center justify-center rounded-full bg-teal-300 font-semibold text-teal-900"
+						aria-hidden
+					>
+						{userName.charAt(0).toUpperCase()}
+					</div>
+					<span className="hidden font-medium md:inline">{userName.toUpperCase()}</span>
+					<ChevronDown className="hidden size-4 md:inline" aria-hidden />
+				</button>
+			</div>
+		</header>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/usePropertyAddresses.ts

@@ -4,8 +4,8 @@
  */
 import { useState, useEffect } from "react";
 import { fetchPropertyAddresses } from "@/api/propertyDetailGraphQL";
-import { getPropertyIdFromRecord } from "./usePropertyPrimaryImages";
-import type { SearchResultRecord } from "../features/global-search/types/search/searchResults";
+import { getPropertyIdFromRecord } from "@/hooks/usePropertyPrimaryImages";
+import type { SearchResultRecord } from "@/features/global-search/types/search/searchResults.js";
 
 export function usePropertyAddresses(results: SearchResultRecord[]): Record<string, string> {
 	const [map, setMap] = useState<Record<string, string>>({});

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/usePropertyListingAmenities.ts

@@ -0,0 +1,55 @@
+/**
+ * Fetches amenities (feature descriptions) for each property in search results.
+ * Returns a map of propertyId -> "Amenity 1 | Amenity 2 | ..." for use in listing cards.
+ */
+import { useState, useEffect } from "react";
+import { fetchFeaturesByPropertyId } from "@/api/propertyDetailGraphQL";
+import { getPropertyIdFromRecord } from "@/hooks/usePropertyPrimaryImages";
+import type { SearchResultRecord } from "@/features/global-search/types/search/searchResults.js";
+
+const AMENITIES_SEPARATOR = " | ";
+
+export function usePropertyListingAmenities(
+	results: SearchResultRecord[],
+): Record<string, string> & { loading: boolean } {
+	const [map, setMap] = useState<Record<string, string>>({});
+	const [loading, setLoading] = useState(false);
+
+	const propertyIds = results
+		.map((r) => r?.record && getPropertyIdFromRecord(r.record))
+		.filter((id): id is string => Boolean(id));
+	const uniqueIds = [...new Set(propertyIds)];
+
+	useEffect(() => {
+		if (uniqueIds.length === 0) {
+			setMap({});
+			return;
+		}
+		let cancelled = false;
+		setLoading(true);
+		Promise.all(uniqueIds.map((id) => fetchFeaturesByPropertyId(id)))
+			.then((featuresPerProperty) => {
+				if (cancelled) return;
+				const next: Record<string, string> = {};
+				uniqueIds.forEach((id, i) => {
+					const features = featuresPerProperty[i] ?? [];
+					const descriptions = features
+						.map((f) => f.description)
+						.filter((d): d is string => d != null && d.trim() !== "");
+					next[id] = descriptions.join(AMENITIES_SEPARATOR);
+				});
+				setMap(next);
+			})
+			.catch(() => {
+				if (!cancelled) setMap({});
+			})
+			.finally(() => {
+				if (!cancelled) setLoading(false);
+			});
+		return () => {
+			cancelled = true;
+		};
+	}, [uniqueIds.join(",")]);
+
+	return Object.assign(map, { loading });
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/usePropertyListingPriceRange.ts

@@ -0,0 +1,64 @@
+/**
+ * Fetches the available min/max listing price for the current search (no price/bedroom filters).
+ * Use to render the filter bar only after knowing the available price range.
+ */
+import { useState, useEffect, useRef } from "react";
+import { queryPropertyListingPriceRange } from "@/api/propertyListingGraphQL";
+
+/** Cap for slider max when dataset has outliers; UI never sees a higher max. */
+const SLIDER_PRICE_CAP = 50_000;
+
+export interface PropertyListingPriceRange {
+	priceMin: number;
+	priceMax: number;
+	/** True when raw max was > cap and we capped for the slider (show "50,000+"). */
+	maxCapped?: boolean;
+}
+
+/** Fallback when the price-range API call fails. */
+const DEFAULT_PRICE_RANGE: PropertyListingPriceRange = { priceMin: 0, priceMax: 100_000 };
+
+function capPriceRange(range: { priceMin: number; priceMax: number }): PropertyListingPriceRange {
+	if (range.priceMax <= SLIDER_PRICE_CAP)
+		return { priceMin: range.priceMin, priceMax: range.priceMax };
+	return {
+		priceMin: range.priceMin,
+		priceMax: SLIDER_PRICE_CAP,
+		maxCapped: true,
+	};
+}
+
+export function usePropertyListingPriceRange(searchQuery: string): {
+	priceRange: PropertyListingPriceRange | null;
+	loading: boolean;
+	error: string | null;
+} {
+	const [priceRange, setPriceRange] = useState<PropertyListingPriceRange | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const cancelledRef = useRef(false);
+
+	useEffect(() => {
+		cancelledRef.current = false;
+		setLoading(true);
+		setError(null);
+		queryPropertyListingPriceRange(searchQuery)
+			.then((range) => {
+				if (!cancelledRef.current) setPriceRange(range ? capPriceRange(range) : null);
+			})
+			.catch((err) => {
+				if (!cancelledRef.current) {
+					setError(err instanceof Error ? err.message : "Failed to load price range");
+					setPriceRange(capPriceRange(DEFAULT_PRICE_RANGE));
+				}
+			})
+			.finally(() => {
+				if (!cancelledRef.current) setLoading(false);
+			});
+		return () => {
+			cancelledRef.current = true;
+		};
+	}, [searchQuery]);
+
+	return { priceRange, loading, error };
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/usePropertyListingSearch.ts

@@ -1,11 +1,19 @@
 /**
- * Property Listing search via GraphQL. Shows all when no search term.
+ * Property Listing search via GraphQL. Optional text, price range, and bedrooms filters.
  */
 import { useState, useEffect, useRef, useCallback } from "react";
-import { queryPropertyListingsGraphQL } from "@/api/propertyListingGraphQL";
-import type { SearchResultRecord } from "../features/global-search/types/search/searchResults";
+import {
+	queryPropertyListingsGraphQL,
+	type PropertyListingFilters,
+} from "@/api/propertyListingGraphQL";
+import type { SearchResultRecord } from "@/features/global-search/types/search/searchResults.js";
 
-export function usePropertyListingSearch(searchQuery: string, pageSize: number, pageToken: string) {
+export function usePropertyListingSearch(
+	searchQuery: string,
+	pageSize: number,
+	pageToken: string,
+	filters?: PropertyListingFilters,
+) {
 	const [results, setResults] = useState<SearchResultRecord[]>([]);
 	const [nextPageToken, setNextPageToken] = useState<string | null>(null);
 	const [previousPageToken, setPreviousPageToken] = useState<string | null>(null);
@@ -27,6 +35,7 @@ export function usePropertyListingSearch(searchQuery: string, pageSize: number,
 				pageSize,
 				afterCursor,
 				ac.signal,
+				filters,
 			);
 			if (ac.signal.aborted) return;
 			setResults(result.records);
@@ -41,7 +50,7 @@ export function usePropertyListingSearch(searchQuery: string, pageSize: number,
 		} finally {
 			if (!ac.signal.aborted) setLoading(false);
 		}
-	}, [searchQuery, pageSize, pageToken]);
+	}, [searchQuery, pageSize, pageToken, filters]);
 
 	useEffect(() => {
 		if (debounceRef.current) {

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/usePropertyMapMarkers.ts

@@ -4,9 +4,9 @@
  */
 import { useState, useEffect } from "react";
 import { fetchPropertyAddresses } from "@/api/propertyDetailGraphQL";
-import { geocodeAddress } from "@/utils/geocode";
-import { getPropertyIdFromRecord } from "./usePropertyPrimaryImages";
-import type { SearchResultRecord } from "../features/global-search/types/search/searchResults";
+import { geocodeAddress, getStateZipFromAddress } from "@/utils/geocode";
+import { getPropertyIdFromRecord } from "@/hooks/usePropertyPrimaryImages";
+import type { SearchResultRecord } from "@/features/global-search/types/search/searchResults.js";
 import type { MapMarker } from "@/components/PropertyMap";
 
 function getListingName(record: {
@@ -19,6 +19,42 @@ function getListingName(record: {
 	return "Property";
 }
 
+/** Round to 5 decimals (~1 m) so near-duplicate coords group together */
+function key(lat: number, lng: number): string {
+	return `${lat.toFixed(5)},${lng.toFixed(5)}`;
+}
+
+/**
+ * When multiple markers share the same lat/lng, offset them in a small circle so they appear
+ * close together but are all visible (no stacking).
+ */
+function spreadDuplicateMarkers(markers: MapMarker[]): MapMarker[] {
+	const groups = new Map<string, MapMarker[]>();
+	for (const m of markers) {
+		const k = key(m.lat, m.lng);
+		if (!groups.has(k)) groups.set(k, []);
+		groups.get(k)!.push(m);
+	}
+	const result: MapMarker[] = [];
+	const radiusDeg = 0.0004; // ~40–50 m so pins sit close but visible
+	for (const group of groups.values()) {
+		if (group.length === 1) {
+			result.push(group[0]);
+			continue;
+		}
+		for (let i = 0; i < group.length; i++) {
+			const m = group[i];
+			const angle = (i / group.length) * 2 * Math.PI;
+			result.push({
+				...m,
+				lat: m.lat + radiusDeg * Math.cos(angle),
+				lng: m.lng + radiusDeg * Math.sin(angle),
+			});
+		}
+	}
+	return result;
+}
+
 export function usePropertyMapMarkers(results: SearchResultRecord[]): {
 	markers: MapMarker[];
 	loading: boolean;
@@ -59,24 +95,31 @@ export function usePropertyMapMarkers(results: SearchResultRecord[]): {
 					setLoading(false);
 					return;
 				}
-				// Geocode all addresses in parallel (only current window of results)
+				// Geocode all addresses in parallel; fallback to City, State Zip if full address fails
 				Promise.all(
-					toGeocode.map(([id, address]) =>
-						geocodeAddress(address.replace(/\n/g, ", ")).then((coords) =>
-							coords ? { id, coords } : null,
-						),
-					),
+					toGeocode.map(async ([id, address]) => {
+						const normalized = address.replace(/\n/g, ", ").trim();
+						let coords = await geocodeAddress(normalized);
+						if (!coords) {
+							const stateZip = getStateZipFromAddress(normalized);
+							if (stateZip !== normalized) {
+								coords = await geocodeAddress(stateZip);
+							}
+						}
+						return coords ? { id, coords } : null;
+					}),
 				)
 					.then((resolved) => {
 						if (cancelled) return;
-						const nextMarkers: MapMarker[] = resolved
+						const raw: MapMarker[] = resolved
 							.filter((r): r is { id: string; coords: { lat: number; lng: number } } => r != null)
 							.map(({ id, coords }) => ({
 								lat: coords.lat,
 								lng: coords.lng,
 								label: propertyIdToLabel.get(id) ?? "Property",
+								propertyId: id,
 							}));
-						setMarkers(nextMarkers);
+						setMarkers(spreadDuplicateMarkers(raw));
 					})
 					.catch(() => {
 						if (!cancelled) setMarkers([]);

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/usePropertyPrimaryImages.ts

@@ -4,7 +4,7 @@
  */
 import { useState, useEffect } from "react";
 import { fetchPrimaryImagesByPropertyIds } from "@/api/propertyDetailGraphQL";
-import type { SearchResultRecord } from "../features/global-search/types/search/searchResults";
+import type { SearchResultRecord } from "@/features/global-search/types/search/searchResults.js";
 
 export function getPropertyIdFromRecord(record: {
 	fields?: Record<string, { value?: unknown }>;

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

@@ -1,9 +1,9 @@
 import { useSearchParams, Link } from "react-router";
-import { useCallback, useEffect, useState } from "react";
-import { Button } from "../components/ui/button";
-import { Input } from "../components/ui/input";
-import { Label } from "../components/ui/label";
-import { Card, CardContent } from "../components/ui/card";
+import { useCallback, useEffect, useState, type ChangeEvent } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent } from "@/components/ui/card";
 import {
 	fetchListingById,
 	fetchPropertyById,
@@ -94,7 +94,7 @@ export default function Application() {
 					Phone__c: phone.trim() || null,
 					Start_Date__c: moveInDate.trim() || null,
 					Preferred_Term__c: preferredTerm.trim() || null,
-					Employment_Info__c: employmentInfo.trim() || null,
+					Employment__c: employmentInfo.trim() || null,
 					References__c: references.trim() || null,
 				});
 				setSubmittedId(id.id);
@@ -119,26 +119,30 @@ export default function Application() {
 
 	if (loading) {
 		return (
-			<div className="mx-auto max-w-[800px]">
-				<div className="mb-6 h-48 animate-pulse rounded-xl bg-muted" />
-				<div className="h-64 animate-pulse rounded-lg bg-muted" />
+			<div className="mx-auto max-w-[900px]">
+				<div className="mb-6 h-48 animate-pulse rounded-2xl bg-muted" />
+				<div className="h-64 animate-pulse rounded-2xl bg-muted" />
 			</div>
 		);
 	}
 
 	if (submittedId) {
 		return (
-			<div className="mx-auto max-w-[800px]">
-				<Card className="mb-6 p-6">
-					<h2 className="mb-2 text-lg font-semibold text-primary">Application submitted</h2>
+			<div className="mx-auto max-w-[900px]">
+				<Card className="mb-6 rounded-2xl border border-border p-6 shadow-sm">
+					<h2 className="mb-2 text-2xl font-semibold text-foreground">Application submitted</h2>
 					<p className="text-sm text-muted-foreground">
 						Your application has been saved. Reference: {submittedId}
 					</p>
 					<div className="mt-4 flex gap-2">
-						<Button asChild variant="outline" size="sm">
-							<Link to="/properties">Back to search</Link>
-						</Button>
-						<Button asChild size="sm">
+						<Link to="/properties" className="text-sm text-primary no-underline hover:underline">
+							Back to search
+						</Link>
+						<Button
+							asChild
+							size="sm"
+							className="rounded-xl bg-primary px-5 py-5 text-lg font-medium transition-colors duration-200 hover:bg-primary/90"
+						>
 							<Link to="/application">Submit another</Link>
 						</Button>
 					</div>
@@ -148,8 +152,16 @@ export default function Application() {
 	}
 
 	return (
-		<div className="mx-auto max-w-[800px]">
-			<Card className="mb-6 flex gap-4 p-6">
+		<div className="mx-auto max-w-[900px]">
+			<div className="mb-4">
+				<Link
+					to={listingId ? `/property/${listingId}` : "/properties"}
+					className="text-sm text-primary no-underline hover:underline"
+				>
+					{listingId ? "← Back to listing" : "← Back to search"}
+				</Link>
+			</div>
+			<Card className="mb-6 flex gap-4 rounded-2xl border border-border p-6 shadow-sm">
 				<div className="relative size-[200px] shrink-0 overflow-hidden rounded-xl bg-muted">
 					{propertyImageUrl ? (
 						<img src={propertyImageUrl} alt="" className="h-full w-full object-cover" />
@@ -158,7 +170,7 @@ export default function Application() {
 					)}
 				</div>
 				<div className="min-w-0 flex-1">
-					<h2 className="mb-1 text-lg font-semibold text-primary">
+					<h2 className="mb-1.5 text-2xl font-semibold text-foreground">
 						{listingName ?? "Apply for a property"}
 					</h2>
 					<p className="text-sm text-muted-foreground">
@@ -169,19 +181,12 @@ export default function Application() {
 					</p>
 					{loadError && <p className="mt-2 text-sm text-destructive">{loadError}</p>}
 				</div>
-				<div className="flex gap-2">
-					<Button asChild variant="outline" size="sm">
-						<Link to={listingId ? `/property/${listingId}` : "/properties"}>Back to listing</Link>
-					</Button>
-				</div>
 			</Card>
 
-			<Card className="mb-6">
-				<CardContent className="pt-6">
+			<Card className="mb-6 rounded-2xl border border-border shadow-sm">
+				<CardContent className="pt-3">
 					<form onSubmit={handleSubmit}>
-						<h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-foreground">
-							YOUR INFO
-						</h3>
+						<h3 className="mb-4 text-base font-semibold text-foreground">Your info</h3>
 						<div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
 							<div className="space-y-2">
 								<Label htmlFor="app-first-name">First Name *</Label>
@@ -189,7 +194,7 @@ export default function Application() {
 									id="app-first-name"
 									type="text"
 									value={firstName}
-									onChange={(e) => setFirstName(e.target.value)}
+									onChange={(e: ChangeEvent<HTMLInputElement>) => setFirstName(e.target.value)}
 								/>
 							</div>
 							<div className="space-y-2">
@@ -198,7 +203,7 @@ export default function Application() {
 									id="app-last-name"
 									type="text"
 									value={lastName}
-									onChange={(e) => setLastName(e.target.value)}
+									onChange={(e: ChangeEvent<HTMLInputElement>) => setLastName(e.target.value)}
 								/>
 							</div>
 						</div>
@@ -208,7 +213,7 @@ export default function Application() {
 								id="app-email"
 								type="email"
 								value={email}
-								onChange={(e) => setEmail(e.target.value)}
+								onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
 							/>
 						</div>
 						<div className="mb-4 space-y-2">
@@ -217,12 +222,10 @@ export default function Application() {
 								id="app-phone"
 								type="tel"
 								value={phone}
-								onChange={(e) => setPhone(e.target.value)}
+								onChange={(e: ChangeEvent<HTMLInputElement>) => setPhone(e.target.value)}
 							/>
 						</div>
-						<h3 className="mb-4 mt-6 text-xs font-semibold uppercase tracking-wider text-foreground">
-							MOVE IN
-						</h3>
+						<h3 className="mb-4 mt-6 text-base font-semibold text-foreground">Move in</h3>
 						<div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
 							<div className="space-y-2">
 								<Label htmlFor="app-move-in">Move in date</Label>
@@ -230,7 +233,7 @@ export default function Application() {
 									id="app-move-in"
 									type="date"
 									value={moveInDate}
-									onChange={(e) => setMoveInDate(e.target.value)}
+									onChange={(e: ChangeEvent<HTMLInputElement>) => setMoveInDate(e.target.value)}
 								/>
 							</div>
 							<div className="space-y-2">
@@ -239,7 +242,7 @@ export default function Application() {
 									id="app-term"
 									className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
 									value={preferredTerm}
-									onChange={(e) => setPreferredTerm(e.target.value)}
+									onChange={(e: ChangeEvent<HTMLSelectElement>) => setPreferredTerm(e.target.value)}
 								>
 									{PREFERRED_TERM_OPTIONS.map((opt) => (
 										<option key={opt || "empty"} value={opt}>
@@ -274,7 +277,7 @@ export default function Application() {
 							<Button
 								type="submit"
 								size="sm"
-								className="bg-teal-600 hover:bg-teal-700"
+								className="w-full cursor-pointer rounded-xl bg-primary px-5 py-5 text-lg font-medium transition-colors duration-200 hover:bg-primary/90 disabled:opacity-50"
 								disabled={submitting}
 							>
 								{submitting ? "Submitting…" : "Submit application"}

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

@@ -1,15 +1,15 @@
 import { useState, useCallback, useEffect, type SubmitEvent } from "react";
 import { Link } from "react-router";
-import { Button } from "../components/ui/button";
-import { Input } from "../components/ui/input";
-import { Label } from "../components/ui/label";
-import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
-import { CenteredPageLayout } from "../features/authentication/layout/centered-page-layout";
-import { Skeleton } from "../components/ui/skeleton";
-import { createContactUsLead } from "../api/leadApi";
-import { useAuth } from "../features/authentication/context/AuthContext";
-import { fetchUserProfile } from "../features/authentication/api/userProfileApi";
-import type { UserInfo } from "../api/leadApi";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CenteredPageLayout } from "@/features/authentication/layout/centered-page-layout";
+import { Skeleton } from "@/components/ui/skeleton";
+import { createContactUsLead } from "@/api/leadApi";
+import { useAuth } from "@/features/authentication/context/AuthContext";
+import { fetchUserProfile } from "@/features/authentication/api/userProfileApi";
+import type { UserInfo } from "@/api/leadApi";
 
 function LoadingCard() {
 	return (