fix(SW-1143): Added loading/skeleton to select hotel

2024-12-09 20:21:16 +01:00
parent 463354f10b
commit d4e4c4a0d0
7 changed files with 341 additions and 143 deletions
--- a/components/HotelReservation/SelectHotel/index.tsx
+++ b/components/HotelReservation/SelectHotel/index.tsx
@@ -0,0 +1,154 @@
+import {
+  selectHotel,
+  selectHotelMap,
+} from "@/constants/routes/hotelReservation"
+
+import {
+  fetchAvailableHotels,
+  getFiltersFromHotels,
+} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
+import { ChevronRightIcon } from "@/components/Icons"
+import StaticMap from "@/components/Maps/StaticMap"
+import Alert from "@/components/TempDesignSystem/Alert"
+import Breadcrumbs from "@/components/TempDesignSystem/Breadcrumbs"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { getIntl } from "@/i18n"
+
+import HotelCardListing from "../HotelCardListing"
+import HotelCount from "./HotelCount"
+import HotelFilter from "./HotelFilter"
+import HotelSorter from "./HotelSorter"
+import MobileMapButtonContainer from "./MobileMapButtonContainer"
+
+import styles from "./selectHotel.module.css"
+
+import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import type { SelectHotelProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+import { AlertTypeEnum } from "@/types/enums/alert"
+
+export default async function SelectHotel({
+  city,
+  params,
+  reservationParams,
+}: SelectHotelProps) {
+  const { selectHotelParams, searchParams, adultsParams, childrenParams } =
+    reservationParams
+
+  const intl = await getIntl()
+
+  const hotels = await fetchAvailableHotels({
+    cityId: city.id,
+    roomStayStartDate: searchParams.fromDate,
+    roomStayEndDate: searchParams.toDate,
+    adults: adultsParams,
+    children: childrenParams?.toString(),
+  })
+
+  const isCityWithCountry = (city: any): city is { country: string } =>
+    "country" in city
+
+  const validHotels = hotels.filter(
+    (hotel): hotel is HotelData => hotel !== null
+  )
+
+  const filterList = getFiltersFromHotels(validHotels)
+  const breadcrumbs = [
+    {
+      title: intl.formatMessage({ id: "Home" }),
+      href: `/${params.lang}`,
+      uid: "home-page",
+    },
+    {
+      title: intl.formatMessage({ id: "Hotel reservation" }),
+      href: `/${params.lang}/hotelreservation`,
+      uid: "hotel-reservation",
+    },
+    {
+      title: intl.formatMessage({ id: "Select hotel" }),
+      href: `${selectHotel(params.lang)}/?${selectHotelParams}`,
+      uid: "select-hotel",
+    },
+    {
+      title: city.name,
+      uid: city.id,
+    },
+  ]
+
+  const isAllUnavailable = hotels.every((hotel) => hotel.price === undefined)
+
+  return (
+    <>
+      <header className={styles.header}>
+        <Breadcrumbs breadcrumbs={breadcrumbs} />
+        <div className={styles.title}>
+          <div className={styles.cityInformation}>
+            <Subtitle>{city.name}</Subtitle>
+            <HotelCount />
+          </div>
+          <div className={styles.sorter}>
+            <HotelSorter discreet />
+          </div>
+        </div>
+        <MobileMapButtonContainer filters={filterList} />
+      </header>
+      <main className={styles.main}>
+        <div className={styles.sideBar}>
+          {hotels.length > 0 ? ( // TODO: Temp fix until API returns hotels that are not available
+            <Link
+              className={styles.link}
+              color="burgundy"
+              href={selectHotelMap(params.lang)}
+              keepSearchParams
+            >
+              <div className={styles.mapContainer}>
+                <StaticMap
+                  city={searchParams.city}
+                  country={isCityWithCountry(city) ? city.country : undefined}
+                  width={340}
+                  height={180}
+                  zoomLevel={11}
+                  mapType="roadmap"
+                  altText={`Map of ${searchParams.city} city center`}
+                />
+                <Button wrapping size="medium" intent="text" theme="base">
+                  {intl.formatMessage({ id: "See map" })}
+                  <ChevronRightIcon
+                    color="baseButtonTextOnFillNormal"
+                    width={20}
+                    height={20}
+                  />
+                </Button>
+              </div>
+            </Link>
+          ) : (
+            <div className={styles.mapContainer}>
+              <StaticMap
+                city={searchParams.city}
+                width={340}
+                height={180}
+                zoomLevel={11}
+                mapType="roadmap"
+                altText={`Map of ${searchParams.city} city center`}
+              />
+            </div>
+          )}
+          <HotelFilter filters={filterList} className={styles.filter} />
+        </div>
+        <div className={styles.hotelList}>
+          {isAllUnavailable && (
+            <Alert
+              type={AlertTypeEnum.Info}
+              heading={intl.formatMessage({ id: "No availability" })}
+              text={intl.formatMessage({
+                id: "There are no rooms available that match your request.",
+              })}
+            />
+          )}
+          <HotelCardListing hotelData={validHotels} />
+        </div>
+      </main>
+    </>
+  )
+}