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

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

components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx

@@ -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}>
+          {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={buttonUrl} weight="bold" color="burgundy">
+              <Link
+                href={wellnessExerciseButton}
+                weight="bold"
+                color="burgundy"
+              >
                 {intl.formatMessage({ id: "Show wellness & exercise" })}
               </Link>
             </Button>
+          )}
         </div>
       )}
     </SidePeek>

components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css

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

components/ContentType/HotelPage/index.tsx

@@ -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}

lib/graphql/Query/HotelPage/HotelPage.graphql

@@ -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

server/routers/contentstack/contentPage/output.ts

@@ -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({

server/routers/contentstack/hotelPage/output.ts

@@ -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({

server/routers/contentstack/schemas/blocks/spaPage.ts

@@ -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) || []
+    }),
+})

types/components/hotelPage/facilities.ts

@@ -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 = {

types/components/hotelPage/sidepeek/wellnessAndExercise.ts

@@ -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
+  }
 }

types/enums/hotelPage.ts

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

types/trpc/routers/contentstack/hotelPage.ts

@@ -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> {}