groombook/app
Archived
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): add X-Impersonation-Session-Id header to portal API calls

Browse Source 
This commit also includes GRO-287 fixes:
- PasswordChange: add stateful form with password-match validation
- ReportCards: replace window.location.reload() with refetch via useRef

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Barkley Trimsworth
2026-03-30 10:58:54 +00:00
parent 8437dc43dc
commit 5aad2da55a
4 changed files with 87 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/portal/CustomerPortal.tsx
+1 -1
View File
@@ -133,7 +133,7 @@ export function CustomerPortal() {
case "pets":
return <PetProfiles readOnly={!!isReadOnly} sessionId={sessionId} />;
case "reports":
return <ReportCards />;
return <ReportCards sessionId={sessionId} />;
case "billing":
return <BillingPayments readOnly={!!isReadOnly} sessionId={sessionId} />;
case "messages":
apps/web/src/portal/sections/AccountSettings.tsx
+51 -6
View File
@@ -72,7 +72,9 @@ function PersonalInfo({ sessionId, readOnly }: { sessionId: string | null; readO
const fetchPersonalInfo = async () => {
try {
setLoading(true);
const response = await fetch("/api/portal/me");
const response = await fetch("/api/portal/me", {
headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
});
if (response.ok) {
const data: PersonalInfoData = await response.json();
setForm({
@@ -142,6 +144,14 @@ function PersonalInfo({ sessionId, readOnly }: { sessionId: string | null; readO
}
function PasswordChange({ readOnly }: { readOnly: boolean }) {
const [currentPassword, setCurrentPassword] = useState("");
const [newPassword, setNewPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [error, setError] = useState<string | null>(null);
const passwordsMatch = newPassword === confirmPassword;
const canSubmit = currentPassword.length > 0 && newPassword.length > 0 && passwordsMatch;
if (readOnly) {
return (
<div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
@@ -150,23 +160,56 @@ function PasswordChange({ readOnly }: { readOnly: boolean }) {
);
}
function handleSubmit() {
if (!canSubmit) return;
if (newPassword !== confirmPassword) {
setError("Passwords do not match.");
return;
}
// TODO: Wire up to actual password-change API endpoint once backend support exists
setError(null);
setCurrentPassword("");
setNewPassword("");
setConfirmPassword("");
}
return (
<div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
<h3 className="font-medium text-stone-800 mb-4">Change Password</h3>
<div className="space-y-4 max-w-md">
<div>
<label className="block text-sm font-medium text-stone-700 mb-1">Current Password</label>
<input type="password" className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm" />
<input
type="password"
value={currentPassword}
onChange={(e) => setCurrentPassword(e.target.value)}
className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm"
/>
</div>
<div>
<label className="block text-sm font-medium text-stone-700 mb-1">New Password</label>
<input type="password" className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm" />
<input
type="password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm"
/>
</div>
<div>
<label className="block text-sm font-medium text-stone-700 mb-1">Confirm New Password</label>
<input type="password" className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm" />
<input
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm"
/>
</div>
<button className="px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover)">
{error && <p className="text-sm text-red-500">{error}</p>}
<button
onClick={handleSubmit}
disabled={!canSubmit}
className="px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover) disabled:opacity-50 disabled:cursor-not-allowed"
>
Update Password
</button>
</div>
@@ -185,7 +228,9 @@ function ManagePets({ sessionId, readOnly }: { sessionId: string | null; readOnl
const fetchPets = async () => {
try {
setLoading(true);
const response = await fetch("/api/portal/pets");
const response = await fetch("/api/portal/pets", {
headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
});
if (response.ok) {
const data = await response.json();
setPets(Array.isArray(data) ? data : []);
apps/web/src/portal/sections/Appointments.tsx
+3 -3
View File
@@ -118,7 +118,7 @@ export const AppointmentsSection: React.FC<AppointmentsSectionProps> = ({ sessio
try {
const response = await fetch('/api/portal/appointments', {
headers: { Authorization: `Bearer ${sessionId}` },
headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
});
if (response.ok) {
@@ -744,10 +744,10 @@ function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
try {
const [petsRes, servicesRes] = await Promise.all([
fetch('/api/portal/pets', {
headers: { Authorization: `Bearer ${sessionId}` },
headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
}),
fetch('/api/portal/services', {
headers: { Authorization: `Bearer ${sessionId}` },
headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
}),
]);
apps/web/src/portal/sections/ReportCards.tsx
+32 -24
View File
@@ -1,4 +1,4 @@
import { useState, useEffect } from "react";
import { useState, useEffect, useCallback, useRef } from "react";
import { FileText, Share2, Calendar, Smile, Meh, ChevronRight, Loader2 } from "lucide-react";
type MoodKey = "calm" | "cooperative" | "anxious" | "wiggly";
@@ -24,36 +24,44 @@ interface Appointment {
reportCardId?: string;
}
export function ReportCards() {
interface Props {
sessionId: string | null;
}
export function ReportCards({ sessionId }: Props) {
const [appointments, setAppointments] = useState<Appointment[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [selectedCard, setSelectedCard] = useState<Appointment | null>(null);
useEffect(() => {
const fetchReportCards = async () => {
try {
const response = await fetch("/api/portal/appointments");
const fetchReportCardsRef = useRef<() => Promise<void>>(async () => {
setIsLoading(true);
setError(null);
try {
const response = await fetch("/api/portal/appointments", {
headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
});
if (response.ok) {
const data = await response.json();
const allAppointments: Appointment[] = data.appointments || data || [];
const reportCardAppointments = allAppointments.filter(
(appt) => appt.reportCardId
);
setAppointments(reportCardAppointments);
} else {
setError("Failed to load report cards.");
}
} catch {
setError("Failed to load report cards. Please try again.");
} finally {
setIsLoading(false);
if (response.ok) {
const data = await response.json();
const allAppointments: Appointment[] = data.appointments || data || [];
const reportCardAppointments = allAppointments.filter(
(appt) => appt.reportCardId
);
setAppointments(reportCardAppointments);
} else {
setError("Failed to load report cards.");
}
};
} catch {
setError("Failed to load report cards. Please try again.");
} finally {
setIsLoading(false);
}
});
fetchReportCards();
}, []);
useEffect(() => {
void fetchReportCardsRef.current();
}, [sessionId]);
if (isLoading) {
return (
@@ -69,7 +77,7 @@ export function ReportCards() {
<div className="text-center py-12">
<p className="text-red-600 mb-4">{error}</p>
<button
onClick={() => window.location.reload()}
onClick={() => { void fetchReportCardsRef.current(); }}
className="px-4 py-2 bg-stone-100 text-stone-700 rounded-md hover:bg-stone-200"
>
Retry