Merged in feat/SW-1001-multiple-activity-cards (pull request #1191)

Feat(SW-1001): Multiple activity cards on hotel page

* chore(SW-1001): render all activity cards

* chore(SW-1001): add sidepeek CTA text to CS

* feat(SW-1001): add slug from CS


Approved-by: Erik Tiekstra
Approved-by: Fredrik Thorsson

components/ContentType/HotelPage/Facilities/CardGrid/ActivitiesCardGrid.tsx

@@ -20,7 +20,7 @@ export default function ActivitiesCardGrid(activitiesCard: ActivityCard) {
     theme: hasImage ? "image" : "primaryDark",
     primaryButton: hasImage
       ? {
-          href: `#s-${activities[lang]}`,
+          href: `#s-${activitiesCard.sidepeekSlug}`,
           title: activitiesCard.ctaText,
           isExternal: false,
           scrollOnClick: false,
@@ -29,7 +29,7 @@ export default function ActivitiesCardGrid(activitiesCard: ActivityCard) {
     secondaryButton: hasImage
       ? undefined
       : {
-          href: `#s-${activities[lang]}`,
+          href: `#s-${activitiesCard.sidepeekSlug}`,
           title: activitiesCard.ctaText,
           isExternal: false,
           scrollOnClick: false,

components/ContentType/HotelPage/Facilities/index.tsx

@@ -16,9 +16,9 @@ import type {
 
 export default async function Facilities({
   facilities,
-  activitiesCard,
   amenities,
   healthFacilities,
+  activitiesCards,
 }: FacilitiesProps) {
   const intl = await getIntl()
 
@@ -56,7 +56,12 @@ export default async function Facilities({
           facilitiesCardGrid={cardGrid}
         />
       ))}
-      {activitiesCard && <ActivitiesCardGrid {...activitiesCard} />}
+      {activitiesCards.map((card) => (
+        <ActivitiesCardGrid
+          key={card.upcoming_activities_card.contentPage.href}
+          {...card.upcoming_activities_card}
+        />
+      ))}
     </SectionContainer>
   )
 }

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

@@ -13,20 +13,22 @@ import type { ActivitiesSidePeekProps } from "@/types/components/hotelPage/sidep
 
 export default async function ActivitiesSidePeek({
   contentPage,
+  sidepeekCTA,
+  sidepeekSlug,
 }: ActivitiesSidePeekProps) {
   const lang = getLang()
   const intl = await getIntl()
   const { href, preamble } = contentPage
   return (
     <SidePeek
-      contentKey={activities[lang]}
+      contentKey={sidepeekSlug}
       title={intl.formatMessage({ id: "Activities" })}
     >
       <Preamble>{preamble}</Preamble>
       <div className={styles.buttonContainer}>
         <Button theme="base" intent="secondary" asChild>
           <Link href={href} color="burgundy" weight="bold">
-            {intl.formatMessage({ id: "Show activities calendar" })}
+            {sidepeekCTA}
           </Link>
         </Button>
       </div>

components/ContentType/HotelPage/index.tsx

@@ -85,7 +85,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
   const images = gallery?.smallerImages
   const description = hotelContent.texts.descriptions.medium
 
-  const { spaPage, activitiesCard } = content
+  const { spaPage, activitiesCards } = content
 
   const facilities: Facility[] = [
     {
@@ -140,7 +140,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
       </header>
       <TabNavigation
         restaurantTitle={getRestaurantHeading(detailedFacilities)}
-        hasActivities={!!activitiesCard}
+        hasActivities={activitiesCards.length > 0}
         hasFAQ={!!faq.accordions.length}
       />
 
@@ -173,7 +173,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
         <Rooms rooms={roomCategories} preamble={hotelRoomElevatorPitchText} />
         <Facilities
           facilities={facilities}
-          activitiesCard={activitiesCard?.upcoming_activities_card}
+          activitiesCards={activitiesCards}
           amenities={detailedFacilities}
           healthFacilities={healthFacilities}
         />
@@ -220,11 +220,14 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
           spaPage={spaPage?.spa_page}
         />
         <RestaurantBarSidePeek restaurants={restaurants} />
-        {activitiesCard && (
+        {activitiesCards.map((card) => (
           <ActivitiesSidePeek
-            contentPage={activitiesCard.upcoming_activities_card.contentPage}
+            key={card.upcoming_activities_card.heading}
+            contentPage={card.upcoming_activities_card.contentPage}
+            sidepeekCTA={card.upcoming_activities_card.sidepeekCtaText}
+            sidepeekSlug={card.upcoming_activities_card.sidepeekSlug}
           />
-        )}
+        ))}
         <MeetingsAndConferencesSidePeek
           meetingFacilities={conferencesAndMeetings}
           descriptions={hotelContent.texts.meetingDescription}