fix(BOOK-506): Hiding campaign banner on more hotel-reservation routes and make whole banner clickable

Approved-by: Bianca Widstam

apps/scandic-web/components/CampaignBanner/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import NextLink from "next/link"
 import { usePathname } from "next/navigation"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
@@ -19,6 +20,8 @@ import { shouldShowCampaignBanner } from "./utils"
 
 import styles from "./campaignBanner.module.css"
 
+import type { CampaignBannerProps } from "@/components/CampaignBanner/types"
+
 export default function CampaignBanner() {
   const lang = useLang()
   const intl = useIntl()
@@ -97,21 +100,23 @@ export default function CampaignBanner() {
       }}
     >
       <div className={styles.content}>
-        {isMobile ? (
-          <MobileCampaignBanner
-            tag={campaignBanner.tag}
-            text={campaignBanner.text}
-            link={isOnSamePage ? null : campaignBanner.link}
-            bookingCode={campaignBanner.booking_code}
-          />
-        ) : (
-          <DesktopCampaignBanner
-            tag={campaignBanner.tag}
-            text={campaignBanner.text}
-            link={isOnSamePage ? null : campaignBanner.link}
-            bookingCode={campaignBanner.booking_code}
-          />
-        )}
+        <InnerContent link={isOnSamePage ? null : campaignBanner.link}>
+          {isMobile ? (
+            <MobileCampaignBanner
+              tag={campaignBanner.tag}
+              text={campaignBanner.text}
+              link={isOnSamePage ? null : campaignBanner.link}
+              bookingCode={campaignBanner.booking_code}
+            />
+          ) : (
+            <DesktopCampaignBanner
+              tag={campaignBanner.tag}
+              text={campaignBanner.text}
+              link={isOnSamePage ? null : campaignBanner.link}
+              bookingCode={campaignBanner.booking_code}
+            />
+          )}
+        </InnerContent>
         <IconButton
           className={styles.closeButton}
           theme="Inverted"
@@ -128,3 +133,22 @@ export default function CampaignBanner() {
     </div>
   )
 }
+
+function InnerContent({
+  link,
+  children,
+}: React.PropsWithChildren<{
+  link: CampaignBannerProps["link"]
+}>) {
+  return link ? (
+    <NextLink
+      href={link.url}
+      className={styles.innerContent}
+      onClick={() => trackClick("BW campaign banner")}
+    >
+      {children}
+    </NextLink>
+  ) : (
+    <div className={styles.innerContent}>{children}</div>
+  )
+}