Merged in feat/SW-431-payment-flow (pull request #635)

Feat/SW-431 payment flow

* feat(SW-431): Update mock hotel data

* feat(SW-431): Added route handler and trpc routes

* feat(SW-431): List payment methods and handle booking status and redirection

* feat(SW-431): Updated booking page to poll for booking status

* feat(SW-431): Updated create booking contract

* feat(SW-431): small fix

* fix(SW-431): Added intl string and sorted dictionaries

* fix(SW-431): Changes from PR

* fix(SW-431): fixes from PR

* fix(SW-431): add todo comments

* fix(SW-431): update schema prop

Approved-by: Simon.Emanuelsson

app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/loading.tsx

@@ -0,0 +1,5 @@
+import LoadingSpinner from "@/components/LoadingSpinner"
+
+export default function Loading() {
+  return <LoadingSpinner />
+}

app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx

@@ -1,20 +1,67 @@
+"use client"
+
+import { useMemo } from "react"
+
+import {
+  BOOKING_CONFIRMATION_NUMBER,
+  BookingStatusEnum,
+} from "@/constants/booking"
+
 import IntroSection from "@/components/HotelReservation/BookingConfirmation/IntroSection"
 import StaySection from "@/components/HotelReservation/BookingConfirmation/StaySection"
 import SummarySection from "@/components/HotelReservation/BookingConfirmation/SummarySection"
 import { tempConfirmationData } from "@/components/HotelReservation/BookingConfirmation/tempConfirmationData"
+import LoadingSpinner from "@/components/LoadingSpinner"
+import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 
 import styles from "./page.module.css"
 
+const maxRetries = 10
+const retryInterval = 2000
+
 export default function BookingConfirmationPage() {
   const { email, hotel, stay, summary } = tempConfirmationData
 
-  return (
-    <main className={styles.main}>
-      <section className={styles.section}>
-        <IntroSection email={email} />
-        <StaySection hotel={hotel} stay={stay} />
-        <SummarySection summary={summary} />
-      </section>
-    </main>
+  const confirmationNumber = useMemo(() => {
+    if (typeof window === "undefined") return ""
+
+    const storedConfirmationNumber = sessionStorage.getItem(
+      BOOKING_CONFIRMATION_NUMBER
+    )
+    // TODO: cleanup stored values
+    // sessionStorage.removeItem(BOOKING_CONFIRMATION_NUMBER)
+    return storedConfirmationNumber
+  }, [])
+
+  const bookingStatus = useHandleBookingStatus(
+    confirmationNumber,
+    BookingStatusEnum.BookingCompleted,
+    maxRetries,
+    retryInterval
   )
+
+  if (
+    confirmationNumber === null ||
+    bookingStatus.isError ||
+    (bookingStatus.isFetched && !bookingStatus.data)
+  ) {
+    // TODO: handle error
+    throw new Error("Error fetching booking status")
+  }
+
+  if (
+    bookingStatus.data?.reservationStatus === BookingStatusEnum.BookingCompleted
+  ) {
+    return (
+      <main className={styles.main}>
+        <section className={styles.section}>
+          <IntroSection email={email} />
+          <StaySection hotel={hotel} stay={stay} />
+          <SummarySection summary={summary} />
+        </section>
+      </main>
+    )
+  }
+
+  return <LoadingSpinner />
 }