web/hooks/booking/usePaymentFailedToast.ts

"use client"

import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { useCallback, useEffect } from "react"
import { useIntl } from "react-intl"

import { PaymentErrorCodeEnum } from "@/constants/booking"

import { toast } from "@/components/TempDesignSystem/Toasts"

export function usePaymentFailedToast() {
  const intl = useIntl()
  const searchParams = useSearchParams()
  const pathname = usePathname()
  const router = useRouter()

  const getErrorMessage = useCallback(
    (errorCode: PaymentErrorCodeEnum) => {
      switch (errorCode) {
        case PaymentErrorCodeEnum.Cancelled:
          return intl.formatMessage({ id: "payment.error.cancelled" })
        default:
          return intl.formatMessage({ id: "payment.error.failed" })
      }
    },
    [intl]
  )

  const errorCodeString = searchParams.get("errorCode")
  const errorCode = Number(errorCodeString) as PaymentErrorCodeEnum
  const errorMessage = getErrorMessage(errorCode)

  useEffect(() => {
    if (!errorCode) return

    // setTimeout is needed to show toasts on page load: https://sonner.emilkowal.ski/toast#render-toast-on-page-load
    setTimeout(() => {
      const toastType =
        errorCode === PaymentErrorCodeEnum.Cancelled ? "warning" : "error"

      toast[toastType](errorMessage)
    })

    const queryParams = new URLSearchParams(searchParams.toString())
    queryParams.delete("errorCode")
    router.replace(`${pathname}?${queryParams.toString()}`)
  }, [searchParams, router, pathname, errorCode, errorMessage])
}