@salesforce/webapp-template-app-react-sample-b2x-experimental 1.88.1 → 1.89.0

package/dist/CHANGELOG.md

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

package/dist/force-app/main/default/digitalExperiences/site/appreactsampleb2x1/sfdc_cms__site/appreactsampleb2x1/content.json

@@ -4,7 +4,7 @@
   "contentBody": {
     "authenticationType": "AUTHENTICATED_WITH_PUBLIC_ACCESS_ENABLED",
     "appContainer": true,
-    "appSpace": "c/appreactsampleb2x"
+    "appSpace": "c-appreactsampleb2x"
   },
   "urlName": "appreactsampleb2x"
 }

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.88.1",
-    "@salesforce/webapp-experimental": "^1.88.1",
+    "@salesforce/sdk-data": "^1.89.0",
+    "@salesforce/webapp-experimental": "^1.89.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.88.1",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.89.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,6 @@
 /**
  * Create Application__c (property application) record via Salesforce UI API.
- * 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.
+ * Uses User__c to link the application to the authenticated user.
  */
 import { createRecord } from "@salesforce/webapp-experimental/api";
 
@@ -10,37 +8,13 @@ const OBJECT_API_NAME = "Application__c";
 
 export interface ApplicationRecordInput {
 	Property__c: string | null;
+	User__c: string;
 	Status__c?: string;
-	First_Name__c?: string | null;
-	Last_Name__c?: string | null;
-	Email__c?: string | null;
-	Phone__c?: string | null;
 	Start_Date__c?: string | null;
-	Preferred_Term__c?: string | null;
 	Employment__c?: string | null;
 	References__c?: string | null;
 }
 
-function buildEmploymentBlob(input: ApplicationRecordInput): string {
-	const lines: string[] = [];
-	const contact = [
-		input.First_Name__c,
-		input.Last_Name__c,
-		input.Email__c,
-		input.Phone__c,
-		input.Preferred_Term__c,
-	]
-		.filter(Boolean)
-		.join(", ");
-	if (contact) lines.push(`Contact: ${contact}`);
-	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__c.
- */
 export async function createApplicationRecord(
 	input: ApplicationRecordInput,
 ): Promise<{ id: string }> {
@@ -49,15 +23,17 @@ export async function createApplicationRecord(
 	if (input.Property__c != null && input.Property__c !== "") {
 		fields.Property__c = input.Property__c;
 	}
+	if (input.User__c) {
+		fields.User__c = input.User__c;
+	}
 	if (input.Status__c != null && input.Status__c !== "") {
 		fields.Status__c = input.Status__c;
 	}
 	if (input.Start_Date__c != null && input.Start_Date__c !== "") {
 		fields.Start_Date__c = input.Start_Date__c;
 	}
-	const employmentBlob = buildEmploymentBlob(input);
-	if (employmentBlob) {
-		fields.Employment__c = employmentBlob;
+	if (input.Employment__c != null && input.Employment__c !== "") {
+		fields.Employment__c = input.Employment__c;
 	}
 	if (input.References__c != null && input.References__c !== "") {
 		fields.References__c = input.References__c;

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/authentication/api/userProfileApi.ts

@@ -16,6 +16,10 @@ const USER_PROFILE_FIELDS_FULL = `
     PostalCode { value }
     Country { value }`;
 
+const USER_CONTACT_FIELDS = `
+    Id
+    ContactId { value }`;
+
 function getUserProfileQuery(fields: string): string {
 	return `
     query GetUserProfile($userId: ID) {
@@ -58,11 +62,21 @@ export async function fetchUserProfile<T>(
 	fields: string = USER_PROFILE_FIELDS_FULL,
 ): Promise<T> {
 	const data = await getDataSDK();
-	const response: any = await data.graphql?.(getUserProfileQuery(fields), { userId });
+	const response: any = await data.graphql?.(getUserProfileQuery(fields), {
+		userId,
+	});
 	throwOnGraphQLErrors(response);
 	return flattenGraphQLRecord<T>(response?.data?.uiapi?.query?.User?.edges?.[0]?.node);
 }
 
+/**
+ * Fetches the user's associated contact record ID via GraphQL and returns a flattened record.
+ * @param userId - The Salesforce User Id.
+ */
+export async function fetchUserContact<T>(userId: string): Promise<T> {
+	return fetchUserProfile<T>(userId, USER_CONTACT_FIELDS);
+}
+
 /**
  * Updates the user profile via GraphQL and returns the flattened updated record.
  * @param userId - The Salesforce User Id.

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

@@ -1,19 +1,20 @@
 import { useSearchParams, Link } from "react-router";
-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 { useCallback, useEffect, useState, type ChangeEvent, type SubmitEvent } 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,
 	fetchPrimaryImagesByPropertyIds,
 } from "@/api/propertyDetailGraphQL";
 import { createApplicationRecord } from "@/api/applicationApi";
-
-const PREFERRED_TERM_OPTIONS = ["", "1 month", "6 months", "12 months"];
+import { useAuth } from "../features/authentication/context/AuthContext";
+import { fetchUserContact } from "../features/authentication/api/userProfileApi";
 
 export default function Application() {
+	const { user } = useAuth();
 	const [searchParams] = useSearchParams();
 	const listingId = searchParams.get("listingId") ?? "";
 
@@ -21,24 +22,33 @@ export default function Application() {
 	const [propertyAddress, setPropertyAddress] = useState<string | null>(null);
 	const [propertyId, setPropertyId] = useState<string | null>(null);
 	const [propertyImageUrl, setPropertyImageUrl] = useState<string | null>(null);
+	const [contactId, setContactId] = useState<string | null>(null);
 	const [loading, setLoading] = useState(!!listingId);
 	const [loadError, setLoadError] = useState<string | null>(null);
 
-	// Form state – all map to Application__c fields
-	const [firstName, setFirstName] = useState("");
-	const [lastName, setLastName] = useState("");
-	const [email, setEmail] = useState("");
-	const [phone, setPhone] = useState("");
 	const [moveInDate, setMoveInDate] = useState("");
-	const [preferredTerm, setPreferredTerm] = useState("");
-	const [employmentInfo, setEmploymentInfo] = useState("");
+	const [employment, setEmployment] = useState("");
 	const [references, setReferences] = useState("");
 
 	const [submitting, setSubmitting] = useState(false);
 	const [submitError, setSubmitError] = useState<string | null>(null);
 	const [submittedId, setSubmittedId] = useState<string | null>(null);
 
-	// Load listing and property when listingId is present
+	useEffect(() => {
+		if (!user?.id) return;
+		let mounted = true;
+		fetchUserContact<{ ContactId?: string }>(user.id)
+			.then((contact) => {
+				if (mounted) setContactId(contact.ContactId ?? null);
+			})
+			.catch((err) => {
+				if (mounted) console.error("Failed to fetch contact ID", err);
+			});
+		return () => {
+			mounted = false;
+		};
+	}, [user]);
+
 	useEffect(() => {
 		if (!listingId?.trim()) {
 			setLoading(false);
@@ -80,7 +90,7 @@ export default function Application() {
 	}, [listingId]);
 
 	const handleSubmit = useCallback(
-		async (e: React.FormEvent) => {
+		async (e: SubmitEvent<HTMLFormElement>) => {
 			e.preventDefault();
 			setSubmitError(null);
 			setSubmitting(true);
@@ -88,13 +98,9 @@ export default function Application() {
 				const id = await createApplicationRecord({
 					Property__c: propertyId || null,
 					Status__c: "Submitted",
-					First_Name__c: firstName.trim() || null,
-					Last_Name__c: lastName.trim() || null,
-					Email__c: email.trim() || null,
-					Phone__c: phone.trim() || null,
+					User__c: contactId || user?.id || "",
 					Start_Date__c: moveInDate.trim() || null,
-					Preferred_Term__c: preferredTerm.trim() || null,
-					Employment__c: employmentInfo.trim() || null,
+					Employment__c: employment.trim() || null,
 					References__c: references.trim() || null,
 				});
 				setSubmittedId(id.id);
@@ -104,17 +110,7 @@ export default function Application() {
 				setSubmitting(false);
 			}
 		},
-		[
-			propertyId,
-			firstName,
-			lastName,
-			email,
-			phone,
-			moveInDate,
-			preferredTerm,
-			employmentInfo,
-			references,
-		],
+		[propertyId, contactId, moveInDate, employment, references],
 	);
 
 	if (loading) {
@@ -186,46 +182,6 @@ export default function Application() {
 			<Card className="mb-6 rounded-2xl border border-border shadow-sm">
 				<CardContent className="pt-3">
 					<form onSubmit={handleSubmit}>
-						<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>
-								<Input
-									id="app-first-name"
-									type="text"
-									value={firstName}
-									onChange={(e: ChangeEvent<HTMLInputElement>) => setFirstName(e.target.value)}
-								/>
-							</div>
-							<div className="space-y-2">
-								<Label htmlFor="app-last-name">Last Name</Label>
-								<Input
-									id="app-last-name"
-									type="text"
-									value={lastName}
-									onChange={(e: ChangeEvent<HTMLInputElement>) => setLastName(e.target.value)}
-								/>
-							</div>
-						</div>
-						<div className="mb-4 space-y-2">
-							<Label htmlFor="app-email">Email Address</Label>
-							<Input
-								id="app-email"
-								type="email"
-								value={email}
-								onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
-							/>
-						</div>
-						<div className="mb-4 space-y-2">
-							<Label htmlFor="app-phone">Phone Number</Label>
-							<Input
-								id="app-phone"
-								type="tel"
-								value={phone}
-								onChange={(e: ChangeEvent<HTMLInputElement>) => setPhone(e.target.value)}
-							/>
-						</div>
-						<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>
@@ -236,21 +192,6 @@ export default function Application() {
 									onChange={(e: ChangeEvent<HTMLInputElement>) => setMoveInDate(e.target.value)}
 								/>
 							</div>
-							<div className="space-y-2">
-								<Label htmlFor="app-term">Preferred term</Label>
-								<select
-									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: ChangeEvent<HTMLSelectElement>) => setPreferredTerm(e.target.value)}
-								>
-									{PREFERRED_TERM_OPTIONS.map((opt) => (
-										<option key={opt || "empty"} value={opt}>
-											{opt || "Select one"}
-										</option>
-									))}
-								</select>
-							</div>
 						</div>
 						<div className="mb-4 space-y-2">
 							<Label htmlFor="app-employment">Employment info</Label>
@@ -258,8 +199,8 @@ export default function Application() {
 								id="app-employment"
 								rows={3}
 								className="min-h-[80px] w-full resize-y rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
-								value={employmentInfo}
-								onChange={(e) => setEmploymentInfo(e.target.value)}
+								value={employment}
+								onChange={(e) => setEmployment(e.target.value)}
 							/>
 						</div>
 						<div className="mb-4 space-y-2">

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.88.1",
+  "version": "1.89.0",
   "description": "Base SFDX project template",
   "private": true,
   "files": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-app-react-sample-b2x-experimental",
-  "version": "1.88.1",
+  "version": "1.89.0",
   "description": "B2C sample app template with app shell",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",