Merged in feat/booking-flow-submit (pull request #580)

This implements the actual call to the API to create a booking. That’s the only thing it does, it doesn’t handle the response in any way.

This PR is just to get it there and the new booking sub team will handle it further, with payment etc.

Approved-by: Michael Zetterberg
Approved-by: Fredrik Thorsson
Approved-by: Simon.Emanuelsson

components/HotelReservation/SelectRate/Payment/index.tsx

@@ -1,6 +1,62 @@
 "use client"
-import styles from "./payment.module.css"
+
+import { trpc } from "@/lib/trpc/client"
+
+import Button from "@/components/TempDesignSystem/Button"
 
 export default function Payment() {
-  return <div className={styles.wrapper}>Payment TBI</div>
+  const initiateBooking = trpc.booking.booking.create.useMutation({
+    onSuccess: (result) => {
+      // TODO: Handle success, poll for payment link and redirect the user to the payment
+      console.log("Res", result)
+    },
+    onError: () => {
+      // TODO: Handle error
+      console.log("Error")
+    },
+  })
+
+  return (
+    <Button
+      onClick={() =>
+        // TODO: Use real values
+        initiateBooking.mutate({
+          hotelId: "811",
+          checkInDate: "2024-12-10",
+          checkOutDate: "2024-12-11",
+          rooms: [
+            {
+              adults: 1,
+              children: 0,
+              rateCode: "SAVEEU",
+              roomTypeCode: "QC",
+              guest: {
+                title: "Mr",
+                firstName: "Test",
+                lastName: "User",
+                email: "test.user@scandichotels.com",
+                phoneCountryCodePrefix: "string",
+                phoneNumber: "string",
+                countryCode: "string",
+              },
+              smsConfirmationRequested: true,
+            },
+          ],
+          payment: {
+            cardHolder: {
+              Email: "test.user@scandichotels.com",
+              Name: "Test User",
+              PhoneCountryCode: "",
+              PhoneSubscriber: "",
+            },
+            success: "success/handle",
+            error: "error/handle",
+            cancel: "cancel/handle",
+          },
+        })
+      }
+    >
+      Create booking
+    </Button>
+  )
 }

components/HotelReservation/SelectRate/Payment/payment.module.css

@@ -1,2 +0,0 @@
-.wrapper {
-}