stay_commerce-frontend 0.1.0

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

@@ -0,0 +1,163 @@
+import React from "react";
+import { createBrowserRouter } from "react-router-dom";
+import Home from "../../pages/Home";
+import AboutPage from "../../components/AboutUsPage/AboutPage";
+import AccommodationList from "../../pages/AccommodationList";
+import Gallery from "../../components/Gallery/Gallery";
+import Contact from "../../components/ContactUs/Contact";
+import Page404 from "../../components/Page404/Page404";
+import LoginPage from "../../components/LoginPage/LoginPage";
+import SignupPage from "../../components/SignupPage/SignupPage";
+import AccountPage from "../../components/Accountpage/AccountPage";
+import MyBooking from "../../components/PropertyListing/StayBooking/MyBooking";
+import Layout from "../../components/Layout/Layout";
+import Description from "../../components/AddNewProperty/Description";
+import Details from "../../components/AddNewProperty/Details";
+import Images from "../../components/AddNewProperty/Images";
+import Unauthorized from "../../components/Unauthorized/Unauthorized";
+import Location from "../../components/AddNewProperty/Location";
+import Room from "../../components/AddNewProperty/Room";
+import { useSelector } from "react-redux";
+import { Navigate } from "react-router-dom";
+import MyProperties from "../../components/PropertyListing/MyProperties";
+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";
+
+const RequireHost = ({ children }) => {
+  const user = useSelector((state) => state.user?.data);
+  if (!user?.is_host) {
+    return <Navigate to="/unauthorized" />;
+  }
+  return children;
+};
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Layout />,
+    children: [
+      {
+        path: "/",
+        element: <Home />,
+      },
+      {
+        path: "/about-us",
+        element: <AboutPage />,
+      },
+      {
+        path: "/accommodation",
+        element: <AccommodationList />,
+      },
+      {
+        path: "/gallery",
+        element: <Gallery />,
+      },
+      {
+        path: "/contact",
+        element: <Contact />,
+      },
+      {
+        path: "/login",
+        element: <LoginPage />,
+      },
+      {
+        path: "/signup",
+        element: <SignupPage />,
+      },
+      {
+        path: "/forget-password",
+        element: <ForgetPassword />,
+      },
+      {
+        path: "/reset-password",
+        element: <ResetPassword />,
+      },
+      {
+        path: "/account",
+        element: <AccountPage />,
+      },
+      {
+        path: "/mybookings",
+        element: <MyBooking />,
+      },
+      {
+        path: "/listing-stay-detail/:slug?",
+        element: <ListingStayDetailPage />,
+      },
+      {
+        path: "/myreservations/:id",
+        element: <ApartmentCard />,
+      },
+      {
+        path: "bookingDetails/:id",
+        element: <BookingInterface />,
+      },
+      {
+        path: "/listingSearchPage",
+        element: <PropertiesPage />,
+      },
+      {
+        path: "/property-1/:slug?",
+        element: (
+          <RequireHost>
+            <Description />
+          </RequireHost>
+        ),
+      },
+      {
+        path: "/property-2/:slug?",
+        element: (
+          <RequireHost>
+            <Images />
+          </RequireHost>
+        ),
+      },
+      {
+        path: "/property-3/:slug?",
+        element: (
+          <RequireHost>
+            <Details />
+          </RequireHost>
+        ),
+      },
+      {
+        path: "/property-4/:slug?",
+        element: (
+          <RequireHost>
+            <Location />
+          </RequireHost>
+        ),
+      },
+
+      {
+        path: "/property-5/:slug?",
+        element: (
+          <RequireHost>
+            <Room />
+          </RequireHost>
+        ),
+      },
+
+      {
+        path: "/myproperties",
+        element: (
+          <RequireHost>
+            <MyProperties />
+          </RequireHost>
+        ),
+      },
+      { path: "/unauthorized", element: <Unauthorized /> },
+
+      {
+        path: "*",
+        element: <Page404 />,
+      },
+    ],
+  },
+]);
+
+export default router;

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

@@ -0,0 +1,21 @@
+import React from "react";
+import BookingForm from "../components/HeroSectionDesign/BookingForm";
+import Accommodation from "../components/Accommodation/Accommodation";
+import SpecialListing from "../components/Accommodation/SpecialListing";
+import NormalListing from "../components/Accommodation/NormalListing";
+import Footer from "../shared/FooterSection/Footer";
+
+function AccommodationList() {
+  // const bgImagePath = require("../../../../assets/images/stay_commerce/frontend/beach-2245867_1280.jpg");
+
+  return (
+    <>
+      <Accommodation />
+      {/* <BookingForm /> */}
+      <SpecialListing />
+      {/* <NormalListing /> */}
+    </>
+  );
+}
+
+export default AccommodationList;

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

@@ -0,0 +1,32 @@
+import React from "react";
+import HeroSection from "../components/HeroSectionDesign/HeroSection";
+import BookingForm from "../components/HeroSectionDesign/BookingForm";
+import Listing from "../components/HotelListing/Listing";
+// import BeachImg from "../Image/beach-2245867_1280.jpg";
+import FeaturesSection from "../components/FacilitiesSection/Facilities";
+import AboutUs from "../components/AboutusFront/About";
+import TestimonialSection from "../components/TestimonialSection/Testimonial";
+import BlogSection from "../components/BlogDesign/BlogsLatest";
+import Img from "../../Images/bg-image.jpg";
+
+function Home() {
+  return (
+    <>
+      <div>
+        {/* Page Content */}
+
+        <HeroSection />
+        {/* <div className="container">
+          <BookingForm />
+        </div> */}
+      </div>
+      <Listing />
+      <FeaturesSection />
+      <AboutUs />
+      <TestimonialSection />
+      <BlogSection />
+    </>
+  );
+}
+
+export default Home;

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

@@ -0,0 +1,100 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+import { ENDPOINTS } from "../../../Api/apiConstants";
+import ErrorHandler from "../../../utils/helpers/ErrorHandler";
+import InfoHandler from "../../../utils/helpers/InfoHandler";
+
+// Load user from localStorage on app start
+const storedUser = JSON.parse(localStorage.getItem("user")) || null;
+
+// Async thunk for signup
+export const signupUser = createAsyncThunk(
+  "auth/signupUser",
+  async (userData, { rejectWithValue }) => {
+    try {
+      const response = await axios.post(ENDPOINTS.SIGN_UP, userData);
+     
+      localStorage.setItem(
+        "user",
+        JSON.stringify(response?.data?.access_token)
+      );
+    
+      return response.data;
+    } catch (error) {
+      ErrorHandler(error);
+      return rejectWithValue(error.response?.data || "Signup failed");
+    }
+  }
+);
+
+// Async thunk for login
+export const signIn = createAsyncThunk(
+  "auth/signIn",
+  async (credentials, { rejectWithValue }) => {
+    try {
+      const response = await axios.post(ENDPOINTS.SIGN_IN, credentials);
+      localStorage.setItem(
+        "user",
+        JSON.stringify(response?.data?.access_token)
+      ); 
+   
+      return response.data;
+    } catch (error) {
+      ErrorHandler(error);
+      return rejectWithValue(error.response?.data || "Login failed");
+    }
+  }
+);
+
+const handlePending = (state) => {
+  state.loading = true;
+  state.error = null;
+};
+
+const handleRejected = (state, action) => {
+  state.loading = false;
+  state.error = action.payload;
+};
+
+const authSlice = createSlice({
+  name: "auth",
+  initialState: {
+    user: storedUser, // ✅ Persist user from localStorage
+    loading: false,
+    error: null,
+  },
+  reducers: {
+    loginSuccess: (state, action) => {
+      state.user = action.payload;
+    },
+    logout: (state) => {
+      state.user = null;
+      localStorage.removeItem("user"); // ✅ Clear user session on logout
+      InfoHandler("You have been logged out");
+      setTimeout(() => {
+        window.location.reload();
+      }, 2000);
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      // Signup handlers
+      .addCase(signupUser.pending, handlePending)
+      .addCase(signupUser.fulfilled, (state, action) => {
+        state.loading = false;
+        state.user = action.payload;
+      })
+      .addCase(signupUser.rejected, handleRejected)
+
+      // Login handlers
+      .addCase(signIn.pending, handlePending)
+      .addCase(signIn.fulfilled, (state, action) => {
+        state.loading = false;
+        state.user = action.payload;
+      })
+      .addCase(signIn.rejected, handleRejected);
+  },
+});
+
+export const { loginSuccess, logout } = authSlice.actions;
+export default authSlice.reducer;