stay_commerce-frontend 0.1.0

data/app/javascript/react/components/AvatarDropdown/AvatarDropDown.jsx

@@ -0,0 +1,142 @@
+import React, { useState, useRef, useEffect, Fragment } from "react";
+import { Popover, Transition } from "@headlessui/react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import {
+  UserCircleIcon,
+  PhoneIcon,
+  LifebuoyIcon,
+  ArrowRightOnRectangleIcon,
+  BookOpenIcon,
+  CircleStackIcon,
+  HomeIcon,
+} from "@heroicons/react/24/outline";
+import { Link } from "react-router-dom";
+import Avatar from "../../shared/Avatar/Avatar";
+import "../../styles/avatardropdown.scss";
+import { logout } from "../../redux/slices/AuthSlice/AuthSlice";
+
+export default function AvatarDropdown() {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const user = useSelector((state) => state.user.data);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    const options = [
+      { name: "Account", href: "/account", icon: UserCircleIcon },
+      { name: "MyBookings", href: "/mybookings", icon: BookOpenIcon },
+      { name: "Contact", href: "/contact", icon: PhoneIcon },
+    ];
+    if (user?.is_host || user?.is_user) {
+      options.push(
+        { name: "My Properties", href: "/myproperties", icon: HomeIcon },
+        {
+          name: "List New Property",
+          href: "/property-1",
+          icon: CircleStackIcon,
+        }
+      );
+    }
+
+    const optionsFoot = [
+      { name: "Help", href: "/help", icon: LifebuoyIcon },
+      {
+        name: "Logout",
+        href: "#",
+        icon: ArrowRightOnRectangleIcon,
+        action: "logout",
+      },
+    ];
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const handleLogout = () => {
+    dispatch(logout());
+    navigate("/login");
+  };
+
+  const options = [
+    { name: "Account", href: "/account", icon: UserCircleIcon },
+    { name: "MyBookings", href: "/mybookings", icon: BookOpenIcon },
+    { name: "Contact", href: "/contact", icon: PhoneIcon },
+  ];
+
+  if (user?.is_host) {
+    options.push({
+      name: "My Properties",
+      href: "/myproperties",
+      icon: HomeIcon,
+    });
+  }
+  if (user?.is_host) {
+    options.push({
+      name: "List New Property",
+      href: "/property-1",
+      icon: CircleStackIcon,
+    });
+  }
+  const optionsFoot = [
+    { name: "Help", href: "/help", icon: LifebuoyIcon },
+    {
+      name: "Logout",
+      href: "#",
+      icon: ArrowRightOnRectangleIcon,
+      action: "logout",
+    },
+  ];
+
+  return (
+    <div className="avatar-dropdown" ref={dropdownRef}>
+      <button onClick={() => setIsOpen(!isOpen)} className="avatar-button">
+        <Avatar />
+      </button>
+
+      {isOpen && (
+        <div className="dropdown-menu">
+          <div className="dropdown-content">
+            {options.map((item, index) => (
+              <Link
+                key={index}
+                to={item.href}
+                onClick={() => setIsOpen(false)}
+                className="dropdown-item"
+              >
+                <item.icon className="icon" />
+                <span>{item.name}</span>
+              </Link>
+            ))}
+
+            <hr className="dropdown-divider" />
+
+            {optionsFoot.map((item, index) => (
+              <Link
+                key={index}
+                to={item.action === "logout" ? "#" : item.href}
+                onClick={() => {
+                  if (item.action === "logout") handleLogout();
+                  setIsOpen(false);
+                }}
+                className="dropdown-item"
+              >
+                <item.icon className="icon" />
+                <span>{item.name}</span>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

data/app/javascript/react/components/BlogDesign/BlogsLatest.jsx

@@ -0,0 +1,67 @@
+
+import React from "react";
+import "../../styles/blog.scss";
+import Bg1 from "../../../Images/beach4.jpg";
+import Bg2 from "../../../Images/beach5.jpg";
+import Bg3 from "../../../Images/beach7.jpg";
+import "../../styles/wrapper.scss";
+
+const blogPosts = [
+  {
+    image: Bg1,
+    tags: ["Travel", "Life Style"],
+    title: "Low Cost Advertising",
+    description: "Acres of Diamonds... you've read the famous story, or at least had it related to you. A farmer.",
+    date: "31st January, 2018"
+  },
+  {
+    image: Bg2,
+    tags: ["Travel", "Life Style"],
+    title: "Creative Outdoor Ads",
+    description: "Self-doubt and fear interfere with our ability to achieve or set goals.",
+    date: "31st January, 2018"
+  },
+  {
+    image: Bg3,
+    tags: ["Travel", "Life Style"],
+    title: "It Is Classified How To Utilize Free",
+    description: "Why do you want to motivate yourself? Actually, just answering that question fully can.",
+    date: "31st January, 2018"
+  }
+];
+
+const BlogSection = () => {
+  return (
+    <section className="blog-section">
+      <div className="wrapper">
+      <div className="blog-cont">
+        <h2 className="title">Latest posts from blog</h2>
+        <p className="subtitle">
+          The French Revolution constituted for the conscience of the dominant aristocratic class a fall from
+        </p>
+        <div className="posts">
+          {blogPosts.map((post, index) => (
+            <div className="post-card" key={index}>
+              <div className="img-wrapper">
+                <img src={post.image} alt={post.title} className="post-image" />
+              </div>
+              <div className="post-content">
+                <div className="tags">
+                  {post.tags.map((tag, i) => (
+                    <span className="tag" key={i}>{tag}</span>
+                  ))}
+                </div>
+                <h3 className="post-title">{post.title}</h3>
+                <p className="post-description">{post.description}</p>
+                <p className="post-date">{post.date}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      </div>
+    </section>
+  );
+};
+
+export default BlogSection;

data/app/javascript/react/components/ContactUs/Contact.jsx

@@ -0,0 +1,89 @@
+
+import React from "react";
+import Navbar from "../Navbar/Navbar";
+import Bg from "../../../Images/bgimage.jpg";
+import { Link } from "react-router-dom";
+import "../../styles/contact.scss";
+import "../../styles/wrapper.scss";
+
+const Contact = () => {
+  return (
+    <>
+      <div
+        className="contact-hero"
+        style={{ backgroundImage: `url(${Bg})` }}
+      >
+        <h1>Contact</h1>
+         <div className="breadcrumb">
+                <Link to="/" className="breadcrumb-link">
+                  Home
+                </Link>
+                <span className="breadcrumb-separator">→</span>
+                <span className="breadcrumb-current">Contact</span>
+              </div>
+      </div>
+
+      <div className="contact-container">
+        <div className="wrapper">
+        <div className="contact-map">
+          <iframe
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52871.863694855426!2d-118.50302023809138!3d34.02324754471949!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2a4cec2910019%3A0xb4170ab5ff23f5ab!2sSanta%20Monica%2C%20CA!5e0!3m2!1sen!2sus!4v1613672854245!5m2!1sen!2sus"
+            width="100%"
+            height="100%"
+            style={{ border: 0 }}
+            allowFullScreen=""
+            loading="lazy"
+            referrerPolicy="no-referrer-when-downgrade"
+          ></iframe>
+        </div>
+
+        <div className="contact-content">
+          <div className="contact-info">
+            <div className="info-item">
+              <span className="icon">🏠</span>
+              <div>
+                <h4>California, United States</h4>
+                <p>Santa monica boulevard</p>
+              </div>
+            </div>
+
+            <div className="info-item">
+              <span className="icon">📞</span>
+              <div>
+                <h4>00 (440) 9865 562</h4>
+                <p>Mon to Fri 9am to 6 pm</p>
+              </div>
+            </div>
+
+            <div className="info-item">
+              <span className="icon">✉️</span>
+              <div>
+                <h4>support@colorlib.com</h4>
+                <p>Send us your query anytime!</p>
+              </div>
+            </div>
+          </div>
+
+          <form className="contact-form">
+            <div className="form-left">
+              <input type="text" placeholder="Enter your name" />
+              <input type="email" placeholder="Enter email address" />
+              <input type="text" placeholder="Enter Subject" />
+            </div>
+
+            <div className="form-right">
+              <textarea placeholder="Enter Message"></textarea>
+            </div>
+
+            <div className="form-button">
+              <button type="submit">SEND MESSAGE</button>
+            </div>
+          </form>
+        </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Contact;

data/app/javascript/react/components/FacilitiesSection/Facilities.jsx

@@ -0,0 +1,66 @@
+import React from "react";
+
+const features = [
+  {
+    icon: "🍽️",
+    title: "Restaurant",
+    description:
+      "Experience fine dining with our world-class restaurant offering exquisite cuisine.",
+  },
+  {
+    icon: "🚴",
+    title: "Sports Club",
+    description:
+      "Stay active with our premium sports facilities and professional equipment.",
+  },
+  {
+    icon: "👕",
+    title: "Swimming Pool",
+    description:
+      "Relax and unwind in our luxurious swimming pool with crystal clear water.",
+  },
+  {
+    icon: "🚗",
+    title: "Rent a Car",
+    description:
+      "Convenient car rental services for your transportation needs.",
+  },
+  {
+    icon: "🏋️",
+    title: "Gymnasium",
+    description:
+      "Modern fitness center with state-of-the-art equipment and training facilities.",
+  },
+  {
+    icon: "🍹",
+    title: "Bar",
+    description:
+      "Enjoy premium beverages and cocktails in our elegant bar lounge.",
+  },
+];
+
+const FacilitiesSection = () => {
+  return (
+    <div className="modern-facilities-section">
+      <div className="facilities-container">
+        <h2 className="facilities-main-title">Royal Facilities</h2>
+
+        <div className="facilities-grid">
+          {features.map((feature, index) => (
+            <div key={index} className="facility-card">
+              <div className="icon-container">
+                <span className="facility-icon">{feature.icon}</span>
+              </div>
+              <div className="facility-content">
+                <h3 className="facility-title">{feature.title}</h3>
+                <p className="facility-description">{feature.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FacilitiesSection;

data/app/javascript/react/components/FixedNavbar/FixedNav.jsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useSelector, useDispatch } from "react-redux";
+import { logout } from "../../redux/slices/AuthSlice/AuthSlice";
+import MobileMenu from "../MobileNav/MobileMenu";
+import "../../styles/fixednavbar.scss";
+import AvatarDropDown from "../AvatarDropdown/AvatarDropDown";
+import logo from "../../assets/logo_updated.png";
+
+// React Icons
+import { IoHomeOutline } from "react-icons/io5";
+import { MdInfoOutline } from "react-icons/md";
+import { FaBed, FaImages, FaBlogger } from "react-icons/fa";
+
+function FixedNavbar() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const { user } = useSelector((state) => state.auth);
+
+  const handleLogout = () => {
+    dispatch(logout());
+    navigate("/");
+  };
+
+  const navItems = [
+    { name: "Home", path: "/", icon: <IoHomeOutline /> },
+    { name: "About us", path: "/about-us", icon: <MdInfoOutline /> },
+    { name: "Accommodation", path: "/accommodation", icon: <FaBed /> },
+    { name: "Gallery", path: "/gallery", icon: <FaImages /> },
+    // { name: "Blog", path: "/blog", icon: <FaBlogger /> },
+  ];
+
+  return (
+    <nav className="navbar">
+      <div className="container">
+        <div className="navContent">
+          <div className="logo">
+            <span className="logospan">
+              <a href="/">
+                <img src={logo} width={140} alt="Logo" />
+              </a>
+            </span>
+          </div>
+
+          <div className="navMenu desktopMenu">
+            {navItems.map((item) => (
+              <Link
+                key={item.name}
+                to={item.path}
+                className={`navLink ${
+                  location.pathname === item.path ? "active" : ""
+                }`}
+              >
+                <span className="icon">{item.icon}</span>
+                <span className="text">{item.name}</span>
+              </Link>
+            ))}
+          </div>
+
+          <div className="authButtons">
+            {user ? (
+              <>
+                <button onClick={handleLogout} className="logoutButton">
+                  LOGOUT
+                </button>
+                <AvatarDropDown />
+              </>
+            ) : (
+              <>
+                <Link to="/login" className="loginButton">
+                  LOGIN
+                </Link>
+                <Link to="/signup" className="signupButton">
+                  SIGNUP
+                </Link>
+              </>
+            )}
+          </div>
+
+          <MobileMenu />
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default FixedNavbar;

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

@@ -0,0 +1,103 @@
+import React from "react";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { forgetPassword } from "../../redux/slices/UserSlice/UserSlice";
+import { toast } from "react-toastify";
+import ButtonPrimary from "../../shared/Button/ButtonPrimary";
+import "../../styles/forgetpassword.scss";
+import { emailValidationSchema } from "../../utils/formSchema";
+
+const ForgetPassword = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  return (
+    <div className="request-password-reset">
+      <div className="request-password-reset__container">
+        <h2 className="request-password-reset__title">Forgot Password</h2>
+        <p className="request-password-reset__subtitle">
+          Enter your email below and we'll send you a link to reset your
+          password.
+        </p>
+
+        <Formik
+          initialValues={{ email: "" }}
+          validationSchema={emailValidationSchema}
+          onSubmit={async (values, { setSubmitting }) => {
+            setSubmitting(true);
+            try {
+              dispatch(forgetPassword({ user: { email: values.email } }))
+                .unwrap()
+                .then((res) => {
+                  if (res?.success) {
+                    toast.success("Reset link sent to your email!");
+                    navigate("/reset-password");
+                  } else {
+                    if (res?.error && res.error.includes("Email not found")) {
+                      toast.error(
+                        "Email not found. Please enter a valid email."
+                      );
+                    } else {
+                      toast.error(
+                        res?.message ||
+                          "Failed to send reset link. Please try again."
+                      );
+                    }
+                  }
+                })
+                .catch((error) => {
+                  const errorMessage =
+                    error?.response?.data?.error ||
+                    "Failed to send reset link.";
+                  if (errorMessage.includes("Email not found")) {
+                    toast.error("Email not found. Please enter a valid email.");
+                  } else {
+                    toast.error(errorMessage);
+                  }
+                });
+            } finally {
+              setSubmitting(false);
+            }
+          }}
+        >
+          {({ isSubmitting }) => (
+            <Form>
+              <div className="request-password-reset__field">
+                <label
+                  htmlFor="email"
+                  className="request-password-reset__label"
+                >
+                  Email Address
+                </label>
+                <Field
+                  type="email"
+                  name="email"
+                  id="email"
+                  placeholder="Enter your email"
+                  className="request-password-reset__input"
+                />
+                <ErrorMessage
+                  name="email"
+                  component="div"
+                  className="request-password-reset__error"
+                />
+              </div>
+
+              <ButtonPrimary
+                type="submit"
+                className="request-password-reset__button"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? "Sending..." : "Send Reset Link"}
+              </ButtonPrimary>
+            </Form>
+          )}
+        </Formik>
+      </div>
+    </div>
+  );
+};
+
+export default ForgetPassword;