Fix: No ZIP/PLZ-code for Accompanying details #344

public/locales/de/translations.json

@@ -1025,6 +1025,7 @@
       "accompanyingDetailsTitle": "Begleitdetails",
       "accompanyingDetails": {
         "appointmentAddress": "Terminadresse",
+        "appointmentPostcode": "Terminpostleitzahl",
         "appointmentDate": "Termindatum",
         "appointmentTime": "Terminzeit",
         "refugeeNumber": "Geflüchtetennummer",

public/locales/en/translations.json

@@ -1024,6 +1024,7 @@
       "accompanyingDetailsTitle": "Accompanying details",
       "accompanyingDetails": {
         "appointmentAddress": "Appointment address",
+        "appointmentPostcode": "Appointment postcode",
         "appointmentDate": "Appointment date",
         "appointmentTime": "Appointment time",
         "refugeeNumber": "Refugee number",

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

@@ -23,6 +23,14 @@ export const AccompanyingDetailsDisplay = ({ values, languageLabel }: Props) =>
         setValue={() => {}}
       />
 
+      <EditableField
+        mode="display"
+        type="text"
+        label={t("dashboard.opportunityProfile.accompanyingDetails.appointmentPostcode")}
+        value={values.appointmentPostcode || ""}
+        setValue={() => {}}
+      />
+
       <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

@@ -60,6 +60,21 @@ export const AccompanyingDetailsEdit = ({
           )}
         />
 
+        <Controller
+          name="appointmentPostcode"
+          control={control}
+          render={({ field }: { field: ControllerRenderProps<AccompanyingDetailsFormData, "appointmentPostcode"> }) => (
+            <EditableField
+              mode="edit"
+              type="text"
+              label={t("dashboard.opportunityProfile.accompanyingDetails.appointmentPostcode")}
+              value={field.value || ""}
+              setValue={field.onChange}
+              errorMessage={errors.appointmentPostcode?.message}
+            />
+          )}
+        />
+
         <Controller
           name="appointmentDate"
           control={control}
@@ -98,9 +113,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>

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

@@ -4,6 +4,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(),
   appointmentDate: z.date().nullable().optional(),
   appointmentTime: z
     .string()

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

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