Merged in feat/SW-1149-handle-status-polling (pull request #1562)

Feat/SW-1149 handle status polling

* feat(SW-1149): move terms and conditions sections to separate component and added copy

* feat(SW-1149): Added client component to handle success callback for payment flow

* fix: check for bookingCompleted status as well

* feat(SW-1587): use alert instead of toast for showing payment errors

* fix: added enum for payment callback status

* fix: proper way of checking for multiple statuses

* fix: update schema type

* fix: use localised link to customer service

* fix: update to use enum for status strings


Approved-by: Arvid Norlin

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentAlert/index.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import { usePathname, useSearchParams } from "next/navigation"
+import { useEffect, 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 styles from "./paymentAlert.module.css"
+
+import { AlertTypeEnum } from "@/types/enums/alert"
+
+function useBookingErrorAlert() {
+  const updateSearchParams = useEnterDetailsStore(
+    (state) => state.actions.updateSeachParamString
+  )
+  const intl = useIntl()
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
+
+  const errorCode = searchParams.get("errorCode")
+  const errorMessage = getErrorMessage(errorCode)
+  const severityLevel =
+    errorCode === BookingErrorCodeEnum.TransactionCancelled
+      ? AlertTypeEnum.Warning
+      : AlertTypeEnum.Alarm
+
+  const [showAlert, setShowAlert] = useState(!!errorCode)
+
+  function getErrorMessage(errorCode: string | null) {
+    switch (errorCode) {
+      case BookingErrorCodeEnum.TransactionCancelled:
+        return intl.formatMessage({
+          id: "You have now cancelled your payment.",
+        })
+      default:
+        return intl.formatMessage({
+          id: "We had an issue processing your booking. Please try again. No charges have been made.",
+        })
+    }
+  }
+
+  function discardAlert() {
+    setShowAlert(false)
+    const queryParams = new URLSearchParams(searchParams.toString())
+    queryParams.delete("errorCode")
+    updateSearchParams(queryParams.toString())
+
+    window.history.replaceState({}, "", `${pathname}?${queryParams.toString()}`)
+  }
+
+  return { showAlert, errorMessage, severityLevel, discardAlert, setShowAlert }
+}
+
+interface PaymentAlertProps {
+  isVisible?: boolean
+}
+
+export default function PaymentAlert({ isVisible = false }: PaymentAlertProps) {
+  const { showAlert, errorMessage, severityLevel, discardAlert, setShowAlert } =
+    useBookingErrorAlert()
+
+  useEffect(() => {
+    if (isVisible) {
+      setShowAlert(true)
+    }
+  }, [isVisible, setShowAlert])
+
+  if (!showAlert) return null
+
+  return (
+    <div className={styles.wrapper}>
+      <Alert
+        type={severityLevel}
+        variant="inline"
+        text={errorMessage}
+        close={discardAlert}
+      />
+    </div>
+  )
+}