refactor(SW-96): use images from API & reduce data returned in getHotel

components/ContentType/HotelPage/PreviewImages/index.tsx

@@ -11,11 +11,11 @@ export default async function PreviewImages({ images }: PreviewImagesProps) {
   const intl = await getIntl()
   return (
     <Lightbox images={images}>
-      {/*TODO: Replace with images from API once SW-188 is merged. */}
       <div className={styles.mobileWrapper}>
         <Image
           src={images[0].url}
           alt={images[0].alt}
+          title={images[0].title}
           width={752}
           height={540}
           objectFit="cover"
@@ -37,6 +37,7 @@ export default async function PreviewImages({ images }: PreviewImagesProps) {
             key={index}
             src={image.url}
             alt={image.alt}
+            title={image.title}
             width={index === 0 ? 752 : 292}
             height={index === 0 ? 540 : 266}
             objectFit="cover"

components/ContentType/HotelPage/data.ts

@@ -22,44 +22,3 @@ export function mapFacilityToIcon(facilityName: string): FC<IconProps> | null {
   const iconName = facilityToIconMap[facilityName]
   return getIconByIconName(iconName) || null
 }
-
-/**
- * NOTE:
- * Images from the test API are hosted on test3.scandichotels.com,
- * which can't be accessed unless on Scandic's Wifi or using Citrix.
- * So I've added some placeholder images here for use when running the app locally.
- */
-export const tempHotelLightboxImage: ImageItem[] = [
-  {
-    url: "https://www.scandichotels.com/imagevault/publishedmedia/kd4e35n41mrqinfrkzok/scandic-continental-entrance-vasagatan.jpg",
-    alt: "Hotel entrance",
-  },
-  {
-    url: "https://www.scandichotels.com/imageVault/publishedmedia/ip4a2rc93qda3aq9ph73/scandic-continental-room-standard.jpg",
-    alt: "Standard room",
-  },
-  {
-    url: "https://www.scandichotels.com/imageVault/publishedmedia/75y2b2x8uvma4s7zvy50/scandic-continental-room-juniorsuite-detail-1.jpg",
-    alt: "Junior suite",
-  },
-  {
-    url: "https://www.scandichotels.com/imageVault/publishedmedia/pwotq99pbr68djxnym4a/scandic-continental-diningroom-themarket.jpg",
-    alt: "Dining room, The Market",
-  },
-  {
-    url: "https://www.scandichotels.com/imageVault/publishedmedia/yc2cjoxq2j01gp0f80gt/scandic-continental-room-juniorsuite-bathroom-1.jpg",
-    alt: "Junior suite bathroom",
-  },
-  {
-    url: "https://www.scandichotels.com/imageVault/publishedmedia/xocam1f69h7lh57u8f9v/scandic-continental-themarket-detail.jpg",
-    alt: "The Market detail",
-  },
-  {
-    url: "https://www.scandichotels.com/imageVault/publishedmedia/0nnwt72vwzfvkkx5whf0/scandic-continental-caldo.jpg",
-    alt: "Caldo",
-  },
-  {
-    url: "https://www.scandichotels.com/imageVault/publishedmedia/mg9bbtbumfxbfjhovk2e/Scandic_Continental_Capitol_The_View_6.jpg",
-    alt: "Rooftop bar",
-  },
-]

components/ContentType/HotelPage/index.tsx

@@ -4,7 +4,6 @@ import { MOCK_FACILITIES } from "./Facilities/mockData"
 import Facilities from "./Facilities"
 
 import AmenitiesList from "./AmenitiesList"
-import { tempHotelLightboxImage } from "./data"
 import IntroSection from "./IntroSection"
 import PreviewImages from "./PreviewImages"
 import { Rooms } from "./Rooms"
@@ -20,23 +19,32 @@ export default async function HotelPage() {
   if (!hotelData) {
     return null
   }
-  const { hotel, roomCategories } = hotelData
+  const {
+    hotelName,
+    hotelDescription,
+    hotelLocation,
+    hotelAddress,
+    hotelRatings,
+    hotelDetailedFacilities,
+    hotelImages,
+    roomCategories,
+  } = hotelData
 
   return (
     <div className={styles.pageContainer}>
-      <PreviewImages images={tempHotelLightboxImage} />
+      <PreviewImages images={hotelImages} />
       <TabNavigation />
       <main className={styles.mainSection}>
         <div className={styles.introContainer}>
           <IntroSection
-            hotelName={hotel.name}
-            hotelDescription={hotel.hotelContent.texts.descriptions.short}
-            location={hotel.location}
-            address={hotel.address}
-            tripAdvisor={hotel.ratings?.tripAdvisor}
+            hotelName={hotelName}
+            hotelDescription={hotelDescription}
+            location={hotelLocation}
+            address={hotelAddress}
+            tripAdvisor={hotelRatings?.tripAdvisor}
           />
           <SidePeeks />
-          <AmenitiesList detailedFacilities={hotel.detailedFacilities} />
+          <AmenitiesList detailedFacilities={hotelDetailedFacilities} />
         </div>
         <Rooms rooms={roomCategories} />
         <Facilities facilities={MOCK_FACILITIES} />

components/Lightbox/FullView.tsx

@@ -61,7 +61,7 @@ export default function FullView({
             />
 
             <div className={styles.fullViewFooter}>
-              <Body color="white">{image.alt}</Body>
+              <Body color="white">{image.title}</Body>
             </div>
           </motion.div>
         </AnimatePresence>

components/Lightbox/Gallery.tsx

@@ -56,7 +56,7 @@ export default function Gallery({
       <div className={styles.desktopGallery}>
         <div className={styles.galleryHeader}>
           <div className={styles.imageCaption}>
-            <Caption color="textMediumContrast">{mainImage.alt}</Caption>
+            <Caption color="textMediumContrast">{mainImage.title}</Caption>
           </div>
         </div>
         <div className={styles.mainImageWrapper}>

components/Lightbox/Lightbox.module.css

@@ -5,7 +5,6 @@
 .mobileGallery {
   margin-top: 70.047px;
   height: 100%;
-  overflow-y: auto;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -51,6 +50,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  overflow-y: auto;
 }
 
 .galleryHeader {
@@ -60,6 +60,10 @@
   margin-bottom: var(--Spacing-x1);
 }
 
+.desktopGalleryCloseButton {
+  display: none;
+}
+
 .imageCaption {
   background-color: var(--Base-Surface-Subtle-Normal);
   padding: var(--Spacing-x-half) var(--Spacing-x1);
@@ -187,6 +191,7 @@
   }
 
   .desktopGalleryCloseButton {
+    display: block;
     position: absolute;
     top: var(--Spacing-x-one-and-half);
     right: var(--Spacing-x-half);

server/routers/hotels/query.ts

@@ -13,6 +13,7 @@ import {
   publicProcedure,
   router,
 } from "@/server/trpc"
+import { extractHotelImages } from "@/server/routers/utils/hotels"
 import { toApiLang } from "@/server/utils"
 
 import {
@@ -153,6 +154,10 @@ export const hotelQueryRouter = router({
 
       const included = validatedHotelData.data.included || []
 
+      const hotelAttributes = validatedHotelData.data.data.attributes
+
+      const images = extractHotelImages(hotelAttributes)
+
       const roomCategories = included
         ? included
             .filter((item) => item.type === "roomcategories")
@@ -193,8 +198,14 @@ export const hotelQueryRouter = router({
         })
       )
       return {
-        hotel: validatedHotelData.data.data.attributes,
-        roomCategories: roomCategories,
+        hotelName: hotelAttributes.name,
+        hotelDescription: hotelAttributes.hotelContent.texts.descriptions.short,
+        hotelLocation: hotelAttributes.location,
+        hotelAddress: hotelAttributes.address,
+        hotelRatings: hotelAttributes.ratings,
+        hotelDetailedFacilities: hotelAttributes.detailedFacilities,
+        hotelImages: images,
+        roomCategories,
       }
     }),
   rates: router({

server/routers/utils/hotels.ts

@@ -0,0 +1,30 @@
+import { ImageItem } from "@/types/components/lightbox/lightbox"
+import { Hotel } from "@/types/hotel"
+
+export function extractHotelImages(hotelData: Hotel): ImageItem[] {
+  const images: ImageItem[] = []
+
+  if (hotelData.hotelContent?.images) {
+    images.push({
+      url: hotelData.hotelContent.images.imageSizes.large,
+      alt: hotelData.hotelContent.images.metaData.altText,
+      title:
+        hotelData.hotelContent.images.metaData.title ||
+        hotelData.hotelContent.images.metaData.altText,
+    })
+  }
+
+  if (hotelData.healthFacilities) {
+    hotelData.healthFacilities.forEach((facility: any) => {
+      facility.content.images.forEach((image: any) => {
+        images.push({
+          url: image.imageSizes.large,
+          alt: image.metaData.altText,
+          title: image.metaData.title || image.metaData.altText,
+        })
+      })
+    })
+  }
+
+  return images
+}

types/components/lightbox/lightbox.ts

@@ -1,6 +1,7 @@
 export interface ImageItem {
   url: string
   alt: string
+  title: string
 }
 
 export interface LightboxProps {