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

Update appointment detail pages to clarify meeting availability messages and add meeting information section #51

Merged
Hammond merged 1 commits from feat/booking-panel into master 2025-12-04 18:10:15 +00:00
Conversation 0 Commits 1 Files Changed 2 +58 -8
2 changed files with 58 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 65af13b0b2 - Show all commits

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={`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")}`}>
{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>
</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>
)}
@ -701,7 +726,7 @@ export default function AppointmentDetailPage() {
const startedAt = appointment.started_at || appointment.meeting_started_at;
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) {
return (
<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"}`}
>
<Video className="w-5 h-5" />
Meeting Not Available
Meeting would be available shortly
</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={`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")}`}>
{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>
</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>
)}
@ -585,7 +610,7 @@ export default function UserAppointmentDetailPage() {
const startedAt = appointment.started_at || appointment.meeting_started_at;
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) {
return (
<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"}`}
>
<Video className="w-5 h-5" />
Meeting Not Available
Meeting would be available shortly
</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 (
<button
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"}`}
>
<Video className="w-5 h-5" />
Meeting Not Available
Meeting would be available shortly
</button>
);
})()}