49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
|
|
import useRedeemFlow from "./useRedeemFlow"
|
|
|
|
import styles from "./redeem.module.css"
|
|
|
|
export function ConfirmClose({ close }: { close: VoidFunction }) {
|
|
const intl = useIntl()
|
|
const { setRedeemStep } = useRedeemFlow()
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.modalContent}>
|
|
<Title level="h3" textAlign="center" textTransform="regular">
|
|
{intl.formatMessage({
|
|
id: "If you close this your benefit will be removed",
|
|
})}
|
|
</Title>
|
|
<Body>
|
|
{intl.formatMessage({
|
|
id: "Have you showed this benefit to the hotel staff?",
|
|
})}
|
|
</Body>
|
|
<Body>
|
|
{intl.formatMessage({
|
|
id: "If not, please go back and do so before you close this. Once you close this your benefit will be void and removed from My Benefits.",
|
|
})}
|
|
</Body>
|
|
</div>
|
|
<footer className={styles.modalFooter}>
|
|
<Button
|
|
onClick={() => setRedeemStep("redeemed")}
|
|
intent="primary"
|
|
theme="base"
|
|
>
|
|
{intl.formatMessage({ id: "No, go back" })}
|
|
</Button>
|
|
<Button onClick={close} intent="secondary" theme="base">
|
|
{intl.formatMessage({ id: "Yes, close and remove benefit" })}
|
|
</Button>
|
|
</footer>
|
|
</>
|
|
)
|
|
}
|