From 0fa8251cd33a55be63e36c822537fcf2d0edd9e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?= Date: Thu, 3 Oct 2024 16:42:53 +0200 Subject: [PATCH] refactor(SW-302 --- .../HotelPage/Facilities/CardGrid/index.tsx | 8 +- .../HotelPage/Facilities/index.tsx | 46 +++++++---- components/ContentType/HotelPage/index.tsx | 13 +--- server/routers/hotels/query.ts | 2 +- types/components/hotelPage/facilities.ts | 9 ++- utils/facilityCards.ts | 78 ++++++++----------- 6 files changed, 78 insertions(+), 78 deletions(-) diff --git a/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx b/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx index 4a587d1ae..fdf40e35f 100644 --- a/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx +++ b/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 (
- {facilities.map((card: CardProps) => ( + {facilityCardGid.map((card: CardProps) => ( 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 ( - {facilities.map((facilityCards: FacilityCards) => ( - + {facilityCardGrids.map((cardGrid: FacilityCards) => ( + ))} + {updatedActivitiesCard && ( + + )} ) } diff --git a/components/ContentType/HotelPage/index.tsx b/components/ContentType/HotelPage/index.tsx index a66a7afb7..04a56a865 100644 --- a/components/ContentType/HotelPage/index.tsx +++ b/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() { - + {googleMapsApiKey ? ( <> diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts index 0fae3ff79..2f30ae397 100644 --- a/server/routers/hotels/query.ts +++ b/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({ diff --git a/types/components/hotelPage/facilities.ts b/types/components/hotelPage/facilities.ts index dbe27ea6a..41308837f 100644 --- a/types/components/hotelPage/facilities.ts +++ b/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 { diff --git a/utils/facilityCards.ts b/utils/facilityCards.ts index d2897d1df..82b859b8b 100644 --- a/utils/facilityCards.ts +++ b/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",