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

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

@@ -0,0 +1,315 @@
+/**
+ * Search and filter bar for property search: area search, price range, number of bedrooms.
+ */
+import { Popover } from "radix-ui";
+import { Search, ChevronDown } from "lucide-react";
+
+const SEARCH_INPUT_CLASS =
+	"h-10 rounded-full border-2 border-primary/50 bg-background px-4 text-sm outline-none transition-colors placeholder:text-muted-foreground focus:border-primary focus:ring-2 focus:ring-primary/20";
+
+const FILTER_PILL_CLASS =
+	"inline-flex h-10 items-center gap-1.5 rounded-full border-2 border-primary/50 bg-background px-4 text-sm font-medium text-foreground outline-none transition-colors hover:border-primary/70 focus:ring-2 focus:ring-primary/20";
+
+const SAVE_BUTTON_CLASS =
+	"mt-3 w-full rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/20";
+
+const DEFAULT_PRICE_MIN = 0;
+const DEFAULT_PRICE_MAX = 100_000;
+
+/** Bedroom filter buckets: ≤2, exactly 3, or ≥4 */
+export type BedroomFilter = "le2" | "3" | "ge4" | null;
+
+const BEDROOM_OPTIONS: { value: BedroomFilter; label: string }[] = [
+	{ value: "le2", label: "≤2" },
+	{ value: "3", label: "3" },
+	{ value: "ge4", label: "≥4" },
+];
+
+/** Sort by price or number of bedrooms, ascending or descending */
+export type SortBy = "price_asc" | "price_desc" | "beds_asc" | "beds_desc" | null;
+
+const SORT_OPTIONS: { value: NonNullable<SortBy>; label: string }[] = [
+	{ value: "price_asc", label: "Price (low to high)" },
+	{ value: "price_desc", label: "Price (high to low)" },
+	{ value: "beds_asc", label: "Number of bedrooms (low to high)" },
+	{ value: "beds_desc", label: "Number of bedrooms (high to low)" },
+];
+
+export interface PropertySearchFiltersProps {
+	searchQuery: string;
+	onSearchQueryChange: (value: string) => void;
+	priceMin: string;
+	onPriceMinChange: (value: string) => void;
+	priceMax: string;
+	onPriceMaxChange: (value: string) => void;
+	/** Called when user clicks Save in the Price popover; use this to commit filters and run search. */
+	onPriceSave?: (min: string, max: string) => void;
+	bedrooms: BedroomFilter;
+	onBedroomsChange: (value: BedroomFilter) => void;
+	/** Called when user clicks Save in the Beds popover; use this to commit filters and run search. */
+	onBedsSave?: (value: BedroomFilter) => void;
+	sortBy: SortBy;
+	onSortChange: (value: SortBy) => void;
+	/** Called when user clicks Save in the Sort popover; use this to apply sort. */
+	onSortSave?: (value: SortBy) => void;
+	/** When set, pill shows this as the applied sort (e.g. after Save); otherwise pill shows sortBy. */
+	appliedSortBy?: SortBy | null;
+	onSubmit?: () => void;
+}
+
+export default function PropertySearchFilters({
+	searchQuery,
+	onSearchQueryChange,
+	priceMin,
+	onPriceMinChange,
+	priceMax,
+	onPriceMaxChange,
+	onPriceSave,
+	bedrooms,
+	onBedroomsChange,
+	onBedsSave,
+	sortBy,
+	onSortChange,
+	onSortSave,
+	appliedSortBy,
+	onSubmit,
+}: PropertySearchFiltersProps) {
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter") onSubmit?.();
+	};
+
+	const rangeMin = DEFAULT_PRICE_MIN;
+	const rangeMax = DEFAULT_PRICE_MAX;
+
+	const minNum = priceMin.trim() ? Number(priceMin.replace(/[^0-9.]/g, "")) : NaN;
+	const maxNum = priceMax.trim() ? Number(priceMax.replace(/[^0-9.]/g, "")) : NaN;
+	const hasMin = Number.isFinite(minNum) && minNum > 0;
+	const hasMax = Number.isFinite(maxNum) && maxNum > 0;
+	const formatPrice = (n: number) =>
+		new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: "USD",
+			maximumFractionDigits: 0,
+		}).format(n);
+	const priceValueLabel =
+		hasMin && hasMax
+			? `${formatPrice(minNum)} – ${formatPrice(maxNum)}`
+			: hasMin
+				? `${formatPrice(minNum)}+`
+				: hasMax
+					? `– ${formatPrice(maxNum)}`
+					: null;
+	const priceLabel = priceValueLabel != null ? `Price: ${priceValueLabel}` : "Price";
+
+	const bedsLabel = bedrooms
+		? `Number of bedrooms: ${BEDROOM_OPTIONS.find((o) => o.value === bedrooms)?.label ?? ""}`
+		: "Number of bedrooms";
+
+	const sortForPill = appliedSortBy ?? sortBy;
+	const sortOptionLabel = sortForPill
+		? (SORT_OPTIONS.find((o) => o.value === sortForPill)?.label ?? null)
+		: null;
+	const sortLabel = sortOptionLabel != null ? `Sort By: ${sortOptionLabel}` : "Sort By";
+
+	return (
+		<div className="flex w-full shrink-0 flex-col items-stretch gap-3 border-b border-border px-4 py-4 lg:flex-row lg:items-center">
+			<div className="relative min-w-0 w-full lg:w-1/2 lg:shrink-0">
+				<Search
+					className="pointer-events-none absolute left-3 top-1/2 size-5 -translate-y-1/2 text-muted-foreground"
+					aria-hidden
+				/>
+				<input
+					type="text"
+					value={searchQuery}
+					onChange={(e) => onSearchQueryChange(e.target.value)}
+					onKeyDown={handleKeyDown}
+					placeholder="Area or search"
+					className={`${SEARCH_INPUT_CLASS} w-full pl-10`}
+					aria-label="Search property listings"
+				/>
+			</div>
+			<div className="flex flex-wrap items-center gap-3 lg:flex-1 lg:min-w-0 lg:flex-nowrap">
+				<div className="min-w-0 lg:flex-1">
+					<Popover.Root>
+						<Popover.Trigger asChild>
+							<button
+								type="button"
+								className={`${FILTER_PILL_CLASS} w-full justify-center`}
+								aria-label={priceValueLabel == null ? "Price filter" : priceLabel}
+							>
+								{priceLabel}
+								<ChevronDown className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+							</button>
+						</Popover.Trigger>
+						<Popover.Portal>
+							<Popover.Content
+								sideOffset={8}
+								align="start"
+								className="z-[1100] w-[min(20rem,90vw)] rounded-xl border border-border bg-background p-4 shadow-lg outline-none"
+							>
+								<div className="space-y-3">
+									<p className="text-sm font-medium text-foreground">Price range</p>
+									<div className="flex items-center gap-2">
+										<div className="flex flex-1 items-center rounded-full border-2 border-primary/50 bg-background focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20">
+											<span className="pl-4 text-sm text-muted-foreground">$</span>
+											<input
+												type="number"
+												min={rangeMin}
+												max={rangeMax}
+												step={1000}
+												value={priceMin}
+												onChange={(e) => onPriceMinChange(e.target.value)}
+												onKeyDown={handleKeyDown}
+												className="h-10 flex-1 border-0 bg-transparent px-2 py-0 text-sm outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+												aria-label="Minimum price"
+											/>
+										</div>
+										<span className="text-muted-foreground">–</span>
+										<div className="flex flex-1 items-center rounded-full border-2 border-primary/50 bg-background focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20">
+											<span className="pl-4 text-sm text-muted-foreground">$</span>
+											<input
+												type="number"
+												min={rangeMin}
+												max={rangeMax}
+												step={1000}
+												value={priceMax}
+												onChange={(e) => onPriceMaxChange(e.target.value)}
+												onKeyDown={handleKeyDown}
+												className="h-10 flex-1 border-0 bg-transparent px-2 py-0 text-sm outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+												aria-label="Maximum price"
+											/>
+										</div>
+									</div>
+									<Popover.Close asChild>
+										<button
+											type="button"
+											className={SAVE_BUTTON_CLASS}
+											onClick={() => onPriceSave?.(priceMin, priceMax)}
+										>
+											Save
+										</button>
+									</Popover.Close>
+								</div>
+							</Popover.Content>
+						</Popover.Portal>
+					</Popover.Root>
+				</div>
+
+				<div className="min-w-0 lg:flex-1">
+					<Popover.Root>
+						<Popover.Trigger asChild>
+							<button
+								type="button"
+								className={`${FILTER_PILL_CLASS} w-full justify-center`}
+								aria-label={bedrooms ? bedsLabel : "Number of bedrooms filter"}
+							>
+								{bedsLabel}
+								<ChevronDown className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+							</button>
+						</Popover.Trigger>
+						<Popover.Portal>
+							<Popover.Content
+								sideOffset={8}
+								align="start"
+								className="z-[1100] w-[min(20rem,90vw)] rounded-xl border border-border bg-background p-4 shadow-lg outline-none"
+							>
+								<div className="space-y-3">
+									<p className="text-sm font-medium text-foreground">Number of bedrooms</p>
+									<div
+										className="flex overflow-hidden rounded-full border-2 border-primary/40"
+										role="group"
+										aria-label="Number of bedrooms"
+									>
+										{BEDROOM_OPTIONS.map(({ value, label }) => (
+											<button
+												key={value}
+												type="button"
+												onClick={() => onBedroomsChange(bedrooms === value ? null : value)}
+												className={`min-w-[4rem] flex-1 border-r border-primary/40 px-4 py-2 text-sm font-medium transition-colors last:border-r-0 ${
+													bedrooms === value
+														? "bg-primary text-primary-foreground"
+														: "bg-background text-primary hover:bg-primary/10"
+												}`}
+												aria-pressed={bedrooms === value}
+												aria-label={
+													value === "le2"
+														? "2 or fewer bedrooms"
+														: value === "3"
+															? "3 bedrooms"
+															: "4 or more bedrooms"
+												}
+											>
+												{label}
+											</button>
+										))}
+									</div>
+									<Popover.Close asChild>
+										<button
+											type="button"
+											className={SAVE_BUTTON_CLASS}
+											onClick={() => onBedsSave?.(bedrooms)}
+										>
+											Save
+										</button>
+									</Popover.Close>
+								</div>
+							</Popover.Content>
+						</Popover.Portal>
+					</Popover.Root>
+				</div>
+
+				<div className="min-w-0 lg:flex-1">
+					<Popover.Root>
+						<Popover.Trigger asChild>
+							<button
+								type="button"
+								className={`${FILTER_PILL_CLASS} w-full justify-center`}
+								aria-label={sortBy ? sortLabel : "Sort By"}
+							>
+								{sortLabel}
+								<ChevronDown className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+							</button>
+						</Popover.Trigger>
+						<Popover.Portal>
+							<Popover.Content
+								sideOffset={8}
+								align="start"
+								className="z-[1100] w-[min(20rem,90vw)] rounded-xl border border-border bg-background p-4 shadow-lg outline-none"
+							>
+								<div className="space-y-3">
+									<p className="text-sm font-medium text-foreground">Sort by</p>
+									<div className="flex flex-col gap-1">
+										{SORT_OPTIONS.map(({ value, label }) => (
+											<button
+												key={value}
+												type="button"
+												onClick={() => onSortChange(value)}
+												className={`rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors ${
+													sortBy === value
+														? "bg-primary text-primary-foreground"
+														: "bg-background text-foreground hover:bg-muted"
+												}`}
+												aria-pressed={sortBy === value}
+											>
+												{label}
+											</button>
+										))}
+									</div>
+									<Popover.Close asChild>
+										<button
+											type="button"
+											className={SAVE_BUTTON_CLASS}
+											onClick={() => onSortSave?.(sortBy)}
+										>
+											Save
+										</button>
+									</Popover.Close>
+								</div>
+							</Popover.Content>
+						</Popover.Portal>
+					</Popover.Root>
+				</div>
+			</div>
+		</div>
+	);
+}

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) {