feat(SW-3121): Added support for campaign text inside the hero of campaign pages

* fix: making sure the cacheKey for getHotelsByHotelIds is not sorting the original array

Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/CampaignPage/Hero/hero.module.css

@@ -33,11 +33,14 @@
     background-color: var(--Surface-Brand-Accent-Default);
   }
 
-  .heading {
+  .heading,
+  .highlight,
+  .rateText {
     color: var(--Text-Brand-OnAccent-Heading);
   }
 
-  .text {
+  .text,
+  .campaignText {
     color: var(--Text-Brand-OnPrimary-1-Default);
   }
 
@@ -51,12 +54,18 @@
     background-color: var(--Surface-Brand-Primary-3-Default);
   }
 
-  .heading {
+  .highlight {
+    color: var(--Text-Brand-OnPrimary-3-Heading);
+  }
+
+  .heading,
+  .rateText {
     color: var(--Text-Brand-OnPrimary-3-Accent);
   }
 
   .benefitList > li,
-  .text {
+  .text,
+  .campaignText {
     color: var(--Text-Brand-OnPrimary-3-Default);
   }
 }

apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx

@@ -25,6 +25,7 @@ export default async function CampaignHero({
   heading,
   benefits,
   rate_text,
+  campaign_text,
   button,
   theme,
   pageType = "campaign",
@@ -73,6 +74,23 @@ export default async function CampaignHero({
             ))}
           </ul>
         ) : null}
+        {pageType === "campaign" && campaign_text ? (
+          <p className={styles.campaignText}>
+            {campaign_text.text ? (
+              <Typography variant="Body/Paragraph/mdRegular">
+                <span>{campaign_text.text}</span>
+              </Typography>
+            ) : null}
+            {campaign_text.bold_text && campaign_text.text ? " " : null}
+            {campaign_text.bold_text ? (
+              <Typography variant="Body/Paragraph/mdBold">
+                <span className={styles.highlight}>
+                  {campaign_text.bold_text}
+                </span>
+              </Typography>
+            ) : null}
+          </p>
+        ) : null}
         <Divider
           color={
             theme === "Peach"
@@ -81,7 +99,7 @@ export default async function CampaignHero({
           }
         />
         {rate_text ? (
-          <span className={styles.heading}>
+          <p className={styles.rateText}>
             {rate_text.bold_text ? (
               <Typography variant="Title/Subtitle/lg">
                 <span>{rate_text.bold_text}</span>
@@ -93,7 +111,7 @@ export default async function CampaignHero({
                 <span>{rate_text.text}</span>
               </Typography>
             ) : null}
-          </span>
+          </p>
         ) : null}
         {button ? (
           <ButtonLink

packages/trpc/lib/graphql/Fragments/CampaignPage/Hero.graphql

@@ -32,6 +32,10 @@ fragment Hero_CampaignPage on CampaignPage {
       bold_text
       text
     }
+    campaign_text {
+      text
+      bold_text
+    }
     button {
       cta
       linkConnection {

packages/trpc/lib/routers/contentstack/campaignPage/output.ts

@@ -68,7 +68,25 @@ export const heroSchema = z.object({
       bold_text: z.string().nullish(),
       text: z.string().nullish(),
     })
-    .nullish(),
+    .nullish()
+    .transform((data) => {
+      if (data?.bold_text || data?.text) {
+        return data
+      }
+      return null
+    }),
+  campaign_text: z
+    .object({
+      text: z.string().nullish(),
+      bold_text: z.string().nullish(),
+    })
+    .nullish()
+    .transform((data) => {
+      if (data?.bold_text || data?.text) {
+        return data
+      }
+      return null
+    }),
   button: z
     .intersection(z.object({ cta: z.string() }), linkConnectionSchema)
     .transform((data) => {

packages/trpc/lib/routers/hotels/utils.ts

@@ -359,7 +359,7 @@ export async function getHotelsByHotelIds({
   contentType?: "hotel" | "restaurant" | "meeting"
 }) {
   const cacheClient = await getCacheClient()
-  const cacheKey = `${lang}:getHotelsByHotelIds:hotels:${contentType}:${hotelIds.sort().join(",")}`
+  const cacheKey = `${lang}:getHotelsByHotelIds:hotels:${contentType}:${[...hotelIds].sort().join(",")}`
 
   return await cacheClient.cacheOrGet(
     cacheKey,