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

components/Blocks/DynamicContent/Rewards/Redeem/useRedeemFlow.ts

@@ -1,6 +1,6 @@
 "use client"
 
-import { createContext, useCallback, useContext } from "react"
+import { createContext, useCallback, useContext, useEffect } from "react"
 
 import { trpc } from "@/lib/trpc/client"
 
@@ -10,12 +10,23 @@ import type { RedeemFlowContext } from "@/types/components/myPages/myPage/accoun
 import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output"
 
 export const RedeemContext = createContext<RedeemFlowContext>({
+  reward: null,
   redeemStep: "initial",
   setRedeemStep: () => undefined,
+  defaultTimeRemaining: 0,
+  timeRemaining: 0,
+  setTimeRemaining: () => undefined,
 })
 
-export default function useRedeemFlow(reward: RewardWithRedeem) {
-  const { redeemStep, setRedeemStep } = useContext(RedeemContext)
+export default function useRedeemFlow() {
+  const {
+    reward,
+    redeemStep,
+    setRedeemStep,
+    defaultTimeRemaining,
+    timeRemaining,
+    setTimeRemaining,
+  } = useContext(RedeemContext)
   const lang = useLang()
 
   const update = trpc.contentstack.rewards.redeem.useMutation<{
@@ -38,10 +49,19 @@ export default function useRedeemFlow(reward: RewardWithRedeem) {
     }
   }, [reward, update, setRedeemStep])
 
+  useEffect(() => {
+    if (redeemStep === "initial") {
+      setTimeRemaining(defaultTimeRemaining)
+    }
+  }, [redeemStep, setTimeRemaining, defaultTimeRemaining])
+
   return {
+    reward,
     onRedeem,
     redeemStep,
     setRedeemStep,
     isRedeeming: update.isPending,
+    timeRemaining,
+    setTimeRemaining,
   }
 }