Merged in fix/SW-2462-room-availability-error (pull request #1920)

Fix/SW-2462 room availability error

* fix: added toast error when availability fails and you get redirect to select-rate

* fix: added support for showing alert when availability error happens

* fix: rename PaymentAlert -> BookingAlert


Approved-by: Erik Tiekstra

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useRouter, useSearchParams } from "next/navigation"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { useCallback, useEffect, useState } from "react"
 import { Label } from "react-aria-components"
 import { FormProvider, useForm } from "react-hook-form"
@@ -11,7 +11,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import {
   BOOKING_CONFIRMATION_NUMBER,
-  BookingErrorCodeEnum,
   BookingStatusEnum,
   PAYMENT_METHOD_TITLES,
   PaymentMethodEnum,
@@ -42,10 +41,10 @@ import { bedTypeMap } from "../../utils"
 import ConfirmBooking, { ConfirmBookingRedemption } from "../Confirm"
 import PriceChangeDialog from "../PriceChangeDialog"
 import { writeGlaToSessionStorage } from "./PaymentCallback/helpers"
+import BookingAlert from "./BookingAlert"
 import GuaranteeDetails from "./GuaranteeDetails"
 import { hasFlexibleRate, hasPrepaidRate, isPaymentMethodEnum } from "./helpers"
 import MixedRatePaymentBreakdown from "./MixedRatePaymentBreakdown"
-import PaymentAlert from "./PaymentAlert"
 import PaymentOptionsGroup from "./PaymentOptionsGroup"
 import { type PaymentFormData, paymentSchema } from "./schema"
 import TermsAndConditions from "./TermsAndConditions"
@@ -71,10 +70,11 @@ export default function PaymentClient({
   const router = useRouter()
   const lang = useLang()
   const intl = useIntl()
+  const pathname = usePathname()
   const searchParams = useSearchParams()
   const { getTopOffset } = useStickyPosition({})
 
-  const [showPaymentAlert, setShowPaymentAlert] = useState(false)
+  const [showBookingAlert, setShowBookingAlert] = useState(false)
 
   const { booking, rooms, totalPrice } = useEnterDetailsStore((state) => ({
     booking: state.booking,
@@ -135,11 +135,14 @@ export default function PaymentClient({
     onSuccess: (result) => {
       if (result) {
         if ("error" in result) {
-          if (result.cause === BookingErrorCodeEnum.AvailabilityError) {
-            window.location.reload() // reload to refetch room data because we dont know which room is unavailable
-          } else {
-            handlePaymentError(result.cause)
-          }
+          const queryParams = new URLSearchParams(searchParams.toString())
+          queryParams.set("errorCode", result.cause)
+          window.history.replaceState(
+            {},
+            "",
+            `${pathname}?${queryParams.toString()}`
+          )
+          handlePaymentError(result.cause)
           return
         }
 
@@ -196,7 +199,7 @@ export default function PaymentClient({
 
   const handlePaymentError = useCallback(
     (errorMessage: string) => {
-      setShowPaymentAlert(true)
+      setShowBookingAlert(true)
 
       const currentPaymentMethod = methods.getValues("paymentMethod")
       const smsEnable = methods.getValues("smsConfirmation")
@@ -480,7 +483,7 @@ export default function PaymentClient({
               ? confirm
               : payment}
         </Title>
-        <PaymentAlert isVisible={showPaymentAlert} />
+        <BookingAlert isVisible={showBookingAlert} />
       </header>
       <FormProvider {...methods}>
         <form