Reset the error and refresh the page when the search params change, to support the booking widget that is using router.push to navigate to the booking flow page

app/[lang]/(live)/error.tsx

@@ -1,7 +1,12 @@
 "use client" // Error components must be Client Components
 
-import { useParams, usePathname } from "next/navigation"
-import { useEffect } from "react"
+import {
+  useParams,
+  usePathname,
+  useRouter,
+  useSearchParams,
+} from "next/navigation"
+import { startTransition, useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { login } from "@/constants/routes/handleAuth"
@@ -15,11 +20,17 @@ import { LangParams } from "@/types/params"
 
 export default function Error({
   error,
+  reset,
 }: {
   error: Error & { digest?: string }
+  reset: () => void
 }) {
   const intl = useIntl()
   const params = useParams<LangParams>()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const currentSearchParamsRef = useRef<string>()
+  const isFirstLoadRef = useRef<boolean>(true)
 
   useEffect(() => {
     // Log the error to an error reporting service
@@ -31,6 +42,23 @@ export default function Error({
     }
   }, [error, params.lang])
 
+  useEffect(() => {
+    // This is to reset the error and refresh the page when the search params change, to support the booking widget that is using router.push to navigate to the booking flow page
+    const currentSearchParams = searchParams.toString()
+
+    if (
+      currentSearchParamsRef.current !== currentSearchParams &&
+      !isFirstLoadRef.current
+    ) {
+      startTransition(() => {
+        reset()
+        router.refresh()
+      })
+    }
+    isFirstLoadRef.current = false
+    currentSearchParamsRef.current = currentSearchParams
+  }, [searchParams, reset, router])
+
   const pathname = usePathname()
   const lang = findLang(pathname)