fix(LOY-136): rewards are no longer invalidated and refetched when redeeming rewards, instead it happens when modal is closed

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}
                     >

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,