feat(SW-962): add preamble

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

@@ -13,7 +13,7 @@ import { ActivitiesSidePeekProps } from "@/types/components/hotelPage/sidepeek/a
 
 export default async function ActivitiesSidePeek({
   preamble,
-  contentPage,
+  contentPageLink,
 }: ActivitiesSidePeekProps) {
   const lang = getLang()
   const intl = await getIntl()
@@ -23,15 +23,13 @@ export default async function ActivitiesSidePeek({
       title={intl.formatMessage({ id: "Activities" })}
     >
       <Preamble className={styles.preamble}>{preamble}</Preamble>
-      {contentPage?.href && (
+      <div className={styles.buttonContainer}>
-        <div className={styles.buttonContainer}>
+        <Button theme="base" intent="secondary" asChild>
-          <Button theme="base" intent="secondary" asChild>
+          <Link href={contentPageLink} color="burgundy" weight="bold">
-            <Link href={contentPage.href} color="burgundy" weight="bold">
+            {intl.formatMessage({ id: "Show activities calendar" })}
-              {intl.formatMessage({ id: "Show activities calendar" })}
+          </Link>
-            </Link>
+        </Button>
-          </Button>
+      </div>
-        </div>
-      )}
     </SidePeek>
   )
 }

components/ContentType/HotelPage/index.tsx

@@ -200,10 +200,12 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
           Restaurant & Bar
         </SidePeek>
         <WellnessAndExerciseSidePeek healthFacilities={healthFacilities} />
-        <ActivitiesSidePeek
+        {activitiesCard && (
-          preamble="This is content about activites"
+          <ActivitiesSidePeek
-          contentPage={activitiesCard?.contentPage}
+            preamble={activitiesCard.preamble}
-        />
+            contentPageLink={activitiesCard.contentPage.href}
+          />
+        )}
         <SidePeek
           contentKey={meetingsAndConferences[lang]}
           title={intl.formatMessage({ id: "Meetings & Conferences" })}

lib/graphql/Query/HotelPage/HotelPage.graphql

@@ -56,7 +56,12 @@ query GetHotelPage($locale: String!, $uid: String!) {
             edges {
               node {
                 __typename
-                ...ContentPageLink
+                ... on ContentPage {
+                  ...ContentPageLink
+                  header {
+                    preamble
+                  }
+                }
               }
             }
           }

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

@@ -25,7 +25,11 @@ export const activitiesCardSchema = z.object({
         edges: z.array(
           z.object({
             node: z.discriminatedUnion("__typename", [
-              pageLinks.contentPageSchema,
+              pageLinks.contentPageSchema.extend({
+                header: z.object({
+                  preamble: z.string(),
+                }),
+              }),
             ]),
           })
         ),
@@ -33,9 +37,11 @@ export const activitiesCardSchema = z.object({
     })
     .transform((data) => {
       let contentPage = { href: "" }
+      let preamble = ""
       if (data.hotel_page_activities_content_pageConnection.edges.length) {
         const page =
           data.hotel_page_activities_content_pageConnection.edges[0].node
+        preamble = page.header.preamble
         if (page.web.original_url) {
           contentPage = {
             href: page.web.original_url,
@@ -54,6 +60,7 @@ export const activitiesCardSchema = z.object({
         heading: data.heading,
         openInNewTab: !!data.open_in_new_tab,
         scriptedTopTitle: data.scripted_title,
+        preamble,
       }
     }),
 })

types/components/hotelPage/sidepeek/activities.ts

@@ -1,6 +1,4 @@
 export type ActivitiesSidePeekProps = {
   preamble: string
-  contentPage?: {
+  contentPageLink: string
-    href: string
-  }
 }