stay_commerce-frontend 0.1.0 → 0.1.1

data/app/javascript/react/components/AvatarDropdown/AvatarDropDown.jsx

@@ -73,6 +73,14 @@ export default function AvatarDropdown() {
     { name: "Contact", href: "/contact", icon: PhoneIcon },
   ];
 
+  if (!user?.is_host) {
+    options.push({
+      name: "AddCard",
+      href: "/AddCard",
+      icon: LifebuoyIcon,
+    });
+  }
+
   if (user?.is_host) {
     options.push({
       name: "My Properties",
@@ -100,7 +108,7 @@ export default function AvatarDropdown() {
   return (
     <div className="avatar-dropdown" ref={dropdownRef}>
       <button onClick={() => setIsOpen(!isOpen)} className="avatar-button">
-        <Avatar />
+        <Avatar userData={user} />
       </button>
 
       {isOpen && (

data/app/javascript/react/components/FacilitiesSection/Facilities.jsx

@@ -37,6 +37,24 @@ const features = [
     description:
       "Enjoy premium beverages and cocktails in our elegant bar lounge.",
   },
+  {
+    icon: "🍽️",
+    title: "Restaurant",
+    description:
+      "Experience fine dining with our world-class restaurant offering exquisite cuisine.",
+  },
+  {
+    icon: "🚴",
+    title: "Sports Club",
+    description:
+      "Stay active with our premium sports facilities and professional equipment.",
+  },
+  {
+    icon: "👕",
+    title: "Swimming Pool",
+    description:
+      "Relax and unwind in our luxurious swimming pool with crystal clear water.",
+  },
 ];
 
 const FacilitiesSection = () => {

data/app/javascript/react/components/FixedNavbar/FixedNav.jsx

@@ -1,32 +1,34 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
-import { logout } from "../../redux/slices/AuthSlice/AuthSlice";
 import MobileMenu from "../MobileNav/MobileMenu";
 import "../../styles/fixednavbar.scss";
 import AvatarDropDown from "../AvatarDropdown/AvatarDropDown";
-import logo from "../../assets/logo_updated.png";
+// import logo from "../../assets/logo_updated.png";
 
 // React Icons
 import { IoHomeOutline } from "react-icons/io5";
 import { MdInfoOutline } from "react-icons/md";
 import { FaBed, FaImages, FaBlogger } from "react-icons/fa";
+import { getCurrentUser } from "../../redux/slices/UserSlice/UserSlice";
 
 function FixedNavbar() {
   const location = useLocation();
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const { user } = useSelector((state) => state.auth);
+  const { data: currentUser, loading } = useSelector((state) => state.user);
 
-  const handleLogout = () => {
-    dispatch(logout());
-    navigate("/");
-  };
+  useEffect(() => {
+    if (currentUser) {
+      dispatch(getCurrentUser());
+    }
+  }, [dispatch]);
 
   const navItems = [
     { name: "Home", path: "/", icon: <IoHomeOutline /> },
     { name: "About us", path: "/about-us", icon: <MdInfoOutline /> },
-    { name: "Accommodation", path: "/accommodation", icon: <FaBed /> },
+    // { name: "Accommodation", path: "/accommodation", icon: <FaBed /> },
     { name: "Gallery", path: "/gallery", icon: <FaImages /> },
     // { name: "Blog", path: "/blog", icon: <FaBlogger /> },
   ];
@@ -37,8 +39,16 @@ function FixedNavbar() {
         <div className="navContent">
           <div className="logo">
             <span className="logospan">
-              <a href="/">
-                <img src={logo} width={140} alt="Logo" />
+              <a
+                style={{
+                  fontWeight: "bold",
+                  textDecoration: "none",
+                  color: "#081976",
+                }}
+              >
+                <h4 style={{ margin: 0, fontWeight: "bold", fontSize: "24px" }}>
+                  STAY COMMERCE
+                </h4>
               </a>
             </span>
           </div>
@@ -61,9 +71,6 @@ function FixedNavbar() {
           <div className="authButtons">
             {user ? (
               <>
-                <button onClick={handleLogout} className="logoutButton">
-                  LOGOUT
-                </button>
                 <AvatarDropDown />
               </>
             ) : (
@@ -77,7 +84,6 @@ function FixedNavbar() {
               </>
             )}
           </div>
-
           <MobileMenu />
         </div>
       </div>

data/app/javascript/react/components/HeroSectionDesign/BookingForm.jsx

@@ -4,67 +4,58 @@ import ButtonPrimary from "../../shared/Button/ButtonPrimary";
 import { useFormik } from "formik";
 import { useNavigate } from "react-router-dom";
 import moment from "moment";
-import { useDispatch } from "react-redux";
-import { searchProperties } from "../../redux/slices/PropertySlice/PropertySlice";
-import { setSearchMeta } from "../../redux/slices/PropertySlice/Searchslice";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  searchProperties,
+  setSearchMeta,
+} from "../../redux/slices/PropertySlice/Searchslice";
+import { toast } from "react-toastify";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import Autocomplete from "react-google-autocomplete";
 
 function BookingForm() {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const [isLoading, setIsLoading] = useState(false);
-  const [latLng, setLatLng] = useState({ lat: null, lng: null });
-
+  const { address, startDate, endDate, totalGuests, latitude, longitude } =
+    useSelector((state) => state.search);
   const initialValues = {
-    address: "",
-    arrivalDate: "",
-    departureDate: "",
-    adults: 1,
-  };
-
-  const getLatLngFromAddress = async (address) => {
-    const response = await fetch(
-      `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(
-        address
-      )}`
-    );
-    const data = await response.json();
-    if (data.length > 0) {
-      return {
-        lat: data[0].lat,
-        lng: data[0].lon,
-      };
-    }
-    return { lat: null, lng: null };
+    address: address || "",
+    arrivalDate: startDate || "",
+    departureDate: endDate || "",
+    adults: totalGuests || 1,
+    latitude: latitude || null,
+    longitude: longitude || null,
   };
 
   const onSubmit = async (values) => {
     setIsLoading(true);
     try {
-      const { lat, lng } = await getLatLngFromAddress(values.address);
-      setLatLng({ lat, lng });
-
       const modifiedStartDate = moment(values.arrivalDate).format("YYYY-MM-DD");
       const modifiedEndDate = moment(values.departureDate).format("YYYY-MM-DD");
 
-      const searchQuery = `q[availability_start_lteq]=${modifiedStartDate}&q[availability_end_gteq]=${modifiedEndDate}&q[guest_number_gteq]=${values.adults}&q[latitude]=${lat}&q[longitude]=${lng}`;
+      const searchQuery = `q[availability_start_lteq]=${modifiedStartDate}&q[availability_end_gteq]=${modifiedEndDate}&q[guest_number_gteq]=${values.adults}&q[latitude]=${values.latitude}&q[longitude]=${values.longitude}`;
 
       const action = await dispatch(searchProperties(searchQuery)).unwrap();
 
-      if (action?.success) {
+      if (Array.isArray(action?.properties) && action.properties.length > 0) {
         dispatch(
           setSearchMeta({
             startDate: values.arrivalDate,
             endDate: values.departureDate,
             totalGuests: values.adults,
             address: values.address,
-            latitude: lat,
-            longitude: lng,
+            latitude: values.latitude,
+            longitude: values.longitude,
           })
         );
         navigate("/listingSearchPage");
+      } else {
+        toast.info("No properties found for the selected criteria.");
       }
     } catch (error) {
-      console.error("Search error:", error);
+      console.error("❌ Search error caught:", error);
     } finally {
       setIsLoading(false);
     }
@@ -75,10 +66,10 @@ function BookingForm() {
     onSubmit,
     validate: (values) => {
       const errors = {};
-      if (!values.address) errors.address = "Required";
-      if (!values.arrivalDate) errors.arrivalDate = "Required";
+      if (!values.address) errors.address = "Location is required";
+      if (!values.arrivalDate) errors.arrivalDate = "Arrival date is required";
       if (!values.departureDate) {
-        errors.departureDate = "Required";
+        errors.departureDate = "Departure date is required";
       } else if (values.departureDate <= values.arrivalDate) {
         errors.departureDate = "Departure must be after arrival";
       }
@@ -93,48 +84,107 @@ function BookingForm() {
           <div className="booking-table">
             <form onSubmit={formik.handleSubmit} className="form-fields">
               <div className="form-row">
-                <div className="input-group">
-                  <input
-                    type="text"
-                    className="form-control"
-                    placeholder="Enter Address"
-                    name="address"
-                    value={formik.values.address}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                  />
+                <div className="input-wrapper">
+                  <div
+                    className={`input-group ${
+                      formik.touched.address && formik.errors.address
+                        ? "has-error"
+                        : ""
+                    }`}
+                  >
+                    <Autocomplete
+                      apiKey="AIzaSyA-ZbTjLDeHfCHLbWtqpTOYY64PcwnH7bQ"
+                      style={{
+                        width: "100%",
+                        padding: "8px",
+                        border: "none",
+                        outline: "none",
+                      }}
+                      value={formik.values.address}
+                      onPlaceSelected={(place) => {
+                        const address =
+                          place.formatted_address || place.name || "";
+                        const lat = place.geometry?.location?.lat();
+                        const lng = place.geometry?.location?.lng();
+
+                        formik.setFieldValue("address", address);
+                        formik.setFieldValue("latitude", lat);
+                        formik.setFieldValue("longitude", lng);
+                        formik.setFieldTouched("address", true);
+                      }}
+                      onChange={(e) => {
+                        formik.setFieldValue("address", e.target.value);
+                      }}
+                    />
+                  </div>
                   {formik.touched.address && formik.errors.address && (
                     <div className="error-message">{formik.errors.address}</div>
                   )}
                 </div>
-                <div className="input-group">
-                  <input
-                    type="date"
-                    className="form-control"
-                    name="arrivalDate"
-                    value={formik.values.arrivalDate}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                    min={moment().format("YYYY-MM-DD")}
-                  />
+                <div className="input-wrapper">
+                  <div
+                    className={`input-group ${
+                      formik.touched.arrivalDate && formik.errors.arrivalDate
+                        ? "has-error"
+                        : ""
+                    }`}
+                  >
+                    <DatePicker
+                      selected={
+                        formik.values.arrivalDate
+                          ? new Date(formik.values.arrivalDate)
+                          : null
+                      }
+                      onChange={(date) => {
+                        formik.setFieldValue("arrivalDate", date);
+                        formik.setFieldValue("departureDate", null); // reset departure
+                      }}
+                      className="form-control"
+                      name="arrivalDate"
+                      dateFormat="yyyy-MM-dd"
+                      minDate={new Date()}
+                      placeholderText="Arrival Date"
+                      isClearable
+                    />
+                  </div>
                   {formik.touched.arrivalDate && formik.errors.arrivalDate && (
                     <div className="error-message">
                       {formik.errors.arrivalDate}
                     </div>
                   )}
                 </div>
-                <div className="input-group">
-                  <input
-                    type="date"
-                    className="form-control"
-                    name="departureDate"
-                    value={formik.values.departureDate}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                    min={
-                      formik.values.arrivalDate || moment().format("YYYY-MM-DD")
-                    }
-                  />
+                <div className="input-wrapper">
+                  <div
+                    className={`input-group ${
+                      formik.touched.departureDate &&
+                      formik.errors.departureDate
+                        ? "has-error"
+                        : ""
+                    }`}
+                  >
+                    <DatePicker
+                      selected={
+                        formik.values.departureDate
+                          ? new Date(formik.values.departureDate)
+                          : null
+                      }
+                      onChange={(date) => {
+                        formik.setFieldValue("departureDate", date);
+                      }}
+                      className="form-control"
+                      name="departureDate"
+                      dateFormat="yyyy-MM-dd"
+                      minDate={
+                        formik.values.arrivalDate
+                          ? moment(formik.values.arrivalDate)
+                              .add(1, "days")
+                              .toDate()
+                          : moment().add(1, "days").toDate()
+                      }
+                      placeholderText="Departure Date"
+                      isClearable
+                    />
+                  </div>
                   {formik.touched.departureDate &&
                     formik.errors.departureDate && (
                       <div className="error-message">
@@ -142,28 +192,26 @@ function BookingForm() {
                       </div>
                     )}
                 </div>
-                <div className="input-group">
-                  <select
-                    className="form-control"
-                    name="adults"
-                    value={formik.values.adults}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                  >
-                    <option value={1}>1 Adult</option>
-                    <option value={2}>2 Adults</option>
-                    <option value={3}>3 Adults</option>
-                    <option value={4}>4 Adults</option>
-                    <option value={5}>5+ Adults</option>
-                  </select>
+                <div className="input-wrapper">
+                  <div className="input-group">
+                    <select
+                      className="form-control"
+                      name="adults"
+                      value={formik.values.adults}
+                      onChange={formik.handleChange}
+                      onBlur={formik.handleBlur}
+                    >
+                      <option value={1}>1 Adult</option>
+                      <option value={2}>2 Adults</option>
+                      <option value={3}>3 Adults</option>
+                      <option value={4}>4 Adults</option>
+                      <option value={5}>5+ Adults</option>
+                    </select>
+                  </div>
                 </div>
                 <div className="book-now-container">
-                  <ButtonPrimary
-                    className="book-now-btn"
-                    type="submit"
-                    loading={isLoading}
-                  >
-                    BOOK NOW
+                  <ButtonPrimary type="submit" loading={isLoading}>
+                    Search
                   </ButtonPrimary>
                 </div>
               </div>

data/app/javascript/react/components/HeroSectionDesign/MyPropertiesListing.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import GallerySlider from "../GallerySlider/GallerySlider";
 import { useNavigate } from "react-router-dom";
+import SecondryButton from "../../shared/Button/SecondryButton";
 
 const MyPropertiesListing = ({
   heading = "Explore Travel Experiences",
@@ -12,89 +13,98 @@ const MyPropertiesListing = ({
   const handleClick = (id) => {
     navigate(`/listing-stay-detail/${id}`);
   };
-  console.log("stayListings", stayListings);
   const handleViewAll = (slug) => navigate(`/property-1/${slug}`);
+
+  const truncateText = (text, maxLength) => {
+    if (!text) return "";
+    return text.length > maxLength ? text.slice(0, maxLength) + "..." : text;
+  };
+
   return (
     <div className="properties-page">
       <div className="container">
         <h2>{heading}</h2>
         <div className="property-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-          {stayListings.map((property, index) => (
-            <div key={property.id || index} className="property-card">
-              <div className="card-image-section">
-                {property.property_state && (
-                  <div className="discount-badge">
-                    {{
-                      approved: "Approved",
-                      waiting_for_approval: "Waiting for Approval",
-                    }[property.property_state] || "Unknown Status"}
-                  </div>
-                )}
+          {stayListings && stayListings?.length > 0 ? (
+            stayListings.map((property, index) => (
+              <div key={property.id || index} className="property-card">
+                <div className="card-image-section">
+                  {property.property_state && (
+                    <div className="discount-badge">
+                      {{
+                        approved: "Approved",
+                        waiting_for_approval: "Waiting for Approval",
+                      }[property.property_state] || "Unknown Status"}
+                    </div>
+                  )}
 
-                <GallerySlider
-                  images={property.place_images || []}
-                  alt={property.title}
-                  style={{ height: "220px" }}
-                />
-              </div>
-              <div className="card-content">
-                <div className="location-duration">
-                  <span className="location">
-                    {property.location || property.address}
-                  </span>
+                  <GallerySlider
+                    images={property.place_images || []}
+                    alt={property.title}
+                    style={{ height: "220px" }}
+                  />
                 </div>
-                <h3 className="property-title">{property.title}</h3>
-                <p className="description">{property.description}</p>
+                <div className="card-content">
+                  <div className="location-duration">
+                    <span className="location">
+                      {property.location || property.address}
+                    </span>
+                  </div>
+                  <h3 className="property-title">{property.title}</h3>
+                  <p className="description">
+                    {truncateText(property?.description, 170)}
+                  </p>
 
-                <div className="card-footer">
-                  <div className="features">
-                    {property.property_category && (
-                      <span className="feature-tag">
-                        {property.property_category}
-                      </span>
-                    )}
-                    {property.property_type && (
-                      <span className="feature-tag">
-                        {property.freeCancellation
-                          ? "Free Cancellation"
-                          : property.property_type}
-                      </span>
-                    )}
+                  <div className="card-footer">
+                    <div className="features">
+                      {property.property_category && (
+                        <span className="feature-tag">
+                          {property.property_category}
+                        </span>
+                      )}
+                      {property.property_type && (
+                        <span className="feature-tag">
+                          {property.freeCancellation
+                            ? "Free Cancellation"
+                            : property.property_type}
+                        </span>
+                      )}
+                    </div>
                   </div>
                 </div>
-              </div>
-
-              <div className="custom-border"></div>
-
-              <div className="price-section">
-                <button
-                  className="view-details-btn"
-                  onClick={() => handleViewAll(property.slug)}
-                >
-                  <svg className="icon" viewBox="0 0 24 24" fill="none">
-                    <path
-                      stroke="currentColor"
-                      strokeWidth="1.5"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                    />
-                  </svg>
-                </button>
-                <div className="price-info">
-                  <span className="price">
-                    From - ${property.price || "500"}
-                  </span>
-                  <button
-                    className="view-details-btn"
-                    onClick={() => handleClick(property.slug)}
+                <div className="custom-border"></div>
+                <div className="price-section">
+                  <SecondryButton
+                    // className="view-secondary-btn"
+                    onClick={() => handleViewAll(property.slug)}
                   >
-                    View Details
-                  </button>
+                    <svg className="icon" viewBox="0 0 24 24" fill="none">
+                      <path
+                        stroke="currentColor"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                      />
+                    </svg>
+                  </SecondryButton>
+                  <div className="price-info">
+                    <span className="price">
+                      From - ${property.price || "500"}
+                    </span>
+                    <button
+                      className="view-details-btn"
+                      onClick={() => handleClick(property.slug)}
+                    >
+                      View Details
+                    </button>
+                  </div>
                 </div>
               </div>
-            </div>
-          ))}
+            ))
+          ) : (
+            <div className="no-property-message">No property found</div>
+          )}
         </div>
       </div>
     </div>

data/app/javascript/react/components/Layout/Layout.js

@@ -1,9 +1,16 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { useLocation } from "react-router-dom";
 import FixedNavbar from "../FixedNavbar/FixedNav";
 import Footer from "../../shared/FooterSection/Footer";
 import { Outlet } from "react-router-dom";
 
 const Layout = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0); // Scroll to top on route change
+  }, [pathname]);
+
   return (
     <>
       <FixedNavbar />

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

@@ -16,8 +16,8 @@ const ApartmentCard = () => {
   const Address = `${bookingRequestDetails?.property?.city}, ${bookingRequestDetails?.property?.state}`;
   const period = `${bookingRequestDetails?.check_in_date} to ${bookingRequestDetails?.check_out_date}`;
   const requestedBy = bookingRequestDetails?.user?.full_name;
-  const roomName = bookingRequestDetails?.line_items[0]?.rooms?.name;
-  const roomImages = bookingRequestDetails?.line_items[0]?.rooms?.room_images;
+  const roomName = bookingRequestDetails?.rooms[0]?.name;
+  const roomImages = bookingRequestDetails?.rooms[0]?.room_images;
   const navigate = useNavigate();
 
   const fetchAllManageBooking = async () => {
@@ -68,7 +68,7 @@ const ApartmentCard = () => {
             style={{
               marginTop: 20,
               padding: "10px 24px",
-              backgroundColor: "#6772e5",
+              backgroundColor: "var(--primary-color)",
               color: "#fff",
               fontSize: "16px",
               fontWeight: 600,