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/Desktop.tsx

@@ -1,11 +1,9 @@
 "use client"
 
-import NextLink from "next/link"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
-import { trackClick } from "@scandic-hotels/tracking/base"
 
 import { MarqueeText } from "@/components/MarqueeText"
 
@@ -22,7 +20,7 @@ export function DesktopCampaignBanner({
   const intl = useIntl()
 
   return (
-    <div className={styles.innerContent}>
+    <>
       <Typography variant="Tag/sm">
         <span className={styles.tag}>{tag}</span>
       </Typography>
@@ -53,22 +51,16 @@ export function DesktopCampaignBanner({
 
         {link ? (
           <Typography variant="Link/sm">
-            <NextLink
+            <span className={styles.fakeLink}>
-              href={link.url}
-              className={styles.link}
-              onClick={() => trackClick("BW read more")}
-            >
-              <span>
               {link.title ||
                 intl.formatMessage({
                   id: "common.readMore",
                   defaultMessage: "Read more",
                 })}
             </span>
-            </NextLink>
           </Typography>
         ) : null}
       </MarqueeText>
-    </div>
+    </>
   )
 }

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

@@ -1,12 +1,10 @@
 "use client"
 
 import { cx } from "class-variance-authority"
-import NextLink from "next/link"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
-import { trackClick } from "@scandic-hotels/tracking/base"
 
 import { MarqueeText } from "@/components/MarqueeText"
 
@@ -22,14 +20,11 @@ export function MobileCampaignBanner({
 }: CampaignBannerProps) {
   const intl = useIntl()
 
+  if (bookingCode) {
     return (
-    <InnerContent link={link} bookingCode={bookingCode}>
-      {bookingCode ? (
       <p>
         <Typography variant="Title/Overline/sm">
-            <span className={cx(styles.tag, styles.withBookingCode)}>
+          <span className={cx(styles.tag, styles.withBookingCode)}>{tag}</span>
-              {tag}
-            </span>
         </Typography>
         <Typography variant="Body/Supporting text (caption)/smRegular">
           <span>
@@ -54,7 +49,10 @@ export function MobileCampaignBanner({
           </span>
         </Typography>
       </p>
-      ) : (
+    )
+  }
+
+  return (
     <>
       <Typography variant="Tag/sm">
         <span className={styles.tag}>{tag}</span>
@@ -69,7 +67,7 @@ export function MobileCampaignBanner({
         </Typography>
         {link ? (
           <Typography variant="Link/sm">
-                <span>
+            <span className={styles.fakeLink}>
               {link.title ||
                 intl.formatMessage({
                   id: "common.readMore",
@@ -80,33 +78,5 @@ export function MobileCampaignBanner({
         ) : null}
       </MarqueeText>
     </>
-      )}
-    </InnerContent>
-  )
-}
-
-function InnerContent({
-  link,
-  bookingCode,
-  children,
-}: React.PropsWithChildren<Pick<CampaignBannerProps, "link" | "bookingCode">>) {
-  return link ? (
-    <NextLink
-      href={link.url}
-      className={cx(styles.innerContent, {
-        [styles.withBookingCode]: !!bookingCode,
-      })}
-      onClick={() => trackClick("BW campaign banner")}
-    >
-      {children}
-    </NextLink>
-  ) : (
-    <div
-      className={cx(styles.innerContent, {
-        [styles.withBookingCode]: !!bookingCode,
-      })}
-    >
-      {children}
-    </div>
   )
 }

apps/scandic-web/components/CampaignBanner/campaignBanner.module.css

@@ -22,11 +22,8 @@
   text-decoration: none;
   color: var(--Text-Inverted);
   padding: var(--Space-x025) 0;
-
-  &:not(.withBookingCode) {
   gap: var(--Space-x15);
 }
-}
 
 .text {
   display: flex;
@@ -61,10 +58,14 @@
   z-index: 1;
 }
 
-.link {
+.fakeLink {
   color: var(--Text-Inverted);
 }
 
+.innerContent:hover .fakeLink {
+  opacity: 0.7;
+}
+
 .bookingCode {
   display: inline-flex;
   align-items: center;

apps/scandic-web/components/CampaignBanner/constants.ts

@@ -7,6 +7,9 @@ const SHARED_HIDE_ROUTES = [
   "/hotelreservation/details",
   "/hotelreservation/booking-confirmation",
   "/hotelreservation/my-stay",
+  "/hotelreservation/gla-payment-callback",
+  "/hotelreservation/payment-callback",
+  "/hotelreservation/get-booking",
 ]
 
 export const CAMPAIGN_BANNER_HIDE_CONDITIONS = {

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,6 +100,7 @@ export default function CampaignBanner() {
       }}
     >
       <div className={styles.content}>
+        <InnerContent link={isOnSamePage ? null : campaignBanner.link}>
           {isMobile ? (
             <MobileCampaignBanner
               tag={campaignBanner.tag}
@@ -112,6 +116,7 @@ export default function CampaignBanner() {
               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>
+  )
+}

apps/scandic-web/components/CampaignBanner/utils.ts

@@ -22,7 +22,7 @@ export function shouldShowCampaignBanner(
       const fullRoute = removeTrailingSlash(
         removeMultipleSlashes(`/${lang}${route}`)
       )
-      return cleanPathname === fullRoute
+      return cleanPathname.startsWith(fullRoute)
     }
   )