Feat: Re-use ConfirmationModal on Matching/Dashboard

src/modals/AddCourseInstructor.tsx

@@ -44,7 +44,7 @@ const AddCourseInstructor: React.FC<Props> = ({ onClose, addedInstructors, onIns
     if (loading) return <CenterLoadingSpinner />;
 
     return (
-        <View flex="1">
+        <View flex="1" pt="60px">
             <Row w="100%" paddingX={space['1']} paddingY={space['0.5']}>
                 <Button padding={space['1']} onPress={onClose}>
                     <ArrowBackIcon />

src/modals/CourseConfirmationModal.tsx → src/modals/ConfirmationModal.tsx

@@ -4,15 +4,15 @@ import { BaseModalProps, Modal, ModalFooter, ModalHeader, ModalTitle } from '@/c
 import { Typography } from '@/components/Typography';
 import { Button } from '@/components/Button';
 
-interface CourseConfirmationModalProps extends BaseModalProps {
+interface ConfirmationModalProps extends BaseModalProps {
     headline: string;
     confirmButtonText: string;
     description: ReactNode;
     onConfirm: () => void;
     variant?: 'default' | 'destructive';
     isLoading?: boolean;
 }
-const CourseConfirmationModal = ({
+const ConfirmationModal = ({
     headline,
     confirmButtonText,
     description,
@@ -21,7 +21,7 @@ const CourseConfirmationModal = ({
     onOpenChange,
     variant = 'default',
     isLoading,
-}: CourseConfirmationModalProps) => {
+}: ConfirmationModalProps) => {
     const { t } = useTranslation();
 
     return (
@@ -44,4 +44,4 @@ const CourseConfirmationModal = ({
     );
 };
 
-export default CourseConfirmationModal;
+export default ConfirmationModal;

src/pages/pupil/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { Text, Button, HStack, useTheme, VStack, useBreakpointValue, Flex, Alert, Box, Stack, Heading, Row } from 'native-base';
+import { Text, Button, HStack, useTheme, VStack, useBreakpointValue, Flex, Alert, Box, Stack } from 'native-base';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import AppointmentCard from '../../widgets/AppointmentCard';
 import HSection from '../../widgets/HSection';
@@ -7,24 +7,21 @@ import { useNavigate } from 'react-router-dom';
 import NotificationAlert from '../../components/notifications/NotificationAlert';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from '@apollo/client';
-import BooksIcon from '../../assets/icons/lernfair/lf-books.svg';
-import BarrierIcon from '../../assets/icons/barrier-block_green.svg';
 import { DEACTIVATE_PUPIL_MATCH_REQUESTS } from '../../config';
 import { DateTime } from 'luxon';
 import { useMatomo } from '@jonkoops/matomo-tracker-react';
 import CenterLoadingSpinner from '../../components/CenterLoadingSpinner';
 import AsNavigationItem from '../../components/AsNavigationItem';
-import CancelMatchRequestModal from '../../modals/CancelMatchRequestModal';
 import { getTrafficStatus } from '../../Utility';
 import LearningPartner from '../../widgets/LearningPartner';
 import ImportantInformation from '../../widgets/ImportantInformation';
 import { gql } from '../../gql';
 import SwitchLanguageButton from '../../components/SwitchLanguageButton';
 import NextAppointmentCard from '../../widgets/NextAppointmentCard';
 import { Lecture } from '../../gql/graphql';
-import CTACard from '../../widgets/CTACard';
 import DisableableButton from '../../components/DisablebleButton';
 import { useRoles } from '../../hooks/useApollo';
+import ConfirmationModal from '@/modals/ConfirmationModal';
 
 type Props = {};
 
@@ -165,11 +162,6 @@ const Dashboard: React.FC<Props> = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const isMobile = useBreakpointValue({ base: true, md: false });
-    const startSummerVacation = new Date('2024-06-10');
-    const endSummerVacation = new Date('2024-09-02');
-    const isSummerVacation = startSummerVacation <= new Date() && endSummerVacation >= new Date();
-
     const ContainerWidth = useBreakpointValue({
         base: '100%',
         lg: sizes['containerWidth'],
@@ -197,7 +189,7 @@ const Dashboard: React.FC<Props> = () => {
     );
 
     const cancelMatchRequestReaction = useCallback(
-        (shareFeedback: boolean, feedback?: string) => {
+        () => {
             trackEvent({
                 category: 'Schüler',
                 action: 'Match Request zurückgezogen',
@@ -345,11 +337,14 @@ const Dashboard: React.FC<Props> = () => {
                     </VStack>
                 )}
             </WithNavigation>
-            <CancelMatchRequestModal
-                showModal={showCancelModal}
-                onClose={() => setShowCancelModal(false)}
-                onShareFeedback={(feedback) => cancelMatchRequestReaction(true, feedback)}
-                onSkipShareFeedback={() => cancelMatchRequestReaction(false)}
+            <ConfirmationModal
+                isOpen={showCancelModal}
+                onOpenChange={setShowCancelModal}
+                onConfirm={cancelMatchRequestReaction}
+                headline={t('matching.pending.modal.title')}
+                description={t('matching.pending.modal.description')}
+                confirmButtonText={t('matching.pending.modal.buttons.dissolve')}
+                variant="destructive"
             />
         </AsNavigationItem>
     );

src/pages/pupil/Matching.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from '@apollo/client';
 import { useMatomo } from '@jonkoops/matomo-tracker-react';
-import { Button, Circle, Flex, Modal, Row, Stack, Text, useTheme, useToast, VStack } from 'native-base';
+import { Circle, Flex, Stack, Text, useTheme, useToast, VStack } from 'native-base';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
@@ -17,6 +17,7 @@ import SwitchLanguageButton from '../../components/SwitchLanguageButton';
 import { Heading, useBreakpointValue } from 'native-base';
 import DisableableButton from '../../components/DisablebleButton';
 import { DEACTIVATE_PUPIL_MATCH_REQUESTS } from '../../config';
+import ConfirmationModal from '@/modals/ConfirmationModal';
 
 type Props = {};
 
@@ -244,44 +245,27 @@ const Matching: React.FC<Props> = () => {
                         },
                     ]}
                 />
-                <Modal isOpen={showCancelModal}>
-                    <Modal.Content>
-                        <Modal.Header>{t('matching.request.check.deleteRequest')}</Modal.Header>
-                        <Modal.CloseButton onPress={() => setShowCancelModal(false)} />
-                        <Modal.Body>{t('matching.request.check.areyousuretodelete')}</Modal.Body>
-                        <Modal.Footer>
-                            <Button variant="ghost" onPress={() => setShowCancelModal(false)}>
-                                {t('cancel')}
-                            </Button>
-                            <Button onPress={cancelRequest}>{t('matching.request.check.deleteRequest')}</Button>
-                        </Modal.Footer>
-                    </Modal.Content>
-                </Modal>
-                <Modal isOpen={showEditModal}>
-                    <Modal.Content>
-                        <Modal.CloseButton />
-                        <Modal.Header>{t('matching.request.check.editRequest')}</Modal.Header>
-                        <Modal.Body>
-                            <Text>{t('matching.request.check.editRequestDescription')}</Text>
-                        </Modal.Body>
-                        <Modal.Footer>
-                            <Row>
-                                <Button onPress={() => setShowEditModal(false)} variant={'secondary-light'}>
-                                    {t('cancel')}
-                                </Button>
-                                <Button
-                                    onPress={() =>
-                                        navigate('/request-match', {
-                                            state: { edit: true },
-                                        })
-                                    }
-                                >
-                                    {t('edit')}
-                                </Button>
-                            </Row>
-                        </Modal.Footer>
-                    </Modal.Content>
-                </Modal>
+                <ConfirmationModal
+                    isOpen={!!showCancelModal}
+                    onOpenChange={setShowCancelModal}
+                    confirmButtonText={t('matching.request.check.deleteRequest')}
+                    headline={t('matching.request.check.deleteRequest')}
+                    description={t('matching.request.check.areyousuretodelete')}
+                    onConfirm={cancelRequest}
+                    variant="destructive"
+                />
+                <ConfirmationModal
+                    isOpen={!!showEditModal}
+                    onOpenChange={setShowEditModal}
+                    confirmButtonText={t('edit')}
+                    headline={t('matching.request.check.editRequest')}
+                    description={t('matching.request.check.editRequestDescription')}
+                    onConfirm={() =>
+                        navigate('/request-match', {
+                            state: { edit: true },
+                        })
+                    }
+                />
             </WithNavigation>
         </AsNavigationItem>
     );

src/pages/pupil/single-course/PupilCourseButtons.tsx

@@ -2,7 +2,7 @@ import { ApolloQueryResult, useMutation, useQuery } from '@apollo/client';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import { Instructor, Lecture, Subcourse } from '../../../gql/graphql';
-import CourseConfirmationModal from '../../../modals/CourseConfirmationModal';
+import ConfirmationModal from '../../../modals/ConfirmationModal';
 import { getTrafficStatus } from '../../../Utility';
 import WaitinglistBanner from '../../../widgets/WaitinglistBanner';
 import OpenCourseChatButton from '../../subcourse/OpenCourseChatButton';
@@ -266,7 +266,7 @@ const PupilCourseButtons: React.FC<ActionButtonProps> = ({ subcourse, refresh, i
                 </div>
             )}
 
-            <CourseConfirmationModal
+            <ConfirmationModal
                 headline={t('registrationTitle')}
                 confirmButtonText={t('single.signIn.button')}
                 description={<Trans i18nKey="single.signIn.description" components={{ b: <b />, br: <br /> }} />}
@@ -276,7 +276,7 @@ const PupilCourseButtons: React.FC<ActionButtonProps> = ({ subcourse, refresh, i
                 isLoading={loadingSubcourseJoined}
             />
 
-            <CourseConfirmationModal
+            <ConfirmationModal
                 headline={t('deregistrationTitle')}
                 confirmButtonText={t('single.leave.signOut')}
                 description={t('single.leave.description')}
@@ -287,7 +287,7 @@ const PupilCourseButtons: React.FC<ActionButtonProps> = ({ subcourse, refresh, i
                 isLoading={loadingSubcourseLeft}
             />
 
-            <CourseConfirmationModal
+            <ConfirmationModal
                 headline={t('registrationTitle')}
                 confirmButtonText={t('single.joinWaitinglist.button')}
                 description={t('single.joinWaitinglist.description')}
@@ -296,7 +296,7 @@ const PupilCourseButtons: React.FC<ActionButtonProps> = ({ subcourse, refresh, i
                 onConfirm={handleJoinWaitinglist}
                 isLoading={loadingJoinedWaitinglist}
             />
-            <CourseConfirmationModal
+            <ConfirmationModal
                 headline={t('deregistrationTitle')}
                 confirmButtonText={t('single.leaveWaitinglist.button')}
                 description={t('single.leaveWaitinglist.description')}

src/pages/student/MatchingStudent.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from '@apollo/client';
 import { useMatomo } from '@jonkoops/matomo-tracker-react';
-import { Button, Circle, Flex, Heading, Modal, Stack, Text, useBreakpointValue, useTheme, useToast, VStack } from 'native-base';
+import { Button, Circle, Flex, Heading, Stack, Text, useBreakpointValue, useTheme, useToast, VStack } from 'native-base';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -15,6 +15,7 @@ import OpenMatchRequest from '../../widgets/OpenMatchRequest';
 import Matches, { MatchCard } from '../match/Matches';
 import SwitchLanguageButton from '../../components/SwitchLanguageButton';
 import { gql } from '../../gql';
+import ConfirmationModal from '@/modals/ConfirmationModal';
 
 type Props = {};
 const query = gql(`
@@ -236,19 +237,15 @@ const MatchingStudent: React.FC<Props> = () => {
                     </VStack>
                 )}
             </WithNavigation>
-            <Modal isOpen={showCancelModal}>
-                <Modal.Content>
-                    <Modal.Header>{t('matching.request.check.deleteRequest')}</Modal.Header>
-                    <Modal.CloseButton onPress={() => setShowCancelModal(false)} />
-                    <Modal.Body>{t('matching.request.check.areyousuretodelete')}</Modal.Body>
-                    <Modal.Footer>
-                        <Button variant="ghost" onPress={() => setShowCancelModal(false)}>
-                            {t('cancel')}
-                        </Button>
-                        <Button onPress={cancelRequest}>{t('matching.request.check.deleteRequest')}</Button>
-                    </Modal.Footer>
-                </Modal.Content>
-            </Modal>
+            <ConfirmationModal
+                isOpen={!!showCancelModal}
+                onOpenChange={setShowCancelModal}
+                confirmButtonText={t('matching.request.check.deleteRequest')}
+                headline={t('matching.request.check.deleteRequest')}
+                description={t('matching.request.check.areyousuretodelete')}
+                onConfirm={cancelRequest}
+                variant="destructive"
+            />
         </AsNavigationItem>
     );
 };

src/pages/student/onboarding/GroupOnboarding.tsx

@@ -1,6 +1,6 @@
 import { Box, useToast } from 'native-base';
 import { useCallback, useState } from 'react';
-import CourseConfirmationModal from '../../../modals/CourseConfirmationModal';
+import ConfirmationModal from '../../../modals/ConfirmationModal';
 import { useTranslation } from 'react-i18next';
 import OnboardingCard from '../../../widgets/OnboardingCard';
 import IconGroup from '../../../assets/icons/Icon_Gruppe.svg';
@@ -89,7 +89,7 @@ const GroupOnboarding: React.FC<OnboardingProps> = ({ canRequest = false, waitFo
                     </Box>
                 )}
 
-                <CourseConfirmationModal
+                <ConfirmationModal
                     headline={t('introduction.modal.headline')}
                     confirmButtonText={t('introduction.modal.buttonInstructor')}
                     description={t('introduction.modal.desc')}

src/pages/student/onboarding/MatchOnboarding.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import OnboardingCard from '../../../widgets/OnboardingCard';
 import { Box, Circle, FlatList, HStack, Text, useTheme, useToast } from 'native-base';
-import CourseConfirmationModal from '../../../modals/CourseConfirmationModal';
+import ConfirmationModal from '../../../modals/ConfirmationModal';
 import MatchIcon from '../../../assets/icons/Icon_Einzel.svg';
 import OneToOneImage from '../../../assets/images/matching/1-1-onboarding.png';
 import OneToOneMobileImage from '../../../assets/images/matching/1-1-onboarding-mobile.png';
@@ -112,7 +112,7 @@ const MatchOnboarding: React.FC<MatchProps> = ({ canRequest = false, waitForSupp
                         />
                     </Box>
                 )}
-                <CourseConfirmationModal
+                <ConfirmationModal
                     headline={t('introduction.modal.headline')}
                     confirmButtonText={t('introduction.modal.buttonTutor')}
                     description={t('introduction.modal.desc')}