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

Merged in feat/SW-1084-spa-page (pull request #1117)

Browse Source 
Feat/SW-1084 Spa page option on Hotel page

* chore(SW-1084): add separate spa page from CS for hotel page

* fix(SW-1084): Cleanup


Approved-by: Erik Tiekstra
Approved-by: Fredrik Thorsson
This commit is contained in:
Matilda Landström
2025-01-08 15:08:24 +00:00
parent 894e607c5e
commit 85c9ec5b3b
11 changed files with 173 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx
View File

@@ -14,7 +14,8 @@ import type { WellnessAndExerciseSidePeekProps } from "@/types/components/hotelP
export default async function WellnessAndExerciseSidePeek({
healthFacilities,
buttonUrl,
wellnessExerciseButton,
spaPage,
}: WellnessAndExerciseSidePeekProps) {
const intl = await getIntl()
const lang = getLang()
@@ -29,13 +30,26 @@ export default async function WellnessAndExerciseSidePeek({
<Facility key={facility.type} data={facility} />
))}
</div>
{buttonUrl && (
{(spaPage || wellnessExerciseButton) && (
<div className={styles.buttonContainer}>
<Button fullWidth theme="base" intent="secondary" asChild>
<Link href={buttonUrl} weight="bold" color="burgundy">
{intl.formatMessage({ id: "Show wellness & exercise" })}
</Link>
</Button>
{spaPage && (
<Button fullWidth theme="base" intent="tertiary" asChild>
<Link weight="bold" href={spaPage.url}>
{spaPage.buttonCTA}
</Link>
</Button>
)}
{wellnessExerciseButton && (
<Button fullWidth theme="base" intent="secondary" asChild>
<Link
href={wellnessExerciseButton}
weight="bold"
color="burgundy"
>
{intl.formatMessage({ id: "Show wellness & exercise" })}
</Link>
</Button>
)}
</div>
)}
</SidePeek>

2
components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css
View File

@@ -15,4 +15,6 @@
position: absolute;
left: 0;
bottom: 0;
display: grid;
gap: var(--Spacing-x2);
}

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

@@ -9,7 +9,6 @@ import Breadcrumbs from "@/components/Breadcrumbs"
import SidePeekProvider from "@/components/SidePeeks/SidePeekProvider"
import Alert from "@/components/TempDesignSystem/Alert"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { getRestaurantHeading } from "@/utils/facilityCards"
@@ -43,6 +42,10 @@ import type { HotelPageProps } from "@/types/components/hotelPage/hotelPage"
import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
import type { Facility } from "@/types/hotel"
import { PageContentTypeEnum } from "@/types/requests/contentType"
import type {
ActivitiesCard,
SpaPage,
} from "@/types/trpc/routers/contentstack/hotelPage"
export default async function HotelPage({ hotelId }: HotelPageProps) {
const lang = getLang()
@@ -83,7 +86,8 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
const restaurants = hotelData.included?.restaurants || []
const images = gallery?.smallerImages
const description = hotelContent.texts.descriptions.medium
const activitiesCard = content?.[0]?.upcoming_activities_card || null
const { spaPage, activitiesCard } = content
const facilities: Facility[] = [
{
@@ -162,7 +166,10 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
) : null}
</div>
<Rooms rooms={roomCategories} />
<Facilities facilities={facilities} activitiesCard={activitiesCard} />
<Facilities
facilities={facilities}
activitiesCard={activitiesCard?.upcoming_activities_card}
/>
{faq.accordions.length > 0 && (
<AccordionSection accordion={faq.accordions} title={faq.title} />
)}
@@ -200,10 +207,15 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
ecoLabels={hotelFacts.ecoLabels}
descriptions={hotelContent.texts}
/>
<WellnessAndExerciseSidePeek healthFacilities={healthFacilities} />
<WellnessAndExerciseSidePeek
healthFacilities={healthFacilities}
spaPage={spaPage?.spa_page}
/>
<RestaurantBarSidePeek restaurants={restaurants} />
{activitiesCard && (
<ActivitiesSidePeek contentPage={activitiesCard.contentPage} />
<ActivitiesSidePeek
contentPage={activitiesCard.upcoming_activities_card.contentPage}
/>
)}
<MeetingsAndConferencesSidePeek
meetingFacilities={conferencesAndMeetings}

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

@@ -1,4 +1,5 @@
#import "../../Fragments/PageLink/AccountPageLink.graphql"
#import "../../Fragments/PageLink/CollectionPageLink.graphql"
#import "../../Fragments/PageLink/ContentPageLink.graphql"
#import "../../Fragments/PageLink/HotelPageLink.graphql"
#import "../../Fragments/PageLink/LoyaltyPageLink.graphql"
@@ -58,6 +59,19 @@ query GetHotelPage($locale: String!, $uid: String!) {
}
}
}
... on HotelPageContentSpaPage {
spa_page {
button_cta
pageConnection {
edges {
node {
...CollectionPageLink
...ContentPageLink
}
}
}
}
}
}
system {
...System

6
server/routers/contentstack/contentPage/output.ts
View File

@@ -209,12 +209,6 @@ export const contentPageSchema = z.object({
}),
})
export const contentPageSchemaBlocks = z.object({
content_page: z.object({
blocks: discriminatedUnionArray(blocksSchema.options).nullable(),
}),
})
/** REFS */
const contentPageCardsRefs = z
.object({

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

@@ -9,9 +9,14 @@ import {
activitiesCardSchema,
} from "../schemas/blocks/activitiesCard"
import { hotelFaqRefsSchema, hotelFaqSchema } from "../schemas/blocks/hotelFaq"
import { spaPageRefSchema, spaPageSchema } from "../schemas/blocks/spaPage"
import { systemSchema } from "../schemas/system"
import { HotelPageEnum } from "@/types/enums/hotelPage"
import type {
ActivitiesCard,
SpaPage,
} from "@/types/trpc/routers/contentstack/hotelPage"
const contentBlockActivities = z
.object({
@@ -19,13 +24,38 @@ const contentBlockActivities = z
})
.merge(activitiesCardSchema)
const contentBlockSpaPage = z
.object({
__typename: z.literal(HotelPageEnum.ContentStack.blocks.SpaPage),
})
.merge(spaPageSchema)
export const contentBlock = z.discriminatedUnion("__typename", [
contentBlockActivities,
contentBlockSpaPage,
])
export const hotelPageSchema = z.object({
hotel_page: z.object({
content: discriminatedUnionArray(contentBlock.options).nullable(),
content: discriminatedUnionArray(contentBlock.options)
.nullable()
.transform((data) => {
let spaPage: SpaPage | undefined
let activitiesCard: ActivitiesCard | undefined
data?.map((block) => {
switch (block.typename) {
case HotelPageEnum.ContentStack.blocks.ActivitiesCard:
activitiesCard = block
break
case HotelPageEnum.ContentStack.blocks.SpaPage:
spaPage = block
break
default:
break
}
})
return { spaPage, activitiesCard }
}),
faq: hotelFaqSchema,
hotel_page_id: z.string(),
title: z.string(),
@@ -40,14 +70,21 @@ export const hotelPageSchema = z.object({
})
/** REFS */
const hotelPageActiviesCardRefs = z
const hotelPageActivitiesCardRefs = z
.object({
__typename: z.literal(HotelPageEnum.ContentStack.blocks.ActivitiesCard),
})
.merge(activitiesCardRefSchema)
const hotelPageSpaPageRefs = z
.object({
__typename: z.literal(HotelPageEnum.ContentStack.blocks.SpaPage),
})
.merge(spaPageRefSchema)
const hotelPageBlockRefsItem = z.discriminatedUnion("__typename", [
hotelPageActiviesCardRefs,
hotelPageActivitiesCardRefs,
hotelPageSpaPageRefs,
])
export const hotelPageRefsSchema = z.object({

68
server/routers/contentstack/schemas/blocks/spaPage.ts Normal file
View File

@@ -0,0 +1,68 @@
import { z } from "zod"
import * as pageLinks from "@/server/routers/contentstack/schemas/pageLinks"
import { removeMultipleSlashes } from "@/utils/url"
import { HotelPageEnum } from "@/types/enums/hotelPage"
export const spaPageSchema = z.object({
typename: z
.literal(HotelPageEnum.ContentStack.blocks.SpaPage)
.optional()
.default(HotelPageEnum.ContentStack.blocks.SpaPage),
spa_page: z
.object({
button_cta: z.string(),
pageConnection: z.object({
edges: z.array(
z.object({
node: z.object({
title: z.string(),
url: z.string(),
system: z.object({
content_type_uid: z.string(),
locale: z.string(),
uid: z.string(),
}),
web: z.object({ original_url: z.string() }),
}),
})
),
}),
})
.transform((data) => {
let url = ""
if (data.pageConnection.edges.length) {
const page = data.pageConnection.edges[0].node
if (page.web.original_url) {
url = page.web.original_url
} else {
url = removeMultipleSlashes(`/${page.system.locale}/${page.url}`)
}
}
return {
buttonCTA: data.button_cta,
url: url,
}
}),
})
export const spaPageRefSchema = z.object({
spa_page: z
.object({
pageConnection: z.object({
edges: z.array(
z.object({
node: z.discriminatedUnion("__typename", [
pageLinks.contentPageRefSchema,
pageLinks.collectionPageRefSchema,
]),
})
),
}),
})
.transform((data) => {
return data.pageConnection.edges.flatMap(({ node }) => node.system) || []
}),
})

2
types/components/hotelPage/facilities.ts
View File

@@ -4,7 +4,7 @@ import type { CardProps } from "@/components/TempDesignSystem/Card/card"
export type FacilitiesProps = {
facilities: Facility[]
activitiesCard: ActivityCard | null
activitiesCard?: ActivityCard
}
export type FacilityImage = {

6
types/components/hotelPage/sidepeek/wellnessAndExercise.ts
View File

@@ -2,5 +2,9 @@ import type { Hotel } from "@/types/hotel"
export type WellnessAndExerciseSidePeekProps = {
healthFacilities: Hotel["healthFacilities"]
buttonUrl?: string
wellnessExerciseButton?: string
spaPage?: {
buttonCTA: string
url: string
}
}

1
types/enums/hotelPage.ts
View File

@@ -3,6 +3,7 @@ export namespace HotelPageEnum {
export const enum blocks {
Faq = "HotelPageFaq",
ActivitiesCard = "HotelPageContentUpcomingActivitiesCard",
SpaPage = "HotelPageContentSpaPage",
}
}
}

5
types/trpc/routers/contentstack/hotelPage.ts
View File

@@ -7,13 +7,16 @@ import type {
hotelPageUrlSchema,
} from "@/server/routers/contentstack/hotelPage/output"
import type { activitiesCardSchema } from "@/server/routers/contentstack/schemas/blocks/activitiesCard"
import type { spaPageSchema } from "@/server/routers/contentstack/schemas/blocks/spaPage"
export interface GetHotelPageData extends z.input<typeof hotelPageSchema> {}
export interface HotelPage extends z.output<typeof hotelPageSchema> {}
export interface ActivitiesCard extends z.output<typeof activitiesCardSchema> {}
export type ActivityCard = ActivitiesCard["upcoming_activities_card"]
export interface ContentBlock extends z.output<typeof contentBlock> {}
export interface SpaPage extends z.output<typeof spaPageSchema> {}
export type ContentBlock = z.output<typeof contentBlock>
export interface GetHotelPageRefsSchema
extends z.input<typeof hotelPageRefsSchema> {}