Fix: Add District to the Accompanying details section #342

[lourooo]

Fix: Add District to the Accompanying details section #342

Description

Adds the District field to the Accompanying Details section on the frontend. Backend support is still needed to persist the value.

Related Issues

Closes #342

Changes

• Added appointmentDistrict field to the accompanying details schema
• Added district field to display and edit components
• Added translations in EN and DE

Screenshots / Demos

Checklist

• WITHIN THE SCOPE OF AN ISSUE; No unnecessary files included
• Tests added/updated
• Documentation updated
• CI passes

[nadavosa]

The field wiring looks correct in display, edit, and schema — good pattern, consistent with appointmentAddress.

One bug in helpers.ts: the initial value is hardcoded to "" instead of reading from details:

// current (bug — always empty on load)
appointmentDistrict: "",

// should be
appointmentDistrict: details?.appointmentDistrict || "",

Without this, existing district values stored in the DB will never be shown when the section loads.

[lourooo]

appointmentDistrict doesn't exist yet in ApiOpportunityAccompanyingDetails in the SDK, the backend hasn't added the field yet, so details?.appointmentDistrict would cause a TypeScript error. Once the SDK is updated, the initial value can be changed to details?.appointmentDistrict || "". Would you like me to add the cast now so it's ready when the backend is done, or keep it as "" until the SDK is updated?

[lourooo]

Updated

[nadavosa]

Before this gets merged, please run yarn lint and yarn typecheck locally and fix any errors. We've added a CI check (#359) that will block merging if these fail.

[lourooo]

Everything is fine

[nadavosa]

The district field should use the API-driven dropdown (same pattern as the RAC section in #377) rather than a free-text input. Here are the exact changes needed:

---

src/hooks/useUpdateOpportunityAccompanyingDetails.ts — add appointmentDistrict to the update type:

accompanyingDetails: {
  appointmentAddress?: string;
  appointmentDistrict?: number;  // add this
  appointmentDate?: string;
  ...

---

src/components/Dashboard/Profile/sections/AccompanyingDetails/helpers.ts — accept a district mapping so the stored ID is converted to a title on load:

export const getInitialFormValues = (
  details: ApiOpportunityAccompanyingDetails | undefined,
  districtIdToTitle: Record<number, string> = {},  // add this param
): AccompanyingDetailsFormData => {
  const rawDistrict = (details as ApiOpportunityAccompanyingDetails & { appointmentDistrict?: string | number })
    ?.appointmentDistrict;
  const appointmentDistrict = districtIdToTitle[Number(rawDistrict)] || "";
  return {
    appointmentAddress: details?.appointmentAddress || "",
    appointmentDistrict,
    appointmentDate: parseDate(details?.appointmentDate),
    appointmentTime: parseTime(details?.appointmentTime),
    refugeeNumber: details?.refugeeNumber || "",
    refugeeName: details?.refugeeName || "",
    languageToTranslate: details?.languageToTranslate?.toString() ?? "",
  };
};

---

src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetails.tsx — fetch districts, build mapping, pass options to edit, send ID on submit:

// add imports at top
import { useApiDistricts, useApiLanguages } from "@/components/Dashboard/Profile/sections/VolunteerProfile/hooks";
import { createMapping } from "@/components/Dashboard/Profile/sections/VolunteerProfile/mappingUtils";

// inside component, after useApiLanguages:
const { data: apiDistricts = [] } = useApiDistricts();
const districtMapping = useMemo(() => createMapping(apiDistricts), [apiDistricts]);
const districtOptions = apiDistricts.map((d) => d.title);

// pass mapping to getInitialFormValues (both the initial call and the reset in useEffect):
const initialFormValues = getInitialFormValues(opportunity.accompanyingDetails, districtMapping.idToTitle);
// ...
reset(getInitialFormValues(opportunity.accompanyingDetails, districtMapping.idToTitle));

// in onSubmit, add district ID:
accompanyingDetails: {
  appointmentAddress: values.appointmentAddress,
  ...(districtMapping.titleToId[values.appointmentDistrict || ""] !== undefined && {
    appointmentDistrict: districtMapping.titleToId[values.appointmentDistrict || ""],
  }),
  // ... rest unchanged

// pass districtOptions to AccompanyingDetailsEdit:
<AccompanyingDetailsEdit
  districtOptions={districtOptions}
  // ... rest unchanged

---

src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsEdit.tsx — add prop and switch to radio-list:

// add to Props type:
districtOptions: string[];

// add to destructured params:
export const AccompanyingDetailsEdit = ({ ..., districtOptions, ... }) => {

// change the district EditableField:
<EditableField
  mode="edit"
  type="radio-list"           // was "text"
  label={t("dashboard.opportunityProfile.accompanyingDetails.appointmentDistrict")}
  value={field.value || ""}
  setValue={field.onChange}
  options={districtOptions}   // add this
  errorMessage={errors.appointmentDistrict?.message}
/>

[lourooo]

Updated

[lourooo]

Updated

[nadavosa]

Both fixes applied:

• getInitialFormValues now reads details?.appointmentDistrict || "" — existing values will load correctly
• District is sent in the mutation payload
• Display label resolved via districtKeyToLabel

FE is complete. As noted before, merge is contingent on the BE actually persisting this field.