feat(SW-302): switch out mock data for facility cards

components/ContentType/HotelPage/Facilities/CardGrid/cardGrid.module.css

@@ -1,13 +1,13 @@
-.one {
+.spanOne {
   grid-column: span 1;
 }
 
-.two {
+.spanTwo {
   grid-column: span 2;
 }
 
-.three {
-  grid-column: 1/-1;
+.spanThree {
+  grid-column: span 3;
 }
 
 .desktopGrid {
@@ -23,6 +23,8 @@
   .desktopGrid {
     display: grid;
     gap: var(--Spacing-x1);
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-flow: dense;
   }
 
   .mobileGrid {

components/ContentType/HotelPage/Facilities/CardGrid/index.tsx

@@ -9,6 +9,8 @@ import type { CardGridProps } from "@/types/components/hotelPage/facilities"
 
 export default async function CardGrid({ facility }: CardGridProps) {
   const imageCard = sortCards(facility)
+  const nrCards = facility.length
+
   return (
     <section id={imageCard.card?.id}>
       <Grids.Stackable className={styles.desktopGrid}>
@@ -22,7 +24,13 @@ export default async function CardGrid({ facility }: CardGridProps) {
             secondaryButton={card.secondaryButton}
             primaryButton={card.primaryButton}
             backgroundImage={card.backgroundImage}
-            className={styles[card.columnSpan]}
+            className={
+              nrCards == 1
+                ? styles.spanThree
+                : nrCards == 2 && card.backgroundImage
+                  ? styles.spanTwo
+                  : styles.spanOne
+            }
           />
         ))}
       </Grids.Stackable>

components/ContentType/HotelPage/Facilities/mockData.ts

@@ -1,144 +0,0 @@
-import {
-  activities,
-  meetingsAndConferences,
-  restaurantAndBar,
-  wellnessAndExercise,
-} from "@/constants/routes/hotelPageParams"
-
-import { getLang } from "@/i18n/serverContext"
-
-import type { Facilities } from "@/types/components/hotelPage/facilities"
-
-const lang = getLang()
-/* 
-Most of this will be available from the api. Some will need to come from Contentstack. "Activities" will most likely come from Contentstack, which is prepped for.
- */
-export const MOCK_FACILITIES: Facilities = [
-  [
-    {
-      id: "restaurant-and-bar",
-      theme: "primaryDark",
-      scriptedTopTitle: "Restaurant & Bar",
-      heading: "Enjoy relaxed restaurant experience",
-      secondaryButton: {
-        href: `?s=${restaurantAndBar[lang]}`,
-        title: "Read more & book a table",
-        isExternal: false,
-      },
-      columnSpan: "one",
-    },
-    {
-      backgroundImage: {
-        url: "https://imagevault.scandichotels.com/publishedmedia/79xttlmnum0kjbwhyh18/scandic-helsinki-hub-restaurant-food-tuna.jpg",
-        title: "scandic-helsinki-hub-restaurant-food-tuna.jpg",
-        meta: {
-          alt: "food in restaurant at scandic helsinki hub",
-          caption: "food in restaurant at scandic helsinki hub",
-        },
-        id: 81751,
-        dimensions: {
-          width: 5935,
-          height: 3957,
-          aspectRatio: 1.499873641647713,
-        },
-      },
-      columnSpan: "one",
-    },
-    {
-      backgroundImage: {
-        url: "https://imagevault.scandichotels.com/publishedmedia/48sb3eyhhzj727l2j1af/Scandic-helsinki-hub-II-centro-41.jpg",
-        meta: {
-          alt: "restaurant il centro at scandic helsinki hu",
-          caption: "restaurant il centro at scandic helsinki hub",
-        },
-        id: 82457,
-        title: "Scandic-helsinki-hub-II-centro-41.jpg",
-        dimensions: {
-          width: 4200,
-          height: 2800,
-          aspectRatio: 1.5,
-        },
-      },
-      columnSpan: "one",
-    },
-  ],
-  [
-    {
-      backgroundImage: {
-        url: "https://imagevault.scandichotels.com/publishedmedia/csef06n329hjfiet1avj/Scandic-spectrum-8.jpg",
-        meta: {
-          alt: "man with a laptop",
-          caption: "man with a laptop",
-        },
-        id: 82713,
-        title: "Scandic-spectrum-8.jpg",
-        dimensions: {
-          width: 7499,
-          height: 4999,
-          aspectRatio: 1.500100020004001,
-        },
-      },
-      columnSpan: "two",
-    },
-    {
-      id: "meetings-and-conferences",
-      theme: "primaryDim",
-      scriptedTopTitle: "Meetings & Conferences",
-      heading: "Events that make an impression",
-      secondaryButton: {
-        href: `?s=${meetingsAndConferences[lang]}`,
-        title: "About meetings & conferences",
-        isExternal: false,
-      },
-      columnSpan: "one",
-    },
-  ],
-  [
-    {
-      id: "wellness-and-exercise",
-      theme: "one",
-      scriptedTopTitle: "Wellness & Exercise",
-      heading: "Sauna and gym",
-      secondaryButton: {
-        href: `?s=${wellnessAndExercise[lang]}`,
-        title: "Read more about wellness & exercise",
-        isExternal: false,
-      },
-      columnSpan: "one",
-    },
-    {
-      backgroundImage: {
-        url: "https://imagevault.scandichotels.com/publishedmedia/69acct5i3pk5be7d6ub0/scandic-helsinki-hub-sauna.jpg",
-        meta: {
-          alt: "sauna at scandic helsinki hub",
-          caption: "sauna at scandic helsinki hub",
-        },
-        id: 81814,
-        title: "scandic-helsinki-hub-sauna.jpg",
-        dimensions: {
-          width: 4000,
-          height: 2667,
-          aspectRatio: 1.4998125234345707,
-        },
-      },
-      columnSpan: "one",
-    },
-    {
-      backgroundImage: {
-        url: "https://imagevault.scandichotels.com/publishedmedia/eu70o6z85idy24r92ysf/Scandic-Helsinki-Hub-gym-22.jpg",
-        meta: {
-          alt: "Gym at hotel Scandic Helsinki Hub",
-          caption: "Gym at hotel Scandic Helsinki Hub",
-        },
-        id: 81867,
-        title: "Scandic-Helsinki-Hub-gym-22.jpg",
-        dimensions: {
-          width: 4000,
-          height: 2667,
-          aspectRatio: 1.4998125234345707,
-        },
-      },
-      columnSpan: "one",
-    },
-  ],
-]

components/ContentType/HotelPage/Rooms/RoomCard/index.tsx

@@ -10,7 +10,7 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./roomCard.module.css"
 
-import { RoomCardProps } from "@/types/components/hotelPage/roomCard"
+import type { RoomCardProps } from "@/types/components/hotelPage/roomCard"
 
 export function RoomCard({
   badgeTextTransKey,

components/ContentType/HotelPage/Rooms/index.tsx

@@ -10,10 +10,11 @@ import Button from "@/components/TempDesignSystem/Button"
 import Grids from "@/components/TempDesignSystem/Grids"
 
 import { RoomCard } from "./RoomCard"
-import { RoomsProps } from "./types"
 
 import styles from "./rooms.module.css"
 
+import type { RoomsProps } from "./types"
+
 export function Rooms({ rooms }: RoomsProps) {
   const intl = useIntl()
   const [allRoomsVisible, setAllRoomsVisible] = useState(false)

components/ContentType/HotelPage/index.tsx

@@ -7,8 +7,7 @@ import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
-import { MOCK_FACILITIES } from "./Facilities/mockData"
-import { setActivityCard } from "./Facilities/utils"
+import { setActivityCard, setFacilityCards } from "@/utils/facilityCards"
 import DynamicMap from "./Map/DynamicMap"
 import MapCard from "./Map/MapCard"
 import MobileMapToggle from "./Map/MobileMapToggle"
@@ -45,9 +44,10 @@ export default async function HotelPage() {
     roomCategories,
     activitiesCard,
     pointsOfInterest,
+    facilityCards,
   } = hotelData
 
-  const facilities = [...MOCK_FACILITIES]
+  const facilities = await setFacilityCards(facilityCards)
   activitiesCard && facilities.push(setActivityCard(activitiesCard))
   const topThreePois = pointsOfInterest.slice(0, 3)
 

components/TempDesignSystem/Card/CardImage/index.tsx

@@ -18,7 +18,7 @@ export default function CardImage({
           ({ backgroundImage }) =>
             backgroundImage && (
               <Image
-                key={backgroundImage.id}
+                key={backgroundImage.title}
                 src={backgroundImage.url}
                 className={styles.image}
                 alt={backgroundImage.title}

components/TempDesignSystem/Card/card.ts

@@ -2,6 +2,7 @@ import { cardVariants } from "./variants"
 
 import type { VariantProps } from "class-variance-authority"
 
+import type { ApiImage } from "@/types/components/image"
 import type { ImageVaultAsset } from "@/types/components/imageVault"
 
 export interface CardProps
@@ -22,9 +23,9 @@ export interface CardProps
   scriptedTopTitle?: string | null
   heading?: string | null
   bodyText?: string | null
-  backgroundImage?: ImageVaultAsset
   imageHeight?: number
   imageWidth?: number
   onPrimaryButtonClick?: () => void
   onSecondaryButtonClick?: () => void
+  backgroundImage?: ImageVaultAsset | ApiImage
 }