refactor(SW-302): update typings

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

@@ -0,0 +1,49 @@
+import { activities } from "@/constants/routes/hotelPageParams"
+
+import Card from "@/components/TempDesignSystem/Card"
+import CardImage from "@/components/TempDesignSystem/Card/CardImage"
+import Grids from "@/components/TempDesignSystem/Grids"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./cardGrid.module.css"
+
+import type { ActivityCard } from "@/types/trpc/routers/contentstack/hotelPage"
+import type { CardProps } from "@/components/TempDesignSystem/Card/card"
+
+export default function ActivitiesCardGrid(activitiesCard: ActivityCard) {
+  const lang = getLang()
+  const hasImage = activitiesCard.background_image
+
+  const updatedCard: CardProps = {
+    id: activities[lang],
+    theme: hasImage ? "image" : "primaryDark",
+    scriptedTopTitle: activitiesCard.scripted_title,
+    heading: activitiesCard.heading,
+    bodyText: activitiesCard.body_text,
+    backgroundImage: hasImage ? activitiesCard.background_image : undefined,
+    primaryButton: hasImage
+      ? {
+          href: activitiesCard.contentPage.href,
+          title: activitiesCard.cta_text,
+          isExternal: false,
+        }
+      : undefined,
+    secondaryButton: hasImage
+      ? undefined
+      : {
+          href: activitiesCard.contentPage.href,
+          title: activitiesCard.cta_text,
+          isExternal: false,
+        },
+  }
+  return (
+    <section id={updatedCard.id}>
+      <Grids.Stackable className={styles.desktopGrid}>
+        <Card {...updatedCard} className={styles.spanThree} />
+      </Grids.Stackable>
+      <Grids.Stackable className={styles.mobileGrid}>
+        <CardImage card={updatedCard} />
+      </Grids.Stackable>
+    </section>
+  )
+}

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

@@ -10,23 +10,23 @@
   grid-column: span 3;
 }
 
-.desktopGrid {
-  display: none !important;
+section .desktopGrid {
+  display: none;
 }
 
-.mobileGrid {
-  display: grid !important;
+section .mobileGrid {
+  display: grid;
   gap: var(--Spacing-x-quarter);
 }
 
 @media screen and (min-width: 768px) {
-  .desktopGrid {
-    display: grid !important;
+  section .desktopGrid {
+    display: grid;
     gap: var(--Spacing-x1);
     grid-template-columns: repeat(3, 1fr);
   }
 
-  .mobileGrid {
-    display: none !important;
+  section .mobileGrid {
+    display: none;
   }
 }

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

@@ -1,39 +1,39 @@
 import Card from "@/components/TempDesignSystem/Card"
 import CardImage from "@/components/TempDesignSystem/Card/CardImage"
 import Grids from "@/components/TempDesignSystem/Grids"
+import { isFacilityCard } from "@/utils/facilityCards"
 import { sortCards } from "@/utils/imageCard"
 
 import styles from "./cardGrid.module.css"
 
-import type { CardGridProps } from "@/types/components/hotelPage/facilities"
-import type { CardProps } from "@/components/TempDesignSystem/Card/card"
+import type {
+  CardGridProps,
+  FacilityCardType,
+} from "@/types/components/hotelPage/facilities"
 
-export default function CardGrid({ facilityCardGid }: CardGridProps) {
-  const imageCard = sortCards(facilityCardGid)
-  const nrCards = facilityCardGid.length
+export default function FacilitiesCardGrid({
+  facilitiesCardGrid,
+}: CardGridProps) {
+  const imageCard = sortCards(facilitiesCardGrid)
+  const nrCards = facilitiesCardGrid.length
 
-  function getCardClassName(card: CardProps): string {
+  function getCardClassName(card: FacilityCardType): string {
     if (nrCards === 1) {
       return styles.spanThree
-    } else if (nrCards === 2 && card.backgroundImage) {
+    } else if (nrCards === 2 && !isFacilityCard(card)) {
       return styles.spanTwo
     }
     return styles.spanOne
   }
 
   return (
-    <section id={imageCard.card?.id}>
+    <section id={imageCard.card.id}>
       <Grids.Stackable className={styles.desktopGrid}>
-        {facilityCardGid.map((card: CardProps) => (
+        {facilitiesCardGrid.map((card: FacilityCardType) => (
           <Card
-            theme={card.theme || "primaryDark"}
+            {...card}
+            theme={card.theme}
             key={card.id}
-            scriptedTopTitle={card.scriptedTopTitle}
-            heading={card.heading}
-            bodyText={card.bodyText}
-            secondaryButton={card.secondaryButton}
-            primaryButton={card.primaryButton}
-            backgroundImage={card.backgroundImage}
             className={getCardClassName(card)}
           />
         ))}

components/ContentType/HotelPage/Facilities/index.tsx

@@ -1,16 +1,17 @@
 import SectionContainer from "@/components/Section/Container"
 import { getIntl } from "@/i18n"
-import { setActivityCard, setFacilityCardGrids } from "@/utils/facilityCards"
+import { isFacilityCard, setFacilityCardGrids } from "@/utils/facilityCards"
 
-import CardGrid from "./CardGrid"
+import ActivitiesCardGrid from "./CardGrid/ActivitiesCardGrid"
+import FacilitiesCardGrid from "./CardGrid"
 
 import styles from "./facilities.module.css"
 
 import type {
   FacilitiesProps,
-  FacilityCards,
+  FacilityCardType,
+  FacilityGrid,
 } from "@/types/components/hotelPage/facilities"
-import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 
 export default async function Facilities({
   facilities,
@@ -19,31 +20,27 @@ export default async function Facilities({
   const intl = await getIntl()
 
   const facilityCardGrids = setFacilityCardGrids(facilities)
-  const updatedActivitiesCard =
-    activitiesCard && setActivityCard(activitiesCard)
 
-  facilityCardGrids.map((cardGrid: FacilityCards) => {
-    cardGrid.map((card: CardProps) => {
-      card.heading = card.heading && intl.formatMessage({ id: card.heading })
-      card.secondaryButton
-        ? (card.secondaryButton.title = intl.formatMessage({
-            id: card.secondaryButton.title,
-          }))
-        : null
+  facilityCardGrids.map((cardGrid: FacilityGrid) => {
+    cardGrid.map((card: FacilityCardType) => {
+      if (isFacilityCard(card)) {
+        card.heading = intl.formatMessage({ id: card.heading })
+        card.secondaryButton.title = intl.formatMessage({
+          id: card.secondaryButton.title,
+        })
+      }
     })
   })
 
   return (
     <SectionContainer className={styles.grid}>
-      {facilityCardGrids.map((cardGrid: FacilityCards) => (
-        <CardGrid key={cardGrid[0].id} facilityCardGid={cardGrid} />
-      ))}
-      {updatedActivitiesCard && (
-        <CardGrid
-          key={updatedActivitiesCard.id}
-          facilityCardGid={[updatedActivitiesCard]}
+      {facilityCardGrids.map((cardGrid: FacilityGrid) => (
+        <FacilitiesCardGrid
+          key={cardGrid[0].id}
+          facilitiesCardGrid={cardGrid}
         />
-      )}
+      ))}
+      {activitiesCard && <ActivitiesCardGrid {...activitiesCard} />}
     </SectionContainer>
   )
 }

components/TempDesignSystem/Card/CardImage/index.tsx

@@ -14,7 +14,7 @@ export default function CardImage({
   return (
     <article className={`${styles.container} ${className}`}>
       <div className={styles.imageContainer}>
-        {imageCards.map(
+        {imageCards?.map(
           ({ backgroundImage }) =>
             backgroundImage && (
               <Image

types/components/cardImage.ts

@@ -1,6 +1,8 @@
+import { FacilityCard, FacilityImage } from "./hotelPage/facilities"
+
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 
 export interface CardImageProps extends React.HTMLAttributes<HTMLDivElement> {
-  card?: CardProps
-  imageCards: Pick<CardProps, "backgroundImage">[]
+  card: FacilityCard | CardProps
+  imageCards?: FacilityImage[]
 }

types/components/hotelPage/facilities.ts

@@ -2,17 +2,36 @@ import type { Facility } from "@/types/hotel"
 import type { ActivityCard } from "@/types/trpc/routers/contentstack/hotelPage"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 
-export type FacilityCards = CardProps[]
-
-export type Facilities = FacilityCards[]
-
 export type FacilitiesProps = {
   facilities: Facility[]
   activitiesCard?: ActivityCard
 }
 
+export type FacilityImage = {
+  backgroundImage: CardProps["backgroundImage"]
+  theme: CardProps["theme"]
+  id: string
+}
+
+export type FacilityCard = {
+  secondaryButton: {
+    href: string
+    title: string
+    openInNewTab?: boolean
+    isExternal: boolean
+  }
+  heading: string
+  scriptedTopTitle: string
+  theme: CardProps["theme"]
+  id: string
+}
+
+export type FacilityCardType = FacilityImage | FacilityCard
+export type FacilityGrid = FacilityCardType[]
+export type Facilities = FacilityGrid[]
+
 export type CardGridProps = {
-  facilityCardGid: FacilityCards
+  facilitiesCardGrid: FacilityGrid
 }
 
 export enum FacilityEnum {

utils/facilityCards.ts

@@ -1,5 +1,4 @@
 import {
-  activities,
   meetingsAndConferences,
   restaurantAndBar,
   wellnessAndExercise,
@@ -9,60 +8,43 @@ import { getLang } from "@/i18n/serverContext"
 
 import {
   type Facilities,
+  type FacilityCard,
+  type FacilityCardType,
   FacilityEnum,
+  type FacilityGrid,
   FacilityIds,
+  type FacilityImage,
   RestaurantHeadings,
 } from "@/types/components/hotelPage/facilities"
 import type { Amenities, Facility } from "@/types/hotel"
-import { ActivityCard } from "@/types/trpc/routers/contentstack/hotelPage"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 
-export function setActivityCard(activitiesCard: ActivityCard): CardProps {
-  const lang = getLang()
-  const hasImage = activitiesCard.background_image
+export function isFacilityCard(card: FacilityCardType): card is FacilityCard {
+  return (card as FacilityCard).heading != undefined
+}
 
-  const updatedCard: CardProps = {
-    id: activities[lang],
-    theme: hasImage ? "image" : "primaryDark",
-    scriptedTopTitle: activitiesCard.scripted_title,
-    heading: activitiesCard.heading,
-    bodyText: activitiesCard.body_text,
-    backgroundImage: hasImage ? activitiesCard.background_image : undefined,
-    primaryButton: hasImage
-      ? {
-          href: activitiesCard.contentPage.href,
-          title: activitiesCard.cta_text,
-          isExternal: false,
-        }
-      : undefined,
-    secondaryButton: hasImage
-      ? undefined
-      : {
-          href: activitiesCard.contentPage.href,
-          title: activitiesCard.cta_text,
-          isExternal: false,
-        },
-  }
-  return updatedCard
+export function isFacilityImage(card: FacilityCardType): card is FacilityCard {
+  return (card as FacilityImage).backgroundImage != undefined
 }
 
 function setCardProps(
   theme: CardProps["theme"],
   heading: string,
   buttonText: string,
-  href: string
-) {
-  const card: CardProps = {}
-
-  card.theme = theme
-  card.id = href
-  card.heading = heading
-  card.secondaryButton = {
-    href: `?s=${href}`,
-    title: buttonText,
-    isExternal: false,
+  href: string,
+  scriptedTopTitle: string
+): FacilityCard {
+  return {
+    theme: theme,
+    id: href,
+    heading: heading,
+    scriptedTopTitle: scriptedTopTitle,
+    secondaryButton: {
+      href: `?s=${href}`,
+      title: buttonText,
+      isExternal: false,
+    },
   }
-  return card
 }
 
 export function setFacilityCardGrids(facilities: Facility[]): Facilities {
@@ -70,23 +52,24 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities {
   const cards: Facilities = []
 
   facilities.forEach(async (facility) => {
-    const grid: Array<CardProps> = []
-    let card: CardProps = {}
+    const grid: FacilityGrid = []
+    let card: FacilityCard
 
     facility.heroImages.slice(0, 2).forEach((image) => {
       // Can be a maximum 2 images per grid
-      const img: CardProps = {}
-      img.id = image.imageSizes.large
-      ;(img.backgroundImage = {
-        url: image.imageSizes.large,
-        title: image.metaData.title,
-        meta: {
-          alt: image.metaData.altText,
-          caption: image.metaData.altText_En,
+      const img: FacilityImage = {
+        backgroundImage: {
+          url: image.imageSizes.large,
+          title: image.metaData.title,
+          meta: {
+            alt: image.metaData.altText,
+            caption: image.metaData.altText_En,
+          },
+          id: image.imageSizes.large,
         },
+        theme: "image",
         id: image.imageSizes.large,
-      }),
-        (img.theme = "image")
+      }
       grid.push(img)
     })
 
@@ -96,9 +79,9 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities {
           "one",
           "Sauna and gym",
           "Read more about wellness & exercise",
-          wellnessAndExercise[lang]
+          wellnessAndExercise[lang],
+          facility.headingText
         )
-        card.scriptedTopTitle = facility.headingText
         grid.unshift(card)
         break
 
@@ -107,9 +90,9 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities {
           "primaryDim",
           "Events that make an impression",
           "About meetings & conferences",
-          meetingsAndConferences[lang]
+          meetingsAndConferences[lang],
+          facility.headingText
         )
-        card.scriptedTopTitle = facility.headingText
         grid.push(card)
         break
 
@@ -119,9 +102,9 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities {
           "primaryDark",
           "Enjoy relaxed restaurant experiences",
           "Read more & book a table",
-          restaurantAndBar[lang]
+          restaurantAndBar[lang],
+          facility.headingText
         )
-        card.scriptedTopTitle = facility.headingText
         grid.unshift(card)
         break
     }

utils/imageCard.ts

@@ -1,16 +1,27 @@
-import type { FacilityCards } from "@/types/components/hotelPage/facilities"
-import type { CardProps } from "@/components/TempDesignSystem/Card/card"
+import { isFacilityImage } from "./facilityCards"
 
-export function sortCards(cards: FacilityCards) {
-  const sortedCards = cards.slice(0).sort((a: CardProps, b: CardProps) => {
-    if (!a.backgroundImage && b.backgroundImage) {
-      return 1
-    }
-    if (a.backgroundImage && !b.backgroundImage) {
-      return -1
-    }
-    return 0
-  })
+import type {
+  FacilityCard,
+  FacilityCardType,
+  FacilityGrid,
+  FacilityImage,
+} from "@/types/components/hotelPage/facilities"
 
-  return { card: sortedCards.pop(), images: sortedCards }
+export function sortCards(cards: FacilityGrid) {
+  const sortedCards = cards
+    .slice(0)
+    .sort((a: FacilityCardType, b: FacilityCardType) => {
+      if (!isFacilityImage(a) && isFacilityImage(b)) {
+        return 1
+      }
+      if (isFacilityImage(a) && !isFacilityImage(b)) {
+        return -1
+      }
+      return 0
+    })
+
+  return {
+    card: sortedCards.pop() as FacilityCard,
+    images: sortedCards as FacilityImage[],
+  }
 }