wip

City-of-Helsinki · Mar 20, 2024 · 8b60498 · 8b60498
1 parent a2676c0
commit 8b60498
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 36 deletions.
diff --git a/apps/ui/components/calendar/ReservationCalendarControls.tsx b/apps/ui/components/calendar/ReservationCalendarControls.tsx
@@ -223,7 +223,7 @@ const SubmitButtonWrapper = styled.div`
   order: 3;
 `;
 
-const StyledSelect = styled(ControlledSelect)`
+const StyledControlledSelect = styled(ControlledSelect)`
   & > div:nth-of-type(2) {
     line-height: var(--lineheight-l);
   }
@@ -410,15 +410,15 @@ const ReservationCalendarControls = ({
                     : new Date()
                 }
               />
-              <StyledSelect
+              <StyledControlledSelect
                 name="time"
                 label={t("reservationCalendar:startTime")}
                 control={reservationForm.control}
                 options={startingTimeOptions}
                 disabled={!(startingTimeOptions?.length >= 1) && !time}
               />
               <div data-testid="reservation__input--duration">
-                <StyledSelect
+                <StyledControlledSelect
                   name="duration"
                   control={reservationForm.control}
                   label={t("reservationCalendar:duration")}

diff --git a/apps/ui/components/reservation-unit/QuickReservation.tsx b/apps/ui/components/reservation-unit/QuickReservation.tsx
@@ -3,7 +3,7 @@ import type { OptionType } from "common/types/common";
 import { IconAngleDown } from "hds-react";
 import { useTranslation } from "next-i18next";
 import styled from "styled-components";
-import { chunkArray } from "common/src/common/util";
+import { chunkArray, toUIDate } from "common/src/common/util";
 import { fontBold, fontMedium, H4 } from "common/src/common/typography";
 import type { ReservationUnitByPkType } from "common/types/gql-types";
 import { breakpoints } from "common";
@@ -211,27 +211,23 @@ const QuickReservation = ({
   const { setValue, watch, handleSubmit } = reservationForm;
   const formDate = watch("date");
   const dateValue = useMemo(() => new Date(formDate ?? ""), [formDate]);
-  const focusDate = useMemo(
-    () => focusSlot?.start ?? dateValue,
-    [focusSlot, dateValue]
-  );
   const duration =
     watch("duration") ?? reservationUnit?.minReservationDuration ?? 0;
 
   const getPrice = useCallback(
     (asNumeral = false) => {
-      if (reservationUnit == null || focusDate == null || duration == null) {
+      if (reservationUnit == null || dateValue == null || duration == null) {
         return null;
       }
       return getReservationUnitPrice({
         reservationUnit,
-        pricingDate: focusDate,
+        pricingDate: dateValue,
         minutes: duration,
         trailingZeros: true,
         asNumeral,
       });
     },
-    [duration, reservationUnit, focusDate]
+    [duration, reservationUnit, dateValue]
   );
 
   // A map of all available times for the day, chunked into groups of 8
@@ -274,6 +270,7 @@ const QuickReservation = ({
           initialMonth={dateValue ?? new Date()}
           minDate={new Date()}
           maxDate={lastPossibleDate ?? undefined}
+          disableConfirmation={false}
         />
         <StyledSelect
           name="duration"
@@ -353,7 +350,7 @@ const QuickReservation = ({
                       // console.log(nextAvailableTime);
                       const nextTime = getTimeString(nextAvailableTime);
                       nextAvailableTime.setHours(0, 0, 0, 0);
-                      setValue("date", nextAvailableTime.toISOString());
+                      setValue("date", toUIDate(nextAvailableTime));
                       setValue("time", nextTime);
                     }
                   }}

diff --git a/apps/ui/pages/reservation-unit/[id].tsx b/apps/ui/pages/reservation-unit/[id].tsx
@@ -291,8 +291,8 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
         searchDuration: Number.isNaN(Number(duration))
           ? null
           : Number(duration),
-        searchDate: `${date}` ?? null,
-        searchTime: `${time}` ?? null,
+        searchDate: date ? `${date}` : null,
+        searchTime: time ? `${time}` : null,
       },
     };
   }
@@ -456,11 +456,11 @@ const ReservationUnit = ({
   const todaysTimeSpans = reservableTimeSpans.filter(
     (span) => span.startDatetime && isToday(new Date(span.startDatetime))
   );
-  const searchUIDate = fromUIDate(searchDate);
+  const searchUIDate = fromUIDate(searchDate ?? "");
   // TODO: plug in query parameters
   const initialFieldValues = {
     date:
-      searchUIDate && isValidDate(searchUIDate)
+      searchDate && searchUIDate && isValidDate(searchUIDate)
         ? searchDate
         : toUIDate(new Date(todaysTimeSpans[0]?.startDatetime ?? "")),
     duration:
@@ -469,8 +469,9 @@ const ReservationUnit = ({
         ? reservationUnit.minReservationDuration / 60
         : 0),
     time:
-      searchTime ??
-      getTimeString(new Date(todaysTimeSpans[0]?.startDatetime ?? "")),
+      searchTime ?? todaysTimeSpans[0]
+        ? getTimeString(new Date(todaysTimeSpans[0].startDatetime ?? ""))
+        : getTimeString(),
   };
   const reservationForm = useForm<PendingReservationFormType>({
     defaultValues: initialFieldValues,
@@ -485,7 +486,10 @@ const ReservationUnit = ({
       : 0);
   const formDate = watch("date");
   const formUIDate = fromUIDate(formDate ?? "");
-  const focusDate = new Date(formUIDate != null ? formUIDate : new Date());
+  const focusDate = useMemo(
+    () => new Date(formUIDate != null ? formUIDate : new Date()),
+    [formUIDate]
+  );
 
   const timeValue = watch("time") ?? getTimeString();
   const submitReservation = (_data: PendingReservationFormType) => {
@@ -577,11 +581,11 @@ const ReservationUnit = ({
         label: span,
         value: span,
       }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     reservableTimeSpans,
     reservationUnit?.reservationStartInterval,
     now,
+    focusDate,
     durationValue,
     isSlotReservable,
   ]);
@@ -667,20 +671,19 @@ const ReservationUnit = ({
       if (!reservationUnit) {
         return false;
       }
-
-      const newReservation = getNewReservation({
-        start: new Date(start),
-        end: addMinutes(new Date(start), durationValue),
-        reservationUnit,
-      });
-
       if (
         !isSlotReservable(start, end, skipLengthCheck) ||
         isReservationQuotaReached
       ) {
         return false;
       }
 
+      const newReservation = getNewReservation({
+        start: new Date(start),
+        end: addMinutes(new Date(start), durationValue),
+        reservationUnit,
+      });
+
       const newDate = toUIDate(new Date(newReservation.begin));
       const newTime = getTimeString(new Date(newReservation.begin));
       setValue("date", newDate);
@@ -758,17 +761,19 @@ const ReservationUnit = ({
     const existingReservations = filterNonNullable(
       reservationUnit?.reservations
     );
+    const focusEvent = {
+      begin: focusSlot?.start,
+      end: focusSlot?.end,
+      state: "INITIAL",
+    };
+    const shouldDisplayFocusSlot =
+      focusSlot != null &&
+      focusSlot.start != null &&
+      focusSlot.end != null &&
+      isSlotReservable(focusSlot.start, focusSlot.end);
     return [
       ...existingReservations,
-      ...(focusSlot != null
-        ? [
-            {
-              begin: focusSlot.start,
-              end: focusSlot.end,
-              state: "INITIAL",
-            },
-          ]
-        : []),
+      ...(shouldDisplayFocusSlot ? [focusEvent] : []),
     ]
       .filter((n): n is NonNullable<typeof n> => n != null)
       .map((n) => {