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 ? (
         <>