Feat: Reschedule declined match meetings

src/components/appointment/AppointmentDetail.tsx

@@ -6,7 +6,6 @@ import AppointmentMetaDetails from './AppointmentMetaDetails';
 import Header from './Header';
 import Avatars from './Avatars';
 import Description from './Description';
-import Buttons from './Buttons';
 import { DateTime } from 'luxon';
 import { useMutation } from '@apollo/client';
 import useApollo from '../../hooks/useApollo';
@@ -15,6 +14,9 @@ import RejectAppointmentModal, { RejectType } from '../../modals/RejectAppointme
 import { gql } from '../../gql';
 import { Lecture_Appointmenttype_Enum } from '../../gql/graphql';
 import { PUPIL_APPOINTMENT } from '../../pages/Appointment';
+import { Typography } from '../Typography';
+import { IconInfoCircle, IconClockEdit, IconTrash, IconPencil } from '@tabler/icons-react';
+import { Button } from '../Button';
 
 type AppointmentDetailProps = {
     appointment: Appointment;
@@ -110,6 +112,12 @@ const AppointmentDetail: React.FC<AppointmentDetailProps> = ({ appointment }) =>
         () => (appointment.appointmentType === Lecture_Appointmenttype_Enum.Group && appointment.total === 1 ? true : false),
         [appointment.total]
     );
+
+    const wasRejected = !!appointment.participants?.every((e) => appointment.declinedBy?.includes(e.userID!));
+    const byMatch = !appointment.declinedBy?.includes(user?.userID!);
+    const wasRejectedByMe = appointment.declinedBy?.includes(user?.userID!);
+    const wasRejectedByMatch = appointment.appointmentType === 'match' && wasRejected && byMatch;
+
     return (
         <>
             <Modal isOpen={showDeleteModal} onClose={() => setShowDeleteModal(false)}>
@@ -139,15 +147,61 @@ const AppointmentDetail: React.FC<AppointmentDetailProps> = ({ appointment }) =>
                     overrideMeetingLink={appointment.override_meeting_link}
                     zoomMeetingUrl={appointment.zoomMeetingUrl}
                 />
+                {wasRejectedByMatch && (
+                    <>
+                        <div className="flex gap-x-1 items-center mt-4">
+                            <IconInfoCircle className="text-red-600" size={18} />
+                            <Typography className="text-red-600">{t('appointment.detail.cancelledBy', { name: appointment.displayName })}</Typography>
+                        </div>
+                        <Typography>{t('appointment.detail.rescheduleDescription', { name: appointment.displayName })}</Typography>
+                    </>
+                )}
                 <Description description={appointment.description} />
-
-                <Buttons
-                    onPress={user?.pupil ? () => setShowDeclineModal(true) : () => setShowDeleteModal(true)}
-                    onEditPress={() => navigate(`/edit-appointment/${appointment.id}`)}
-                    canceled={(appointment.declinedBy?.includes(user?.userID ?? '') ?? false) || canceled}
-                    isOver={isPastAppointment}
-                    isLast={isLastAppointment}
-                />
+                <div className="flex flex-col md:flex-row gap-3">
+                    {user?.student && (
+                        <>
+                            <Button
+                                disabled={isPastAppointment}
+                                reasonDisabled={t('appointment.detail.reasonDisabled.editBtn.isOver')}
+                                variant={wasRejectedByMatch ? 'default' : 'outline'}
+                                onClick={() => navigate(`/edit-appointment/${appointment.id}`)}
+                                className="w-full lg:w-[300px]"
+                                leftIcon={wasRejectedByMatch ? <IconClockEdit /> : <IconPencil />}
+                            >
+                                {wasRejectedByMatch ? t('appointment.detail.rescheduleButton') : t('appointment.detail.editButton')}
+                            </Button>
+                            <Button
+                                disabled={isPastAppointment || isLastAppointment}
+                                reasonDisabled={
+                                    isPastAppointment
+                                        ? t('appointment.detail.reasonDisabled.deleteBtn.isOver')
+                                        : t('appointment.detail.reasonDisabled.deleteBtn.isLast')
+                                }
+                                onClick={() => setShowDeleteModal(true)}
+                                variant="destructive"
+                                className="w-full lg:w-[300px]"
+                                leftIcon={<IconTrash />}
+                            >
+                                {t('appointment.detail.deleteButton')}
+                            </Button>
+                        </>
+                    )}
+                    {user?.pupil && (
+                        <Button
+                            disabled={(wasRejectedByMe ?? false) || canceled || isPastAppointment}
+                            reasonDisabled={
+                                isPastAppointment
+                                    ? t('appointment.detail.reasonDisabled.cancelBtn.isOver')
+                                    : t('appointment.detail.reasonDisabled.cancelBtn.isCancelled')
+                            }
+                            onClick={() => setShowDeclineModal(true)}
+                            variant="destructive"
+                            className="w-full lg:w-[300px]"
+                        >
+                            {t('appointment.detail.cancelButton')}
+                        </Button>
+                    )}
+                </div>
             </Box>
         </>
     );

src/components/appointment/AppointmentMetaDetails.tsx

@@ -123,21 +123,24 @@ const AppointmentMetaDetails: React.FC<MetaProps> = ({
                 </HStack>
             )}
             <Spacer py={3} />
-            {appointmentId && appointmentType && (
-                <>
-                    <VideoButton
-                        isInstructor={isOrganizer}
-                        appointmentId={appointmentId}
-                        appointmentType={appointmentType}
-                        startDateTime={startDateTime}
-                        duration={duration}
-                        buttonText={t('appointment.detail.videochatButton')}
-                        width={buttonWidth}
-                        isOver={isAppointmentOver}
-                        overrideLink={overrideMeetingLink ?? undefined}
-                    />
-                </>
-            )}
+            <div className="flex flex-col items-stretch md:items-start">
+                {appointmentId && appointmentType && (
+                    <>
+                        <VideoButton
+                            isInstructor={isOrganizer}
+                            appointmentId={appointmentId}
+                            appointmentType={appointmentType}
+                            startDateTime={startDateTime}
+                            duration={duration}
+                            buttonText={t('appointment.detail.videochatButton')}
+                            width={buttonWidth}
+                            isOver={isAppointmentOver}
+                            overrideLink={overrideMeetingLink ?? undefined}
+                            className="w-full md:w-fit"
+                        />
+                    </>
+                )}
+            </div>
         </>
     );
 };

src/lang/ar.json

@@ -33,7 +33,8 @@
         },
         "appointmentTile": {
             "lecture": "الدرس #{{position}}",
-            "title": ": {{appointmentTitle}}"
+            "title": ": {{appointmentTitle}}",
+            "cancelledBy": "تم إلغاؤه بواسطة {{name}}"
         },
         "create": {
             "videoSelectOptions": {
@@ -101,7 +102,10 @@
             "editButton": "تعديل الموعد",
             "canceledToast": "تم إلغاء الموعد",
             "zoomTooltipStudent": "إذا قمت بالنقر على هذا الرابط، ستنضم إلى الاجتماع كمشارك. للانضمام إلى الاجتماع كمضيف، استخدم زر \"الانضمام إلى دردشة الفيديو الآن\".",
-            "zoomTooltipPupil": "لا تشارك هذا الرابط مع أشخاص آخرين. هذه هي الطريقة الوحيدة التي يمكننا من خلالها ضمان أمن المنصة."
+            "zoomTooltipPupil": "لا تشارك هذا الرابط مع أشخاص آخرين. هذه هي الطريقة الوحيدة التي يمكننا من خلالها ضمان أمن المنصة.",
+            "cancelledBy": "موعد {{name}} ألغيت هذه",
+            "rescheduleButton": "موعد المناوبة",
+            "rescheduleDescription": "موعد إذا قمت بتحريك، سيتم تحميل {{name}}} مرة أخرى."
         },
         "zoomModal": {
             "useZoomApp": {

src/lang/de.json

@@ -59,7 +59,8 @@
         },
         "appointmentTile": {
             "lecture": "Lektion #{{position}}",
-            "title": ": {{appointmentTitle}}"
+            "title": ": {{appointmentTitle}}",
+            "cancelledBy": "Abgesagt von {{name}}"
         },
         "create": {
             "assignmentHeader": "Für welches Lernangebot soll dieser Termin erstellt werden?",
@@ -112,6 +113,7 @@
             "deleteButton": "Termin löschen",
             "cancelButton": "Termin absagen",
             "editButton": "Termin bearbeiten",
+            "rescheduleButton": "Termin verschieben",
             "canceledToast": "Termin wurde abgesagt",
             "zoomTooltipStudent": "Wenn du diesen Link aufrufst, trittst du dem Meeting als Teilnehmer:in bei. Um als Host dem Meeting beizutrteten nutze den Button \"Jetzt Videochat beitreten\".",
             "zoomTooltipPupil": "Teile diesen Link niemals mit anderen Personen. Nur so können wir die Sicherheit der Plattform gewährleisten.",
@@ -127,7 +129,9 @@
                     "isOver": "Du kannst diesen Termin nicht absagen, da er bereits vorbei ist.",
                     "isCancelled": "Du hast diesen Termin bereits abgesagt."
                 }
-            }
+            },
+            "cancelledBy": "{{name}} hat diesen Termin abgesagt",
+            "rescheduleDescription": "Wenn du den Termin verschiebst, wird {{name}} wieder eingeladen."
         },
         "zoomModal": {
             "header": "Hinweise zum Videochat",

src/lang/en.json

@@ -33,7 +33,8 @@
         },
         "appointmentTile": {
             "lecture": "Lesson #{{position}}",
-            "title": ": {{appointmentTitle}}"
+            "title": ": {{appointmentTitle}}",
+            "cancelledBy": "Canceled by {{name}}"
         },
         "create": {
             "videoSelectOptions": {
@@ -101,7 +102,10 @@
             "editButton": "Edit lecture",
             "canceledToast": "Lecture was canceled",
             "zoomTooltipStudent": "If you click on this link, you will join the meeting as a participant. To join the meeting as a host, use the \"Join video chat now\" button.",
-            "zoomTooltipPupil": "Never share this link with other people. This is the only way we can guarantee the security of the platform."
+            "zoomTooltipPupil": "Never share this link with other people. This is the only way we can guarantee the security of the platform.",
+            "cancelledBy": "{{name}} has canceled this lecture ",
+            "rescheduleButton": "Reschedule appointment",
+            "rescheduleDescription": "If you reschedule the lecture, {{name}} will be invited again."
         },
         "zoomModal": {
             "useZoomApp": {

src/lang/ru.json

@@ -33,7 +33,8 @@
         },
         "appointmentTile": {
             "lecture": "Урок #{{position}}",
-            "title": ": {{appointmentTitle}}"
+            "title": ": {{appointmentTitle}}",
+            "cancelledBy": "Отменено {{name}}"
         },
         "create": {
             "videoSelectOptions": {
@@ -101,7 +102,10 @@
             "editButton": "Редактировать назначение",
             "canceledToast": "Назначение было отменено",
             "zoomTooltipStudent": "участник Если вы нажмете на эту ссылку, вы присоединитесь к встрече в качестве . Чтобы присоединиться к встрече в качестве ведущего, воспользуйтесь кнопкой \"Присоединиться к видеочату сейчас\".",
-            "zoomTooltipPupil": "Никогда не передавайте эту ссылку другим людям. Только так мы можем гарантировать безопасность платформы."
+            "zoomTooltipPupil": "Никогда не передавайте эту ссылку другим людям. Только так мы можем гарантировать безопасность платформы.",
+            "cancelledBy": "{{name}} отменил эту встречу",
+            "rescheduleButton": "Отложить встречу",
+            "rescheduleDescription": "Если вы отложите встречу, {{name}} будет приглашен снова."
         },
         "zoomModal": {
             "useZoomApp": {

src/lang/tr.json

@@ -33,7 +33,8 @@
         },
         "appointmentTile": {
             "lecture": "Ders #{{position}}",
-            "title": ": {{appointmentTitle}}"
+            "title": ": {{appointmentTitle}}",
+            "cancelledBy": "{{name}} tarafından iptal edildi"
         },
         "create": {
             "videoSelectOptions": {
@@ -101,7 +102,10 @@
             "editButton": "Randevu düzenleme",
             "canceledToast": "Randevu iptal edildi",
             "zoomTooltipStudent": "Bu bağlantıya tıklarsanız, toplantıya katılımcı olarak katılırsınız. Toplantıya ev sahibi olarak katılmak için \"Video sohbete şimdi katıl\" düğmesini kullanın.",
-            "zoomTooltipPupil": "Bu bağlantıyı asla başkalarıyla paylaşmayın. Platformun güvenliğini ancak bu şekilde garanti edebiliriz."
+            "zoomTooltipPupil": "Bu bağlantıyı asla başkalarıyla paylaşmayın. Platformun güvenliğini ancak bu şekilde garanti edebiliriz.",
+            "cancelledBy": "{{name}} bu randevuyu iptal etti",
+            "rescheduleButton": "Randevuyu ertele",
+            "rescheduleDescription": "Randevuyu ertelerseniz, {{name}} tekrar davet edilecektir."
         },
         "zoomModal": {
             "useZoomApp": {

src/lang/uk.json

@@ -33,7 +33,8 @@
         },
         "appointmentTile": {
             "lecture": "Урок #{{position}}",
-            "title": ": {{appointmentTitle}}"
+            "title": ": {{appointmentTitle}}",
+            "cancelledBy": "Скасовано {{name}}"
         },
         "create": {
             "videoSelectOptions": {
@@ -101,7 +102,10 @@
             "editButton": "Редагувати зустріч",
             "canceledToast": "Зустріч було скасовано",
             "zoomTooltipStudent": "Якщо ви натиснете на це посилання, ви приєднаєтеся до зустрічі як учасник. Щоб приєднатися до зустрічі як організатор, скористайтеся кнопкою \"Приєднатися до відеочату зараз\".",
-            "zoomTooltipPupil": "Ніколи не діліться цим посиланням з іншими людьми. Це єдиний спосіб, яким ми можемо гарантувати безпеку платформи."
+            "zoomTooltipPupil": "Ніколи не діліться цим посиланням з іншими людьми. Це єдиний спосіб, яким ми можемо гарантувати безпеку платформи.",
+            "cancelledBy": "{{name}} скасував цю зустріч",
+            "rescheduleButton": "Перенести дату",
+            "rescheduleDescription": "Якщо ви відкладете зустріч, {{name}} буде запрошено знову."
         },
         "zoomModal": {
             "useZoomApp": {

src/pages/SingleMatch.tsx

@@ -80,12 +80,14 @@ query SingleMatchAppointments_NO_CACHE($matchId: Int!, $take: Float!, $skip: Flo
             isOrganizer
             isParticipant
             override_meeting_link
+            declinedBy
             organizers(skip: 0, take: 5) {
                 id
                 firstname
                 lastname
             }
             participants(skip: 0, take: 10) {
+                userID
                 id
                 firstname
                 lastname