From 80f7e8e7f82c0e3eb932266956d45396bf6928b7 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Fri, 6 Dec 2024 12:45:01 +0100
Subject: [PATCH] fix(LOY-53): scroll to top of current rewards on page change

---
 .../Rewards/CurrentLevel/Client.tsx            | 18 +++++++++++++++---
 .../Rewards/CurrentLevel/current.module.css    |  2 ++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx b/components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx
index 7a31ea1d0..2b1f9f793 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx
+++ b/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>
diff --git a/components/Blocks/DynamicContent/Rewards/CurrentLevel/current.module.css b/components/Blocks/DynamicContent/Rewards/CurrentLevel/current.module.css
index f2ff4ca62..fe57e8167 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentLevel/current.module.css
+++ b/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);
 }