stay_commerce-frontend 0.1.0

data/app/javascript/react/Api/apiConstants.js

@@ -0,0 +1,47 @@
+// export const API_BASE_URL = "http://localhost:5000/stay";
+
+// export const ENDPOINTS = {
+//   SIGN_UP: `${API_BASE_URL}/users/tokens/sign_up`,
+//   SIGN_IN: `${API_BASE_URL}/users/tokens/sign_in`,
+//   USER_INFO: `${API_BASE_URL}/users/tokens/info`,
+//   USER_UPDATE: (id) => `${API_BASE_URL}/api/v1/profiles/${id}`,
+//   CREATE_PROPERTIES: `${API_BASE_URL}/api/v1/properties`,
+//   PROPERTY_CATEGORIES: `${API_BASE_URL}/api/v1/property_categories`,
+//   PROPERTY_TYPES: `${API_BASE_URL}/api/v1/property_types`,
+//   UPDATE_PROPERTIES:  (id) => `${API_BASE_URL}/api/v1/properties/${id}`,
+//   GET_PROPERTy_LISTING: `${API_BASE_URL}/api/v1/properties/my_properties`,
+//   GET_ALL_UPDATE_PROPERTY: `${API_BASE_URL}/api/v1/properties`,
+
+// };
+
+export const API_BASE_URL = "http://localhost:5000/stay";
+
+export const ENDPOINTS = {
+  SIGN_UP: `${API_BASE_URL}/users/tokens/sign_up`,
+  SIGN_IN: `${API_BASE_URL}/users/tokens/sign_in`,
+  USER_INFO: `${API_BASE_URL}/users/tokens/info`,
+  USER_UPDATE: (id) => `${API_BASE_URL}/api/v1/profiles/${id}`,
+  EDIT_PASSWORD: `${API_BASE_URL}/users/password`,
+  UPDATE_PROPERTIES: `${API_BASE_URL}/api/v1/properties`,
+  GET_ALL_UPDATE_PROPERTY_DETAILS: `${API_BASE_URL}/api/v1/properties`,
+  PROPERTY_CATEGORY: `${API_BASE_URL}/api/v1/property_categories`,
+  GET_ALL_PROPERTY_TYPE: `${API_BASE_URL}/api/v1/property_types`,
+  GET_PROPERTY_Listing: `${API_BASE_URL}/api/v1/properties/my_properties`,
+  CREATE_PROPERTIES: `${API_BASE_URL}/api/v1/properties`,
+  GET_ALL_FEATURES_STATUS: "api/v1/features/property",
+  AMENITIES_PROPERTIES: "/api/v1/amenities/property",
+  ROOM_AMENITIES_PROPERTIES: "/api/v1/amenities/room",
+  ROOM_FEATURES_PROPERTIES: "/api/v1/features/room",
+  ROOM_BED_TYPE: "api/v1/bed_types",
+  ROOM_TYPE: "api/v1/room_types",
+  HOST_BOOKING_DETAILS: (page) => `/api/v1/bookings/host_booking?page=${page}`,
+  GET_BOOKING_DEATAILS: (page, query) => `/api/v1/bookings?page=${page}`,
+  DELETEIMAGE: "/api/v1/image_destroy",
+  BOOKING: "/api/v1/bookings",
+  SIMILAR_PROPERTIES: "/api/v1/properties/similar_property",
+  BOOKING_DETAILS: "/api/v1/bookings",
+  PAYMENT_SUCCESS: (bookingId) => `/api/v1/bookings/${bookingId}`,
+  PAYMENT_METHODS: "/api/v1/payments/payment_method",
+  GET_ALL_PROPERTIES: (page) => `/api/v1/properties?page=${page}`,
+  SEARCH_PROPERTIES: (query) => `/api/v1/properties/search?${query}`
+};

data/app/javascript/react/components/AboutUsPage/AboutPage.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+// import Navbar from "../Navbar/Navbar";
+import AboutUs from "../AboutusFront/About";
+import Features from "../FacilitiesSection/Facilities";
+import TestimonialSection from "../TestimonialSection/Testimonial"; 
+import Bg from "../../../Images/bgimage.jpg";
+import { Link } from "react-router-dom";
+import "../../styles/header.scss";
+
+const AboutPage = () => {
+  return (
+    <>
+       <div
+              className="header-hero"
+              style={{ backgroundImage: `url(${Bg})` }}
+            >
+        <h1 className="header-title">
+          About Us
+        </h1>
+        <div className="breadcrumb">
+        <Link to="/" className="breadcrumb-link">
+          Home
+        </Link>
+        <span className="breadcrumb-separator">→</span>
+        <span className="breadcrumb-current">About us</span>
+      </div>
+      </div>
+      <div className="header-content">
+        {/* Add content here */}
+      </div>
+      <div>
+        <AboutUs />
+        <Features />
+        <TestimonialSection />
+      </div>
+    </>
+  );
+};
+
+export default AboutPage;
+

data/app/javascript/react/components/AboutusFront/About.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Img from "../../../Images/hotel1.jpg";
+import "../../styles/wrapper.scss";
+
+
+const AboutUs = () => {
+  return (
+    <section className="about-section">
+      <div className="wrapper">
+        <div className="about-container">
+          {/* Left Content */}
+          <div className="about-content">
+            <h2>
+              About Us <br />
+              Our History <br />
+              Mission & Vision
+            </h2>
+            <p>
+              Inappropriate behavior is often laughed off as “boys will be boys,” women face higher conduct standards
+              especially in the workplace. That’s why it’s crucial that, as women, our behavior on the job is beyond
+              reproach. Inappropriate behavior is often laughed.
+            </p>
+            <button>REQUEST CUSTOM PRICE</button>
+          </div>
+
+          {/* Right Image */}
+          <div className="about-image">
+            <img src={Img} alt="Hotel Fountain" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AboutUs;
+

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

@@ -0,0 +1,32 @@
+import React from "react";
+import Navbar from "../Navbar/Navbar";
+import Footer from "../../shared/FooterSection/Footer";
+import { Link } from "react-router-dom";
+import Bg from "../../../Images/bgimage.jpg";
+import "../../styles/header.scss";
+
+const Accommodation = () => {
+  return (
+    <>
+      <div
+        className="header-hero"
+        style={{ backgroundImage: `url(${Bg})` }}
+      >
+        <h1 className="header-title">Accommodation</h1>
+     
+      <div className="breadcrumb">
+        <Link to="/" className="breadcrumb-link">
+          Home
+        </Link>
+        <span className="breadcrumb-separator">→</span>
+        <span className="breadcrumb-current">Accommodation</span>
+      </div>
+      </div>
+      <div className="header-content">
+        {/* Add content here */}
+      </div>
+    </>
+  );
+};
+
+export default Accommodation;

data/app/javascript/react/components/Accommodation/NormalListing.jsx

@@ -0,0 +1,50 @@
+import React from "react";
+import Img1 from "../../../Images/room1.jpg";
+import Img2 from "../../../Images/room2.jpg";
+import Img3 from "../../../Images/wine-4520213_1280.jpg";
+import Img4 from "../../../Images/room4.jpg";
+import "../../styles/normallisting.scss";
+import "../../styles/wrapper.scss";
+
+const rooms = [
+  { id: 1, name: "Double Deluxe Room", price: 250, image: Img1 },
+  { id: 2, name: "Single Deluxe Room", price: 200, image: Img2 },
+  { id: 3, name: "Honeymoon Suit", price: 750, image: Img3 },
+  { id: 4, name: "Economy Double", price: 200, image: Img4 },
+  { id: 5, name: "Double Deluxe Room", price: 200, image: Img1 },
+  { id: 6, name: "Single Deluxe Room", price: 200, image: Img2 },
+  { id: 7, name: "Honeymoon Suit", price: 200, image: Img3 },
+  { id: 8, name: "Economy Double", price: 200, image: Img4 },
+];
+
+function NormalListing() {
+  return (
+    <section className="normal-listing">
+      <div className="wrapper">
+      <h2>Normal Accommodation</h2>
+      <p>
+        We all live in an age that belongs to the young at heart. Life that is
+        becoming extremely fast.
+      </p>
+
+      <div className="room-listings">
+        {rooms.map((room) => (
+          <div className="room-card" key={room.id}>
+            <div className="room-image-wrapper">
+              <img src={room.image} alt={room.name} />
+              <button>BOOK NOW</button>
+            </div>
+            <h3>{room.name}</h3>
+            <p>
+              ${room.price}
+              <span>/night</span>
+            </p>
+          </div>
+        ))}
+      </div>
+      </div>
+    </section>
+  );
+}
+
+export default NormalListing;

data/app/javascript/react/components/Accommodation/SpecialListing.jsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from "react";
+import "../../styles/speciallisting.scss";
+import "../../styles/wrapper.scss";
+import { useDispatch } from "react-redux";
+import { getAllProperties } from "../../redux/slices/PropertySlice/PropertySlice";
+import StayCard2 from "../StayCard/StayCard2";
+
+function SpecialListing() {
+  const dispatch = useDispatch();
+  const [page, setPage] = useState(1);
+  const [properties, setProperties] = useState([]);
+
+  const fetchProperties = async (pageNumber) => {
+    try {
+      const res = await dispatch(getAllProperties(pageNumber));
+      if (res?.payload?.properties) {
+        setProperties(res.payload.properties);
+      }
+    } catch (error) {
+      console.error("Failed to fetch properties", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchProperties(page);
+  }, [page]);
+  return (
+    <section className="special-listing">
+      <div className="wrapper">
+        <div className="my-booking-container">
+          <div className="my-booking-content">
+            <h1 className="heading">Hotel Accommodation</h1>
+            <p className="subheading">
+              We all live in an age that belongs to the young at heart. Life
+              that is becoming extremely fast.
+            </p>
+            <div className="stay-cards">
+              {properties?.length > 0 ? (
+                properties?.map((room) => <StayCard2 booking={room} />)
+              ) : (
+                <p className="no-results">No Property Found found.</p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default SpecialListing;

data/app/javascript/react/components/Accountpage/AccountInfo.jsx

@@ -0,0 +1,217 @@
+import React, { useEffect } from "react";
+import { useFormik } from "formik";
+import Avatar from "../../shared/Avatar/Avatar";
+import FormField from "../../shared/FormField/FormField";
+import __countryListing from "../../data/jsons/__countryListing.json";
+import "../../styles/accountinfo.scss";
+import {
+  getCurrentUser,
+  updateUser,
+  updateProfileImage,
+} from "../../redux/slices/UserSlice/UserSlice";
+import { useDispatch, useSelector } from "react-redux";
+import { UpdateUser } from "../../utils/formSchema";
+import ButtonPrimary from "../../shared/Button/ButtonPrimary";
+import successHandler from "../../utils/helpers/SuccessHandler";
+import moment from "moment";
+
+const AccountInfo = () => {
+  const dispatch = useDispatch();
+  const { data: currentUser, loading } = useSelector((state) => state.user);
+  const fileInputRef = React.useRef(null);
+  useEffect(() => {
+    if (currentUser) {
+      dispatch(getCurrentUser());
+    }
+  }, [dispatch]);
+
+  const formik = useFormik({
+    initialValues: {
+      first_name: currentUser?.first_name || "",
+      last_name: currentUser?.last_name || "",
+      email: currentUser?.email || "",
+      phone: currentUser?.phone || "",
+      date_of_birth: currentUser
+        ? moment(currentUser.date_of_birth).format("YYYY-MM-DD")
+        : "",
+      country: currentUser?.country || "",
+      about_me: currentUser?.about_me || "",
+      image: null,
+    },
+    enableReinitialize: true,
+    validationSchema: UpdateUser,
+    onSubmit: (values, { setSubmitting }) => {
+      setSubmitting(true);
+      const updatedData = {
+        profile: {
+          id: currentUser?.id,
+          first_name: values.first_name,
+          last_name: values.last_name,
+          email: values.email,
+          phone: values.phone,
+          date_of_birth: values.date_of_birth,
+          country: values.country,
+          about_me: values.about_me,
+        },
+      };
+
+      dispatch(updateUser(updatedData))
+        .unwrap()
+        .then(() => {
+          // alert("Profile updated successfully!");
+          successHandler("User information updated successfully");
+          dispatch(getCurrentUser()); // Refresh user data after update
+        })
+        .catch((error) => {
+          alert("Failed to update profile: " + error);
+        })
+        .finally(() => {
+          setSubmitting(false);
+        });
+    },
+  });
+
+  const handleImageUpload = async (event) => {
+    const file = event.target.files[0];
+
+    if (!file || !currentUser?.id) {
+      console.error("User ID or file is missing.");
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("profile_image", file);
+
+    try {
+      await dispatch(
+        updateProfileImage({ userId: currentUser.id, file })
+      ).unwrap();
+      successHandler("Profile image updated successfully");
+      dispatch(getCurrentUser());
+    } catch (error) {
+      console.error("Error updating profile image:", error);
+      alert("Failed to update profile image: " + error);
+    }
+  };
+
+  return (
+    <div className="account-info-container">
+      <div className="avatar-section">
+        <div className="avatar-section">
+          {/* Clickable Avatar */}
+          <div
+            className="avatar-wrapper"
+            onClick={() => fileInputRef.current.click()}
+          >
+            <Avatar sizeClass="large-avatar" />
+          </div>
+
+          <input
+            type="file"
+            ref={fileInputRef}
+            className="file-input"
+            accept="image/*"
+            onChange={handleImageUpload}
+            hidden
+          />
+        </div>
+      </div>
+
+      <form onSubmit={formik.handleSubmit} className="account-form">
+        <div className="grid-container">
+          <FormField
+            label="First Name"
+            name="first_name"
+            placeholder="John"
+            type="text"
+            value={formik.values.first_name}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.first_name && formik.errors.first_name}
+          />
+
+          <FormField
+            label="Last Name"
+            name="last_name"
+            placeholder="Doe"
+            type="text"
+            value={formik.values.last_name}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.last_name && formik.errors.last_name}
+          />
+
+          <FormField
+            label="Email"
+            name="email"
+            placeholder="john.doe@example.com"
+            type="email"
+            value={formik.values.email}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.email && formik.errors.email}
+            disabled // Email should not be editable
+          />
+
+          <FormField
+            label="Phone Number"
+            name="phone"
+            placeholder="+1 (123) 456-7890"
+            type="text"
+            value={formik.values.phone}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.phone && formik.errors.phone}
+          />
+
+          <FormField
+            label="Date of Birth"
+            name="date_of_birth"
+            placeholder="YYYY-MM-DD"
+            type="date"
+            value={formik.values.date_of_birth}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.date_of_birth && formik.errors.date_of_birth}
+          />
+
+          <FormField
+            label="Country"
+            name="country"
+            placeholder="Select country"
+            type="select"
+            value={formik.values.country}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.country && formik.errors.country}
+            options={__countryListing.map((country) => ({
+              value: country.name,
+              label: country.name,
+            }))}
+          />
+        </div>
+
+        <FormField
+          label="About Me"
+          name="about_me"
+          placeholder="Tell us about yourself"
+          type="textarea"
+          value={formik.values.about_me}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          error={formik.touched.about_me && formik.errors.about_me}
+        />
+
+        <ButtonPrimary
+          type="submit"
+          className="submit-btn"
+          disabled={formik.isSubmitting}
+        >
+          {formik.isSubmitting ? "Saving..." : "Save"}
+        </ButtonPrimary>
+      </form>
+    </div>
+  );
+};
+
+export default AccountInfo;

data/app/javascript/react/components/Accountpage/AccountPage.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import CommonPage from "./CommonPage";
+import AccountInfo from "./AccountInfo";
+import { useSelector } from "react-redux";
+import "../../styles/accountpage.scss";
+
+const AccountPage = () => {
+  return (
+    <>
+      <CommonPage>
+        {/* title="Account || Booking React Template" */}
+        <div className="container">
+          <div className="account_deatils">
+            <h2 className="account-title">Account Information</h2>
+            <p className="account-description">
+              View and update your account information here.
+            </p>
+            <div className="divider"></div>
+            <AccountInfo />
+          </div>
+        </div>
+      </CommonPage>
+    </>
+  );
+};
+
+export default AccountPage;

data/app/javascript/react/components/Accountpage/CommonPage.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import { useSelector } from "react-redux";
+import "../../styles/commonpage.scss";
+
+const CommonPage = ({ children }) => {
+
+  return (
+    <div className="commonPageWrapper">
+      <div className="navbarWrapper">
+        <div className="container">
+          <div className="navLinks">
+            <NavLink to="/account" className={({ isActive }) => isActive ? "activeLink" : "link"}>
+              Account info
+            </NavLink>
+          </div>
+        </div>
+      </div>
+      <div className="contentContainer">{children}</div>
+    </div>
+  );
+};
+
+export default CommonPage;

data/app/javascript/react/components/AddNewProperty/CommonLayout.jsx

@@ -0,0 +1,68 @@
+import React, { FC, useEffect } from "react";
+import { useNavigate, useLocation, Link } from "react-router-dom";
+import "../../styles/commonlayout.scss";
+const CommonLayout = ({ children, PropertyID }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    if (!PropertyID) {
+      navigate("/property-1");
+    }
+  }, [PropertyID, navigate]);
+
+  // Define your steps
+  const pathArray = [
+    { path: 1, type: "Description", href: "/property-1" },
+    { path: 2, type: "Images", href: "/property-2" },
+    { path: 3, type: "Details", href: "/property-3" },
+    { path: 4, type: "Location", href: "/property-4" },
+    { path: 5, type: "Rooms", href: "/property-5" },
+  ].map((step) => {
+    if (PropertyID) {
+      return { ...step, href: `${step.href}/${PropertyID}` };
+    }
+    return step;
+  });
+  const activeStepIndex = pathArray.findIndex((step) => {
+    const basePath = step.href.split("/").slice(0, 2).join("/");
+    return location.pathname.includes(basePath);
+  });
+
+  return (
+    <div className="common-layout">
+      <div className="steps-container">
+        {pathArray.map((step, index) => (
+          <div key={step.path} className="step">
+            <div className="step-circle-wrapper">
+              <Link
+                to={step.href}
+                className={`step-circle ${
+                  index <= activeStepIndex ? "active" : ""
+                }`}
+              />
+              {index < pathArray.length - 1 && (
+                <div
+                  className={`step-line ${
+                    index < activeStepIndex ? "active" : ""
+                  }`}
+                ></div>
+              )}
+            </div>
+            <Link
+              to={step.href}
+              className={`step-label ${
+                index === activeStepIndex ? "active" : ""
+              }`}
+            >
+              {step.type}
+            </Link>
+          </div>
+        ))}
+      </div>
+      <div className="content">{children}</div>
+    </div>
+  );
+};
+
+export default CommonLayout;