82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
|
|
import { ScandicFriends } from "@/components/Levels"
|
|
import LoginButton from "@/components/LoginButton"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import { getIntl } from "@/i18n"
|
|
import { isLoggedInUser } from "@/utils/isLoggedInUser"
|
|
|
|
import Contact from "./Contact"
|
|
import ReadMore from "./ReadMore"
|
|
|
|
import styles from "./joinLoyalty.module.css"
|
|
|
|
import type { JoinLoyaltyContactProps } from "@/types/components/sidebar/joinLoyaltyContact"
|
|
|
|
export default async function JoinLoyaltyContact({
|
|
block,
|
|
}: JoinLoyaltyContactProps) {
|
|
const [intl, isLoggedIn] = await Promise.all([getIntl(), isLoggedInUser()])
|
|
|
|
if (isLoggedIn) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section className={styles.joinLoyaltyContainer}>
|
|
<article className={styles.wrapper}>
|
|
<Title as="h4" level="h3" textTransform="capitalize">
|
|
{block.title}
|
|
</Title>
|
|
<ScandicFriends color="red" />
|
|
{block.preamble ? (
|
|
<Body className={styles.preamble}>{block.preamble}</Body>
|
|
) : null}
|
|
{block.button ? (
|
|
<Button
|
|
asChild
|
|
intent="primary"
|
|
theme="base"
|
|
className={styles.button}
|
|
>
|
|
<Link
|
|
href={block.button.href}
|
|
color="white"
|
|
target={block.button.openInNewTab ? "_blank" : "_self"}
|
|
>
|
|
{block.button.title}
|
|
</Link>
|
|
</Button>
|
|
) : null}
|
|
<section className={styles.loginContainer}>
|
|
<Body>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Already a friend?",
|
|
})}
|
|
</Body>
|
|
<LoginButton
|
|
className={styles.link}
|
|
trackingId="loginJoinLoyalty"
|
|
position="join scandic friends sidebar"
|
|
>
|
|
<MaterialIcon
|
|
icon="arrow_forward"
|
|
color="CurrentColor"
|
|
className={styles.icon}
|
|
size={20}
|
|
/>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Log in here",
|
|
})}
|
|
</LoginButton>
|
|
</section>
|
|
</article>
|
|
{block.contact ? <Contact contactBlock={block.contact} /> : null}
|
|
<ReadMore />
|
|
</section>
|
|
)
|
|
}
|