fix(SW-2463): scroll to payment error

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"