feat(SW-664): Hotel listing component and queries for content pages

2024-12-11 14:46:38 +01:00
parent 118f1afafa
commit 3939bf7cdc
32 changed files with 989 additions and 140 deletions
--- a/components/Blocks/HotelListing/HotelListingItem/hotelListingItem.module.css
+++ b/components/Blocks/HotelListing/HotelListingItem/hotelListingItem.module.css
@@ -0,0 +1,49 @@
+.container {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Medium);
+  overflow: hidden;
+}
+
+.image {
+  width: 100%;
+  max-height: 200px;
+  object-fit: cover;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x2) var(--Spacing-x3);
+}
+
+.intro {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+}
+
+.dividerContainer {
+  padding: 0 var(--Spacing-x1);
+}
+
+.captions {
+  display: flex;
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    display: grid;
+    grid-template-columns: minmax(250px, 350px) auto;
+  }
+
+  .image {
+    max-height: none;
+    height: 100%;
+  }
+
+  .button {
+    width: min(100%, 200px);
+  }
+}
--- a/components/Blocks/HotelListing/HotelListingItem/index.tsx
+++ b/components/Blocks/HotelListing/HotelListingItem/index.tsx
@@ -0,0 +1,81 @@
+import HotelLogo from "@/components/Icons/Logos"
+import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+import getSingleDecimal from "@/utils/numberFormatting"
+
+import { getTypeSpecificInformation } from "./utils"
+
+import styles from "./hotelListingItem.module.css"
+
+import type { HotelListingItemProps } from "@/types/components/contentPage/hotelListingItem"
+
+export default async function HotelListingItem({
+  hotel,
+  contentType = "hotel",
+  url,
+}: HotelListingItemProps) {
+  const intl = await getIntl()
+  const { description, imageSrc, altText } = getTypeSpecificInformation(
+    contentType,
+    hotel
+  )
+
+  return (
+    <article className={styles.container}>
+      <Image
+        src={imageSrc}
+        alt={altText}
+        width={300}
+        height={200}
+        className={styles.image}
+      />
+      <section className={styles.content}>
+        <div className={styles.intro}>
+          <HotelLogo hotelId={hotel.operaId} hotelType={hotel.hotelType} />
+          <Subtitle asChild>
+            <Title as="h3">{hotel.name}</Title>
+          </Subtitle>
+          <div className={styles.captions}>
+            <Caption color="uiTextPlaceholder">
+              {hotel.address.streetAddress}
+            </Caption>
+            <div className={styles.dividerContainer}>
+              <Divider variant="vertical" color="beige" />
+            </div>
+            <Caption color="uiTextPlaceholder">
+              {intl.formatMessage(
+                { id: "Distance in km to city centre" },
+                {
+                  number: getSingleDecimal(
+                    hotel.location.distanceToCentre / 1000
+                  ),
+                }
+              )}
+            </Caption>
+          </div>
+        </div>
+        <Body>{description}</Body>
+        {url && (
+          <Button
+            intent="primary"
+            theme="base"
+            size="small"
+            className={styles.button}
+            asChild
+          >
+            <Link href={url} color="white">
+              {intl.formatMessage({ id: "See hotel details" })}
+            </Link>
+          </Button>
+        )}
+      </section>
+    </article>
+  )
+}
--- a/components/Blocks/HotelListing/HotelListingItem/utils.ts
+++ b/components/Blocks/HotelListing/HotelListingItem/utils.ts
@@ -0,0 +1,36 @@
+import type { Hotel } from "@/types/hotel"
+import type { HotelListing } from "@/types/trpc/routers/contentstack/blocks"
+
+export function getTypeSpecificInformation(
+  contentType: HotelListing["contentType"],
+  hotel: Hotel
+) {
+  const { restaurantsOverviewPage, images } = hotel.hotelContent
+  const { descriptions, meetingDescription } = hotel.hotelContent.texts
+  const hotelData = {
+    description: descriptions.short,
+    imageSrc: images.imageSizes.small,
+    altText: images.metaData.altText,
+  }
+  switch (contentType) {
+    case "meeting":
+      const meetingImage = hotel.conferencesAndMeetings?.heroImages[0]
+      return {
+        description: meetingDescription?.short || hotelData.description,
+        imageSrc: meetingImage?.imageSizes.small || hotelData.imageSrc,
+        altText: meetingImage?.metaData.altText || hotelData.altText,
+      }
+    case "restaurant":
+      const restaurantImage = hotel.restaurantImages?.heroImages[0]
+      return {
+        description:
+          restaurantsOverviewPage.restaurantsContentDescriptionShort ||
+          hotelData.description,
+        imageSrc: restaurantImage?.imageSizes.small || hotelData.imageSrc,
+        altText: restaurantImage?.metaData.altText || hotelData.altText,
+      }
+    case "hotel":
+    default:
+      return hotelData
+  }
+}