fix(SW-556): now fetching surprises separately in component.

also showing surprises on any account page

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

@@ -1,7 +1,10 @@
 "use client"
 
 import { trpc } from "@/lib/trpc/client"
-import { ApiReward, Reward } from "@/server/routers/contentstack/reward/output"
+import {
+  Reward,
+  SurpriseReward,
+} from "@/server/routers/contentstack/reward/output"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Grids from "@/components/TempDesignSystem/Grids"
@@ -9,15 +12,12 @@ 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"
 
 import type { CurrentRewardsClientProps } from "@/types/components/blocks/currentRewards"
 
 export default function ClientCurrentRewards({
   initialCurrentRewards,
-  membershipNumber,
 }: CurrentRewardsClientProps) {
   const lang = useLang()
   const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
@@ -39,18 +39,12 @@ export default function ClientCurrentRewards({
     return <LoadingSpinner />
   }
 
-  const rewards =
+  const cmsRewards =
     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) {
+  if (!cmsRewards.length) {
     return null
   }
 
@@ -63,7 +57,7 @@ export default function ClientCurrentRewards({
   return (
     <>
       <Grids.Stackable>
-        {rewards.map((reward, idx) => (
+        {cmsRewards.map((reward, idx) => (
           <article className={styles.card} key={`${reward.reward_id}-${idx}`}>
             <Title
               as="h4"
@@ -82,7 +76,6 @@ export default function ClientCurrentRewards({
         ) : (
           <ShowMoreButton loadMoreData={loadMoreData} />
         ))}
-      <Surprises surprises={surprises} membershipNumber={membershipNumber} />
     </>
   )
 }

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

@@ -1,4 +1,3 @@
-import { getProfile } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
@@ -23,19 +22,10 @@ export default async function CurrentRewardsBlock({
     return null
   }
 
-  const user = await getProfile()
-
-  if (!user || "error" in user) {
-    return null
-  }
-
   return (
     <SectionContainer>
       <SectionHeader title={title} link={link} preamble={subtitle} />
-      <ClientCurrentRewards
-        initialCurrentRewards={initialCurrentRewards}
-        membershipNumber={user.membership?.membershipNumber}
-      />
+      <ClientCurrentRewards initialCurrentRewards={initialCurrentRewards} />
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )

components/MyPages/Surprises/SurprisesNotification.tsx

@@ -6,6 +6,7 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import { benefits } from "@/constants/routes/myPages"
+import { dt } from "@/lib/dt"
 import { trpc } from "@/lib/trpc/client"
 
 import { ChevronRightSmallIcon, CloseLargeIcon } from "@/components/Icons"
@@ -22,7 +23,7 @@ import styles from "./surprises.module.css"
 
 import type { SurprisesProps } from "@/types/components/blocks/surprises"
 
-export default function Surprises({
+export default function SurprisesNotification({
   surprises,
   membershipNumber,
 }: SurprisesProps) {
@@ -45,8 +46,8 @@ export default function Surprises({
   }
 
   function viewRewards() {
-    if (surprise.id) {
-      update.mutate({ id: surprise.id })
+    if (surprise.reward_id) {
+      update.mutate({ id: surprise.reward_id })
     }
   }
 
@@ -105,13 +106,18 @@ export default function Surprises({
                 {showSurprises ? (
                   <>
                     <div className={styles.content}>
-                      <Surprise title={surprise.title}>
+                      <Surprise title={surprise.label}>
                         <Body textAlign="center">
                           This is just some dummy text describing the gift and
                           should be replaced.
                         </Body>
                         <div className={styles.badge}>
-                          <Caption>Valid through DD M YYYY</Caption>
+                          <Caption>
+                            Valid through{" "}
+                            {dt(surprise.endsAt)
+                              .locale(lang)
+                              .format("DD MMM YYYY")}
+                          </Caption>
                           <Caption>
                             {intl.formatMessage({ id: "Membership ID" })}{" "}
                             {membershipNumber}

components/MyPages/Surprises/index.tsx

@@ -0,0 +1,25 @@
+import { getProfile } from "@/lib/trpc/memoizedRequests"
+import { serverClient } from "@/lib/trpc/server"
+
+import SurprisesNotification from "./SurprisesNotification"
+
+export default async function Surprises() {
+  const user = await getProfile()
+
+  if (!user || "error" in user) {
+    return null
+  }
+
+  const surprises = await serverClient().contentstack.rewards.surprises()
+
+  if (!surprises) {
+    return null
+  }
+
+  return (
+    <SurprisesNotification
+      surprises={surprises}
+      membershipNumber={user.membership?.membershipNumber}
+    />
+  )
+}

components/Webviews/AccountPage/index.tsx

@@ -30,7 +30,6 @@ export default async function AccountPage() {
         {linkToOverview ? <LinkToOverview /> : null}
         <Blocks content={accountPage.content} />
       </MaxWidth>
-
       <TrackingSDK pageData={tracking} />
     </>
   )