63 lines
1.6 KiB
TypeScript
63 lines
1.6 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({ id: "Surprise!" })}>
|
|
<Body textAlign="center">
|
|
{totalSurprises > 1 ? (
|
|
<>
|
|
{intl.formatMessage<React.ReactNode>(
|
|
{
|
|
id: "You have <b>{amount}</b> gifts waiting for you!",
|
|
},
|
|
{
|
|
amount: totalSurprises,
|
|
b: (str) => <b>{str}</b>,
|
|
}
|
|
)}
|
|
<br />
|
|
{intl.formatMessage({
|
|
id: "Hurry up and use them before they expire!",
|
|
})}
|
|
</>
|
|
) : (
|
|
intl.formatMessage({
|
|
id: "We have a special gift waiting for you!",
|
|
})
|
|
)}
|
|
</Body>
|
|
<Caption>
|
|
{intl.formatMessage({
|
|
id: "You'll find all your gifts in 'My benefits'",
|
|
})}
|
|
</Caption>
|
|
|
|
<Button
|
|
intent="primary"
|
|
onPress={onOpen}
|
|
size="medium"
|
|
theme="base"
|
|
fullWidth
|
|
autoFocus
|
|
>
|
|
{intl.formatMessage(
|
|
{
|
|
id: "Open {amount, plural, one {gift} other {gifts}}",
|
|
},
|
|
{ amount: totalSurprises }
|
|
)}
|
|
</Button>
|
|
</Card>
|
|
)
|
|
}
|