fix: can't make reservation if there is no city

Author: joonatank

apps/ui/components/reservation/Step0.tsx

@@ -87,14 +87,19 @@ const Step0 = ({
       return fields.indexOf(a) - fields.indexOf(b);
     }) || [];
 
-  const includesReserveeType =
-    reservationUnit?.metadataSet?.supportedFields?.includes("reservee_type");
+  const { supportedFields } = reservationUnit.metadataSet ?? {};
+  const includesReserveeType = supportedFields?.includes("reservee_type");
   const reserveeType = watch("reserveeType");
   const homeCity = watch("homeCity");
+  const includesHomeCity = supportedFields?.includes("home_city");
 
   if (includesReserveeType && isSubmitted && !reserveeType)
     errorKeys.push("reserveeType");
 
+  const isHomeCityValid = !includesHomeCity || Boolean(homeCity);
+  const isReserveeTypeValid = !includesReserveeType || Boolean(reserveeType);
+  const submitDisabled = !isValid || !isReserveeTypeValid || !isHomeCityValid;
+
   return (
     <Form
       onSubmit={(e) => {
@@ -191,10 +196,7 @@ const Step0 = ({
         <MediumButton
           variant="primary"
           type="submit"
-          disabled={
-            !isValid ||
-            (includesReserveeType && (!reserveeType || homeCity === 0))
-          }
+          disabled={submitDisabled}
           iconRight={<IconArrowRight aria-hidden />}
           data-test="reservation__button--update"
           isLoading={isSubmitting}

apps/ui/pages/reservation-unit/[...params].tsx

@@ -236,9 +236,13 @@ const ReservationUnitReservationWithReservationProp = ({
     reserveeAddressCity: reservation?.reserveeAddressCity ?? "",
     reserveeAddressZip: reservation?.reserveeAddressZip ?? "",
     // TODO is this correct? it used to just pick the homeCity (but that makes no sense since it's typed as a number)
-    homeCity: reservation?.homeCity?.pk ?? 0,
+    // no it's not correct, the types and MetaFields are based on a number but the front sets it as { label: string, value: number }
+    // requires typing the useFormContext properly and refactoring all setters.
+    homeCity: reservation?.homeCity?.pk ?? undefined,
   };
-  // TODO don't use defaultValues, use values (and reset on fetch) from the form
+  // TODO is defaultValues correct? it's prefilled from the profile data and we are not refetching at any point.
+  // If we would refetch values would be more correct with reset hook.
+  // Also if this is ever initialised without the data it will not prefill the form.
   const form = useForm<Inputs>({ defaultValues, mode: "onBlur" });
   const { handleSubmit, watch } = form;