refactor(SW-302

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

@@ -8,9 +8,9 @@ import styles from "./cardGrid.module.css"
 import type { CardGridProps } from "@/types/components/hotelPage/facilities"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 
-export default async function CardGrid({ facilities }: CardGridProps) {
-  const imageCard = sortCards(facilities)
-  const nrCards = facilities.length
+export default function CardGrid({ facilityCardGid }: CardGridProps) {
+  const imageCard = sortCards(facilityCardGid)
+  const nrCards = facilityCardGid.length
 
   function getCardClassName(card: CardProps): string {
     if (nrCards === 1) {
@@ -24,7 +24,7 @@ export default async function CardGrid({ facilities }: CardGridProps) {
   return (
     <section id={imageCard.card?.id}>
       <Grids.Stackable className={styles.desktopGrid}>
-        {facilities.map((card: CardProps) => (
+        {facilityCardGid.map((card: CardProps) => (
           <Card
             theme={card.theme || "primaryDark"}
             key={card.id}

components/ContentType/HotelPage/Facilities/index.tsx

@@ -1,33 +1,49 @@
-import { activities } from "@/constants/routes/hotelPageParams"
-
 import SectionContainer from "@/components/Section/Container"
-import { getLang } from "@/i18n/serverContext"
+import { getIntl } from "@/i18n"
+import { setActivityCard, setFacilityCardGrids } from "@/utils/facilityCards"
 
 import CardGrid from "./CardGrid"
 
 import styles from "./facilities.module.css"
 
 import type {
+  FacilitiesProps,
   FacilityCards,
-  FacilityProps,
 } from "@/types/components/hotelPage/facilities"
+import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 
-export default async function Facilities({ facilities }: FacilityProps) {
-  const lang = getLang()
+export default async function Facilities({
+  facilities,
+  activitiesCard,
+}: FacilitiesProps) {
+  const intl = await getIntl()
 
-  // Put activities card at the end
-  const activitiesIdx = facilities.findIndex(
-    (facility) => facility[0].id === activities[lang]
-  )
-  if (activitiesIdx !== -1) {
-    facilities.push(facilities.splice(activitiesIdx, 1)[0])
-  }
+  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
+    })
+  })
 
   return (
     <SectionContainer className={styles.grid}>
-      {facilities.map((facilityCards: FacilityCards) => (
-        <CardGrid key={facilityCards[0].id} facilities={facilityCards} />
+      {facilityCardGrids.map((cardGrid: FacilityCards) => (
+        <CardGrid key={cardGrid[0].id} facilityCardGid={cardGrid} />
       ))}
+      {updatedActivitiesCard && (
+        <CardGrid
+          key={updatedActivitiesCard.id}
+          facilityCardGid={[updatedActivitiesCard]}
+        />
+      )}
     </SectionContainer>
   )
 }

components/ContentType/HotelPage/index.tsx

@@ -6,11 +6,7 @@ import SidePeekProvider from "@/components/SidePeekProvider"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
-import {
-  getRestaurantHeading,
-  setActivityCard,
-  setFacilityCards,
-} from "@/utils/facilityCards"
+import { getRestaurantHeading } from "@/utils/facilityCards"
 
 import DynamicMap from "./Map/DynamicMap"
 import MapCard from "./Map/MapCard"
@@ -48,12 +44,9 @@ export default async function HotelPage() {
     roomCategories,
     activitiesCard,
     pointsOfInterest,
-    facilityCards,
+    facilities,
   } = hotelData
 
-  const facilities = setFacilityCards(facilityCards)
-  activitiesCard && facilities.push(setActivityCard(activitiesCard))
-
   const topThreePois = pointsOfInterest.slice(0, 3)
 
   const coordinates = {
@@ -126,7 +119,7 @@ export default async function HotelPage() {
           <AmenitiesList detailedFacilities={hotelDetailedFacilities} />
         </div>
         <Rooms rooms={roomCategories} />
-        <Facilities facilities={facilities} />
+        <Facilities facilities={facilities} activitiesCard={activitiesCard} />
       </main>
       {googleMapsApiKey ? (
         <>

server/routers/hotels/query.ts

@@ -246,7 +246,7 @@ export const hotelQueryRouter = router({
         pointsOfInterest: hotelAttributes.pointsOfInterest,
         roomCategories,
         activitiesCard: activities?.upcoming_activities_card,
-        facilityCards: facilities,
+        facilities,
       }
     }),
   availability: router({

types/components/hotelPage/facilities.ts

@@ -1,15 +1,18 @@
+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 FacilityProps = {
-  facilities: Facilities
+export type FacilitiesProps = {
+  facilities: Facility[]
+  activitiesCard?: ActivityCard
 }
 
 export type CardGridProps = {
-  facilities: FacilityCards
+  facilityCardGid: FacilityCards
 }
 
 export enum FacilityEnum {

utils/facilityCards.ts

@@ -5,79 +5,67 @@ import {
   wellnessAndExercise,
 } from "@/constants/routes/hotelPageParams"
 
-import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
 import {
   type Facilities,
-  type FacilityCards,
   FacilityEnum,
   FacilityIds,
   RestaurantHeadings,
 } from "@/types/components/hotelPage/facilities"
-import type { ImageVaultAsset } from "@/types/components/imageVault"
 import type { Amenities, Facility } from "@/types/hotel"
+import { ActivityCard } from "@/types/trpc/routers/contentstack/hotelPage"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 
-type ActivityCard = {
-  background_image?: ImageVaultAsset
-  scripted_title?: string
-  heading: string
-  body_text: string
-  cta_text: string
-  contentPage: { href: string }
-}
-
-export function setActivityCard(activitiesCard: ActivityCard): FacilityCards {
+export function setActivityCard(activitiesCard: ActivityCard): CardProps {
   const lang = getLang()
   const hasImage = activitiesCard.background_image
-  return [
-    {
-      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,
-          },
-    },
-  ]
+
+  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
 }
 
-async function setCardProps(
+function setCardProps(
   theme: CardProps["theme"],
   heading: string,
   buttonText: string,
   href: string
 ) {
-  const intl = await getIntl()
   const card: CardProps = {}
 
   card.theme = theme
   card.id = href
-  card.heading = intl.formatMessage({ id: heading })
+  card.heading = heading
   card.secondaryButton = {
     href: `?s=${href}`,
-    title: intl.formatMessage({ id: buttonText }),
+    title: buttonText,
     isExternal: false,
   }
   return card
 }
 
-export function setFacilityCards(facilities: Facility[]) {
+export function setFacilityCardGrids(facilities: Facility[]): Facilities {
   const lang = getLang()
   const cards: Facilities = []
 
@@ -104,7 +92,7 @@ export function setFacilityCards(facilities: Facility[]) {
 
     switch (facility.id) {
       case FacilityEnum.wellness:
-        card = await setCardProps(
+        card = setCardProps(
           "one",
           "Sauna and gym",
           "Read more about wellness & exercise",
@@ -115,7 +103,7 @@ export function setFacilityCards(facilities: Facility[]) {
         break
 
       case FacilityEnum.conference:
-        card = await setCardProps(
+        card = setCardProps(
           "primaryDim",
           "Events that make an impression",
           "About meetings & conferences",
@@ -127,7 +115,7 @@ export function setFacilityCards(facilities: Facility[]) {
 
       case FacilityEnum.restaurant:
         //const title = getRestaurantHeading(amenities) // TODO will be used later
-        card = await setCardProps(
+        card = setCardProps(
           "primaryDark",
           "Enjoy relaxed restaurant experiences",
           "Read more & book a table",