refactor(SW-556): added a few missing pieces like translations and properties.

removed unneeded changes

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

@@ -1,10 +1,7 @@
 "use client"
 
 import { trpc } from "@/lib/trpc/client"
-import {
-  Reward,
-  SurpriseReward,
-} from "@/server/routers/contentstack/reward/output"
+import { Reward } from "@/server/routers/contentstack/reward/output"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Grids from "@/components/TempDesignSystem/Grids"
@@ -14,8 +11,9 @@ import useLang from "@/hooks/useLang"
 
 import styles from "./current.module.css"
 
-import type { CurrentRewardsClientProps } from "@/types/components/blocks/currentRewards"
-
+type CurrentRewardsClientProps = {
+  initialCurrentRewards: { rewards: Reward[]; nextCursor: number | undefined }
+}
 export default function ClientCurrentRewards({
   initialCurrentRewards,
 }: CurrentRewardsClientProps) {
@@ -34,30 +32,27 @@ export default function ClientCurrentRewards({
         },
       }
     )
-
-  if (isLoading) {
-    return <LoadingSpinner />
-  }
-
-  const cmsRewards =
-    data?.pages
-      .flatMap((page) => page?.rewards)
-      .filter((reward): reward is Reward => !!reward) ?? []
-
-  if (!cmsRewards.length) {
-    return null
-  }
-
   function loadMoreData() {
     if (hasNextPage) {
       fetchNextPage()
     }
   }
+  const filteredRewards =
+    data?.pages.filter((page) => page && page.rewards) ?? []
+  const rewards = filteredRewards.flatMap((page) => page?.rewards) as Reward[]
+
+  if (isLoading) {
+    return <LoadingSpinner />
+  }
+
+  if (!rewards.length) {
+    return null
+  }
 
   return (
-    <>
+    <div>
       <Grids.Stackable>
-        {cmsRewards.map((reward, idx) => (
+        {rewards.map((reward, idx) => (
           <article className={styles.card} key={`${reward.reward_id}-${idx}`}>
             <Title
               as="h4"
@@ -76,6 +71,6 @@ export default function ClientCurrentRewards({
         ) : (
           <ShowMoreButton loadMoreData={loadMoreData} />
         ))}
-    </>
+    </div>
   )
 }