fix(LOY-53): scroll to top of current rewards on page change

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useRef,useState } from "react"
 
 import Image from "@/components/Image"
 import Pagination from "@/components/MyPages/Pagination"
@@ -18,6 +18,7 @@ export default function ClientCurrentRewards({
   pageSize,
   showRedeem,
 }: CurrentRewardsClientProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
   const [currentPage, setCurrentPage] = useState(1)
 
   const totalPages = Math.ceil(rewards.length / pageSize)
@@ -25,8 +26,19 @@ export default function ClientCurrentRewards({
   const endIndex = startIndex + pageSize
   const currentRewards = rewards.slice(startIndex, endIndex)
 
+  function handlePageChange(page: number) {
+    requestAnimationFrame(() => {
+      setCurrentPage(page)
+      containerRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+        inline: "nearest",
+      })
+    })
+  }
+
   return (
-    <div className={styles.container}>
+    <div ref={containerRef} className={styles.container}>
       <Grids.Stackable>
         {currentRewards.map((reward, idx) => (
           <article className={styles.card} key={`${reward.reward_id}-${idx}`}>
@@ -58,7 +70,7 @@ export default function ClientCurrentRewards({
         <Pagination
           pageCount={totalPages}
           currentPage={currentPage}
-          handlePageChange={setCurrentPage}
+          handlePageChange={handlePageChange}
         />
       )}
     </div>

components/Blocks/DynamicContent/Rewards/CurrentLevel/current.module.css

@@ -128,4 +128,6 @@
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x4);
+  position: relative;
+  scroll-margin-top: calc(var(--current-mobile-site-header-height) * 2);
 }