Files
web/components/Loyalty/Sidebar/JoinLoyalty/index.tsx

51 lines
1.8 KiB
TypeScript

import { login } from "@/constants/routes/handleAuth"
import { ScandicFriends } from "@/components/Levels"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import Contact from "./Contact"
import styles from "./joinLoyalty.module.css"
import type { JoinLoyaltyContactProps } from "@/types/components/loyalty/sidebar"
import { LangParams } from "@/types/params"
export default async function JoinLoyaltyContact({
block,
lang,
}: JoinLoyaltyContactProps & LangParams) {
const { formatMessage } = await getIntl()
return (
<section className={styles.container}>
<article className={styles.wrapper}>
<Title as="h4" level="h3">
{block.title}
</Title>
<ScandicFriends color="primaryLightOnSurfaceAccent" />
{block.preamble ? (
<Body textAlign="center">{block.preamble}</Body>
) : null}
<Button asChild intent="primary">
<Body asChild fontOnly textAlign="center" textTransform="bold">
<Link href={login[lang]}>
{formatMessage({ id: "Join Scandic Friends" })}
</Link>
</Body>
</Button>
<Footnote asChild fontOnly textAlign="center" textTransform="bold">
<Link color="burgundy" href={`/${lang}/login`}>
{formatMessage({ id: "Already a friend?" })} <br />
{formatMessage({ id: "Click here to log in" })}
</Link>
</Footnote>
</article>
{block.contact ? <Contact contactBlock={block.contact} /> : null}
</section>
)
}