@salesforce/webapp-template-app-react-sample-b2x-experimental 1.96.0 → 1.97.0

package/dist/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.97.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.96.0...v1.97.0) (2026-03-12)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 # [1.96.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.95.0...v1.96.0) (2026-03-12)
 
 **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.96.0",
-    "@salesforce/webapp-experimental": "^1.96.0",
+    "@salesforce/sdk-data": "^1.97.0",
+    "@salesforce/webapp-experimental": "^1.97.0",
     "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-form": "^1.28.5",
     "@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.96.0",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.97.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/WeatherWidget.tsx

@@ -0,0 +1,221 @@
+import { useState } from "react";
+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useWeather, type WeatherCurrent, type WeatherHour } from "@/hooks/useWeather";
+import {
+	Sun,
+	Cloud,
+	CloudSun,
+	CloudRain,
+	CloudSnow,
+	CloudLightning,
+	CloudFog,
+	CloudDrizzle,
+	Wind,
+	Droplets,
+	type LucideIcon,
+} from "lucide-react";
+
+type ForecastTab = "today" | "tomorrow" | "next3days";
+
+const FORECAST_TABS: { key: ForecastTab; label: string }[] = [
+	{ key: "today", label: "Today" },
+	{ key: "tomorrow", label: "Tomorrow" },
+	{ key: "next3days", label: "Next 3 Days" },
+];
+
+function getWeatherIcon(code: number, className = "h-16 w-16 text-gray-400") {
+	const props = { className, "aria-hidden": true as const };
+	if (code <= 1) return <Sun {...props} />;
+	if (code === 2) return <CloudSun {...props} />;
+	if (code === 3) return <Cloud {...props} />;
+	if (code === 45 || code === 48) return <CloudFog {...props} />;
+	if (code >= 51 && code <= 55) return <CloudDrizzle {...props} />;
+	if (code >= 61 && code <= 65) return <CloudRain {...props} />;
+	if (code >= 71 && code <= 77) return <CloudSnow {...props} />;
+	if (code >= 80 && code <= 82) return <CloudRain {...props} />;
+	if (code >= 85 && code <= 86) return <CloudSnow {...props} />;
+	if (code >= 95) return <CloudLightning {...props} />;
+	return <Sun {...props} />;
+}
+
+const Divider = () => <div className="my-5 border-t border-gray-200" />;
+
+function WeatherSkeleton() {
+	return (
+		<div className="mt-5 space-y-5" aria-hidden="true">
+			<Skeleton className="h-4 w-32" />
+
+			<div className="flex items-center justify-between">
+				<div className="space-y-2">
+					<Skeleton className="h-4 w-20" />
+					<Skeleton className="h-14 w-32" />
+				</div>
+				<Skeleton className="h-20 w-20 rounded-full" />
+			</div>
+
+			<div className="border-t border-gray-200" />
+
+			<div className="grid grid-cols-3 gap-2">
+				{[0, 1, 2].map((i) => (
+					<div key={i} className="flex flex-col items-center gap-1.5">
+						<Skeleton className="h-5 w-5 rounded-full" />
+						<Skeleton className="h-4 w-14" />
+						<Skeleton className="h-3 w-10" />
+					</div>
+				))}
+			</div>
+
+			<div className="border-t border-gray-200" />
+
+			<div className="flex gap-6">
+				<Skeleton className="h-4 w-12" />
+				<Skeleton className="h-4 w-16" />
+				<Skeleton className="h-4 w-20" />
+			</div>
+
+			<div className="flex gap-3">
+				{[0, 1, 2, 3].map((i) => (
+					<div
+						key={i}
+						className="flex w-[70px] flex-col items-center gap-1.5 rounded-2xl border border-gray-100 px-3 py-3"
+					>
+						<Skeleton className="h-3 w-10" />
+						<Skeleton className="h-5 w-5 rounded-full" />
+						<Skeleton className="h-4 w-8" />
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
+
+function StatItem({
+	icon: Icon,
+	value,
+	label,
+}: {
+	icon: LucideIcon;
+	value: string;
+	label: string;
+}) {
+	return (
+		<div className="flex flex-col items-center gap-1">
+			<Icon className="h-5 w-5 text-gray-400" />
+			<p className="text-base font-semibold text-primary">{value}</p>
+			<p className="text-xs text-muted-foreground">{label}</p>
+		</div>
+	);
+}
+
+function CurrentConditions({ current }: { current: WeatherCurrent }) {
+	return (
+		<>
+			<p className="text-sm text-muted-foreground">
+				{new Date().toLocaleDateString("en-US", {
+					day: "numeric",
+					month: "long",
+					year: "numeric",
+				})}
+			</p>
+
+			<div className="mt-2 flex items-center justify-between">
+				<div>
+					<p className="text-base text-foreground">{current.description}</p>
+					<p className="text-6xl font-bold tracking-tight text-foreground">
+						{current.tempF}
+						<span className="align-top text-3xl">°</span>
+						<span className="text-4xl">F</span>
+					</p>
+				</div>
+				{getWeatherIcon(current.weatherCode, "h-20 w-20 text-gray-400")}
+			</div>
+
+			<Divider />
+
+			<div className="grid grid-cols-3 gap-2 text-center">
+				<StatItem icon={Wind} value={`${current.windSpeedMph} mph`} label="Wind" />
+				<StatItem icon={Droplets} value={`${current.humidity}%`} label="Humidity" />
+				<StatItem icon={CloudRain} value={`${current.precipitationProbability}%`} label="Rain" />
+			</div>
+		</>
+	);
+}
+
+function ForecastTabs({
+	activeTab,
+	onTabChange,
+}: {
+	activeTab: ForecastTab;
+	onTabChange: (tab: ForecastTab) => void;
+}) {
+	return (
+		<div className="flex gap-6">
+			{FORECAST_TABS.map(({ key, label }) => (
+				<button key={key} onClick={() => onTabChange(key)} className="flex flex-col items-center">
+					<span
+						className={`text-sm font-semibold ${activeTab === key ? "text-foreground" : "text-muted-foreground"}`}
+					>
+						{label}
+					</span>
+					{activeTab === key && <span className="mt-1 h-1.5 w-1.5 rounded-full bg-foreground" />}
+				</button>
+			))}
+		</div>
+	);
+}
+
+function HourlyForecast({ hours }: { hours: WeatherHour[] }) {
+	if (hours.length === 0) return null;
+
+	return (
+		<div className="mt-4 flex gap-3 overflow-x-auto pb-1">
+			{hours.map((h) => (
+				<div
+					key={h.time}
+					className="flex min-w-[70px] flex-col items-center gap-1.5 rounded-2xl border border-gray-100 bg-gray-50/80 px-3 py-3"
+				>
+					<p className="whitespace-nowrap text-xs text-muted-foreground">{h.time}</p>
+					{getWeatherIcon(h.weatherCode, "h-5 w-5 text-gray-500")}
+					<p className="text-base font-semibold text-foreground">{h.tempF}°</p>
+				</div>
+			))}
+		</div>
+	);
+}
+
+export function WeatherWidget() {
+	const { data: weather, loading, error } = useWeather();
+	const [activeTab, setActiveTab] = useState<ForecastTab>("today");
+
+	const activeHourly = !weather
+		? []
+		: activeTab === "tomorrow"
+			? weather.tomorrowHourly
+			: activeTab === "next3days"
+				? weather.next3DaysHourly
+				: weather.todayHourly;
+
+	return (
+		<Card className="rounded-2xl border-0 p-6 shadow-md">
+			<h2 className="text-lg font-semibold text-primary">Weather</h2>
+
+			{loading && <WeatherSkeleton />}
+
+			{error && (
+				<p className="mt-4 text-sm text-destructive" role="alert">
+					{error}
+				</p>
+			)}
+
+			{!loading && !error && weather && (
+				<div className="mt-5">
+					<CurrentConditions current={weather.current} />
+					<Divider />
+					<ForecastTabs activeTab={activeTab} onTabChange={setActiveTab} />
+					<HourlyForecast hours={activeHourly} />
+				</div>
+			)}
+		</Card>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/useWeather.ts

@@ -49,16 +49,21 @@ export interface WeatherCurrent {
 	humidity: number;
 	windSpeedKmh: number;
 	windSpeedMph: number;
+	weatherCode: number;
+	precipitationProbability: number;
 }
 
 export interface WeatherHour {
-	time: string; // ISO or "h:mm a"
+	time: string;
 	tempF: number;
+	weatherCode: number;
 }
 
 export interface WeatherData {
 	current: WeatherCurrent;
-	hourly: WeatherHour[];
+	todayHourly: WeatherHour[];
+	tomorrowHourly: WeatherHour[];
+	next3DaysHourly: WeatherHour[];
 	timezone: string;
 }
 
@@ -70,9 +75,9 @@ async function fetchWeather(lat: number, lng: number): Promise<WeatherData> {
 		"current",
 		"temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m",
 	);
-	url.searchParams.set("hourly", "temperature_2m");
+	url.searchParams.set("hourly", "temperature_2m,weather_code,precipitation_probability");
 	url.searchParams.set("timezone", "America/Los_Angeles");
-	url.searchParams.set("forecast_days", "1");
+	url.searchParams.set("forecast_days", "4");
 
 	const res = await fetch(url.toString());
 	if (!res.ok) throw new Error(`Weather failed: ${res.status}`);
@@ -83,7 +88,12 @@ async function fetchWeather(lat: number, lng: number): Promise<WeatherData> {
 			weather_code?: number;
 			wind_speed_10m?: number;
 		};
-		hourly?: { time?: string[]; temperature_2m?: (number | null)[] };
+		hourly?: {
+			time?: string[];
+			temperature_2m?: (number | null)[];
+			weather_code?: (number | null)[];
+			precipitation_probability?: (number | null)[];
+		};
 		timezone?: string;
 	};
 
@@ -94,38 +104,65 @@ async function fetchWeather(lat: number, lng: number): Promise<WeatherData> {
 	const windMph = Math.round(windKmh * 0.621371 * 10) / 10;
 	const code = cur.weather_code ?? 0;
 
-	const hourly: WeatherHour[] = [];
 	const times = data.hourly?.time ?? [];
 	const temps = data.hourly?.temperature_2m ?? [];
+	const hourlyCodes = data.hourly?.weather_code ?? [];
+	const precipProbs = data.hourly?.precipitation_probability ?? [];
 	const now = new Date();
-	for (let i = 0; i < Math.min(12, times.length); i++) {
+
+	let currentPrecipProb = 0;
+	for (let i = 0; i < times.length; i++) {
 		const t = times[i];
-		const temp = temps[i];
-		if (t && temp != null) {
-			const d = new Date(t);
-			if (d >= now) {
-				hourly.push({
-					time: d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true }),
-					tempF: celsiusToFahrenheit(temp),
-				});
-			}
+		if (t && new Date(t) >= now) {
+			currentPrecipProb = precipProbs[i] ?? 0;
+			break;
 		}
 	}
-	// If no future hours, use first 4 from response
-	if (hourly.length === 0) {
-		for (let i = 0; i < Math.min(4, times.length); i++) {
-			const t = times[i];
-			const temp = temps[i];
-			if (t && temp != null) {
-				hourly.push({
-					time: new Date(t).toLocaleTimeString("en-US", {
-						hour: "numeric",
-						minute: "2-digit",
-						hour12: true,
-					}),
-					tempF: celsiusToFahrenheit(temp),
-				});
-			}
+
+	const todayDateStr = now.toISOString().split("T")[0];
+	const tomorrowDate = new Date(now);
+	tomorrowDate.setDate(tomorrowDate.getDate() + 1);
+	const tomorrowDateStr = tomorrowDate.toISOString().split("T")[0];
+
+	const todayHourly: WeatherHour[] = [];
+	const tomorrowHourly: WeatherHour[] = [];
+	const next3DaysHourly: WeatherHour[] = [];
+
+	for (let i = 0; i < times.length; i++) {
+		const t = times[i];
+		const temp = temps[i];
+		if (!t || temp == null) continue;
+
+		const d = new Date(t);
+		const dateStr = t.split("T")[0];
+		const wc = hourlyCodes[i] ?? 0;
+		const langCode = navigator.language ?? "en-US";
+
+		if (dateStr === todayDateStr && d > now) {
+			todayHourly.push({
+				time: d.toLocaleTimeString(langCode, { hour: "numeric" }),
+				tempF: celsiusToFahrenheit(temp),
+				weatherCode: wc,
+			});
+		}
+
+		if (dateStr === tomorrowDateStr && d.getHours() % 3 === 0) {
+			tomorrowHourly.push({
+				time: d.toLocaleTimeString(langCode, { hour: "numeric" }),
+				tempF: celsiusToFahrenheit(temp),
+				weatherCode: wc,
+			});
+		}
+
+		if (dateStr > todayDateStr && d.getHours() % 6 === 0) {
+			next3DaysHourly.push({
+				time:
+					d.toLocaleDateString(langCode, { weekday: "short" }) +
+					" " +
+					d.toLocaleTimeString(langCode, { hour: "numeric" }),
+				tempF: celsiusToFahrenheit(temp),
+				weatherCode: wc,
+			});
 		}
 	}
 
@@ -136,8 +173,12 @@ async function fetchWeather(lat: number, lng: number): Promise<WeatherData> {
 			humidity,
 			windSpeedKmh: windKmh,
 			windSpeedMph: windMph,
+			weatherCode: code,
+			precipitationProbability: currentPrecipProb,
 		},
-		hourly: hourly.slice(0, 6),
+		todayHourly,
+		tomorrowHourly,
+		next3DaysHourly,
 		timezone: data.timezone ?? "America/Los_Angeles",
 	};
 }

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

@@ -1,11 +1,10 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { Link } from "react-router";
 import { MaintenanceRequestIcon } from "@/components/MaintenanceRequestIcon";
-import { useWeather } from "@/hooks/useWeather";
+import { WeatherWidget } from "@/components/WeatherWidget";
 import { useMaintenanceRequests } from "@/hooks/useMaintenanceRequests";
 
 export default function Dashboard() {
-	const { data: weather, loading: weatherLoading, error: weatherError } = useWeather();
 	const {
 		requests: maintenanceRequests,
 		loading: maintenanceLoading,
@@ -19,7 +18,7 @@ export default function Dashboard() {
 			<div className="min-w-0 flex-1">
 				<Card className="border-gray-200 p-6 shadow-sm">
 					<div className="mb-6 flex items-center justify-between">
-						<h2 className="text-lg font-semibold uppercase tracking-wide text-primary">
+						<h2 className="text-lg font-semibold tracking-wide text-primary">
 							Maintenance Requests
 						</h2>
 						<Link
@@ -89,57 +88,9 @@ export default function Dashboard() {
 					</CardContent>
 				</Card>
 			</div>
-			{/* Weather: stays visible and clear */}
+			{/* Weather */}
 			<div className="w-full shrink-0 lg:w-[320px]">
-				<Card className="rounded-2xl shadow-md">
-					<CardHeader>
-						<CardTitle className="text-primary">Weather</CardTitle>
-						<p className="text-sm text-muted-foreground">
-							{new Date().toLocaleDateString("en-US", {
-								weekday: "short",
-								month: "short",
-								day: "numeric",
-								year: "numeric",
-							})}
-						</p>
-					</CardHeader>
-					<CardContent className="space-y-4">
-						{weatherLoading && <p className="text-sm text-muted-foreground">Loading weather…</p>}
-						{weatherError && (
-							<p className="text-sm text-destructive" role="alert">
-								{weatherError}
-							</p>
-						)}
-						{!weatherLoading && !weatherError && weather && (
-							<>
-								<p className="text-base text-foreground">{weather.current.description}</p>
-								<p className="text-4xl font-bold text-foreground">{weather.current.tempF}°F</p>
-								<div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
-									<span>{weather.current.windSpeedMph} mph Wind</span>
-									<span>{weather.current.humidity}% Humidity</span>
-								</div>
-								<div className="flex gap-2 border-b border-border pb-2">
-									<span className="border-b-2 border-primary pb-1 text-sm font-semibold text-primary">
-										Today
-									</span>
-								</div>
-								{weather.hourly.length > 0 && (
-									<div className="flex flex-wrap gap-4">
-										{weather.hourly.map((h) => (
-											<div
-												key={h.time}
-												className="min-w-[60px] rounded-xl bg-muted/50 p-2 text-center"
-											>
-												<p className="text-xs text-muted-foreground">{h.time}</p>
-												<p className="text-base font-semibold text-foreground">{h.tempF}°</p>
-											</div>
-										))}
-									</div>
-								)}
-							</>
-						)}
-					</CardContent>
-				</Card>
+				<WeatherWidget />
 			</div>
 		</div>
 	);

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

@@ -59,7 +59,7 @@ export default function Maintenance() {
 					Type__c: type.trim() || undefined,
 					Priority__c: priority,
 					Status__c: "New",
-					Scheduled__c: dateRequested || undefined,
+					Scheduled__c: dateRequested ? new Date(dateRequested).toISOString() : undefined,
 				});
 				setSubmitSuccess(true);
 				setTitle("");

package/dist/package.json

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