stay_commerce-frontend 0.1.0

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

@@ -0,0 +1,164 @@
+
+import React, { useState } from "react";
+import Navbar from "../Navbar/Navbar";
+import { Link } from "react-router-dom";
+import Lightbox from "../GalleryModalLight/GalleryModalLight";
+import Bg from "../../../Images/bgimage.jpg";
+
+import Bg1 from "../../../Images/beach.jpg";
+import Bg2 from "../../../Images/beach2.jpg";
+import Bg3 from "../../../Images/beach3.jpg";
+import Bg4 from "../../../Images/beach4.jpg";
+import Bg5 from "../../../Images/beach5.jpg";
+import Bg6 from "../../../Images/beach6.jpg";
+import Bg7 from "../../../Images/beach7.jpg";
+import Bg8 from "../../../Images/blog-1.jpg";
+import Bg9 from "../../../Images/beach8.jpg";
+
+import "../../styles/gallery.scss";
+import "../../styles/wrapper.scss";
+
+const Gallery = () => {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [currentImage, setCurrentImage] = useState(null);
+  
+  const galleryImages = [
+    { src: Bg1, alt: "Hotel room" },
+    { src: Bg2, alt: "Chef cooking" },
+    { src: Bg3, alt: "Pool with loungers" },
+    { src: Bg9, alt: "Infinity pool" },
+    { src: Bg4, alt: "Woman at beach" },
+    { src: Bg5, alt: "Overwater bungalows" },
+    { src: Bg6, alt: "Strawberry dessert" },
+    { src: Bg7, alt: "Beach view" },
+  ];
+
+  const openLightbox = (image) => {
+    setCurrentImage(image);
+    setLightboxOpen(true);
+    document.body.style.overflow = "hidden"; 
+  };
+
+  const closeLightbox = () => {
+    setLightboxOpen(false);
+    document.body.style.overflow = "auto"; 
+  };
+
+  const navigateImage = (direction) => {
+    const currentIndex = galleryImages.findIndex(img => img.src === currentImage.src);
+    const newIndex = (currentIndex + direction + galleryImages.length) % galleryImages.length;
+    setCurrentImage(galleryImages[newIndex]);
+  };
+
+  return (
+    <>
+      {/* Hero Section */}
+      <div
+        className="gallery-hero"
+        style={{ backgroundImage: `url(${Bg})` }}
+      >
+        <h1 className="gallery-title">Gallery</h1>
+
+        <div className="breadcrumb">
+          <Link to="/" className="breadcrumb-link">
+            Home
+          </Link>
+          <span className="breadcrumb-separator">→</span>
+          <span className="breadcrumb-current">Gallery</span>
+        </div>
+      </div>
+
+      <div className="gallery-content">
+        <div className="wrapper">
+        <h2 className="gallery-heading">Hotel Gallery</h2>
+        <p className="gallery-subheading">
+          Who are in extremely love with eco-friendly system.
+        </p>
+
+        <div className="gallery-grid">
+          {/* First row */}
+          <div className="gallery-item">
+            <img 
+              src={Bg1} 
+              alt="Hotel room" 
+              className="gallery-img" 
+              onClick={() => openLightbox(galleryImages[0])}
+            />
+          </div>
+          <div className="gallery-item tall">
+            <img 
+              src={Bg2} 
+              alt="Chef cooking" 
+              className="gallery-img" 
+              onClick={() => openLightbox(galleryImages[1])}
+            />
+          </div>
+          <div className="gallery-item">
+            <img
+              src={Bg3} 
+              alt="Pool with loungers" 
+              className="gallery-img" 
+              onClick={() => openLightbox(galleryImages[2])}
+            />
+          </div>
+
+          {/* Second row */}
+          <div className="gallery-item">
+            <img 
+              src={Bg9} 
+              alt="Infinity pool" 
+              className="gallery-img" 
+              onClick={() => openLightbox(galleryImages[3])}
+            />
+          </div>
+          <div className="gallery-item">
+            <img 
+              src={Bg4} 
+              alt="Woman at beach" 
+              className="gallery-img" 
+              onClick={() => openLightbox(galleryImages[4])}
+            />
+          </div>
+
+          {/* Third row */}
+          <div className="gallery-item">
+            <img 
+              src={Bg5} 
+              alt="Overwater bungalows" 
+              className="gallery-img" 
+              onClick={() => openLightbox(galleryImages[5])}
+            />
+          </div>
+          <div className="gallery-item">
+            <img 
+              src={Bg6} 
+              alt="Strawberry dessert" 
+              className="gallery-img" 
+              onClick={() => openLightbox(galleryImages[6])}
+            />
+          </div>
+          <div className="gallery-item">
+            <img 
+              src={Bg7} 
+              alt="Beach view" 
+              className="gallery-img" 
+              onClick={() => openLightbox(galleryImages[7])}
+            />
+          </div>
+        </div>
+        </div>
+      </div>
+
+      {/* Lightbox Component */}
+      <Lightbox 
+        currentImage={currentImage}
+        isOpen={lightboxOpen}
+        onClose={closeLightbox}
+        onNavigate={navigateImage}
+      />
+
+    </>
+  );
+};
+
+export default Gallery;

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

@@ -0,0 +1,35 @@
+import React from "react";
+import "../../styles/gallerymodallight.scss";
+
+const Lightbox = ({ currentImage, isOpen, onClose, onNavigate }) => {
+  if (!isOpen || !currentImage) return null;
+
+  return (
+    <div className="lightbox-overlay" onClick={onClose}>
+      <div className="lightbox-container" onClick={(e) => e.stopPropagation()}>
+        <button className="lightbox-close" onClick={onClose}>×</button>
+        <button 
+          className="lightbox-nav lightbox-prev" 
+          onClick={() => onNavigate(-1)}
+        >
+          ‹
+        </button>
+        <div className="lightbox-image-container">
+          <img 
+            src={currentImage.src} 
+            alt={currentImage.alt} 
+            className="lightbox-image" 
+          />
+        </div>
+        <button 
+          className="lightbox-nav lightbox-next" 
+          onClick={() => onNavigate(1)}
+        >
+          ›
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Lightbox;

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

@@ -0,0 +1,58 @@
+import React from "react";
+import Slider from "react-slick";
+import "../../styles/galleryslider.scss";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import fallback from "../../../Images/bg-image.jpg";
+
+const PrevArrow = ({ onClick }) => (
+  <button className="slick-arrow slick-prev" onClick={onClick}>
+    <ChevronLeftIcon />
+  </button>
+);
+
+const NextArrow = ({ onClick }) => (
+  <button className="slick-arrow slick-next" onClick={onClick}>
+    <ChevronRightIcon />
+  </button>
+);
+
+const GallerySlider = ({ images, style }) => {
+  const isSingleImage = images && images.length === 1;
+
+  const settings = {
+    dots: true,
+    infinite: !isSingleImage,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: !isSingleImage,
+    autoplaySpeed: 3000,
+    arrows: !isSingleImage,
+    prevArrow: <PrevArrow />,
+    nextArrow: <NextArrow />,
+    centerMode: false,
+    centerPadding: "0px",
+    variableWidth: false,
+    customPaging: () => <button className="custom-dot"></button>,
+  };
+
+  return (
+    <div className="image-slider" style={style}>
+      <Slider {...settings}>
+        {images && images.length > 0 ? (
+          images.map((img, index) => (
+            <div key={index} className="slide">
+              <img src={img} alt={`Slide ${index + 1}`} />
+            </div>
+          ))
+        ) : (
+          <div className="slide">
+            <img src={fallback} alt="Fallback" />
+          </div>
+        )}
+      </Slider>
+    </div>
+  );
+};
+
+export default GallerySlider;

data/app/javascript/react/components/Headers/PropertyCard.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import StayCard2 from "../StayCard/StayCard2";
+import "../../styles/propertycard.scss";
+
+const PropertyCard = ({
+  stayListings = [],
+  gridClass = "",
+  setAllData,
+  isLoading,
+}) => {
+  const renderCard = (stay) => {
+    return (
+      <StayCard2
+        key={stay?.id}
+        data={stay}
+        setAllData={setAllData}
+        stayListings={stayListings}
+      />
+    );
+  };
+
+  if (!isLoading && stayListings?.length === 0) {
+    return (
+      <div className="property-card-wrapper">
+        <div className="property-card-container">
+          <div className="property-card-empty">
+            <div className="text-center">
+              <h2 className="no-results-title">No Listings Found</h2>
+              <p className="no-results-text">
+                There are currently no properties listed.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`property-card-grid ${gridClass}`}>
+      {stayListings?.map((stay) => renderCard(stay))}
+    </div>
+  );
+};
+
+export default PropertyCard;

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

@@ -0,0 +1,178 @@
+import React, { useState } from "react";
+import "../../styles/bookingform.scss";
+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";
+
+function BookingForm() {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const [isLoading, setIsLoading] = useState(false);
+  const [latLng, setLatLng] = useState({ lat: null, lng: null });
+
+  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 };
+  };
+
+  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 action = await dispatch(searchProperties(searchQuery)).unwrap();
+
+      if (action?.success) {
+        dispatch(
+          setSearchMeta({
+            startDate: values.arrivalDate,
+            endDate: values.departureDate,
+            totalGuests: values.adults,
+            address: values.address,
+            latitude: lat,
+            longitude: lng,
+          })
+        );
+        navigate("/listingSearchPage");
+      }
+    } catch (error) {
+      console.error("Search error:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const formik = useFormik({
+    initialValues,
+    onSubmit,
+    validate: (values) => {
+      const errors = {};
+      if (!values.address) errors.address = "Required";
+      if (!values.arrivalDate) errors.arrivalDate = "Required";
+      if (!values.departureDate) {
+        errors.departureDate = "Required";
+      } else if (values.departureDate <= values.arrivalDate) {
+        errors.departureDate = "Departure must be after arrival";
+      }
+      return errors;
+    },
+  });
+
+  return (
+    <div className="">
+      <div className="container">
+        <section className="booking-section">
+          <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}
+                  />
+                  {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")}
+                  />
+                  {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")
+                    }
+                  />
+                  {formik.touched.departureDate &&
+                    formik.errors.departureDate && (
+                      <div className="error-message">
+                        {formik.errors.departureDate}
+                      </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>
+                <div className="book-now-container">
+                  <ButtonPrimary
+                    className="book-now-btn"
+                    type="submit"
+                    loading={isLoading}
+                  >
+                    BOOK NOW
+                  </ButtonPrimary>
+                </div>
+              </div>
+            </form>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+export default BookingForm;

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

@@ -0,0 +1,29 @@
+import React from "react";
+import Img from "../../../Images/bg-image.jpg";
+import "../../styles/herosection.scss";
+
+function HeroSection() {
+  return (
+    <div
+      className="container hero-section"
+      style={{
+        backgroundImage: `url(${Img})`,
+        marginTop: "110px",
+      }}
+    >
+      <div className="hero-overlay" />
+      <div className="hero-content">
+        <p className="hero-subtitle">AWAY FROM MONOTONOUS LIFE</p>
+        <h1 className="hero-title">Relax Your Mind</h1>
+        <p className="hero-desc">
+          If you are looking at blank cassettes on the web, you may be very
+          confused at the <br />
+          difference in price. You may see some for as low as $17 each.
+        </p>
+        <button className="hero-btn">GET STARTED</button>
+      </div>
+    </div>
+  );
+}
+
+export default HeroSection;

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

@@ -0,0 +1,104 @@
+import React from "react";
+import GallerySlider from "../GallerySlider/GallerySlider";
+import { useNavigate } from "react-router-dom";
+
+const MyPropertiesListing = ({
+  heading = "Explore Travel Experiences",
+  setAllData,
+  stayListings,
+  data,
+}) => {
+  const navigate = useNavigate();
+  const handleClick = (id) => {
+    navigate(`/listing-stay-detail/${id}`);
+  };
+  console.log("stayListings", stayListings);
+  const handleViewAll = (slug) => navigate(`/property-1/${slug}`);
+  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>
+                )}
+
+                <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>
+                </div>
+                <h3 className="property-title">{property.title}</h3>
+                <p className="description">{property.description}</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>
+                </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)}
+                  >
+                    View Details
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyPropertiesListing;