From 0cd2e9c89f92d59b1214a23fb96ee1c0759e90f9 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Wed, 30 Apr 2025 10:52:53 +0200
Subject: [PATCH] fix(SW-2463): scroll to payment error

---
 .../Payment/PaymentAlert/index.tsx            | 19 +++++++++++++++++--
 .../Summary/Mobile/BottomSheet/index.tsx      | 18 ++++++++++++------
 apps/scandic-web/hooks/useStickyPosition.ts   |  4 ++--
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentAlert/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentAlert/index.tsx
index 3392eccf6..4f7c395b5 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentAlert/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentAlert/index.tsx
@@ -1,13 +1,14 @@
 "use client"
 
 import { usePathname, useSearchParams } from "next/navigation"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { BookingErrorCodeEnum } from "@/constants/booking"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import Alert from "@/components/TempDesignSystem/Alert"
+import useStickyPosition from "@/hooks/useStickyPosition"
 
 import styles from "./paymentAlert.module.css"
 
@@ -64,16 +65,30 @@ export default function PaymentAlert({ isVisible = false }: PaymentAlertProps) {
   const { showAlert, errorMessage, severityLevel, discardAlert, setShowAlert } =
     useBookingErrorAlert()
 
+  const ref = useRef<HTMLDivElement>(null)
+  const { getTopOffset } = useStickyPosition()
+
   useEffect(() => {
     if (isVisible) {
       setShowAlert(true)
     }
   }, [isVisible, setShowAlert])
 
+  useEffect(() => {
+    const el = ref.current
+
+    if (showAlert && el) {
+      window.scrollTo({
+        top: el.offsetTop - getTopOffset(),
+        behavior: "smooth",
+      })
+    }
+  }, [showAlert, getTopOffset])
+
   if (!showAlert) return null
 
   return (
-    <div className={styles.wrapper}>
+    <div className={styles.wrapper} ref={ref}>
       <Alert
         type={severityLevel}
         variant="inline"
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx
index 041c18e7b..71b017e28 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { useSearchParams } from "next/navigation"
 import { type PropsWithChildren, useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
@@ -16,6 +17,8 @@ import styles from "./bottomSheet.module.css"
 export default function SummaryBottomSheet({ children }: PropsWithChildren) {
   const intl = useIntl()
   const scrollY = useRef(0)
+  const searchParams = useSearchParams()
+  const errorCode = searchParams.get("errorCode")
 
   const { isSummaryOpen, toggleSummaryOpen, totalPrice, isSubmittingDisabled } =
     useEnterDetailsStore((state) => ({
@@ -33,18 +36,21 @@ export default function SummaryBottomSheet({ children }: PropsWithChildren) {
     } else {
       document.body.style.position = ""
       document.body.style.top = ""
-      window.scrollTo({
-        top: scrollY.current,
-        left: 0,
-        behavior: "instant",
-      })
+
+      if (!errorCode) {
+        window.scrollTo({
+          top: scrollY.current,
+          left: 0,
+          behavior: "instant",
+        })
+      }
     }
 
     return () => {
       document.body.style.position = ""
       document.body.style.top = ""
     }
-  }, [isSummaryOpen])
+  }, [isSummaryOpen, errorCode])
 
   return (
     <div className={styles.wrapper} data-open={isSummaryOpen}>
diff --git a/apps/scandic-web/hooks/useStickyPosition.ts b/apps/scandic-web/hooks/useStickyPosition.ts
index 8cc9a4eef..e69eb45ed 100644
--- a/apps/scandic-web/hooks/useStickyPosition.ts
+++ b/apps/scandic-web/hooks/useStickyPosition.ts
@@ -24,7 +24,7 @@ let resizeObserver: ResizeObserver | null = null
  * This hook registers an element as sticky, calculates its top offset based on
  * other registered sticky elements, and updates the element's position dynamically.
  *
- * @param {UseStickyPositionProps} props - The properties for configuring the hook.
+ * @param {UseStickyPositionProps} [props] - The properties for configuring the hook.
  * @param {React.RefObject<HTMLElement>} [props.ref] - A reference to the HTML element that should be sticky. Is optional to allow for other components to only get the height of the sticky elements.
  * @param {StickyElementNameEnum} [props.name] - A unique name for the sticky element, used for tracking.
  * @param {string} [props.group] - An optional group identifier to make multiple elements share the same top offset. Defaults to the name if not provided.
@@ -37,7 +37,7 @@ export default function useStickyPosition({
   ref,
   name,
   group,
-}: UseStickyPositionProps) {
+}: UseStickyPositionProps = {}) {
   const {
     registerSticky,
     unregisterSticky,