@salesforce/webapp-template-app-react-template-b2x-experimental 1.79.1 → 1.80.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.80.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.79.2...v1.80.0) (2026-03-07)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
+## [1.79.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.79.1...v1.79.2) (2026-03-06)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 ## [1.79.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.79.0...v1.79.1) (2026-03-06)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

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

@@ -15,8 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.79.1",
-    "@salesforce/webapp-experimental": "^1.79.1",
+    "@salesforce/sdk-data": "^1.80.0",
+    "@salesforce/webapp-experimental": "^1.80.0",
     "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-form": "^1.28.4",
     "class-variance-authority": "^0.7.1",
@@ -40,7 +40,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.79.1",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.80.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/appreacttemplateb2x/src/features/authentication/api/userProfileApi.ts

@@ -0,0 +1,81 @@
+/**
+ * Extensible user profile fetching and updating via UI API GraphQL.
+ */
+import { getDataSDK } from "@salesforce/sdk-data";
+import { flattenGraphQLRecord } from "../utils/helpers";
+
+const USER_PROFILE_FIELDS_FULL = `
+    Id
+    FirstName { value }
+    LastName { value }
+    Email { value }
+    Phone { value }
+    Street { value }
+    City { value }
+    State { value }
+    PostalCode { value }
+    Country { value }`;
+
+function getUserProfileQuery(fields: string): string {
+	return `
+    query GetUserProfile($userId: ID) {
+        uiapi {
+            query {
+                User(where: { Id: { eq: $userId } }) {
+                    edges {
+                        node {${fields}}
+                    }
+                }
+            }
+        }
+    }`;
+}
+
+function getUserProfileMutation(fields: string): string {
+	return `
+    mutation UpdateUserProfile($input: UserUpdateInput!) {
+      uiapi {
+        UserUpdate(input: $input) {
+          Record {${fields}}
+        }
+      }
+    }`;
+}
+
+function throwOnGraphQLErrors(response: any): void {
+	if (response?.errors?.length) {
+		throw new Error(response.errors.map((e: any) => e.message).join("; "));
+	}
+}
+
+/**
+ * Fetches the user profile via GraphQL and returns a flattened record.
+ * @param userId - The Salesforce User Id.
+ * @param fields - GraphQL field selection (defaults to USER_PROFILE_FIELDS_FULL).
+ */
+export async function fetchUserProfile<T>(
+	userId: string,
+	fields: string = USER_PROFILE_FIELDS_FULL,
+): Promise<T> {
+	const data = await getDataSDK();
+	const response: any = await data.graphql?.(getUserProfileQuery(fields), { userId });
+	throwOnGraphQLErrors(response);
+	return flattenGraphQLRecord<T>(response?.data?.uiapi?.query?.User?.edges?.[0]?.node);
+}
+
+/**
+ * Updates the user profile via GraphQL and returns the flattened updated record.
+ * @param userId - The Salesforce User Id.
+ * @param values - The field values to update.
+ */
+export async function updateUserProfile<T>(
+	userId: string,
+	values: Record<string, unknown>,
+): Promise<T> {
+	const data = await getDataSDK();
+	const response: any = await data.graphql?.(getUserProfileMutation(USER_PROFILE_FIELDS_FULL), {
+		input: { Id: userId, User: { ...values } },
+	});
+	throwOnGraphQLErrors(response);
+	return flattenGraphQLRecord<T>(response?.data?.uiapi?.UserUpdate?.Record);
+}

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/authentication/layout/centered-page-layout.tsx

@@ -34,13 +34,19 @@ interface CenteredPageLayoutProps
 	 * Optional page title. If provided, will render a <title> component that React will place in the document head.
 	 */
 	title?: string;
+	/**
+	 * When true, content is aligned to the top instead of being vertically centered.
+	 * @default true
+	 */
+	topAligned?: boolean;
 }
 
 /**
  * CenteredPageLayout component that provides consistent page structure and spacing.
  *
  * This component creates a full-viewport-height container that centers its content
- * both horizontally and vertically. The inner content area has a configurable maximum width
+ * horizontally. By default, content is top-aligned; set `topAligned={false}` to
+ * vertically center instead. The inner content area has a configurable maximum width
  * to prevent content from becoming too wide on large screens.
  *
  * @example
@@ -48,6 +54,10 @@ interface CenteredPageLayoutProps
  * <CenteredPageLayout contentMaxWidth="md">
  *   <YourPageContent />
  * </CenteredPageLayout>
+ *
+ * <CenteredPageLayout contentMaxWidth="md" topAligned={false}>
+ *   <VerticallyCenteredContent />
+ * </CenteredPageLayout>
  * ```
  */
 export function CenteredPageLayout({
@@ -55,13 +65,18 @@ export function CenteredPageLayout({
 	className,
 	children,
 	title,
+	topAligned = true,
 	...props
 }: CenteredPageLayoutProps) {
 	return (
 		<>
 			{title && <title>{title}</title>}
 			<main
-				className={cn("flex min-h-svh w-full items-center justify-center p-6 md:p-10", className)}
+				className={cn(
+					"flex min-h-svh w-full justify-center p-6 md:p-10",
+					topAligned ? "items-start" : "items-center",
+					className,
+				)}
 				data-slot="page-layout"
 				{...props}
 			>

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/authentication/pages/Profile.tsx

@@ -1,50 +1,15 @@
 import { useState, useEffect } from "react";
 import { z } from "zod";
 
-import { getDataSDK } from "@salesforce/sdk-data";
-
 import { CenteredPageLayout } from "../layout/centered-page-layout";
 import { CardSkeleton } from "../layout/card-skeleton";
 import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
 import { ROUTES } from "../authenticationConfig";
 import { emailSchema } from "../authHelpers";
-import { flattenGraphQLRecord, getErrorMessage } from "../utils/helpers";
+import { getErrorMessage } from "../utils/helpers";
 import { getUser } from "../context/AuthContext";
-
-const GRAPHQL_USER_PROFILE_FIELDS = `
-    Id
-    FirstName { value }
-    LastName { value }
-    Email { value }
-    Phone { value }
-    Street { value }
-    City { value }
-    State { value }
-    PostalCode { value }
-    Country { value }`;
-
-const QUERY_PROFILE_GRAPHQL = `
-    query GetUserProfile($userId: ID) {
-        uiapi {
-            query {
-                User(where: { Id: { eq: $userId } }) {
-                    edges {
-                        node {${GRAPHQL_USER_PROFILE_FIELDS}}
-                    }
-                }
-            }
-        }
-    }`;
-
-const MUTATE_PROFILE_GRAPHQL = `
-    mutation UpdateUserProfile($input: UserUpdateInput!) {
-      uiapi {
-        UserUpdate(input: $input) {
-          Record {${GRAPHQL_USER_PROFILE_FIELDS}}
-        }
-      }
-    }`;
+import { fetchUserProfile, updateUserProfile } from "../api/userProfileApi";
 
 const optionalString = z
 	.string()
@@ -81,17 +46,9 @@ export default function Profile() {
 			setSubmitError(null);
 			setSuccess(false);
 			try {
-				const data = await getDataSDK();
-				const response: any = await data.graphql?.(MUTATE_PROFILE_GRAPHQL, {
-					input: { Id: user.id, User: { ...value } },
-				});
-				if (response?.errors?.length) {
-					throw new Error(response.errors.map((e: any) => e.message).join("; "));
-				}
-				setProfile(flattenGraphQLRecord(response?.data?.uiapi?.UserUpdate?.Record));
-
+				const updated = await updateUserProfile<ProfileFormValues>(user.id, value);
+				setProfile(updated);
 				setSuccess(true);
-				// Scroll to top of page after successful update so user sees it
 				window.scrollTo({ top: 0, behavior: "smooth" });
 			} catch (err) {
 				setSubmitError(getErrorMessage(err, "Failed to update profile"));
@@ -102,15 +59,10 @@ export default function Profile() {
 
 	useEffect(() => {
 		let mounted = true;
-
-		getDataSDK()
-			.then((data) => data.graphql?.(QUERY_PROFILE_GRAPHQL, { userId: user.id }))
-			.then((response: any) => {
-				if (response?.errors?.length) {
-					throw new Error(response.errors.map((e: any) => e.message).join("; "));
-				}
+		fetchUserProfile<ProfileFormValues>(user.id)
+			.then((data) => {
 				if (mounted) {
-					setProfile(flattenGraphQLRecord(response?.data?.uiapi?.query?.User?.edges?.[0]?.node));
+					setProfile(data);
 				}
 			})
 			.catch((err: any) => {

package/dist/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-app-react-template-b2x-experimental",
-  "version": "1.79.1",
+  "version": "1.80.0",
   "description": "Base reference app template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",