From e923156e74ec6d082e20b71ba7f92d4822613ab3 Mon Sep 17 00:00:00 2001
From: Mats Eriksson <mats.eriksson@vincit.fi>
Date: Tue, 10 Dec 2024 03:21:43 +0200
Subject: [PATCH] fix: separate application sections in the form

- the different sections now show proper timetables
---
 apps/ui/components/application/Page2.tsx | 78 +++++++++++++++---------
 1 file changed, 48 insertions(+), 30 deletions(-)

diff --git a/apps/ui/components/application/Page2.tsx b/apps/ui/components/application/Page2.tsx
index 079b908c5..c52d6b6e2 100644
--- a/apps/ui/components/application/Page2.tsx
+++ b/apps/ui/components/application/Page2.tsx
@@ -245,39 +245,39 @@ const getApplicationEventsWhichMinDurationsIsNotFulfilled = (
 
 function Page2({ application, onNext }: Props): JSX.Element {
   const { t, i18n } = useTranslation();
-  const [reservationUnitPk, setReservationUnitPk] = useState<number>(
-    application?.applicationSections?.[0]?.reservationUnitOptions?.[0]
-      ?.reservationUnit?.pk ?? 0
+  const [reservationUnitPks, setReservationUnitPks] = useState<number[]>(
+    application?.applicationSections?.map((n) =>
+      Number(n.reservationUnitOptions[0].reservationUnit.pk)
+    ) ?? []
   );
 
+  function updateReservationUnitPks(index: number, pk: number) {
+    const updated = [...reservationUnitPks];
+    updated[index] = pk;
+    setReservationUnitPks(updated);
+  }
+
   const [minDurationMsg, setMinDurationMsg] = useState(true);
   const router = useRouter();
-  // TODO why are we taking the first one only here?
-  const applicationSection = application?.applicationSections?.[0] ?? null;
-  const resUnitOptions = filterNonNullable(
-    applicationSection?.reservationUnitOptions
-  );
-  // TODO check for nulls in the subfields
-  const resUnits = filterNonNullable(
-    resUnitOptions.map((n) => n?.reservationUnit)
-  );
-  const reservationUnitOptions = resUnits
-    .map((n) => ({
-      value: n?.pk ?? 0,
-      label: getTranslationSafe(n, "name", getLocalizationLang(i18n.language)),
-    }))
-    .map(({ value, label }) => ({
-      value,
-      label: truncate(label, MAX_SELECT_OPTION_LENGTH),
-    }));
-  // TODO why is this done like this?
-  const openingHours = filterNonNullable(
-    resUnits.find((n) => n.pk === reservationUnitPk)?.applicationRoundTimeSlots
-  );
-
   const { getValues, setValue, watch, handleSubmit } =
     useFormContext<ApplicationFormValues>();
 
+  const allOpeningHours = filterNonNullable(
+    application.applicationSections
+  ).map((as) =>
+    as.reservationUnitOptions.map((ruo) => ({
+      pk: ruo.reservationUnit.pk ?? 0,
+      openingHours: ruo.reservationUnit.applicationRoundTimeSlots,
+    }))
+  );
+  const reservationUnitOpeningHours = filterNonNullable(
+    application?.applicationSections
+  ).map(
+    (_as, index) =>
+      allOpeningHours[index].find((n) => n.pk === reservationUnitPks[index])
+        ?.openingHours
+  );
+
   const applicationSections = filterNonNullable(watch("applicationSections"));
 
   // TODO type properly the input and move to free function
@@ -295,8 +295,8 @@ function Page2({ application, onNext }: Props): JSX.Element {
       }) ?? []
     );
   };
-  const selectorData = applicationSections.map((ae) =>
-    aesToCells(convertToSchedule(ae), openingHours)
+  const selectorData = applicationSections.map((ae, index) =>
+    aesToCells(convertToSchedule(ae), reservationUnitOpeningHours[index])
   );
   const setSelectorData = (selected: typeof selectorData) => {
     // So this returns them as:
@@ -427,6 +427,23 @@ function Page2({ application, onNext }: Props): JSX.Element {
             priority: 200,
             day: convertWeekday(a.dayOfTheWeek),
           }));
+        const reservationUnitOptions = filterNonNullable(
+          application?.applicationSections?.[index].reservationUnitOptions
+        )
+          .map((n) => n.reservationUnit)
+          .map((n) => ({
+            value: n?.pk ?? 0,
+            label: getTranslationSafe(
+              n,
+              "name",
+              getLocalizationLang(i18n.language)
+            ),
+          }))
+          .map(({ value, label }) => ({
+            value,
+            label: truncate(label, MAX_SELECT_OPTION_LENGTH),
+          }));
+
         return (
           <Accordion
             open={index === 0}
@@ -450,8 +467,8 @@ function Page2({ application, onNext }: Props): JSX.Element {
               resetCells={() => resetCells(index)}
               summaryData={[summaryDataPrimary, summaryDataSecondary]}
               reservationUnitOptions={reservationUnitOptions}
-              reservationUnitPk={reservationUnitPk}
-              setReservationUnitPk={setReservationUnitPk}
+              reservationUnitPk={reservationUnitPks[index]}
+              setReservationUnitPk={(pk) => updateReservationUnitPks(index, pk)}
             />
           </Accordion>
         );
@@ -464,6 +481,7 @@ function Page2({ application, onNext }: Props): JSX.Element {
           onClose={() => setMinDurationMsg(false)}
           closeButtonLabelText={t("common:close")}
           dataTestId="application__page2--notification-min-duration"
+          style={{ marginBottom: "var(--spacing-m)" }}
         >
           {applicationSections?.length === 1
             ? t("application:Page2.notification.minDuration.bodySingle")