stay_commerce-frontend 0.1.0

data/app/javascript/react/components/Listing-stay-Detail/Reviews.jsx

@@ -0,0 +1,132 @@
+import React, { useState } from "react";
+import "../../styles/reviews.scss";
+import ButtonPrimary from "../../shared/Button/ButtonPrimary";
+
+const Reviews = () => {
+  const [visibleCount, setVisibleCount] = useState(2);
+
+  const reviews = [
+    {
+      id: 1,
+      name: "Luciano S",
+      rating: 5.0,
+      content:
+        "Excellent place to stay! The apartment is beautiful and very cozy. The communication with the coliving team was very good, and they were super attentive to everything I needed. The location is excellent with many cafes and restaurants nearby. I would definitely return!",
+      profileImg: "https://i.pravatar.cc/100?img=1",
+    },
+    {
+      id: 2,
+      name: "Matias A",
+      rating: 5.0,
+      content:
+        "I stayed in a coliving and the experience was excellent. The apartment was impeccable, with a divine level of detail, well-equipped, and very comfortable. The host was attentive and responded quickly to my questions. The neighborhood is quiet but with many options to eat and drink something. Very recommended!",
+      profileImg: "https://i.pravatar.cc/100?img=2",
+    },
+    {
+      id: 3,
+      name: "Nico R",
+      rating: 5.0,
+      content:
+        "The experience, overall, was perfect! The place was clean and cozy, the staff were nice, communication was great, and the location was awesome!",
+      profileImg: "https://i.pravatar.cc/100?img=3",
+    },
+    {
+      id: 4,
+      name: "Mirta C",
+      rating: 5.0,
+      content:
+        "I loved my stay at the coliving! As a digital nomad, finding a place that combines comfort, good internet and a nice community is essential. This place exceeded my expectations.",
+      profileImg: "https://i.pravatar.cc/100?img=4",
+    },
+  ];
+
+  const ratings = [5, 4, 3, 2, 1];
+  const percentages = [100, 0, 0, 0, 0];
+
+  const showMore = () => {
+    setVisibleCount(reviews?.length || 0);
+  };
+
+  const showLess = () => {
+    setVisibleCount(3);
+  };
+
+  const visibleReviews = reviews?.slice(0, visibleCount) || [];
+  const hasMoreReviews = visibleCount < (reviews?.length || 0);
+
+  return (
+    <div className="reviews-container">
+      <h2>Reviews</h2>
+      <div className="divider"></div>
+
+      <div className="reviews-summary">
+        <div className="rating-average">
+          <h1>5.0</h1>
+          <div className="stars">
+            {[...Array(5)].map((_, i) => (
+              <span key={i} className="star">
+                ★
+              </span>
+            ))}
+          </div>
+          <p>Excellent!</p>
+          <p className="review-count">Based on 19 reviews</p>
+        </div>
+
+        <div className="rating-bars">
+          {ratings?.map((rating, index) => (
+            <div className="rating-bar" key={rating}>
+              <span className="rating-number">{rating} ★</span>
+              <div className="progress-container">
+                <div
+                  className="progress-bar"
+                  style={{ width: `${percentages?.[index] || 0}%` }}
+                ></div>
+              </div>
+              <span className="percentage">{percentages?.[index] || 0} %</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="reviews-list">
+        {visibleReviews?.map((review) => (
+          <div className="review-item" key={review?.id}>
+            <div className="user-info">
+              <img
+                src={review?.profileImg}
+                alt={review?.name}
+                className="profile-pic"
+              />
+              <div className="user-rating">
+                <h3>{review?.name}</h3>
+                <div className="rating-display">
+                  <span className="star">★</span>
+                  <span className="rating-value">{review?.rating}</span>
+                </div>
+              </div>
+            </div>
+            <p className="review-content">{review?.content}</p>
+            <div className="review-divider"></div>
+          </div>
+        ))}
+
+        {(reviews?.length || 0) > 2 && (
+          <div className="show-more-container">
+            {hasMoreReviews ? (
+              <ButtonPrimary className="show-more-btn" onClick={showMore}>
+                Show more
+              </ButtonPrimary>
+            ) : (
+              <ButtonPrimary className="show-less-btn" onClick={showLess}>
+                Show less
+              </ButtonPrimary>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Reviews;

data/app/javascript/react/components/Listing-stay-Detail/RoomDescriptionModal.jsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { X } from "lucide-react";
+
+const RoomDescriptionModal = ({ isOpen, onClose, room }) => {
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  if (!isOpen || !room?.description) return null;
+
+  return (
+    <div
+      className="modal-overlay"
+      onClick={handleBackdropClick}
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1000,
+        padding: "20px",
+      }}
+    >
+      <div
+        className="modal-content"
+        style={{
+          backgroundColor: "white",
+          borderRadius: "12px",
+          padding: "24px",
+          maxWidth: "600px",
+          width: "100%",
+          maxHeight: "80vh",
+          overflowY: "auto",
+          position: "relative",
+          boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        }}
+      >
+        {/* Close Button */}
+        <button
+          onClick={onClose}
+          style={{
+            position: "absolute",
+            top: "16px",
+            right: "16px",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: "8px",
+            borderRadius: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: "background-color 0.2s",
+          }}
+          onMouseEnter={(e) => (e.target.style.backgroundColor = "#f3f4f6")}
+          onMouseLeave={(e) => (e.target.style.backgroundColor = "transparent")}
+        >
+          <X size={20} />
+        </button>
+
+        {/* Modal Header */}
+        <div style={{ marginBottom: "24px", paddingRight: "40px" }}>
+          <h2
+            style={{
+              margin: 0,
+              fontSize: "24px",
+              fontWeight: "600",
+              color: "#111827",
+            }}
+          >
+            Room Description
+          </h2>
+          <p
+            style={{ margin: "8px 0 0 0", color: "#6b7280", fontSize: "14px" }}
+          >
+            {room?.name}
+          </p>
+        </div>
+
+        {/* Description Body */}
+        <div>
+          <p
+            style={{
+              fontSize: "16px",
+              color: "#374151",
+              lineHeight: "1.6",
+              whiteSpace: "pre-line",
+            }}
+          >
+            {room?.description}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RoomDescriptionModal;

data/app/javascript/react/components/Listing-stay-Detail/Rules.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import "../../styles/rules.scss";
+
+const Rules = ({ propertyData }) => {
+  return (
+    <div className="policy__wrap">
+      <h2 className="policy__title">Property Policies & Rules</h2>
+      <div className="policy__divider" />
+      <div>
+        <h4 className="policy__subtitle">Special Note</h4>
+        <ul className="policy__rules-list">
+          {propertyData?.additional_rules.map((rule) => (
+            <li key={rule?.id} className="policy__rule">
+              {rule?.name}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Rules;

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

@@ -0,0 +1,30 @@
+
+import React from "react";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import { XMarkIcon } from "@heroicons/react/24/outline"; 
+import "../../styles/listingimagegallery.scss";
+
+const ListingImageGallery = ({ images, onClose }) => {
+  return (
+    <div className="image-gallery-overlay">
+      <div className="image-gallery-content">
+        <button className="close-button" onClick={onClose}>
+          <XMarkIcon className="close-icon" />
+        </button>
+        <div className="gallery-grid">
+          {images?.map((img) => (
+            <div key={img?.id} className="gallery-image-wrapper">
+              <LazyLoadImage
+                src={img?.url}
+                alt={`Image ${img?.id}`}
+                className="gallery-image"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListingImageGallery;

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

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import { useFormik } from "formik";
+import { Link, useNavigate } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import "../../styles/loginpage.scss";
+import { loginSchema } from "../../utils/formSchema";
+import { signIn } from "../../redux/slices/AuthSlice/AuthSlice";
+import { getCurrentUser } from "../../redux/slices/UserSlice/UserSlice";
+import successHandler from "../../utils/helpers/SuccessHandler";
+import SocialAuth from "../SocialAuth/SocialAuth";
+import FormField from "../../shared/FormField/FormField";
+import "../../styles/formfield.scss";
+
+const LoginPage = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const formik = useFormik({
+    initialValues: {
+      email: "",
+      password: "",
+    },
+    validationSchema: loginSchema,
+    onSubmit: (values, { setSubmitting, resetForm }) => {
+      setSubmitting(true);
+
+      dispatch(signIn(values))
+        .unwrap()
+        .then((response) => {
+          if (response?.access_token) {
+            localStorage.setItem("authToken", response.access_token);
+            successHandler("Logged in successfully");
+            // dispatch(getCurrentUser());
+            dispatch(getCurrentUser()).then((res) => {
+              localStorage.setItem("user", JSON.stringify(res.payload.data)); // ⬅️ Add this
+            });
+            navigate("/");
+            resetForm();
+          } else {
+            console.warn("Login failed: ", response);
+          }
+        })
+        .catch((error) => {
+          console.warn("Error in login: ", error);
+        })
+        .finally(() => {
+          setSubmitting(false);
+        });
+    },
+  });
+
+  return (
+    <div className="login-container">
+      <span className="logos">👑 STAY COMMERCE</span>
+      <div className="main-title">
+        <h2>Welcome Back</h2>
+        <h3>Booking Platform</h3>
+      </div>
+
+      <div className="login-card">
+        <div className="log-title">
+          <h2>Login</h2>
+        </div>
+        <div className="social-login">
+          <SocialAuth />
+          <h4>OR</h4>
+        </div>
+
+        <form className="login-form" onSubmit={formik.handleSubmit}>
+          <FormField
+            label="Email"
+            name="email"
+            type="email"
+            placeholder="Your Email"
+            value={formik.values.email}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.email && formik.errors.email}
+          />
+
+          <FormField
+            label="Password"
+            name="password"
+            type="password"
+            placeholder="Your Password"
+            value={formik.values.password}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.password && formik.errors.password}
+          />
+
+          <button
+            type="submit"
+            className="login-button"
+            disabled={formik.isSubmitting}
+          >
+            {formik.isSubmitting ? "Logging in..." : "Login"}
+          </button>
+        </form>
+
+        <span className="forgot-password-link">
+          <Link to="/forget-password" className="forgot-password-link__text">
+            Forgot password?
+          </Link>
+        </span>
+
+        <p className="signup-text">
+          Don't have an account? <Link to="/signup">Create an account</Link>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;

data/app/javascript/react/components/MobileNav/MobileMenu.jsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { Menu, X } from "lucide-react";
+import "../../styles/mobilemenu.scss"
+
+function MobileMenu() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const location = useLocation();
+
+  const toggleMenu = () => setIsMenuOpen((prev) => !prev);
+
+  const navItems = [
+    { name: "HOME", path: "/" },
+    { name: "ABOUT US", path: "/about-us" },
+    { name: "ACCOMMODATION", path: "/accommodation" },
+    { name: "GALLERY", path: "/gallery" },
+    { name: "BLOG", path: "/blog" },
+    { name: "ELEMENT", path: "/element" },
+    { name: "CONTACT", path: "/contact" },
+  ];
+
+  return (
+    <div className="mobileMenu">
+      <div className="hamburger" onClick={toggleMenu}>
+        {isMenuOpen ? <X size={28} /> : <Menu size={28} />}
+      </div>
+
+      {/* Dropdown Menu */}
+      <div className={`nav ${isMenuOpen ? "open" : ""}`}>
+        {navItems.map((item) => (
+          <Link
+            key={item.name}
+            to={item.path}
+            className={`Link ${
+              location.pathname === item.path ? "active" : ""
+            }`}
+            onClick={toggleMenu} 
+          >
+            {item.name}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default MobileMenu;

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

@@ -0,0 +1,25 @@
+
+// import React, { useState, useEffect } from "react";
+// import FixedNavbar from "../FixedNavbar/FixedNav";
+// import SmallNavbar from "../SmallNavbar/SmallNav";
+// import "../../styles/fixednavbar.scss";
+
+// function Navbar() {
+//   const [isScrolled, setIsScrolled] = useState(false);
+
+//   useEffect(() => {
+//     const handleScroll = () => {
+//       setIsScrolled(window.scrollY > 50);
+//     };
+
+//     window.addEventListener("scroll", handleScroll);
+//     return () => window.removeEventListener("scroll", handleScroll);
+//   }, []);
+
+//   return isScrolled ? <FixedNavbar /> : <SmallNavbar />;
+// }
+
+
+// export default Navbar;
+
+

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

@@ -0,0 +1,30 @@
+import React from "react";
+import Img from "../../../Images/404error.jpg";
+import "../../styles/404error.scss";
+import { Link } from "react-router-dom";
+import Navbar from "../../components/Navbar/Navbar";
+import "../../styles/wrapper.scss";
+
+const Page404 = () => (
+    <>
+
+    <div className="page404">
+      <div className="wrapper">
+    <div className="contain">
+      <img src={Img} alt="404 Error" className="page404-image" />
+      <h1 className="page404-title">404 - Page Not Found</h1>
+      <p className="page404-subtitle">
+        Oops! The page you're looking for doesn't exist.
+      </p>
+      <Link to="/" className="page404-button">
+        Return Home Page
+      </Link>
+    </div>
+    </div>
+  </div>
+
+  </>
+  
+);
+
+export default Page404;

data/app/javascript/react/components/PropertyListing/MyProperties.jsx

@@ -0,0 +1,146 @@
+import React, { useState, useEffect } from "react";
+import { useDispatch } from "react-redux";
+
+import PropertyCard from "../Headers/PropertyCard";
+import ButtonPrimary from "../../shared/Button/ButtonPrimary";
+import "../../styles/myproperty.scss";
+import { getallPropertieslisting } from "../../redux/slices/PropertySlice/PropertySlice";
+import PropertiesPage from "../HeroSectionDesign/PropertiesPage";
+import MyPropertiesListing from "../HeroSectionDesign/MyPropertiesListing";
+
+const MyProperties = () => {
+  const dispatch = useDispatch();
+
+  const [allData, setAllData] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSearchLoading, setIsSearchLoading] = useState(false);
+  const [query, setQuery] = useState("");
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+
+  const mergedData = (dataToBeMerged) => {
+    const newData = dataToBeMerged.map((apiItem) => ({
+      id: apiItem?.id,
+      title: apiItem?.title,
+      place_images: apiItem?.place_images,
+      address: `${apiItem?.city}, ${apiItem?.state}`,
+      availability_start: apiItem?.availability_start,
+      availability_end: apiItem?.availability_end,
+      price: apiItem?.price_per_month,
+      href: `/listing-stay-detail/${apiItem?.slug}`,
+      property_state: apiItem?.property_state || null,
+      active: apiItem?.active ?? false,
+      property_category: apiItem?.property_category?.name,
+      property_type: apiItem?.property_type?.name,
+      city: apiItem?.city,
+      country: apiItem?.country,
+      slug: apiItem?.slug,
+      reviewCount: apiItem?.average,
+      reviewTotal: apiItem?.count,
+      description: apiItem?.description,
+    }));
+    setAllData(newData);
+  };
+
+  const fetchData = async (currentPage = 1) => {
+    setIsLoading(true);
+    try {
+      const payload = { page: currentPage, query };
+      const res = await dispatch(getallPropertieslisting(payload)).unwrap();
+      if (res?.properties?.length > 0) {
+        mergedData(res.properties);
+        setTotalPages(res?.meta?.total_pages || 1);
+      } else {
+        setAllData([]);
+        setTotalPages(1); // Or 0, depending on your UI handling
+      }
+    } catch (error) {
+      console.error("Error fetching properties:", error);
+      setAllData([]);
+      setTotalPages(1); // Optional fallback
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // // 🔍 Search handler
+  // const handleSearch = async () => {
+  //   if (!query.trim()) return;
+  //   setIsSearchLoading(true);
+  //   try {
+  //     await fetchData(1);
+  //     setPage(1);
+  //   } catch (error) {
+  //     console.error("Search error:", error);
+  //   } finally {
+  //     setIsSearchLoading(false);
+  //   }
+  // };
+  const handleSearch = async () => {
+    if (!query.trim()) return;
+    setIsSearchLoading(true);
+    try {
+      const success = await fetchData(1);
+      if (success) {
+        setPage(1); // ✅ Set page only when fetch is successful
+      }
+    } catch (error) {
+      console.error("Search error:", error);
+    } finally {
+      setIsSearchLoading(false);
+    }
+  };
+
+  // ⌨️ Handle query input
+  const handleSearchChange = (event) => {
+    setQuery(event.target.value);
+  };
+
+  // 📦 Auto-fetch on mount or when query is cleared
+  useEffect(() => {
+    if (query.length === 0) {
+      fetchData(1);
+    }
+  }, [query]);
+
+  return (
+    <div className="myListing-page">
+      <div className="myListing-content">
+        <div className="myListing-header">
+          {/* 🔍 Search Input */}
+          {/* <div className="myListing-search">
+              <div className="search-bar">
+                <input
+                  type="text"
+                  value={query}
+                  onChange={handleSearchChange}
+                  placeholder="Search By Property Name..."
+                  className="search-input"
+                />
+                <ButtonPrimary
+                  onClick={handleSearch}
+                  className={`search-button ${
+                    isSearchLoading || query.trim() === ""
+                      ? "search-button-disabled"
+                      : "search-button-active"
+                  }`}
+                  disabled={isSearchLoading || query.trim() === ""}
+                >
+                  {isSearchLoading ? "Searching..." : "Search"}
+                </ButtonPrimary>
+              </div>
+            </div> */}
+          <div className="myListing-property-cards">
+            <MyPropertiesListing
+              heading="My Properties"
+              stayListings={allData}
+              setAllData={setAllData}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyProperties;