fix(LOY-39): refetch rewards when redeemed

update expiration date text

possible to redeem rewards with coupon code

components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx

@@ -2,27 +2,52 @@
 
 import { useRef, useState } from "react"
 
+import { trpc } from "@/lib/trpc/client"
+
 import { RewardIcon } from "@/components/Blocks/DynamicContent/Rewards/RewardIcon"
 import ScriptedRewardText from "@/components/Blocks/DynamicContent/Rewards/ScriptedRewardText"
 import Pagination from "@/components/MyPages/Pagination"
 import Grids from "@/components/TempDesignSystem/Grids"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import useLang from "@/hooks/useLang"
 
 import Redeem from "../Redeem"
 
 import styles from "./current.module.css"
 
 import type { CurrentRewardsClientProps } from "@/types/components/myPages/myPage/accountPage"
+import type {
+  Reward,
+  RewardWithRedeem,
+} from "@/server/routers/contentstack/reward/output"
 
 export default function ClientCurrentRewards({
-  rewards,
+  rewards: initialData,
   pageSize,
   showRedeem,
   membershipNumber,
 }: CurrentRewardsClientProps) {
+  const lang = useLang()
   const containerRef = useRef<HTMLDivElement>(null)
   const [currentPage, setCurrentPage] = useState(1)
 
+  const { data } = trpc.contentstack.rewards.current.useQuery<{
+    rewards: (Reward | RewardWithRedeem)[]
+  }>(
+    {
+      lang,
+    },
+    {
+      initialData: { rewards: initialData },
+    }
+  )
+
+  if (!data) {
+    return null
+  }
+
+  const rewards = data.rewards
+
   const totalPages = Math.ceil(rewards.length / pageSize)
   const startIndex = (currentPage - 1) * pageSize
   const endIndex = startIndex + pageSize

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

@@ -1,9 +1,11 @@
 "use client"
 
-import { createContext, useCallback, useContext, useState } from "react"
+import { createContext, useCallback, useContext } from "react"
 
 import { trpc } from "@/lib/trpc/client"
 
+import useLang from "@/hooks/useLang"
+
 import type { RedeemFlowContext } from "@/types/components/myPages/myPage/accountPage"
 import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output"
 
@@ -14,18 +16,22 @@ export const RedeemContext = createContext<RedeemFlowContext>({
 
 export default function useRedeemFlow(reward: RewardWithRedeem) {
   const { redeemStep, setRedeemStep } = useContext(RedeemContext)
+  const lang = useLang()
 
   const update = trpc.contentstack.rewards.redeem.useMutation<{
     rewards: RewardWithRedeem[]
   }>()
 
+  const utils = trpc.useUtils()
+
   const onRedeem = useCallback(() => {
     if (reward?.id) {
       update.mutate(
-        { rewardId: reward.id },
+        { rewardId: reward.id, couponCode: reward.couponCode },
         {
           onSuccess() {
             setRedeemStep("redeemed")
+            utils.contentstack.rewards.current.invalidate({ lang })
           },
           onError(error) {
             console.error("Failed to redeem", error)
@@ -33,7 +39,7 @@ export default function useRedeemFlow(reward: RewardWithRedeem) {
         }
       )
     }
-  }, [reward, update, setRedeemStep])
+  }, [reward, update, setRedeemStep, utils.contentstack.rewards, lang])
 
   return {
     onRedeem,