stay_commerce-frontend 0.1.0 → 0.1.1

data/app/javascript/react/components/PropertyListing/StayBooking/MyBooking.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import "../../../styles/mybooking.scss";
 import StayCard from "../../StayCard/StayCard";
 import {
@@ -7,6 +7,8 @@ import {
 } from "../../../redux/slices/PropertySlice/PropertySlice";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
+import Pagination from "../../../shared/Pagination";
+import Loader from "../../../shared/Loader";
 
 const MyBooking = () => {
   const dispatch = useDispatch();
@@ -14,35 +16,32 @@ const MyBooking = () => {
   const [bookingData, setBookingData] = useState(null);
   const [query, setQuery] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
   const { data: currentUser } = useSelector((state) => state.user);
 
-  const fetchBookings = useCallback(
-    async (page) => {
+  useEffect(() => {
+    const fetchBookings = async (page) => {
+      if (!currentUser) return;
+
       setIsLoading(true);
       try {
-        if (currentUser?.is_host) {
-          const response = await dispatch(
-            getHostBookingsDetails({ page })
-          ).unwrap();
-          setBookingData(response);
-        } else {
-          const response = await dispatch(
-            getUserBookingsDetails({ page })
-          ).unwrap();
-          setBookingData(response);
-        }
+        const response = await dispatch(
+          currentUser?.is_host
+            ? getHostBookingsDetails({ page })
+            : getUserBookingsDetails({ page })
+        ).unwrap();
+        setBookingData(response);
       } catch (error) {
         console.error("Error fetching bookings:", error);
       } finally {
         setIsLoading(false);
       }
-    },
-    [dispatch, currentUser]
-  );
+    };
 
-  useEffect(() => {
-    fetchBookings(1);
-  }, [fetchBookings]);
+    if (currentUser) {
+      fetchBookings(currentPage);
+    }
+  }, [dispatch, currentUser, currentPage]);
 
   return (
     <div className="my-booking-container">
@@ -52,6 +51,7 @@ const MyBooking = () => {
           View the complete list of all your booking requests.
         </p>
 
+        {/* Optional Search Bar */}
         {/* <div className="search-bar">
           <FormField
             type="text"
@@ -63,16 +63,28 @@ const MyBooking = () => {
           <ButtonPrimary className="search-button">Search</ButtonPrimary>
         </div> */}
 
-        {/* Stay Cards Grid */}
-        <div className="stay-cards">
-          {isLoading ? (
-            <div className="loader">Loading bookings...</div>
-          ) : bookingData?.bookings?.length > 0 ? (
-            bookingData.bookings.map((booking) => (
+        {/* Loader or Bookings List */}
+        {isLoading ? (
+          <Loader text="Loading your bookings..." />
+        ) : bookingData?.bookings?.length > 0 ? (
+          <div className="stay-cards">
+            {bookingData.bookings.map((booking) => (
               <StayCard key={booking.id} booking={booking} />
-            ))
-          ) : (
-            <p className="no-results">No bookings found.</p>
+            ))}
+          </div>
+        ) : (
+          <p className="no-property-message">No bookings found.</p>
+        )}
+
+        {/* Pagination */}
+        <div className="pagination_header">
+          {bookingData?.meta?.total_pages > 1 && (
+            <Pagination
+              currentPage={bookingData.meta.current_page}
+              totalPages={bookingData.meta.total_pages}
+              onPageChange={setCurrentPage}
+              isLoading={isLoading}
+            />
           )}
         </div>
       </div>

data/app/javascript/react/components/StayCard/StayCard.jsx

@@ -21,8 +21,10 @@ const StayCard = ({ booking }) => {
     number_of_guests,
     total_amount,
     id,
+    room_images,
+    booked_room,
   } = booking;
-  const { place_images, title } = property;
+  const { title } = property;
 
   const handleCardClick = () => {
     navigate(`/bookingDetails/${id}`);
@@ -34,10 +36,10 @@ const StayCard = ({ booking }) => {
       onClick={handleCardClick}
       style={{ cursor: "pointer" }}
     >
-      <GallerySlider images={place_images} style={{ height: "300px" }} />
+      <GallerySlider images={room_images} style={{ height: "300px" }} />
 
       <div className="stay-card__content">
-        <h2 className="stay-card__title">{title}</h2>
+        <h2 className="stay-card__title">{booked_room}</h2>
         {currentUser?.is_host && (
           <div className="stay-card__info">
             <span>Request by:</span>{" "}

data/app/javascript/react/packs/index.jsx

@@ -13,6 +13,7 @@ import "@mantine/core/styles.css";
 import "@mantine/dates/styles.css";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
+import "react-datepicker/dist/react-datepicker.css";
 const stripePromise = loadStripe(
   "pk_test_51LCfAAJQIRLPDLbLcKwKmAbKIHjTiJYCUsWXxfbQ0UlF5N3AO2tfLgKXt4GPI7UZYJUVHi94Q4TEol5YN1PQD4AI00N1uBrnnR"
 );

data/app/javascript/react/packs/routes/Route.jsx

@@ -24,8 +24,9 @@ import ForgetPassword from "../../components/ForgetPassword/ForgetPassword";
 import ResetPassword from "../../components/ResetPassword/ResetPassword";
 import ListingStayDetailPage from "../../components/Listing-stay-Detail/ListingStayDetailPage";
 import ApartmentCard from "../../components/Listing-stay-Detail/ApartmentCard";
-import PropertiesPage from "../../components/HeroSectionDesign/PropertiesPage";
 import BookingInterface from "../../components/PropertyListing/StayBooking/BookingDetails";
+import CardManager from "../../components/Listing-stay-Detail/CardManager";
+import PropertiesPage from "../../components/Listing-stay-Detail/PropertiesPage";
 
 const RequireHost = ({ children }) => {
   const user = useSelector((state) => state.user?.data);
@@ -35,6 +36,14 @@ const RequireHost = ({ children }) => {
   return children;
 };
 
+const RequireUser = ({ children }) => {
+  const user = useSelector((state) => state.user?.data);
+  if (!user?.is_user) {
+    return <Navigate to="/unauthorized" />;
+  }
+  return children;
+};
+
 const router = createBrowserRouter([
   {
     path: "/",
@@ -156,6 +165,14 @@ const router = createBrowserRouter([
         path: "*",
         element: <Page404 />,
       },
+      {
+        path: "/AddCard",
+        element: (
+          <RequireUser>
+            <CardManager />
+          </RequireUser>
+        ),
+      },
     ],
   },
 ]);

data/app/javascript/react/pages/Home.jsx

@@ -15,12 +15,14 @@ function Home() {
       <div>
         {/* Page Content */}
 
-        <HeroSection />
-        {/* <div className="container">
+        <div style={{ paddingLeft: "20px", paddingRight: "20px" }}>
+          <HeroSection />
+        </div>
+        <div className="container">
           <BookingForm />
-        </div> */}
+        </div>
       </div>
-      <Listing />
+      {/* <Listing /> */}
       <FeaturesSection />
       <AboutUs />
       <TestimonialSection />

data/app/javascript/react/redux/slices/PropertySlice/PropertySlice.jsx

@@ -194,27 +194,27 @@ export const getCard = createAsyncThunk(
   }
 );
 
-export const searchProperties = createAsyncThunk(
-  "properties/searchProperties",
-  async (searchQuery, { rejectWithValue }) => {
-    try {
-      const response = await API.get(ENDPOINTS.SEARCH_PROPERTIES(searchQuery));
-      return {
-        success: true,
-        data: response.data,
-      };
-    } catch (error) {
-      if (error.response && error.response.status === 404) {
-        toast.error(error.response.data.error || error.response.data.message, {
-          position: "top-right",
-        });
-        return rejectWithValue(error.response.data);
-      }
-      ErrorHandler(error);
-      return rejectWithValue(error.message);
-    }
-  }
-);
+// export const searchProperties = createAsyncThunk(
+//   "properties/searchProperties",
+//   async (searchQuery, { rejectWithValue }) => {
+//     try {
+//       const response = await API.get(ENDPOINTS.SEARCH_PROPERTIES(searchQuery));
+//       return {
+//         success: true,
+//         data: response.data,
+//       };
+//     } catch (error) {
+//       if (error.response && error.response.status === 404) {
+//         toast.error(error.response.data.error || error.response.data.message, {
+//           position: "top-right",
+//         });
+//         return rejectWithValue(error.response.data);
+//       }
+//       ErrorHandler(error);
+//       return rejectWithValue(error.message);
+//     }
+//   }
+// );
 
 export const getPaymentmethods = createAsyncThunk(
   "payment/getCard",

data/app/javascript/react/redux/slices/PropertySlice/Searchslice.jsx

@@ -1,11 +1,37 @@
-import { createSlice } from "@reduxjs/toolkit";
-import { searchProperties } from "./PropertySlice";
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import API from "../../../utils/helpers/APIHelper";
+import { ENDPOINTS } from "../../../Api/apiConstants";
+import ErrorHandler from "../../../utils/helpers/ErrorHandler";
+import { toast } from "react-toastify";
+
+export const searchProperties = createAsyncThunk(
+  "search/searchProperties",
+  async (searchQuery, { rejectWithValue }) => {
+    try {
+      const response = await API.get(ENDPOINTS.SEARCH_PROPERTIES(searchQuery));
+      return response;
+    } catch (error) {
+      if (error.response && error.response.status === 404) {
+        toast.error(error.response.data.message || "Not found");
+        return rejectWithValue(error.response.data);
+      }
+      ErrorHandler(error);
+      return rejectWithValue(error.message);
+    }
+  }
+);
 
 const initialState = {
   searchResults: [],
   startDate: null,
   endDate: null,
   totalGuests: 1,
+  address: null,
+  latitude: null,
+  longitude: null,
+  loading: false,
+  error: null,
+  data: null,
 };
 
 const searchSlice = createSlice({
@@ -17,18 +43,39 @@ const searchSlice = createSlice({
       state.startDate = null;
       state.endDate = null;
       state.totalGuests = 1;
+      state.address = null;
+      state.latitude = null;
+      state.longitude = null;
+      state.error = null;
+      state.data = null;
     },
     setSearchMeta: (state, action) => {
-      const { startDate, endDate, totalGuests } = action.payload;
+      const { startDate, endDate, totalGuests, address, latitude, longitude } =
+        action.payload;
       state.startDate = startDate;
       state.endDate = endDate;
       state.totalGuests = totalGuests;
+      state.address = address;
+      state.latitude = latitude;
+      state.longitude = longitude;
     },
   },
   extraReducers: (builder) => {
-    builder.addCase(searchProperties.fulfilled, (state, action) => {
-      state.searchResults = action.payload.data || [];
-    });
+    builder
+      .addCase(searchProperties.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(searchProperties.fulfilled, (state, action) => {
+        state.searchResults = action.payload?.properties || [];
+        state.data = action.payload;
+        state.loading = false;
+        state.error = null;
+      })
+      .addCase(searchProperties.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload || "Failed to search properties";
+      });
   },
 });
 

data/app/javascript/react/redux/slices/UserSlice/UserSlice.jsx

@@ -2,6 +2,7 @@ import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
 import axios from "axios";
 import { ENDPOINTS } from "../../../Api/apiConstants";
 import ErrorHandler from "../../../utils/helpers/ErrorHandler";
+
 export const getCurrentUser = createAsyncThunk(
   "user/getCurrentUser",
   async (_, { rejectWithValue }) => {

data/app/javascript/react/shared/Avatar/Avatar.jsx

@@ -1,14 +1,11 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useSelector } from "react-redux";
 import "../../styles/avatar.scss";
 
-const Avatar = ({ onClick, sizeClass = "" }) => {
-  const userData = useSelector((state) => state.user.data);
-
+const Avatar = ({ onClick, sizeClass = "", userData }) => {
   if (!userData) return null;
-
-  const profileImage = userData.image;
-  const firstLetter = userData.first_name?.charAt(0).toUpperCase() || "?";
+  const profileImage = userData?.image;
+  const firstLetter = userData?.first_name?.charAt(0).toUpperCase() || "?";
 
   return (
     <div className={`avatar-container ${sizeClass}`} onClick={onClick}>
@@ -19,7 +16,7 @@ const Avatar = ({ onClick, sizeClass = "" }) => {
           className="avatar-image"
           onError={(e) => {
             e.target.onerror = null;
-            // e.target.src = "/default-avatar.png"; // optional fallback image
+            // e.target.src = "/default-avatar.png";
           }}
         />
       ) : (

data/app/javascript/react/shared/Button/SecondryButton.jsx

@@ -0,0 +1,9 @@
+import Button from "./Button";
+import React from "react";
+import "../../styles/buttonSecondry.scss"; // Import SCSS for styling
+
+const SecondryButton = ({ className = "", ...args }) => {
+  return <Button className={`sec-primary ${className}`} {...args} />;
+};
+
+export default SecondryButton;

data/app/javascript/react/shared/Loader.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import "../styles/Loader.scss"; // Adjust the path as necessary
+
+const Loader = ({ text = "Loading..." }) => {
+  return (
+    <div className="app-loader">
+      <div className="app-loader__spinner" />
+      <p className="app-loader__text">{text}</p>
+    </div>
+  );
+};
+
+export default Loader;

data/app/javascript/react/shared/Pagination.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import "../styles/Pagination.scss"; // Adjust the path as necessary
+
+const Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  isLoading = false,
+}) => {
+  const renderPageNumbers = () => {
+    const pages = [];
+
+    for (let i = 1; i <= totalPages; i++) {
+      pages.push(
+        <button
+          key={i}
+          className={`pagination__button ${
+            i === currentPage ? "pagination__button--active" : ""
+          }`}
+          onClick={() => onPageChange(i)}
+        >
+          {i}
+        </button>
+      );
+    }
+
+    return pages;
+  };
+
+  return (
+    <div className="pagination">
+      <button
+        className="pagination__button"
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1 || isLoading}
+      >
+        Prev
+      </button>
+
+      {renderPageNumbers()}
+
+      <button
+        className="pagination__button"
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+      >
+        Next
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;

data/app/javascript/react/shared/Schema/FormSchema

@@ -0,0 +1,143 @@
+import * as Yup from "yup";
+
+export const descriptionValidationSchemas = Yup.object().shape({
+  title: Yup.string()
+    .required("Title is required")
+    .max(100, "Title cannot exceed 100 characters"),
+  property_category: Yup.string().required("Property category is required"),
+  property_type_id: Yup.string().required("Property type is required"),
+  country: Yup.string().required("Country is required"),
+  description: Yup.string()
+    .required("Description is required")
+    .min(200, "Description must be at least 200 characters long"),
+  address: Yup.string().required("Address is required"),
+});
+
+export const ImagevalidationSchema = Yup.object({
+  place_images: Yup.array()
+    .min(1, "Please upload at least one image")
+    .required("Images are required"),
+});
+
+// Validation schema
+export const detailsvalidationSchema = Yup.object({
+  property_size: Yup.number()
+    .required("Property size is required")
+    .positive("Property size must be a positive number")
+    .integer("Property size must be a whole number"),
+  total_rooms: Yup.number()
+    .required("Total rooms is required")
+    .positive("Total rooms must be a positive number")
+    .integer("Total rooms must be a whole number")
+    .max(50, "Total rooms cannot exceed 50"),
+  additionalRules: Yup.array().of(
+    Yup.object({
+      name: Yup.string().required("Rule name is required"),
+    })
+  ),
+});
+
+export const LocationSchema = Yup.object().shape({
+  city: Yup.string().required("City is required"),
+  state: Yup.string().required("State is required"),
+  zipcode: Yup.string().required("Zipcode is required"),
+  latitude: Yup.number()
+    .typeError("Latitude must be a number")
+    .required("Latitude is required"),
+  longitude: Yup.number()
+    .typeError("Longitude must be a number")
+    .required("Longitude is required"),
+});
+
+export const roomValidationSchema = Yup.object().shape({
+  rooms_attributes: Yup.array().of(
+    Yup.object().shape({
+      name: Yup.string()
+        .required("Room name is required")
+        .min(2, "Room name must be at least 2 characters")
+        .max(100, "Room name must not exceed 100 characters"),
+      price_per_month: Yup.number()
+        .required("Price per month is required")
+        .positive("Price must be positive")
+        .min(1, "Price must be at least 1"),
+      status: Yup.string()
+        .required("Status is required")
+        .oneOf(
+          ["active", "inactive"],
+          "Status must be either active or inactive"
+        ),
+      booking_start: Yup.date().required("Availability start date is required"),
+      booking_end: Yup.date()
+        .required("Availability end date is required")
+        .min(Yup.ref("booking_start"), "End date must be after start date"),
+      description: Yup.string()
+        .required("Description is required")
+        .min(200, "Description must be at least 200 characters"),
+      bed_type_id: Yup.string().required("Bed type is required"),
+      size: Yup.number()
+        .required("Room size is required")
+        .positive("Size must be positive")
+        .min(1, "Size must be at least 1 sq ft"),
+      room_type_id: Yup.string().required("Room type is required"),
+      max_guests: Yup.number()
+        .required("Max guests is required")
+        .positive("Max guests must be positive")
+        .integer("Max guests must be a whole number")
+        .min(1, "At least 1 guest must be allowed"),
+      room_images: Yup.array()
+        .test(
+          "room-images-required",
+          "At least one room image is required",
+          function (value) {
+            const { existing_room_images } = this.parent;
+            const totalImages =
+              (value?.length || 0) + (existing_room_images?.length || 0);
+            return totalImages >= 1;
+          }
+        )
+        .test(
+          "max-images",
+          "Maximum 10 images are allowed per room",
+          function (value) {
+            const { existing_room_images } = this.parent;
+            const totalImages =
+              (value?.length || 0) + (existing_room_images?.length || 0);
+            return totalImages <= 10;
+          }
+        )
+        .test(
+          "file-size",
+          "Each image must be less than 10MB",
+          function (value) {
+            if (!value || value.length === 0) return true;
+            return value.every((file) => {
+              if (file instanceof File) {
+                return file.size <= 10 * 1024 * 1024; // 10MB
+              }
+              return true;
+            });
+          }
+        )
+        .test(
+          "file-type",
+          "Only PNG, JPG, JPEG, and GIF files are allowed",
+          function (value) {
+            if (!value || value.length === 0) return true;
+            const allowedTypes = [
+              "image/png",
+              "image/jpg",
+              "image/jpeg",
+              "image/gif",
+            ];
+            return value.every((file) => {
+              if (file instanceof File) {
+                return allowedTypes.includes(file.type);
+              }
+              return true;
+            });
+          }
+        ),
+      existing_room_images: Yup.array(),
+    })
+  ),
+});

data/app/javascript/react/styles/BookingDetails.scss

@@ -92,6 +92,7 @@
   background: #081976;
   color: white;
   width: fit-content;
+  border-radius: 6px;
 }
 
 .icon {