Fix: Add District to the Accompanying details section #342

public/locales/de/translations.json

@@ -1034,6 +1034,7 @@
       "accompanyingDetails": {
         "appointmentAddress": "Terminadresse",
         "appointmentPostcode": "Terminpostleitzahl",
+        "appointmentDistrict": "Terminbezirk",
         "appointmentDate": "Termindatum",
         "appointmentTime": "Terminzeit",
         "refugeeNumber": "Geflüchtetennummer",

public/locales/en/translations.json

@@ -1033,6 +1033,7 @@
       "accompanyingDetails": {
         "appointmentAddress": "Appointment address",
         "appointmentPostcode": "Appointment postcode",
+        "appointmentDistrict": "Appointment district",
         "appointmentDate": "Appointment date",
         "appointmentTime": "Appointment time",
         "refugeeNumber": "Refugee number",

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

@@ -1,5 +1,5 @@
 "use client";
-import { useApiLanguages } from "@/components/Dashboard/Profile/sections/VolunteerProfile/hooks";
+import { useApiDistricts, useApiLanguages } from "@/components/Dashboard/Profile/sections/VolunteerProfile/hooks";
 import { useUpdateOpportunityAccompanyingDetails } from "@/hooks/useUpdateOpportunityAccompanyingDetails";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { de, enUS } from "date-fns/locale";
@@ -31,6 +31,7 @@ export const AccompanyingDetails = forwardRef<EditableSectionRef, Props>(functio
 
   useEditingChangeNotifier(isEditing, onEditingChange);
   const { data: apiLanguages } = useApiLanguages();
+  const { data: apiDistricts } = useApiDistricts();
   const showFullDetails = isAccompanyingType(opportunity.volunteerType);
   const minAppointmentDate = useMemo(() => getMinAppointmentDate(), []);
 
@@ -53,6 +54,14 @@ export const AccompanyingDetails = forwardRef<EditableSectionRef, Props>(functio
   });
   const appointmentLanguageOptions = appointmentLanguageKeys.map((key) => appointmentLanguageKeyToLabel[key]);
 
+  const districtKeyToLabel: Record<string, string> = {};
+  const districtLabelToKey: Record<string, string> = {};
+  apiDistricts.forEach((district) => {
+    districtKeyToLabel[String(district.id)] = district.title;
+    districtLabelToKey[district.title] = String(district.id);
+  });
+  const districtOptions = apiDistricts.map((district) => district.title);
+
   const initialFormValues = getInitialFormValues(opportunity.accompanyingDetails);
 
   const methods = useForm<AccompanyingDetailsFormData>({
@@ -84,6 +93,8 @@ export const AccompanyingDetails = forwardRef<EditableSectionRef, Props>(functio
       {
         accompanyingDetails: {
           appointmentAddress: values.appointmentAddress,
+          appointmentPostcode: values.appointmentPostcode || undefined,
+          appointmentDistrict: values.appointmentDistrict || undefined,
           appointmentDate: values.appointmentDate ? values.appointmentDate.toISOString() : undefined,
           appointmentTime: values.appointmentTime || undefined,
           refugeeNumber: values.refugeeNumber,
@@ -117,6 +128,8 @@ export const AccompanyingDetails = forwardRef<EditableSectionRef, Props>(functio
   }
 
   const languageLabel = (formValues.languagesToTranslate ?? []).map((id) => keyToLabel[id] || id).join(", ");
+  const districtLabel =
+    districtKeyToLabel[formValues.appointmentDistrict || ""] || formValues.appointmentDistrict || "";
 
   return (
     <FormProvider {...methods}>
@@ -130,13 +143,16 @@ export const AccompanyingDetails = forwardRef<EditableSectionRef, Props>(functio
             appointmentLanguageOptions={appointmentLanguageOptions}
             appointmentLanguageKeyToLabel={appointmentLanguageKeyToLabel}
             appointmentLanguageLabelToKey={appointmentLanguageLabelToKey}
+            districtOptions={districtOptions}
+            districtKeyToLabel={districtKeyToLabel}
+            districtLabelToKey={districtLabelToKey}
             onCancel={handleCancel}
             onSubmit={handleSubmit(onSubmit)}
             isPending={isPending}
             minAppointmentDate={minAppointmentDate}
           />
         ) : (
-          <AccompanyingDetailsDisplay values={formValues} languageLabel={languageLabel} />
+          <AccompanyingDetailsDisplay values={formValues} languageLabel={languageLabel} districtLabel={districtLabel} />
         )}
       </Container>
     </FormProvider>

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

@@ -8,9 +8,10 @@ import { DateFieldRow, Details } from "./styles";
 type Props = {
   values: AccompanyingDetailsFormData;
   languageLabel: string;
+  districtLabel: string;
 };
 
-export const AccompanyingDetailsDisplay = ({ values, languageLabel }: Props) => {
+export const AccompanyingDetailsDisplay = ({ values, languageLabel, districtLabel }: Props) => {
   const { t } = useTranslation();
 
   return (
@@ -31,6 +32,15 @@ export const AccompanyingDetailsDisplay = ({ values, languageLabel }: Props) =>
         setValue={() => {}}
       />
 
+      <EditableField
+        mode="display"
+        type="radio-list"
+        label={t("dashboard.opportunityProfile.accompanyingDetails.appointmentDistrict")}
+        value={districtLabel}
+        setValue={() => {}}
+        options={[]}
+      />
+
       <DateFieldRow data-testid="appointment-date-field">
         <label>{t("dashboard.opportunityProfile.accompanyingDetails.appointmentDate")}</label>
         <span>{values.appointmentDate ? format(values.appointmentDate, "dd.MM.yyyy") : EMPTY_PLACEHOLDER_VALUE}</span>

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

@@ -23,6 +23,9 @@ type Props = {
   appointmentLanguageOptions: string[];
   appointmentLanguageKeyToLabel: Record<string, string>;
   appointmentLanguageLabelToKey: Record<string, string>;
+  districtOptions: string[];
+  districtKeyToLabel: Record<string, string>;
+  districtLabelToKey: Record<string, string>;
   onCancel: () => void;
   onSubmit: () => void;
   isPending: boolean;
@@ -37,6 +40,9 @@ export const AccompanyingDetailsEdit = ({
   appointmentLanguageOptions,
   appointmentLanguageKeyToLabel,
   appointmentLanguageLabelToKey,
+  districtOptions,
+  districtKeyToLabel,
+  districtLabelToKey,
   onCancel,
   onSubmit,
   isPending,
@@ -81,6 +87,25 @@ export const AccompanyingDetailsEdit = ({
           )}
         />
 
+        <Controller
+          name="appointmentDistrict"
+          control={control}
+          render={({ field }: { field: ControllerRenderProps<AccompanyingDetailsFormData, "appointmentDistrict"> }) => (
+            <EditableField
+              mode="edit"
+              type="radio-list"
+              label={t("dashboard.opportunityProfile.accompanyingDetails.appointmentDistrict")}
+              value={districtKeyToLabel[field.value || ""] || field.value || ""}
+              setValue={(value) => {
+                const label = Array.isArray(value) ? value[0] : value;
+                field.onChange(districtLabelToKey[label] || label);
+              }}
+              options={districtOptions}
+              errorMessage={errors.appointmentDistrict?.message}
+            />
+          )}
+        />
+
         <Controller
           name="appointmentDate"
           control={control}

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

@@ -5,6 +5,7 @@ const timeRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
 export const accompanyingDetailsSchema = z.object({
   appointmentAddress: z.string().optional(),
   appointmentPostcode: z.string().optional(),
+  appointmentDistrict: z.string().optional(),
   appointmentDate: z.date().nullable().optional(),
   appointmentTime: z
     .string()

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

@@ -40,6 +40,8 @@ export const getInitialFormValues = (
   appointmentAddress: details?.appointmentAddress || "",
   appointmentPostcode:
     (details as ApiOpportunityAccompanyingDetails & { appointmentPostcode?: string })?.appointmentPostcode || "",
+  appointmentDistrict:
+    (details as ApiOpportunityAccompanyingDetails & { appointmentDistrict?: string })?.appointmentDistrict || "",
   appointmentDate: parseDate(details?.appointmentDate),
   appointmentTime: parseTime(details?.appointmentTime),
   refugeeNumber: details?.refugeeNumber || "",

src/hooks/useUpdateOpportunityAccompanyingDetails.ts

@@ -5,6 +5,8 @@ import { ApiOpportunityGet } from "need4deed-sdk";
 export type OpportunityAccompanyingDetailsUpdateData = {
   accompanyingDetails: {
     appointmentAddress?: string;
+    appointmentPostcode?: string;
+    appointmentDistrict?: string;
     appointmentDate?: string;
     appointmentTime?: string;
     refugeeNumber?: string;