diff --git a/apps/scandic-web/components/CampaignBanner/Desktop.tsx b/apps/scandic-web/components/CampaignBanner/Desktop.tsx index df5e391c8..7b0901c15 100644 --- a/apps/scandic-web/components/CampaignBanner/Desktop.tsx +++ b/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 ( -
+ <> {tag} @@ -53,22 +51,16 @@ export function DesktopCampaignBanner({ {link ? ( - trackClick("BW read more")} - > - - {link.title || - intl.formatMessage({ - id: "common.readMore", - defaultMessage: "Read more", - })} - - + + {link.title || + intl.formatMessage({ + id: "common.readMore", + defaultMessage: "Read more", + })} + ) : null} -
+ ) } diff --git a/apps/scandic-web/components/CampaignBanner/Mobile.tsx b/apps/scandic-web/components/CampaignBanner/Mobile.tsx index e6a32897a..be36f757c 100644 --- a/apps/scandic-web/components/CampaignBanner/Mobile.tsx +++ b/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,91 +20,63 @@ export function MobileCampaignBanner({ }: CampaignBannerProps) { const intl = useIntl() - return ( - - {bookingCode ? ( -

- - - {tag} - - - - - {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} - <> ∙ {text} - - - {intl.formatMessage( - { - id: "campaignBanner.codeWithBookingCode", - defaultMessage: "Code: {bookingCode}", - }, - { bookingCode } - )} - - - - - -

- ) : ( - <> - - {tag} - - - - {text} + if (bookingCode) { + return ( +

+ + {tag} + + + + {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} + <> ∙ {text} + + + {intl.formatMessage( + { + id: "campaignBanner.codeWithBookingCode", + defaultMessage: "Code: {bookingCode}", + }, + { bookingCode } + )} + + - {link ? ( - - - {link.title || - intl.formatMessage({ - id: "common.readMore", - defaultMessage: "Read more", - })} - - - ) : null} - - - )} - - ) -} + + +

+ ) + } -function InnerContent({ - link, - bookingCode, - children, -}: React.PropsWithChildren>) { - return link ? ( - trackClick("BW campaign banner")} - > - {children} - - ) : ( -
- {children} -
+ return ( + <> + + {tag} + + + + {text} + + {link ? ( + + + {link.title || + intl.formatMessage({ + id: "common.readMore", + defaultMessage: "Read more", + })} + + + ) : null} + + ) } diff --git a/apps/scandic-web/components/CampaignBanner/campaignBanner.module.css b/apps/scandic-web/components/CampaignBanner/campaignBanner.module.css index e48d9aaad..1c2158514 100644 --- a/apps/scandic-web/components/CampaignBanner/campaignBanner.module.css +++ b/apps/scandic-web/components/CampaignBanner/campaignBanner.module.css @@ -22,10 +22,7 @@ text-decoration: none; color: var(--Text-Inverted); padding: var(--Space-x025) 0; - - &:not(.withBookingCode) { - gap: var(--Space-x15); - } + gap: var(--Space-x15); } .text { @@ -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; diff --git a/apps/scandic-web/components/CampaignBanner/constants.ts b/apps/scandic-web/components/CampaignBanner/constants.ts index ef62055ff..1ffd1bc88 100644 --- a/apps/scandic-web/components/CampaignBanner/constants.ts +++ b/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 = { diff --git a/apps/scandic-web/components/CampaignBanner/index.tsx b/apps/scandic-web/components/CampaignBanner/index.tsx index 9d657bbb8..226a0b457 100644 --- a/apps/scandic-web/components/CampaignBanner/index.tsx +++ b/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() { }} >
- {isMobile ? ( - - ) : ( - - )} + + {isMobile ? ( + + ) : ( + + )} + ) } + +function InnerContent({ + link, + children, +}: React.PropsWithChildren<{ + link: CampaignBannerProps["link"] +}>) { + return link ? ( + trackClick("BW campaign banner")} + > + {children} + + ) : ( +
{children}
+ ) +} diff --git a/apps/scandic-web/components/CampaignBanner/utils.ts b/apps/scandic-web/components/CampaignBanner/utils.ts index 8e523698d..861225797 100644 --- a/apps/scandic-web/components/CampaignBanner/utils.ts +++ b/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) } )