stay_commerce-frontend 0.1.0

data/app/javascript/react/components/PropertyListing/StayBooking/BookingDetails.jsx

@@ -0,0 +1,178 @@
+import React, { useEffect, useState } from "react";
+import { Calendar, Users, MapPin, Ship, Phone } from "lucide-react";
+import GallerySlider from "../../GallerySlider/GallerySlider";
+import { getBookingDetails } from "../../../redux/slices/PropertySlice/PropertySlice";
+import { useParams } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
+import "../../../styles/BookingDetails.scss";
+
+const BookingInterface = () => {
+  const dispatch = useDispatch();
+  const [bookingRequestDetails, setBookingRequestDetails] = useState(null);
+  const { id } = useParams();
+  const { data: currentUser } = useSelector((state) => state.user);
+  const displayUser = currentUser?.is_host
+    ? bookingRequestDetails?.user
+    : bookingRequestDetails?.property_user;
+  const location = `${bookingRequestDetails?.property?.city}, ${bookingRequestDetails?.property?.state}, ${bookingRequestDetails?.property?.country}`;
+
+  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="container">
+      <div className="booking-container">
+        <div className="sidebar">
+          {/* Contact Info */}
+          <div className="contact-card">
+            <div className="profile-header">
+              <div className="profile-avatar">
+                {displayUser?.image ? (
+                  <img
+                    src={displayUser.image}
+                    alt={displayUser.full_name}
+                    className="avatar-image-deatils"
+                  />
+                ) : (
+                  <span className="avatar-initial">
+                    {displayUser?.full_name?.charAt(0) || "U"}
+                  </span>
+                )}
+              </div>
+
+              <div className="profile-info">
+                <h3 className="profile-name">{displayUser?.full_name}</h3>
+                <p className="profile-nationality">Nationality: Peru</p>
+              </div>
+            </div>
+
+            <div className="contact-details">
+              <div className="contact-field">
+                <span className="field-label">Language:</span>
+                <span className="field-value">Italian, Peruvian, English</span>
+              </div>
+
+              <div className="contact-field">
+                <span className="field-label">Email:</span>
+                <div className="email-container">
+                  <span className="field-value">{displayUser?.email}</span>
+                  <span className="verified-badge">Verified</span>
+                </div>
+              </div>
+
+              <div className="contact-field">
+                <span className="field-label">Phone:</span>
+                <div className="phone-container">
+                  <Phone className="contact-icon" />
+                  <span className="field-value">{displayUser?.phone}</span>
+                </div>
+              </div>
+
+              <div className="contact-field">
+                <span className="field-label">About:</span>
+                <p className="about-text">
+                  {displayUser?.about_me || "No bio available."}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="property-card">
+            <GallerySlider
+              images={bookingRequestDetails?.line_items[0]?.rooms?.room_images}
+              alt="Luxury Penthouse"
+              style={{ height: "300px" }}
+            />
+            <div className="property-content">
+              <h3 className="property-title">
+                {bookingRequestDetails?.line_items[0]?.rooms?.name}
+              </h3>
+              <div className="property-features">
+                <div className="guest-badge">
+                  <span className="guest-label">
+                    {" "}
+                    <Users className="feature-icon" />
+                    Guests:
+                  </span>
+                  <span className="value">
+                    {bookingRequestDetails?.number_of_guests}
+                  </span>
+                </div>
+                <div className="feature">
+                  <MapPin className="feature-icon" />
+                  <span>{location}</span>
+                </div>
+              </div>
+              <div className="price-section-details">
+                <div className="period">Total</div>
+                <div className="amount">
+                  $ {bookingRequestDetails?.item_total}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="booking-grid">
+          {/* Main Booking Form */}
+          <div className="booking-form-section">
+            <div className="booking-form">
+              <h2 className="booking-title">
+                Booking {bookingRequestDetails?.number} for{" "}
+                {bookingRequestDetails?.property?.title}
+              </h2>
+
+              <div className="booking-details">
+                <div className="detail-row">
+                  <span className="label">Date of Visit:</span>
+                  <span className="value">
+                    {bookingRequestDetails?.check_in_date} -{" "}
+                    {bookingRequestDetails?.check_out_date}
+                  </span>
+                </div>
+                <div className="detail-row">
+                  <span className="label">Pay Amount:</span>
+                  <span className="value">
+                    $ {bookingRequestDetails?.item_total}
+                  </span>
+                </div>
+                <div className="detail-row">
+                  <span className="label">Guests:</span>
+                  <span className="value">
+                    {bookingRequestDetails?.number_of_guests}
+                  </span>
+                </div>
+              </div>
+
+              <div className="action-buttons">
+                <button
+                  className="btn btn-primary "
+                  style={{
+                    cursor: "not-allowed",
+                    backgroundColor: "#495387",
+                  }}
+                >
+                  <Calendar className="icon" />
+                  Booking Confirmed
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Sidebar */}
+        </div>
+      </div>{" "}
+    </div>
+  );
+};
+
+export default BookingInterface;

data/app/javascript/react/components/PropertyListing/StayBooking/MyBooking.jsx

@@ -0,0 +1,83 @@
+import React, { useCallback, useEffect, useState } from "react";
+import "../../../styles/mybooking.scss";
+import StayCard from "../../StayCard/StayCard";
+import {
+  getHostBookingsDetails,
+  getUserBookingsDetails,
+} from "../../../redux/slices/PropertySlice/PropertySlice";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+
+const MyBooking = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const [bookingData, setBookingData] = useState(null);
+  const [query, setQuery] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const { data: currentUser } = useSelector((state) => state.user);
+
+  const fetchBookings = useCallback(
+    async (page) => {
+      setIsLoading(true);
+      try {
+        if (currentUser?.is_host) {
+          const response = await dispatch(
+            getHostBookingsDetails({ page })
+          ).unwrap();
+          setBookingData(response);
+        } else {
+          const response = await dispatch(
+            getUserBookingsDetails({ page })
+          ).unwrap();
+          setBookingData(response);
+        }
+      } catch (error) {
+        console.error("Error fetching bookings:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [dispatch, currentUser]
+  );
+
+  useEffect(() => {
+    fetchBookings(1);
+  }, [fetchBookings]);
+
+  return (
+    <div className="my-booking-container">
+      <div className="my-booking-content">
+        <h1 className="heading">My Bookings</h1>
+        <p className="subheading">
+          View the complete list of all your booking requests.
+        </p>
+
+        {/* <div className="search-bar">
+          <FormField
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search By Property Name..."
+            className="search-input"
+          />
+          <ButtonPrimary className="search-button">Search</ButtonPrimary>
+        </div> */}
+
+        {/* Stay Cards Grid */}
+        <div className="stay-cards">
+          {isLoading ? (
+            <div className="loader">Loading bookings...</div>
+          ) : bookingData?.bookings?.length > 0 ? (
+            bookingData.bookings.map((booking) => (
+              <StayCard key={booking.id} booking={booking} />
+            ))
+          ) : (
+            <p className="no-results">No bookings found.</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyBooking;

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

@@ -0,0 +1,117 @@
+import React, { useEffect } from "react";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import { useDispatch } from "react-redux";
+import { useNavigate, useLocation } from "react-router-dom";
+import { toast } from "react-toastify";
+import ButtonPrimary from "../../shared/Button/ButtonPrimary";
+import "../../styles/resetpassword.scss";
+import { createNewPassword } from "../../redux/slices/UserSlice/UserSlice";
+import {editValidationSchema} from "../../utils/formSchema";
+
+const ResetPassword = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const resetTokenFromURL = searchParams.get("reset_password_token");
+  const [manualToken, setManualToken] = React.useState("");
+  const finalToken = resetTokenFromURL || manualToken;
+
+
+
+  return (
+    <div className="reset-password">
+      <div className="reset-password__container">
+        <h2 className="reset-password__title">Reset Password</h2>
+        <Formik
+          initialValues={{ password: "", confirmPassword: "" }}
+          validationSchema={editValidationSchema}
+          onSubmit={async (values, { setSubmitting }) => {
+            try {
+              dispatch(
+                createNewPassword({
+                  token: finalToken,
+                  payload: {
+                    password: values.password,
+                    confirm_password: values.confirmPassword,
+                    message: "",
+                  },
+                })
+              )
+                .unwrap()
+                .then((res) => {
+                  if (res?.success) {
+                    toast.success(res?.message || "Password reset successful!");
+                    navigate("/login");
+                  } else {
+                    toast.error(res?.message || "Password reset failed.");
+                  }
+                });
+            } catch (error) {
+              console.error("Failed to reset password:", error);
+              const errorMessage =
+                error?.response?.data?.message ||
+                "Failed to reset password. Please try again.";
+              toast.error(errorMessage);
+            } finally {
+              setSubmitting(false);
+            }
+          }}
+        >
+          {({ isSubmitting }) => (
+            <Form>
+              <div className="reset-password__field">
+                <label htmlFor="password" className="reset-password__label">
+                  New Password
+                </label>
+                <Field
+                  type="password"
+                  name="password"
+                  id="password"
+                  placeholder="Enter your new password"
+                  className="reset-password__input"
+                />
+                <ErrorMessage
+                  name="password"
+                  component="div"
+                  className="reset-password__error"
+                />
+              </div>
+
+              <div className="reset-password__field">
+                <label
+                  htmlFor="confirmPassword"
+                  className="reset-password__label"
+                >
+                  Confirm Password
+                </label>
+                <Field
+                  type="password"
+                  name="confirmPassword"
+                  id="confirmPassword"
+                  placeholder="Confirm your new password"
+                  className="reset-password__input"
+                />
+                <ErrorMessage
+                  name="confirmPassword"
+                  component="div"
+                  className="reset-password__error"
+                />
+              </div>
+
+              <ButtonPrimary
+                type="submit"
+                className="request-password-reset__button"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? "Updating..." : "Reset Password"}
+              </ButtonPrimary>
+            </Form>
+          )}
+        </Formik>
+      </div>
+    </div>
+  );
+};
+
+export default ResetPassword;

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

@@ -0,0 +1,185 @@
+import React, { useState } from "react";
+import { useFormik } from "formik";
+import { useDispatch, useSelector } from "react-redux";
+import { signupUser } from "../../redux/slices/AuthSlice/AuthSlice";
+import { Link, useNavigate } from "react-router-dom";
+import { signupSchema } from "../../utils/formSchema";
+import successHandler from "../../utils/helpers/SuccessHandler";
+import "../../styles/signuppage.scss";
+import FormField from "../../shared/FormField/FormField";
+import { getCurrentUser } from "../../redux/slices/UserSlice/UserSlice";
+import "../../styles/formfield.scss";
+import SocialAuth from "../SocialAuth/SocialAuth";
+import ButtonSelect from "../../shared/Button/ButtonSelect";
+
+const SignupPage = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { loading } = useSelector((state) => state.auth);
+  const [activeTab, setActiveTab] = useState("user");
+
+  const formik = useFormik({
+    initialValues: {
+      first_name: "",
+      last_name: "",
+      email: "",
+      // phone: "",
+      password: "",
+      confirm_password: "",
+      // date_of_birth: "",
+      is_host: activeTab,
+    },
+    validationSchema: signupSchema,
+    onSubmit: (values, { setSubmitting, resetForm }) => {
+      setSubmitting(true);
+      const userData = {
+        // ...values,
+        first_name: values.first_name,
+        last_name: values.last_name,
+        email: values.email,
+        password: values.password,
+        comfirm_password: values.confirm_password,
+        // date_of_birth: values.date_of_birth,
+        // phone: values.phone,
+        type: activeTab,
+      };
+      dispatch(signupUser(userData))
+        .unwrap()
+        .then((response) => {
+          if (response?.access_token) {
+            localStorage.setItem("authToken", response.access_token);
+            successHandler("Signup successful! Welcome aboard!");
+            dispatch(getCurrentUser());
+            navigate("/");
+            resetForm();
+          }
+        })
+        .catch((error) => {
+          formik.setErrors({
+            apiError: error?.error_description || "Signup failed",
+          });
+        })
+        .finally(() => setSubmitting(false));
+    },
+  });
+
+  return (
+    <div className="signup-container">
+      <span className="logos">👑 STAY COMMERCE</span>
+      <div className="signup-card">
+        <div className="sign-title">
+          <h2>Signup</h2>
+        </div>
+
+        {/* Student & Host Selection */}
+        <div className="role-selection">
+          <ButtonSelect
+            className={`role-button ${activeTab === "user" ? "active" : ""}`}
+            onClick={() => setActiveTab("user")}
+          >
+            User
+          </ButtonSelect>
+          <ButtonSelect
+            className={`role-button ${activeTab === "host" ? "active" : ""}`}
+            onClick={() => setActiveTab("host")}
+          >
+            Host
+          </ButtonSelect>
+        </div>
+
+        {activeTab === "user" && (
+          <div className="social-login">
+            <SocialAuth />
+            <h4>OR</h4>
+          </div>
+        )}
+
+        <form className="signup-form" onSubmit={formik.handleSubmit}>
+          <FormField
+            label="First Name"
+            name="first_name"
+            type="text"
+            placeholder="First Name"
+            {...formik.getFieldProps("first_name")}
+            error={formik.touched.first_name && formik.errors.first_name}
+          />
+
+          <FormField
+            label="Last Name"
+            name="last_name"
+            type="text"
+            placeholder="Last Name"
+            {...formik.getFieldProps("last_name")}
+            error={formik.touched.last_name && formik.errors.last_name}
+          />
+
+          <FormField
+            label="Email"
+            name="email"
+            type="email"
+            placeholder="Email"
+            {...formik.getFieldProps("email")}
+            error={formik.touched.email && formik.errors.email}
+          />
+          {/* {activeTab === "host" && (
+            <FormField
+              label="Phone Number"
+              name="phone"
+              type="text"
+              placeholder="Phone Number"
+              {...formik.getFieldProps("phone")}
+              error={formik.touched.phone && formik.errors.phone}
+            />
+          )} */}
+          {/* 
+          <FormField
+            label="Date of Birth"
+            name="date_of_birth"
+            type="date"
+            placeholder="Date of Birth"
+            {...formik.getFieldProps("date_of_birth")}
+            error={formik.touched.date_of_birth && formik.errors.date_of_birth}
+          /> */}
+
+          <FormField
+            label="Password"
+            name="password"
+            type="password"
+            placeholder="Password"
+            {...formik.getFieldProps("password")}
+            error={formik.touched.password && formik.errors.password}
+          />
+
+          <FormField
+            label="Confirm Password"
+            name="confirm_password"
+            type="password"
+            placeholder="Confirm Password"
+            {...formik.getFieldProps("confirm_password")}
+            error={
+              formik.touched.confirm_password && formik.errors.confirm_password
+            }
+          />
+
+          <button
+            type="submit"
+            className="signup-button"
+            disabled={formik.isSubmitting || loading}
+          >
+            {formik.isSubmitting || loading ? "Signing up..." : "Submit"}
+          </button>
+
+          {formik.errors.apiError && (
+            <p className="error-text">{formik.errors.apiError}</p>
+          )}
+        </form>
+
+        <p className="login-text">
+          Already have an account? <Link to="/login">Login</Link>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default SignupPage;

data/app/javascript/react/components/SmallNavbar/SmallNav.jsx

@@ -0,0 +1,51 @@
+// import React from "react";
+// import { Link, useLocation } from "react-router-dom";
+// import "../../styles/fixednavbar.scss";
+// import MobileMenu from "../MobileNav/MobileMenu";
+// import "../../styles/smallnav.scss";
+
+
+// function SmallNavbar() {
+//     const location = useLocation();
+//   return (
+//     <nav className="navbar small">
+//     <div className="wrap">
+//       <div className="small">
+//       <div className="navContentSmall">
+//         {/* Logo */}
+//         <div className="logo">
+//           <span className="logospan">👑 STAY COMMERCE</span>
+//         </div>
+
+      
+//       <div className="navMenu smallMenu">
+//         {[
+//           { name: "HOME", path: "/" },
+//           { name: "ABOUT US", path: "/about-us" },
+//           { name: "ACCOMMODATION", path: "/accommodation" },
+//           { name: "GALLERY", path: "/gallery" },
+//           { name: "BLOG", path: "/blog" },
+//           { name: "ELEMENT", path: "/element" },
+//           { name: "CONTACT", path: "/contact" },
+//         ].map((item) => (
+//         <Link
+//         key={item.name}
+//         to={item.path}
+//         className={`navLink ${
+//         location.pathname === item.path ? "active" : ""
+//         }`}
+//         >
+//         {item.name}
+//         </Link>
+//         ))}
+//       </div>
+//       < MobileMenu />
+//        </div>
+//        </div>
+//        </div>
+//     </nav>
+   
+//   );
+// }
+
+// export default SmallNavbar;

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

@@ -0,0 +1,21 @@
+import React from "react";
+import facebookSvg from "../../../Images/Facebook.svg";
+import googleSvg from "../../../Images/Google.svg";
+import "../../styles/socialauth.scss"; 
+
+const SocialAuth = () => {
+  return (
+    <div className="social-auth">
+      <button className="social-button google">
+        <img src={googleSvg} alt="Google" />
+        Google
+      </button>
+      <button className="social-button facebook">
+        <img src={facebookSvg} alt="Facebook" />
+        Facebook
+      </button>
+    </div>
+  );
+};
+
+export default SocialAuth;