Booking lifecycle:

- Create bookings :)

src/api/api-booking.tsx

@@ -0,0 +1,19 @@
+import { NewBooking, NewBookingResponse } from "@/model/Bookings";
+import { fetcherWithFilter } from "./backend";
+
+export async function APISendCreateBooking(bookingData: NewBooking | null) {
+
+    if (!bookingData) {
+        return {
+            bookingResponse: null,
+            isError: true
+        }
+    }
+
+    const rs = await fetcherWithFilter<NewBookingResponse>("/api/booking/create", bookingData);
+
+    return {
+        bookingResponse: rs,
+        isError: false
+    }
+}

src/components/Search/SearchFilterCard.tsx

@@ -29,8 +29,8 @@ export function SearchFilterCard({ onSearchClick }: { onSearchClick?: funOnSearc
   useEffect(() => {
     setSearchFilter(location.state);
   }, [location]);
-  
+
-  
+
   const { toast } = useToast();
 
   // Validate and call callback on btSearch click.
@@ -69,13 +69,25 @@ export function SearchFilterCard({ onSearchClick }: { onSearchClick?: funOnSearc
     console.log("SearchFilterCard filter UPDATED");
   }
 
+  const datePickerElement = searchFilter == null ? (
+    <DatePickerWithRange
+      updateDateRange={updateDateRange}>
+    </DatePickerWithRange>
+  ) : (
+    <DatePickerWithRange
+      updateDateRange={updateDateRange}
+      startDate={searchFilter.dateRange.from}
+      endDate={searchFilter.dateRange.to}>
+    </DatePickerWithRange>
+  );
+
   return (
     <Card>
       <CardHeader className="p-0 m-0 mb-5">
         <Typography variant={"h2"} as="h1" className="mx-5 py-2">Reserva ahora</Typography>
       </CardHeader>
       <CardContent>
-        <DatePickerWithRange updateDateRange={updateDateRange}></DatePickerWithRange>
+        {datePickerElement}
         <Separator className="my-4" />
         <Button size={"lg"} onClick={btSearchClick}>
           <SearchIcon className="text-primary-foreground me-2" />

src/components/ui/dateRange-picker.tsx

@@ -18,12 +18,12 @@ import { Typography } from "./typography"
 export type UpdateRangeFunction = (newRange: DateRange) => void;
 
 export function DatePickerWithRange({
-  className, updateDateRange
+  className, updateDateRange, startDate, endDate
-}: { className?: React.HTMLAttributes<HTMLDivElement> | undefined, updateDateRange: UpdateRangeFunction | undefined }) {
+}: { className?: React.HTMLAttributes<HTMLDivElement> | undefined, updateDateRange: UpdateRangeFunction | undefined , startDate?: Date, endDate?: Date}) {
   // Date Range State.
   const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
-    from: undefined,
+    from: startDate,
-    to: undefined,
+    to: endDate,
   });
 
   //TODOME: Si el día es mods.outside, navegar al mes correspondiente.

src/main.tsx

@@ -7,6 +7,7 @@ import ErrorPage from './error-page';
 import Homepage from './routes/home-page';
 import SearchPage from './routes/search-page';
 import BookPage from './routes/book-page';
+import SuccessPage from './routes/success-page';
 
 const router = createBrowserRouter([
   {
@@ -29,6 +30,10 @@ const router = createBrowserRouter([
       {
         path: "/book",
         element: <BookPage />
+      },
+      {
+        path: "/success",
+        element: <SuccessPage />
       }
     ]
   },

src/model/Bookings.ts

@@ -18,4 +18,8 @@ export type NewBookingRoom = {
     guestNumber: number,
     amount: number,
     price: number
-};
+};
+
+export type NewBookingResponse = {
+    refNumber: number,
+}

src/routes/book-page.tsx

@@ -1,12 +1,86 @@
+import { APISendCreateBooking } from "@/api/api-booking"
 import { BookingDetails } from "@/components/booking/booking-details"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
 import { Typography } from "@/components/ui/typography"
+import { useToast } from "@/components/ui/use-toast"
+import { useAppStore } from "@/store"
+import { ChangeEvent, useState } from "react"
+import { useNavigate } from "react-router-dom"
+
+enum PageState {
+  noData, showForm, sending, created, error
+}
+
 
 function BookPage() {
+  const [pageState, setPageState] = useState<PageState>(PageState.showForm);
+  const bookingData = useAppStore((state) => state.newBookingData)
+  const setCustomerData = useAppStore((state) => state.setBookingCustomer);
+  const { toast } = useToast();
+  const navigate = useNavigate();
 
+  if (!bookingData || !bookingData.customerDetails) {
+    return (
+      <Typography variant={"h2"}>You must select some rooms...</Typography>
+    )
+  }
+
+  function handleOnChange(e: ChangeEvent<HTMLInputElement>) {
+    if (bookingData == null) {
+      return;
+    }
+
+    const newCustomerData = bookingData.customerDetails;
+
+    switch (e.target.name) {
+      case "name":
+        newCustomerData.name = e.target.value;
+        break;
+      case "surname":
+        newCustomerData.surname = e.target.value;
+        break;
+      case "email":
+        newCustomerData.email = e.target.value;
+        break;
+      case "phoneNumber":
+        newCustomerData.phoneNumber = e.target.value;
+        break;
+      default:
+        break;
+    }
+
+    setCustomerData(newCustomerData);
+  }
+
+  function handleOnBookingSubmit() {
+    const customerDetails = bookingData?.customerDetails;
+
+    if (!customerDetails ||
+      customerDetails.name == "" || customerDetails.surname == "" || customerDetails.phoneNumber == "" || customerDetails.email == "") {
+      toast({
+        variant: "destructive",
+        title: "Uh oh! You must fill all fields.",
+      });
+      return;
+    }
+
+    setPageState(PageState.sending);
+    console.log(bookingData);
+
+    sendCreateRequest();
+  }
+
+  const sendCreateRequest = async () => {
+    const rs = await APISendCreateBooking(bookingData);
+    if (rs.isError) {
+      setPageState(PageState.error);
+    } else {
+      navigate("/success", { state: rs.bookingResponse })
+    }
+  }
 
 
   return (
@@ -16,21 +90,33 @@ function BookPage() {
       <div>
         <Typography variant={"h3"}>Personal Details</Typography>
         <div>
-          <Label>Name</Label>
+          <div>
-          <Input></Input>
+            <Label htmlFor="name">Name</Label>
-          <Label>Surname</Label>
+            <Input type="text" name="name" id="name" placeholder="Name" value={bookingData.customerDetails.name ?? ""}
-          <Input></Input>
+              onChange={handleOnChange} />
-          <Label>Email</Label>
+          </div>
-          <Input></Input>
+          <div>
-          <Label>Phone Number</Label>
+            <Label htmlFor="surname">Surname</Label>
-          <Input></Input>
+            <Input type="text" name="surname" id="surname" placeholder="Surname" value={bookingData.customerDetails.surname ?? ""}
+              onChange={handleOnChange} />
+          </div>
+          <div>
+            <Label htmlFor="email">Email</Label>
+            <Input type="email" name="email" id="email" placeholder="Email" value={bookingData.customerDetails.email ?? ""}
+              onChange={handleOnChange} />
+          </div>
+          <div>
+            <Label htmlFor="phone">Phone Number</Label>
+            <Input type="tel" name="phoneNumber" id="phone" placeholder="Number" value={bookingData.customerDetails.phoneNumber ?? ""}
+              onChange={handleOnChange} />
+          </div>
         </div>
       </div>
       <Separator className="my-10" />
       <BookingDetails></BookingDetails>
       <Separator className="my-10" />
-      <Button>
+      <Button onClick={handleOnBookingSubmit} disabled={pageState == PageState.sending}>
-        <Typography variant={"h3"} className="text-primary-foreground">Book it now!</Typography> 
+        <Typography variant={"h3"} className="text-primary-foreground">Book it now!</Typography>
       </Button>
     </>
   )

src/routes/success-page.tsx

@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Typography } from "@/components/ui/typography"
+import { NewBookingResponse } from "@/model/Bookings"
+import { useAppStore } from "@/store"
+import { addDays } from "date-fns"
+import { useEffect, useState } from "react"
+import { useLocation, useNavigate } from "react-router-dom"
+
+function SuccessPage() {
+
+    const [pageState, setPageState] = useState<NewBookingResponse|null>(null)
+    const resetBookingState = useAppStore((state) => state.resetBookingState);
+
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if(location.state == null) {
+            navigate("/home");
+        }
+        setPageState(location.state);
+
+    }, [location, navigate])
+
+    const handleBtBackClick = () => {
+        resetBookingState(new Date(), addDays(new Date(), 2));
+        navigate("/home");
+    }
+
+
+  return (
+    <Card>
+        <CardHeader>
+            <Typography variant={"h2"}>Booking Completed</Typography>
+        </CardHeader>
+        <CardContent>
+            <Typography variant={"largeText"}>Booking ref: {pageState?.refNumber}</Typography>
+            <Button className="my-4" onClick={handleBtBackClick}>
+                <Typography variant={"largeText"} className="text-primary-foreground">Go Back</Typography>
+            </Button>
+        </CardContent>
+    </Card>
+  )
+}
+
+export default SuccessPage

src/store.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { SearchFilter } from './model/SearchFilter'
-import { NewBooking, NewBookingRoom } from './model/Bookings'
+import { NewBooking, NewBookingCustomerDetails, NewBookingRoom } from './model/Bookings'
 
 interface AppState {
     searchFilter: SearchFilter
@@ -9,6 +9,7 @@ interface AppState {
     setNewBooking: (newBooking: NewBooking) => void
     resetBookingState: (arrival: Date, departure: Date) => void
     addNewBookingRoom: (newRoom: NewBookingRoom) => void
+    setBookingCustomer: (newCustomer: NewBookingCustomerDetails) => void
 }
 
 const defaultSearchFilter: SearchFilter = {
@@ -68,6 +69,18 @@ function addNewBookingRoomToCurrentState(newRoom: NewBookingRoom, currentState:
     return newState;
 }
 
+function setBookingCustomer(newCustomer: NewBookingCustomerDetails, currentState: NewBooking | null) {
+    if(currentState == null) {
+        return currentState;
+    }
+
+    const newState: NewBooking = {
+        ...currentState,
+        customerDetails: newCustomer
+    };
+    return newState;
+}
+
 export const useAppStore = create<AppState>()((set) => ({
     searchFilter: defaultSearchFilter,
     setSearchFilter: (newFilter) => set(() => ({ searchFilter: newFilter })),
@@ -76,5 +89,7 @@ export const useAppStore = create<AppState>()((set) => ({
     resetBookingState: (arrival, departure) =>
         set(() => ({ newBookingData: getDefaultBookingData(arrival, departure) })),
     addNewBookingRoom: (newRoom: NewBookingRoom) =>
-        set((state) => ({ newBookingData: addNewBookingRoomToCurrentState(newRoom, state.newBookingData) }))
+        set((state) => ({ newBookingData: addNewBookingRoomToCurrentState(newRoom, state.newBookingData) })),
+    setBookingCustomer: (newCustomer: NewBookingCustomerDetails) => 
+        set((state) => ({newBookingData: setBookingCustomer(newCustomer, state.newBookingData)}))
 }))