diff --git a/components/ContentType/HotelPage/Facilities/CardGrid/cardGrid.module.css b/components/ContentType/HotelPage/Facilities/CardGrid/cardGrid.module.css index 0d453b437..515b772e3 100644 --- a/components/ContentType/HotelPage/Facilities/CardGrid/cardGrid.module.css +++ b/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; } } diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts index 5183ad02c..1856f2243 100644 --- a/server/routers/hotels/output.ts +++ b/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, diff --git a/utils/facilityCards.ts b/utils/facilityCards.ts index 724598453..87893399d 100644 --- a/utils/facilityCards.ts +++ b/utils/facilityCards.ts @@ -54,26 +54,36 @@ export function setActivityCard(activitiesCard: ActivityCard): FacilityCards { ] } -export async function setFacilityCards( - facilities: Facility[], - amenities: Amenities +async function setCardProps( + theme: CardProps["theme"], + heading: string, + buttonText: string, + href: string ) { - const lang = getLang() const intl = await getIntl() + const card: CardProps = {} - let cards: Facilities = [], - card: CardProps, - img: CardProps, - grid: Array + card.theme = theme + card.id = href + card.heading = intl.formatMessage({ id: heading }) + card.secondaryButton = { + href: `?s=${href}`, + title: intl.formatMessage({ id: buttonText }), + isExternal: false, + } + return card +} - facilities.map((facility) => { - card = {} - grid = [] +export function setFacilityCards(facilities: Facility[], amenities: Amenities) { + const lang = getLang() + const cards: Facilities = [] - card.scriptedTopTitle = facility.headingText ?? "Fallback title" + facilities.forEach(async (facility) => { + const grid: Array = [] + let card: CardProps = {} - facility.heroImages.map((image) => { - img = {} + facility.heroImages.forEach((image) => { + 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.id = wellnessAndExercise[lang] - ;(card.heading = intl.formatMessage({ id: "Sauna and gym" })), - (card.secondaryButton = { - href: `?s=${wellnessAndExercise[lang]}`, - title: intl.formatMessage({ - id: "Read more about wellness & exercise", - }), - isExternal: false, - }) + card = await setCardProps( + "one", + "Sauna and gym", + "Read more about wellness & exercise", + wellnessAndExercise[lang] + ) + card.scriptedTopTitle = facility.headingText grid.unshift(card) break case FacilityEnum.conference: - card.theme = "primaryDim" - card.id = meetingsAndConferences[lang] - ;(card.heading = intl.formatMessage({ - id: "Events that make an impression", - })), - (card.secondaryButton = { - href: `?s=${meetingsAndConferences[lang]}`, - title: intl.formatMessage({ id: "About meetings & conferences" }), - isExternal: false, - }) + card = await setCardProps( + "primaryDim", + "Events that make an impression", + "About meetings & conferences", + meetingsAndConferences[lang] + ) + card.scriptedTopTitle = facility.headingText grid.push(card) break case FacilityEnum.restaurant: - const title = getRestaurantHeading(amenities) - card.theme = "primaryDark" - card.id = restaurantAndBar[lang] - card.heading = intl.formatMessage({ - id: "Enjoy relaxed restaurant experiences", - }) - card.secondaryButton = { - href: `?s=${restaurantAndBar[lang]}`, - title: intl.formatMessage({ id: "Read more & book a table" }), - isExternal: false, - } + //const title = getRestaurantHeading(amenities) // TODO will be used later + card = await setCardProps( + "primaryDark", + "Enjoy relaxed restaurant experiences", + "Read more & book a table", + restaurantAndBar[lang] + ) + card.scriptedTopTitle = facility.headingText grid.unshift(card) break }