113 lines
3.2 KiB
TypeScript
113 lines
3.2 KiB
TypeScript
"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"
|
|
|
|
import styles from "./campaignBanner.module.css"
|
|
|
|
import type { CampaignBannerProps } from "./types"
|
|
|
|
export function MobileCampaignBanner({
|
|
tag,
|
|
text,
|
|
link,
|
|
bookingCode,
|
|
}: 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>
|
|
</Typography>
|
|
{link ? (
|
|
<Typography variant="Link/sm">
|
|
<span>
|
|
{link.title ||
|
|
intl.formatMessage({
|
|
id: "common.readMore",
|
|
defaultMessage: "Read more",
|
|
})}
|
|
</span>
|
|
</Typography>
|
|
) : 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>
|
|
)
|
|
}
|