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