Merged in feat/SW-618-payment-non-happy-path (pull request #874)

Feat/SW-618 payment non happy path

* feat(SW-618): filter out expired saved cards

* feat(SW-618): Added payment error codes and way of showing messages based on code

* feat(SW-618): show error message if max retries has been reached and remove search param after showing toast

* fix(SW-618): move fallback error codes

* fix(SW-618): remove ref from stopping useEffect to run twice

* fix(SW-618): refactored logic for toast message and minor fixes

* fix(SW-618): remove error message enum due to static analysis problems


Approved-by: Christian Andolf
Approved-by: Arvid Norlin

hooks/booking/useHandleBookingStatus.ts

@@ -1,19 +1,30 @@
 "use client"
 
+import { useRef } from "react"
+
 import { BookingStatusEnum } from "@/constants/booking"
 import { trpc } from "@/lib/trpc/client"
 
-export function useHandleBookingStatus(
-  confirmationNumber: string | null,
-  expectedStatus: BookingStatusEnum,
-  maxRetries: number,
+export function useHandleBookingStatus({
+  confirmationNumber,
+  expectedStatus,
+  maxRetries,
+  retryInterval,
+}: {
+  confirmationNumber: string | null
+  expectedStatus: BookingStatusEnum
+  maxRetries: number
   retryInterval: number
-) {
+}) {
+  const retries = useRef(0)
+
   const query = trpc.booking.status.useQuery(
     { confirmationNumber: confirmationNumber ?? "" },
     {
       enabled: !!confirmationNumber,
       refetchInterval: (query) => {
+        retries.current = query.state.dataUpdateCount
+
         if (query.state.error || query.state.dataUpdateCount >= maxRetries) {
           return false
         }
@@ -31,5 +42,8 @@ export function useHandleBookingStatus(
     }
   )
 
-  return query
+  return {
+    ...query,
+    isTimeout: retries.current >= maxRetries,
+  }
 }

hooks/booking/usePaymentFailedToast.ts

@@ -0,0 +1,48 @@
+"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])
+}