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} />