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

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 }) {
       </div>
       <footer className={styles.modalFooter}>
         <Button
-          onClick={handleCopy}
+          onClick={() => {
+            navigator.clipboard.writeText(reward.operaRewardId)
+            toast.success(intl.formatMessage({ id: "Copied to clipboard" }))
+          }}
           type="button"
           variant="icon"
           size="small"

components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx

@@ -15,19 +15,20 @@ import useRedeemFlow from "../useRedeemFlow"
 
 import styles from "../redeem.module.css"
 
-import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output"
-
 export default function Tier({
-  reward,
   membershipNumber,
 }: {
-  reward: RewardWithRedeem
   membershipNumber: string
 }) {
-  const { onRedeem, redeemStep, setRedeemStep, isRedeeming } =
-    useRedeemFlow(reward)
+  const { reward, onRedeem, redeemStep, setRedeemStep, isRedeeming } =
+    useRedeemFlow()
+
   const intl = useIntl()
 
+  if (!reward) {
+    return null
+  }
+
   return (
     <>
       <div className={styles.modalContent}>