@salesforce/webapp-template-app-react-sample-b2x-experimental 1.93.0 → 1.94.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.94.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.93.1...v1.94.0) (2026-03-12)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
+## [1.93.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.93.0...v1.93.1) (2026-03-12)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 # [1.93.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.92.1...v1.93.0) (2026-03-11)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

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.93.0",
-    "@salesforce/webapp-experimental": "^1.93.0",
+    "@salesforce/sdk-data": "^1.94.0",
+    "@salesforce/webapp-experimental": "^1.94.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.93.0",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.94.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/components/NavMenu.tsx

@@ -1,22 +1,31 @@
 import { Link, useLocation } from "react-router";
 import { Home, Search, BarChart3, Wrench, Phone, type LucideIcon } from "lucide-react";
+import { useAuth } from "@/features/authentication/context/AuthContext";
+import { useMemo } from "react";
 
 interface NavItem {
 	path: string;
 	icon: LucideIcon;
 	label: string;
+	authRequired?: boolean;
 }
 
 const navItems: NavItem[] = [
 	{ path: "/", icon: Home, label: "Home" },
-	{ path: "/dashboard", icon: BarChart3, label: "Dashboard" },
+	{ path: "/dashboard", icon: BarChart3, label: "Dashboard", authRequired: true },
 	{ path: "/properties", icon: Search, label: "Property Search" },
-	{ path: "/maintenance/requests", icon: Wrench, label: "Maintenance Requests" },
+	{ path: "/maintenance", icon: Wrench, label: "Maintenance Requests", authRequired: true },
 	{ path: "/contact", icon: Phone, label: "Contact Us" },
 ];
 
 export function NavMenu() {
 	const location = useLocation();
+	const { isAuthenticated } = useAuth();
+
+	const visibleItems = useMemo(
+		() => navItems.filter((item) => !item.authRequired || isAuthenticated),
+		[isAuthenticated],
+	);
 
 	const isActive = (path: string) => {
 		if (path === "/") return location.pathname === "/";
@@ -28,7 +37,7 @@ export function NavMenu() {
 			className="flex w-24 flex-col border-r border-gray-200 bg-white py-8"
 			aria-label="Main navigation"
 		>
-			{navItems.map((item) => {
+			{visibleItems.map((item) => {
 				const Icon = item.icon;
 				const active = isActive(item.path);
 				return (

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

@@ -1,6 +1,8 @@
-import { useEffect, useState } from "react";
-import { Search, Bell, ChevronDown, Menu } from "lucide-react";
-import { getUserInfo } from "@/api/userApi";
+import { useState } from "react";
+import { Search, Bell, ChevronDown, Menu, UserPen, LogOut, User, Loader2 } from "lucide-react";
+import { Link } from "react-router";
+import { useAuth } from "../features/authentication/context/AuthContext";
+import { ROUTES } from "../features/authentication/authenticationConfig";
 import zenLogo from "@/assets/icons/zen-logo.svg";
 
 export interface TopBarProps {
@@ -8,26 +10,7 @@ export interface TopBarProps {
 }
 
 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);
-	};
+	const { user, isAuthenticated, loading } = useAuth();
 
 	return (
 		<header
@@ -43,65 +26,149 @@ export function TopBar({ onMenuClick }: TopBarProps) {
 				>
 					<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>
+				<Logo />
 			</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>
+			{loading ? (
+				<Loader2 className="size-5 animate-spin" aria-label="Loading" />
+			) : isAuthenticated ? (
+				<AuthenticatedControls userName={user?.name ?? "User"} />
+			) : (
+				<LoginLink />
+			)}
+		</header>
+	);
+}
 
-				<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>
+function Logo() {
+	return (
+		<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>
+	);
+}
 
-					{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>
+function LoginLink() {
+	return (
+		<a
+			href={ROUTES.LOGIN.PATH}
+			className="flex items-center gap-2 rounded-md bg-white px-4 py-2 font-medium text-teal-700 transition-colors hover:bg-teal-50"
+		>
+			<User className="size-4" aria-hidden />
+			Sign Up / Sign In
+		</a>
+	);
+}
 
-				<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"
+function AuthenticatedControls({ userName }: { userName: string }) {
+	return (
+		<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>
+
+			<NotificationBell />
+			<UserMenu userName={userName} />
+		</div>
+	);
+}
+
+function UserMenu({ userName }: { userName: string }) {
+	const { logout } = useAuth();
+	const [open, setOpen] = useState(false);
+
+	return (
+		<div className="relative">
+			<button
+				type="button"
+				onClick={() => setOpen((prev) => !prev)}
+				className="flex items-center gap-2 rounded-md px-3 py-2 transition-colors hover:bg-teal-600"
+				aria-label="User menu"
+				aria-expanded={open}
+				aria-haspopup="true"
+			>
+				<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>
+
+			{open && (
+				<>
+					<div className="fixed inset-0 z-40" onClick={() => setOpen(false)} aria-hidden />
 					<div
-						className="flex size-8 items-center justify-center rounded-full bg-teal-300 font-semibold text-teal-900"
-						aria-hidden
+						className="absolute right-0 top-full z-50 mt-2 w-48 overflow-hidden rounded-lg bg-white py-1 shadow-xl"
+						role="menu"
 					>
-						{userName.charAt(0).toUpperCase()}
+						<Link
+							to={ROUTES.PROFILE.PATH}
+							onClick={() => setOpen(false)}
+							className="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 transition-colors hover:bg-gray-100"
+							role="menuitem"
+						>
+							<UserPen className="size-4" aria-hidden />
+							Edit Profile
+						</Link>
+						<div className="mx-3 border-t border-gray-200" />
+						<button
+							type="button"
+							onClick={() => {
+								setOpen(false);
+								logout();
+							}}
+							className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-gray-700 transition-colors hover:bg-gray-100"
+							role="menuitem"
+						>
+							<LogOut className="size-4" aria-hidden />
+							Log Out
+						</button>
 					</div>
-					<span className="hidden font-medium md:inline">{userName.toUpperCase()}</span>
-					<ChevronDown className="hidden size-4 md:inline" aria-hidden />
-				</button>
-			</div>
-		</header>
+				</>
+			)}
+		</div>
+	);
+}
+
+function NotificationBell() {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<div className="relative">
+			<button
+				type="button"
+				onClick={() => setOpen((prev) => !prev)}
+				className="relative rounded-md p-2 transition-colors hover:bg-teal-600"
+				aria-label="Notifications"
+			>
+				<Bell className="size-5" aria-hidden />
+			</button>
+
+			{open && (
+				<>
+					<div className="fixed inset-0 z-40" onClick={() => setOpen(false)} 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>
 	);
 }

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/authentication/pages/ChangePassword.tsx

@@ -29,7 +29,7 @@ export default function ChangePassword() {
 				// [Dev Note] Custom Apex Endpoint: /auth/change-password
 				// You must ensure this Apex class exists in your org
 				const sdk = await getDataSDK();
-				const response = await sdk.fetch!("/sfdcapi/services/apexrest/auth/change-password", {
+				const response = await sdk.fetch!("/services/apexrest/auth/change-password", {
 					method: "POST",
 					body: JSON.stringify({
 						currentPassword: formFieldValues.currentPassword,

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/authentication/pages/ForgotPassword.tsx

@@ -25,7 +25,7 @@ export default function ForgotPassword() {
 				// [Dev Note] Custom Apex Endpoint: /auth/forgot-password
 				// You must ensure this Apex class exists in your org
 				const sdk = await getDataSDK();
-				const response = await sdk.fetch!("/sfdcapi/services/apexrest/auth/forgot-password", {
+				const response = await sdk.fetch!("/services/apexrest/auth/forgot-password", {
 					method: "POST",
 					body: JSON.stringify({ username: value.username.trim() }),
 					headers: {

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/authentication/pages/Login.tsx

@@ -27,11 +27,11 @@ export default function Login() {
 			try {
 				// [Dev Note] Salesforce Integration:
 				// We use the Data SDK fetch to make an authenticated (or guest) call to Salesforce.
-				// "/sfdcapi/services/apexrest/auth/login" refers to a custom Apex REST resource.
+				// "/services/apexrest/auth/login" refers to a custom Apex REST resource.
 				// You must ensure this Apex class exists in your org and handles the login logic
 				// (e.g., creating a session or returning a token).
 				const sdk = await getDataSDK();
-				const response = await sdk.fetch!("/sfdcapi/services/apexrest/auth/login", {
+				const response = await sdk.fetch!("/services/apexrest/auth/login", {
 					method: "POST",
 					body: JSON.stringify({
 						email: value.email.trim().toLowerCase(),

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/authentication/pages/Register.tsx

@@ -43,12 +43,12 @@ export default function Register() {
 			try {
 				// [Dev Note] Salesforce Integration:
 				// We use the Data SDK fetch to make an authenticated (or guest) call to Salesforce.
-				// "/sfdcapi/services/apexrest/auth/register" refers to a custom Apex Class exposed as a REST resource.
+				// "/services/apexrest/auth/register" refers to a custom Apex Class exposed as a REST resource.
 				// You must ensure this Apex class exists in your org and handles registration
 				// (e.g., duplicate checks and user creation such as Site.createExternalUser).
 				const { confirmPassword, ...request } = formFieldValues;
 				const sdk = await getDataSDK();
-				const response = await sdk.fetch!("/sfdcapi/services/apexrest/auth/register", {
+				const response = await sdk.fetch!("/services/apexrest/auth/register", {
 					method: "POST",
 					body: JSON.stringify({ request }),
 					headers: {

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/authentication/pages/ResetPassword.tsx

@@ -26,7 +26,7 @@ export default function ResetPassword() {
 				// [Dev Note] Custom Apex Endpoint: /auth/reset-password
 				// You must ensure this Apex class exists in your org
 				const sdk = await getDataSDK();
-				const response = await sdk.fetch!("/sfdcapi/services/apexrest/auth/reset-password", {
+				const response = await sdk.fetch!("/services/apexrest/auth/reset-password", {
 					method: "POST",
 					body: JSON.stringify({ token, newPassword: value.newPassword }),
 					headers: {

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

@@ -107,15 +107,6 @@ export const routes: RouteObject[] = [
         path: "object/Property_Listing__c/:id",
         element: <PropertyDetails />
       },
-      {
-        path: "maintenance/requests",
-        element: <Maintenance />,
-        handle: { showInNavigation: true, label: "Maintenance" }
-      },
-      {
-        path: "application",
-        element: <Application />
-      },
       {
         path: "contact",
         element: <Contact />,

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.93.0",
+  "version": "1.94.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.93.0",
+  "version": "1.94.0",
   "description": "B2C sample app template with app shell",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",

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

@@ -1,43 +0,0 @@
-import { gql } from "@salesforce/sdk-data";
-import type { GetUserInfoQuery } from "@/api/graphql-operations-types.js";
-import { executeGraphQL } from "@/api/graphqlClient.js";
-
-const GET_USER_INFO = gql`
-	query GetUserInfo {
-		uiapi {
-			query {
-				User(first: 1) {
-					edges {
-						node {
-							Id
-							Name {
-								value
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-`;
-
-/**
- * Fetches the current user's id and name (for TopBar, etc.).
- * Returns null on error or when no user is returned.
- */
-export async function getUserInfo(): Promise<{ name: string; id: string } | null> {
-	try {
-		const data = await executeGraphQL<GetUserInfoQuery>(GET_USER_INFO);
-		const user = data?.uiapi?.query?.User?.edges?.[0]?.node;
-		if (user) {
-			return {
-				id: user.Id,
-				name: user.Name?.value ?? "User",
-			};
-		}
-		return null;
-	} catch (error) {
-		console.error("Error fetching user info:", error);
-		return null;
-	}
-}