feat(LOY-61): add confirmation box to close when redeemed a reward

2025-02-12 14:22:13 +01:00
parent 962836606e
commit b656023bac
15 changed files with 189 additions and 39 deletions
@@ -0,0 +1,48 @@
+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>
+    </>
+  )
+}