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