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

fix(portal): disable non-functional stub buttons in customer portal

Browse Source 
Reschedule, Cancel, Add Notes, Edit Pet, Archive Pet, and Add New Pet
buttons in the customer portal were UI stubs with no click handlers.
Clicking them did nothing, confusing users. Mark all as disabled with
"coming soon" tooltips and muted styling until the underlying features
(portal reschedule endpoint, pet CRUD portal endpoints) are implemented.

Fixes GRO-166, GRO-167

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
The Dogfather
2026-03-28 03:47:54 +00:00
parent dc67b2bf44
commit f6aad4c5e9
4 changed files with 37 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/portal/sections/AccountSettings.tsx
+15 -3
View File
@@ -125,10 +125,18 @@ function ManagePets({ readOnly }: { readOnly: boolean }) {
</div>
{!readOnly && (
<div className="flex gap-2">
<button className="px-3 py-1.5 border border-stone-200 rounded-lg text-xs text-stone-600 hover:bg-stone-50">
<button
disabled
title="Pet editing coming soon"
className="px-3 py-1.5 border border-stone-200 rounded-lg text-xs text-stone-400 cursor-not-allowed"
>
Edit
</button>
<button className="p-1.5 border border-stone-200 rounded-lg text-stone-400 hover:text-amber-600 hover:border-amber-200">
<button
disabled
title="Pet archiving coming soon"
className="p-1.5 border border-stone-200 rounded-lg text-stone-300 cursor-not-allowed"
>
<Archive size={14} />
</button>
</div>
@@ -136,7 +144,11 @@ function ManagePets({ readOnly }: { readOnly: boolean }) {
</div>
))}
{!readOnly && (
<button className="w-full flex items-center justify-center gap-2 py-3 border-2 border-dashed border-stone-300 rounded-2xl text-sm text-stone-500 hover:border-(--color-accent) hover:text-(--color-accent-dark) transition-colors">
<button
disabled
title="Adding pets coming soon"
className="w-full flex items-center justify-center gap-2 py-3 border-2 border-dashed border-stone-300 rounded-2xl text-sm text-stone-400 cursor-not-allowed"
>
<Plus size={16} />
Add New Pet
</button>
apps/web/src/portal/sections/Appointments.tsx
+5 -1
View File
@@ -176,7 +176,11 @@ function AppointmentCard({
)}
{appt.status !== "completed" && appt.status !== "cancelled" && !readOnly && (
<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">
<button
disabled
title="Rescheduling coming soon"
className="text-xs px-3 py-1.5 border border-stone-200 rounded-lg text-stone-400 cursor-not-allowed"
>
Reschedule
</button>
<CancelAppointmentButton appointment={appt} sessionId={sessionId} />
apps/web/src/portal/sections/Dashboard.tsx
+15 -3
View File
@@ -77,13 +77,25 @@ export function Dashboard({ onNavigate, readOnly }: Props) {
</div>
{!readOnly && (
<div className="flex gap-2 mt-4">
<button className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
<button
disabled
title="Rescheduling coming soon"
className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-400 cursor-not-allowed"
>
Reschedule
</button>
<button className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
<button
disabled
title="Cancellation coming soon"
className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-400 cursor-not-allowed"
>
Cancel
</button>
<button className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50">
<button
disabled
title="Notes coming soon"
className="text-sm px-3 py-1.5 border border-stone-200 rounded-lg text-stone-400 cursor-not-allowed"
>
Add Notes
</button>
</div>
apps/web/src/portal/sections/PetProfiles.tsx
+2 -2
View File
@@ -54,8 +54,8 @@ export function PetProfiles({ readOnly }: Props) {
<p className="text-stone-400 text-xs mt-0.5">Born {new Date(pet.dob).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}</p>
</div>
{!readOnly && (
<button className="p-2 hover:bg-stone-50 rounded-lg">
<Edit3 size={16} className="text-stone-400" />
<button disabled title="Pet editing coming soon" className="p-2 rounded-lg cursor-not-allowed">
<Edit3 size={16} className="text-stone-300" />
</button>
)}
</div>