120 lines
3.3 KiB
TypeScript
120 lines
3.3 KiB
TypeScript
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 { getEurobonusMembership } from "@scandic-hotels/trpc/routers/user/helpers"
|
|
|
|
import { getProfileWithExtendedPartnerData } 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 getProfileWithExtendedPartnerData()
|
|
|
|
if (!user || "error" in user || !user.loyalty) {
|
|
return null
|
|
}
|
|
const sasMembership = getEurobonusMembership(user.loyalty)
|
|
if (sasMembership) {
|
|
return null
|
|
}
|
|
|
|
const headingText = intl.formatMessage({
|
|
defaultMessage: "Earn flights with nights",
|
|
})
|
|
|
|
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>
|
|
)
|
|
}
|