Staging

amp-client/src/Axios/axios.js

@@ -1,16 +1,16 @@
 import axios from "axios";
 
-const axiosBaseUrl = axios.create({
+const axiosInstance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL + '/api/v1',
   headers: { "Content-Type": "application/json" },
 });
 
-axiosBaseUrl.interceptors.request.use((config) => {
+axiosInstance.interceptors.request.use((config) => {
   const token = localStorage.getItem("Token");
   if (token) {
     config.headers.Authorization = `Bearer ${token}`;
   }
   return config;
 });
 
-export default axiosBaseUrl;
+export default axiosInstance;

amp-client/src/Components/ClientComponents/ClientNavbar/ClientNavbar.jsx

@@ -2,7 +2,7 @@ import "./styles.css";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import logo from "../../../assets/logo.png";
-import axiosBaseUrl from "../../../Axios/axios";
+import axiosInstance from "../../../Axios/axios";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faUserCircle,

amp-client/src/Components/CommonComponents/InputField/InputField.jsx

@@ -1,25 +1,91 @@
-import './styles.css'
+import "./styles.css";
 
-const InputField = ({ label, placeholder, value, onChange, width, textarea, type }) => {
+const InputField = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  width,
+  textarea,
+  type,
+  required = true,
+}) => {
   return (
-    <div className="input-field-container" style={{ width: width || '100%' }}>
-      <label className="subtitle black-color">{label}*</label>
+    <div className="input-field-container" style={{ width: width || "100%" }}>
+      <label className="subtitle black-color">
+        {label}
+        {required ? <span>*</span> : null}
+      </label>
       {textarea ? (
         <textarea
           placeholder={placeholder}
           value={value}
           onChange={onChange}
+          required={required}
         />
       ) : (
         <input
-          type={type?type:"text"}
+          type={type || "text"}
           placeholder={placeholder}
           value={value}
           onChange={onChange}
+          required={required}
         />
       )}
     </div>
   );
-}
+};
 
-export default InputField
+// V2
+// const InputField = ({
+//   label,
+//   placeholder,
+//   value,
+//   onChange,
+//   width,
+//   textarea,
+//   type,
+//   required = true,
+// }) => {
+//   return (
+//     <div className="input-field-container" style={{ width: width || "100%" }}>
+//       <label className="subtitle black-color">
+//         {label} {required && <span>*</span>}
+//       </label>
+//       {textarea ? (
+//         <textarea placeholder={placeholder} value={value} onChange={onChange} />
+//       ) : (
+//         <input
+//           type={type || "text"}
+//           placeholder={placeholder}
+//           value={value}
+//           onChange={onChange}
+//         />
+//       )}
+//     </div>
+//   );
+// };
+
+// const InputField = ({ label, placeholder, value, onChange, width, textarea, type }) => {
+//   return (
+//     <div className="input-field-container" style={{ width: width || '100%' }}>
+//       <label className="subtitle black-color">{label}*</label>
+//       {textarea ? (
+//         <textarea
+//           placeholder={placeholder}
+//           value={value}
+//           onChange={onChange}
+//         />
+//       ) : (
+//         <input
+//           type={type?type:"text"}
+//           placeholder={placeholder}
+//           value={value}
+//           onChange={onChange}
+//         />
+//       )}
+//     </div>
+//   );
+// }
+
+export default InputField;

amp-client/src/Components/CommonComponents/LogoutButton/LogoutButton.jsx

@@ -1,5 +1,4 @@
 import "./styles.css";
-import axiosBaseUrl from "../../../Axios/axios";
 import { useLogout } from "../../../Hooks/useLogoutHook";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons";

amp-client/src/Components/LandingPageComponents/ContactUs/ContactUsSection.jsx

@@ -1,9 +1,68 @@
 import "./styles.css";
+import { useState } from "react";
+import { toast } from "react-toastify";
 import contactUs from "../../../assets/contact-us.png";
 import InputField from "../../CommonComponents/InputField/InputField";
 import ActionButton from "../../CommonComponents/ActionButton/ActionButton";
+import sendContactMessage from "../Services/ContactUsService/ContactUsService";
 
 const ContactUsSection = ({ id }) => {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    phone_number: "",
+    message: "",
+  });
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleInputChange = (field) => (e) => {
+    setFormData((prevData) => ({
+      ...prevData,
+      [field]: e.target.value,
+    }));
+  };
+
+  const handleSubmit = async () => {
+    if (!formData.name || !formData.email || !formData.phone_number) {
+      toast.error("Please fill all required fields");
+      return;
+    }
+
+    // Email validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(formData.email)) {
+      toast.error("Please enter a valid email address");
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const result = await sendContactMessage(formData);
+
+      if (result.success) {
+        toast.success("Message sent successfully! We'll get back to you soon.");
+
+        // Reset form
+        setFormData({
+          name: "",
+          email: "",
+          phone_number: "",
+          message: "",
+        });
+      } else {
+        toast.error(
+          result.error || "Failed to send message. Please try again."
+        );
+      }
+    } catch (error) {
+      toast.error("An unexpected error occurred. Please try again later.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   return (
     <div id={id}>
       <div className="section-center">
@@ -17,12 +76,48 @@ const ContactUsSection = ({ id }) => {
           <img src={contactUs} alt="Contact Us" className="contact-image" />
         </div>
         <div className="contact-form">
-          <h2 className="section-titles primary-color section-center">Contact Us</h2>
-          <InputField label="Full Name" placeholder="Full Name" width="80%" />
-          <InputField label="Email" placeholder="Email" width="80%" />
-          <InputField label="Phone Number" placeholder="Phone Number" width="80%" />
-          <InputField label="Message" placeholder="Message" textarea width="80%" />
-          <ActionButton backgroundColor="#233a7e" color="white" text="Submit" width="60%" />
+          <h2 className="section-titles primary-color section-center less-margin">
+            Contact Us
+          </h2>
+
+          <InputField
+            label="Full Name"
+            placeholder="Full Name"
+            width="80%"
+            value={formData.name}
+            onChange={handleInputChange("name")}
+          />
+          <InputField
+            label="Email"
+            placeholder="Email"
+            width="80%"
+            type="email"
+            value={formData.email}
+            onChange={handleInputChange("email")}
+          />
+          <InputField
+            label="Phone Number"
+            placeholder="Phone Number"
+            width="80%"
+            value={formData.phone_number}
+            onChange={handleInputChange("phone_number")}
+          />
+          <InputField
+            label="Message"
+            placeholder="Message (Optional)"
+            textarea
+            width="80%"
+            value={formData.message}
+            onChange={handleInputChange("message")}
+            required={false}
+          />
+          <ActionButton
+            backgroundColor="#233a7e"
+            color="white"
+            text={isSubmitting ? "Submitting..." : "Submit"}
+            width="60%"
+            onClick={handleSubmit}
+          />
         </div>
       </section>
     </div>

amp-client/src/Components/LandingPageComponents/ContactUs/styles.css

@@ -1,7 +1,11 @@
 /* ContactUsSection.css */
 .section-center {
   text-align: center;
-  padding: 30px;
+  padding-top: 30px;
+}
+
+.less-margin {
+  margin-bottom: 0px;
 }
 
 .contact-us-section {

amp-client/src/Components/LandingPageComponents/LoginForm/LoginForm.jsx

@@ -1,52 +1,20 @@
 import "./styles.css";
 import { useState } from "react";
-import { toast } from "react-toastify";
-import { useNavigate } from "react-router-dom";
-import axiosBaseUrl from "../../../Axios/axios";
-import { useDispatch, useSelector } from "react-redux";
-import { storeData } from "../../../Redux/Slices/UserSlice";
+import { useSelector } from "react-redux";
 import InputField from "../../CommonComponents/InputField/InputField";
 import ActionButton from "../../CommonComponents/ActionButton/ActionButton";
-import { toggleLoad } from "../../../Redux/Slices/loadingSlice";
+import useLoginFormService from "../Services/LoginFormService/LoginFormService";
 
 const LoginForm = ({ onClose }) => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
+  const { handleLogin } = useLoginFormService();
   const loading = useSelector((state) => state.loading.loadingState);
 
-  const dispatch = useDispatch();
-
-  const navigate = useNavigate();
-
-  const handleLogin = async (e) => {
+  const onSubmit = (e) => {
     e.preventDefault();
-
-    try {
-      dispatch(toggleLoad(true));
-
-      const response = await axiosBaseUrl.post("/login", { email, password });
-
-      const userType = response.data.data.user_type;
-
-      localStorage.setItem("Token", response.data.data.token);
-      dispatch(storeData(response.data.data));
-
-      if (userType === "Client") {
-        toast.success("Hello Client");
-        navigate("/client/dashboard");
-      } else if (userType === "Provider") {
-        toast.success("Hello Provider");
-        navigate("/provider/dashboard");
-      } else if (userType === "Admin") {
-        toast.success("Hello Admin");
-        navigate("/admin/navigation-page");
-      }
-    } catch (error) {
-      toast.error("Login failed. Please try again.");
-    } finally {
-      dispatch(toggleLoad(false));
-    }
+    handleLogin(email, password);
   };
 
   return (
@@ -79,13 +47,13 @@ const LoginForm = ({ onClose }) => {
                 width="70%"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-              />              
+              />
               <ActionButton
                 backgroundColor="#F9A43A"
                 color="#233A7E"
                 text={<h3>Login</h3>}
                 width="70%"
-                onClick={handleLogin}
+                onClick={onSubmit}
                 margin="5px"
               />
             </>

amp-client/src/Components/LandingPageComponents/Services/ContactUsService/ContactUsService.js

@@ -0,0 +1,21 @@
+// ContactUsService.js
+import axiosInstance from "../../../../Axios/axios";
+
+const sendContactMessage = async (contactData) => {
+  try {
+    const response = await axiosInstance.post("/insertMessage", contactData);
+    return {
+      success: true,
+      data: response.data,
+    };
+  } catch (error) {
+    console.error("Error sending contact message:", error);
+    return {
+      success: false,
+      error: error.response?.data?.message || "Failed to send message",
+    };
+  }
+};
+
+export default sendContactMessage;
+