fix: remove time format copy pasta

Refs: TILA-3444

Author: joonatank

apps/ui/components/calendar/ReservationCalendarControls.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation, type TFunction } from "next-i18next";
 import styled from "styled-components";
 import { Button, IconAngleDown, IconAngleUp, IconCross } from "hds-react";
-import { maxBy, trim } from "lodash";
-import { fromUIDate, toUIDate } from "common/src/common/util";
+import { maxBy } from "lodash";
+import { fromUIDate } from "common/src/common/util";
 import { Transition } from "react-transition-group";
 import {
   fontBold,
@@ -13,11 +13,12 @@ import {
 import { breakpoints } from "common/src/common/style";
 import type { ReservationUnitPageQuery } from "@gql/gql-types";
 import { truncatedText } from "@/styles/util";
+import { getReservationUnitPrice } from "@/modules/reservationUnit";
 import {
-  getReservationUnitPrice,
-  getTimeString,
-} from "@/modules/reservationUnit";
-import { capitalize, getSelectedOption } from "@/modules/util";
+  capitalize,
+  formatDateTimeRange,
+  getSelectedOption,
+} from "@/modules/util";
 import type {
   Control,
   FieldValues,
@@ -285,19 +286,13 @@ const ReservationCalendarControls = ({
 }: Props): JSX.Element => {
   const { t } = useTranslation();
   const { control, watch, handleSubmit } = reservationForm;
-  const { start, end } = focusSlot ?? {};
   const formDate = watch("date");
   const formDuration = watch("duration");
   const date = new Date(formDate ?? "");
   const dateValue = useMemo(() => fromUIDate(formDate ?? ""), [formDate]);
-  const focusDate = useMemo(
-    () => focusSlot?.start ?? dateValue,
-    [focusSlot, dateValue]
-  );
   const duration = !Number.isNaN(Number(formDuration))
     ? Number(formDuration)
     : reservationUnit.minReservationDuration ?? 0;
-  const time = watch("time") ?? getTimeString(focusDate);
   const [areControlsVisible, setAreControlsVisible] = useState(false);
 
   useEffect(() => {
@@ -306,28 +301,9 @@ const ReservationCalendarControls = ({
     }
   }, [setShouldCalendarControlsBeVisible, shouldCalendarControlsBeVisible]);
 
-  const startDate = t("common:dateWithWeekday", {
-    date: start && toUIDate(start),
-  });
-
-  const startTime = t("common:timeInForm", {
-    date: time,
-  });
-
-  const endDate = t("common:dateWithWeekday", {
-    date: end && toUIDate(end),
-  });
-
-  const endTime = t("common:timeInForm", {
-    date: end && getTimeString(end),
-  });
-
   const togglerLabel = (() => {
-    const dateStr = trim(
-      `${capitalize(startDate)} ${startTime}${
-        endDate !== startDate ? ` - ${capitalize(endDate)} ` : "-"
-      }${endTime}`,
-      "-"
+    const dateStr = capitalize(
+      formatDateTimeRange(t, focusSlot.start, focusSlot.end)
     );
     const durationStr =
       duration != null

apps/ui/pages/reservations/[id]/index.tsx

@@ -3,7 +3,7 @@ import type { GetServerSidePropsContext } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import styled from "styled-components";
 import router from "next/router";
-import { capitalize, isFinite, trim } from "lodash";
+import { capitalize } from "lodash";
 import {
   IconArrowRight,
   IconCalendar,
@@ -29,7 +29,11 @@ import { Container } from "common";
 import { useOrder } from "@/hooks/reservation";
 import { reservationUnitPath } from "@/modules/const";
 import { createApolloClient } from "@/modules/apolloClient";
-import { getTranslation, reservationsUrl } from "@/modules/util";
+import {
+  formatDateTimeRange,
+  getTranslation,
+  reservationsUrl,
+} from "@/modules/util";
 import { BlackButton } from "@/styles/util";
 import { CenterSpinner } from "@/components/common/common";
 import Sanitize from "@/components/common/Sanitize";
@@ -57,7 +61,6 @@ import {
   getGenericTerms,
 } from "@/modules/serverUtils";
 import { base64encode, filterNonNullable } from "common/src/helpers";
-import { fromApiDate } from "common/src/common/util";
 import { containsField, containsNameField } from "common/src/metaFieldsHelpers";
 
 type Props = Awaited<ReturnType<typeof getServerSideProps>>["props"];
@@ -74,7 +77,7 @@ export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const commonProps = getCommonServerSideProps();
   const apolloClient = createApolloClient(commonProps.apiBaseUrl, ctx);
 
-  if (isFinite(pk)) {
+  if (Number.isFinite(pk)) {
     const bookingTerms = await getGenericTerms(apolloClient);
 
     // NOTE errors will fallback to 404
@@ -493,21 +496,8 @@ function Reservation({
   }
 
   const { begin, end } = reservation;
-
-  const beginDate = t("common:dateWithWeekday", { date: fromApiDate(begin) });
-  const beginTime = t("common:timeWithPrefixInForm", {
-    date: fromApiDate(begin),
-  });
-  const endDate = t("common:dateWithWeekday", { date: fromApiDate(end) });
-  const endTime = t("common:timeInForm", { date: fromApiDate(end) });
-
   const timeString = capitalize(
-    trim(
-      `${beginDate} ${beginTime}-${
-        endDate !== beginDate ? endDate : ""
-      }${endTime}`,
-      " - "
-    )
+    formatDateTimeRange(t, new Date(begin), new Date(end))
   );
 
   const supportedFields = filterNonNullable(