stay_commerce-frontend 0.1.0

data/app/javascript/react/redux/slices/PropertySlice/Searchslice.jsx

@@ -0,0 +1,36 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { searchProperties } from "./PropertySlice";
+
+const initialState = {
+  searchResults: [],
+  startDate: null,
+  endDate: null,
+  totalGuests: 1,
+};
+
+const searchSlice = createSlice({
+  name: "search",
+  initialState,
+  reducers: {
+    clearSearchResults: (state) => {
+      state.searchResults = [];
+      state.startDate = null;
+      state.endDate = null;
+      state.totalGuests = 1;
+    },
+    setSearchMeta: (state, action) => {
+      const { startDate, endDate, totalGuests } = action.payload;
+      state.startDate = startDate;
+      state.endDate = endDate;
+      state.totalGuests = totalGuests;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(searchProperties.fulfilled, (state, action) => {
+      state.searchResults = action.payload.data || [];
+    });
+  },
+});
+
+export const { clearSearchResults, setSearchMeta } = searchSlice.actions;
+export default searchSlice.reducer;

data/app/javascript/react/redux/slices/UserSlice/UserSlice.jsx

@@ -0,0 +1,215 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+import { ENDPOINTS } from "../../../Api/apiConstants";
+import ErrorHandler from "../../../utils/helpers/ErrorHandler";
+export const getCurrentUser = createAsyncThunk(
+  "user/getCurrentUser",
+  async (_, { rejectWithValue }) => {
+    try {
+      const token = localStorage.getItem("authToken");
+      if (!token) throw new Error("No token found");
+
+      const response = await axios.get(ENDPOINTS?.USER_INFO, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      return response?.data;
+    } catch (error) {
+      ErrorHandler?.(error);
+      return rejectWithValue(error?.response?.data || "Failed to fetch user");
+    }
+  }
+);
+
+// Update User Profile
+export const updateUser = createAsyncThunk(
+  "user/updateUser",
+  async (updatedData, { rejectWithValue }) => {
+    try {
+      const token = localStorage.getItem("authToken");
+      if (!token) throw new Error("No token found");
+
+      const response = await axios.patch(
+        ENDPOINTS?.USER_UPDATE?.(updatedData?.profile?.id),
+        updatedData?.profile,
+        {
+          headers: { Authorization: `Bearer ${token}` },
+        }
+      );
+
+      return response?.data;
+    } catch (error) {
+      ErrorHandler?.(error);
+      return rejectWithValue(
+        error?.response?.data || "Failed to update profile"
+      );
+    }
+  }
+);
+
+export const updateProfileImage = createAsyncThunk(
+  "user/updateProfileImage",
+  async ({ userId, file }, { rejectWithValue }) => {
+    try {
+      const token = localStorage.getItem("authToken");
+      if (!token) throw new Error("No token found");
+
+      const formData = new FormData();
+      formData.append("profile[profile_image]", file);
+
+      const response = await axios.patch(
+        ENDPOINTS?.USER_UPDATE?.(userId),
+        formData,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+            "Content-Type": "multipart/form-data",
+          },
+        }
+      );
+
+      return response?.data;
+    } catch (error) {
+      ErrorHandler?.(error);
+      return rejectWithValue(
+        error?.response?.data || "Failed to update profile image"
+      );
+    }
+  }
+);
+
+export const forgetPassword = createAsyncThunk(
+  "user/forgetPassword",
+  async (payload, { rejectWithValue }) => {
+    try {
+      const response = await axios.post(ENDPOINTS?.EDIT_PASSWORD, payload, {
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+      });
+      return response?.data;
+    } catch (error) {
+      ErrorHandler?.(error);
+      return rejectWithValue(
+        error?.response?.data || "Failed to update password"
+      );
+    }
+  }
+);
+
+export const createNewPassword = createAsyncThunk(
+  "user/createNewPassword",
+  async ({ token, payload }, { rejectWithValue }) => {
+    try {
+      const response = await axios.patch(
+        `${ENDPOINTS?.EDIT_PASSWORD}?reset_password_token=${token}`,
+        payload,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+          },
+        }
+      );
+      return response?.data;
+    } catch (error) {
+      ErrorHandler?.(error);
+      return rejectWithValue(
+        error?.response?.data || "Failed to reset password"
+      );
+    }
+  }
+);
+
+
+const handlePending = (state) => {
+  state.loading = true;
+  state.error = null;
+};
+
+const handleRejected = (state, action) => {
+  state.loading = false;
+  state.error = action.payload;
+};
+
+const handleUpdatePending = (state) => {
+  state.updateLoading = true;
+  state.updateError = null;
+};
+
+const handleUpdateRejected = (state, action) => {
+  state.updateLoading = false;
+  state.updateError = action.payload;
+};
+
+const userSlice = createSlice({
+  name: "user",
+  initialState: {
+    data: JSON.parse(localStorage.getItem("user")) || null,
+    loading: false,
+    error: null,
+    updateLoading: false,
+    updateError: null,
+  },
+  reducers: {
+    logout: (state) => {
+      state.data = null;
+      localStorage.removeItem("authToken");
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      // Get current user
+      .addCase(getCurrentUser.pending, handlePending)
+      .addCase(getCurrentUser.fulfilled, (state, action) => {
+        state.loading = false;
+        const userData = action.payload.data;
+        // Store is_host and is_user directly
+        state.data = {
+          ...userData,
+          is_host: userData.is_host,
+          is_user: userData.is_user,
+        };
+        localStorage.setItem("user", JSON.stringify(action.payload.data));
+      })
+      .addCase(getCurrentUser.rejected, handleRejected)
+
+      // Update user
+      .addCase(updateUser.pending, handleUpdatePending)
+      .addCase(updateUser.fulfilled, (state, action) => {
+        state.updateLoading = false;
+        state.data = {
+          ...state.data,
+          ...action.payload.profile,
+        };
+        localStorage.setItem("user", JSON.stringify(state.data));
+      })
+      .addCase(updateUser.rejected, handleUpdateRejected)
+
+      // Update profile image
+      .addCase(updateProfileImage.pending, handleUpdatePending)
+      .addCase(updateProfileImage.fulfilled, (state, action) => {
+        state.updateLoading = false;
+        if (state.data) {
+          state.data.image = action.payload.profile.image;
+          localStorage.setItem("user", JSON.stringify(state.data));
+        }
+      })
+      .addCase(updateProfileImage.rejected, handleUpdateRejected)
+
+      .addCase(forgetPassword.pending, handlePending)
+      .addCase(forgetPassword.fulfilled, (state) => {
+        state.loading = false;
+      })
+      .addCase(forgetPassword.rejected, handleRejected)
+
+      .addCase(createNewPassword.pending, handlePending)
+      .addCase(createNewPassword.fulfilled, (state) => {
+        state.loading = false;
+      })
+      .addCase(createNewPassword.rejected, handleRejected);
+  },
+});
+
+export const { logout } = userSlice.actions;
+export default userSlice.reducer;

data/app/javascript/react/redux/store.js

@@ -0,0 +1,35 @@
+
+
+import { configureStore, combineReducers } from "@reduxjs/toolkit";
+import authReducer from "./slices/AuthSlice/AuthSlice";
+import userReducer from "./slices/UserSlice/UserSlice";
+import propertyReducer from "./slices/PropertySlice/PropertySlice";
+import searchReducer from "./slices/PropertySlice/Searchslice"; 
+
+import storage from "redux-persist/lib/storage";
+import { persistReducer, persistStore } from "redux-persist";
+
+const persistConfig = {
+  key: "root",
+  storage,
+  whitelist: ["auth", "user" ,"property", "search"], 
+};
+
+const rootReducer = combineReducers({
+  auth: authReducer,
+  user: userReducer,
+  property: propertyReducer,
+  search: searchReducer,
+});
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+const store = configureStore({
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({ serializableCheck: false }),
+});
+
+export const persistor = persistStore(store);
+export default store;
+

data/app/javascript/react/shared/Avatar/Avatar.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import "../../styles/avatar.scss";
+
+const Avatar = ({ onClick, sizeClass = "" }) => {
+  const userData = useSelector((state) => state.user.data);
+
+  if (!userData) return null;
+
+  const profileImage = userData.image;
+  const firstLetter = userData.first_name?.charAt(0).toUpperCase() || "?";
+
+  return (
+    <div className={`avatar-container ${sizeClass}`} onClick={onClick}>
+      {profileImage ? (
+        <img
+          src={profileImage}
+          alt="Profile"
+          className="avatar-image"
+          onError={(e) => {
+            e.target.onerror = null;
+            // e.target.src = "/default-avatar.png"; // optional fallback image
+          }}
+        />
+      ) : (
+        <div className="avatar-circle">{firstLetter}</div>
+      )}
+    </div>
+  );
+};
+
+export default Avatar;

data/app/javascript/react/shared/Badge/Badge.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "../../styles/badge.scss"
+
+const Badge = ({ className = "", name, color = "blue", href }) => {
+  const getColorClass = (hasHover = true) => {
+    switch (color) {
+      case "pink":
+      case "red":
+      case "gray":
+      case "green":
+      case "purple":
+      case "indigo":
+      case "yellow":
+      case "blue":
+        return `${color}-badge${hasHover ? " hover" : ""}`;
+      default:
+        return `pink-badge${hasHover ? " hover" : ""}`;
+    }
+  };
+
+  const baseClass = `badge ${className} ${getColorClass(!!href)}`;
+
+  return href ? (
+    <Link to={href} className={baseClass}>
+      {name}
+    </Link>
+  ) : (
+    <span className={baseClass}>{name}</span>
+  );
+};
+
+export default Badge;

data/app/javascript/react/shared/Button/Button.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "../../styles/button.scss";
+
+const Button = ({
+  className = "button-default",
+  disabled = false,
+  href,
+  children,
+  targetBlank,
+  type,
+  loading,
+  onClick = () => {},
+}) => {
+  const renderLoading = () => {
+    return (
+      <svg
+        className="button-loading"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="3"
+        ></circle>
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+    );
+  };
+
+  if (href) {
+    return (
+      <Link
+        to={href}
+        target={targetBlank ? "_blank" : undefined}
+        className={`button ${className}`}
+        onClick={onClick}
+        rel="noopener noreferrer"
+      >
+        {children || "This is Link"}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      disabled={disabled || loading}
+      className={`button ${className}`}
+      onClick={onClick}
+      type={type}
+    >
+      {loading && renderLoading()}
+      {children || "This is Button"}
+    </button>
+  );
+};
+
+export default Button;

data/app/javascript/react/shared/Button/ButtonPrimary.jsx

@@ -0,0 +1,11 @@
+import Button from "./Button";
+import React from "react";
+import "../../styles/buttonprimary.scss"; // Import SCSS for styling
+
+const ButtonPrimary = ({ className = "", ...args }) => {
+  return (
+    <Button className={`btn-primary ${className}`} {...args} />
+  );
+};
+
+export default ButtonPrimary;

data/app/javascript/react/shared/Button/ButtonSelect.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+import Button from "./Button";
+import "../../styles/button.scss";
+
+const ButtonSelect = ({ className = "button-third", ...args }) => {
+  return <Button className={`button-third ${className}`} {...args} />;
+};
+
+export default ButtonSelect;

data/app/javascript/react/shared/Checkbox/Checkbox.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import "../../styles/checkbox.scss";
+
+const CheckboxV2 = ({
+  id,
+  label = "",
+  subLabel = "",
+  name,
+  className = "",
+  onChange,
+  checked,
+}) => {
+  const handleChange = (e) => {
+    const isChecked = e.target.checked;
+    onChange(isChecked, id);
+  };
+
+  return (
+    <div className={`checkbox-wrapper ${className}`}>
+      <input
+        id={String(id) || name}
+        name={name}
+        type="checkbox"
+        className="checkbox-input"
+        checked={checked}
+        onChange={handleChange}
+      />
+      {label && (
+        <label htmlFor={String(id) || name} className="checkbox-label">
+          <span className="checkbox-text">{label}</span>
+          {subLabel && <p className="checkbox-subtext">{subLabel}</p>}
+        </label>
+      )}
+    </div>
+  );
+};
+
+export default CheckboxV2;

data/app/javascript/react/shared/CurrencySymbol.jsx

@@ -0,0 +1,6 @@
+// utils.js
+import getSymbolFromCurrency from 'currency-symbol-map';
+
+export const currencySymbol = () => {
+  return getSymbolFromCurrency('USD');
+};

data/app/javascript/react/shared/DateField/CustomDatePicker.jsx

@@ -0,0 +1,69 @@
+import React from "react";
+import "../../styles/customdatepicker.scss";
+import { DatePickerInput } from "@mantine/dates";
+
+const CustomDatePicker = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  excludeDate,
+}) => {
+  return (
+    <DatePickerInput
+      label={label}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      minDate={minDate}
+      maxDate={maxDate}
+      hideOutsideDates
+      radius="xl"
+      clearable
+      valueFormat="MMM DD, YYYY"
+      excludeDate={excludeDate}
+      style={{ zIndex: 1000 }}
+      renderDay={(date) => {
+        const today = new Date();
+        const isBeforeMinDate = minDate && date < minDate;
+        const isAfterMaxDate = maxDate && date > maxDate;
+        const isExcluded = excludeDate && excludeDate(date);
+
+        const isDisabled =
+          (isBeforeMinDate || isAfterMaxDate || isExcluded) &&
+          !(date.toDateString() === today.toDateString() && !isExcluded);
+
+        return (
+          <div
+            style={{
+              position: "relative",
+              textAlign: "center",
+              fontSize: "14px",
+            }}
+          >
+            {date.getDate()}
+            {isDisabled && (
+              <span
+                style={{
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  fontSize: "8px",
+                  color: "red",
+                  pointerEvents: "none",
+                }}
+              >
+                ❌
+              </span>
+            )}
+          </div>
+        );
+      }}
+    />
+  );
+};
+
+export default CustomDatePicker;

data/app/javascript/react/shared/FooterSection/Footer.jsx

@@ -0,0 +1,75 @@
+import React from "react";
+import "../../styles/footer.scss";
+import "../../styles/wrapper.scss";
+
+const Footer = () => {
+  return (
+    <footer className="footer">
+      <div className="wrapper">
+      <div className="footer__container">
+        {/* About Section */}
+        <div className="footer__section">
+          <h3 className="footer__title">ABOUT AGENCY</h3>
+          <p className="footer__text">
+            The world has become so fast-paced that people don’t want to stand by
+            reading a page of information; they would much rather look at a presentation
+            and understand the message.
+          </p>
+        </div>
+
+        {/* Navigation Links */}
+        <div className="footer__section">
+          <h3 className="footer__title">NAVIGATION LINKS</h3>
+          <ul className="footer__list footer__list--grid">
+            {["Home", "Feature", "Services", "Portfolio", "Team", "Pricing", "Blog", "Contact"].map(
+              (link, index) => (
+                <li key={index} className="footer__list-item">
+                  {link}
+                </li>
+              )
+            )}
+          </ul>
+        </div>
+
+        {/* Newsletter */}
+        <div className="footer__section">
+          <h3 className="footer__title">NEWSLETTER</h3>
+          <p className="footer__text">
+            For business professionals caught between high OEM price and mediocre
+            print and graphic output.
+          </p>
+          {/* <div className="footer__newsletter">
+            <input type="email" placeholder="Email Address" className="footer__input" />
+            <button className="footer__button">📩</button>
+          </div> */}
+        </div>
+
+        {/* InstaFeed */}
+        <div className="footer__section footer__section--instafeed">
+  <h3 className="footer__title">INSTAFEED</h3>
+  <div className="footer__instafeed">
+    {[44, 45, 46, 47, 48, 49, 51, 60 ].map((imgId, index) => (
+      <img
+        key={index}
+        src={`https://randomuser.me/api/portraits/women/${imgId}.jpg`}
+        alt="insta"
+        className="footer__instafeed-img"
+      />
+    ))}
+  </div>
+</div>
+      </div>
+
+      {/* Copyright Section */}
+      <div className="footer__copyright">
+        <br />
+        <p>
+          ©2025 All rights reserved | This StayCommerce is made with ❤️ by <a href="https://www.w3villa.com/">W3villa.com</a>
+        </p>
+      </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;