components/services/services.js

@@ -0,0 +1,61 @@
+import axios from "axios"
+
+
+axios.interceptors.request.use(
+    config => {
+        config.headers = {
+            Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+            // "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
+            // "Access-Control-Allow-Headers": "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
+            // "Content-Type": "application/json;charset=UTF-8",
+            // 'Authorization': (localStorage && localStorage.getItem('access_token')) ? `Bearer ${localStorage.getItem('access_token')}` : '',
+          };
+    // config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
+    // config.baseURL = process.env.REACT_APP_MAIN_API
+        return config;
+    },
+    error => {
+        return Promise.reject(error);
+    }
+);
+
+const postAuxEnd = (path, postData, media=false) => {
+    const basePath = media ? 'https://blogdata.chiefsoft.net' : 'https://blogdata.chiefsoft.net'
+    let newPostData = {}
+    if(!media){
+        newPostData = {...postData}
+    }else{
+        newPostData = new FormData();
+        for (let data in postData) {
+        newPostData.append(data, postData[data]);
+        }
+    }
+    return axios.post(`${basePath}${path}`, newPostData).then(res => {
+        return res
+    }).catch(err => {
+        // throw new Error(err.response.data.error_message);
+        throw new Error(err);
+    })
+}
+
+const getAuxEnd = (path, reqData= null) => {
+    const basePath = 'https://blogdata.chiefsoft.net'
+    return axios.get(`${basePath}${path}`,{ params: reqData }).then(res => {
+        return res
+        // localStorage.clear();
+        // window.location.href = `/login?sessionExpired=true`;
+    }).catch(err => {
+        throw new Error(err);
+        // throw new Error(err.response.data.message);
+        // return err
+    })
+}
+
+// FUNCTION TO GET MERMS BLOGS
+export const getMermsBlogs = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return getAuxEnd('/mermsblogdata/mermsemr', postData, false)
+}

package.json

@@ -12,8 +12,10 @@
     },
     "dependencies": {
         "@tanstack/react-query": "^5.62.16",
+        "axios": "^1.13.2",
         "eslint": "8.41.0",
         "eslint-config-next": "13.4.3",
+        "formik": "^2.4.9",
         "next": "^13.5.8",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -21,6 +23,7 @@
         "sass": "^1.62.1",
         "server-only": "^0.0.1",
         "swiper": "^10.0.4",
-        "wowjs": "^1.1.3"
+        "wowjs": "^1.1.3",
+        "yup": "^1.7.1"
     }
 }

pages/contacts.js

@@ -1,7 +1,49 @@
+import { useMutation } from '@tanstack/react-query';
 import Layout from "../components/layout/Layout"
 import Link from "next/link"
+import { Form, Formik } from 'formik';
+import * as Yup from "yup";
 export default function Home() {
 
+    const validationSchema = Yup.object().shape({
+        subject: Yup.string().required("Required"),
+        name: Yup.string().required("Required"),
+        email: Yup.string().required("Required"),
+        message: Yup.string().required("Required"),
+    })
+
+    const initialValues = {
+        subject: '',
+        name: '',
+        email: '',
+        message: ''
+    };
+
+    const contactMutation = useMutation({
+        mutationFn: (fields) => {
+            return null //completePWDReset(fields)
+        },
+        onSuccess: (res) => {
+            if(res?.data?.resultCode != '0'){
+                throw({message: res?.data?.resultDescription})
+            }
+        },
+        // onError: (err) => {
+        //     console.log('err', err)
+        // }
+  })
+  
+  const handleContactMutation = (values) => {
+    let reqData = {
+        ...values
+    }
+    console.log(reqData)
+    setTimeout(()=>{
+        contactMutation.reset()
+    },3000)
+    // contactMutation.mutate(reqData)
+  }
+
     return (
         <>
             <Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
@@ -25,39 +67,52 @@ export default function Home() {
                             <div className="row justify-content-center">
                                 <div className="col-md-11 col-lg-10 col-xl-8">
                                     <div className="form-holder">
-                                        <form name="contactform" className="row contact-form">
+                                        <Formik
+                                            initialValues={initialValues}
+                                            validationSchema={validationSchema}
+                                            onSubmit={handleContactMutation}
+                                        >
+                                            {(props) => {
+                                            return (
+                                                <Form name="contactform" className="row contact-form">
                                                     {/* Form Select */}
                                                     <div className="col-md-12 input-subject">
-                                                <p className="p-lg">This question is about: </p>
+                                                        <p className="p-lg">This question is about:{(props.errors.subject && props.touched.subject) && <span style={{display: 'inline'}} className='text-danger'>{props.errors.subject}</span>}</p>
                                                         <span>Choose a topic, so we know who to send your request to: </span>
-                                                <select className="form-select subject" aria-label="Default select example">
+                                                        <select name='subject' onChange={props.handleChange} className="form-select subject" aria-label="Default select example">
-                                                    <option>This question is about...</option>
+                                                            <option value=''>This question is about...</option>
-                                                    <option>Registering/Authorising</option>
+                                                            <option value='registering/authorising'>Registering/Authorising</option>
-                                                    <option>Using Application</option>
+                                                            <option value='using application'>Using Application</option>
-                                                    <option>Troubleshooting</option>
+                                                            <option value='troubleshooting'>Troubleshooting</option>
-                                                    <option>Backup/Restore</option>
+                                                            <option value='backup/restore'>Backup/Restore</option>
-                                                    <option>Other</option>
+                                                            <option value='others'>Other</option>
                                                         </select>
                                                     </div>
                                                     {/* Contact Form Input */}
                                                     <div className="col-md-12">
-                                                <p className="p-lg">Your Name: </p>
+                                                        <p className="p-lg">Your Name:{(props.errors.name && props.touched.name) && <span style={{display: 'inline'}} className='text-danger'>{props.errors.name}</span>}</p>
                                                         <span>Please enter your real name: </span>
-                                                <input type="text" name="name" className="form-control name" placeholder="Your Name*" />
+                                                        <input type="text" onChange={props.handleChange} name="name" className="form-control name" placeholder="Your Name*" />
                                                     </div>
                                                     <div className="col-md-12">
-                                                <p className="p-lg">Your Email Address: </p>
+                                                        <p className="p-lg">Your Email Address:{(props.errors.email && props.touched.email) && <span style={{display: 'inline'}} className='text-danger'>{props.errors.email}</span>}</p>
                                                         <span>Please carefully check your email address for accuracy</span>
-                                                <input type="text" name="email" className="form-control email" placeholder="Email Address*" />
+                                                        <input type="text" onChange={props.handleChange} name="email" className="form-control email" placeholder="Email Address*" />
                                                     </div>
                                                     <div className="col-md-12">
-                                                <p className="p-lg">Explain your question in details: </p>
+                                                        <p className="p-lg">Explain your question in details:{(props.errors.message && props.touched.message) && <span style={{display: 'inline'}} className='text-danger'>{props.errors.message}</span>}</p>
                                                         <span>Your OS version, MERMS version &amp; build, steps you did. Be VERY precise!</span>
-                                                <textarea className="form-control message" name="message" rows={6} placeholder="I have a problem with..." />
+                                                        <textarea onChange={props.handleChange} className="form-control message" name="message" rows={6} placeholder="I have a problem with..." />
                                                     </div>
                                                     {/* Contact Form Button */}
                                                     <div className="col-md-12 mt-15 form-btn text-right">
-                                                <button type="submit" className="btn btn--theme hover--theme submit">Submit Request</button>
+                                                        <button 
+                                                            type="submit" 
+                                                            className="btn btn--theme hover--theme submit"
+                                                            disabled={contactMutation.isPending || contactMutation.isSuccess}
+                                                        >
+                                                           {contactMutation.isPending ? 'Sending' : contactMutation.isSuccess ? 'Message Sent' : 'Submit Request'}
+                                                        </button>
                                                     </div>
                                                     <div className="contact-form-notice">
                                                         <p className="p-sm">We are committed to your privacy. MERMS uses the information you
@@ -70,7 +125,10 @@ export default function Home() {
                                                     <div className="col-lg-12 contact-form-msg">
                                                         <span className="loading" />
                                                     </div>
-                                        </form>
+                                                </Form>
+                                            );
+                                            }}
+                                        </Formik>
                                     </div>
                                 </div>
                             </div>	   {/* END CONTACT FORM */}

pages/merms-blog.js

@@ -5,11 +5,14 @@ import Layout from "../components/layout/Layout"
 import Link from "next/link"
 import queryKeys from "../components/queryclientProvider/queryKeys";
 import MermsBlogFix from "../components/sections/MermsBlogFix";
+import { getMermsBlogs } from "../components/services/services";
 
 export default  function Home() {
 
     const {data, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.blog,
+        // queryFn: () => getMermsBlogs(),
+        staleTime: 0,
         queryFn: async () => {
             try {
                 const blog_url = 'https://blogdata.chiefsoft.net/mermsblogdata/mermsemr';