ATTUNE-HEART-THERAPY/website
6
0
Fork 0
Code Issues 7 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge pull request 'Refactor appointment detail messaging and styles for clarity' (#70) from feat/booking-panel into master

Browse Source 
Reviewed-on: http://35.207.46.142/ATTUNE-HEART-THERAPY/website/pulls/70
This commit is contained in:
Hammond 2025-12-05 19:16:23 +00:00
commit fcfbc0f04b
2 changed files with 14 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/(admin)/admin/booking/[id]/page.tsx
View File

@ -457,10 +457,11 @@ export default function AppointmentDetailPage() {
} }
setRescheduleDialogOpen(true); setRescheduleDialogOpen(true);
}} }}
className={`p-2 rounded-lg transition-colors ${isDark ? "hover:bg-gray-700 text-gray-300 hover:text-white" : "hover:bg-gray-100 text-gray-600 hover:text-gray-900"}`} className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ${isDark ? "hover:bg-gray-700 text-gray-300 hover:text-white" : "hover:bg-gray-100 text-gray-600 hover:text-gray-900"}`}
title="Reschedule Appointment" title="Reschedule Appointment"
> >
<Pencil className="w-4 h-4" /> <Pencil className="w-4 h-4 shrink-0" />
<span className="hidden sm:inline text-sm font-medium">Reschedule</span>
</button> </button>
)} )}
</div> </div>
@ -682,9 +683,7 @@ export default function AppointmentDetailPage() {
<p className={`text-sm font-medium ${appointment.can_join_as_moderator ? (isDark ? "text-green-300" : "text-green-700") : (isDark ? "text-gray-400" : "text-gray-500")}`}> <p className={`text-sm font-medium ${appointment.can_join_as_moderator ? (isDark ? "text-green-300" : "text-green-700") : (isDark ? "text-gray-400" : "text-gray-500")}`}>
{appointment.can_join_as_moderator {appointment.can_join_as_moderator
? "Meeting is active - You can join as moderator" ? "Meeting is active - You can join as moderator"
: appointment.scheduled_datetime : "Click here to join"}
? `Meeting would be available to join starting at ${formatTime(appointment.scheduled_datetime)}`
: "Meeting would be available shortly"}
</p> </p>
</div> </div>
)} )}
@ -837,20 +836,13 @@ export default function AppointmentDetailPage() {
// If can_join_as_moderator != true, display "Meeting would be available shortly" // If can_join_as_moderator != true, display "Meeting would be available shortly"
if (!canJoinAsModerator) { if (!canJoinAsModerator) {
const meetingTime = appointment.scheduled_datetime
? formatTime(appointment.scheduled_datetime)
: "the scheduled time";
return ( return (
<button <button
disabled disabled
className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-sm sm:text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`} className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-sm sm:text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`}
> >
<Video className="w-4 h-4 sm:w-5 sm:h-5 shrink-0" /> <Video className="w-4 h-4 sm:w-5 sm:h-5 shrink-0" />
<span className="text-center px-1"> <span className="text-center">Click here to join</span>
<span className="hidden sm:inline">Meeting would be available to join starting at </span>
<span className="sm:hidden">Available at </span>
<span className="font-semibold">{meetingTime}</span>
</span>
</button> </button>
); );
} }

18
app/(user)/user/appointments/[id]/page.tsx
View File

@ -469,7 +469,7 @@ export default function UserAppointmentDetailPage() {
<div className={`flex items-center gap-2 px-4 py-3 rounded-lg ${appointment.can_join_as_participant ? (isDark ? "bg-green-500/20 border border-green-500/30" : "bg-green-50 border border-green-200") : (isDark ? "bg-gray-800 border border-gray-700" : "bg-gray-50 border border-gray-200")}`}> <div className={`flex items-center gap-2 px-4 py-3 rounded-lg ${appointment.can_join_as_participant ? (isDark ? "bg-green-500/20 border border-green-500/30" : "bg-green-50 border border-green-200") : (isDark ? "bg-gray-800 border border-gray-700" : "bg-gray-50 border border-gray-200")}`}>
<div className={`h-2 w-2 rounded-full ${appointment.can_join_as_participant ? (isDark ? "bg-green-400" : "bg-green-600") : (isDark ? "bg-gray-500" : "bg-gray-400")}`} /> <div className={`h-2 w-2 rounded-full ${appointment.can_join_as_participant ? (isDark ? "bg-green-400" : "bg-green-600") : (isDark ? "bg-gray-500" : "bg-gray-400")}`} />
<p className={`text-sm font-medium ${appointment.can_join_as_participant ? (isDark ? "text-green-300" : "text-green-700") : (isDark ? "text-gray-400" : "text-gray-500")}`}> <p className={`text-sm font-medium ${appointment.can_join_as_participant ? (isDark ? "text-green-300" : "text-green-700") : (isDark ? "text-gray-400" : "text-gray-500")}`}>
{appointment.can_join_as_participant ? "Meeting is active - You can join now" : "Meeting would be available shortly"} {appointment.can_join_as_participant ? "Meeting is active - You can join now" : "Click here to join"}
</p> </p>
</div> </div>
)} )}
@ -568,15 +568,15 @@ export default function UserAppointmentDetailPage() {
const startedAt = appointment.started_at || appointment.meeting_started_at; const startedAt = appointment.started_at || appointment.meeting_started_at;
const hasStarted = startedAt != null && startedAt !== ""; const hasStarted = startedAt != null && startedAt !== "";
// If can_join_as_participant != true, display "Meeting would be available shortly" // If can_join_as_participant != true, display "Click here to join"
if (!canJoinAsParticipant) { if (!canJoinAsParticipant) {
return ( return (
<button <button
disabled disabled
className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`} className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-sm sm:text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`}
> >
<Video className="w-5 h-5" /> <Video className="w-4 h-4 sm:w-5 sm:h-5 shrink-0" />
Meeting would be available shortly <span className="text-center">Click here to join</span>
</button> </button>
); );
} }
@ -596,14 +596,14 @@ export default function UserAppointmentDetailPage() {
); );
} }
// If can_join_as_participant == true && started_at == null, show "Meeting would be available shortly" // If can_join_as_participant == true && started_at == null, show "Click here to join"
return ( return (
<button <button
disabled disabled
className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`} className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-sm sm:text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`}
> >
<Video className="w-5 h-5" /> <Video className="w-4 h-4 sm:w-5 sm:h-5 shrink-0" />
Meeting would be available shortly <span className="text-center">Click here to join</span>
</button> </button>
); );
})()} })()}