web/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx

import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import Image from "@scandic-hotels/design-system/Image"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { scandicMembershipTypes } from "@scandic-hotels/trpc/routers/user/helpers"

import { getBasicProfileSafely } from "@/lib/trpc/memoizedRequests"

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 getBasicProfileSafely()

  if (!user || "error" in user || !user.loyalty) {
    return null
  }
  const sasMembership = user.loyalty.memberships?.some(
    (m) => m.membershipType === scandicMembershipTypes.SAS_EB
  )
  if (sasMembership) {
    return null
  }

  const headingText = intl.formatMessage({
    id: "sas.linkAccountBanner.earnFlightsWithNights",
    defaultMessage: "Earn flights with nights",
  })

  const buttonText =
    props.link?.text ||
    intl.formatMessage({
      id: "sas.linkAccountBanner.readMoreAndLinkAccounts",
      defaultMessage: "Read more and link accounts",
    })

  function scandicFriends() {
    return (
      <span key="scandic-friends" className={styles.brandName}>
        {intl.formatMessage({
          id: "common.scandicFriends",
          defaultMessage: "Scandic Friends",
        })}
      </span>
    )
  }

  function sasEuroBonus() {
    return (
      <span key="sas-eurobonus" className={styles.brandName}>
        {intl.formatMessage({
          id: "partnerSas.sasEuroBonus",
          defaultMessage: "SAS EuroBonus",
        })}
      </span>
    )
  }

  const descriptionText = intl.formatMessage(
    {
      id: "sas.linkAccountBanner.description",
      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="md"
            >
              {buttonText}
            </ButtonLink>
          </div>
        ) : null}
      </div>
    </div>
  )
}