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

package/dist/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.86.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.85.0...v1.86.0) (2026-03-10)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
+# [1.85.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.84.1...v1.85.0) (2026-03-10)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 ## [1.84.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.84.0...v1.84.1) (2026-03-10)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/README.md

@@ -76,6 +76,30 @@ Replace `<alias>` with your target org alias.
 sf data import tree --plan force-app/main/default/data/data-plan.json --target-org <alias>
 ```
 
+## Using setup-cli.mjs
+
+When this app is built (e.g. from the monorepo or from a published package), a `setup-cli.mjs` script is included at the project root. It runs the full setup in one go: login (if needed), deploy metadata, assign the `Property_Management_Access` permission set, prepare and import sample data, fetch GraphQL schema and run codegen, build the web app, and optionally start the dev server.
+
+Run from the **project root** (the directory that contains `force-app/`, `sfdx-project.json`, and `setup-cli.mjs`):
+
+```bash
+node setup-cli.mjs --target-org <alias>
+```
+
+Common options:
+
+| Option                | Description                                                      |
+| --------------------- | ---------------------------------------------------------------- |
+| `--skip-login`        | Skip browser login (org already authenticated)                   |
+| `--skip-data`         | Skip data preparation and import                                 |
+| `--skip-graphql`      | Skip GraphQL schema fetch and codegen                            |
+| `--skip-webapp-build` | Skip `npm install` and web app build                             |
+| `--skip-dev`          | Do not start the dev server at the end                           |
+| `--permset <name>`    | Permission set to assign (default: `Property_Management_Access`) |
+| `--app <name>`        | Web app folder name when multiple exist                          |
+
+For all options: `node setup-cli.mjs --help`.
+
 ## Configure Your Salesforce DX Project
 
 The `sfdx-project.json` file contains useful configuration information for your project. See [Salesforce DX Project Configuration](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_ws_config.htm) in the _Salesforce DX Developer Guide_ for details about this file.

package/dist/force-app/main/default/data/Property_Image__c.json

@@ -138,7 +138,7 @@
         "referenceId": "ImageRef12"
       },
       "Name": "Beverly Hills Estate Primary",
-      "Property__c": "@PropertyRef11",
+      "Property__c": "@PropertyRef10",
       "Image_URL__c": "https://images.unsplash.com/photo-1613490493576-7fde63acd811?w=800&h=600&fit=crop",
       "Image_Type__c": "Primary",
       "Display_Order__c": 1,

package/dist/force-app/main/default/data/Property_Listing__c.json

@@ -90,7 +90,7 @@
         "referenceId": "ListingRef7"
       },
       "Name": "Beverly Hills Estate",
-      "Property__c": "@PropertyRef11",
+      "Property__c": "@PropertyRef10",
       "Listing_Price__c": 9200000.0,
       "Listing_Status__c": "Active",
       "Featured__c": true,

package/dist/force-app/main/default/data/prepare-import-unique-fields.js

@@ -0,0 +1,85 @@
+#!/usr/bin/env node
+/**
+ * Updates unique fields in data JSON files so "sf data import tree" can be run
+ * repeatedly (e.g. after org already has data). Run before: node prepare-import-unique-fields.js
+ */
+const fs = require("fs");
+const path = require("path");
+const dataDir = __dirname;
+const runId = Date.now();
+const runSuffix2 = String(runId % 100).padStart(2, "0"); // 00-99 for Company_Code__c (10-char limit)
+
+// Contact: Email + LastName — unique so re-runs don't hit DUPLICATES_DETECTED (matching may use name)
+const contactPath = path.join(dataDir, "Contact.json");
+let contact = JSON.parse(fs.readFileSync(contactPath, "utf8"));
+contact.records.forEach((r, i) => {
+	if (r.Email && r.Email.includes("@"))
+		r.Email = r.Email.replace(/\+[0-9]+@/, "@").replace("@", "+" + runId + "@");
+	if (r.LastName)
+		r.LastName = r.LastName.replace(/\s*\[[0-9-]+\]$/, "") + " [" + runId + "-" + i + "]";
+});
+fs.writeFileSync(contactPath, JSON.stringify(contact, null, 2));
+
+// Agent__c: License_Number__c — strip any existing suffix and add run id + index (each record must be unique)
+const agentPath = path.join(dataDir, "Agent__c.json");
+let agent = JSON.parse(fs.readFileSync(agentPath, "utf8"));
+agent.records.forEach((r, i) => {
+	if (r.License_Number__c)
+		r.License_Number__c =
+			r.License_Number__c.replace(/-[0-9]+(-[0-9]+)?$/, "") + "-" + runId + "-" + i;
+});
+fs.writeFileSync(agentPath, JSON.stringify(agent, null, 2));
+
+// Property_Management_Company__c: Company_Code__c — max 10 chars, use 8-char base + 2-digit suffix
+const companyPath = path.join(dataDir, "Property_Management_Company__c.json");
+let company = JSON.parse(fs.readFileSync(companyPath, "utf8"));
+company.records.forEach((r) => {
+	if (r.Company_Code__c) r.Company_Code__c = r.Company_Code__c.slice(0, 8) + runSuffix2; // 8-char base + 2-digit = 10 chars max
+});
+fs.writeFileSync(companyPath, JSON.stringify(company, null, 2));
+
+// Property_Owner__c: Email__c — add +runId before @
+const ownerPath = path.join(dataDir, "Property_Owner__c.json");
+let owner = JSON.parse(fs.readFileSync(ownerPath, "utf8"));
+owner.records.forEach((r) => {
+	if (r.Email__c && r.Email__c.includes("@"))
+		r.Email__c = r.Email__c.replace(/\+[0-9]+@/, "@").replace("@", "+" + runId + "@");
+});
+fs.writeFileSync(ownerPath, JSON.stringify(owner, null, 2));
+
+// Remap @TenantRefN in dependent files to only use refs that exist in Tenant__c.json (fix UnresolvableRefsError)
+const tenantPath = path.join(dataDir, "Tenant__c.json");
+const tenantData = JSON.parse(fs.readFileSync(tenantPath, "utf8"));
+const validTenantRefs = tenantData.records.map((r) => r.attributes?.referenceId).filter(Boolean);
+if (validTenantRefs.length === 0) throw new Error("Tenant__c.json has no referenceIds");
+
+function remapTenantRef(refValue) {
+	if (typeof refValue !== "string" || !refValue.startsWith("@TenantRef")) return refValue;
+	const match = refValue.match(/^@(TenantRef)(\d+)$/);
+	if (!match) return refValue;
+	const n = parseInt(match[2], 10);
+	const idx = (n - 1) % validTenantRefs.length;
+	return "@" + validTenantRefs[idx];
+}
+
+const leasePath = path.join(dataDir, "Lease__c.json");
+let lease = JSON.parse(fs.readFileSync(leasePath, "utf8"));
+lease.records.forEach((r) => {
+	if (r.Tenant__c) r.Tenant__c = remapTenantRef(r.Tenant__c);
+});
+fs.writeFileSync(leasePath, JSON.stringify(lease, null, 2));
+
+const maintPath = path.join(dataDir, "Maintenance_Request__c.json");
+let maint = JSON.parse(fs.readFileSync(maintPath, "utf8"));
+maint.records.forEach((r) => {
+	if (r.User__c && String(r.User__c).startsWith("@TenantRef"))
+		r.User__c = remapTenantRef(r.User__c);
+});
+fs.writeFileSync(maintPath, JSON.stringify(maint, null, 2));
+
+console.log(
+	"Unique fields updated: runId=%s companySuffix=%s validTenants=%s",
+	runId,
+	runSuffix2,
+	validTenantRefs.length,
+);

package/dist/force-app/main/default/permissionsets/Property_Management_Access.permissionset-meta.xml

@@ -367,43 +367,36 @@
         <field>Agent__c.License_Number__c</field>
         <readable>true</readable>
     </fieldPermissions>
-
     <fieldPermissions>
         <editable>true</editable>
         <field>Agent__c.License_Expiry__c</field>
         <readable>true</readable>
     </fieldPermissions>
-
     <fieldPermissions>
         <editable>true</editable>
         <field>Agent__c.Agent_Type__c</field>
         <readable>true</readable>
     </fieldPermissions>
-
     <fieldPermissions>
         <editable>true</editable>
         <field>Agent__c.Territory__c</field>
         <readable>true</readable>
     </fieldPermissions>
-
     <fieldPermissions>
         <editable>true</editable>
         <field>Agent__c.Emergency_Alt__c</field>
         <readable>true</readable>
     </fieldPermissions>
-
     <fieldPermissions>
         <editable>true</editable>
         <field>Agent__c.Language__c</field>
         <readable>true</readable>
     </fieldPermissions>
-
     <fieldPermissions>
         <editable>true</editable>
         <field>Agent__c.Availability__c</field>
         <readable>true</readable>
     </fieldPermissions>
-
     <fieldPermissions>
         <editable>true</editable>
         <field>Agent__c.Office_Location__c</field>

package/dist/force-app/main/default/webapplications/appreactsampleb2x/index.html

@@ -4,6 +4,12 @@
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap"
+			rel="stylesheet"
+		/>
 		<title>ZENLEASE</title>
 	</head>
 	<body>

package/dist/force-app/main/default/webapplications/appreactsampleb2x/package.json

@@ -15,8 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.84.1",
-    "@salesforce/webapp-experimental": "^1.84.1",
+    "@salesforce/sdk-data": "^1.86.0",
+    "@salesforce/webapp-experimental": "^1.86.0",
     "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-form": "^1.28.4",
     "@types/leaflet": "^1.9.21",
@@ -43,7 +43,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-webapp-experimental": "^1.84.1",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.86.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

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

@@ -1,8 +1,8 @@
 /**
  * Create Application__c (property application) record via Salesforce UI API.
- * Uses only fields that exist in all orgs (Property__c, Status__c, Start_Date__c,
- * Employment_Info__c, References__c). Applicant contact details are stored in
- * Employment_Info__c so no data is lost if custom contact fields aren’t deployed.
+ * Uses only fields that exist in the shared schema (Property__c, Status__c, Start_Date__c,
+ * Employment__c, References__c). Applicant contact details are stored in
+ * Employment__c so no data is lost if custom contact fields aren’t deployed.
  */
 import { createRecord } from "@salesforce/webapp-experimental/api";
 
@@ -17,11 +17,11 @@ export interface ApplicationRecordInput {
 	Phone__c?: string | null;
 	Start_Date__c?: string | null;
 	Preferred_Term__c?: string | null;
-	Employment_Info__c?: string | null;
+	Employment__c?: string | null;
 	References__c?: string | null;
 }
 
-function buildEmploymentInfoBlob(input: ApplicationRecordInput): string {
+function buildEmploymentBlob(input: ApplicationRecordInput): string {
 	const lines: string[] = [];
 	const contact = [
 		input.First_Name__c,
@@ -33,13 +33,13 @@ function buildEmploymentInfoBlob(input: ApplicationRecordInput): string {
 		.filter(Boolean)
 		.join(", ");
 	if (contact) lines.push(`Contact: ${contact}`);
-	if (input.Employment_Info__c?.trim()) lines.push(input.Employment_Info__c.trim());
+	if (input.Employment__c?.trim()) lines.push(input.Employment__c.trim());
 	return lines.join("\n\n") || "";
 }
 
 /**
  * Creates an Application__c record. Uses only core fields to avoid POST_BODY_PARSE_ERROR
- * when custom contact fields are not yet in the org. Contact + employment text go into Employment_Info__c.
+ * when custom contact fields are not yet in the org. Contact + employment text go into Employment__c.
  */
 export async function createApplicationRecord(
 	input: ApplicationRecordInput,
@@ -55,9 +55,9 @@ export async function createApplicationRecord(
 	if (input.Start_Date__c != null && input.Start_Date__c !== "") {
 		fields.Start_Date__c = input.Start_Date__c;
 	}
-	const employmentBlob = buildEmploymentInfoBlob(input);
+	const employmentBlob = buildEmploymentBlob(input);
 	if (employmentBlob) {
-		fields.Employment_Info__c = employmentBlob;
+		fields.Employment__c = employmentBlob;
 	}
 	if (input.References__c != null && input.References__c !== "") {
 		fields.References__c = input.References__c;

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/api/graphql-operations-types.ts

@@ -0,0 +1,296 @@
+/**
+ * Generated operation types for B2X GraphQL queries.
+ * Regenerate with codegen (e.g. npm run graphql:codegen) when schema or operations change.
+ */
+
+// ---- MaintenanceRequests ----
+export interface MaintenanceRequestsQueryVariables {
+	first: number;
+	after?: string | null;
+}
+
+export interface MaintenanceRequestsQuery {
+	uiapi?: {
+		query?: {
+			Maintenance_Request__c?: {
+				edges?: Array<{
+					node?: {
+						Id: string;
+						ApiName?: string | null;
+						Name?: { value?: unknown; displayValue?: string | null } | null;
+						Description__c?: { value?: unknown; displayValue?: string | null } | null;
+						Type__c?: { value?: unknown; displayValue?: string | null } | null;
+						Priority__c?: { value?: unknown; displayValue?: string | null } | null;
+						Status__c?: { value?: unknown; displayValue?: string | null } | null;
+						Scheduled__c?: { value?: unknown; displayValue?: string | null } | null;
+						User__r?: {
+							Name?: { value?: unknown; displayValue?: string | null } | null;
+						} | null;
+					} | null;
+				}> | null;
+				pageInfo?: {
+					hasNextPage?: boolean | null;
+					endCursor?: string | null;
+				} | null;
+			} | null;
+		} | null;
+	} | null;
+}
+
+// ---- PropertyListings ----
+/** Single-field condition; Property__r filters on related Property (name, address, bedrooms). */
+export type PropertyListingsWhereCondition = {
+	Name?: { like: string };
+	Listing_Status__c?: { like: string };
+	Listing_Price__c?: { gte?: number; lte?: number };
+	Property__r?: {
+		Name?: { like: string };
+		Address__c?: { like: string };
+		Bedrooms__c?: { gte?: number };
+	};
+};
+/** GraphQL ResultOrder values for orderBy (use ResultOrder.Asc / ResultOrder.Desc). */
+export const ResultOrder = {
+	Asc: "ASC",
+	Desc: "DESC",
+} as const;
+export type ResultOrder = (typeof ResultOrder)[keyof typeof ResultOrder];
+
+/** orderBy for Property_Listing__c (e.g. { Listing_Price__c: { order: ResultOrder.Asc } }). */
+export type PropertyListingsOrderBy = {
+	Listing_Price__c?: { order: ResultOrder };
+	Property__r?: { Bedrooms__c?: { order: ResultOrder } };
+};
+
+/** Where clause: condition, or { and: conditions[] }, or { or: conditions[] }. */
+export interface PropertyListingsQueryVariables {
+	where?:
+		| PropertyListingsWhereCondition
+		| { and: Array<PropertyListingsWhereCondition | { or: PropertyListingsWhereCondition[] }> }
+		| { or: PropertyListingsWhereCondition[] };
+	first: number;
+	after?: string | null;
+	orderBy?: PropertyListingsOrderBy | null;
+}
+
+export interface PropertyListingsQuery {
+	uiapi?: {
+		query?: {
+			Property_Listing__c?: {
+				edges?: Array<{
+					node?: {
+						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;
+						Property__r?: {
+							Name?: { value?: string | null; displayValue?: string | null } | null;
+							Address__c?: { value?: string | null; displayValue?: string | null } | null;
+							Bedrooms__c?: { value?: number | null; displayValue?: string | null } | null;
+						} | null;
+					} | null;
+					cursor?: string | null;
+				}> | null;
+				pageInfo?: {
+					hasNextPage?: boolean | null;
+					hasPreviousPage?: boolean | null;
+					startCursor?: string | null;
+					endCursor?: string | null;
+				} | null;
+				totalCount?: number | null;
+			} | null;
+		} | null;
+	} | null;
+}
+
+// ---- ListingById ----
+export interface ListingByIdQueryVariables {
+	listingId: string;
+}
+
+export interface ListingByIdQuery {
+	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;
+}
+
+// ---- PropertyById ----
+export interface PropertyByIdQueryVariables {
+	propertyId: string;
+}
+
+export interface PropertyByIdQuery {
+	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;
+						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;
+						Sq_Ft__c?: { value?: unknown; displayValue?: string | null } | null;
+						Description__c?: {
+							value?: string | null;
+							displayValue?: string | null;
+						} | null;
+					} | null;
+				}> | null;
+			} | null;
+		} | null;
+	} | null;
+}
+
+// ---- PropertyImages ----
+export interface PropertyImagesQueryVariables {
+	propertyId: string;
+}
+
+export interface PropertyImagesQuery {
+	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;
+}
+
+// ---- PropertyCosts ----
+export interface PropertyCostsQueryVariables {
+	propertyId: string;
+}
+
+export interface PropertyCostsQuery {
+	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;
+}
+
+// ---- PropertyFeatures ----
+export interface PropertyFeaturesQueryVariables {
+	propertyId: string;
+}
+
+export interface PropertyFeaturesQuery {
+	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;
+}
+
+// ---- GetUserInfo ----
+export interface GetUserInfoQuery {
+	uiapi?: {
+		query?: {
+			User?: {
+				edges?: Array<{
+					node?: {
+						Id: string;
+						Name?: { value?: string | null } | null;
+					} | null;
+				}> | null;
+			} | null;
+		} | null;
+	} | null;
+}

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

@@ -1,17 +1,22 @@
 /**
- * GraphQL client using getDataSDK (replaces legacy executeGraphQL from webapp-experimental).
+ * Thin GraphQL client: getDataSDK + data.graphql with centralized error handling.
+ * Use with gql-tagged queries and generated operation types for type-safe calls.
  */
 import { getDataSDK } from "@salesforce/sdk-data";
 
-export async function executeGraphQL<T>(
-	query: string,
-	variables?: Record<string, unknown>,
-): Promise<T> {
+export async function executeGraphQL<TData, TVariables = Record<string, unknown>>(
+	query: string | { kind: string; definitions: unknown[] },
+	variables?: TVariables,
+): Promise<TData> {
 	const data = await getDataSDK();
-	const response = await data.graphql?.<T>(query, variables);
+	// 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 T;
+	return (response?.data ?? {}) as TData;
 }