feat(LOY-23): redeem benefit modal

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

@@ -3,17 +3,19 @@
 import { trpc } from "@/lib/trpc/client"
 import { Reward } from "@/server/routers/contentstack/reward/output"
 
+import Image from "@/components/Image"
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Grids from "@/components/TempDesignSystem/Grids"
 import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import useLang from "@/hooks/useLang"
 
+import Redeem from "./Redeem"
+
 import styles from "./current.module.css"
 
-type CurrentRewardsClientProps = {
-  initialCurrentRewards: { rewards: Reward[]; nextCursor: number | undefined }
-}
+import type { CurrentRewardsClientProps } from "@/types/components/myPages/myPage/accountPage"
+
 export default function ClientCurrentRewards({
   initialCurrentRewards,
 }: CurrentRewardsClientProps) {
@@ -37,9 +39,10 @@ export default function ClientCurrentRewards({
       fetchNextPage()
     }
   }
-  const filteredRewards =
-    data?.pages.filter((page) => page && page.rewards) ?? []
-  const rewards = filteredRewards.flatMap((page) => page?.rewards) as Reward[]
+  const filteredRewards = data?.pages.filter((page) => page?.rewards) ?? []
+  const rewards = filteredRewards
+    .flatMap((page) => page?.rewards)
+    .filter((reward): reward is Reward => !!reward)
 
   if (isLoading) {
     return <LoadingSpinner />
@@ -54,14 +57,25 @@ export default function ClientCurrentRewards({
       <Grids.Stackable>
         {rewards.map((reward, idx) => (
           <article className={styles.card} key={`${reward.reward_id}-${idx}`}>
-            <Title
-              as="h4"
-              level="h3"
-              textAlign="center"
-              textTransform="regular"
-            >
-              {reward.label}
-            </Title>
+            <div className={styles.content}>
+              <Image
+                src="/_static/img/loyalty-award.png"
+                width={113}
+                height={125}
+                alt={reward.label || ""}
+              />
+              <Title
+                as="h4"
+                level="h3"
+                textAlign="center"
+                textTransform="regular"
+              >
+                {reward.label}
+              </Title>
+            </div>
+            <div className={styles.btnContainer}>
+              <Redeem reward={reward} />
+            </div>
           </article>
         ))}
       </Grids.Stackable>