stay_commerce-frontend 0.1.0

data/app/javascript/react/styles/staycard.scss

@@ -0,0 +1,77 @@
+.stay-card {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: transform 0.2s ease-in-out;
+  width: 100%;
+
+  &:hover {
+    transform: translateY(-5px);
+  }
+
+  &__status {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: #333;
+    color: white;
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: bold;
+    text-transform: capitalize;
+  }
+
+  // &__slider {
+  //   width: 100%;
+  //   overflow: hidden;
+
+  //   .gallery-slider {
+  //     width: 100%;
+  //     height: 100%;
+  //     object-fit: cover;
+  //   }
+  // }
+
+  &__content {
+    padding: 15px;
+    text-align: left;
+  }
+
+  &__title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  &__info {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: #666;
+    padding: 4px 0;
+  }
+}
+
+.stay-card__info-location {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: 10px;
+}
+
+.stay-card__title {
+  font-size: 16px;
+  line-clamp: 3;
+}
+
+.feature-icon-cards {
+  height: 15px;
+  width: 15px;
+  font-weight: 200;
+}
+
+.listing-location {
+  font-size: 14px;
+}

data/app/javascript/react/styles/staycard2.scss

@@ -0,0 +1,115 @@
+.stay-card-v5 {
+  
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    transition: transform 0.2s ease-in-out;
+    width: 100%; 
+  
+    &:hover {
+      transform: translateY(-5px);
+    }
+  
+    .slider-wrapper {
+      position: relative;
+    
+  
+      .status-badge {
+        position: absolute;
+        top: 0.75rem;
+        left: 0.75rem;
+        background: rgba(0, 0, 0, 0.5);
+        color: white;
+        padding: 0.25rem 1rem;
+        border-radius: 0.5rem;
+        font-size: 0.85rem;
+      }
+    }
+  
+    .content {
+      &.default {
+        padding: 1rem;
+      }
+  
+      &.small {
+        padding: 0.75rem;
+      }
+  
+      .info {
+        .subtext {
+          font-size: 0.85rem;
+          color: #666;
+        }
+  
+        .title-row {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+  
+          .title {
+            font-size: 1rem;
+            font-weight: 600;
+            text-transform: capitalize;
+          }
+        }
+  
+        .location {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          color: #666;
+  
+          .icon {
+            width: 1.25rem;
+            height: 1.25rem;
+          }
+        }
+      }
+  
+      .separator {
+        width: 3.5rem;
+        border-bottom: 1px solid #eee;
+        margin: 0.5rem 0;
+      }
+  
+      .price-review {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+  
+        .price {
+          font-weight: 600;
+        }
+  
+        .per-month {
+          font-size: 0.85rem;
+          color: #888;
+          font-weight: 400;
+          margin-left: 0.25rem;
+        }
+      }
+  
+      .meta {
+        font-size: 0.85rem;
+        color: #666;
+  
+        strong {
+          color: #fb923c;
+        }
+      }
+  
+      .action-buttons {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        margin-top: 1.5rem;
+  
+        .icon {
+          width: 1.25rem;
+          height: 1.25rem;
+        }
+      }
+    }
+  }
+  

data/app/javascript/react/styles/testimonial.scss

@@ -0,0 +1,216 @@
+
+.testimonial-section {
+  background-color: #f8f9fa;
+  padding-top: 90px;
+  padding-bottom:90px;
+  text-align: center;
+  overflow: hidden;
+  width: 100%;
+  
+  .testimonial-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 15px;
+    
+    h2 {
+      font-size: 2.4rem;
+      font-weight: 700;
+      color: #333;
+      margin-bottom: 15px;
+      position: relative;
+      display: inline-block;
+      
+    }
+    
+    .subtitle {
+      font-size: 16px;
+      color: #777;
+      max-width: 800px;
+      margin: 0 auto 50px;
+    }
+  }
+  
+  .testimonial-slider {
+    margin: 0 auto 30px;
+    position: relative;
+    
+    .slick-list {
+      overflow: hidden;
+      margin: 0 -15px;
+    }
+    
+    .slick-track {
+      display: flex;
+      align-items: stretch;
+    }
+    
+    .slick-slide{
+      height: auto;
+      margin: 0 15px;
+      float: left;
+      min-height: 1px;
+      display: flex !important;
+      justify-content: center;
+      align-items: center;
+      
+      & > div {
+        width: 100%;
+        display: flex;
+        height: 100%;
+      }
+    }
+    .slick-slide[aria-hidden="true"] {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    
+    .slick-dots {
+      position: absolute;
+      bottom: -30px;
+      list-style: none;
+      display: flex !important;
+      justify-content: center;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      
+      li {
+        margin: 0 5px;
+        padding: 0;
+        
+        &.slick-active .custom-dot {
+          background-color: #ffc107;
+        }
+      }
+      
+      .custom-dot {
+        width: 13px;
+        height: 13px;
+        background-color: #ccc;
+        display: block;
+        cursor: pointer;
+      }
+    }
+    
+    .custom-prev-arrow,
+    .custom-next-arrow {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 1;
+      width: 40px;
+      height: 40px;
+      background-color: rgba(255, 255, 255, 0.8);
+      color: #ffc107;
+      border: none;
+      border-radius: 50%;
+      font-size: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      
+      &:hover {
+        background-color: #ffc107;
+        color: white;
+      }
+    }
+    
+    .custom-prev-arrow {
+      left: -20px;
+    }
+    
+    .custom-next-arrow {
+      right: -20px;
+    }
+  }
+  
+  .testimonial-card {
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 12px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+    margin: 40px auto;
+    text-align: left;
+    justify-content: center;
+    gap: 24px;
+    flex-wrap: wrap;
+    max-width: 1000px;
+    flex: 0 0 100%; 
+    
+    .client-image {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      overflow: hidden;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+      border: 3px solid #fff;
+      position: relative;
+      order: 1;
+      
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .testimonial-content{
+      width: 100%;
+      max-width: 400px;
+      text-align: left;
+      order: 2;
+    }
+    
+    .client-quote {
+      font-size: 16px;
+      line-height: 1.6;
+      color: #666;
+      margin-top: 20px;
+      margin-bottom: 20px;
+      font-style: italic;
+    }
+
+    .client-name {
+      text-align: left;
+      width: 100%;
+      color: #333;
+      font-size: 18px;
+      font-weight: 700;
+    }
+    
+    .client-rating {
+      margin-bottom: 5px;
+      display: flex;
+      justify-content: flex-start;
+      
+      .star {
+        color: #ffc107;
+        font-size: 18px;
+        margin: 0 2px;
+      }
+    }
+  }
+}
+
+
+@media (max-width: 768px) {
+  .testimonial-card {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    .client-image {
+      order: 1;
+    }
+    .testimonial-content {
+      order: 2;
+      text-align: center;
+    }
+  }
+}
+

data/app/javascript/react/styles/unauthorized.scss

@@ -0,0 +1,22 @@
+// pages/Unauthorized.scss
+
+.unauthorized {
+    padding: 2rem;
+    text-align: center;
+    margin-top: 12rem;
+    margin-bottom:12rem;
+
+  
+    &__title {
+      font-size: 2rem;
+      font-weight: bold;
+      margin-bottom: 1rem;
+      color: #e74c3c;
+    }
+  
+    &__message {
+      font-size: 1rem;
+      color: #555;
+    }
+  }
+  

data/app/javascript/react/styles/variables.scss

@@ -0,0 +1,3 @@
+
+// Variables
+$primary-color: #db7c0b;

data/app/javascript/react/styles/wrapper.scss

@@ -0,0 +1,4 @@
+.wrapper{
+    margin-left:40px;
+    margin-right:40px;
+}

data/app/javascript/react/utils/formSchema.js

@@ -0,0 +1,120 @@
+import * as Yup from "yup";
+
+export const loginSchema = Yup.object().shape({
+  email: Yup.string().email("Invalid email").required("Email is required"),
+  password: Yup.string().min(6, "Password must be at least 6 characters").required("Password is required"),
+});
+
+export const signupSchema = Yup.object().shape({
+  first_name: Yup.string()
+    .matches(
+      /^(?!.*\s{2})[A-Za-z]+(?: [A-Za-z]+)*$/,
+      "First name must contain only letters."
+    )
+    .required("First name is required"),
+  last_name: Yup.string()
+    .matches(
+      /^(?!.*\s{2})[A-Za-z]+(?: [A-Za-z]+)*$/,
+      "First name must contain only letters."
+    )
+    .required("Last name is required"),
+  email: Yup.string()
+    .email("Invalid email address")
+    .matches(
+      /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+      "Email must have a valid domain"
+    )
+    .required("Email is required"),
+    password: Yup.string()
+    .min(6, "Password is too short")
+    .matches(
+      /^(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])/,
+      "Password must contain at least one uppercase letter, one number, and one special character"
+    )
+    .required("Password is required"),
+});
+
+
+export const UpdateUser = Yup.object().shape({
+  first_name: Yup.string()
+    .matches(
+      /^(?!.*\s{2})[A-Za-z]+(?: [A-Za-z]+)*$/,
+      "First name must contain only letters."
+    )
+    .required("First name is required"),
+  last_name: Yup.string()
+    .matches(
+      /^(?!.*\s{2})[A-Za-z]+(?: [A-Za-z]+)*$/,
+      "First name must contain only letters."
+    )
+    .required("Last name is required"),
+  email: Yup.string()
+    .email("Invalid email address")
+    .matches(
+      /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+      "Email must have a valid domain"
+    )
+    .required("Email is required"),
+  date_of_birth: Yup.date()
+    // .max(new Date(Date.now() - 86400000), "Date of birth invalid")
+    .required("Date of birth is required"),
+  phone: Yup.string()
+    .matches(/^\+?[0-9]{1,4}[^\s]+$/, "Phone number must not be empty.")
+    .required("Phone number is required"),
+  about_me: Yup.string()
+    .required("About me is required")
+    .test("min-chars", "Must be at least 100 characters.", function (value) {
+      const charCount = value ? value.trim().length : 0;
+      return charCount >= 100;
+    })
+    .test("max-words", "Must be at most 150 words.", function (value) {
+      const wordCount = value ? value.trim().split(/\s+/).length : 0;
+      return wordCount <= 50;
+    }),
+
+  country: Yup.string()
+    .matches(
+      /^(?! )[^\s]*(?<! )$/,
+      "Country ID must not start or end with whitespace and may contain spaces between characters"
+    )
+    .required("Identification number is required"),
+ 
+});
+
+export const passwordSchema = Yup.object({
+  new_password: Yup.string()
+    .min(8, "Password must be at least 8 characters long")
+    .matches(
+      /^(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])/,
+      "Password must contain at least one uppercase letter, one number, and one special character"
+    )
+    .required("New password is required"),
+  confirm_password: Yup.string()
+    .oneOf([Yup.ref("new_password"), undefined], "Passwords must match")
+    .required("Confirm password is required"),
+});
+
+export const descriptionSchema = Yup.object({
+      title: Yup.string().required("Title is required"),
+      property_category: Yup.string().required("Property category is required"),
+      property_type: Yup.string().required("Property type is required"),
+      country: Yup.string().required("Country is required"),
+      city: Yup.string().required("City is required"),
+      address: Yup.string().required("Address is required"),
+      description: Yup.string().required("Description is required"),
+    });
+
+export const emailValidationSchema = Yup.object({
+  email: Yup.string()
+    .email("Invalid email address")
+    .required("Email is required"),
+});
+
+export const editValidationSchema= Yup.object({
+  password: Yup.string()
+  .min(6, "Password must be at least 6 characters")
+  .required("Password is required"),
+confirmPassword: Yup.string()
+  .oneOf([Yup.ref("password")], "Passwords must match")
+  .required("Confirm password is required"),
+})

data/app/javascript/react/utils/helpers/APIHelper.jsx

@@ -0,0 +1,55 @@
+import axios from "axios";
+import ErrorHandler from "./ErrorHandler";
+import { logout } from "../../redux/slices/AuthSlice/AuthSlice";
+import { API_BASE_URL } from "../../Api/apiConstants";
+
+const API = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+API.interceptors.request.use(
+  async (config) => {
+    const token = localStorage.getItem("authToken"); // Fetch token from localStorage
+    if (token) {
+      config.headers["Authorization"] = `Bearer ${token}`; // Set the Authorization header
+    }
+    if (config.data instanceof FormData) {
+      config.headers["Content-Type"] = "multipart/form-data"; // Set the content type for file uploads
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor to handle errors globally
+API.interceptors.response.use(
+  (response) => response.data, // Return response data directly
+  (error) => {
+    const statusCode = error.response?.status;
+    if (statusCode === 401 || statusCode === 403) {
+      // Handle unauthorized or forbidden (e.g., invalid or expired token)
+      ErrorHandler("Unauthorized Error!");
+
+      const preserveKey = "theme"; // The key you want to preserve
+      const preserveValue = localStorage.getItem(preserveKey); // Store the value of the key
+      if (preserveValue) {
+        localStorage.setItem(preserveKey, preserveValue);
+      }
+
+      setTimeout(() => {
+        import("../../redux/store").then(({ store }) => {
+          store.dispatch(logout()); // Dynamically import store
+          window.location.href = "/login";
+        });
+      }, 2000);
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default API;

data/app/javascript/react/utils/helpers/ErrorHandler.js

@@ -0,0 +1,21 @@
+import { toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+// Custom Error Handler for Axios and general errors
+export default function errorHandler(error) {
+  const response = error?.response;
+
+  if (response) {
+    if (response.status !== 404) {
+      toast.error(response.data?.error || response.data?.message || "An error occurred.", {
+        position: "top-right",
+        autoClose: 5000,
+      });
+    }
+  } else {
+    toast.error("Internal server error", {
+      position: "top-right",
+      autoClose: 5000,
+    });
+  }
+}

data/app/javascript/react/utils/helpers/InfoHandler.js

@@ -0,0 +1,15 @@
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+// Custom Info Handler
+export default function InfoHandler(message, autoClose = 5000) {
+  toast.info(message, {
+    position: 'top-right',
+    autoClose: autoClose, // Default auto close time is 5000 ms, can be customized
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    progress: undefined,
+  });
+}

data/app/javascript/react/utils/helpers/SuccessHandler.js

@@ -0,0 +1,12 @@
+import { toast } from "react-toastify";
+
+export default function successHandler(message, autoClose = 5000) {
+  toast.success(message, {
+    position: "top-right",
+    autoClose,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+  });
+}

data/app/javascript/react/utils/helpers/isInViewPortIntersectionObserver.jsx

@@ -0,0 +1,39 @@
+/**
+ * @param {Object} params
+ * @param {() => void} params.callback - Function to call when element is in view
+ * @param {HTMLElement|null} params.target - DOM element to observe
+ * @param {IntersectionObserverInit} [params.options] - Intersection observer options
+ * @param {boolean} params.freezeOnceVisible - Whether to stop observing after visible
+ */
+const checkInViewIntersectionObserver = ({
+    target,
+    options = { root: null, rootMargin: `0%`, threshold: 0 },
+    callback,
+    freezeOnceVisible = false,
+  }) => {
+    const _funCallback = (entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          callback();
+          if (freezeOnceVisible) {
+            observer.unobserve(entry.target);
+          }
+        }
+      });
+    };
+  
+    if (typeof window.IntersectionObserver === "undefined") {
+      console.error(
+        "window.IntersectionObserver === undefined! => Your Browser is Not supported"
+      );
+      return;
+    }
+  
+    const observer = new IntersectionObserver(_funCallback, options);
+    if (target) {
+      observer.observe(target);
+    }
+  };
+  
+  export default checkInViewIntersectionObserver;
+