scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
2025-11-06 14:48:13 +00:00
parent 78ac3b29c3
commit 11d53d0b15
6 changed files with 114 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
apps/scandic-web/components/CampaignBanner/Mobile.tsx
View File

@@ -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 (
<InnerContent link={link} bookingCode={bookingCode}>
{bookingCode ? (
<p>
<Typography variant="Title/Overline/sm">
<span className={cx(styles.tag, styles.withBookingCode)}>
{tag}
</span>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<> ∙ {text} </>
<Typography variant="Body/Supporting text (caption)/smBold">
<span className={styles.bookingCode}>
{intl.formatMessage(
{
id: "campaignBanner.codeWithBookingCode",
defaultMessage: "Code: {bookingCode}",
},
{ bookingCode }
)}
<MaterialIcon
icon="arrow_forward"
color="CurrentColor"
size={16}
/>
</span>
</Typography>
</span>
</Typography>
</p>
) : (
<>
<Typography variant="Tag/sm">
<span className={styles.tag}>{tag}</span>
</Typography>
<MarqueeText
backgroundColor="var(--Surface-Brand-Primary-3-Default)"
className={styles.marquee}
textWrapperClassName={styles.marqueeText}
>
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>{text}</span>
if (bookingCode) {
return (
<p>
<Typography variant="Title/Overline/sm">
<span className={cx(styles.tag, styles.withBookingCode)}>{tag}</span>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<> ∙ {text} </>
<Typography variant="Body/Supporting text (caption)/smBold">
<span className={styles.bookingCode}>
{intl.formatMessage(
{
id: "campaignBanner.codeWithBookingCode",
defaultMessage: "Code: {bookingCode}",
},
{ bookingCode }
)}
<MaterialIcon
icon="arrow_forward"
color="CurrentColor"
size={16}
/>
</span>
</Typography>
{link ? (
<Typography variant="Link/sm">
<span>
{link.title ||
intl.formatMessage({
id: "common.readMore",
defaultMessage: "Read more",
})}
</span>
</Typography>
) : null}
</MarqueeText>
</>
)}
</InnerContent>
)
}
</span>
</Typography>
</p>
)
}
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>
return (
<>
<Typography variant="Tag/sm">
<span className={styles.tag}>{tag}</span>
</Typography>
<MarqueeText
backgroundColor="var(--Surface-Brand-Primary-3-Default)"
className={styles.marquee}
textWrapperClassName={styles.marqueeText}
>
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>{text}</span>
</Typography>
{link ? (
<Typography variant="Link/sm">
<span className={styles.fakeLink}>
{link.title ||
intl.formatMessage({
id: "common.readMore",
defaultMessage: "Read more",
})}
</span>
</Typography>
) : null}
</MarqueeText>
</>
)
}