fix: alv change

refactor: price utilities

Author: joonatank

apps/admin-ui/src/component/reservations/requested/util.ts

@@ -38,7 +38,6 @@ export function reservationPrice(
   return getReservationPrice(
     reservation.price,
     t("RequestedReservation.noPrice"),
-    "fi",
     true
   );
 }
@@ -95,17 +94,17 @@ export function getReservationPriceDetails(
   const taxP = parseFloat(pricing.taxPercentage?.value ?? "");
   const taxPercentage = Number.isNaN(taxP) ? 0 : taxP;
   return priceUnit === PriceUnit.Fixed
-    ? getReservationPrice(maxPrice, t("RequestedReservation.noPrice"))
+    ? getReservationPrice(maxPrice, t("RequestedReservation.noPrice"), false)
     : t("RequestedReservation.ApproveDialog.priceBreakdown", {
         volume: formatters.strippedDecimal.format(volume),
         units: t(`RequestedReservation.ApproveDialog.priceUnits.${priceUnit}`),
         vatPercent: formatters.whole.format(taxPercentage),
         unit: t(`RequestedReservation.ApproveDialog.priceUnit.${priceUnit}`),
-        unitPrice: getReservationPrice(maxPrice, ""),
+        unitPrice: getReservationPrice(maxPrice, "", false),
         price: getReservationPrice(
           String(volume * parseFloat(maxPrice)),
           t("RequestedReservation.noPrice"),
-          "fi"
+          false
         ),
       });
 }

apps/ui/components/calendar/ReservationCalendarControls.tsx

@@ -257,7 +257,7 @@ function TogglerLabelContent({
   areControlsVisible: boolean;
   togglerLabel: string;
   t: TFunction;
-  price?: string;
+  price: string | null;
 }) {
   if (areControlsVisible) {
     return <div>&nbsp;</div>;
@@ -287,7 +287,6 @@ function ReservationCalendarControls({
   const { control, watch, handleSubmit, setValue } = reservationForm;
   const formDate = watch("date");
   const formDuration = watch("duration");
-  const date = new Date(formDate ?? "");
   const dateValue = useMemo(() => fromUIDate(formDate ?? ""), [formDate]);
   const duration = !Number.isNaN(Number(formDuration))
     ? Number(formDuration)
@@ -306,14 +305,14 @@ function ReservationCalendarControls({
   })();
 
   const price =
-    date != null && duration != null
+    dateValue != null && duration != null
       ? getReservationUnitPrice({
           reservationUnit,
-          pricingDate: date,
+          pricingDate: dateValue,
           minutes: duration,
           trailingZeros: true,
         })
-      : undefined;
+      : null;
 
   const lastOpeningDate = maxBy(
     reservationUnit.reservableTimeSpans,

apps/ui/components/reservation-unit/Head.tsx

@@ -18,9 +18,10 @@ import IconWithText from "../common/IconWithText";
 import { Images } from "./Images";
 import {
   getActivePricing,
-  getPrice,
+  getPriceString,
   getReservationUnitName,
   getUnitName,
+  isReservationUnitPaid,
 } from "@/modules/reservationUnit";
 import BreadcrumbWrapper from "../common/BreadcrumbWrapper";
 import { isReservationStartInFuture } from "@/modules/reservation";
@@ -154,14 +155,10 @@ function Head({
   const maxReservationDuration = formatDuration(maxDur / 60, t, true);
 
   const pricing = getActivePricing(reservationUnit);
-  const unitPrice = pricing ? getPrice({ pricing }) : undefined;
+  const unitPrice = pricing ? getPriceString({ pricing }) : undefined;
 
-  const unitPriceSuffix =
-    pricing &&
-    getPrice({ pricing, asNumeral: true }) !== "0" &&
-    subventionSuffix != null
-      ? subventionSuffix
-      : undefined;
+  const isPaid = isReservationUnitPaid(reservationUnit.pricings);
+  const hasSubventionSuffix = pricing && isPaid && subventionSuffix != null;
 
   const reservationUnitName = getReservationUnitName(reservationUnit);
 
@@ -241,7 +238,7 @@ function Head({
                     text={
                       <>
                         {unitPrice}
-                        {unitPriceSuffix}
+                        {hasSubventionSuffix ? subventionSuffix : null}
                       </>
                     }
                   />
@@ -252,7 +249,7 @@ function Head({
               )}
             </div>
             <Images
-              images={orderImages(reservationUnit.images ?? [])}
+              images={orderImages(reservationUnit.images)}
               contextName={reservationUnitName}
             />
           </RightContainer>

apps/ui/components/reservation-unit/QuickReservation.tsx

@@ -6,7 +6,10 @@ import { chunkArray, fromUIDate, toUIDate } from "common/src/common/util";
 import { fontBold, fontMedium, H4 } from "common/src/common/typography";
 import type { ReservationUnitPageQuery } from "@gql/gql-types";
 import { breakpoints } from "common";
-import { getReservationUnitPrice } from "@/modules/reservationUnit";
+import {
+  getReservationUnitPrice,
+  isReservationUnitPaid,
+} from "@/modules/reservationUnit";
 import Carousel from "../Carousel";
 import { getLastPossibleReservationDate } from "@/components/reservation-unit/utils";
 import type { FocusTimeSlot } from "@/components/calendar/ReservationCalendarControls";
@@ -172,22 +175,23 @@ function QuickReservation({
   const dateValue = useMemo(() => fromUIDate(formDate ?? ""), [formDate]);
   const duration = watch("duration");
 
-  const getPrice = useCallback(
-    (asNumeral = false) => {
-      if (reservationUnit == null || dateValue == null || duration == null) {
-        return null;
-      }
-      return getReservationUnitPrice({
-        reservationUnit,
-        pricingDate: dateValue,
-        minutes: duration,
-        trailingZeros: true,
-        asNumeral,
-      });
-    },
-    [duration, reservationUnit, dateValue]
+  const isFreeOfCharge = !isReservationUnitPaid(
+    reservationUnit?.pricings ?? [],
+    dateValue ?? new Date()
   );
 
+  const getPrice = useCallback(() => {
+    if (reservationUnit == null || dateValue == null || duration == null) {
+      return null;
+    }
+    return getReservationUnitPrice({
+      reservationUnit,
+      pricingDate: dateValue,
+      minutes: duration,
+      trailingZeros: true,
+    });
+  }, [duration, reservationUnit, dateValue]);
+
   // A map of all available times for the day, chunked into groups of 8
   const timeChunks: string[][] = useMemo(() => {
     const itemsPerChunk = 8;
@@ -302,7 +306,7 @@ function QuickReservation({
             <>
               {t("reservationUnit:price")}:{" "}
               <PriceValue>{getPrice()}</PriceValue>
-              {getPrice(true) !== "0" && subventionSuffix}
+              {!isFreeOfCharge && subventionSuffix}
             </>
           )}
         </Price>

apps/ui/components/reservation-unit/RelatedUnits.tsx

@@ -14,7 +14,7 @@ import IconWithText from "../common/IconWithText";
 import Carousel from "../Carousel";
 import {
   getActivePricing,
-  getPrice,
+  getPriceString,
   getReservationUnitName,
   getUnitName,
 } from "@/modules/reservationUnit";
@@ -126,7 +126,8 @@ function RelatedUnits({ units }: PropsType): JSX.Element | null {
         {units.map((unit) => {
           const name = getReservationUnitName(unit);
           const pricing = getActivePricing(unit);
-          const unitPrice = pricing != null ? getPrice({ pricing }) : undefined;
+          const unitPrice =
+            pricing != null ? getPriceString({ pricing }) : undefined;
           const reservationUnitTypeName =
             unit.reservationUnitType != null
               ? getTranslation(unit.reservationUnitType, "name")

apps/ui/components/reservation/EditStep0.tsx

@@ -37,6 +37,7 @@ import {
   getPossibleTimesForDay,
   getReservationUnitPrice,
   getTimeString,
+  isReservationUnitPaid,
 } from "@/modules/reservationUnit";
 import { formatDuration, isTouchDevice } from "@/modules/util";
 import { BlackButton, MediumButton } from "@/styles/util";
@@ -280,22 +281,14 @@ export function EditStep0({
     reservationUnit?.bufferTimeBefore,
   ]);
 
-  const isSlotFree = useCallback(
-    (start: Date): boolean => {
-      const price = getReservationUnitPrice({
-        reservationUnit,
-        pricingDate: start,
-        asNumeral: true,
-      });
-      return price === "0";
-    },
-    [reservationUnit]
-  );
-
   const slotPropGetter = useMemo(() => {
     if (!reservationUnit) {
       return undefined;
     }
+    const isSlotFree = (start: Date): boolean => {
+      return isReservationUnitPaid(reservationUnit.pricings, start);
+    };
+
     return getSlotPropGetter({
       reservableTimes,
       activeApplicationRounds,
@@ -307,9 +300,9 @@ export function EditStep0({
         : undefined,
       reservationsMinDaysBefore: reservationUnit.reservationsMinDaysBefore ?? 0,
       reservationsMaxDaysBefore: reservationUnit.reservationsMaxDaysBefore ?? 0,
-      customValidation: (date) => isSlotFree(date),
+      customValidation: isSlotFree,
     });
-  }, [activeApplicationRounds, reservationUnit, isSlotFree, reservableTimes]);
+  }, [activeApplicationRounds, reservationUnit, reservableTimes]);
 
   // TODO submit should be completely unnecessary
   // just disable nextStep button if the form is invalid
@@ -318,15 +311,18 @@ export function EditStep0({
     if (!focusSlot?.start || !focusSlot?.end) {
       return;
     }
+    const { start } = focusSlot;
+    const isFree = isReservationUnitPaid(reservationUnit.pricings, start);
     const newReservation: PendingReservation = {
       begin: focusSlot.start.toISOString(),
       end: focusSlot.end.toISOString(),
-      price: getReservationUnitPrice({
-        reservationUnit,
-        pricingDate: focusSlot?.start ? new Date(focusSlot.start) : undefined,
-        minutes: 0,
-        asNumeral: true,
-      }),
+      price: isFree
+        ? "0"
+        : (getReservationUnitPrice({
+            reservationUnit,
+            pricingDate: focusSlot.start,
+            minutes: 0,
+          }) ?? undefined),
     };
 
     const resUnit = getWithoutThisReservation(reservationUnit, reservation);

apps/ui/components/reservation/ReservationCard.tsx

@@ -210,11 +210,12 @@ function ReservationCard({ reservation, type }: PropsT): JSX.Element {
             new Date(reservation.end),
             new Date(reservation.begin)
           ),
-          trailingZeros: true,
+          trailingZeros: false,
         })
       : getReservationPrice(
           reservation.price ?? undefined,
           t("prices:priceFree"),
+          false,
           i18n.language
         );
 

apps/ui/components/reservation/ReservationInfoCard.tsx

@@ -7,8 +7,14 @@ import styled from "styled-components";
 import { getReservationPrice, formatters as getFormatters } from "common";
 import { breakpoints } from "common/src/common/style";
 import { H4, Strong } from "common/src/common/typography";
-import type { ReservationInfoCardFragment } from "@gql/gql-types";
-import { getReservationUnitPrice } from "@/modules/reservationUnit";
+import {
+  ReservationStateChoice,
+  type ReservationInfoCardFragment,
+} from "@gql/gql-types";
+import {
+  getReservationUnitPrice,
+  isReservationUnitPaid,
+} from "@/modules/reservationUnit";
 import {
   capitalize,
   formatDuration,
@@ -127,7 +133,7 @@ export function ReservationInfoCard({
     return null;
   }
 
-  const price: string | undefined =
+  const price: string | null =
     begin &&
     (reservation?.state === "REQUIRES_HANDLING" ||
       shouldDisplayReservationUnitPrice)
@@ -140,18 +146,13 @@ export function ReservationInfoCard({
       : getReservationPrice(
           reservation?.price,
           t("prices:priceFree"),
-          i18n.language,
-          true
+          true,
+          i18n.language
         );
 
   const shouldDisplayTaxPercentage: boolean =
-    reservation.state === "REQUIRES_HANDLING" && begin
-      ? getReservationUnitPrice({
-          reservationUnit,
-          pricingDate: new Date(begin),
-          minutes: 0,
-          asNumeral: true,
-        }) !== "0"
+    reservation.state === ReservationStateChoice.RequiresHandling && begin
+      ? isReservationUnitPaid(reservationUnit.pricings, new Date(begin))
       : Number(reservation?.price) > 0;
 
   const name = getTranslation(reservationUnit, "name");

apps/ui/components/search/SingleSearchReservationUnitCard.tsx

@@ -17,7 +17,7 @@ import IconWithText from "../common/IconWithText";
 import { truncatedText } from "@/styles/util";
 import {
   getActivePricing,
-  getPrice,
+  getPriceString,
   getReservationUnitName,
   getUnitName,
 } from "@/modules/reservationUnit";
@@ -263,7 +263,7 @@ function ReservationUnitCard({ reservationUnit }: PropsT): JSX.Element {
   const unitName = getUnitName(reservationUnit.unit ?? undefined);
 
   const pricing = getActivePricing(reservationUnit);
-  const unitPrice = pricing != null ? getPrice({ pricing }) : undefined;
+  const unitPrice = pricing != null ? getPriceString({ pricing }) : undefined;
 
   const reservationUnitTypeName =
     reservationUnit.reservationUnitType != null