@salesforce/webapp-template-app-react-sample-b2x-experimental 1.68.0 → 1.69.0

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

@@ -1,99 +1,286 @@
-import { Link } from "react-router";
+import { useSearchParams, Link } from "react-router";
+import { useCallback, useEffect, useState } from "react";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
-import { Card, CardHeader, CardTitle, CardContent } from "../components/ui/card";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "../components/ui/tabs";
+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"];
 
 export default function Application() {
+	const [searchParams] = useSearchParams();
+	const listingId = searchParams.get("listingId") ?? "";
+
+	const [listingName, setListingName] = useState<string | null>(null);
+	const [propertyAddress, setPropertyAddress] = useState<string | null>(null);
+	const [propertyId, setPropertyId] = useState<string | null>(null);
+	const [propertyImageUrl, setPropertyImageUrl] = 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 [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 (!listingId?.trim()) {
+			setLoading(false);
+			return;
+		}
+		let cancelled = false;
+		setLoadError(null);
+		(async () => {
+			try {
+				const listing = await fetchListingById(listingId);
+				if (cancelled) return;
+				if (!listing) {
+					setLoadError("Listing not found.");
+					setLoading(false);
+					return;
+				}
+				setListingName(listing.name);
+				if (listing.propertyId) {
+					setPropertyId(listing.propertyId);
+					const [property, primaryImages] = await Promise.all([
+						fetchPropertyById(listing.propertyId),
+						fetchPrimaryImagesByPropertyIds([listing.propertyId]),
+					]);
+					if (cancelled) return;
+					setPropertyAddress(property?.address ?? null);
+					setPropertyImageUrl(primaryImages[listing.propertyId] ?? null);
+				}
+			} catch (e) {
+				if (!cancelled) {
+					setLoadError(e instanceof Error ? e.message : "Failed to load listing.");
+				}
+			} finally {
+				if (!cancelled) setLoading(false);
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [listingId]);
+
+	const handleSubmit = useCallback(
+		async (e: React.FormEvent) => {
+			e.preventDefault();
+			setSubmitError(null);
+			setSubmitting(true);
+			try {
+				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,
+					Start_Date__c: moveInDate.trim() || null,
+					Preferred_Term__c: preferredTerm.trim() || null,
+					Employment_Info__c: employmentInfo.trim() || null,
+					References__c: references.trim() || null,
+				});
+				setSubmittedId(id.id);
+			} catch (err) {
+				setSubmitError(err instanceof Error ? err.message : "Failed to submit application.");
+			} finally {
+				setSubmitting(false);
+			}
+		},
+		[
+			propertyId,
+			firstName,
+			lastName,
+			email,
+			phone,
+			moveInDate,
+			preferredTerm,
+			employmentInfo,
+			references,
+		],
+	);
+
+	if (loading) {
+		return (
+			<div className="mx-auto max-w-[800px]">
+				<div className="mb-6 h-48 animate-pulse rounded-xl bg-muted" />
+				<div className="h-64 animate-pulse rounded-lg bg-muted" />
+			</div>
+		);
+	}
+
+	if (submittedId) {
+		return (
+			<div className="mx-auto max-w-[800px]">
+				<Card className="mb-6 p-6">
+					<h2 className="mb-2 text-lg font-semibold text-primary">Application submitted</h2>
+					<p className="text-sm text-muted-foreground">
+						Your application has been saved. Reference: {submittedId}
+					</p>
+					<div className="mt-4 flex gap-2">
+						<Button asChild variant="outline" size="sm">
+							<Link to="/properties">Back to search</Link>
+						</Button>
+						<Button asChild size="sm">
+							<Link to="/application">Submit another</Link>
+						</Button>
+					</div>
+				</Card>
+			</div>
+		);
+	}
+
 	return (
 		<div className="mx-auto max-w-[800px]">
 			<Card className="mb-6 flex gap-4 p-6">
-				<div className="size-[200px] shrink-0 rounded-xl bg-muted" />
+				<div className="relative size-[200px] shrink-0 overflow-hidden rounded-xl bg-muted">
+					{propertyImageUrl ? (
+						<img src={propertyImageUrl} alt="" className="h-full w-full object-cover" />
+					) : (
+						<div className="h-full w-full bg-muted" aria-hidden />
+					)}
+				</div>
 				<div className="min-w-0 flex-1">
-					<h2 className="mb-1 text-lg font-semibold text-primary">Verdana Apartments</h2>
-					<p className="text-sm text-muted-foreground">301 Bryant St, San Francisco, CA 94107</p>
-					<p className="mt-2 text-sm text-muted-foreground">
-						I have read and agree to the Terms & Conditions.
+					<h2 className="mb-1 text-lg font-semibold text-primary">
+						{listingName ?? "Apply for a property"}
+					</h2>
+					<p className="text-sm text-muted-foreground">
+						{propertyAddress ??
+							(listingId
+								? "Loading…"
+								: "Select a property from search or listing detail to apply.")}
 					</p>
+					{loadError && <p className="mt-2 text-sm text-destructive">{loadError}</p>}
 				</div>
 				<div className="flex gap-2">
-					<Button variant="outline" size="sm">
-						Cancel Application
+					<Button asChild variant="outline" size="sm">
+						<Link to={listingId ? `/property/${listingId}` : "/properties"}>Back to listing</Link>
 					</Button>
-					<Button size="sm">Save for Later</Button>
 				</div>
 			</Card>
-			<Tabs defaultValue="applicants" className="mb-6">
-				<TabsList className="mb-4 flex h-auto flex-wrap gap-4 border-b border-border bg-transparent p-0">
-					<TabsTrigger
-						value="applicants"
-						className="rounded-none border-b-2 border-primary bg-transparent px-0 pb-1 data-[state=active]:shadow-none"
-					>
-						APPLICANTS & OCCUPANTS
-					</TabsTrigger>
-					<TabsTrigger
-						value="details"
-						className="rounded-none border-b-0 bg-transparent px-0 pb-1 text-muted-foreground data-[state=active]:shadow-none"
-					>
-						YOUR DETAILS
-					</TabsTrigger>
-					<TabsTrigger
-						value="screening"
-						className="rounded-none border-b-0 bg-transparent px-0 pb-1 text-muted-foreground data-[state=active]:shadow-none"
-					>
-						SCREENING
-					</TabsTrigger>
-					<TabsTrigger
-						value="submit"
-						className="rounded-none border-b-0 bg-transparent px-0 pb-1 text-muted-foreground data-[state=active]:shadow-none"
-					>
-						FINISH & SUBMIT
-					</TabsTrigger>
-				</TabsList>
-				<TabsContent value="applicants" className="mt-0" />
-			</Tabs>
-			<Card>
+
+			<Card className="mb-6">
 				<CardContent className="pt-6">
-					<h3 className="mb-4 text-xs font-semibold uppercase tracking-wider 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>First Name *</Label>
-							<Input type="text" defaultValue="Sarah" />
+					<form onSubmit={handleSubmit}>
+						<h3 className="mb-4 text-xs font-semibold uppercase tracking-wider 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) => 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) => setLastName(e.target.value)}
+								/>
+							</div>
 						</div>
-						<div className="space-y-2">
-							<Label>Last Name</Label>
-							<Input type="text" />
+						<div className="mb-4 space-y-2">
+							<Label htmlFor="app-email">Email Address</Label>
+							<Input
+								id="app-email"
+								type="email"
+								value={email}
+								onChange={(e) => setEmail(e.target.value)}
+							/>
 						</div>
-					</div>
-					<div className="mb-4 space-y-2">
-						<Label>Email Address</Label>
-						<Input type="email" />
-					</div>
-					<div className="mb-4 space-y-2">
-						<Label>Phone Number</Label>
-						<Input type="tel" />
-					</div>
-					<h3 className="mb-4 mt-6 text-xs font-semibold uppercase tracking-wider text-foreground">
-						MOVE IN
-					</h3>
-					<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-						<div className="space-y-2">
-							<Label>MOVE IN DATE</Label>
-							<Input type="text" placeholder="Select Date" />
+						<div className="mb-4 space-y-2">
+							<Label htmlFor="app-phone">Phone Number</Label>
+							<Input
+								id="app-phone"
+								type="tel"
+								value={phone}
+								onChange={(e) => setPhone(e.target.value)}
+							/>
 						</div>
-						<div className="space-y-2">
-							<Label>PREFERRED TERM</Label>
-							<select 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">
-								<option>Select One</option>
-								<option>1 month</option>
-								<option>6 months</option>
-								<option>12 months</option>
-							</select>
+						<h3 className="mb-4 mt-6 text-xs font-semibold uppercase tracking-wider 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>
+								<Input
+									id="app-move-in"
+									type="date"
+									value={moveInDate}
+									onChange={(e) => 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) => setPreferredTerm(e.target.value)}
+								>
+									{PREFERRED_TERM_OPTIONS.map((opt) => (
+										<option key={opt || "empty"} value={opt}>
+											{opt || "Select one"}
+										</option>
+									))}
+								</select>
+							</div>
 						</div>
-					</div>
+						<div className="mb-4 space-y-2">
+							<Label htmlFor="app-employment">Employment info</Label>
+							<textarea
+								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)}
+							/>
+						</div>
+						<div className="mb-4 space-y-2">
+							<Label htmlFor="app-references">References</Label>
+							<textarea
+								id="app-references"
+								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={references}
+								onChange={(e) => setReferences(e.target.value)}
+							/>
+						</div>
+						{submitError && <p className="mb-4 text-sm text-destructive">{submitError}</p>}
+						<div className="flex gap-2">
+							<Button
+								type="submit"
+								size="sm"
+								className="bg-teal-600 hover:bg-teal-700"
+								disabled={submitting}
+							>
+								{submitting ? "Submitting…" : "Submit application"}
+							</Button>
+						</div>
+					</form>
 				</CardContent>
 			</Card>
 		</div>

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

@@ -0,0 +1,158 @@
+import { useState, useCallback } 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";
+
+export default function Contact() {
+	const [firstName, setFirstName] = useState("");
+	const [lastName, setLastName] = useState("");
+	const [email, setEmail] = useState("");
+	const [phone, setPhone] = useState("");
+	const [subject, setSubject] = useState("");
+	const [message, setMessage] = useState("");
+	const [submitting, setSubmitting] = useState(false);
+	const [submitError, setSubmitError] = useState<string | null>(null);
+	const [submitted, setSubmitted] = useState(false);
+
+	const handleSubmit = useCallback(
+		async (e: React.FormEvent) => {
+			e.preventDefault();
+			setSubmitError(null);
+			setSubmitting(true);
+			try {
+				await createContactUsLead({
+					FirstName: firstName.trim(),
+					LastName: lastName.trim(),
+					Email: email.trim(),
+					Phone: phone.trim() || undefined,
+					Subject: subject.trim() || undefined,
+					Message: message.trim(),
+				});
+				setSubmitted(true);
+				setFirstName("");
+				setLastName("");
+				setEmail("");
+				setPhone("");
+				setSubject("");
+				setMessage("");
+			} catch (err) {
+				setSubmitError(
+					err instanceof Error ? err.message : "Something went wrong. Please try again.",
+				);
+			} finally {
+				setSubmitting(false);
+			}
+		},
+		[firstName, lastName, email, phone, subject, message],
+	);
+
+	if (submitted) {
+		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>
+		);
+	}
+
+	return (
+		<div className="mx-auto max-w-[600px]">
+			<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.
+			</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>
+	);
+}