Merged in fix/SW-2827-availability-for-old-dates (pull request #2158)

fix: add error handling for hotel room availability

* fix: add error handling for hotel room availability

* fix: update error codes

* fix: have one error message to rule them all. them as in permutations of invalid dates


Approved-by: Linus Flood

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.module.css

@@ -0,0 +1,6 @@
+.errorContainer {
+  margin: 0 auto;
+  padding: var(--Spacing-x-one-and-half) 0;
+  width: 100%;
+  max-width: var(--max-width-page);
+}

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx

@@ -1,7 +1,10 @@
 "use client"
 
+import { useIntl } from "react-intl"
+
 import { trpc } from "@/lib/trpc/client"
 
+import Alert from "@/components/TempDesignSystem/Alert"
 import useLang from "@/hooks/useLang"
 import RatesProvider from "@/providers/RatesProvider"
 
@@ -9,7 +12,10 @@ import RateSummary from "./RateSummary"
 import Rooms from "./Rooms"
 import { RoomsContainerSkeleton } from "./RoomsContainerSkeleton"
 
+import styles from "./index.module.css"
+
 import type { RoomsContainerProps } from "@/types/components/hotelReservation/selectRate/roomsContainer"
+import { AlertTypeEnum } from "@/types/enums/alert"
 
 export function RoomsContainer({
   booking,
@@ -18,25 +24,45 @@ export function RoomsContainer({
   vat,
 }: RoomsContainerProps) {
   const lang = useLang()
+  const intl = useIntl()
 
-  const roomsAvailability = trpc.hotel.availability.selectRate.rooms.useQuery({
-    booking,
-    lang,
-  })
+  const { data, isFetching, isError, error } =
+    trpc.hotel.availability.selectRate.rooms.useQuery(
+      {
+        booking,
+        lang,
+      },
+      {
+        retry(failureCount, error) {
+          if (error.data?.code === "BAD_REQUEST") {
+            return false
+          }
 
-  if (
-    (roomsAvailability.isFetching || !roomsAvailability.data) &&
-    !roomsAvailability.isFetched
-  ) {
+          return failureCount <= 3
+        },
+      }
+    )
+
+  if (isFetching) {
     return <RoomsContainerSkeleton />
   }
 
+  if (isError) {
+    const errorMessage = getErrorMessage(error.data?.zodError?.formErrors, intl)
+
+    return (
+      <div className={styles.errorContainer}>
+        <Alert type={AlertTypeEnum.Alarm} heading={errorMessage} />
+      </div>
+    )
+  }
+
   return (
     <RatesProvider
       booking={booking}
       hotelType={hotelType}
       roomCategories={roomCategories}
-      roomsAvailability={roomsAvailability.data}
+      roomsAvailability={data}
       vat={vat}
     >
       <Rooms />
@@ -44,3 +70,25 @@ export function RoomsContainer({
     </RatesProvider>
   )
 }
+
+function getErrorMessage(
+  formErrors: string[] | undefined,
+  intl: ReturnType<typeof useIntl>
+) {
+  const firstError = formErrors?.at(0)
+
+  switch (firstError) {
+    case "FROMDATE_INVALID":
+    case "TODATE_INVALID":
+    case "TODATE_MUST_BE_AFTER_FROMDATE":
+    case "FROMDATE_CANNOT_BE_IN_THE_PAST": {
+      return intl.formatMessage({
+        defaultMessage: "Invalid dates",
+      })
+    }
+    default:
+      return intl.formatMessage({
+        defaultMessage: "Something went wrong",
+      })
+  }
+}