stay_commerce-frontend 0.1.0

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

@@ -0,0 +1,69 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import GallerySlider from "../GallerySlider/GallerySlider";
+import "../../styles/staycard.scss";
+import moment from "moment";
+import { useSelector } from "react-redux";
+
+const StayCard = ({ booking }) => {
+  const navigate = useNavigate();
+  const { data: currentUser } = useSelector((state) => state.user);
+
+  if (!booking) return null;
+
+  const {
+    property,
+    status,
+    request_by,
+    invoice_no,
+    check_in_date,
+    check_out_date,
+    number_of_guests,
+    total_amount,
+    id,
+  } = booking;
+  const { place_images, title } = property;
+
+  const handleCardClick = () => {
+    navigate(`/bookingDetails/${id}`);
+  };
+
+  return (
+    <div
+      className="stay-card"
+      onClick={handleCardClick}
+      style={{ cursor: "pointer" }}
+    >
+      <GallerySlider images={place_images} style={{ height: "300px" }} />
+
+      <div className="stay-card__content">
+        <h2 className="stay-card__title">{title}</h2>
+        {currentUser?.is_host && (
+          <div className="stay-card__info">
+            <span>Request by:</span>{" "}
+            <span style={{ fontWeight: "bold" }}>{request_by}</span>
+          </div>
+        )}
+        <div className="stay-card__info">
+          <span>Period:</span>
+          <span style={{ fontWeight: "bold" }}>
+            {moment(check_in_date).format("MMM DD, YYYY")} to{" "}
+            {moment(check_out_date).format("MMM DD, YYYY")}
+          </span>
+        </div>
+        <div className="stay-card__info">
+          <span>Guests:</span>{" "}
+          <span style={{ fontWeight: "bold" }}>{number_of_guests}</span>
+        </div>
+        <div className="stay-card__info">
+          <span>Amount Paid:</span>{" "}
+          <span style={{ fontWeight: "bold" }}>
+            ${total_amount ? Number(total_amount).toFixed(2) : "0.00"}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StayCard;

data/app/javascript/react/components/StayCard/StayCard2.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import GallerySlider from "../GallerySlider/GallerySlider";
+import "../../styles/staycard.scss";
+import { MapPin } from "lucide-react";
+
+const StayCard2 = ({ booking }) => {
+  const navigate = useNavigate();
+  if (!booking) return null;
+  const { place_images, title, price_per_month, slug, city, country } = booking;
+  const location = `${city}, ${country}`;
+
+  const handleCardClick = () => {
+    navigate(`/listing-stay-detail/${slug}`);
+  };
+
+  return (
+    <div
+      className="stay-card"
+      onClick={handleCardClick}
+      style={{ cursor: "pointer" }}
+    >
+      <GallerySlider images={place_images} style={{ height: "300px" }} />
+
+      <div className="stay-card__content">
+        <h2 className="stay-card__title">{title}</h2>
+        <div className="stay-card__info-location">
+          <MapPin className="feature-icon-cards" />
+          <span className="listing-location">{location}</span>
+        </div>
+        <div className="stay-card__info">
+          <button
+            className="view-details-btn"
+            onClick={() => handleClick(property.slug)}
+          >
+            From - $
+            {price_per_month ? Number(price_per_month).toFixed(2) : "0.00"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StayCard2;

data/app/javascript/react/components/StayCard/StayCard3.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import GallerySlider from "../GallerySlider/GallerySlider";
+import "../../styles/staycard.scss";
+import { MapPin } from "lucide-react";
+
+const StayCard3 = ({ booking }) => {
+  const navigate = useNavigate();
+  if (!booking) return null;
+  const { place_images, title, price_per_month, slug, city, country } = booking;
+  const location = `${city}, ${country}`;
+
+  const handleCardClick = () => {
+    navigate(`/listing-stay-detail/${slug}`);
+  };
+
+  return (
+    <div
+      className="stay-card"
+      onClick={handleCardClick}
+      style={{ cursor: "pointer" }}
+    >
+      <GallerySlider images={place_images} style={{ height: "300px" }} />
+
+      <div className="stay-card__content">
+        <h2 className="stay-card__title">{title}</h2>
+        <div className="stay-card__info-location">
+          <MapPin className="feature-icon-cards" />
+          <span className="listing-location">{location}</span>
+        </div>
+        <div className="stay-card__info">
+          <button
+            className="view-details-btn"
+            onClick={() => handleClick(property.slug)}
+          >
+            From - $
+            {price_per_month ? Number(price_per_month).toFixed(2) : "0.00"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StayCard3;

data/app/javascript/react/components/TestimonialSection/Testimonial.jsx

@@ -0,0 +1,113 @@
+import React from "react";
+import Slider from "react-slick";
+import "../../styles/testimonial.scss";
+import "../../styles/wrapper.scss";
+import { useEffect } from "react";
+
+const Testimonial = () => {
+  const testimonials = [
+    {
+      id: 1,
+      name: "Fanny Spencer",
+      text: "As conscious traveling Paupers we must always be concerned about our dear Mother Earth. If you think about it, you travel across her face, and She is the",
+      rating: 4.5,
+      image: "https://randomuser.me/api/portraits/women/44.jpg",
+    },
+    {
+      id: 2,
+      name: "Fanny Spencer",
+      text: "As conscious traveling Paupers we must always be concerned about our dear Mother Earth. If you think about it, you travel across her face, and She is the",
+      rating: 4.5,
+      image: "https://randomuser.me/api/portraits/women/45.jpg",
+    },
+    {
+      id: 3,
+      name: "John Doe",
+      text: "As conscious traveling Paupers we must always be concerned about our dear Mother Earth. If you think about it, you travel across her face, and She is the",
+      rating: 5,
+      image: "https://randomuser.me/api/portraits/women/44.jpg",
+    },
+    {
+      id: 4,
+      name: "Jane Smith",
+      text: "As conscious traveling Paupers we must always be concerned about our dear Mother Earth. If you think about it, you travel across her face, and She is the",
+      rating: 4,
+      image: "https://randomuser.me/api/portraits/women/45.jpg",
+    },
+  ];
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 2,
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 5000,
+    pauseOnHover: true,
+    arrows: false,
+    prevArrow: <button type="button" className="slick-prev"></button>,
+    nextArrow: <button type="button" className="slick-next"></button>,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 2,
+        },
+      },
+      {
+        breakpoint: 768,
+        settings: {
+          slidesToShow: 1,
+        },
+      },
+    ],
+
+    customPaging: (i) => <div className="custom-dot"></div>,
+  };
+
+  return (
+    <div className="testimonial-section">
+      <div className="wrapper">
+        <div className="testimonial-container">
+          <h2>Testimonial from our Clients</h2>
+          <p className="subtitle">
+            The French Revolution constituted for the conscience of the dominant
+            aristocratic class a fall from
+          </p>
+
+          <Slider {...settings} className="testimonial-slider">
+            {testimonials.map((testimonial) => (
+              <div key={testimonial.id} className="testimonial-slide">
+                <div className="testimonial-card">
+                  <div className="client-image">
+                    <img src={testimonial.image} alt={testimonial.name} />
+                  </div>
+                  <div className="testimonial-content">
+                    <p className="client-quote">{testimonial.text}</p>
+                    <h3 className="client-name">{testimonial.name}</h3>
+                    <div className="client-rating">
+                      {Array.from({ length: 5 }, (_, i) => (
+                        <span
+                          key={i}
+                          className={
+                            i < Math.floor(testimonial.rating)
+                              ? "star filled"
+                              : "star empty"
+                          }
+                        >
+                          {i + 0.5 === testimonial.rating ? "⭐" : "☆"}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </Slider>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Testimonial;

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

@@ -0,0 +1,12 @@
+// pages/Unauthorized.jsx
+import React from "react";
+import "../../styles/unauthorized.scss"
+
+const Unauthorized = () => (
+  <div className="unauthorized">
+    <h1 className="unauthorized__title">403 - Unauthorized</h1>
+    <p className="unauthorized__message">You do not have permission to view this page.</p>
+  </div>
+);
+
+export default Unauthorized;

data/app/javascript/react/data/jsons/__countryListing.json

@@ -0,0 +1,201 @@
+[
+    { "code": "AF", "name": "Afghanistan" },
+    { "code": "AL", "name": "Albania" },
+    { "code": "DZ", "name": "Algeria" },
+    { "code": "AS", "name": "American Samoa" },
+    { "code": "AD", "name": "Andorra" },
+    { "code": "AO", "name": "Angola" },
+    { "code": "AI", "name": "Anguilla" },
+    { "code": "AQ", "name": "Antarctica" },
+    { "code": "AG", "name": "Antigua and Barbuda" },
+    { "code": "AR", "name": "Argentina" },
+    { "code": "AM", "name": "Armenia" },
+    { "code": "AW", "name": "Aruba" },
+    { "code": "AU", "name": "Australia" },
+    { "code": "AT", "name": "Austria" },
+    { "code": "AZ", "name": "Azerbaijan" },
+    { "code": "BS", "name": "Bahamas" },
+    { "code": "BH", "name": "Bahrain" },
+    { "code": "BD", "name": "Bangladesh" },
+    { "code": "BB", "name": "Barbados" },
+    { "code": "BY", "name": "Belarus" },
+    { "code": "BE", "name": "Belgium" },
+    { "code": "BZ", "name": "Belize" },
+    { "code": "BJ", "name": "Benin" },
+    { "code": "BM", "name": "Bermuda" },
+    { "code": "BT", "name": "Bhutan" },
+    { "code": "BO", "name": "Bolivia" },
+    { "code": "BA", "name": "Bosnia and Herzegovina" },
+    { "code": "BW", "name": "Botswana" },
+    { "code": "BR", "name": "Brazil" },
+    { "code": "BN", "name": "Brunei Darussalam" },
+    { "code": "BG", "name": "Bulgaria" },
+    { "code": "BF", "name": "Burkina Faso" },
+    { "code": "BI", "name": "Burundi" },
+    { "code": "KH", "name": "Cambodia" },
+    { "code": "CM", "name": "Cameroon" },
+    { "code": "CA", "name": "Canada" },
+    { "code": "CV", "name": "Cape Verde" },
+    { "code": "KY", "name": "Cayman Islands" },
+    { "code": "CF", "name": "Central African Republic" },
+    { "code": "TD", "name": "Chad" },
+    { "code": "CL", "name": "Chile" },
+    { "code": "CN", "name": "China" },
+    { "code": "CO", "name": "Colombia" },
+    { "code": "KM", "name": "Comoros" },
+    { "code": "CG", "name": "Congo" },
+    { "code": "CD", "name": "Congo, Democratic Republic of the" },
+    { "code": "CR", "name": "Costa Rica" },
+    { "code": "HR", "name": "Croatia" },
+    { "code": "CU", "name": "Cuba" },
+    { "code": "CY", "name": "Cyprus" },
+    { "code": "CZ", "name": "Czech Republic" },
+    { "code": "DK", "name": "Denmark" },
+    { "code": "DJ", "name": "Djibouti" },
+    { "code": "DM", "name": "Dominica" },
+    { "code": "DO", "name": "Dominican Republic" },
+    { "code": "EC", "name": "Ecuador" },
+    { "code": "EG", "name": "Egypt" },
+    { "code": "SV", "name": "El Salvador" },
+    { "code": "GQ", "name": "Equatorial Guinea" },
+    { "code": "ER", "name": "Eritrea" },
+    { "code": "EE", "name": "Estonia" },
+    { "code": "ET", "name": "Ethiopia" },
+    { "code": "FJ", "name": "Fiji" },
+    { "code": "FI", "name": "Finland" },
+    { "code": "FR", "name": "France" },
+    { "code": "GA", "name": "Gabon" },
+    { "code": "GM", "name": "Gambia" },
+    { "code": "GE", "name": "Georgia" },
+    { "code": "DE", "name": "Germany" },
+    { "code": "GH", "name": "Ghana" },
+    { "code": "GR", "name": "Greece" },
+    { "code": "GD", "name": "Grenada" },
+    { "code": "GT", "name": "Guatemala" },
+    { "code": "GN", "name": "Guinea" },
+    { "code": "GW", "name": "Guinea-Bissau" },
+    { "code": "GY", "name": "Guyana" },
+    { "code": "HT", "name": "Haiti" },
+    { "code": "HN", "name": "Honduras" },
+    { "code": "HU", "name": "Hungary" },
+    { "code": "IS", "name": "Iceland" },
+    { "code": "IN", "name": "India" },
+    { "code": "ID", "name": "Indonesia" },
+    { "code": "IR", "name": "Iran" },
+    { "code": "IQ", "name": "Iraq" },
+    { "code": "IE", "name": "Ireland" },
+    { "code": "IL", "name": "Israel" },
+    { "code": "IT", "name": "Italy" },
+    { "code": "JM", "name": "Jamaica" },
+    { "code": "JP", "name": "Japan" },
+    { "code": "JO", "name": "Jordan" },
+    { "code": "KZ", "name": "Kazakhstan" },
+    { "code": "KE", "name": "Kenya" },
+    { "code": "KI", "name": "Kiribati" },
+    { "code": "KP", "name": "Korea, Democratic People's Republic of" },
+    { "code": "KR", "name": "Korea, Republic of" },
+    { "code": "KW", "name": "Kuwait" },
+    { "code": "KG", "name": "Kyrgyzstan" },
+    { "code": "LA", "name": "Lao People's Democratic Republic" },
+    { "code": "LV", "name": "Latvia" },
+    { "code": "LB", "name": "Lebanon" },
+    { "code": "LS", "name": "Lesotho" },
+    { "code": "LR", "name": "Liberia" },
+    { "code": "LY", "name": "Libya" },
+    { "code": "LI", "name": "Liechtenstein" },
+    { "code": "LT", "name": "Lithuania" },
+    { "code": "LU", "name": "Luxembourg" },
+    { "code": "MG", "name": "Madagascar" },
+    { "code": "MW", "name": "Malawi" },
+    { "code": "MY", "name": "Malaysia" },
+    { "code": "MV", "name": "Maldives" },
+    { "code": "ML", "name": "Mali" },
+    { "code": "MT", "name": "Malta" },
+    { "code": "MH", "name": "Marshall Islands" },
+    { "code": "MR", "name": "Mauritania" },
+    { "code": "MU", "name": "Mauritius" },
+    { "code": "MX", "name": "Mexico" },
+    { "code": "FM", "name": "Micronesia" },
+    { "code": "MD", "name": "Moldova" },
+    { "code": "MC", "name": "Monaco" },
+    { "code": "MN", "name": "Mongolia" },
+    { "code": "ME", "name": "Montenegro" },
+    { "code": "MA", "name": "Morocco" },
+    { "code": "MZ", "name": "Mozambique" },
+    { "code": "MM", "name": "Myanmar" },
+    { "code": "NA", "name": "Namibia" },
+    { "code": "NR", "name": "Nauru" },
+    { "code": "NP", "name": "Nepal" },
+    { "code": "NL", "name": "Netherlands" },
+    { "code": "NZ", "name": "New Zealand" },
+    { "code": "NI", "name": "Nicaragua" },
+    { "code": "NE", "name": "Niger" },
+    { "code": "NG", "name": "Nigeria" },
+    { "code": "NO", "name": "Norway" },
+    { "code": "OM", "name": "Oman" },
+    { "code": "PK", "name": "Pakistan" },
+    { "code": "PW", "name": "Palau" },
+    { "code": "PA", "name": "Panama" },
+    { "code": "PG", "name": "Papua New Guinea" },
+    { "code": "PY", "name": "Paraguay" },
+    { "code": "PE", "name": "Peru" },
+    { "code": "PH", "name": "Philippines" },
+    { "code": "PL", "name": "Poland" },
+    { "code": "PT", "name": "Portugal" },
+    { "code": "QA", "name": "Qatar" },
+    { "code": "RO", "name": "Romania" },
+    { "code": "RU", "name": "Russian Federation" },
+    { "code": "RW", "name": "Rwanda" },
+    { "code": "KN", "name": "Saint Kitts and Nevis" },
+    { "code": "LC", "name": "Saint Lucia" },
+    { "code": "VC", "name": "Saint Vincent and the Grenadines" },
+    { "code": "WS", "name": "Samoa" },
+    { "code": "SM", "name": "San Marino" },
+    { "code": "ST", "name": "Sao Tome and Principe" },
+    { "code": "SA", "name": "Saudi Arabia" },
+    { "code": "SN", "name": "Senegal" },
+    { "code": "RS", "name": "Serbia" },
+    { "code": "SC", "name": "Seychelles" },
+    { "code": "SL", "name": "Sierra Leone" },
+    { "code": "SG", "name": "Singapore" },
+    { "code": "SK", "name": "Slovakia" },
+    { "code": "SI", "name": "Slovenia" },
+    { "code": "SB", "name": "Solomon Islands" },
+    { "code": "SO", "name": "Somalia" },
+    { "code": "ZA", "name": "South Africa" },
+    { "code": "SS", "name": "South Sudan" },
+    { "code": "ES", "name": "Spain" },
+    { "code": "LK", "name": "Sri Lanka" },
+    { "code": "SD", "name": "Sudan" },
+    { "code": "SR", "name": "Suriname" },
+    { "code": "SZ", "name": "Swaziland" },
+    { "code": "SE", "name": "Sweden" },
+    { "code": "CH", "name": "Switzerland" },
+    { "code": "SY", "name": "Syrian Arab Republic" },
+    { "code": "TW", "name": "Taiwan" },
+    { "code": "TJ", "name": "Tajikistan" },
+    { "code": "TZ", "name": "Tanzania" },
+    { "code": "TH", "name": "Thailand" },
+    { "code": "TL", "name": "Timor-Leste" },
+    { "code": "TG", "name": "Togo" },
+    { "code": "TO", "name": "Tonga" },
+    { "code": "TT", "name": "Trinidad and Tobago" },
+    { "code": "TN", "name": "Tunisia" },
+    { "code": "TR", "name": "Turkey" },
+    { "code": "TM", "name": "Turkmenistan" },
+    { "code": "TV", "name": "Tuvalu" },
+    { "code": "UG", "name": "Uganda" },
+    { "code": "UA", "name": "Ukraine" },
+    { "code": "AE", "name": "United Arab Emirates" },
+    { "code": "GB", "name": "United Kingdom" },
+    { "code": "US", "name": "United States" },
+    { "code": "UY", "name": "Uruguay" },
+    { "code": "UZ", "name": "Uzbekistan" },
+    { "code": "VU", "name": "Vanuatu" },
+    { "code": "VE", "name": "Venezuela" },
+    { "code": "VN", "name": "Viet Nam" },
+    { "code": "YE", "name": "Yemen" },
+    { "code": "ZM", "name": "Zambia" },
+    { "code": "ZW", "name": "Zimbabwe" }
+  ]
+  

data/app/javascript/react/packs/App.js

@@ -0,0 +1,26 @@
+import React, { useEffect } from "react";
+import { RouterProvider } from "react-router-dom";
+import router from "./routes/router"; // Adjust the path if needed
+import { useDispatch } from "react-redux";
+import { loginSuccess } from "../redux/slices/AuthSlice/AuthSlice";
+import { getCurrentUser } from "../redux/slices/UserSlice/UserSlice";
+// import "../Style/index.css";
+
+function App() {
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const storedUser = JSON.parse(localStorage.getItem("user"));
+    const token = localStorage.getItem("authToken");
+
+    if (token) {
+      dispatch(loginSuccess(storedUser)); // ✅ Restore user session
+      dispatch(getCurrentUser());
+    }
+  }, [dispatch]);
+  
+  return <RouterProvider router={router} />;
+}
+
+export default App;

data/app/javascript/react/packs/index.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import ParentRoute from "./routes/ParentRoute";
+import "../styles/application.scss";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { Provider } from "react-redux";
+import store, { persistor } from "../redux/store";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { PersistGate } from "redux-persist/integration/react";
+import { MantineProvider } from "@mantine/core";
+import "@mantine/core/styles.css";
+import "@mantine/dates/styles.css";
+import { Elements } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
+const stripePromise = loadStripe(
+  "pk_test_51LCfAAJQIRLPDLbLcKwKmAbKIHjTiJYCUsWXxfbQ0UlF5N3AO2tfLgKXt4GPI7UZYJUVHi94Q4TEol5YN1PQD4AI00N1uBrnnR"
+);
+
+const rootElement = document.getElementById("root");
+
+if (rootElement) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <MantineProvider withGlobalStyles withNormalizeCSS>
+          <Elements stripe={stripePromise}>
+            <>
+              <ParentRoute />
+              <ToastContainer position="top-right" autoClose={5000} />
+            </>
+          </Elements>
+        </MantineProvider>
+      </PersistGate>
+    </Provider>
+  );
+}

data/app/javascript/react/packs/routes/ParentRoute.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { RouterProvider } from "react-router-dom";
+import router from "./Route";
+
+function ParentRoute() {
+  return (
+    <div>
+      <RouterProvider router={router} />
+    </div>
+  );
+}
+
+export default ParentRoute;
+