Merged in feat/LOY-285-SAS-marketing-banner-my-pages (pull request #2544)

feat(LOY-285): SAS Link Account Banner for My Pages (Part 1) * feat(LOY-285): SAS Link Account Banner for My Pages * fix(LOY-285): )use new space variable * fix(LOY-285): add alt to images Approved-by: Matilda Landström
2025-07-11 08:37:25 +00:00
parent ab233fb1c0
commit 960787f82c
6 changed files with 252 additions and 0 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx
@@ -0,0 +1,134 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+import { getEurobonusMembership } from "@scandic-hotels/trpc/routers/user/helpers"
+
+import { getProfileWithExtendedPartnerData } from "@/lib/trpc/memoizedRequests"
+
+import ButtonLink from "@/components/ButtonLink"
+import Image from "@/components/Image"
+import { getIntl } from "@/i18n"
+import desktopBackground from "@/public/_static/img/sas/sas-scandic-link-account-banner-desktop.png"
+import mobileBackground from "@/public/_static/img/sas/sas-scandic-link-account-banner-mobile.png"
+
+import styles from "./linkAccountBanner.module.css"
+
+import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
+
+export default async function SASLinkAccountBanner(
+  props: DynamicContentProps["dynamic_content"]
+) {
+  const intl = await getIntl()
+  const user = await getProfileWithExtendedPartnerData()
+
+  if (!user || "error" in user || !user.loyalty) {
+    return null
+  }
+  const sasMembership = getEurobonusMembership(user.loyalty)
+  if (sasMembership) {
+    return null
+  }
+
+  function match() {
+    return (
+      <span key="match" className={styles.highlight}>
+        {intl.formatMessage({
+          defaultMessage: "MATCH",
+        })}
+      </span>
+    )
+  }
+
+  const headingText = intl.formatMessage(
+    {
+      defaultMessage: "A <match></match> MADE IN HEAVEN",
+    },
+    {
+      match,
+    }
+  )
+
+  const buttonText =
+    props.link?.text ||
+    intl.formatMessage({
+      defaultMessage: "Read more and link accounts",
+    })
+
+  function scandicFriends() {
+    return (
+      <span key="scandic-friends" className={styles.brandName}>
+        {intl.formatMessage({
+          defaultMessage: "Scandic Friends",
+        })}
+      </span>
+    )
+  }
+
+  function sasEuroBonus() {
+    return (
+      <span key="sas-eurobonus" className={styles.brandName}>
+        {intl.formatMessage({
+          defaultMessage: "SAS EuroBonus",
+        })}
+      </span>
+    )
+  }
+
+  const descriptionText = intl.formatMessage(
+    {
+      defaultMessage:
+        "Link your <scandicFriends></scandicFriends> and <sasEuroBonus></sasEuroBonus> accounts to earn, use and exchange points between memberships",
+    },
+    {
+      scandicFriends,
+      sasEuroBonus,
+    }
+  )
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.backgroundImage}>
+        <Image
+          src={mobileBackground}
+          alt="SAS Scandic Link Account Banner Mobile Background"
+          fill
+          className={styles.mobileImage}
+          priority
+        />
+        <Image
+          src={desktopBackground}
+          alt="SAS Scandic Link Account Banner Desktop Background"
+          fill
+          className={styles.desktopImage}
+          priority
+        />
+        <div className={styles.overlay} />
+      </div>
+
+      <div className={styles.content}>
+        <div className={styles.headingContainer}>
+          <Typography variant="Title/md">
+            <h2 className={styles.heading}>{headingText}</h2>
+          </Typography>
+        </div>
+
+        <div className={styles.descriptionContainer}>
+          <Typography variant="Body/Lead text">
+            <p>{descriptionText}</p>
+          </Typography>
+        </div>
+
+        {props.link?.href ? (
+          <div className={styles.buttonContainer}>
+            <ButtonLink
+              href={props.link.href}
+              variant="Primary"
+              color="Inverted"
+              size="Medium"
+            >
+              {buttonText}
+            </ButtonLink>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}