stay_commerce-frontend 0.1.0

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

@@ -0,0 +1,122 @@
+import React from "react";
+import GallerySlider from "../GallerySlider/GallerySlider";
+import { useNavigate } from "react-router-dom";
+import ButtonPrimary from "../../shared/Button/ButtonPrimary";
+
+const PropertiesPage = ({
+  heading = "Explore Travel Experiences",
+  setAllData,
+  stayListings,
+  data,
+}) => {
+  const staticProperties = [
+    {
+      id: 1,
+      name: "Phi Phi Islands Adventure Day Trip with Seaview Lunch by V. Marine Tour",
+      location: "Paris, France",
+      duration: "2 Days 1 Nights",
+      rating: 4.8,
+      reviews: 268,
+      price: 114,
+      discount: "20% OFF",
+      image:
+        "https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
+      description:
+        "The Phi Phi archipelago is a must-visit while in Phuket, and this speedboat trip...",
+      bestPriceGuarantee: true,
+      freeCancellation: true,
+    },
+  ];
+  const propertiesToRender =
+    Array.isArray(data) && data.length > 0
+      ? data
+      : Array.isArray(stayListings) && stayListings.length > 0
+      ? stayListings
+      : [];
+  const allPropertyIds = stayListings?.map((property) => property.id);
+  const navigate = useNavigate();
+
+  const handleClick = (id) => {
+    navigate(`/listing-stay-detail/${id}`);
+  };
+
+  const finalProperties = propertiesToRender.length
+    ? propertiesToRender
+    : staticProperties;
+
+  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">
+          {finalProperties.map((property, index) => (
+            <div key={property.id || index} className="property-card">
+              <div className="card-image-section">
+                {(property.discount || property.property_state) && (
+                  <div className="discount-badge">
+                    {property.discount || property.property_state}
+                  </div>
+                )}
+
+                <GallerySlider
+                  images={property.place_images || []}
+                  alt={property.title}
+                />
+              </div>
+
+              <div className="card-content">
+                <div className="location-duration">
+                  <span className="location">
+                    {property.location || property.address}
+                  </span>
+                </div>
+                <h3 className="property-title">
+                  {property.name || property.title}
+                </h3>
+
+                <p className="description">{property.description}</p>
+
+                <div className="card-footer">
+                  <div className="features">
+                    {(property.bestPriceGuarantee ||
+                      property.property_category) && (
+                      <span className="feature-tag">
+                        {property.bestPriceGuarantee
+                          ? "Best Price Guarantee"
+                          : property.property_category}
+                      </span>
+                    )}
+                    {(property.freeCancellation || property.property_type) && (
+                      <span className="feature-tag">
+                        {property.freeCancellation
+                          ? "Free Cancellation"
+                          : property.property_type}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              <div className="custom-border"></div>
+
+              <div className="price-section">
+                <span className="duration">{property.duration}</span>
+                <div className="price-info">
+                  <span className="price">From - ${property.price}</span>
+                  <button
+                    className="view-details-btn"
+                    onClick={() => handleClick(property.slug)}
+                  >
+                    View Details
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PropertiesPage;

data/app/javascript/react/components/HotelListing/Listing.jsx

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

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

@@ -0,0 +1,18 @@
+import React from "react";
+import FixedNavbar from "../FixedNavbar/FixedNav";
+import Footer from "../../shared/FooterSection/Footer";
+import { Outlet } from "react-router-dom";
+
+const Layout = () => {
+  return (
+    <>
+      <FixedNavbar />
+      <div className="content">
+        <Outlet />
+      </div>
+      <Footer />
+    </>
+  );
+};
+
+export default Layout;

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

@@ -0,0 +1,58 @@
+import React, { Fragment, useState } from "react";
+import "../../styles/amenitiesfeatures.scss";
+
+const AmenitiesFeatures = ({ propertyData }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const openModal = () => setIsModalOpen(true);
+  const closeModal = () => setIsModalOpen(false);
+  return (
+    <div className="amenities-section">
+      <div className="amenities-header">
+        <h2>Features & Amenities</h2>
+      </div>
+
+      <div className="amenities-grid">
+        {propertyData?.rooms
+          ?.flatMap((room) => room.amenities)
+          .map((item) => {
+            const Icon = item.icon;
+            return (
+              <div key={item.id} className="amenity-item">
+                {Icon && <Icon className="amenity-icon" />}{" "}
+                <span>{item.name}</span>
+              </div>
+            );
+          })}
+      </div>
+
+      {isModalOpen && (
+        <div className="modal-overlay" onClick={closeModal}>
+          <div className="modal-container" onClick={(e) => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3>Amenities</h3>
+              <button className="close-button" onClick={closeModal}>
+                ×
+              </button>
+            </div>
+            <div className="modal-content">
+              {propertyData?.rooms
+                ?.flatMap((room) => room.amenities)
+                .map((item) => {
+                  const Icon = item.icon || "div";
+                  return (
+                    <div key={item.id} className="modal-amenity-item">
+                      <Icon className="amenity-icon" />
+                      <span>{item.name}</span>
+                    </div>
+                  );
+                })}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AmenitiesFeatures;

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

@@ -0,0 +1,250 @@
+import React from "react";
+import { X } from "lucide-react";
+
+const AmenitiesModal = ({
+  isOpen,
+  onClose,
+  room,
+  NcImage, // Pass NcImage component as prop
+}) => {
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  if (!isOpen || !room) return null;
+
+  const allItems = [
+    ...(room?.features || []).map((item) => ({ ...item, type: "feature" })),
+    ...(room?.amenities || []).map((item) => ({ ...item, type: "amenity" })),
+  ];
+
+  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",
+            }}
+          >
+            Features & Amenities
+          </h2>
+          <p
+            style={{ margin: "8px 0 0 0", color: "#6b7280", fontSize: "14px" }}
+          >
+            {room?.name}
+          </p>
+        </div>
+
+        {/* Features Section */}
+        {room?.features && room?.features?.length > 0 && (
+          <div style={{ marginBottom: "32px" }}>
+            <h3
+              style={{
+                fontSize: "18px",
+                fontWeight: "600",
+                marginBottom: "16px",
+                color: "#374151",
+                borderBottom: "2px solid #e5e7eb",
+                paddingBottom: "8px",
+              }}
+            >
+              Features ({room?.features?.length})
+            </h3>
+            <div
+              className="amenities-grid"
+              style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                gap: "12px",
+              }}
+            >
+              {room?.features?.map((feature) => {
+                const IconComponent = feature?.icon_name || null;
+
+                return (
+                  <div
+                    key={feature?.id}
+                    className="amenity-item"
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "12px",
+                      padding: "12px",
+                      backgroundColor: "#f9fafb",
+                      borderRadius: "8px",
+                      border: "1px solid #e5e7eb",
+                    }}
+                  >
+                    {IconComponent && (
+                      <div style={{ flexShrink: 0, color: "#6366f1" }}>
+                        <IconComponent size={20} />
+                      </div>
+                    )}
+                    <span
+                      style={{
+                        fontSize: "14px",
+                        color: "#374151",
+                        fontWeight: "500",
+                      }}
+                    >
+                      {feature?.name}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Amenities Section */}
+        {room?.amenities && room?.amenities?.length > 0 && (
+          <div>
+            <h3
+              style={{
+                fontSize: "18px",
+                fontWeight: "600",
+                marginBottom: "16px",
+                color: "#374151",
+                borderBottom: "2px solid #e5e7eb",
+                paddingBottom: "8px",
+              }}
+            >
+              Amenities ({room?.amenities?.length})
+            </h3>
+            <div
+              className="amenities-grid"
+              style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                gap: "12px",
+              }}
+            >
+              {room?.amenities?.map((amenity) => {
+                const IconComponent = amenity?.icon_name || null;
+
+                return (
+                  <div
+                    key={amenity?.id}
+                    className="amenity-item"
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "12px",
+                      padding: "12px",
+                      backgroundColor: "#f0f9ff",
+                      borderRadius: "8px",
+                      border: "1px solid #e0f2fe",
+                    }}
+                  >
+                    {amenity?.image ? (
+                      <NcImage
+                        src={amenity?.image}
+                        alt={amenity?.name}
+                        className="w-5 h-5 object-cover rounded-md flex-shrink-0"
+                        style={{
+                          width: "20px",
+                          height: "20px",
+                          objectFit: "cover",
+                          borderRadius: "4px",
+                          flexShrink: 0,
+                        }}
+                      />
+                    ) : (
+                      IconComponent && (
+                        <div style={{ flexShrink: 0, color: "#0ea5e9" }}>
+                          <IconComponent size={20} />
+                        </div>
+                      )
+                    )}
+                    <span
+                      style={{
+                        fontSize: "14px",
+                        color: "#374151",
+                        fontWeight: "500",
+                      }}
+                    >
+                      {amenity?.name}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+        {(!room?.features || room?.features?.length === 0) &&
+          (!room?.amenities || room?.amenities?.length === 0) && (
+            <div
+              style={{
+                textAlign: "center",
+                padding: "40px 20px",
+                color: "#6b7280",
+              }}
+            >
+              <p>No features or amenities available for this room.</p>
+            </div>
+          )}
+      </div>
+    </div>
+  );
+};
+
+export default AmenitiesModal;

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

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from "react";
+import "../../styles/ApartmentCard.scss";
+import { getBookingDetails } from "../../redux/slices/PropertySlice/PropertySlice";
+import { useDispatch } from "react-redux";
+import { useNavigate, useParams } from "react-router-dom";
+import GallerySlider from "../GallerySlider/GallerySlider";
+import axios from "axios";
+import CheckOutPagePageMain from "./CheckoutForm";
+import Modal from "../../shared/Modal";
+
+const ApartmentCard = () => {
+  const dispatch = useDispatch();
+  const { id } = useParams();
+  const [bookingRequestDetails, setBookingRequestDetails] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  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 navigate = useNavigate();
+
+  const fetchAllManageBooking = async () => {
+    const action = await dispatch(getBookingDetails(id));
+    if (action?.payload?.success) {
+      const data = action.payload.booking;
+      setBookingRequestDetails(data);
+    }
+  };
+  useEffect(() => {
+    fetchAllManageBooking();
+  }, [dispatch]);
+
+  return (
+    <div className="apartment-card">
+      <div className="apartment-image">
+        <GallerySlider images={roomImages} style={{ height: "300px" }} />
+      </div>
+      <div className="apartment-details">
+        <h2 className="title">{roomName}</h2>
+        <p className="location">{Address}</p>
+        <div className="info-grid">
+          <div className="info-row">
+            <span className="info-label">Period :</span>
+            <span className="info-value">{period}</span>
+          </div>
+          <div className="info-row">
+            <span className="info-label">Invoice No :</span>
+            <span className="info-value">{bookingRequestDetails?.number}</span>
+          </div>
+          <div className="info-row">
+            <span className="info-label">Guest</span>
+            <span className="info-value">
+              {bookingRequestDetails?.number_of_guests}
+            </span>
+          </div>
+          <div className="info-row">
+            <span className="info-label">Amount:</span>
+            <span className="info-value">
+              ${bookingRequestDetails?.total_amount}
+            </span>
+          </div>
+        </div>
+        {bookingRequestDetails?.status !== "confirmed" && (
+          <button
+            onClick={() => setIsModalOpen(true)}
+            className="pay-button"
+            style={{
+              marginTop: 20,
+              padding: "10px 24px",
+              backgroundColor: "#6772e5",
+              color: "#fff",
+              fontSize: "16px",
+              fontWeight: 600,
+              border: "none",
+              borderRadius: 6,
+              cursor: "pointer",
+              width: "100%",
+            }}
+            u
+          >
+            Pay with Cards
+          </button>
+        )}
+        {bookingRequestDetails?.status === "confirmed" && (
+          <button
+            onClick={() =>
+              navigate(`/bookingDetails/${bookingRequestDetails?.id}`)
+            }
+            className="pay-button"
+            style={{
+              marginTop: 20,
+              padding: "10px 24px",
+              backgroundColor: "#6772e5",
+              color: "#fff",
+              fontSize: "16px",
+              fontWeight: 600,
+              border: "none",
+              borderRadius: 6,
+              cursor: "pointer",
+              width: "100%",
+            }}
+          >
+            🎉 Booking confirmed! View Booking
+          </button>
+        )}
+
+        <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+          <CheckOutPagePageMain
+            bookingId={bookingRequestDetails?.id}
+            totalAmount={bookingRequestDetails?.total_amount * 100}
+            BookingStatus={bookingRequestDetails?.status}
+          />
+        </Modal>
+      </div>
+    </div>
+  );
+};
+
+export default ApartmentCard;