Feat/BOOK-424 campaign banner

Approved-by: Bianca Widstam

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

@@ -0,0 +1,74 @@
+"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"
+
+import styles from "./campaignBanner.module.css"
+
+import type { CampaignBannerProps } from "@/components/CampaignBanner/types"
+
+export function DesktopCampaignBanner({
+  tag,
+  text,
+  link,
+  bookingCode,
+}: CampaignBannerProps) {
+  const intl = useIntl()
+
+  return (
+    <div className={styles.innerContent}>
+      <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 className={styles.text}>
+            {text}
+            {bookingCode ? (
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <span className={styles.bookingCode}>
+                  <MaterialIcon color="CurrentColor" icon="sell" size={16} />
+                  {intl.formatMessage(
+                    {
+                      id: "campaignBanner.codeWithBookingCode",
+                      defaultMessage: "Code: {bookingCode}",
+                    },
+                    { bookingCode }
+                  )}
+                </span>
+              </Typography>
+            ) : null}
+          </span>
+        </Typography>
+
+        {link ? (
+          <Typography variant="Link/sm">
+            <NextLink
+              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>
+  )
+}