62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Button } from "@scandic-hotels/design-system/Button"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import ExpiringPointsTable from "../ExpiringPoints/ExpiringPointsTable"
|
|
|
|
import styles from "./PointsToSpendCard.module.css"
|
|
|
|
interface ExpiringPointsSeeAllButtonProps {
|
|
expiringPoints: number
|
|
expiryDate: string
|
|
}
|
|
|
|
export default function ExpiringPointsSeeAllButton({
|
|
expiringPoints,
|
|
expiryDate,
|
|
}: ExpiringPointsSeeAllButtonProps) {
|
|
const intl = useIntl()
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
variant="Text"
|
|
size="Medium"
|
|
typography="Body/Paragraph/mdBold"
|
|
onPress={() => setIsOpen(true)}
|
|
>
|
|
{intl.formatMessage({ defaultMessage: "See all" })}
|
|
<MaterialIcon icon="chevron_right" color="CurrentColor" />
|
|
</Button>
|
|
<SidePeekSelfControlled
|
|
title={intl.formatMessage({ defaultMessage: "Expiring points" })}
|
|
isOpen={isOpen}
|
|
onClose={() => setIsOpen(false)}
|
|
>
|
|
<div className={styles.sidePeekContent}>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p>
|
|
{intl.formatMessage({
|
|
defaultMessage:
|
|
"Points expire three years after they are earned, on the last day of that month. Expiring points do not affect your level.",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
{/* TODO: The table will be rebuilt as part of the My Pages Optimisations 3 Epic. */}
|
|
<ExpiringPointsTable
|
|
points={expiringPoints}
|
|
expirationDate={expiryDate}
|
|
/>
|
|
</div>
|
|
</SidePeekSelfControlled>
|
|
</>
|
|
)
|
|
}
|