@salesforce/webapp-template-app-react-template-vibe-experimental 1.43.0 → 1.44.0

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

@@ -17,7 +17,7 @@
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
-    "@salesforce/agentforce-conversation-client": "^1.42.0",
+    "@salesforce/agentforce-conversation-client": "^1.43.1",
     "@salesforce/sdk-data": "^1.11.2",
     "@salesforce/webapp-experimental": "*",
     "@tailwindcss/vite": "^4.1.17",

package/dist/force-app/main/default/webapplications/appreacttemplatevibe/src/appLayout.tsx

@@ -5,11 +5,13 @@
  */
 
 import { Outlet } from "react-router";
+import NavigationMenu from "./navigationMenu";
 import AgentforceConversationClient from "./components/AgentforceConversationClient";
 
 export default function AppLayout(): React.ReactElement {
 	return (
 		<>
+			<NavigationMenu />
 			<Outlet />
 			<AgentforceConversationClient />
 		</>

package/dist/force-app/main/default/webapplications/appreacttemplatevibe/src/navigationMenu.tsx

@@ -0,0 +1,80 @@
+import { Link, useLocation } from 'react-router';
+import { getAllRoutes } from './router-utils';
+import { useState } from 'react';
+
+export default function NavigationMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+
+  const isActive = (path: string) => location.pathname === path;
+
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  const navigationRoutes: { path: string; label: string }[] = getAllRoutes()
+    .filter(
+      route =>
+        route.handle?.showInNavigation === true &&
+        route.fullPath !== undefined &&
+        route.handle?.label !== undefined
+    )
+    .map(
+      route =>
+        ({
+          path: route.fullPath,
+          label: route.handle?.label,
+        }) as { path: string; label: string }
+    );
+
+  return (
+    <nav className="bg-white border-b border-gray-200">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <Link to="/" className="text-xl font-semibold text-gray-900">
+            React App
+          </Link>
+          <button
+            onClick={toggleMenu}
+            className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            aria-label="Toggle menu"
+          >
+            <div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? 'rotate-45 translate-y-2' : ''
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${isOpen ? 'opacity-0' : ''}`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? '-rotate-45 -translate-y-2' : ''
+                }`}
+              />
+            </div>
+          </button>
+        </div>
+        {isOpen && (
+          <div className="pb-4">
+            <div className="flex flex-col space-y-2">
+              {navigationRoutes.map(item => (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  onClick={() => setIsOpen(false)}
+                  className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                    isActive(item.path)
+                      ? 'bg-blue-100 text-blue-700'
+                      : 'text-gray-700 hover:bg-gray-100'
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}

package/dist/force-app/main/default/webapplications/appreacttemplatevibe/src/pages/ChangePassword.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Link } from "react-router";
 import { z } from "zod";
-import { baseClient } from "@salesforce/webapp-experimental/api";
+import { uiApiClient } from "@salesforce/webapp-experimental/api";
 import { CenteredPageLayout } from "../components/layout/centered-page-layout";
 import { AuthForm } from "../components/forms/auth-form";
 import { useAppForm } from "../hooks/form";
@@ -27,10 +27,13 @@ export default function ChangePassword() {
 			try {
 				// [Dev Note] Custom Apex Endpoint: /auth/change-password
 				// You must ensure this Apex class exists in your org
-				const response = await baseClient.post("/sfdcapi/services/apexrest/auth/change-password", {
-					currentPassword: formFieldValues.currentPassword,
-					newPassword: formFieldValues.newPassword,
-				});
+				const response = await uiApiClient.post(
+					`${window.location.origin}/sfdcapi/services/apexrest/auth/change-password`,
+					{
+						currentPassword: formFieldValues.currentPassword,
+						newPassword: formFieldValues.newPassword,
+					},
+				);
 				await handleApiResponse(response, "Password change failed");
 				setSuccess(true);
 				form.reset();

package/dist/force-app/main/default/webapplications/appreacttemplatevibe/src/pages/ForgotPassword.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { z } from "zod";
-import { baseClient } from "@salesforce/webapp-experimental/api";
+import { uiApiClient } from "@salesforce/webapp-experimental/api";
 import { CenteredPageLayout } from "../components/layout/centered-page-layout";
 import { AuthForm } from "../components/forms/auth-form";
 import { useAppForm } from "../hooks/form";
@@ -24,9 +24,10 @@ export default function ForgotPassword() {
 			try {
 				// [Dev Note] Custom Apex Endpoint: /auth/forgot-password
 				// You must ensure this Apex class exists in your org
-				const response = await baseClient.post("/sfdcapi/services/apexrest/auth/forgot-password", {
-					username: value.username.trim(),
-				});
+				const response = await uiApiClient.post(
+					`${window.location.origin}/sfdcapi/services/apexrest/auth/forgot-password`,
+					{ username: value.username.trim() },
+				);
 				await handleApiResponse(response, "Failed to send reset link");
 				setSuccess(true);
 			} catch (err) {

package/dist/force-app/main/default/webapplications/appreacttemplatevibe/src/pages/Login.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useNavigate, useSearchParams, Link } from "react-router";
 import { z } from "zod";
-import { baseClient } from "@salesforce/webapp-experimental/api";
+import { uiApiClient } from "@salesforce/webapp-experimental/api";
 import { CenteredPageLayout } from "../components/layout/centered-page-layout";
 import { AuthForm } from "../components/forms/auth-form";
 import { useAppForm } from "../hooks/form";
@@ -26,15 +26,18 @@ export default function Login() {
 			setSubmitError(null);
 			try {
 				// [Dev Note] Salesforce Integration:
-				// We use 'baseClient.post' to make an authenticated (or guest) call to Salesforce.
-				// "/sfciapi/services/apexrest/auth/login" refers to a custom Apex Class exposed as a REST resource.
+				// We use uiApiClient.post with an absolute path to call the custom Apex REST auth endpoint.
+				// "/sfdcapi/services/apexrest/auth/login" refers to a custom Apex Class exposed as a 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 response = await baseClient.post("/sfdcapi/services/apexrest/auth/login", {
-					email: value.email.trim().toLowerCase(),
-					password: value.password,
-					startUrl: getStartUrl(searchParams),
-				});
+				const response = await uiApiClient.post(
+					`${window.location.origin}/sfdcapi/services/apexrest/auth/login`,
+					{
+						email: value.email.trim().toLowerCase(),
+						password: value.password,
+						startUrl: getStartUrl(searchParams),
+					},
+				);
 				const result = await handleApiResponse<AuthResponse>(response, "Login failed");
 				if (result?.redirectUrl) {
 					// Hard navigate to the URL which establishes the server session cookie

package/dist/force-app/main/default/webapplications/appreacttemplatevibe/src/pages/Register.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useNavigate, useSearchParams } from "react-router";
 import { z } from "zod";
-import { baseClient } from "@salesforce/webapp-experimental/api";
+import { uiApiClient } from "@salesforce/webapp-experimental/api";
 import { CenteredPageLayout } from "../components/layout/centered-page-layout";
 import { AuthForm } from "../components/forms/auth-form";
 import { useAppForm } from "../hooks/form";
@@ -50,9 +50,10 @@ export default function Register() {
 				// [Dev Note] Calls the custom Apex REST endpoint for user registration.
 				// Ensure your Apex logic handles duplicate checks and user creation (e.g., Site.createExternalUser).
 				const { confirmPassword, ...request } = formFieldValues;
-				const response = await baseClient.post("/sfdcapi/services/apexrest/auth/register", {
-					request,
-				});
+				const response = await uiApiClient.post(
+					`${window.location.origin}/sfdcapi/services/apexrest/auth/register`,
+					{ request },
+				);
 				const result = await handleApiResponse<AuthResponse>(response, "Registration failed");
 				if (result?.redirectUrl) {
 					// Hard navigate to the URL which logs the new user in

package/dist/force-app/main/default/webapplications/appreacttemplatevibe/src/pages/ResetPassword.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Link, useSearchParams } from "react-router";
-import { baseClient } from "@salesforce/webapp-experimental/api";
+import { uiApiClient } from "@salesforce/webapp-experimental/api";
 import { CardLayout } from "../components/layout/card-layout";
 import { CenteredPageLayout } from "../components/layout/centered-page-layout";
 import { AuthForm } from "../components/forms/auth-form";
@@ -24,10 +24,10 @@ export default function ResetPassword() {
 			try {
 				// [Dev Note] Custom Apex Endpoint: /auth/reset-password
 				// You must ensure this Apex class exists in your org
-				const response = await baseClient.post("/services/apexrest/auth/reset-password", {
-					token,
-					newPassword: value.newPassword,
-				});
+				const response = await uiApiClient.post(
+					`${window.location.origin}/services/apexrest/auth/reset-password`,
+					{ token, newPassword: value.newPassword },
+				);
 				await handleApiResponse(response, "Password reset failed");
 				setSuccess(true);
 				// Scroll to top of page after successful submission so user sees it

package/dist/force-app/main/default/webapplications/appreacttemplatevibe/src/router-utils.tsx

@@ -0,0 +1,35 @@
+import type { RouteObject } from 'react-router';
+import { routes } from './routes';
+
+export type RouteWithFullPath = RouteObject & { fullPath: string };
+
+const flatMapRoutes = (
+  route: RouteObject,
+  parentPath: string = ''
+): RouteWithFullPath[] => {
+  let fullPath: string;
+
+  if (route.index) {
+    fullPath = parentPath || '/';
+  } else if (route.path) {
+    if (route.path.startsWith('/')) {
+      fullPath = route.path;
+    } else {
+      fullPath =
+        parentPath === '/' ? `/${route.path}` : `${parentPath}/${route.path}`;
+    }
+  } else {
+    fullPath = parentPath;
+  }
+
+  const routeWithPath = { ...route, fullPath };
+
+  const childRoutes =
+    route.children?.flatMap(child => flatMapRoutes(child, fullPath)) || [];
+
+  return [routeWithPath, ...childRoutes];
+};
+
+export const getAllRoutes = (): RouteWithFullPath[] => {
+  return routes.flatMap(route => flatMapRoutes(route));
+};

package/dist/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-app-react-template-vibe-experimental",
-  "version": "1.43.0",
+  "version": "1.44.0",
   "description": "Vibe coding starter app template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -43,5 +43,5 @@
       }
     }
   },
-  "gitHead": "6987ff60e5d99e64b34cbe2383e54cda1727e151"
+  "gitHead": "00f5b3b58d400b13a1b1130d11f571c2e1366cb4"
 }