Add section certificate at matching

src/lang/ar.json

@@ -1654,6 +1654,11 @@
             "startMeeting": "بدء اجتماع",
             "browser": "المتابعة في المتصفح",
             "zoomClient": "فتح في زووم"
+        },
+        "volunteering": {
+            "title": "إثبات الشرف",
+            "text": "يمكنك تأكيد نشاطك في أي وقت ثم تنزيل الشهادة.",
+            "button": "للشهادات"
         }
     },
     "course": {
@@ -2473,4 +2478,4 @@
         "unknownDevice": "جهاز غير معروف",
         "deviceOnOs": "على"
     }
-}
+}

src/lang/de.json

@@ -1374,6 +1374,11 @@
             "button": "Zur Hausaufgabenhilfe",
             "buttonSummerVacation": "Die Hausaufgabenhilfe ist in der Sommerpause. Ab dem {{endSummerVacation}} geht es weiter."
         },
+        "volunteering": {
+            "title": "Ehrenamtsnachweis",
+            "text": "Du kannst dir jederzeit deine Tätigkeit bestätigen lassen und die Bescheinigung dann runterladen.",
+            "button": "Zu den Bescheinigungen"
+        },
         "pending": {
             "modal": {
                 "title": "Anfrage zurücknehmen",

src/lang/en.json

@@ -1654,6 +1654,11 @@
             "startMeeting": "Start meeting",
             "browser": "Continue in the browser",
             "zoomClient": "Open in Zoom"
+        },
+        "volunteering": {
+            "title": "Proof of honorary office",
+            "text": "You can have your activity confirmed at any time and then download the certificate.",
+            "button": "About the certificates"
         }
     },
     "course": {
@@ -2473,4 +2478,4 @@
         "unknownDevice": "Unknown device",
         "deviceOnOs": "on"
     }
-}
+}

src/lang/ru.json

@@ -1654,6 +1654,11 @@
             "startMeeting": "Начало встречи",
             "browser": "Продолжить в браузере",
             "zoomClient": "Открыть в масштабе"
+        },
+        "volunteering": {
+            "title": "Доказательство чести",
+            "text": "Вы можете в любой момент подтвердить свою активность и загрузить сертификат.",
+            "button": "К сертификатам"
         }
     },
     "course": {
@@ -2473,4 +2478,4 @@
         "unknownDevice": "Неизвестное устройство",
         "deviceOnOs": "на"
     }
-}
+}

src/lang/tr.json

@@ -1654,6 +1654,11 @@
             "startMeeting": "Toplantıya başlayın",
             "browser": "Tarayıcıda devam et",
             "zoomClient": "Yakınlaştırmada Aç"
+        },
+        "volunteering": {
+            "title": "Onur kanıtı",
+            "text": "Faaliyetinizi istediğiniz zaman onaylatabilir ve ardından sertifikayı indirebilirsiniz.",
+            "button": "Sertifikalara"
         }
     },
     "course": {
@@ -2473,4 +2478,4 @@
         "unknownDevice": "Bilinmeyen cihaz",
         "deviceOnOs": "üzerinde"
     }
-}
+}

src/lang/uk.json

@@ -1654,6 +1654,11 @@
             "startMeeting": "Почніть зустріч",
             "browser": "Продовжити в браузері",
             "zoomClient": "Відкрити в Zoom"
+        },
+        "volunteering": {
+            "title": "Доказ честі",
+            "text": "Ви можете підтвердити свою активність у будь-який час, а потім завантажити сертифікат.",
+            "button": "До сертифікатів"
         }
     },
     "course": {
@@ -2473,4 +2478,4 @@
         "unknownDevice": "Невідомий пристрій",
         "deviceOnOs": "на"
     }
-}
+}

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, Stack, Text, useBreakpointValue, useTheme, useToast, VStack } from 'native-base';
+import { 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';
@@ -19,6 +19,7 @@ import ConfirmationModal from '@/modals/ConfirmationModal';
 import { Breadcrumb } from '@/components/Breadcrumb';
 import TruncatedText from '@/components/TruncatedText';
 import { Typography } from '@/components/Typography';
+import { Button } from '@/components/Button';
 
 type Props = {};
 const query = gql(`
@@ -69,11 +70,6 @@ const MatchingStudent: React.FC<Props> = () => {
         lg: sizes['containerWidth'],
     });
 
-    const ButtonContainer = useBreakpointValue({
-        base: '100%',
-        lg: sizes['desktopbuttonWidth'],
-    });
-
     const ContentContainerWidth = useBreakpointValue({
         base: '100%',
         lg: sizes['contentContainerWidth'],
@@ -154,9 +150,9 @@ const MatchingStudent: React.FC<Props> = () => {
                                     content: (
                                         <VStack>
                                             <Matches activeMatches={activeMatches as Match[]} />
-                                            <VStack space={['0.5']}>
+                                            <VStack marginY={['2.5']}>
                                                 {(data?.me?.student?.canRequestMatch.allowed && (
-                                                    <Button width={ButtonContainer} marginY={space['1.5']} onPress={() => navigate('/request-match')}>
+                                                    <Button className={'w-full md:w-fit'} variant={'secondary'} onClick={() => navigate('/request-match')}>
                                                         {t('dashboard.helpers.buttons.requestMatchStudent')}
                                                     </Button>
                                                 )) || (
@@ -234,13 +230,28 @@ const MatchingStudent: React.FC<Props> = () => {
                                 <Text maxWidth={ContentContainerWidth} paddingBottom={space['0.5']}>
                                     {t('matching.homeworkhelp.texthelper')}
                                 </Text>
-                                <VStack marginBottom={space['1.5']}>
-                                    <Button width={ButtonContainer} onPress={() => window.open(process.env.REACT_APP_HOMEWORKHELP, '_blank')}>
+                                <VStack marginBottom={space['2.5']}>
+                                    <Button
+                                        className={'w-full md:w-fit'}
+                                        onClick={() => window.open(process.env.REACT_APP_HOMEWORKHELP, '_blank')}
+                                        variant={'outline'}
+                                    >
                                         {t('matching.homeworkhelp.button')}
                                     </Button>
                                 </VStack>
                             </VStack>
                         )}
+                        <VStack space={space['0.5']} paddingX={space['1']} width="100%" marginX="auto" maxWidth={ContainerWidth}>
+                            <Heading paddingBottom={space['0.5']}>{t('matching.volunteering.title')}</Heading>
+                            <Text maxWidth={ContentContainerWidth} paddingBottom={space['0.5']}>
+                                {t('matching.volunteering.text')}
+                            </Text>
+                            <VStack marginBottom={space['2.5']}>
+                                <Button className={'w-full md:w-fit'} onClick={() => navigate('/profile#profileStudentMyCertificates')} variant={'outline'}>
+                                    {t('matching.volunteering.button')}
+                                </Button>
+                            </VStack>
+                        </VStack>
                     </VStack>
                 )}
             </WithNavigation>

src/pages/student/ProfileStudent.tsx

@@ -1,4 +1,4 @@
-import { Button, Column, Container, Flex, FormControl, Heading, Modal, Row, Stack, Text, TextArea, useBreakpointValue, useTheme, VStack } from 'native-base';
+import { Button, Column, Container, FormControl, Modal, Row, Stack, Text, TextArea, useBreakpointValue, useTheme, VStack } from 'native-base';
 import WithNavigation from '../../components/WithNavigation';
 import IconTagList from '../../widgets/IconTagList';
 import ProfileSettingItem from '../../widgets/ProfileSettingItem';
@@ -95,10 +95,11 @@ function StudentAboutMeModal({ aboutMe, onSave, onClose }: { aboutMe: string; on
 }
 
 const ProfileStudent: React.FC<Props> = () => {
-    const { colors, space, sizes } = useTheme();
+    const { space, sizes } = useTheme();
     const navigate = useNavigate();
     const { t } = useTranslation();
     const { trackPageView } = useMatomo();
+    const [divRef, setDivRef] = useState<Element | null>(null);
 
     const [aboutMeModalVisible, setAboutMeModalVisible] = useState<boolean>(false);
 
@@ -130,19 +131,6 @@ const ProfileStudent: React.FC<Props> = () => {
         lg: sizes['containerWidth'],
     });
 
-    const HeaderStyle = useBreakpointValue({
-        base: {
-            isMobile: true,
-            bgColor: 'primary.700',
-            paddingY: space['2'],
-        },
-        lg: {
-            isMobile: false,
-            bgColor: 'transparent',
-            paddingY: 0,
-        },
-    });
-
     const isMobileSM = useBreakpointValue({
         base: true,
         sm: false,
@@ -155,12 +143,21 @@ const ProfileStudent: React.FC<Props> = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    const goToRef = () => {
+        const href = window.location.href.substring(window.location.href.lastIndexOf('#') + 1);
+        if (href === 'profileStudentMyCertificates' && divRef) {
+            divRef.scrollIntoView({ behavior: 'smooth' });
+        }
+    };
+
     useEffect(() => {
         if (showSuccessfulChangeAlert || userSettingChanged) {
             window.scrollTo({ top: 0 });
         }
     }, [showSuccessfulChangeAlert, userSettingChanged]);
 
+    if (divRef) goToRef();
+
     return (
         <>
             <WithNavigation
@@ -221,8 +218,8 @@ const ProfileStudent: React.FC<Props> = () => {
                             <ProfileSettingItem title={t('profile.FluentLanguagenalData.label')} href={() => navigate('/change-setting/language')}>
                                 {(data?.me?.student?.languages?.length && (
                                     <Row flexWrap="wrap" w="100%">
-                                        {data?.me?.student?.languages.map((lang: string) => (
-                                            <Column marginRight={3} mb={space['0.5']}>
+                                        {data?.me?.student?.languages.map((lang: string, i: number) => (
+                                            <Column marginRight={3} mb={space['0.5']} key={i}>
                                                 <CSSWrapper className="profil-tab-link">
                                                     <IconTagList
                                                         isDisabled
@@ -262,12 +259,13 @@ const ProfileStudent: React.FC<Props> = () => {
                             </ProfileSettingItem>
                         </ProfileSettingRow>
                         <ProfileSettingRow title={t('profile.Helper.certificate.title')}>
+                            <div ref={(el) => setDivRef(el)}></div>
                             <Button marginY={space['1']} onPress={() => navigate('/request-certificate')} maxWidth="300px">
                                 {t('profile.Helper.certificate.button')}
                             </Button>
                             <VStack display="flex" flexDirection="row" flexWrap="wrap">
-                                {data?.me.student?.participationCertificates.map((certificate) => (
-                                    <MatchCertificateCard certificate={certificate} />
+                                {data?.me.student?.participationCertificates.map((certificate, i) => (
+                                    <MatchCertificateCard certificate={certificate} key={i} />
                                 ))}
                             </VStack>
                         </ProfileSettingRow>