Booking page state improvements.

src/api/api-booking.tsx

@@ -9,13 +9,21 @@ export async function APISendCreateBooking(bookingData: NewBooking | null) {
     };
   }
 
-  const rs = await fetcherWithFilter<NewBookingResponse>(
+  try {
-    "/api/booking/create",
+    const rs = await fetcherWithFilter<NewBookingResponse>(
-    bookingData,
+      "/api/booking/create",
-  );
+      bookingData,
+    );
 
-  return {
+    return {
-    bookingResponse: rs,
+      bookingResponse: rs,
-    isError: false,
+      isError: false,
-  };
+    };
+  } catch (error) {
+    return {
+      bookingResponse: null,
+      isError: true,
+      errorMessage: error,
+    };
+  }
 }

src/routes/book-page.tsx

@@ -19,19 +19,22 @@ import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { z } from "zod/v4";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { eBookingState } from "@/utils/AppStateManager";
 
 enum PageState {
-  noData,
   showForm,
   sending,
-  created,
   error,
 }
 
 function BookPage() {
   const [pageState, setPageState] = useState<PageState>(PageState.showForm);
   const bookingData = useAppStore((state) => state.currentBooking);
-  const setCustomerData = useAppStore((state) => state.currentBookingSetCustomer);
+  const appBookingState = useAppStore((state) => state.bookingState);
+  const setAppBookingState = useAppStore((state) => state.setBookingState);
+  const setCustomerData = useAppStore(
+    (state) => state.currentBookingSetCustomer,
+  );
   const navigate = useNavigate();
 
   const bookingForm = useForm<z.infer<typeof BookingFormSchema>>({
@@ -67,16 +70,28 @@ function BookPage() {
     if (rs.isError) {
       setPageState(PageState.error);
     } else {
+      setAppBookingState(eBookingState.Booked);
       navigate("/success", { state: rs.bookingResponse });
     }
   };
 
-  if (!bookingData || !bookingData.customerDetails) {
+  //Redirect to home if no booking is active.
-    return (
+  if (
-      <Typography variant={"h2"}>You must select some rooms...</Typography>
+    !appBookingState ||
-    );
+    appBookingState.state != eBookingState.Booking ||
+    !bookingData
+  ) {
+    navigate("/home");
   }
 
+  const errorMsg = (
+    <div>
+      <Typography variant={"inlineCode"}>
+        Server error. Try again later!
+      </Typography>
+    </div>
+  );
+
   return (
     <>
       <Typography variant={"h1"}>Booking Details</Typography>
@@ -150,6 +165,7 @@ function BookPage() {
               </Button>
             </form>
           </Form>
+          {pageState == PageState.error ? errorMsg : null}
         </div>
         <Separator className="my-10 lg:hidden" />
         <BookingDetails mode="View"></BookingDetails>

src/routes/search-page.tsx

@@ -55,6 +55,7 @@ function SearchPage() {
   };
 
   const onBookingContinue = () => {
+    setAppBookingState(eBookingState.Booking);
     navigate("/book");
   };
 
@@ -102,7 +103,9 @@ function SearchPage() {
   );
 
   const getPageContent = () => {
-    const isSearched = appBookingState.state == eBookingState.Searched;
+    const isSearched =
+      appBookingState.state == eBookingState.Searched ||
+      appBookingState.state == eBookingState.Booking;
     if (!isSearched) {
       return pageContentSearch;
     }