feat(SW-556): add surprise notification component

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

@@ -1,7 +1,7 @@
 "use client"
 
 import { trpc } from "@/lib/trpc/client"
-import { Reward } from "@/server/routers/contentstack/reward/output"
+import { ApiReward, Reward } from "@/server/routers/contentstack/reward/output"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Grids from "@/components/TempDesignSystem/Grids"
@@ -9,10 +9,16 @@ import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import useLang from "@/hooks/useLang"
 
+import Surprises from "../Surprises"
+
 import styles from "./current.module.css"
 
 type CurrentRewardsClientProps = {
-  initialCurrentRewards: { rewards: Reward[]; nextCursor: number | undefined }
+  initialCurrentRewards: {
+    rewards: Reward[]
+    apiRewards: ApiReward[]
+    nextCursor: number | undefined
+  }
 }
 export default function ClientCurrentRewards({
   initialCurrentRewards,
@@ -32,25 +38,34 @@ export default function ClientCurrentRewards({
         },
       }
     )
-  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) {
+  const rewards =
+    data?.pages
+      .flatMap((page) => page?.rewards)
+      .filter((reward): reward is Reward => !!reward) ?? []
+
+  const surprises =
+    data?.pages
+      .flatMap((page) => page?.apiRewards)
+      .filter((reward): reward is ApiReward => reward?.type === "surprise") ??
+    []
+
+  if (!rewards.length && !surprises.length) {
     return null
   }
 
+  function loadMoreData() {
+    if (hasNextPage) {
+      fetchNextPage()
+    }
+  }
+
   return (
-    <div>
+    <>
       <Grids.Stackable>
         {rewards.map((reward, idx) => (
           <article className={styles.card} key={`${reward.reward_id}-${idx}`}>
@@ -71,6 +86,7 @@ export default function ClientCurrentRewards({
         ) : (
           <ShowMoreButton loadMoreData={loadMoreData} />
         ))}
-    </div>
+      <Surprises surprises={surprises} />
+    </>
   )
 }