Files
web/hooks/booking/usePaymentFailedToast.ts
2025-01-13 13:35:03 +01:00

66 lines
1.9 KiB
TypeScript

"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 { useEnterDetailsStore } from "@/stores/enter-details"
import { toast } from "@/components/TempDesignSystem/Toasts"
export function usePaymentFailedToast() {
const updateSearchParams = useEnterDetailsStore(
(state) => state.actions.updateSeachParamString
)
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: "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.",
})
}
},
[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")
updateSearchParams(queryParams.toString())
router.push(`${pathname}?${queryParams.toString()}`)
}, [
searchParams,
pathname,
errorCode,
errorMessage,
router,
updateSearchParams,
])
}