73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import { Button } from "@scandic-hotels/design-system/Button"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import Card from "./Card"
|
|
|
|
import styles from "./surprises.module.css"
|
|
|
|
import type { InitialProps } from "@/types/components/blocks/surprises"
|
|
|
|
export default function Initial({ totalSurprises, onOpen }: InitialProps) {
|
|
const intl = useIntl()
|
|
|
|
return (
|
|
<Card
|
|
title={intl.formatMessage({
|
|
defaultMessage: "Surprise!",
|
|
})}
|
|
>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p className={styles.textCenter}>
|
|
{totalSurprises > 1 ? (
|
|
<>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage:
|
|
"You have <b>{amount}</b> gifts waiting for you!",
|
|
},
|
|
{
|
|
amount: totalSurprises,
|
|
b: (str) => <b>{str}</b>,
|
|
}
|
|
)}
|
|
<br />
|
|
{intl.formatMessage({
|
|
defaultMessage: "Hurry up and use them before they expire!",
|
|
})}
|
|
</>
|
|
) : (
|
|
intl.formatMessage({
|
|
defaultMessage: "We have a special gift waiting for you!",
|
|
})
|
|
)}
|
|
</p>
|
|
</Typography>
|
|
<Typography variant="Body/Supporting text (caption)/smRegular">
|
|
<p>
|
|
{intl.formatMessage({
|
|
defaultMessage: "You'll find all your gifts in 'My benefits'",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
|
|
<Button
|
|
variant="Primary"
|
|
onPress={onOpen}
|
|
size="Medium"
|
|
autoFocus
|
|
typography="Body/Paragraph/mdBold"
|
|
className={styles.widthFull}
|
|
>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "Open {amount, plural, one {gift} other {gifts}}",
|
|
},
|
|
{ amount: totalSurprises }
|
|
)}
|
|
</Button>
|
|
</Card>
|
|
)
|
|
}
|