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,

components/MyPages/Surprises/Client.tsx

@@ -36,8 +36,11 @@ export default function SurprisesNotification({
   const [open, setOpen] = useState(true)
   const [[selectedSurprise, direction], setSelectedSurprise] = useState([0, 0])
   const [showSurprises, setShowSurprises] = useState(false)
+  const utils = trpc.useUtils()
   const unwrap = trpc.contentstack.rewards.unwrap.useMutation({
     onSuccess: () => {
+      utils.contentstack.rewards.current.invalidate({ lang })
+
       if (pathname.indexOf(benefits[lang]) !== 0) {
         toast.success(
           <>
@@ -57,6 +60,11 @@ export default function SurprisesNotification({
     },
     onError: (error) => {
       console.error("Failed to unwrap surprise", error)
+      toast.error(
+        <>
+          {intl.formatMessage({ id: "An error occurred. Please try again." })}
+        </>
+      )
     },
   })
 
@@ -77,7 +85,7 @@ export default function SurprisesNotification({
   async function viewRewards() {
     const updates = surprises
       .map((surprise) => {
-        const coupons = surprise.coupons
+        const coupons = surprise.coupon
           ?.map((coupon) => {
             if (coupon?.couponCode) {
               return {

components/MyPages/Surprises/Slide.tsx

@@ -16,7 +16,7 @@ export default function Slide({ surprise, membershipNumber }: SlideProps) {
   const lang = useLang()
   const intl = useIntl()
 
-  const earliestExpirationDate = surprise.coupons?.reduce(
+  const earliestExpirationDate = surprise.coupon?.reduce(
     (earliestDate, coupon) => {
       const expiresAt = dt(coupon.expiresAt)
       return earliestDate.isBefore(expiresAt) ? earliestDate : expiresAt
@@ -30,7 +30,7 @@ export default function Slide({ surprise, membershipNumber }: SlideProps) {
       <div className={styles.badge}>
         <Caption>
           {intl.formatMessage(
-            { id: "Expires at the earliest {expirationDate}" },
+            { id: "Valid through {expirationDate}" },
             {
               expirationDate: dt(earliestExpirationDate)
                 .locale(lang)