feat: Make German mandatory for HuH in Funnel (#959)

## What was done?

- German must now be selected by HuH during registration funnel
- Added translations for error message

Author: JeangelLF

src/lang/ar.json

@@ -475,7 +475,8 @@
                 "titlePupil": "ما هي اللغات التي تتحدث بها في المنزل؟",
                 "titleStudent": "ما هي اللغات التي تتحدثينها بطلاقة؟",
                 "descriptionPupil": "نحاول أن نجمعك مع متطوعون يتحدثون لغات متطوعون .",
-                "descriptionStudent": "نحاول أن نجمعك مع تلاميذ يتحدثون لغات متشابهة."
+                "descriptionStudent": "نحاول أن نجمعك مع تلاميذ يتحدثون لغات متشابهة.",
+                "germanRequiredError": "لكي يعمل الدعم بشكل صحيح، فإن اللغة الألمانية مطلوبة كلغة مشتركة. يرجى اختيار اللغة الألمانية."
             },
             "bookAppointment": {
                 "title": "مقابلة تعارف",

src/lang/de.json

@@ -572,7 +572,8 @@
                 "titlePupil": "Welche Sprachen sprichst du zu Hause?",
                 "titleStudent": "Welche Sprachen sprichst du fließend?",
                 "descriptionPupil": "Wir versuchen, dich mit Helfer:innen zusammenzubringen, die ähnliche Sprachen sprechen.",
-                "descriptionStudent": "Wir versuchen, dich mit Schüler:innen zusammenzubringen, die ähnliche Sprachen sprechen."
+                "descriptionStudent": "Wir versuchen, dich mit Schüler:innen zusammenzubringen, die ähnliche Sprachen sprechen.",
+                "germanRequiredError": "Damit die Unterstützung gut funktioniert, ist Deutsch als gemeinsame Sprache erforderlich. Bitte wähle Deutsch aus."
             },
             "bookAppointment": {
                 "title": "Kennenlern-Gespräch",

src/lang/en.json

@@ -475,7 +475,8 @@
                 "titlePupil": "What languages do you speak at home?",
                 "titleStudent": "Which languages do you speak fluently?",
                 "descriptionPupil": "We try to bring you together with volunteers who speak similar languages.",
-                "descriptionStudent": "We try to bring you together with pupils who speak similar languages."
+                "descriptionStudent": "We try to bring you together with pupils who speak similar languages.",
+                "germanRequiredError": "For the support to work properly, German is required as the common language. Please select German."
             },
             "bookAppointment": {
                 "title": "Introductory Meeting",

src/lang/ru.json

@@ -475,7 +475,8 @@
                 "titlePupil": "На каких языках вы говорите дома?",
                 "titleStudent": "Какими языками вы владеете свободно?",
                 "descriptionPupil": "Мы стараемся объединить вас с помощниками, говорящими на похожих языках.",
-                "descriptionStudent": "Мы стараемся объединить вас со студентами, говорящими на похожих языках."
+                "descriptionStudent": "Мы стараемся объединить вас со студентами, говорящими на похожих языках.",
+                "germanRequiredError": "Чтобы поддержка работала корректно, необходим немецкий язык как общий язык. Пожалуйста, выберите немецкий."
             },
             "bookAppointment": {
                 "title": "Знакомство",

src/lang/tr.json

@@ -475,7 +475,8 @@
                 "titlePupil": "Evde hangi dilleri konuşuyorsunuz?",
                 "titleStudent": "Hangi dilleri akıcı bir şekilde konuşabiliyorsunuz?",
                 "descriptionPupil": "Sizi benzer dilleri konuşan yardımcılarla bir araya getirmeye çalışıyoruz.",
-                "descriptionStudent": "Sizi benzer dilleri konuşan öğrencilerle bir araya getirmeye çalışıyoruz."
+                "descriptionStudent": "Sizi benzer dilleri konuşan öğrencilerle bir araya getirmeye çalışıyoruz.",
+                "germanRequiredError": "Desteğin düzgün çalışabilmesi için ortak dil olarak Almanca gereklidir. Lütfen Almanca’yı seçin."
             },
             "bookAppointment": {
                 "title": "Tanışma Görüşmesi",

src/lang/uk.json

@@ -475,7 +475,8 @@
                 "titlePupil": "Якими мовами ви розмовляєте вдома?",
                 "titleStudent": "Якими мовами ви вільно володієте?",
                 "descriptionPupil": "Ми намагаємося звести вас з помічниками, які розмовляють схожими мовами.",
-                "descriptionStudent": "Ми намагаємося звести вас зі студентами, які розмовляють схожими мовами."
+                "descriptionStudent": "Ми намагаємося звести вас зі студентами, які розмовляють схожими мовами.",
+                "germanRequiredError": "Щоб підтримка працювала належним чином, потрібна німецька мова як спільна мова. Будь ласка, виберіть німецьку."
             },
             "bookAppointment": {
                 "title": "Зустріч-ознайомлення",

src/pages/registration/RegistrationStep.tsx

@@ -12,6 +12,7 @@ interface _RegistrationStepProps {
     isNextDisabled?: boolean;
     isBackDisabled?: boolean;
     className?: string;
+    reasonNextDisabled?: string;
 }
 
 export type RegistrationStepProps = Omit<_RegistrationStepProps, 'children'>;
@@ -46,7 +47,7 @@ export const RegistrationStepDescription = ({ className, variant = 'body-lg', ch
     );
 };
 
-export const RegistrationStep = ({ onBack, onNext, isBackDisabled, isNextDisabled, className, children }: _RegistrationStepProps) => {
+export const RegistrationStep = ({ onBack, onNext, isBackDisabled, isNextDisabled, className, reasonNextDisabled, children }: _RegistrationStepProps) => {
     const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         if (!isNextDisabled && onNext) {
@@ -81,6 +82,7 @@ export const RegistrationStep = ({ onBack, onNext, isBackDisabled, isNextDisable
                     </Button>
                     <Button
                         disabled={isNextDisabled}
+                        reasonDisabled={reasonNextDisabled}
                         variant="ghost"
                         className={cn(
                             'size-[70px] rounded-full border border-transparent md:hover:border-primary transition-colors duration-300 ease-in-out px-0',

src/pages/registration/UserLanguages.tsx

@@ -1,10 +1,11 @@
 import { useTranslation } from 'react-i18next';
-import { OptionalBadge, RegistrationStep, RegistrationStepDescription, RegistrationStepProps, RegistrationStepTitle } from './RegistrationStep';
+import { RegistrationStep, RegistrationStepDescription, RegistrationStepProps, RegistrationStepTitle } from './RegistrationStep';
 import { useRegistrationForm } from './useRegistrationForm';
 import { LanguageSelector } from '@/components/LanguageSelector';
 import { Language } from '@/gql/graphql';
-import { Typography } from '@/components/Typography';
 import { usePageTitle } from '@/hooks/usePageTitle';
+import { Typography } from '@/components/Typography';
+import { cn } from '@/lib/Tailwind';
 
 interface UserLanguagesProps extends RegistrationStepProps {}
 
@@ -17,11 +18,16 @@ export const UserLanguages = ({ onBack, onNext }: UserLanguagesProps) => {
         onFormChange({ languages: values });
     };
 
-    const isNextDisabled = form.userType === 'pupil' ? form.languages.length === 0 : false;
+    const isNextDisabled = form.userType === 'pupil' ? form.languages.length === 0 : !form.languages.includes(Language.Deutsch);
 
     return (
-        <RegistrationStep className="px-0" onBack={onBack} onNext={onNext} isNextDisabled={isNextDisabled}>
-            {form.userType === 'student' && <OptionalBadge />}
+        <RegistrationStep
+            className="px-0"
+            onBack={onBack}
+            onNext={onNext}
+            isNextDisabled={isNextDisabled}
+            reasonNextDisabled={isNextDisabled ? t('registration.steps.languages.germanRequiredError') : undefined}
+        >
             <RegistrationStepTitle className="mb-3">
                 {t(form.userType === 'pupil' ? 'registration.steps.languages.titlePupil' : 'registration.steps.languages.titleStudent')}
             </RegistrationStepTitle>
@@ -47,6 +53,14 @@ export const UserLanguages = ({ onBack, onNext }: UserLanguagesProps) => {
                     setValue={onChange}
                 />
             </div>
+            <Typography
+                variant="sm"
+                className={cn('text-destructive px-1 min-h-5 leading-1 mt-4 text-center', {
+                    invisible: !form.languages.length || form.languages.includes(Language.Deutsch),
+                })}
+            >
+                {t('registration.steps.languages.germanRequiredError')}
+            </Typography>
         </RegistrationStep>
     );
 };