stay_commerce-frontend 0.1.0 → 0.1.1

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

@@ -0,0 +1,464 @@
+import React, { useEffect, useState } from "react";
+import { useFormik } from "formik";
+import "../../styles/listingstaydetailpage.scss";
+import moment from "moment";
+import { reserveBooking } from "../../redux/slices/PropertySlice/PropertySlice";
+import { useDispatch, useSelector } from "react-redux";
+import GallerySlider from "../GallerySlider/GallerySlider";
+import Badge from "../../shared/Badge/Badge";
+import { currencySymbol } from "../../shared/CurrencySymbol";
+import "../../styles/RenderSection.scss";
+import { useNavigate } from "react-router-dom";
+import { User, DoorOpen, Bed, Expand } from "lucide-react";
+import BookingModal from "./BookingModal";
+import AmenitiesModal from "./AmenitiesModal";
+import RoomDescriptionModal from "./RoomDescriptionModal";
+import { searchProperties } from "../../redux/slices/PropertySlice/Searchslice";
+import Pagination from "../../shared/Pagination";
+import Loader from "../../shared/Loader";
+
+const PropertiesPage = () => {
+  const dispatch = useDispatch();
+  const {
+    searchResults,
+    startDate,
+    endDate,
+    totalGuests,
+    latitude,
+    longitude,
+    data,
+    loading,
+  } = useSelector((state) => state.search);
+  const roomsData = searchResults || [];
+  const [isBookingModalOpen, setIsBookingModalOpen] = useState(false);
+  const [selectedRoomForBooking, setSelectedRoomForBooking] = useState(null);
+  const [isAmenitiesModalOpen, setIsAmenitiesModalOpen] = useState(false);
+  const [selectedRoomForAmenities, setSelectedRoomForAmenities] =
+    useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  useEffect(() => {
+    const start = startDate
+      ? moment(startDate).format("YYYY-MM-DD")
+      : moment().format("YYYY-MM-DD");
+    const end = endDate
+      ? moment(endDate).format("YYYY-MM-DD")
+      : moment().add(2, "days").format("YYYY-MM-DD");
+    const guests = totalGuests || 1;
+    const lat = latitude || "28.6139";
+    const lng = longitude || "77.2090";
+    const searchQuery = `q[availability_start_lteq]=${start}&q[availability_end_gteq]=${end}&q[guest_number_gteq]=${guests}&q[latitude]=${lat}&q[longitude]=${lng}&page=${currentPage}`;
+    dispatch(searchProperties(searchQuery));
+  }, [
+    dispatch,
+    startDate,
+    endDate,
+    totalGuests,
+    latitude,
+    longitude,
+    currentPage,
+  ]);
+
+  const RenderSection = () => {
+    const navigate = useNavigate();
+    const [error, setError] = useState("");
+    const [isButtonDisabled, setIsButtonDisabled] = useState(true);
+    const [isLoading, setIsLoading] = useState(false);
+    const dispatch = useDispatch();
+    const [selectedRoomForDesc, setSelectedRoomForDesc] = useState(null);
+
+    const formik = useFormik({
+      initialValues: {
+        number_of_guests: null,
+        booking_start: null,
+        booking_end: null,
+        room_id: null,
+        line_items_attributes: [],
+        price_per_month: null,
+      },
+      enableReinitialize: true,
+      onSubmit: (values) => {
+        handleSubmit(values);
+      },
+    });
+
+    const calculateMonthsDifference = (bookingStart, bookingEnd) => {
+      const start = moment(bookingStart, "YYYY-MM-DD");
+      const end = moment(bookingEnd, "YYYY-MM-DD");
+      const uniqueMonths = new Set();
+      let current = start.clone();
+      while (current.isBefore(end, "day") || current.isSame(end, "day")) {
+        uniqueMonths.add(`${current.year()}-${current.month() + 1}`);
+        current.add(1, "day");
+      }
+      return uniqueMonths.size;
+    };
+
+    const handleSubmit = async (values) => {
+      const propertyId = selectedRoomForBooking?.property?.slug;
+      if (!propertyId) {
+        setError("Property ID not found. Please try again.");
+        return;
+      }
+
+      const postData = {
+        booking: {
+          number_of_guests: Number(values.number_of_guests),
+          property_id: propertyId,
+          check_in_date: moment(values.booking_start).format("YYYY-MM-DD"),
+          check_out_date: moment(values.booking_end).format("YYYY-MM-DD"),
+          no_of_months: calculateMonthsDifference(
+            moment(values.booking_start).format("YYYY-MM-DD"),
+            moment(values.booking_end).format("YYYY-MM-DD")
+          ),
+          line_items_attributes: [
+            {
+              room_id: values.room_id,
+              price: values.price_per_month,
+              quantity: 1,
+              property_id: propertyId,
+            },
+          ],
+        },
+      };
+      setIsLoading(true);
+      try {
+        const action = await dispatch(reserveBooking(postData));
+
+        if (action?.type === "payment/reserveBooking/fulfilled" && action) {
+          const bookingId = action?.payload?.id;
+          if (bookingId) {
+            setError("");
+            setIsBookingModalOpen(false);
+            navigate(`/myreservations/${bookingId}`);
+          } else {
+            setError("Failed to reserve booking. Please try again.");
+          }
+        } else {
+          setError(
+            action?.payload?.message ||
+              "Failed to reserve booking. Please try again."
+          );
+        }
+      } catch (error) {
+        console.error("Booking Error:", error);
+        setError("Failed to reserve booking. Please try again.");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    const openBookingModal = (room) => {
+      setSelectedRoomForBooking(room);
+      setIsBookingModalOpen(true);
+    };
+
+    const closeBookingModal = () => {
+      setIsBookingModalOpen(false);
+      setSelectedRoomForBooking(null);
+      setError("");
+    };
+
+    const openAmenitiesModal = (room) => {
+      setSelectedRoomForAmenities(room);
+      setIsAmenitiesModalOpen(true);
+    };
+
+    const closeAmenitiesModal = () => {
+      setIsAmenitiesModalOpen(false);
+      setSelectedRoomForAmenities(null);
+    };
+
+    const modifiedStatus = (status) => {
+      switch (status) {
+        case "active":
+          return "Active";
+        case "inactive":
+          return "Inactive";
+        default:
+          return "";
+      }
+    };
+
+    useEffect(() => {
+      const { booking_start, booking_end, number_of_guests } = formik.values;
+      if (booking_start && booking_end && number_of_guests) {
+        setIsButtonDisabled(false);
+      } else {
+        setIsButtonDisabled(true);
+      }
+    }, [formik.values]);
+
+    const selectedRoom = formik?.values?.room_id;
+    if (!roomsData || roomsData.length === 0) {
+      return (
+        <div className="no-results">
+          <p>No rooms available.</p>
+        </div>
+      );
+    }
+
+    return (
+      <>
+        <h2 className="section-title">Rooms</h2>
+        {roomsData.map((room, index) => {
+          const features = room?.features || [];
+          const amenities = room?.amenities || [];
+          const totalItems = features.length + amenities.length;
+          const showViewAllButton = totalItems > 4;
+          const displayFeatures = showViewAllButton
+            ? features.slice(0, 2)
+            : features;
+          const displayAmenities = showViewAllButton
+            ? amenities.slice(0, 2)
+            : amenities;
+
+          return (
+            <div key={room?.id} className="section-container">
+              <div className="room-container">
+                <header>
+                  <div className="room-item-wrapper">
+                    <div
+                      className="room-image"
+                      style={{ position: "relative" }}
+                    >
+                      <GallerySlider
+                        ratioClass="gallery-aspect"
+                        images={room?.room_images || []}
+                        style={{
+                          height: "370px",
+                          borderTopLeftRadius: "20px",
+                          borderBottomLeftRadius: "20px",
+                        }}
+                      />
+                      <div
+                        style={{
+                          position: "absolute",
+                          top: "12px",
+                          left: "12px",
+                          zIndex: 10,
+                        }}
+                      >
+                        <Badge
+                          name={modifiedStatus(room?.status) || "Property"}
+                        />
+                      </div>
+                    </div>
+
+                    <div style={{ width: "100%", padding: "20px 20px 0 0" }}>
+                      <div className="room-content">
+                        <div className="rooms-parents">
+                          <div
+                            style={{ display: "flex", alignItems: "center" }}
+                          >
+                            <h2 className="room-title">{room?.name}</h2>
+                          </div>
+                        </div>
+                        <hr style={{ marginTop: 0 }} />
+
+                        <div className="room-features">
+                          <div className="feature-item">
+                            <User className="icon" size={18} />
+                            <span>{room?.max_guests || "N/A"}</span>
+                          </div>
+                          <div className="feature-item">
+                            <DoorOpen className="icon" size={18} />
+                            <span>{room?.room_type?.name || "Room Type"}</span>
+                          </div>
+                          <div className="feature-item">
+                            <Bed className="icon" size={18} />
+                            <span>{room?.bed_type?.name || "Bed Type"}</span>
+                          </div>
+                          <div className="feature-item">
+                            <Expand className="icon" size={18} />
+                            <span>
+                              {room?.size ? `${room.size} sq ft` : "Size N/A"}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="rooms-design">
+                        <div className="section-header">
+                          <div className="sub-heading">
+                            Features & Amenities
+                          </div>
+                          {showViewAllButton && (
+                            <div className="view-all-item">
+                              <button
+                                onClick={() => openAmenitiesModal(room)}
+                                className="btn-view-more"
+                              >
+                                <span>View All ({totalItems})</span>
+                              </button>
+                            </div>
+                          )}
+                        </div>
+                        {displayFeatures.length > 0 ||
+                        displayAmenities.length > 0 ? (
+                          <div className="amenities-style">
+                            {displayFeatures.map((feature) => {
+                              const IconComponent = feature?.icon_name || null;
+                              return (
+                                <div
+                                  key={feature?.id}
+                                  className="amenity-item-style"
+                                >
+                                  {IconComponent && <IconComponent />}
+                                  <span>{feature?.name}</span>
+                                </div>
+                              );
+                            })}
+                            {displayAmenities.map((amenity) => {
+                              const IconComponent = amenity?.icon_name || null;
+                              return (
+                                <div
+                                  key={amenity?.id}
+                                  className="amenity-item-style"
+                                >
+                                  {amenity?.image ? (
+                                    <NcImage
+                                      src={amenity?.image}
+                                      alt={amenity?.name}
+                                      className="w-8 h-8 object-cover rounded-md"
+                                    />
+                                  ) : (
+                                    IconComponent && <IconComponent />
+                                  )}
+                                  <span>{amenity?.name}</span>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        ) : (
+                          <p
+                            style={{
+                              fontSize: "14px",
+                              color: "#6b7280",
+                              textAlign: "center",
+                            }}
+                          >
+                            Features & Amenities not available.
+                          </p>
+                        )}
+                      </div>
+
+                      <AmenitiesModal
+                        isOpen={isAmenitiesModalOpen}
+                        onClose={closeAmenitiesModal}
+                        room={selectedRoomForAmenities}
+                      />
+
+                      <div className="rooms-design">
+                        <div className="section-header">
+                          <div className="sub-heading">Room Description</div>
+                        </div>
+
+                        {room?.description?.length > 180 ? (
+                          <div className="description-container-listing">
+                            <span className="description">
+                              {room?.description?.substring(0, 180)}...
+                            </span>
+                            <button
+                              onClick={() => setSelectedRoomForDesc(room)}
+                              className="btn-view-more-listing"
+                            >
+                              View Full Description
+                            </button>
+                          </div>
+                        ) : (
+                          <span className="description">
+                            {room?.description || "No description available."}
+                          </span>
+                        )}
+                      </div>
+
+                      <div
+                        style={{
+                          width: "100%",
+                          display: "flex",
+                          justifyContent: "end",
+                          alignItems: "center",
+                        }}
+                      >
+                        <div
+                          className="button-group"
+                          style={{
+                            width: "130px",
+                          }}
+                        >
+                          <button
+                            className={`btn-booking ${
+                              room?.status === "inactive" ? "disabled" : ""
+                            }`}
+                            onClick={() => openBookingModal(room)}
+                            disabled={room?.status === "inactive"}
+                          >
+                            <span className="price-text">
+                              {`${currencySymbol()}${
+                                room?.price_per_month || 0
+                              }`}
+                              <span className="per-month">/mo</span>
+                            </span>
+                            <span className="cta-text">Book Now</span>
+                          </button>
+                        </div>
+                      </div>
+
+                      <RoomDescriptionModal
+                        isOpen={!!selectedRoomForDesc}
+                        onClose={() => setSelectedRoomForDesc(null)}
+                        room={selectedRoomForDesc}
+                      />
+                    </div>
+                  </div>
+                </header>
+              </div>
+
+              <div className="sidebar-container">
+                <div>
+                  {room?.status === "inactive" && (
+                    <Badge name="Room is Inactive" />
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+
+        <BookingModal
+          isOpen={isBookingModalOpen}
+          onClose={closeBookingModal}
+          room={selectedRoomForBooking}
+          propertyData={selectedRoomForBooking?.property}
+          onSubmit={handleSubmit}
+          isLoading={isLoading}
+        />
+      </>
+    );
+  };
+  return (
+    <div className="container listing-detail-page">
+      <section className="similar-properties-section">
+        {loading || !data?.success ? (
+          <Loader text="Searching Properties..." />
+        ) : (
+          <>
+            <RenderSection />
+            {data?.meta?.total_pages > 1 && (
+              <Pagination
+                currentPage={data.meta.current_page}
+                totalPages={data.meta.total_pages}
+                onPageChange={setCurrentPage}
+              />
+            )}
+          </>
+        )}
+      </section>
+    </div>
+  );
+};
+
+export default function ListingStayDetailPage() {
+  return <PropertiesPage />;
+}

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

@@ -12,11 +12,8 @@ function MobileMenu() {
   const navItems = [
     { name: "HOME", path: "/" },
     { name: "ABOUT US", path: "/about-us" },
-    { name: "ACCOMMODATION", path: "/accommodation" },
+    // { name: "ACCOMMODATION", path: "/accommodation" },
     { name: "GALLERY", path: "/gallery" },
-    { name: "BLOG", path: "/blog" },
-    { name: "ELEMENT", path: "/element" },
-    { name: "CONTACT", path: "/contact" },
   ];
 
   return (

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

@@ -5,8 +5,8 @@ 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";
+import Pagination from "../../shared/Pagination";
 
 const MyProperties = () => {
   const dispatch = useDispatch();
@@ -23,7 +23,7 @@ const MyProperties = () => {
       id: apiItem?.id,
       title: apiItem?.title,
       place_images: apiItem?.place_images,
-      address: `${apiItem?.city}, ${apiItem?.state}`,
+      address: `${apiItem?.address}, ${apiItem?.country}`,
       availability_start: apiItem?.availability_start,
       availability_end: apiItem?.availability_end,
       price: apiItem?.price_per_month,
@@ -52,38 +52,23 @@ const MyProperties = () => {
         setTotalPages(res?.meta?.total_pages || 1);
       } else {
         setAllData([]);
-        setTotalPages(1); // Or 0, depending on your UI handling
+        setTotalPages(1);
       }
     } catch (error) {
       console.error("Error fetching properties:", error);
       setAllData([]);
-      setTotalPages(1); // Optional fallback
+      setTotalPages(1);
     } 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
-      }
+      await fetchData(1);
+      setPage(1);
     } catch (error) {
       console.error("Search error:", error);
     } finally {
@@ -91,15 +76,18 @@ const MyProperties = () => {
     }
   };
 
-  // ⌨️ Handle query input
   const handleSearchChange = (event) => {
     setQuery(event.target.value);
   };
 
-  // 📦 Auto-fetch on mount or when query is cleared
+  useEffect(() => {
+    fetchData(page);
+  }, [page]);
+
   useEffect(() => {
     if (query.length === 0) {
       fetchData(1);
+      setPage(1);
     }
   }, [query]);
 
@@ -109,34 +97,47 @@ const MyProperties = () => {
         <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="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}
+              isLoading={isLoading}
             />
           </div>
+          {totalPages > 1 && (
+            <div className="myListing-pagination">
+              <Pagination
+                currentPage={page}
+                totalPages={totalPages}
+                onPageChange={(newPage) => {
+                  if (newPage !== page) setPage(newPage);
+                }}
+                isLoading={isLoading}
+              />
+            </div>
+          )}
         </div>
       </div>
     </div>

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

@@ -89,13 +89,13 @@ const BookingInterface = () => {
 
           <div className="property-card">
             <GallerySlider
-              images={bookingRequestDetails?.line_items[0]?.rooms?.room_images}
+              images={bookingRequestDetails?.rooms[0]?.room_images}
               alt="Luxury Penthouse"
               style={{ height: "300px" }}
             />
             <div className="property-content">
               <h3 className="property-title">
-                {bookingRequestDetails?.line_items[0]?.rooms?.name}
+                {bookingRequestDetails?.rooms?.[0].name}
               </h3>
               <div className="property-features">
                 <div className="guest-badge">
@@ -116,7 +116,7 @@ const BookingInterface = () => {
               <div className="price-section-details">
                 <div className="period">Total</div>
                 <div className="amount">
-                  $ {bookingRequestDetails?.item_total}
+                  ${bookingRequestDetails?.item_total}
                 </div>
               </div>
             </div>
@@ -142,7 +142,7 @@ const BookingInterface = () => {
                 <div className="detail-row">
                   <span className="label">Pay Amount:</span>
                   <span className="value">
-                    $ {bookingRequestDetails?.item_total}
+                    ${bookingRequestDetails?.item_total}
                   </span>
                 </div>
                 <div className="detail-row">