feat: customer-facing appointment notes (GRO-106) (#109)
* feat: add customer-facing appointment notes (GRO-106) - Migration 0014: add customer_notes column to appointments - Schema update: add customerNotes field to appointments table - Factory update: include customerNotes in buildAppointment - Portal route: PATCH /api/portal/appointments/:id/notes - Ownership validation via impersonation session - Future-only validation (no edits after start) - 500 character limit - Register portal router in index.ts Co-Authored-By: Paperclip <noreply@paperclip.ing> * Fix confirmationToken leak and add unit tests for portal notes endpoint - Return only id, customerNotes, updatedAt instead of full appointment row - Add comprehensive unit tests covering auth, ownership, time-gating, and validation - Fix: confirmationToken no longer returned to portal session Co-Authored-By: Paperclip <noreply@paperclip.ing> * feat: add customer notes UI to portal and staff views (GRO-178) - Add customerNotes field to Appointment type - Add read-only customer notes display in staff appointment detail modal - Add customer notes textarea with save, char counter (500 max), and disabled state - Wire up PATCH /api/portal/appointments/:id/notes in portal UI - Update mockData with customerNotes field Co-Authored-By: Paperclip <noreply@paperclip.ing> * fix: address QA review feedback - null check and portal route auth - Add null check after db.update().returning() in portal notes endpoint - Move portal router registration before auth middleware so clients can access it - Remove unused ENDED_SESSION variable from test file Co-Authored-By: Paperclip <noreply@paperclip.ing> * fix(portal): address QA review - isUpcoming time parsing and session header - Fixed parseTimeTo24Hour to handle 12-hour AM/PM format correctly - Added X-Impersonation-Session-Id header to CustomerNotesSection fetch - Added comprehensive tests for CustomerNotesSection and time parsing - Fixed TypeScript strict null checks for parseTimeTo24Hour Fixes QA review issues: - isUpcoming() now correctly parses 12-hour time format - CustomerNotesSection sends session ID header for auth - Added unit tests for new UI component Co-Authored-By: Paperclip <noreply@paperclip.ing> * fix: thread sessionId as prop instead of sessionStorage CustomerNotesSection was reading sessionStorage for the impersonation session ID, but CustomerPortal stores it in React state. Pass sessionId as a prop through AppointmentsSection and AppointmentCard instead. Also update tests to pass sessionId prop and add test for null sessionId case. Co-Authored-By: Paperclip <noreply@paperclip.ing> --------- Co-authored-by: Scrubs McBarkley <scrubs@groombook.app> Co-authored-by: Paperclip <noreply@paperclip.ing> Co-authored-by: groombook-cto[bot] <269737991+groombook-cto[bot]@users.noreply.github.com>
This commit was merged in pull request #109.
This commit is contained in:
groombook-engineer[bot]
committed by
GitHub
GitHub
parent
553fa435ed
commit
d0b4baf5aa
@@ -114,7 +114,7 @@ export function CustomerPortal() {
|
||||
case "dashboard":
|
||||
return <Dashboard onNavigate={handleNavClick} readOnly={!!isReadOnly} />;
|
||||
case "appointments":
|
||||
return <AppointmentsSection readOnly={!!isReadOnly} />;
|
||||
return <AppointmentsSection readOnly={!!isReadOnly} sessionId={session?.id ?? null} />;
|
||||
case "pets":
|
||||
return <PetProfiles readOnly={!!isReadOnly} />;
|
||||
case "reports":
|
||||
|
||||
@@ -42,6 +42,7 @@ export interface Appointment {
|
||||
price: number;
|
||||
status: "confirmed" | "pending" | "waitlisted" | "completed" | "cancelled";
|
||||
notes: string;
|
||||
customerNotes: string;
|
||||
reportCardId?: string;
|
||||
}
|
||||
|
||||
@@ -177,18 +178,21 @@ export const UPCOMING_APPOINTMENTS: Appointment[] = [
|
||||
services: ["Full Groom"], addOns: ["De-shedding Treatment"],
|
||||
date: "2026-03-21", time: "10:00 AM", duration: 120, price: 145,
|
||||
status: "confirmed", notes: "Spring shed is heavy — extra undercoat work needed",
|
||||
customerNotes: "",
|
||||
},
|
||||
{
|
||||
id: "a2", petId: "p2", petName: "Mochi", groomerId: "g3", groomerName: "Morgan",
|
||||
services: ["Full Groom"], addOns: ["Teeth Brushing"],
|
||||
date: "2026-03-25", time: "2:00 PM", duration: 100, price: 90,
|
||||
status: "confirmed", notes: "First visit with Morgan — patient with anxious pets",
|
||||
customerNotes: "",
|
||||
},
|
||||
{
|
||||
id: "a3", petId: "p1", petName: "Biscuit", groomerId: "g1", groomerName: "Jamie",
|
||||
services: ["Bath & Brush"], addOns: [],
|
||||
date: "2026-04-18", time: "11:00 AM", duration: 45, price: 55,
|
||||
status: "pending", notes: "",
|
||||
customerNotes: "",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -198,48 +202,56 @@ export const PAST_APPOINTMENTS: Appointment[] = [
|
||||
services: ["Full Groom"], addOns: ["De-shedding Treatment", "Blueberry Facial"],
|
||||
date: "2026-02-15", time: "10:00 AM", duration: 130, price: 160,
|
||||
status: "completed", notes: "", reportCardId: "rc1",
|
||||
customerNotes: "",
|
||||
},
|
||||
{
|
||||
id: "pa2", petId: "p2", petName: "Mochi", groomerId: "g2", groomerName: "Alex",
|
||||
services: ["Full Groom"], addOns: ["Teeth Brushing"],
|
||||
date: "2026-02-20", time: "1:00 PM", duration: 100, price: 88,
|
||||
status: "completed", notes: "", reportCardId: "rc2",
|
||||
customerNotes: "",
|
||||
},
|
||||
{
|
||||
id: "pa3", petId: "p1", petName: "Biscuit", groomerId: "g1", groomerName: "Jamie",
|
||||
services: ["Bath & Brush"], addOns: [],
|
||||
date: "2026-01-18", time: "9:00 AM", duration: 45, price: 55,
|
||||
status: "completed", notes: "",
|
||||
customerNotes: "",
|
||||
},
|
||||
{
|
||||
id: "pa4", petId: "p2", petName: "Mochi", groomerId: "g2", groomerName: "Alex",
|
||||
services: ["Puppy's First Groom"], addOns: [],
|
||||
date: "2026-01-10", time: "3:00 PM", duration: 60, price: 62,
|
||||
status: "completed", notes: "",
|
||||
customerNotes: "",
|
||||
},
|
||||
{
|
||||
id: "pa5", petId: "p1", petName: "Biscuit", groomerId: "g1", groomerName: "Jamie",
|
||||
services: ["Full Groom"], addOns: ["Nail Grinding"],
|
||||
date: "2025-12-20", time: "10:00 AM", duration: 105, price: 132,
|
||||
status: "completed", notes: "Holiday groom",
|
||||
customerNotes: "",
|
||||
},
|
||||
{
|
||||
id: "pa6", petId: "p1", petName: "Biscuit", groomerId: "g2", groomerName: "Alex",
|
||||
services: ["Full Groom"], addOns: [],
|
||||
date: "2025-11-15", time: "11:00 AM", duration: 90, price: 110,
|
||||
status: "completed", notes: "",
|
||||
customerNotes: "",
|
||||
},
|
||||
{
|
||||
id: "pa7", petId: "p2", petName: "Mochi", groomerId: "g3", groomerName: "Morgan",
|
||||
services: ["Bath & Brush"], addOns: [],
|
||||
date: "2025-11-08", time: "2:00 PM", duration: 45, price: 48,
|
||||
status: "completed", notes: "",
|
||||
customerNotes: "",
|
||||
},
|
||||
{
|
||||
id: "pa8", petId: "p1", petName: "Biscuit", groomerId: "g1", groomerName: "Jamie",
|
||||
services: ["Bath & Brush"], addOns: ["De-shedding Treatment"],
|
||||
date: "2025-10-12", time: "10:00 AM", duration: 75, price: 85,
|
||||
status: "completed", notes: "",
|
||||
customerNotes: "",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -1,16 +1,38 @@
|
||||
import { useState } from "react";
|
||||
import { Calendar, Clock, Plus, ChevronRight, ChevronDown, Search, Repeat } from "lucide-react";
|
||||
import { Calendar, Clock, Plus, ChevronRight, ChevronDown, Search, Repeat, Loader2 } from "lucide-react";
|
||||
import { UPCOMING_APPOINTMENTS, PAST_APPOINTMENTS, PETS, SERVICES, GROOMERS } from "../mockData.js";
|
||||
import type { Appointment, Pet, Service, Groomer } from "../mockData.js";
|
||||
|
||||
const MAX_CUSTOMER_NOTES = 500;
|
||||
|
||||
interface Props {
|
||||
readOnly: boolean;
|
||||
sessionId?: string | null;
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
export function formatDate(dateStr: string): string {
|
||||
return new Date(dateStr).toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric", year: "numeric" });
|
||||
}
|
||||
|
||||
export function parseTimeTo24Hour(time: string): string {
|
||||
const parts = time.split(" ");
|
||||
const hoursMinutes = parts[0] ?? "";
|
||||
const period = parts[1] ?? "";
|
||||
const [hoursStr, minutesStr] = hoursMinutes.split(":");
|
||||
const hours = parseInt(hoursStr ?? "0", 10);
|
||||
const minutes = parseInt(minutesStr ?? "0", 10);
|
||||
let hours24 = hours;
|
||||
if (period === "PM" && hours !== 12) hours24 += 12;
|
||||
if (period === "AM" && hours === 12) hours24 = 0;
|
||||
return `${hours24.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:00`;
|
||||
}
|
||||
|
||||
export function isUpcoming(appt: Appointment): boolean {
|
||||
const now = new Date();
|
||||
const apptDate = new Date(`${appt.date}T${parseTimeTo24Hour(appt.time)}`);
|
||||
return apptDate > now && appt.status !== "cancelled" && appt.status !== "completed";
|
||||
}
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
confirmed: "bg-green-100 text-green-700",
|
||||
pending: "bg-amber-100 text-amber-700",
|
||||
@@ -19,7 +41,7 @@ const STATUS_COLORS: Record<string, string> = {
|
||||
cancelled: "bg-red-100 text-red-600",
|
||||
};
|
||||
|
||||
export function AppointmentsSection({ readOnly }: Props) {
|
||||
export function AppointmentsSection({ readOnly, sessionId }: Props) {
|
||||
const [showBooking, setShowBooking] = useState(false);
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
const [tab, setTab] = useState<"upcoming" | "past">("upcoming");
|
||||
@@ -61,6 +83,7 @@ export function AppointmentsSection({ readOnly }: Props) {
|
||||
expanded={expandedId === appt.id}
|
||||
onToggle={() => setExpandedId(expandedId === appt.id ? null : appt.id)}
|
||||
readOnly={readOnly}
|
||||
sessionId={sessionId}
|
||||
/>
|
||||
))}
|
||||
{UPCOMING_APPOINTMENTS.length === 0 && (
|
||||
@@ -78,6 +101,7 @@ export function AppointmentsSection({ readOnly }: Props) {
|
||||
expanded={expandedId === appt.id}
|
||||
onToggle={() => setExpandedId(expandedId === appt.id ? null : appt.id)}
|
||||
readOnly={readOnly}
|
||||
sessionId={sessionId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -94,9 +118,9 @@ export function AppointmentsSection({ readOnly }: Props) {
|
||||
}
|
||||
|
||||
function AppointmentCard({
|
||||
appointment: appt, expanded, onToggle, readOnly,
|
||||
appointment: appt, expanded, onToggle, readOnly, sessionId,
|
||||
}: {
|
||||
appointment: Appointment; expanded: boolean; onToggle: () => void; readOnly: boolean;
|
||||
appointment: Appointment; expanded: boolean; onToggle: () => void; readOnly: boolean; sessionId?: string | null;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-stone-200 shadow-sm overflow-hidden">
|
||||
@@ -138,8 +162,11 @@ function AppointmentCard({
|
||||
{appt.notes && (
|
||||
<p className="text-sm text-stone-600 bg-stone-50 rounded-lg px-3 py-2 mb-3">{appt.notes}</p>
|
||||
)}
|
||||
{isUpcoming(appt) && !readOnly && (
|
||||
<CustomerNotesSection appointment={appt} sessionId={sessionId} />
|
||||
)}
|
||||
{appt.status !== "completed" && appt.status !== "cancelled" && !readOnly && (
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-2 mt-3">
|
||||
<button className="text-xs px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
|
||||
Reschedule
|
||||
</button>
|
||||
@@ -161,6 +188,73 @@ function AppointmentCard({
|
||||
);
|
||||
}
|
||||
|
||||
export function CustomerNotesSection({ appointment: appt, sessionId }: { appointment: Appointment; sessionId?: string | null }) {
|
||||
const [notes, setNotes] = useState(appt.customerNotes || "");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saved, setSaved] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const isDisabled = appt.status === "completed" || appt.status === "cancelled";
|
||||
|
||||
async function handleSave() {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
setSaved(false);
|
||||
try {
|
||||
const headers: Record<string, string> = { "Content-Type": "application/json" };
|
||||
if (sessionId) {
|
||||
headers["X-Impersonation-Session-Id"] = sessionId;
|
||||
}
|
||||
const res = await fetch(`/api/portal/appointments/${appt.id}/notes`, {
|
||||
method: "PATCH",
|
||||
headers,
|
||||
body: JSON.stringify({ customerNotes: notes }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ error: "Failed to save" }));
|
||||
throw new Error(err.error || `HTTP ${res.status}`);
|
||||
}
|
||||
setSaved(true);
|
||||
setTimeout(() => setSaved(false), 2000);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Failed to save");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-3 p-3 bg-stone-50 rounded-lg">
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<label className="text-xs font-medium text-stone-600">Notes for your groomer</label>
|
||||
<span className={`text-xs ${notes.length > MAX_CUSTOMER_NOTES ? "text-red-500" : "text-stone-400"}`}>
|
||||
{notes.length}/{MAX_CUSTOMER_NOTES}
|
||||
</span>
|
||||
</div>
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={e => setNotes(e.target.value.slice(0, MAX_CUSTOMER_NOTES))}
|
||||
disabled={isDisabled}
|
||||
className="w-full text-sm border border-stone-200 rounded-lg px-3 py-2 resize-none focus:outline-none focus:ring-2 focus:ring-(--color-accent) disabled:bg-stone-100 disabled:text-stone-400"
|
||||
rows={3}
|
||||
placeholder="Any special requests or notes for this appointment..."
|
||||
/>
|
||||
{error && <p className="text-xs text-red-500 mt-1">{error}</p>}
|
||||
{saved && <p className="text-xs text-green-600 mt-1">Saved!</p>}
|
||||
{!isDisabled && (
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving || notes === appt.customerNotes}
|
||||
className="mt-2 flex items-center gap-1.5 text-xs px-3 py-1.5 bg-(--color-accent) text-white rounded-lg font-medium hover:bg-(--color-accent-hover) disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{saving && <Loader2 size={12} className="animate-spin" />}
|
||||
{saving ? "Saving..." : "Save Notes"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BookingFlow({ onClose, readOnly }: { onClose: () => void; readOnly: boolean }) {
|
||||
const [step, setStep] = useState(1);
|
||||
const [selectedPet, setSelectedPet] = useState<Pet | null>(null);
|
||||
|
||||
Reference in New Issue
Block a user