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 })