From 483268825477aafe4470402f5ef96de9a354bf8a Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Tue, 11 Feb 2025 14:52:48 +0100
Subject: [PATCH] fix(LOY-136): rewards are no longer invalidated and refetched
 when redeeming rewards, instead it happens when modal is closed

---
 .../Blocks/DynamicContent/Rewards/Redeem/index.tsx     | 10 +++++++++-
 .../DynamicContent/Rewards/Redeem/useRedeemFlow.ts     |  5 +----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx b/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx
index e7d44c753..6d2eb81c5 100644
--- a/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx
+++ b/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx
@@ -10,8 +10,11 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { trpc } from "@/lib/trpc/client"
+
 import { CloseLargeIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
+import useLang from "@/hooks/useLang"
 
 import Campaign from "./Flows/Campaign"
 import Tier from "./Flows/Tier"
@@ -32,6 +35,8 @@ const MotionModal = motion(Modal)
 export default function Redeem({ reward, membershipNumber }: RedeemProps) {
   const [animation, setAnimation] = useState<RedeemModalState>("unmounted")
   const intl = useIntl()
+  const lang = useLang()
+  const utils = trpc.useUtils()
   const [redeemStep, setRedeemStep] = useState<RedeemStep>("initial")
 
   function modalStateHandler(newAnimationState: RedeemModalState) {
@@ -74,7 +79,10 @@ export default function Redeem({ reward, membershipNumber }: RedeemProps) {
                 <>
                   <header className={styles.modalHeader}>
                     <button
-                      onClick={close}
+                      onClick={() => {
+                        utils.contentstack.rewards.current.invalidate({ lang })
+                        close()
+                      }}
                       type="button"
                       className={styles.modalClose}
                     >
diff --git a/components/Blocks/DynamicContent/Rewards/Redeem/useRedeemFlow.ts b/components/Blocks/DynamicContent/Rewards/Redeem/useRedeemFlow.ts
index 743e856ab..1567e9a6d 100644
--- a/components/Blocks/DynamicContent/Rewards/Redeem/useRedeemFlow.ts
+++ b/components/Blocks/DynamicContent/Rewards/Redeem/useRedeemFlow.ts
@@ -22,8 +22,6 @@ export default function useRedeemFlow(reward: RewardWithRedeem) {
     rewards: RewardWithRedeem[]
   }>()
 
-  const utils = trpc.useUtils()
-
   const onRedeem = useCallback(() => {
     if (reward?.id) {
       update.mutate(
@@ -31,7 +29,6 @@ export default function useRedeemFlow(reward: RewardWithRedeem) {
         {
           onSuccess() {
             setRedeemStep("redeemed")
-            utils.contentstack.rewards.current.invalidate({ lang })
           },
           onError(error) {
             console.error("Failed to redeem", error)
@@ -39,7 +36,7 @@ export default function useRedeemFlow(reward: RewardWithRedeem) {
         }
       )
     }
-  }, [reward, update, setRedeemStep, utils.contentstack.rewards, lang])
+  }, [reward, update, setRedeemStep])
 
   return {
     onRedeem,