From b656023bac7d258423882c5fe07aad3d6970247b Mon Sep 17 00:00:00 2001 From: Christian Andolf Date: Wed, 12 Feb 2025 14:22:13 +0100 Subject: [PATCH 1/2] feat(LOY-61): add confirmation box to close when redeemed a reward --- .../Rewards/Redeem/ConfirmClose.tsx | 48 +++++++++++++ .../Rewards/Redeem/Flows/Campaign.tsx | 16 +++-- .../Rewards/Redeem/Flows/Tier.tsx | 13 ++-- .../Rewards/Redeem/TimedRedeemedBadge.tsx | 12 +++- .../DynamicContent/Rewards/Redeem/index.tsx | 68 +++++++++++++------ .../Rewards/Redeem/useRedeemFlow.ts | 26 ++++++- components/Countdown/index.tsx | 2 + i18n/dictionaries/da.json | 5 ++ i18n/dictionaries/de.json | 5 ++ i18n/dictionaries/en.json | 5 ++ i18n/dictionaries/fi.json | 5 ++ i18n/dictionaries/no.json | 5 ++ i18n/dictionaries/sv.json | 5 ++ types/components/countdown/index.ts | 1 + .../components/myPages/myPage/accountPage.ts | 12 +++- 15 files changed, 189 insertions(+), 39 deletions(-) create mode 100644 components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx diff --git a/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx b/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx new file mode 100644 index 000000000..6ac0942f4 --- /dev/null +++ b/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx @@ -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 ( + <> +
+ + {intl.formatMessage({ + id: "If you close this your benefit will be removed", + })} + + + {intl.formatMessage({ + id: "Have you showed this benefit to the hotel staff?", + })} + + + {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.", + })} + +
+ + + ) +} diff --git a/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx b/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx index 0adba114b..58c9e037e 100644 --- a/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx +++ b/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx @@ -10,17 +10,16 @@ import Title from "@/components/TempDesignSystem/Text/Title" import { toast } from "@/components/TempDesignSystem/Toasts" import { RewardIcon } from "../../RewardIcon" +import useRedeemFlow from "../useRedeemFlow" import styles from "../redeem.module.css" -import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output" - -export default function Campaign({ reward }: { reward: RewardWithRedeem }) { +export default function Campaign() { + const { reward } = useRedeemFlow() const intl = useIntl() - function handleCopy() { - navigator.clipboard.writeText(reward.operaRewardId) - toast.success(intl.formatMessage({ id: "Copied to clipboard" })) + if (!reward) { + return null } return ( @@ -42,7 +41,10 @@ export default function Campaign({ reward }: { reward: RewardWithRedeem }) {