scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(SW-303): fetch activity card from CS

Browse Source
This commit is contained in:
Matilda Landström
2024-09-08 11:19:16 +02:00
parent c39c84e9ce
commit dde9ca190a
9 changed files with 169 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/ContentType/HotelPage/Facilities/mockData.ts
View File

@@ -141,19 +141,4 @@ export const MOCK_FACILITIES: Facilities = [
columnSpan: "one",
},
],
[
{
id: "activities",
theme: "primaryDark",
scriptedTopTitle: "Activities",
heading: "Upcoming activities at DownTown Camper",
bodyText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
secondaryButton: {
href: `?s=${activities[lang]}`,
title: "Discover activities",
isExternal: false,
},
columnSpan: "three",
},
],
]

44
components/ContentType/HotelPage/Facilities/utils.ts Normal file
View File

@@ -0,0 +1,44 @@
import type { Facility } from "@/types/components/hotelPage/facilities"
import type { ImageVaultAsset } from "@/types/components/imageVault"
type ActivityCard = {
background_image?: ImageVaultAsset
scripted_title?: string
heading: string
body_text: string
cta_text: string
contentPage: Array<{ href: string }>
}
export function setActivityCard(activitiesCard: ActivityCard): Facility {
const hasImage = activitiesCard.background_image
return [
{
id: "activities",
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[0].href,
title: activitiesCard.cta_text,
isExternal: false,
}
: undefined,
secondaryButton: hasImage
? undefined
: {
href: activitiesCard.contentPage[0].href,
title: activitiesCard.cta_text,
isExternal: false,
},
columnSpan: "three",
},
]
}
export function getCardTheme() {
// TODO
}

1
components/ContentType/HotelPage/TabNavigation/index.tsx
View File

@@ -12,6 +12,7 @@ export default function TabNavigation() {
const hash = useHash()
const intl = useIntl()
const hotelTabLinks: { href: HotelHashValues; text: string }[] = [
// TODO these titles will need to reflect the facility card titles, which will vary between hotels
{ href: HotelHashValues.overview, text: "Overview" },
{ href: HotelHashValues.rooms, text: "Rooms" },
{ href: HotelHashValues.restaurant, text: "Restaurant & Bar" },

4
components/ContentType/HotelPage/index.tsx
View File

@@ -1,6 +1,7 @@
import { serverClient } from "@/lib/trpc/server"
import { MOCK_FACILITIES } from "./Facilities/mockData"
import { setActivityCard } from "./Facilities/utils"
import AmenitiesList from "./AmenitiesList"
import Facilities from "./Facilities"
import IntroSection from "./IntroSection"
@@ -28,8 +29,11 @@ export default async function HotelPage() {
hotelDetailedFacilities,
hotelImages,
roomCategories,
activitiesCard,
} = hotelData
MOCK_FACILITIES.push(setActivityCard(activitiesCard))
return (
<div className={styles.pageContainer}>
<div className={styles.topSection}>

28
lib/graphql/Query/HotelPage.graphql
View File

@@ -3,6 +3,34 @@ query GetHotelPage($locale: String!, $uid: String!) {
hotel_page_id
url
title
content {
... on HotelPageContentUpcomingActivitiesCard {
__typename
upcoming_activities_card {
background_image
cta_text
heading
body_text
open_in_new_tab
scripted_title
hotel_page_activities_content_pageConnection {
edges {
node {
... on ContentPage {
url
web {
original_url
}
system {
locale
}
}
}
}
}
}
}
}
}
}

47
server/routers/contentstack/hotelPage/output.ts
View File

@@ -1,6 +1,50 @@
import { z } from "zod"
import { HotelBlocksTypenameEnum } from "@/types/components/hotelPage/enums"
export const activityCardSchema = z.object({
background_image: z.any(),
cta_text: z.string(),
heading: z.string(),
open_in_new_tab: z.boolean(),
scripted_title: z.string().optional(),
body_text: z.string(),
hotel_page_activities_content_pageConnection: z.object({
edges: z.array(
z.object({
node: z.object({
url: z.string(),
web: z.object({
original_url: z.string().optional(),
}),
system: z.object({
locale: z.string(),
}),
}),
})
),
}),
})
export const validateHotelPageSchema = z.object({
hotel_page: z.object({
hotel_page_id: z.string(),
title: z.string(),
url: z.string(),
content: z
.array(
z.object({
__typename: z.literal(
HotelBlocksTypenameEnum.HotelPageContentUpcomingActivitiesCard
),
upcoming_activities_card: activityCardSchema.optional(),
})
)
.optional(),
}),
})
export const hotelPageSchema = z.object({
hotel_page: z.object({
hotel_page_id: z.string(),
title: z.string(),
@@ -12,5 +56,6 @@ export const validateHotelPageSchema = z.object({
export type HotelPageDataRaw = z.infer<typeof validateHotelPageSchema>
type HotelPageRaw = HotelPageDataRaw["hotel_page"]
export type HotelPage = HotelPageRaw
export type ActivityCard = z.infer<typeof activityCardSchema>

41
server/routers/hotels/query.ts
View File

@@ -17,6 +17,9 @@ import {
} from "@/server/trpc"
import { toApiLang } from "@/server/utils"
import { makeImageVaultImage } from "@/utils/imageVault"
import { removeMultipleSlashes } from "@/utils/url"
import {
HotelPageDataRaw,
validateHotelPageSchema,
@@ -37,6 +40,7 @@ import {
import tempFilterData from "./tempFilterData.json"
import tempRatesData from "./tempRatesData.json"
import { HotelBlocksTypenameEnum } from "@/types/components/hotelPage/enums"
import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
const meter = metrics.getMeter("trpc.hotels")
@@ -52,7 +56,10 @@ const availabilityFailCounter = meter.createCounter(
"trpc.hotel.availability-fail"
)
async function getHotelId(locale: string, uid: string | null | undefined) {
async function getContenstackData(
locale: string,
uid: string | null | undefined
) {
const rawContentStackData = await request<HotelPageDataRaw>(GetHotelPage, {
locale,
uid,
@@ -74,7 +81,7 @@ async function getHotelId(locale: string, uid: string | null | undefined) {
return null
}
return hotelPageData.data.hotel_page.hotel_page_id
return hotelPageData.data.hotel_page
}
export const hotelQueryRouter = router({
@@ -83,7 +90,8 @@ export const hotelQueryRouter = router({
.query(async ({ ctx, input }) => {
const { lang, uid } = ctx
const { include } = input
const hotelId = await getHotelId(lang, uid)
const contentstackData = await getContenstackData(lang, uid)
const hotelId = contentstackData?.hotel_page_id
if (!hotelId) {
throw notFound(`Hotel not found for uid: ${uid}`)
@@ -203,6 +211,32 @@ export const hotelQueryRouter = router({
})
: []
const activities = contentstackData?.content
? contentstackData.content.map((block: any) => {
switch (block.__typename) {
case HotelBlocksTypenameEnum.HotelPageContentUpcomingActivitiesCard:
return {
...block.upcoming_activities_card,
background_image: makeImageVaultImage(
block.upcoming_activities_card.background_image
),
contentPage:
block.upcoming_activities_card?.hotel_page_activities_content_pageConnection?.edges.map(
({ node: contentPage }: { node: any }) => {
return {
href:
contentPage.web?.original_url ||
removeMultipleSlashes(
`/${contentPage.system.locale}/${contentPage.url}`
),
}
}
),
}
}
})[0]
: null
getHotelSuccessCounter.add(1, { hotelId, lang, include })
console.info(
"api.hotels.hotel success",
@@ -219,6 +253,7 @@ export const hotelQueryRouter = router({
hotelDetailedFacilities: hotelAttributes.detailedFacilities,
hotelImages: images,
roomCategories,
activitiesCard: activities,
}
}),
availability: router({

3
types/components/hotelPage/enums.ts Normal file
View File

@@ -0,0 +1,3 @@
export enum HotelBlocksTypenameEnum {
HotelPageContentUpcomingActivitiesCard = "HotelPageContentUpcomingActivitiesCard",
}

6
utils/cardTheme.ts
View File

@@ -38,7 +38,11 @@ export function getTheme(theme: CardProps["theme"]) {
primaryLinkColor = "pale"
secondaryLinkColor = "burgundy"
break
case "primaryStrong" || "image":
case "primaryStrong":
buttonTheme = "primaryStrong"
primaryLinkColor = "red"
secondaryLinkColor = "white"
case "image":
buttonTheme = "primaryStrong"
primaryLinkColor = "red"
secondaryLinkColor = "white"