fix(portal): disable non-functional stub buttons in customer portal
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:
@@ -125,10 +125,18 @@ function ManagePets({ readOnly }: { readOnly: boolean }) {
|
|||||||
</div>
|
</div>
|
||||||
{!readOnly && (
|
{!readOnly && (
|
||||||
<div className="flex gap-2">
|
<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
|
Edit
|
||||||
</button>
|
</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} />
|
<Archive size={14} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -136,7 +144,11 @@ function ManagePets({ readOnly }: { readOnly: boolean }) {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
{!readOnly && (
|
{!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} />
|
<Plus size={16} />
|
||||||
Add New Pet
|
Add New Pet
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -176,7 +176,11 @@ function AppointmentCard({
|
|||||||
)}
|
)}
|
||||||
{appt.status !== "completed" && appt.status !== "cancelled" && !readOnly && (
|
{appt.status !== "completed" && appt.status !== "cancelled" && !readOnly && (
|
||||||
<div className="flex gap-2 mt-3">
|
<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
|
Reschedule
|
||||||
</button>
|
</button>
|
||||||
<CancelAppointmentButton appointment={appt} sessionId={sessionId} />
|
<CancelAppointmentButton appointment={appt} sessionId={sessionId} />
|
||||||
|
|||||||
@@ -77,13 +77,25 @@ export function Dashboard({ onNavigate, readOnly }: Props) {
|
|||||||
</div>
|
</div>
|
||||||
{!readOnly && (
|
{!readOnly && (
|
||||||
<div className="flex gap-2 mt-4">
|
<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
|
Reschedule
|
||||||
</button>
|
</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
|
Cancel
|
||||||
</button>
|
</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
|
Add Notes
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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>
|
<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>
|
</div>
|
||||||
{!readOnly && (
|
{!readOnly && (
|
||||||
<button className="p-2 hover:bg-stone-50 rounded-lg">
|
<button disabled title="Pet editing coming soon" className="p-2 rounded-lg cursor-not-allowed">
|
||||||
<Edit3 size={16} className="text-stone-400" />
|
<Edit3 size={16} className="text-stone-300" />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user