refactor(SW-302): split upp function into two

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

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

server/routers/hotels/output.ts

@@ -165,7 +165,7 @@ const detailedFacilitySchema = z.object({
 })
 
 export const facilitySchema = z.object({
-  headingText: z.string().optional(), // TODO: Should not be optional, remove when we get meetingsAndConferences headingText
+  headingText: z.string(),
   heroImages: z.array(
     z.object({
       metaData: imageMetaDataSchema,

utils/facilityCards.ts

@@ -54,26 +54,36 @@ export function setActivityCard(activitiesCard: ActivityCard): FacilityCards {
   ]
 }
 
-export async function setFacilityCards(
+async function setCardProps(
-  facilities: Facility[],
+  theme: CardProps["theme"],
-  amenities: Amenities
+  heading: string,
+  buttonText: string,
+  href: string
 ) {
-  const lang = getLang()
   const intl = await getIntl()
+  const card: CardProps = {}
 
-  let cards: Facilities = [],
+  card.theme = theme
-    card: CardProps,
+  card.id = href
-    img: CardProps,
+  card.heading = intl.formatMessage({ id: heading })
-    grid: Array<CardProps>
+  card.secondaryButton = {
+    href: `?s=${href}`,
+    title: intl.formatMessage({ id: buttonText }),
+    isExternal: false,
+  }
+  return card
+}
 
-  facilities.map((facility) => {
+export function setFacilityCards(facilities: Facility[], amenities: Amenities) {
-    card = {}
+  const lang = getLang()
-    grid = []
+  const cards: Facilities = []
 
-    card.scriptedTopTitle = facility.headingText ?? "Fallback title"
+  facilities.forEach(async (facility) => {
+    const grid: Array<CardProps> = []
+    let card: CardProps = {}
 
-    facility.heroImages.map((image) => {
+    facility.heroImages.forEach((image) => {
-      img = {}
+      const img: CardProps = {}
       ;(img.backgroundImage = {
         url: image.imageSizes.large,
         title: image.metaData.title,
@@ -88,45 +98,36 @@ export async function setFacilityCards(
 
     switch (facility.id) {
       case FacilityEnum.wellness:
-        card.theme = "one"
+        card = await setCardProps(
-        card.id = wellnessAndExercise[lang]
+          "one",
-        ;(card.heading = intl.formatMessage({ id: "Sauna and gym" })),
+          "Sauna and gym",
-          (card.secondaryButton = {
+          "Read more about wellness & exercise",
-            href: `?s=${wellnessAndExercise[lang]}`,
+          wellnessAndExercise[lang]
-            title: intl.formatMessage({
+        )
-              id: "Read more about wellness & exercise",
+        card.scriptedTopTitle = facility.headingText
-            }),
-            isExternal: false,
-          })
         grid.unshift(card)
         break
 
       case FacilityEnum.conference:
-        card.theme = "primaryDim"
+        card = await setCardProps(
-        card.id = meetingsAndConferences[lang]
+          "primaryDim",
-        ;(card.heading = intl.formatMessage({
+          "Events that make an impression",
-          id: "Events that make an impression",
+          "About meetings & conferences",
-        })),
+          meetingsAndConferences[lang]
-          (card.secondaryButton = {
+        )
-            href: `?s=${meetingsAndConferences[lang]}`,
+        card.scriptedTopTitle = facility.headingText
-            title: intl.formatMessage({ id: "About meetings & conferences" }),
-            isExternal: false,
-          })
         grid.push(card)
         break
 
       case FacilityEnum.restaurant:
-        const title = getRestaurantHeading(amenities)
+        //const title = getRestaurantHeading(amenities) // TODO will be used later
-        card.theme = "primaryDark"
+        card = await setCardProps(
-        card.id = restaurantAndBar[lang]
+          "primaryDark",
-        card.heading = intl.formatMessage({
+          "Enjoy relaxed restaurant experiences",
-          id: "Enjoy relaxed restaurant experiences",
+          "Read more & book a table",
-        })
+          restaurantAndBar[lang]
-        card.secondaryButton = {
+        )
-          href: `?s=${restaurantAndBar[lang]}`,
+        card.scriptedTopTitle = facility.headingText
-          title: intl.formatMessage({ id: "Read more & book a table" }),
-          isExternal: false,
-        }
         grid.unshift(card)
         break
     }