stay_commerce-frontend 0.1.0

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

@@ -0,0 +1,512 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import { Squares2X2Icon } from "@heroicons/react/24/outline";
+import { useFormik } from "formik";
+import "../../styles/listingstaydetailpage.scss";
+import moment from "moment";
+import ButtonPrimary from "../../shared/Button/ButtonPrimary";
+import {
+  getallupdateProperties,
+  reserveBooking,
+} from "../../redux/slices/PropertySlice/PropertySlice";
+import { useDispatch } from "react-redux";
+import { Navigate, useParams } from "react-router-dom";
+import PropertyDetailsCard from "./PropertyDetailsCard";
+import ListingImageGallery from "../ListingImageGallery/ListingImageGallery";
+import GallerySlider from "../GallerySlider/GallerySlider";
+import Badge from ".././../shared/Badge/Badge";
+import { Tooltip } from "react-tooltip";
+import { currencySymbol } from "../../shared/CurrencySymbol";
+import "../../styles/RenderSection.scss";
+import { useNavigate } from "react-router-dom";
+import successHandler from "../../utils/helpers/SuccessHandler";
+import { User, DoorOpen, Bed, Expand } from "lucide-react";
+import BookingModal from "./BookingModal";
+import AmenitiesModal from "./AmenitiesModal";
+import RoomDescriptionModal from "./RoomDescriptionModal";
+
+const StayDetailPageContainer = () => {
+  const dispatch = useDispatch();
+  const [propertyData, setPropertyData] = useState(null);
+  const { slug } = useParams();
+  const propertyId = slug;
+  const images =
+    propertyData?.rooms?.flatMap(
+      (room) => room.room_images?.map((url) => ({ url })) || []
+    ) || [];
+  const [imageModal, setIsOpenImageModal] = useState(false);
+  const handleOpenModalImageGallery = () => {
+    setIsOpenImageModal(true);
+  };
+  const [isBookingModalOpen, setIsBookingModalOpen] = useState(false);
+  const [selectedRoomForBooking, setSelectedRoomForBooking] = useState(null);
+  const [isAmenitiesModalOpen, setIsAmenitiesModalOpen] = useState(false);
+  const [selectedRoomForAmenities, setSelectedRoomForAmenities] =
+    useState(null);
+
+  const closeImageModal = () => {
+    setIsOpenImageModal(false);
+  };
+
+  const fetchPropertyData = useCallback(async () => {
+    try {
+      const response = await dispatch(getallupdateProperties({ propertyId }));
+
+      const property = response?.payload;
+
+      if (property) {
+        setPropertyData(property);
+      } else {
+        console.error("Property not found:", response);
+      }
+    } catch (error) {
+      console.error("Error fetching property data:", error);
+    }
+  }, [dispatch, propertyId]);
+
+  useEffect(() => {
+    if (propertyId) {
+      fetchPropertyData();
+    }
+  }, [fetchPropertyData, propertyId]);
+
+  const RenderSection = () => {
+    const navigate = useNavigate();
+    const [error, setError] = useState("");
+    const [isButtonDisabled, setIsButtonDisabled] = useState(true);
+    const [currentRoom, setCurrentRoom] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const dispatch = useDispatch();
+    const propertyId = slug;
+    const maximumGuests = currentRoom && Number(currentRoom.max_guests);
+    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 extraGuest =
+      formik.values.number_of_guests &&
+      formik.values.number_of_guests > maximumGuests &&
+      formik.values.number_of_guests - maximumGuests;
+    const calculateMonthsDifference = (bookingStart, bookingEnd) => {
+      const start = moment(bookingStart, "YYYY-MM-DD");
+      const end = moment(bookingEnd, "YYYY-MM-DD");
+      const uniqueMonths = new Set();
+      const MAX_CHAR_LIMIT = 250;
+      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 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) {
+          successHandler(
+            "Booking request sent. Please ! wait for owner's confirmation!!"
+          );
+          const bookingId = action?.payload?.id;
+          if (bookingId) {
+            setError("");
+            setIsBookingModalOpen(false);
+            navigate(`/myreservations/${bookingId}`);
+          } else {
+            setError("Failed to reserve booking. Please try again.");
+          }
+        }
+      } catch (error) {
+        ErrorHandler("Failed to reserve booking. Please try again.");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    const openBookingModal = (room) => {
+      setSelectedRoomForBooking(room);
+      setIsBookingModalOpen(true);
+    };
+
+    // Function to close booking modal
+    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 (!propertyData) return null;
+
+    return (
+      <>
+        <h2 className="section-title">Rooms</h2>
+        {propertyData?.rooms?.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 ${
+                propertyData?.is_shared_property ? "shared-property" : ""
+              }`}
+            >
+              <div
+                className={`room-container ${
+                  propertyData?.is_shared_property ? "shared-property" : ""
+                }`}
+              >
+                <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 || "Default Value"}</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} sq ft</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", // a soft gray
+                              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}
+                          </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" ||
+                              room?.to_book === false
+                                ? "disabled"
+                                : ""
+                            }`}
+                            onClick={() => openBookingModal(room)}
+                            disabled={
+                              room?.status === "inactive" ||
+                              room?.to_book === false
+                            }
+                          >
+                            <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 ${
+                  propertyData?.is_shared_property ? "shared-property" : ""
+                }`}
+              >
+                <div>
+                  {room?.status === "inactive" && (
+                    <Badge name="Room is Inactive" />
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+
+        <BookingModal
+          isOpen={isBookingModalOpen}
+          onClose={closeBookingModal}
+          room={selectedRoomForBooking}
+          propertyData={propertyData}
+          onSubmit={handleSubmit}
+          isLoading={isLoading}
+        />
+      </>
+    );
+  };
+
+  return (
+    <div className="container listing-detail-page">
+      <header className="listing-header" onClick={handleOpenModalImageGallery}>
+        <div className="image-grid">
+          <div className="main-image">
+            <LazyLoadImage
+              className="image-all"
+              src={images?.[0]?.url || ""}
+              alt="Property"
+            />
+          </div>
+
+          {images?.slice(1, 5)?.map((item, index) => (
+            <div className="grid-image" key={item?.id}>
+              <LazyLoadImage
+                className="image-grid"
+                src={item?.url || ""}
+                alt={`Thumbnail ${index + 1}`}
+              />
+            </div>
+          ))}
+
+          {images?.length >= 5 ? (
+            <div className="overlay-count">Show all ({images?.length})</div>
+          ) : (
+            <button
+              className="show-all-btn"
+              onClick={handleOpenModalImageGallery}
+            >
+              <Squares2X2Icon className="icon" />
+              <span>Show all ({images?.length})</span>
+            </button>
+          )}
+        </div>
+      </header>
+
+      <section className="similar-properties-section">
+        {/* <RoomSection propertyData={propertyData} /> */}
+        <RenderSection />
+        <PropertyDetailsCard propertyData={propertyData} />
+      </section>
+
+      {imageModal && (
+        <ListingImageGallery images={images} onClose={closeImageModal} />
+      )}
+    </div>
+  );
+};
+
+export default function ListingStayDetailPage() {
+  return <StayDetailPageContainer />;
+}

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

@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import "../../styles/property-description.scss";
+import ButtonPrimary from "../../shared/Button/ButtonPrimary";
+
+const PropertyDescription = ({ propertyData }) => {
+  const [expandedRoomIds, setExpandedRoomIds] = useState([]);
+
+  if (!propertyData || !propertyData.rooms || propertyData.rooms.length === 0) {
+    return (
+      <div className="property-description__wrap">
+        No room descriptions available.
+      </div>
+    );
+  }
+
+  const toggleRoomDescription = (roomId) => {
+    if (expandedRoomIds.includes(roomId)) {
+      setExpandedRoomIds(expandedRoomIds.filter((id) => id !== roomId));
+    } else {
+      setExpandedRoomIds([...expandedRoomIds, roomId]);
+    }
+  };
+
+  return (
+    <div className="description__wrap">
+      <div className="description__divider"></div>
+
+      <h2 className="description__title">Room Descriptions</h2>
+
+      <div className="description__content">
+        {propertyData.rooms.map((room) => {
+          const isExpanded = expandedRoomIds.includes(room.id);
+          const truncatedDescription =
+            room.description?.length > 150
+              ? room.description.substring(0, 150) + "..."
+              : room.description || "";
+
+          return (
+            <div key={room.id} className="room__details">
+              <p className="room__description">
+                {isExpanded ? room.description : truncatedDescription}
+              </p>
+
+              {room.description?.length > 150 && (
+                <div className="description__button-wrap">
+                  <ButtonPrimary onClick={() => toggleRoomDescription(room.id)}>
+                    {isExpanded ? "Show Less" : "Show More"}
+                  </ButtonPrimary>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="description__divider" />
+
+      <div>
+        <h4 className="description__subtitle">Property Policies & Rules</h4>
+        <ul className="policy__rules-list">
+          {propertyData?.additional_rules?.length > 0 ? (
+            propertyData.additional_rules.map((rule) => (
+              <li key={rule.id} className="policy__rule">
+                {rule.name}
+              </li>
+            ))
+          ) : (
+            <li className="policy__rule">No additional rules available.</li>
+          )}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default PropertyDescription;

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

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react";
+import "../../styles/propertydetailscard.scss";
+import { useDispatch } from "react-redux";
+import { similar_Properties } from "../../redux/slices/PropertySlice/PropertySlice";
+import StayCard3 from "../StayCard/StayCard3";
+
+const PropertyDetailsCard = ({ propertyData }) => {
+  const dispatch = useDispatch();
+  const [similarProperties, setSimilarProperties] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const property_type_id = propertyData?.property_type?.id;
+  const property_category_id = propertyData?.property_category?.id;
+  const property_id = propertyData?.id;
+
+  const fetchSimilarProperties = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await dispatch(
+        similar_Properties({
+          property_type_id: property_type_id ?? 0,
+          property_category_id: property_category_id ?? 0,
+          property_id: property_id ?? 0,
+        })
+      ).unwrap();
+      setSimilarProperties(response?.properties || []);
+    } catch (err) {
+      setError(err.message || "Failed to fetch similar properties");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (
+      propertyData?.property_type?.id &&
+      propertyData?.property_category?.id &&
+      propertyData?.id
+    ) {
+      fetchSimilarProperties();
+    }
+  }, [propertyData]);
+
+  return (
+    <div className="my-booking-container">
+      <div className="my-booking-content">
+        <h1 className="heading">Similar Property</h1>
+        <div className="stay-cards">
+          {similarProperties?.length > 0 ? (
+            similarProperties?.map((room) => <StayCard3 booking={room} />)
+          ) : (
+            <p className="no-results">No Similar Property Found.</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PropertyDetailsCard;