diff --git a/components/ContentType/HotelPage/AmenitiesList/index.tsx b/components/ContentType/HotelPage/AmenitiesList/index.tsx index ff4ef9110..27448827d 100644 --- a/components/ContentType/HotelPage/AmenitiesList/index.tsx +++ b/components/ContentType/HotelPage/AmenitiesList/index.tsx @@ -10,11 +10,11 @@ import { getLang } from "@/i18n/serverContext" import styles from "./amenitiesList.module.css" -import type { AmentiesListProps } from "@/types/components/hotelPage/amenities" +import type { AmenitiesListProps } from "@/types/components/hotelPage/amenities" export default async function AmenitiesList({ detailedFacilities, -}: AmentiesListProps) { +}: AmenitiesListProps) { const intl = await getIntl() const sortedAmenities = detailedFacilities .sort((a, b) => b.sortOrder - a.sortOrder) diff --git a/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx b/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx index 7ed3452b0..8bb1dff40 100644 --- a/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx +++ b/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx @@ -1,8 +1,7 @@ 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 { filterFacilityCards, isFacilityCard } from "@/utils/facilityCards" import styles from "./cardGrid.module.css" @@ -14,7 +13,7 @@ import type { export default function FacilitiesCardGrid({ facilitiesCardGrid, }: CardGridProps) { - const imageCard = sortCards(facilitiesCardGrid) + const imageCard = filterFacilityCards(facilitiesCardGrid) const nrCards = facilitiesCardGrid.length function getCardClassName(card: FacilityCardType): string { diff --git a/components/ContentType/HotelPage/Facilities/index.tsx b/components/ContentType/HotelPage/Facilities/index.tsx index ab8f6a87f..3f43cc328 100644 --- a/components/ContentType/HotelPage/Facilities/index.tsx +++ b/components/ContentType/HotelPage/Facilities/index.tsx @@ -8,6 +8,7 @@ import FacilitiesCardGrid from "./CardGrid" import styles from "./facilities.module.css" import type { + Facilities, FacilitiesProps, FacilityCardType, FacilityGrid, @@ -21,20 +22,29 @@ export default async function Facilities({ const facilityCardGrids = setFacilityCardGrids(facilities) - 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, - }) - } - }) - }) + const translatedFacilityGrids: Facilities = facilityCardGrids.map( + (cardGrid: FacilityGrid) => { + return cardGrid.map((card: FacilityCardType) => { + if (isFacilityCard(card)) { + return { + ...card, + heading: intl.formatMessage({ id: card.heading }), + secondaryButton: { + ...card.secondaryButton, + title: intl.formatMessage({ + id: card.secondaryButton.title, + }), + }, + } + } + return card + }) + } + ) return ( - {facilityCardGrids.map((cardGrid: FacilityGrid) => ( + {translatedFacilityGrids.map((cardGrid: FacilityGrid) => ( { - const grid: FacilityGrid = [] + const cards: Facilities = facilities.map((facility) => { let card: FacilityCard - facility.heroImages.slice(0, 2).forEach((image) => { + const grid: FacilityGrid = facility.heroImages.slice(0, 2).map((image) => { // Can be a maximum 2 images per grid const img: FacilityImage = { backgroundImage: { @@ -70,7 +68,7 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities { theme: "image", id: image.imageSizes.large, } - grid.push(img) + return img }) switch (facility.id) { @@ -108,7 +106,7 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities { grid.unshift(card) break } - cards.push(grid) + return grid }) return cards } @@ -131,3 +129,13 @@ export function getRestaurantHeading(amenities: Amenities): RestaurantHeadings { } return RestaurantHeadings.breakfastRestaurant } + +export function filterFacilityCards(cards: FacilityGrid) { + const card = cards.filter((card) => isFacilityCard(card)) + const images = cards.filter((card) => isFacilityImage(card)) + + return { + card: card[0] as FacilityCard, + images: images as FacilityImage[], + } +} diff --git a/utils/imageCard.ts b/utils/imageCard.ts deleted file mode 100644 index ae646fb76..000000000 --- a/utils/imageCard.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { isFacilityImage } from "./facilityCards" - -import type { - FacilityCard, - FacilityCardType, - FacilityGrid, - FacilityImage, -} from "@/types/components/hotelPage/facilities" - -export function sortCards(cards: FacilityGrid) { - const sortedCards = cards - .slice(0) - .sort((a: FacilityCardType, b: FacilityCardType) => { - if (!isFacilityImage(a) && isFacilityImage(b)) { - return 1 - } - if (isFacilityImage(a) && !isFacilityImage(b)) { - return -1 - } - return 0 - }) - - return { - card: sortedCards.pop() as FacilityCard, - images: sortedCards as FacilityImage[], - } -}