68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import Card from "./Card"
|
|
|
|
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!",
|
|
})}
|
|
>
|
|
<Body textAlign="center">
|
|
{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!",
|
|
})
|
|
)}
|
|
</Body>
|
|
<Caption>
|
|
{intl.formatMessage({
|
|
defaultMessage: "You'll find all your gifts in 'My benefits'",
|
|
})}
|
|
</Caption>
|
|
|
|
<Button
|
|
intent="primary"
|
|
onPress={onOpen}
|
|
size="medium"
|
|
theme="base"
|
|
fullWidth
|
|
autoFocus
|
|
>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "Open {amount, plural, one {gift} other {gifts}}",
|
|
},
|
|
{ amount: totalSurprises }
|
|
)}
|
|
</Button>
|
|
</Card>
|
|
)
|
|
}
|