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"

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