61 lines
1.9 KiB
TypeScript
61 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 useRedeemFlow from "./useRedeemFlow"
|
|
|
|
import styles from "./redeem.module.css"
|
|
|
|
export function ConfirmClose({ close }: { close: () => void }) {
|
|
const intl = useIntl()
|
|
const { setRedeemStep } = useRedeemFlow()
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.modalContent}>
|
|
<Typography variant="Title/smLowCase" className={styles.rewardLabel}>
|
|
<h3>
|
|
{intl.formatMessage({
|
|
id: "redeem.confirmClose.title",
|
|
defaultMessage: "If you close this your benefit will be removed",
|
|
})}
|
|
</h3>
|
|
</Typography>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p>
|
|
{intl.formatMessage({
|
|
id: "redeem.confirmClose.question",
|
|
defaultMessage:
|
|
"Have you showed this benefit to the hotel staff?",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p>
|
|
{intl.formatMessage({
|
|
id: "redeem.confirmClose.info",
|
|
defaultMessage:
|
|
"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.",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
</div>
|
|
<footer className={styles.modalFooter}>
|
|
<Button onPress={() => setRedeemStep("redeemed")} variant="Primary">
|
|
{intl.formatMessage({
|
|
id: "redeem.confirmClose.goBack",
|
|
defaultMessage: "No, go back",
|
|
})}
|
|
</Button>
|
|
<Button onPress={close} variant="Secondary">
|
|
{intl.formatMessage({
|
|
id: "redeem.confirmClose.confirm",
|
|
defaultMessage: "Yes, close and remove benefit",
|
|
})}
|
|
</Button>
|
|
</footer>
|
|
</>
|
|
)
|
|
}
|