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

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}