fix(LOY-137): now fetches surprises client side in intervals

components/MyPages/Surprises/Client.tsx

@@ -24,10 +24,13 @@ import Slide from "./Slide"
 import styles from "./surprises.module.css"
 
 import type { SurprisesProps } from "@/types/components/blocks/surprises"
+import type { Surprise } from "@/server/routers/contentstack/reward/output"
 
 const MotionModal = motion(Modal)
 
-export default function SurprisesNotification({ surprises }: SurprisesProps) {
+export default function SurprisesNotification({
+  surprises: initialData,
+}: SurprisesProps) {
   const lang = useLang()
   const intl = useIntl()
   const pathname = usePathname()
@@ -35,6 +38,20 @@ export default function SurprisesNotification({ surprises }: SurprisesProps) {
   const [[selectedSurprise, direction], setSelectedSurprise] = useState([0, 0])
   const [showSurprises, setShowSurprises] = useState(false)
   const utils = trpc.useUtils()
+
+  const { data: surprises } = trpc.contentstack.rewards.surprises.useQuery<
+    Surprise[]
+  >(
+    {
+      lang,
+    },
+    {
+      initialData,
+      refetchInterval: 1000 * 60 * 5, // every 5 minutes
+      refetchIntervalInBackground: false,
+    }
+  )
+
   const unwrap = trpc.contentstack.rewards.unwrap.useMutation({
     onSuccess: () => {
       utils.contentstack.rewards.current.invalidate({ lang })

server/routers/contentstack/reward/output.ts

@@ -223,6 +223,10 @@ export type RewardWithRedeem = CMSRewardWithRedeem & {
   couponCode: string | undefined
 }
 
+export interface Surprise extends Omit<Reward, "operaRewardId" | "couponCode"> {
+  coupons: { couponCode?: string | undefined; expiresAt?: string }[]
+}
+
 // New endpoint related types and schemas.
 const BaseReward = z.object({
   title: z.string().optional(),

server/routers/contentstack/reward/query.ts

@@ -19,6 +19,7 @@ import {
 } from "./input"
 import {
   type Reward,
+  type Surprise,
   validateApiRewardSchema,
   validateCategorizedRewardsSchema,
 } from "./output"
@@ -293,7 +294,9 @@ export const rewardQueryRouter = router({
 
       return { rewards }
     }),
-  surprises: contentStackBaseWithProtectedProcedure.query(async ({ ctx }) => {
+  surprises: contentStackBaseWithProtectedProcedure
+    .input(langInput.optional()) // lang is required for client, but not for server
+    .query(async ({ ctx }) => {
       getCurrentRewardCounter.add(1)
 
       const isNewEndpoint = env.USE_NEW_REWARDS_ENDPOINT
@@ -367,7 +370,7 @@ export const rewardQueryRouter = router({
 
       getCurrentRewardSuccessCounter.add(1)
 
-    const surprises = validatedApiRewards.data
+      const surprises: Surprise[] = validatedApiRewards.data
         // TODO: Add predicates once legacy endpoints are removed
         .filter((reward) => {
           if (reward?.rewardType !== "Surprise") {

types/components/blocks/surprises.ts

@@ -1,8 +1,4 @@
-import type { Reward } from "@/server/routers/contentstack/reward/output"
+import type { Surprise } from "@/server/routers/contentstack/reward/output"
-
-export interface Surprise extends Omit<Reward, "operaRewardId" | "couponCode"> {
-  coupons: { couponCode?: string | undefined; expiresAt?: string }[]
-}
 
 export interface SurprisesProps {
   surprises: Surprise[]