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

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

@@ -0,0 +1,497 @@
+/**
+ * GraphQL queries for Property_Listing__c detail and related Property__c data:
+ * Property_Image__c, Property_Cost__c, Property_Feature__c.
+ */
+import { executeGraphQL } from "./graphqlClient.js";
+
+// ---- Listing by Id ----
+const LISTING_QUERY = /* GraphQL */ `
+	query ListingById($listingId: ID!) {
+		uiapi {
+			query {
+				Property_Listing__c(where: { Id: { eq: $listingId } }, first: 1) {
+					edges {
+						node {
+							Id
+							Name {
+								value
+								displayValue
+							}
+							Listing_Price__c {
+								value
+								displayValue
+							}
+							Listing_Status__c {
+								value
+								displayValue
+							}
+							Property__c {
+								value
+								displayValue
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
+
+export interface ListingDetail {
+	id: string;
+	name: string | null;
+	listingPrice: number | string | null;
+	listingStatus: string | null;
+	propertyId: string | null;
+}
+
+export async function fetchListingById(listingId: string): Promise<ListingDetail | null> {
+	const res = await executeGraphQL<{
+		uiapi?: {
+			query?: {
+				Property_Listing__c?: {
+					edges?: Array<{
+						node?: {
+							Id: string;
+							Name?: { value?: string | null; displayValue?: string | null } | null;
+							Listing_Price__c?: { value?: unknown; displayValue?: string | null } | null;
+							Listing_Status__c?: { value?: string | null; displayValue?: string | null } | null;
+							Property__c?: { value?: string | null; displayValue?: string | null } | null;
+						} | null;
+					}> | null;
+				} | null;
+			} | null;
+		} | null;
+	}>(LISTING_QUERY, { listingId });
+	const node = res.uiapi?.query?.Property_Listing__c?.edges?.[0]?.node;
+	if (!node) return null;
+	const prop = node.Property__c;
+	return {
+		id: node.Id,
+		name: node.Name?.value != null ? String(node.Name.value) : (node.Name?.displayValue ?? null),
+		listingPrice:
+			node.Listing_Price__c?.value != null
+				? ((typeof node.Listing_Price__c.value === "number"
+						? node.Listing_Price__c.value
+						: node.Listing_Price__c.displayValue) ?? null)
+				: null,
+		listingStatus:
+			node.Listing_Status__c?.value != null
+				? String(node.Listing_Status__c.value)
+				: (node.Listing_Status__c?.displayValue ?? null),
+		propertyId: prop?.value != null ? String(prop.value) : (prop?.displayValue ?? null),
+	};
+}
+
+// ---- Property by Id ----
+const PROPERTY_QUERY = /* GraphQL */ `
+	query PropertyById($propertyId: ID!) {
+		uiapi {
+			query {
+				Property__c(where: { Id: { eq: $propertyId } }, first: 1) {
+					edges {
+						node {
+							Id
+							Name {
+								value
+								displayValue
+							}
+							Address__c {
+								value
+								displayValue
+							}
+							Property_Type__c {
+								value
+								displayValue
+							}
+							Monthly_Rent__c {
+								value
+								displayValue
+							}
+							Bedrooms__c {
+								value
+								displayValue
+							}
+							Bathrooms__c {
+								value
+								displayValue
+							}
+							Square_Footage__c {
+								value
+								displayValue
+							}
+							Description__c {
+								value
+								displayValue
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
+
+export interface PropertyDetail {
+	id: string;
+	name: string | null;
+	address: string | null;
+	propertyType: string | null;
+	monthlyRent: number | string | null;
+	bedrooms: number | string | null;
+	bathrooms: number | string | null;
+	squareFootage: number | string | null;
+	description: string | null;
+}
+
+export async function fetchPropertyById(propertyId: string): Promise<PropertyDetail | null> {
+	const res = await executeGraphQL<{
+		uiapi?: {
+			query?: {
+				Property__c?: {
+					edges?: Array<{
+						node?: {
+							Id: string;
+							Name?: { value?: string | null; displayValue?: string | null } | null;
+							Address__c?: { value?: string | null; displayValue?: string | null } | null;
+							Property_Type__c?: { value?: string | null; displayValue?: string | null } | null;
+							Monthly_Rent__c?: { value?: unknown; displayValue?: string | null } | null;
+							Bedrooms__c?: { value?: unknown; displayValue?: string | null } | null;
+							Bathrooms__c?: { value?: unknown; displayValue?: string | null } | null;
+							Square_Footage__c?: { value?: unknown; displayValue?: string | null } | null;
+							Description__c?: { value?: string | null; displayValue?: string | null } | null;
+						} | null;
+					}> | null;
+				} | null;
+			} | null;
+		} | null;
+	}>(PROPERTY_QUERY, { propertyId });
+	const node = res.uiapi?.query?.Property__c?.edges?.[0]?.node;
+	if (!node) return null;
+	const v = (f: { value?: unknown; displayValue?: string | null } | null | undefined) =>
+		f?.value != null
+			? typeof f.value === "number"
+				? f.value
+				: String(f.value)
+			: (f?.displayValue ?? null);
+	return {
+		id: node.Id,
+		name: node.Name?.value != null ? String(node.Name.value) : (node.Name?.displayValue ?? null),
+		address:
+			node.Address__c?.value != null
+				? String(node.Address__c.value)
+				: (node.Address__c?.displayValue ?? null),
+		propertyType:
+			node.Property_Type__c?.value != null
+				? String(node.Property_Type__c.value)
+				: (node.Property_Type__c?.displayValue ?? null),
+		monthlyRent: v(node.Monthly_Rent__c),
+		bedrooms: v(node.Bedrooms__c),
+		bathrooms: v(node.Bathrooms__c),
+		squareFootage: v(node.Square_Footage__c),
+		description:
+			node.Description__c?.value != null
+				? String(node.Description__c.value)
+				: (node.Description__c?.displayValue ?? null),
+	};
+}
+
+/** Fetch Address__c for multiple properties (for map markers). Returns id -> address. */
+export async function fetchPropertyAddresses(
+	propertyIds: string[],
+): Promise<Record<string, string>> {
+	const uniq = [...new Set(propertyIds)].filter(Boolean);
+	const entries = await Promise.all(
+		uniq.map(async (id) => {
+			const p = await fetchPropertyById(id);
+			return p?.address ? ([id, p.address] as const) : null;
+		}),
+	);
+	return Object.fromEntries(entries.filter((e): e is [string, string] => e != null));
+}
+
+// ---- Property Images by Property Id ----
+const IMAGES_QUERY = /* GraphQL */ `
+	query PropertyImages($propertyId: ID!) {
+		uiapi {
+			query {
+				Property_Image__c(where: { Property__c: { eq: $propertyId } }, first: 50) {
+					edges {
+						node {
+							Id
+							Name {
+								value
+								displayValue
+							}
+							Image_URL__c {
+								value
+								displayValue
+							}
+							Image_Type__c {
+								value
+								displayValue
+							}
+							Display_Order__c {
+								value
+								displayValue
+							}
+							Alt_Text__c {
+								value
+								displayValue
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
+
+export interface PropertyImageRecord {
+	id: string;
+	name: string | null;
+	imageUrl: string | null;
+	imageType: string | null;
+	displayOrder: number | null;
+	altText: string | null;
+}
+
+export async function fetchImagesByPropertyId(propertyId: string): Promise<PropertyImageRecord[]> {
+	const res = await executeGraphQL<{
+		uiapi?: {
+			query?: {
+				Property_Image__c?: {
+					edges?: Array<{
+						node?: {
+							Id: string;
+							Name?: { value?: string | null; displayValue?: string | null } | null;
+							Image_URL__c?: { value?: string | null; displayValue?: string | null } | null;
+							Image_Type__c?: { value?: string | null; displayValue?: string | null } | null;
+							Display_Order__c?: { value?: unknown; displayValue?: string | null } | null;
+							Alt_Text__c?: { value?: string | null; displayValue?: string | null } | null;
+						} | null;
+					}> | null;
+				} | null;
+			} | null;
+		} | null;
+	}>(IMAGES_QUERY, { propertyId });
+	const edges = res.uiapi?.query?.Property_Image__c?.edges ?? [];
+	const list: PropertyImageRecord[] = [];
+	for (const e of edges) {
+		const n = e?.node;
+		if (!n) continue;
+		const order = n.Display_Order__c?.value;
+		list.push({
+			id: n.Id,
+			name: n.Name?.value != null ? String(n.Name.value) : (n.Name?.displayValue ?? null),
+			imageUrl:
+				n.Image_URL__c?.value != null
+					? String(n.Image_URL__c.value)
+					: (n.Image_URL__c?.displayValue ?? null),
+			imageType:
+				n.Image_Type__c?.value != null
+					? String(n.Image_Type__c.value)
+					: (n.Image_Type__c?.displayValue ?? null),
+			displayOrder: typeof order === "number" ? order : order != null ? Number(order) : null,
+			altText:
+				n.Alt_Text__c?.value != null
+					? String(n.Alt_Text__c.value)
+					: (n.Alt_Text__c?.displayValue ?? null),
+		});
+	}
+	list.sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0));
+	return list;
+}
+
+// ---- Property Costs by Property Id ----
+const COSTS_QUERY = /* GraphQL */ `
+	query PropertyCosts($propertyId: ID!) {
+		uiapi {
+			query {
+				Property_Cost__c(where: { Property__c: { eq: $propertyId } }, first: 100) {
+					edges {
+						node {
+							Id
+							Cost_Category__c {
+								value
+								displayValue
+							}
+							Cost_Amount__c {
+								value
+								displayValue
+							}
+							Cost_Date__c {
+								value
+								displayValue
+							}
+							Description__c {
+								value
+								displayValue
+							}
+							Vendor__c {
+								value
+								displayValue
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
+
+export interface PropertyCostRecord {
+	id: string;
+	category: string | null;
+	amount: number | string | null;
+	date: string | null;
+	description: string | null;
+	vendor: string | null;
+}
+
+export async function fetchCostsByPropertyId(propertyId: string): Promise<PropertyCostRecord[]> {
+	const res = await executeGraphQL<{
+		uiapi?: {
+			query?: {
+				Property_Cost__c?: {
+					edges?: Array<{
+						node?: {
+							Id: string;
+							Cost_Category__c?: { value?: string | null; displayValue?: string | null } | null;
+							Cost_Amount__c?: { value?: unknown; displayValue?: string | null } | null;
+							Cost_Date__c?: { value?: string | null; displayValue?: string | null } | null;
+							Description__c?: { value?: string | null; displayValue?: string | null } | null;
+							Vendor__c?: { value?: string | null; displayValue?: string | null } | null;
+						} | null;
+					}> | null;
+				} | null;
+			} | null;
+		} | null;
+	}>(COSTS_QUERY, { propertyId });
+	const edges = res.uiapi?.query?.Property_Cost__c?.edges ?? [];
+	const list: PropertyCostRecord[] = [];
+	for (const e of edges) {
+		const n = e?.node;
+		if (!n) continue;
+		const amt = n.Cost_Amount__c?.value;
+		list.push({
+			id: n.Id,
+			category:
+				n.Cost_Category__c?.value != null
+					? String(n.Cost_Category__c.value)
+					: (n.Cost_Category__c?.displayValue ?? null),
+			amount:
+				typeof amt === "number"
+					? amt
+					: amt != null
+						? Number(amt)
+						: (n.Cost_Amount__c?.displayValue ?? null),
+			date:
+				n.Cost_Date__c?.value != null
+					? String(n.Cost_Date__c.value)
+					: (n.Cost_Date__c?.displayValue ?? null),
+			description:
+				n.Description__c?.value != null
+					? String(n.Description__c.value)
+					: (n.Description__c?.displayValue ?? null),
+			vendor:
+				n.Vendor__c?.value != null
+					? String(n.Vendor__c.value)
+					: (n.Vendor__c?.displayValue ?? null),
+		});
+	}
+	return list;
+}
+
+// ---- Property Features by Property Id ----
+const FEATURES_QUERY = /* GraphQL */ `
+	query PropertyFeatures($propertyId: ID!) {
+		uiapi {
+			query {
+				Property_Feature__c(where: { Property__c: { eq: $propertyId } }, first: 100) {
+					edges {
+						node {
+							Id
+							Name {
+								value
+								displayValue
+							}
+							Feature_Category__c {
+								value
+								displayValue
+							}
+							Description__c {
+								value
+								displayValue
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
+
+export interface PropertyFeatureRecord {
+	id: string;
+	name: string | null;
+	category: string | null;
+	description: string | null;
+}
+
+export async function fetchFeaturesByPropertyId(
+	propertyId: string,
+): Promise<PropertyFeatureRecord[]> {
+	const res = await executeGraphQL<{
+		uiapi?: {
+			query?: {
+				Property_Feature__c?: {
+					edges?: Array<{
+						node?: {
+							Id: string;
+							Name?: { value?: string | null; displayValue?: string | null } | null;
+							Feature_Category__c?: { value?: string | null; displayValue?: string | null } | null;
+							Description__c?: { value?: string | null; displayValue?: string | null } | null;
+						} | null;
+					}> | null;
+				} | null;
+			} | null;
+		} | null;
+	}>(FEATURES_QUERY, { propertyId });
+	const edges = res.uiapi?.query?.Property_Feature__c?.edges ?? [];
+	const list: PropertyFeatureRecord[] = [];
+	for (const e of edges) {
+		const n = e?.node;
+		if (!n) continue;
+		list.push({
+			id: n.Id,
+			name: n.Name?.value != null ? String(n.Name.value) : (n.Name?.displayValue ?? null),
+			category:
+				n.Feature_Category__c?.value != null
+					? String(n.Feature_Category__c.value)
+					: (n.Feature_Category__c?.displayValue ?? null),
+			description:
+				n.Description__c?.value != null
+					? String(n.Description__c.value)
+					: (n.Description__c?.displayValue ?? null),
+		});
+	}
+	return list;
+}
+
+/**
+ * Fetch primary image URL per property (for search result thumbnails).
+ * Returns a map of propertyId -> image URL. Uses first Image_Type__c = 'Primary' or first image.
+ */
+export async function fetchPrimaryImagesByPropertyIds(
+	propertyIds: string[],
+): Promise<Record<string, string>> {
+	const map: Record<string, string> = {};
+	const uniq = [...new Set(propertyIds)].filter(Boolean);
+	for (const id of uniq) {
+		const images = await fetchImagesByPropertyId(id);
+		const primary = images.find((i) => i.imageType === "Primary") ?? images[0];
+		if (primary?.imageUrl) map[id] = primary.imageUrl;
+	}
+	return map;
+}

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

@@ -0,0 +1,190 @@
+/**
+ * Property Listing search via Salesforce GraphQL.
+ * Replaces REST keyword search with uiapi.query.Property_Listing__c.
+ */
+import { executeGraphQL } from "./graphqlClient.js";
+import type {
+	SearchResultRecord,
+	SearchResultRecordData,
+	FieldValue,
+} from "@/types/search/searchResults";
+
+const OBJECT_API_NAME = "Property_Listing__c";
+
+/** GraphQL node shape: fields are { value?, displayValue? }. Only fields that exist in the org's UI API schema are queried. */
+type PropertyListingNode = {
+	Id: string;
+	ApiName?: string | null;
+	Name?: { value?: string | null; displayValue?: string | null } | null;
+	Listing_Price__c?: { value?: number | null; displayValue?: string | null } | null;
+	Listing_Status__c?: { value?: string | null; displayValue?: string | null } | null;
+	Property__c?: { value?: string | null; displayValue?: string | null } | null;
+};
+
+interface PropertyListingGraphQLResponse {
+	uiapi?: {
+		query?: {
+			Property_Listing__c?: {
+				edges?: ({ node?: PropertyListingNode | null; cursor?: string | null } | null)[] | null;
+				pageInfo?: {
+					hasNextPage?: boolean | null;
+					hasPreviousPage?: boolean | null;
+					startCursor?: string | null;
+					endCursor?: string | null;
+				} | null;
+				totalCount?: number | null;
+			} | null;
+		} | null;
+	} | null;
+}
+
+function nodeToFieldValue(
+	fieldObj: { value?: unknown; displayValue?: string | null } | null | undefined,
+): FieldValue {
+	if (fieldObj == null) {
+		return { displayValue: null, value: null };
+	}
+	const value = fieldObj.value ?? null;
+	const displayValue = fieldObj.displayValue ?? (value != null ? String(value) : null);
+	return { displayValue, value };
+}
+
+function nodeToSearchResultRecordData(node: PropertyListingNode): SearchResultRecordData {
+	const fields: Record<string, FieldValue> = {};
+	const fieldKeys: (keyof PropertyListingNode)[] = [
+		"Name",
+		"Listing_Price__c",
+		"Listing_Status__c",
+		"Property__c",
+	];
+	for (const key of fieldKeys) {
+		if (key === "Id" || key === "ApiName") continue;
+		const raw = node[key];
+		if (raw != null && typeof raw === "object" && "value" in raw) {
+			fields[key] = nodeToFieldValue(raw as { value?: unknown; displayValue?: string | null });
+		}
+	}
+	return {
+		id: node.Id,
+		apiName: typeof node.ApiName === "string" ? node.ApiName : OBJECT_API_NAME,
+		eTag: "",
+		fields,
+		childRelationships: {},
+		weakEtag: 0,
+	};
+}
+
+/** Query with optional search term (Name like) and pagination. When searchTerm is empty, no where clause = show all.
+ * Uses Property_Listing__c_Filter (object API name + _Filter). No orderBy to avoid org schema mismatches.
+ * ApiName is a leaf (String!); only fields that exist in the org's UI API schema are selected. */
+const PROPERTY_LISTINGS_QUERY = /* GraphQL */ `
+	query PropertyListings($where: Property_Listing__c_Filter, $first: Int!, $after: String) {
+		uiapi {
+			query {
+				Property_Listing__c(where: $where, first: $first, after: $after) {
+					edges {
+						node {
+							Id
+							ApiName
+							Name {
+								value
+								displayValue
+							}
+							Listing_Price__c {
+								value
+								displayValue
+							}
+							Listing_Status__c {
+								value
+								displayValue
+							}
+							Property__c {
+								value
+								displayValue
+							}
+						}
+						cursor
+					}
+					pageInfo {
+						hasNextPage
+						hasPreviousPage
+						startCursor
+						endCursor
+					}
+					totalCount
+				}
+			}
+		}
+	}
+`;
+
+export interface PropertyListingGraphQLResult {
+	records: SearchResultRecord[];
+	nextPageToken: string | null;
+	previousPageToken: string | null;
+	endCursor: string | null;
+	totalCount: number | null;
+}
+
+/**
+ * Fetch Property_Listing__c records via GraphQL.
+ * When searchTerm is empty, returns all records (no where clause).
+ */
+export async function queryPropertyListingsGraphQL(
+	searchTerm: string,
+	pageSize: number,
+	afterCursor: string | null,
+	_signal?: AbortSignal,
+): Promise<PropertyListingGraphQLResult> {
+	const where =
+		searchTerm.trim().length > 0 ? { Name: { like: `%${searchTerm.trim()}%` } } : undefined;
+
+	const variables: {
+		where?: { Name: { like: string } };
+		first: number;
+		after?: string | null;
+	} = {
+		first: Math.min(Math.max(pageSize, 1), 200),
+	};
+	if (where) variables.where = where;
+	if (afterCursor) variables.after = afterCursor;
+
+	const response = await executeGraphQL<PropertyListingGraphQLResponse>(
+		PROPERTY_LISTINGS_QUERY,
+		variables as Record<string, unknown>,
+	);
+
+	const conn = response.uiapi?.query?.Property_Listing__c;
+	const edges = conn?.edges ?? [];
+	const pageInfo = conn?.pageInfo;
+
+	type EdgeItem = { node?: PropertyListingNode | null; cursor?: string | null } | null;
+	const records: SearchResultRecord[] = edges
+		.filter(
+			(e: EdgeItem): e is { node: PropertyListingNode; cursor?: string | null } => e?.node != null,
+		)
+		.map((e: { node: PropertyListingNode; cursor?: string | null }) => {
+			const data = nodeToSearchResultRecordData(e.node);
+			return {
+				record: data,
+				highlightInfo: { fields: {}, snippet: null },
+				searchInfo: { isPromoted: false, isSpellCorrected: false },
+			};
+		});
+
+	return {
+		records,
+		nextPageToken: pageInfo?.hasNextPage ? (pageInfo.endCursor ?? null) : null,
+		previousPageToken: pageInfo?.hasPreviousPage ? (pageInfo.startCursor ?? null) : null,
+		endCursor: pageInfo?.endCursor ?? null,
+		totalCount: conn?.totalCount ?? null,
+	};
+}
+
+/** Static columns for Property_Listing__c list (only fields exposed in the GraphQL query). */
+export const PROPERTY_LISTING_COLUMNS = [
+	{ fieldApiName: "Name", label: "Name", searchable: true, sortable: true },
+	{ fieldApiName: "Listing_Price__c", label: "Listing Price", searchable: false, sortable: true },
+	{ fieldApiName: "Listing_Status__c", label: "Status", searchable: false, sortable: true },
+	{ fieldApiName: "Property__c", label: "Property", searchable: false, sortable: true },
+] as const;