@salesforce/webapp-template-app-react-sample-b2x-experimental 1.79.2 → 1.80.0

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

@@ -1,43 +1,211 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect, type SubmitEvent } from "react";
 import { Link } from "react-router";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
 import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
-import { createContactUsLead } from "@/api/leadApi";
+import { CenteredPageLayout } from "../features/authentication/layout/centered-page-layout";
+import { Skeleton } from "../components/ui/skeleton";
+import { createContactUsLead } from "../api/leadApi";
+import { useAuth } from "../features/authentication/context/AuthContext";
+import { fetchUserProfile } from "../features/authentication/api/userProfileApi";
+import type { UserInfo } from "../api/leadApi";
 
-export default function Contact() {
+function LoadingCard() {
+	return (
+		<Card>
+			<CardHeader>
+				<Skeleton className="h-4 w-2/3" />
+				<Skeleton className="h-4 w-1/2" />
+			</CardHeader>
+			<CardContent>
+				<Skeleton className="aspect-video w-full" />
+			</CardContent>
+		</Card>
+	);
+}
+
+function SuccessCard() {
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle className="text-xl">Message sent</CardTitle>
+			</CardHeader>
+			<CardContent className="space-y-4">
+				<p className="text-muted-foreground">
+					Thank you for reaching out. We've received your message and will get back to you soon.
+				</p>
+				<Button asChild variant="outline">
+					<Link to="/">Back to Home</Link>
+				</Button>
+				<Button asChild>
+					<Link to="/contact">Send another message</Link>
+				</Button>
+			</CardContent>
+		</Card>
+	);
+}
+
+interface ContactFormProps {
+	isAuthenticated: boolean;
+	userInfo: UserInfo | null;
+	onSubmit: (e: SubmitEvent<HTMLFormElement>) => void;
+	submitting: boolean;
+	submitError: string | null;
+}
+
+function ContactForm({
+	isAuthenticated,
+	userInfo,
+	onSubmit,
+	submitting,
+	submitError,
+}: ContactFormProps) {
 	const [firstName, setFirstName] = useState("");
 	const [lastName, setLastName] = useState("");
 	const [email, setEmail] = useState("");
 	const [phone, setPhone] = useState("");
 	const [subject, setSubject] = useState("");
 	const [message, setMessage] = useState("");
+
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle className="text-lg">Send a message</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<form onSubmit={onSubmit} className="space-y-4">
+					<div className="grid gap-4 sm:grid-cols-2">
+						<div className="space-y-2">
+							<Label htmlFor="contact-first">First name {!isAuthenticated && "*"}</Label>
+							<Input
+								id="contact-first"
+								name="contact-first"
+								type="text"
+								value={isAuthenticated ? (userInfo?.FirstName ?? "") : firstName}
+								onChange={(e) => setFirstName(e.target.value)}
+								disabled={isAuthenticated}
+								required={!isAuthenticated}
+							/>
+						</div>
+						<div className="space-y-2">
+							<Label htmlFor="contact-last">Last name {!isAuthenticated && "*"}</Label>
+							<Input
+								id="contact-last"
+								name="contact-last"
+								type="text"
+								value={isAuthenticated ? (userInfo?.LastName ?? "") : lastName}
+								onChange={(e) => setLastName(e.target.value)}
+								disabled={isAuthenticated}
+								required={!isAuthenticated}
+							/>
+						</div>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="contact-email">Email {!isAuthenticated && "*"}</Label>
+						<Input
+							id="contact-email"
+							name="contact-email"
+							type="email"
+							value={isAuthenticated ? (userInfo?.Email ?? "") : email}
+							onChange={(e) => setEmail(e.target.value)}
+							disabled={isAuthenticated}
+							required={!isAuthenticated}
+						/>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="contact-phone">Phone</Label>
+						<Input
+							id="contact-phone"
+							name="contact-phone"
+							type="tel"
+							value={isAuthenticated ? (userInfo?.Phone ?? "") : phone}
+							onChange={(e) => setPhone(e.target.value)}
+							disabled={isAuthenticated}
+						/>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="contact-subject">Subject</Label>
+						<Input
+							id="contact-subject"
+							name="contact-subject"
+							type="text"
+							value={subject}
+							onChange={(e) => setSubject(e.target.value)}
+							placeholder="e.g. General inquiry, Property question"
+						/>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="contact-message">Message *</Label>
+						<textarea
+							id="contact-message"
+							name="contact-message"
+							rows={5}
+							value={message}
+							onChange={(e) => setMessage(e.target.value)}
+							required
+							className="min-h-[120px] 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"
+						/>
+					</div>
+					{submitError && <p className="text-sm text-destructive">{submitError}</p>}
+					<Button type="submit" disabled={submitting} className="bg-teal-600 hover:bg-teal-700">
+						{submitting ? "Sending…" : "Send message"}
+					</Button>
+				</form>
+			</CardContent>
+		</Card>
+	);
+}
+
+export default function Contact() {
+	const { isAuthenticated, loading, user } = useAuth();
+	const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
 	const [submitting, setSubmitting] = useState(false);
 	const [submitError, setSubmitError] = useState<string | null>(null);
 	const [submitted, setSubmitted] = useState(false);
 
+	useEffect(() => {
+		if (!isAuthenticated) return;
+		let mounted = true;
+		fetchUserProfile<UserInfo>(user?.id ?? "")
+			.then((data) => {
+				if (mounted) setUserInfo(data);
+			})
+			.catch((err) => {
+				if (mounted) console.error("Failed to load user contact info", err);
+			});
+		return () => {
+			mounted = false;
+		};
+	}, [isAuthenticated, user]);
+
 	const handleSubmit = useCallback(
-		async (e: React.FormEvent) => {
+		async (e: SubmitEvent<HTMLFormElement>) => {
 			e.preventDefault();
 			setSubmitError(null);
 			setSubmitting(true);
+
+			const form = e.currentTarget;
+			const formData = new FormData(form);
+
 			try {
 				await createContactUsLead({
-					FirstName: firstName.trim(),
-					LastName: lastName.trim(),
-					Email: email.trim(),
-					Phone: phone.trim() || undefined,
-					Subject: subject.trim() || undefined,
-					Message: message.trim(),
+					FirstName: isAuthenticated
+						? (userInfo?.FirstName ?? "")
+						: (formData.get("contact-first") as string).trim(),
+					LastName: isAuthenticated
+						? (userInfo?.LastName ?? "")
+						: (formData.get("contact-last") as string).trim(),
+					Email: isAuthenticated
+						? (userInfo?.Email ?? "")
+						: (formData.get("contact-email") as string).trim(),
+					Phone: isAuthenticated
+						? userInfo?.Phone
+						: (formData.get("contact-phone") as string)?.trim() || undefined,
+					Subject: (formData.get("contact-subject") as string)?.trim() || undefined,
+					Message: (formData.get("contact-message") as string).trim(),
 				});
 				setSubmitted(true);
-				setFirstName("");
-				setLastName("");
-				setEmail("");
-				setPhone("");
-				setSubject("");
-				setMessage("");
 			} catch (err) {
 				setSubmitError(
 					err instanceof Error ? err.message : "Something went wrong. Please try again.",
@@ -46,113 +214,32 @@ export default function Contact() {
 				setSubmitting(false);
 			}
 		},
-		[firstName, lastName, email, phone, subject, message],
+		[isAuthenticated, userInfo],
 	);
 
-	if (submitted) {
+	const isLoading = loading || (isAuthenticated && !userInfo);
+
+	function renderCard() {
+		if (isLoading) return <LoadingCard />;
+		if (submitted) return <SuccessCard />;
 		return (
-			<div className="mx-auto max-w-[600px]">
-				<Card>
-					<CardHeader>
-						<CardTitle className="text-xl">Message sent</CardTitle>
-					</CardHeader>
-					<CardContent className="space-y-4">
-						<p className="text-muted-foreground">
-							Thank you for reaching out. We’ve received your message and will get back to you soon.
-						</p>
-						<Button asChild variant="outline">
-							<Link to="/">Back to Home</Link>
-						</Button>
-						<Button asChild>
-							<Link to="/contact">Send another message</Link>
-						</Button>
-					</CardContent>
-				</Card>
-			</div>
+			<ContactForm
+				isAuthenticated={isAuthenticated}
+				userInfo={userInfo}
+				onSubmit={handleSubmit}
+				submitting={submitting}
+				submitError={submitError}
+			/>
 		);
 	}
 
 	return (
-		<div className="mx-auto max-w-[600px]">
+		<CenteredPageLayout contentMaxWidth="md">
 			<h1 className="mb-2 text-2xl font-semibold text-foreground">Contact Us</h1>
 			<p className="mb-6 text-muted-foreground">
-				Have a question or feedback? Send us a message and we’ll respond as soon as we can.
+				Have a question or feedback? Send us a message and we'll respond as soon as we can.
 			</p>
-			<Card>
-				<CardHeader>
-					<CardTitle className="text-lg">Send a message</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<form onSubmit={handleSubmit} className="space-y-4">
-						<div className="grid gap-4 sm:grid-cols-2">
-							<div className="space-y-2">
-								<Label htmlFor="contact-first">First name *</Label>
-								<Input
-									id="contact-first"
-									type="text"
-									value={firstName}
-									onChange={(e) => setFirstName(e.target.value)}
-									required
-								/>
-							</div>
-							<div className="space-y-2">
-								<Label htmlFor="contact-last">Last name *</Label>
-								<Input
-									id="contact-last"
-									type="text"
-									value={lastName}
-									onChange={(e) => setLastName(e.target.value)}
-									required
-								/>
-							</div>
-						</div>
-						<div className="space-y-2">
-							<Label htmlFor="contact-email">Email *</Label>
-							<Input
-								id="contact-email"
-								type="email"
-								value={email}
-								onChange={(e) => setEmail(e.target.value)}
-								required
-							/>
-						</div>
-						<div className="space-y-2">
-							<Label htmlFor="contact-phone">Phone</Label>
-							<Input
-								id="contact-phone"
-								type="tel"
-								value={phone}
-								onChange={(e) => setPhone(e.target.value)}
-							/>
-						</div>
-						<div className="space-y-2">
-							<Label htmlFor="contact-subject">Subject</Label>
-							<Input
-								id="contact-subject"
-								type="text"
-								value={subject}
-								onChange={(e) => setSubject(e.target.value)}
-								placeholder="e.g. General inquiry, Property question"
-							/>
-						</div>
-						<div className="space-y-2">
-							<Label htmlFor="contact-message">Message *</Label>
-							<textarea
-								id="contact-message"
-								rows={5}
-								value={message}
-								onChange={(e) => setMessage(e.target.value)}
-								required
-								className="min-h-[120px] 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"
-							/>
-						</div>
-						{submitError && <p className="text-sm text-destructive">{submitError}</p>}
-						<Button type="submit" disabled={submitting} className="bg-teal-600 hover:bg-teal-700">
-							{submitting ? "Sending…" : "Send message"}
-						</Button>
-					</form>
-				</CardContent>
-			</Card>
-		</div>
+			{renderCard()}
+		</CenteredPageLayout>
 	);
 }

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

@@ -1,11 +1,20 @@
 import type { RouteObject } from 'react-router';
-import AppLayout from './appLayout';
 import Home from '@/pages/Home';
 import NotFound from '@/pages/NotFound';
 import GlobalSearch from "./features/global-search/pages/GlobalSearch";
 import DetailPage from "./features/global-search/pages/DetailPage";
 import { Suspense } from "react";
 import LoadingFallback from "./features/global-search/components/shared/LoadingFallback";
+import Login from "./features/authentication/pages/Login";
+import Register from "./features/authentication/pages/Register";
+import ForgotPassword from "./features/authentication/pages/ForgotPassword";
+import ResetPassword from "./features/authentication/pages/ResetPassword";
+import Profile from "./features/authentication/pages/Profile";
+import ChangePassword from "./features/authentication/pages/ChangePassword";
+import AuthenticationRoute from "./features/authentication/layouts/authenticationRouteLayout";
+import PrivateRoute from "./features/authentication/layouts/privateRouteLayout";
+import { ROUTES } from "./features/authentication/authenticationConfig";
+import AppLayout from "./appLayout";
 import Dashboard from "@/pages/Dashboard";
 import Maintenance from "@/pages/Maintenance";
 import PropertySearch from "@/pages/PropertySearch";
@@ -46,9 +55,44 @@ export const routes: RouteObject[] = [
         handle: { showInNavigation: false }
       },
       {
-        path: "dashboard",
-        element: <Dashboard />,
-        handle: { showInNavigation: true, label: "Dashboard" }
+        element: <AuthenticationRoute />,
+        children: [
+          {
+            path: ROUTES.LOGIN.PATH,
+            element: <Login />,
+            handle: { showInNavigation: true, label: "Login", title: ROUTES.LOGIN.TITLE }
+          },
+          {
+            path: ROUTES.REGISTER.PATH,
+            element: <Register />,
+            handle: { showInNavigation: false, title: ROUTES.REGISTER.TITLE }
+          },
+          {
+            path: ROUTES.FORGOT_PASSWORD.PATH,
+            element: <ForgotPassword />,
+            handle: { showInNavigation: false, title: ROUTES.FORGOT_PASSWORD.TITLE }
+          },
+          {
+            path: ROUTES.RESET_PASSWORD.PATH,
+            element: <ResetPassword />,
+            handle: { showInNavigation: false, title: ROUTES.RESET_PASSWORD.TITLE }
+          }
+        ]
+      },
+      {
+        element: <PrivateRoute />,
+        children: [
+          {
+            path: ROUTES.PROFILE.PATH,
+            element: <Profile />,
+            handle: { showInNavigation: true, label: "Profile", title: ROUTES.PROFILE.TITLE }
+          },
+          {
+            path: ROUTES.CHANGE_PASSWORD.PATH,
+            element: <ChangePassword />,
+            handle: { showInNavigation: false, title: ROUTES.CHANGE_PASSWORD.TITLE }
+          }
+        ]
       },
       {
         path: "properties",
@@ -63,19 +107,29 @@ export const routes: RouteObject[] = [
         path: "object/Property_Listing__c/:id",
         element: <PropertyDetails />
       },
-      {
-        path: "maintenance",
-        element: <Maintenance />,
-        handle: { showInNavigation: true, label: "Maintenance" }
-      },
-      {
-        path: "application",
-        element: <Application />
-      },
       {
         path: "contact",
         element: <Contact />,
         handle: { showInNavigation: true, label: "Contact" }
+      },
+      {
+        element: <PrivateRoute />,
+        children: [
+          {
+            path: "dashboard",
+            element: <Dashboard />,
+            handle: { showInNavigation: true, label: "Dashboard" }
+          },
+          {
+            path: "maintenance",
+            element: <Maintenance />,
+            handle: { showInNavigation: true, label: "Maintenance" }
+          },
+          {
+            path: "application",
+            element: <Application />
+          }
+        ]
       }
     ]
   }

package/dist/package.json

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