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

Merge pull request 'Update appointment detail pages to clarify meeting availability messages and add meeting information section' (#51) from feat/booking-panel into master

Browse Source 
Reviewed-on: http://35.207.46.142/ATTUNE-HEART-THERAPY/website/pulls/51
This commit is contained in:
Hammond 2025-12-04 18:10:14 +00:00
commit 5b5213f871
2 changed files with 58 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -621,10 +621,35 @@ export default function AppointmentDetailPage() {
<div className={`flex items-center gap-2 px-4 py-3 rounded-lg ${appointment.can_join_as_moderator ? (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_moderator ? (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_moderator ? (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_moderator ? (isDark ? "bg-green-400" : "bg-green-600") : (isDark ? "bg-gray-500" : "bg-gray-400")}`} />
<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 ? "Meeting is active - You can join as moderator" : "Meeting is not available yet"} {appointment.can_join_as_moderator ? "Meeting is active - You can join as moderator" : "Meeting would be available shortly"}
</p> </p>
</div> </div>
)} )}
{appointment.scheduled_datetime && (
<div className={`px-4 py-3 rounded-lg border ${isDark ? "bg-blue-500/10 border-blue-500/30" : "bg-blue-50 border-blue-200"}`}>
<p className={`text-sm font-semibold mb-2 ${isDark ? "text-blue-300" : "text-blue-700"}`}>
Meeting Information
</p>
<div className="space-y-2">
<div>
<p className={`text-xs font-medium mb-1 ${isDark ? "text-blue-200" : "text-blue-600"}`}>
Meeting Start Time:
</p>
<p className={`text-sm ${isDark ? "text-blue-100" : "text-blue-800"}`}>
{formatDate(appointment.scheduled_datetime)} at {formatTime(appointment.scheduled_datetime)}
</p>
</div>
<div>
<p className={`text-xs font-medium mb-1 ${isDark ? "text-blue-200" : "text-blue-600"}`}>
How to Access:
</p>
<p className={`text-sm ${isDark ? "text-blue-100" : "text-blue-800"}`}>
Click the "Start Meeting" button below to begin the session. Once started, participants can join using the meeting link. You can also use the moderator link above to join directly.
</p>
</div>
</div>
</div>
)}
</div> </div>
</div> </div>
)} )}
@ -701,7 +726,7 @@ export default function AppointmentDetailPage() {
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_moderator != true, display "Meeting Not Available" // If can_join_as_moderator != true, display "Meeting would be available shortly"
if (!canJoinAsModerator) { if (!canJoinAsModerator) {
return ( return (
<button <button
@ -709,7 +734,7 @@ export default function AppointmentDetailPage() {
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-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-5 h-5" />
Meeting Not Available Meeting would be available shortly
</button> </button>
); );
} }

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

@ -528,10 +528,35 @@ 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 is not available yet"} {appointment.can_join_as_participant ? "Meeting is active - You can join now" : "Meeting would be available shortly"}
</p> </p>
</div> </div>
)} )}
{appointment.scheduled_datetime && (
<div className={`px-4 py-3 rounded-lg border ${isDark ? "bg-blue-500/10 border-blue-500/30" : "bg-blue-50 border-blue-200"}`}>
<p className={`text-sm font-semibold mb-2 ${isDark ? "text-blue-300" : "text-blue-700"}`}>
Meeting Information
</p>
<div className="space-y-2">
<div>
<p className={`text-xs font-medium mb-1 ${isDark ? "text-blue-200" : "text-blue-600"}`}>
Meeting Start Time:
</p>
<p className={`text-sm ${isDark ? "text-blue-100" : "text-blue-800"}`}>
{formatDate(appointment.scheduled_datetime)} at {formatTime(appointment.scheduled_datetime)}
</p>
</div>
<div>
<p className={`text-xs font-medium mb-1 ${isDark ? "text-blue-200" : "text-blue-600"}`}>
How to Access:
</p>
<p className={`text-sm ${isDark ? "text-blue-100" : "text-blue-800"}`}>
Click the "Join Now" button below or use the meeting link above when the meeting becomes available. The meeting will be accessible shortly before the scheduled start time.
</p>
</div>
</div>
</div>
)}
</div> </div>
</div> </div>
)} )}
@ -585,7 +610,7 @@ 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 Not Available" // If can_join_as_participant != true, display "Meeting would be available shortly"
if (!canJoinAsParticipant) { if (!canJoinAsParticipant) {
return ( return (
<button <button
@ -593,7 +618,7 @@ export default function UserAppointmentDetailPage() {
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-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-5 h-5" />
Meeting Not Available Meeting would be available shortly
</button> </button>
); );
} }
@ -613,14 +638,14 @@ export default function UserAppointmentDetailPage() {
); );
} }
// If can_join_as_participant == true && started_at == null, show "Meeting Not Available" // If can_join_as_participant == true && started_at == null, show "Meeting would be available shortly"
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-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-5 h-5" />
Meeting Not Available Meeting would be available shortly
</button> </button>
); );
})()} })()}