fix: rename language field to refugee language and enable multi-select

public/locales/de/translations.json

@@ -1029,6 +1029,7 @@
         "refugeeNumber": "Geflüchtetennummer",
         "refugeeName": "Name des Geflüchteten",
         "languageToTranslate": "Zu übersetzende Sprache",
+        "refugeeLanguage": "Flüchtlingssprache",
         "cancel": "Abbrechen",
         "saveChanges": "Änderungen speichern",
         "saveSuccess": "Begleitdetails erfolgreich aktualisiert",

public/locales/en/translations.json

@@ -1028,6 +1028,7 @@
         "refugeeNumber": "Refugee number",
         "refugeeName": "Refugee name",
         "languageToTranslate": "Language to translate",
+        "refugeeLanguage": "Refugee language",
         "cancel": "Cancel",
         "saveChanges": "Save changes",
         "saveSuccess": "Accompanying details updated successfully",

src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetails.tsx

@@ -77,7 +77,7 @@ export const AccompanyingDetails = forwardRef<EditableSectionRef, Props>(functio
           appointmentTime: values.appointmentTime || undefined,
           refugeeNumber: values.refugeeNumber,
           refugeeName: values.refugeeName,
-          languagesToTranslate: values.languageToTranslate ? [values.languageToTranslate] : [],
+          languagesToTranslate: values.languagesToTranslate ?? [],
         },
       },
       {
@@ -104,7 +104,7 @@ export const AccompanyingDetails = forwardRef<EditableSectionRef, Props>(functio
     );
   }
 
-  const languageLabel = keyToLabel[formValues.languageToTranslate || ""] || formValues.languageToTranslate || "";
+  const languageLabel = (formValues.languagesToTranslate ?? []).map((id) => keyToLabel[id] || id).join(", ");
 
   return (
     <FormProvider {...methods}>

src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsDisplay.tsx

@@ -51,11 +51,10 @@ export const AccompanyingDetailsDisplay = ({ values, languageLabel }: Props) =>
 
       <EditableField
         mode="display"
-        type="radio-list"
-        label={t("dashboard.opportunityProfile.accompanyingDetails.languageToTranslate")}
+        type="text"
+        label={t("dashboard.opportunityProfile.accompanyingDetails.refugeeLanguage")}
         value={languageLabel}
         setValue={() => {}}
-        options={[]}
       />
     </Details>
   );

src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsEdit.tsx

@@ -98,9 +98,7 @@ export const AccompanyingDetailsEdit = ({
                 />
                 {errors.appointmentTime && (
                   <ErrorText>
-                    {t(
-                      `dashboard.opportunityProfile.accompanyingDetails.validation.${errors.appointmentTime.message}`,
-                    )}
+                    {t(`dashboard.opportunityProfile.accompanyingDetails.validation.${errors.appointmentTime.message}`)}
                   </ErrorText>
                 )}
               </TimeInputWrapper>
@@ -139,20 +137,24 @@ export const AccompanyingDetailsEdit = ({
         />
 
         <Controller
-          name="languageToTranslate"
+          name="languagesToTranslate"
           control={control}
-          render={({ field }: { field: ControllerRenderProps<AccompanyingDetailsFormData, "languageToTranslate"> }) => (
+          render={({
+            field,
+          }: {
+            field: ControllerRenderProps<AccompanyingDetailsFormData, "languagesToTranslate">;
+          }) => (
             <EditableField
               mode="edit"
-              type="radio-list"
-              label={t("dashboard.opportunityProfile.accompanyingDetails.languageToTranslate")}
-              value={keyToLabel[field.value || ""] || field.value || ""}
+              type="checkbox-list"
+              label={t("dashboard.opportunityProfile.accompanyingDetails.refugeeLanguage")}
+              value={(field.value ?? []).map((id) => keyToLabel[id] || id)}
               setValue={(value) => {
-                const label = Array.isArray(value) ? value[0] : value;
-                field.onChange(labelToKey[label] || label);
+                const labels = Array.isArray(value) ? value : [value];
+                field.onChange(labels.map((label) => labelToKey[label] || label));
               }}
               options={languageOptions}
-              errorMessage={errors.languageToTranslate?.message}
+              errorMessage={errors.languagesToTranslate?.message}
             />
           )}
         />

src/components/Dashboard/Profile/sections/AccompanyingDetails/accompanyingDetailsSchema.ts

@@ -13,7 +13,7 @@ export const accompanyingDetailsSchema = z.object({
     }),
   refugeeNumber: z.string().optional(),
   refugeeName: z.string().optional(),
-  languageToTranslate: z.string().optional(),
+  languagesToTranslate: z.array(z.string()).optional(),
 });
 
 export type AccompanyingDetailsFormData = z.infer<typeof accompanyingDetailsSchema>;

src/components/Dashboard/Profile/sections/AccompanyingDetails/helpers.ts

@@ -42,5 +42,5 @@ export const getInitialFormValues = (
   appointmentTime: parseTime(details?.appointmentTime),
   refugeeNumber: details?.refugeeNumber || "",
   refugeeName: details?.refugeeName || "",
-  languageToTranslate: details?.languageToTranslate?.toString() ?? "",
+  languagesToTranslate: details?.languageToTranslate !== undefined ? [details.languageToTranslate.toString()] : [],
 });