added subscription endpoint

.env

@@ -2,14 +2,14 @@ SKIP_PREFLIGHT_CHECK=true
 REACT_APP_NODE_ENV="development"
 REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
-REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
-REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
 
 # login footer links
-REACT_APP_HOME_LINK='https://dev-www.mermsemr.com/'
-REACT_APP_ABOUT_LINK='https://dev-www.mermsemr.com/about'
-REACT_APP_CONTACTS_LINK='https://dev-www.mermsemr.com/contacts'
-REACT_APP_TERMS_LINK='https://dev-www.mermsemr.com/terms'
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
 
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000

.env.development

@@ -2,14 +2,15 @@ SKIP_PREFLIGHT_CHECK=true
 REACT_APP_NODE_ENV="development"
 REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
-REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
-REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
 
 # login footer links
-REACT_APP_HOME_LINK='https://dev-www.mermsemr.com/'
-REACT_APP_ABOUT_LINK='https://dev-www.mermsemr.com/about'
-REACT_APP_CONTACTS_LINK='https://dev-www.mermsemr.com/contacts'
-REACT_APP_TERMS_LINK='https://dev-www.mermsemr.com/terms'
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
 
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000
+

.env.production

@@ -3,6 +3,7 @@ REACT_APP_NODE_ENV="production"
 REACT_APP_SOCKET_URL="https://socket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://socket.mermsemr.com"
 
 # login footer links
 REACT_APP_HOME_LINK='https://www.mermsemr.com/'

.env.qa

@@ -0,0 +1,15 @@
+SKIP_PREFLIGHT_CHECK=true
+REACT_APP_NODE_ENV="development"
+REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
+REACT_APP_MAIN_API="https://devapi.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
+
+# login footer links
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
+
+# Inactivity timeout/logout AT 10MINS
+REACT_APP_TIMEOUT=600000

docker-compose.yml

@@ -20,7 +20,7 @@ services:
     extra_hosts:
       - api.mermsemr.com:10.10.33.15
       - devapi.mermsemr.com:10.10.33.15
-      - dev-socket.mermsemr.com:10.10.33.15
+      - devsocket.mermsemr.com:10.10.33.15
       - socket.mermsemr.com:10.10.33.15
       - dev-media.mermsemr.com:10.10.33.15
       - media.mermsemr.com:10.10.33.15

src/App.css

@@ -1,5 +1,5 @@
 .custom-bg {
-  background-image: url('./assets/bg/bg_1.jpg') !important;
+  background-image: url('./assets/bg/bg_2.jpg') !important;
   background-size: cover;
   background-repeat: no-repeat;
 }

src/App.js

@@ -12,7 +12,7 @@ const queryClient = new QueryClient({
       refetchOnWindowFocus: false,
       retry: 3,
       // refetchOnMount: false,
-      staleTime: 360000 // can also be a number in millisecond
+      staleTime: 10*60*1000 // can also be a number in millisecond
     },
   },
 })

src/AppRouters.jsx

@@ -19,6 +19,10 @@ import ProductPage from './views/ProductPage'
 import SocketIOContextProvider from './component/context/SocketIOContext';
 import CSignupPage from './views/CSignupPage';
 import HelpPage from './views/HelpPage';
+import SubscriptionPage from './views/SubscriptionPage';
+import OnboardPage from "./views/OnboardPage";
+import AccPWDResetPage from './views/AccPWDResetPage';
+
 
 function AppRouters() {
   return (
@@ -32,6 +36,7 @@ function AppRouters() {
             <Route path={siteLinks.signup} element={<SignupPage />} />
             <Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
             <Route path={siteLinks.csignup} element={<CSignupPage />} />
+            <Route path={siteLinks.accreset} element={<AccPWDResetPage />} />
             <Route path={siteLinks.error} element={<LoginPage />} />
           </Route>
 
@@ -44,6 +49,8 @@ function AppRouters() {
               <Route path={siteLinks.comments} element={<CommentsPage />} />
               <Route path={siteLinks.contacts} element={<ContactsPage />} />
               <Route path={siteLinks.user} element={<UserPage />} />
+              <Route path={siteLinks.subscription} element={<SubscriptionPage />} />
+              <Route path={siteLinks.onboard} element={<OnboardPage />} />
               <Route path={siteLinks.calendar} element={<CalendarPage />} />
               <Route path={siteLinks.settings} element={<SettingsPage />} />
               <Route path={siteLinks.help} element={<HelpPage />} />

src/component/auth/AccPWDReset.jsx

@@ -0,0 +1,220 @@
+import React, { useEffect, useState } from 'react'
+import { Form, Formik } from "formik";
+import * as Yup from "yup";
+import { useDispatch } from 'react-redux'
+
+import { Link, useNavigate, useParams } from 'react-router-dom'
+import siteLinks from '../../links/siteLinks'
+import { useMutation } from '@tanstack/react-query';
+import { completePWDReset, verifyResetToken } from '../../services/services';
+import { updateUserDetails } from '../../store/UserDetails'
+
+import { IoMdArrowDropdown } from "react-icons/io";
+import getImage from '../../utils/getImage';
+
+const validationSchema = Yup.object().shape({
+      password: Yup.string().required("Password is required"),
+      confirmpassword: Yup.string().required("Confirm Password is required").oneOf([Yup.ref('password')], 'Passwords must match')
+  })
+
+  const initialValues = {
+    password: '',
+    confirmpassword: '',
+  };
+
+export default function AccPWDReset() {
+
+    const {token} = useParams()
+
+    const dispatch = useDispatch()
+
+    const navigate = useNavigate()
+
+    const [user, setUser] = useState(null)
+
+// API to verify email link
+  const verifyLink = useMutation({
+    mutationFn: (fields) => {
+        return verifyResetToken(fields)
+    },
+    onSuccess: (res) => {
+        // console.log('res', res.data)
+        if(res.data.resultCode != '0' || !res?.data?.pending_uid){
+            throw({message: res?.data?.resultDescription})
+        }
+        // setUser({user:'testaccount', ...res.data})
+        setUser(res.data)
+    },
+    // onError: (err) => {
+    //     console.log('err', err)
+    // }
+  })
+
+  const resetPWD = useMutation({
+    mutationFn: (fields) => {
+        return completePWDReset(fields)
+    },
+    onSuccess: (res) => {
+        if(res?.data?.resultCode != '0'){
+            throw({message: res?.data?.resultDescription})
+        }
+        // const {token, room, uid} = res?.data
+        // if(!token || !room){
+        //     throw({message: 'something went wrong, try again!'})
+        // }
+        // localStorage.setItem('token', token)
+        // localStorage.setItem('room', room)
+        // localStorage.setItem('uid', uid)
+        // dispatch(updateUserDetails({ ...res?.data }));
+        // navigate('/dash') // later add redux to dispatch state
+    },
+    // onError: (err) => {
+    //     console.log('err', err)
+    // }
+  })
+  
+  const handleCompletePWDReset = (values) => {
+    let reqData = {
+        reset_token: token,
+        reset_uid: user?.pending_uid,
+        new_password: values.password,
+    }
+    resetPWD.mutate(reqData)
+  }
+
+  useEffect(()=>{
+    if(!token){
+        return navigate(siteLinks.login, {replace: true})
+    }
+    verifyLink.mutate({reset_token: token})
+  }, [])
+
+  return (
+    <div className="app">
+        <div className="app-wrap">
+            <div className="app-contant">
+                <div className="vh-100 bg-white custom-bg">
+                    <div className="container-fluid p-0">
+                        <div className="row no-gutters justify-content-center">
+                        <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
+                            <div className="mt-5 d-flex">
+                                <div className="bg-white register p-5">
+                                    <h1 className="mb-2">MERMS Panel</h1>
+                                    {(verifyLink.isSuccess && !resetPWD.isSuccess) && <p>Complete your password reset</p>}
+                                    <div
+                                    >
+                                        <div className='mt-2'>
+                                            <div className="row">
+                                                {resetPWD.isSuccess ?
+                                                    <>
+                                                        <div className='col-12'>
+                                                            <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#F2FAF7'}}>
+                                                                <h4 className='p-4 text-black'>Your password reset is completed</h4>
+                                                                <img className='' style={{width: '150px'}} src={getImage('reset-password.png')} alt='reset-icon' />
+                                                                <Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
+                                                            </div>
+                                                        </div>
+                        
+                                                        <div className="col-12  mt-3">
+                                                            <p>Go <Link to={siteLinks.home}> Back</Link></p>
+                                                        </div>
+                                                    </>
+                                                    :
+                                                    <>
+                                                        {verifyLink.isPending ?
+                                                            <div className='col-12'>
+                                                                <div className="rounded-2 d-flex flex-column justify-content-center align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
+                                                                    <div className="col-12 d-flex flex-column justify-content-center align-items-center">
+                                                                        <p className='text-black'>loading...</p>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            : verifyLink.isSuccess ?
+                                                                <div className='col-12'>
+                                                                    <Formik
+                                                                        initialValues={initialValues}
+                                                                        validationSchema={validationSchema}
+                                                                        onSubmit={handleCompletePWDReset}
+                                                                    >
+                                                                        {(props) => {
+                                                                        return (
+                                                                            <Form className='mt-2'>
+                                                                                <div className="row">
+                                                                                    <>
+                                                                                        <div className="col-12">
+                                                                                            <div className="form-group">
+                                                                                                <label className={`text-black fw-bold control-label`}>Username: {user?.user}</label>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                        <div className="col-12">
+                                                                                            <div className="form-group">
+                                                                                                <label className={`text-black fw-bold control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
+                                                                                                <input type="password" name='password' className="form-control" placeholder="password" value={props.values.password} onChange={props.handleChange} />
+                                                                                            </div>
+                                                                                        </div>
+                                                                                        <div className="col-12">
+                                                                                            <div className="form-group">
+                                                                                                <label className={`text-black fw-bold control-label`}>Confirm Password* <span className={`${(props.errors.confirmpassword && props.touched.confirmpassword) && 'text-danger'}`}>{(props.errors.confirmpassword && props.touched.confirmpassword) && props.errors.confirmpassword}</span></label>
+                                                                                                <input type="password" name='confirmpassword' className="form-control" placeholder="confirmpassword" value={props.values.confirmpassword} onChange={props.handleChange} />
+                                                                                            </div>
+                                                                                        </div>
+
+                                                                                        {resetPWD.error &&
+                                                                                            <>
+                                                                                            <div className="col-12">
+                                                                                                <p className='text-danger'>{resetPWD.error.message}</p>
+                                                                                            </div>
+                                                                                            </>
+                                                                                        }
+
+                                                                                        <div className="col-12 mt-3 text-end">
+                                                                                            <button type='submit' className="btn btn-primary text-uppercase">{resetPWD.isPending ? 'loading...' : 'reset password'}</button>
+                                                                                        </div>
+                                                                                    </>
+                                                                                </div>
+                                                                            </Form>
+                                                                        );
+                                                                        }}
+                                                                    </Formik>
+                                                                </div>
+                                                            : verifyLink.error ?
+                                                            <>
+                                                                <div className='col-12'>
+                                                                    <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#E9D0DD'}}>
+                                                                        <h4 className='p-4 text-black'>Unable to continue password reset. Please start again</h4>
+                                                                        <img className='' style={{width: '150px'}} src={getImage('reset-password.png')} alt='reset-icon' />
+                                                                        <Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
+                                                                    </div>
+                                                                </div>
+                                
+                                                                <div className="col-12  mt-3">
+                                                                    <p>Go <Link to={siteLinks.home}> Back</Link></p>
+                                                                </div>
+                                                            </>
+                                                            :
+                                                            null
+                                                        }
+                                                    </>
+                                                }
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        {/* <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
+                            <div className="row align-items-center h-100">
+                                <div className="col-7 mx-auto ">
+                                    <img className="img-fluid" src={LoginImg} alt="" />
+                                </div>
+                            </div>
+                        </div> */}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+  )
+}

src/component/auth/CSignup.jsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from 'react'
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
+import { useDispatch } from 'react-redux'
 
 import { Link, useNavigate, useParams } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
 import { useMutation } from '@tanstack/react-query';
 import { completeRegistration, verifyEmail } from '../../services/services';
+import { updateUserDetails } from '../../store/UserDetails'
 
 import { IoMdArrowDropdown } from "react-icons/io";
 
@@ -28,6 +30,8 @@ const validationSchema = Yup.object().shape({
 export default function CSignup() {
 
     const {jwt} = useParams()
+    
+    const dispatch = useDispatch()
 
     const navigate = useNavigate()
 
@@ -51,15 +55,19 @@ export default function CSignup() {
         return completeRegistration(fields)
     },
     onSuccess: (res) => {
-        const {token, room} = res?.data?.data
-        if(token){
-            localStorage.setItem('token', token)
-            localStorage.setItem('room', room)
-            // const data = {token}
-            // dispatch(updateUserDetails({ ...data }));
-            navigate('/dash') // later add redux to dispatch state
+        if(res?.data?.resultCode != '0'){
+            throw({message: res?.data?.resultDescription})
         }
-    }
+        const {token, room, uid} = res?.data
+        if(!token || !room){
+            throw({message: 'something went wrong, try again!'})
+        }
+        localStorage.setItem('token', token)
+        localStorage.setItem('room', room)
+        localStorage.setItem('uid', uid)
+        dispatch(updateUserDetails({ ...res?.data }));
+        navigate('/dash') // later add redux to dispatch state
+    },
     // onError: (err) => {
     //     console.log('err', err)
     // }
@@ -70,7 +78,7 @@ export default function CSignup() {
         country : values.country,    
         username: values.username,
         password: values.password,
-        verify_link: user.verify_link
+        verify_link: jwt
     }
     cSignup.mutate(reqData)
   }
@@ -89,7 +97,7 @@ export default function CSignup() {
                 <div className="vh-100 bg-white custom-bg">
                     <div className="container-fluid p-0">
                         <div className="row no-gutters justify-content-center">
-                        <div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
+                        <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
                             <div className="mt-5 d-flex">
                                 <div className="bg-white register p-5">
                                     <h1 className="mb-2">MERMS Panel</h1>
@@ -196,7 +204,7 @@ export default function CSignup() {
                                                 }
 
                                                 <div className="col-12 mt-3 text-center">
-                                                    <Link to={siteLinks.login} className='text-primary' style={{color: '#6FCAEF'}}>Need help with logging in or signing up?</Link>
+                                                    <Link to={siteLinks.signup} className='text-primary' style={{color: '#6FCAEF'}}>Need help with logging in or signing up?</Link>
                                                 </div>
                                                 
                                                 <div className="col-12 mt-3 text-center">

src/component/auth/ExtFooter.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function ExtFooter() {
+    return <div className="login-links">
+        <a href={process.env.REACT_APP_HOME_LINK}>Home</a>
+        <a href={process.env.REACT_APP_ABOUT_LINK}>About</a>
+        <a href={process.env.REACT_APP_CONTACTS_LINK}>Contact</a>
+        <a href={process.env.REACT_APP_TERMS_LINK}>Terms</a>
+    </div>
+}

src/component/auth/Forgetpwd2.jsx

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
 import { useMutation } from '@tanstack/react-query'
 import { recoverPWD } from '../../services/services';
+import getImage from '../../utils/getImage';
 
 const validationSchema = Yup.object().shape({
     username: Yup.string()
@@ -46,11 +47,11 @@ export default function Forgetpwd2() {
                 <div className="vh-100 bg-white custom-bg">
                     <div className="container-fluid p-0">
                         <div className="row no-gutters justify-content-center">
-                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1h">
+                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1h" style={{maxWidth: '520px'}}>
                                 <div className="mt-5 d-flex">
                                     <div className="bg-white register p-5">
                                         <h1 className="mb-2">MERMS Panel</h1>
-                                        <p>Please enter your username.</p>
+                                        {!mutation.isSuccess && <p>Please enter your username.</p>}
                                         <Formik
                                         initialValues={initialValues}
                                         validationSchema={validationSchema}
@@ -81,8 +82,9 @@ export default function Forgetpwd2() {
                                                         </>
                                                     :
                                                     <div className='col-12'>
-                                                        <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
+                                                        <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#F2FAF7'}}>
                                                             <h4 className='p-4 text-black'>Check your email to continue password reset.</h4>
+                                                            <img className='' style={{width: '150px'}} src={getImage('reset-password.png')} alt='reset-icon' />
                                                             <Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
                                                         </div>
                                                     </div>

src/component/auth/Login2.jsx

@@ -83,7 +83,7 @@ export default function Login() {
                 <div className="vh-100 custom-bg">
                     <div className="container-fluid p-0">
                         <div className="row no-gutters justify-content-center">
-                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
+                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
                                 <div className="mt-5 d-flex">
                                     <div className="bg-white register px-5 pt-5 pb-3">
                                         <h1 className="mb-2">MERMS Panel</h1>
@@ -124,7 +124,7 @@ export default function Login() {
                                                     <button type='button' onClick={()=>{login.mutate(fields)}} className="btn btn-primary text-uppercase">{login.isPending ? 'loading...' : 'Sign In'}</button>
                                                 </div>
                                                 <div className="col-12  mt-3">
-                                                    <p>Don't have an account ?<Link to={siteLinks.signup}> Sign Up</Link></p>
+                                                    <p>Don't have an account ?<Link to={siteLinks.signup}><span style={{fontWeight: 'bolder'}}>Sign Up</span></Link></p>
                                                 </div>
                                             </div>
                                         </form>
@@ -133,7 +133,7 @@ export default function Login() {
                                                 <div className="app-store-icons-wrap text-center">
                                                     <a className="icon google"
                                                         href='#' >
-                                                        <img src={IOSDownload} className='w-100 h-auto' alt='IOS Download' />
+                                                        <img src={IOSDownload} className='w-80 h-auto' alt='IOS Download' />
                                                     </a>
                                                 </div>
                                             </div>
@@ -141,7 +141,7 @@ export default function Login() {
                                             <div className="col-6">
                                                 <div className="app-store-icons-wrap text-center">
                                                     <a className="icon apple"  href='#'>
-                                                        <img src={GoogleDownload} className='w-100 h-auto' alt='IOS Download' />
+                                                        <img src={GoogleDownload} className='w-80 h-auto' alt='IOS Download' />
                                                     </a>
                                                 </div>
                                             </div>
@@ -153,6 +153,7 @@ export default function Login() {
                                             <a href={process.env.REACT_APP_CONTACTS_LINK}>Contact</a>
                                             <a href={process.env.REACT_APP_TERMS_LINK}>Terms</a>
                                         </div>
+
                                     </div>
                                 </div>
                             </div>

src/component/auth/Signup2.jsx

@@ -8,6 +8,7 @@ import { Link } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
 import { useMutation } from '@tanstack/react-query';
 import { signUpUser } from '../../services/services';
+import getImage from '../../utils/getImage';
 
 const validationSchema = Yup.object().shape({
     email: Yup.string()
@@ -49,6 +50,7 @@ export default function Signup2() {
   const signUp = (values) => {
     // helpers.resetForm()
     // console.log('values', values, helpers)
+    delete values.isChecked
     mutation.mutate(values)
   }
 
@@ -59,7 +61,7 @@ export default function Signup2() {
                 <div className="vh-100 bg-white custom-bg">
                     <div className="container-fluid p-0">
                         <div className="row no-gutters justify-content-center">
-                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
+                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
                                 <div className="mt-5 d-flex">
                                     <div className="bg-white register p-5">
                                         <h1 className="mb-2">MERMS Panel</h1>
@@ -129,8 +131,9 @@ export default function Signup2() {
                                                             </>
                                                             :
                                                             <div className='col-12'>
-                                                                <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
-                                                                    <h4 className='p-4 text-black'>Check your email to continue.</h4>
+                                                                <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#F2FAF7'}}>
+                                                                    <h4 className='p-4 text-black' style={{marginBottom: '-30px'}}>Check your email to continue.</h4>
+                                                                    <img className='' style={{width: '200px'}} src={getImage('check-mail.png')} alt='mail-alert' />
                                                                     <Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
                                                                 </div>
                                                             </div>

src/component/calendar/Calendar.jsx

@@ -21,29 +21,37 @@ export default function Calendar(){
     //     queryFn: () => getCalendarEvents()
     // })
 
-    const calendarEvents = useMutation({
-        mutationFn: (reqData) => {
-            return getCalendarEvents(reqData)
-        },
-        onError: (error) => {
-            console.log(error)
-        },
-        onSuccess: (res) => {
-            if(res?.data?.resultCode != '0'){
-                throw({message: 'Something went wrong'})
-            }
-        }
-    })
+    // const calendarEvents = useMutation({
+    //     mutationFn: (reqData) => {
+    //         return getCalendarEvents(reqData)
+    //     },
+    //     onError: (error) => {
+    //         console.log(error)
+    //     },
+    //     onSuccess: (res) => {
+    //         if(res?.data?.resultCode != '0'){
+    //             throw({message: 'Something went wrong'})
+    //         }
+    //     }
+    // })
 
-    useEffect(()=>{
+    // useEffect(()=>{
+    // let reqData = {
+    //     token: localStorage.getItem('token'), // USER TOKEN
+    //     uid: localStorage.getItem('uid') // USER UID
+    // }
+    // calendarEvents.mutate(reqData)
+    // },[])
     let reqData = {
         token: localStorage.getItem('token'), // USER TOKEN
         uid: localStorage.getItem('uid') // USER UID
     }
-    calendarEvents.mutate(reqData)
-    },[])
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.calendar_events,
+        queryFn: () => getCalendarEvents(reqData)
+    })
 
-    const receievedEvents = calendarEvents?.data?.data
+    const receievedEvents = data?.data
     const category = receievedEvents?.category  //EVENT CATEGORIES FROM API
     const eventList = receievedEvents?.list //EVENT LIST FROM API
 
@@ -79,20 +87,20 @@ export default function Calendar(){
                     <div className="card card-statistics">
                         <div className="card-header">
                             <div className="card-heading">
-                                <h4 className="card-title">Event Calendar</h4>
+                                <h4 className="card-title">Events</h4>
                             </div>
                         </div>
                         <div className="card-body">
                             <div className="row">
-                            {calendarEvents?.isPending ? 
+                            {isFetching ? 
                                 <>
                                     <div className="col-12">
                                         <p className='text-mute'>Loading...</p>
                                     </div>
                                 </>
-                                : calendarEvents?.error ?
+                                : isError ?
                                 <div className="col-12">
-                                    <p className='text-danger'>{calendarEvents?.error?.message}</p>
+                                    <p className='text-danger'>{error?.message}</p>
                                 </div>
                                 :
                                 <>

src/component/calendar/EventCalendar.jsx

@@ -81,7 +81,7 @@ export default function EventCalendar({removeAfterDrop, eventList, activeCategor
   useEffect(()=>{
     // let newEventList = eventList?.map(item => ({...item, start: new Date(item?.start)}))
     let newEventList = eventList?.filter(item => (Number(item.category) == Number(activeCategory)))?.map(item => ({...item, start: new Date(item?.start)}))
-    console.log('newEventList', newEventList)
+    // console.log('newEventList', newEventList)
     setCurrentEvents(newEventList)
   },[activeCategory])
 

src/component/home/Products.jsx

@@ -1,34 +1,22 @@
-import React, {useEffect} from 'react'
-import { useMutation } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { productsData } from '../../services/services'
 import productPath from "../../utils/productpath";
 import { Link } from 'react-router-dom';
 
+import queryKeys from '../../services/queryKeys'
+
 
 export default function Products() {
-    const getProductsData = useMutation({
-        mutationFn: (reqData) => {
-            return productsData(reqData)
-        },
-        onError: (error) => {
-            console.log(error)
-        },
-        onSuccess: (res) => {
-            if(res?.data?.resultCode != '0'){
-                throw({message: 'Something went wrong'})
-            }
-        }
-    })
 
-    useEffect(()=>{
-      let reqData = {
+    let reqData = {
         token: localStorage.getItem('token'), // USER TOKEN
         uid: localStorage.getItem('uid') // USER UID
-      }
-      getProductsData.mutate(reqData)
-    },[])
-    
-    const products = getProductsData?.data?.data?.products_data // PRODUCTS DATA
+    }
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.products,
+        queryFn: () => productsData(reqData)
+    })
+    const products = data?.data?.products_data // PRODUCTS DATA
 
   return (
     <>
@@ -37,7 +25,7 @@ export default function Products() {
                 <h4 className="card-title">My Products</h4>
             </div>
             <div className="card-body pb-0">
-            {getProductsData?.isPending ? 
+            {isFetching ? 
                 <>
                     <div className="row">
                         <div className="col-12">
@@ -45,20 +33,20 @@ export default function Products() {
                         </div>
                     </div>
                 </>
-                : getProductsData?.isPending ?
+                : isError ?
                 <div className="row">
                     <div className="col-12">
-                        <p className='text-danger'>{getProductsData?.error?.message}</p>
+                        <p className='text-danger'>{error?.message}</p>
                     </div>
                 </div>
                 :
                 <div className="row m-b-20">
                     {products && products.map((product, index) => (
-                        <div key={product.uid+index} className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
+                        <div key={product.uid+index} className={`col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0`}>
                             <Link to={productPath(product?.product_id)}  >
-                                <div className="d-flex align-items-center extraProductCard">
+                                <div className={`d-flex align-items-center extraProductCard  ${product?.icon_style}`} >
                                     <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
-                                        <i className="fa fa-cart-plus text-primary"></i>
+                                        <i className={`fa ${product?.product_icon} text-primary`}></i>
                                     </div>
                                     <div className="report-details">
                                         <p>{product?.status_text}</p>

src/component/home/ProductsURL.jsx

@@ -2,15 +2,22 @@ import React from 'react'
 import { productsURL } from '../../services/services'
 import { useQuery } from '@tanstack/react-query'
 import queryKeys from '../../services/queryKeys'
+import getImage from '../../utils/getImage'
 
 export default function ProductsURL() {
 
-    const {data:data, isFetching, isError, error} = useQuery({
+    let reqData = {
+        token: localStorage.getItem('token'), // USER TOKEN
+        uid: localStorage.getItem('uid') // USER UID
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.product_url,
-        queryFn: () => productsURL()
+        queryFn: () => productsURL(reqData)
     })
 
-    const urlData = data?.data?.url_data?.url
+    const urlData = data?.data?.products_data
+    // console.log('data', urlData)
 
   return (
     <>
@@ -53,29 +60,28 @@ export default function ProductsURL() {
                             </thead>
                             <tbody>
                                 {urlData && urlData.map((item, index) => {
-                                    let statusColor = item?.status === 'Preparing' ? 'badge-success-inverse' : item?.status === 'Active' ? 'badge-success-inverse' : item?.status == 'Refreshing' ? 'badge-danger-inverse' : 'badge-info-inverse'
+                                    let statusColor = item?.status === '1' ? 'badge-success-inverse' : item?.status === '6' ? 'badge-success-inverse' : item?.status == '7' ? 'badge-danger-inverse' : 'badge-info-inverse'
+                                    let statusText = item?.status === '1' ? 'Preparing' : item?.status === '6' ? 'Provisioning' : item?.status == '7' ? 'Ready' : 'Started'
                                     let productUrl = '/product/'+ item?.product_id
+                                    let externalUrl= item?.url_protocol +"://"+ item?.internal_url;
                                     return (
                                         <tr key={index}>
-                                            <td>{Number(item?.no) + Number(index)}</td>
-                                            <td>{item?.description} - <a href={productUrl} target='_blank'>{item?.url}</a></td>
+                                            <td>{Number(item?.id).toString().padStart(6,'0')}</td>
+                                            <td>
+                                                <a className="mr-3" href={externalUrl} target='_blank'><b>{externalUrl}</b></a> -  {item?.description}
+                                            </td>
 
-                                            <td><span className={`badge ${statusColor}`}>{item?.status}</span></td>
-                                            <td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
+                                            <td><span className={`badge ${statusColor}`}>{statusText}</span></td>
+                                            {/* <td><a className="mr-3" href={productUrl}><i className="fe fe-edit"></i></a></td> */}
+                                            <td>
+                                                <a className="mr-3" href={productUrl}>
+                                                    <img src={getImage('arrow-next.png')} alt='next' />
+                                                </a>
+                                            </td>
                                         </tr>
                                     )
                                 })}
                             </tbody>
-                            <tfoot>
-                            <tr>
-                                <th>#</th>
-                                <th>Name</th>
-                                <th>Price</th>
-                                <th>In stock</th>
-                                <th>Status</th>
-                                <th>Action</th>
-                            </tr>
-                            </tfoot>
                         </table>
                     }
                     </div>

src/component/home/RecentActions.jsx

@@ -10,7 +10,7 @@ export default function RecentActions() {
         queryFn: () => recentActions()
     })
 
-    const actionData = dataAction?.data?.action_data
+    const actionData = dataAction?.data?.recent_actions
 
   return (
     <>
@@ -43,7 +43,7 @@ export default function RecentActions() {
                     <div className="d-xxs-flex align-items-center">
                         <div className="total-sales">
                             <p>Last Update</p>
-                            <h3>{dataAction?.data?.action_data?.last_update}</h3>
+                            <h3>{dataAction?.data?.last_update}</h3>
                         </div>
                         <div className="mb-3 mb-sm-0 ml-auto">
                             {/*<button className="btn btn-primary btn-xs">View All Invoices</button>*/}
@@ -62,19 +62,19 @@ export default function RecentActions() {
                     <div className="row no-gutters">
                         <div className="col-6 col-xxs-3 ">
                             <p>Initial</p>
-                            <h4>{actionData?.initial}</h4>
+                            <h4>{dataAction?.data?.initial}</h4>
                         </div>
                         <div className="col-6 col-xxs-3 ">
                             <p>Processing</p>
-                            <h4>{actionData?.processing}</h4>
+                            <h4>{dataAction?.data?.processing}</h4>
                         </div>
                         <div className="col-6 col-xxs-3 ">
                             <p>Verifying</p>
-                            <h4>{actionData?.verifying}</h4>
+                            <h4>{dataAction?.data?.verifying}</h4>
                         </div>
                         <div className="col-6 col-xxs-3 ">
                             <p>Completed</p>
-                            <h4>{actionData?.completed}</h4>
+                            <h4>{dataAction?.data?.completed}</h4>
                         </div>
                     </div>
                     <div className="table-responsive m-t-20">
@@ -89,16 +89,16 @@ export default function RecentActions() {
                             </tr>
                             </thead>
                             <tbody className="text-muted">
-                            {actionData && actionData?.actions.map((action, index) => {
+                            {actionData && actionData?.map((action, index) => {
                                 let bgColor = action?.status == '5' ? 'badge-success-inverse' : action?.status == '3' ? 'badge-info-inverse' : action?.status == '0' ? 'badge-warning-inverse' : 'badge-primary-inverse'
                                 let text = action?.status == '5' ? 'completed' : action?.status == '3' ? 'verifying' : action?.status == '0' ? 'processing' : 'processing'
                                 return (
                                     <tr key={index}>
-                                        <td>{action?.no}</td>
-                                        <td>{action?.description}</td>
-                                        <td>{new Date(action?.date).toDateString()}</td>
+                                        <td>{action?.id}</td>
+                                        <td>{action?.action_label}</td>
+                                        <td>{new Date(action?.added).toDateString()}</td>
                                         <td>
-                                            <label className={`badge mb-0 ${bgColor}`}>{text}</label>
+                                            <label className={`badge mb-0 ${bgColor}`}>{action?.status_description}</label>
                                         </td>
                                     </tr>
                                 )

src/component/home/TopBar.jsx

@@ -1,36 +1,44 @@
-import React, {useEffect} from 'react'
-import { useMutation } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { topBar } from '../../services/services'
+import queryKeys from '../../services/queryKeys'
 
 export default function TopBar() {
 
-  const topBarData = useMutation({
-    mutationFn: (reqData) => {
-        return topBar(reqData)
-    },
-    onError: (error) => {
-        console.log(error)
-    },
-      onSuccess: (res) => {
-        if(res?.data?.resultCode != '0'){
-            throw({message: 'Something went wrong'})
-        }
-    }
-  })
+//   const topBarData = useMutation({
+//     mutationFn: (reqData) => {
+//         return topBar(reqData)
+//     },
+//     onError: (error) => {
+//         console.log(error)
+//     },
+//       onSuccess: (res) => {
+//         if(res?.data?.resultCode != '0'){
+//             throw({message: 'Something went wrong'})
+//         }
+//     }
+//   })
 
-    useEffect(()=>{
-      let reqData = {
+//     useEffect(()=>{
+//       let reqData = {
+//         token: localStorage.getItem('token'), // USER TOKEN
+//         uid: localStorage.getItem('uid') // USER UID
+//       }
+//       topBarData.mutate(reqData)
+//     },[])
+    
+    let reqData = {
         token: localStorage.getItem('token'), // USER TOKEN
         uid: localStorage.getItem('uid') // USER UID
-      }
-      topBarData.mutate(reqData)
-    },[])
-    
-    const data = topBarData?.data?.data?.top_bar // top bar data
+    }
+    const {data:topBarData, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.topBar,
+        queryFn: () => topBar(reqData)
+    })
+    const data = topBarData?.data?.top_bar // top bar data
 
   return (
     <>
-        {topBarData.isPending ? 
+        {isFetching ? 
         <>
             <div className="col-12">
                 <div className="card p-4">
@@ -38,10 +46,10 @@ export default function TopBar() {
                 </div>
             </div>
         </>
-        : topBarData.error ?
+        : isError?
         <div className="col-12">
             <div className="card p-4">
-                <p className='text-danger'>{topBarData.error.message}</p>
+                <p className='text-danger'>{error.message}</p>
             </div>
         </div>
         :
@@ -50,7 +58,7 @@ export default function TopBar() {
             let textColor = item?.description == 'Contacts' ? 'text-danger' : item?.description == 'Site Traffic' ? 'text-primary' : item?.description == 'Appointments' ? 'text-orange' : 'text-success'
             return (
             <div key={item.id + index} className="col-sm-6 col-xxl-3">
-                <div className="card card-statistics ecommerce-contant overflow-h">
+                <div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `}>
                     <div className="card-body p-0">
                         <div className="d-flex m-b-0 ecommerce-contant-text h-100">
                             <div className="w-100">
@@ -60,9 +68,7 @@ export default function TopBar() {
                                         <small className="d-block">{item?.data_span}</small>
                                     </div>
                                     <div className="col text-right">
-                                        <h5 className="text-muted mb-0">{item?.description}</h5>
-                                        <strong className={`${textColor} m-t-5`}><i
-                                            className="zmdi zmdi-long-arrow-up font-weight-bold"></i> N/A</strong>
+                                        <h5 className="text-muted mb-0"><a href={item?.link}>{item?.description}</a></h5>
                                     </div>
                                 </div>
                                 <div className="apexchart-wrapper">

src/component/layout/layoutcom/UserHeader.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import getImage from "../../../utils/getImage";
 import { Link, useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
@@ -9,6 +9,8 @@ export default function UserHeader(){
 
     const { userDetails } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
 
+    const nav_menu = useRef(null)
+
     const toggleSidebar = (e) => {
         e.preventDefault()
         document.body.classList.toggle('sidebar-toggled')
@@ -32,6 +34,11 @@ export default function UserHeader(){
         window.location.reload()
     }
 
+    const toggleMenu = (e) => {
+        // e.preventDefault()
+        nav_menu.current.classList.toggle('show')
+    }
+
     return (
         <header className="app-header top-bar">
             <nav className="navbar navbar-expand-md">
@@ -66,16 +73,16 @@ export default function UserHeader(){
 
                         <ul className="navbar-nav nav-right ml-auto">
                             <li className="nav-item user-profile">
-                                <a href="#" className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown">
+                                <a onClick={toggleMenu} href="#" className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdow">
                                     <img src={getImage('profile-pic-circle.png')} alt="avtar-img" />
                                     <span className="bg-success user-status"></span>
                                 </a>
-                                <div className="dropdown-menu animated fadeIn">
+                                <div ref={nav_menu} onClick={toggleMenu} className="dropdown-menu animated fadeIn">
                                     <div className="bg-gradient px-4 py-3">
                                         <div className="d-flex align-items-center justify-content-between">
                                             <div className="mr-1">
-                                                <h4 className="text-white mb-0 font-600">{userDetails?.firstname} {userDetails?.lastname}</h4>
-                                                <p className="text-white font-600">{userDetails.email}</p>
+                                                {/* <h4 className="text-white mb-0 font-600">{userDetails?.username}</h4> */}
+                                                <p className="text-white font-600">{userDetails.username}</p>
                                             </div>
                                             <a href="#" onClick={logout} className="text-white font-20 tooltip-wrapper" data-toggle="tooltip"
                                                data-placement="top" title="" data-original-title="Logout"> <i
@@ -83,8 +90,8 @@ export default function UserHeader(){
                                         </div>
                                     </div>
                                     <div className="p-4">
-                                        <Link className="dropdown-item d-flex nav-link" to={siteLinks.user}>
-                                            <i className="fa fa-user pr-2 text-success"></i> Users</Link>
+                                        <Link className="dropdown-item d-flex nav-link" to={siteLinks.subscription}>
+                                            <i className="fa fa-user pr-2 text-success"></i> Subscription</Link>
                                         <Link className="dropdown-item d-flex nav-link" to={siteLinks.contacts}>
                                             <i className="fa fa-envelope pr-2 text-primary"></i> Contacts
                                             <span className="badge badge-primary ml-auto">6</span>

src/component/layout/layoutcom/UserMenu.jsx

@@ -20,7 +20,7 @@ export default function UserMenu() {
                     <li className="nav-static-title">Panel</li>
                     <li className={`${pathname == siteLinks.dash ? 'active' : ''}`}>
                         <Link className="has-arrow" to='#' data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                            <i className="nav-icon ti ti-rocket"></i>
+                            <i className="nav-icon ti ti-home"></i>
                             <div className='d-flex gap-2 justify-content-between align-items-center'>
                                 <span className="nav-title">Dashboard</span>
                                 <IoIosArrowDown />
@@ -48,7 +48,7 @@ export default function UserMenu() {
                             </div>
                         </Link>
                         <ul id="collapseTwo" className="collapse" aria-labelledby="headingTwo" data-bs-parent="#sidebarNav">
-                            <li className={`${pathname == siteLinks.user ? 'active' : ''}`}><Link to={siteLinks.user}>Users</Link></li>
+                            <li className={`${pathname == siteLinks.subscription ? 'active' : ''}`}><Link to={siteLinks.subscription}>Subscription</Link></li>
                             <li className={`${pathname == siteLinks.settings ? 'active' : ''}`}><Link to={siteLinks.settings}>Settings</Link></li>
                         </ul>
                     </li>

src/component/onboard/Onboard.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import getImage from "../../utils/getImage";
+
+export default function Onboard() {
+
+    const pricingFields ={
+        starter: { name: 'Starter', price:  5.99, active: true },
+        basic:   { name: 'Basic',   price: 12.99, active: true },
+        premium: { name: 'Premium', price: 20.00, active: true },
+    }
+
+    return (
+        <>
+            <BreadcrumbComBS title='Subscription' paths={['Dashboard', 'Subscription']} />
+
+
+
+            <div className="row">
+                <div className="col-xl-3 col-md-6">
+                    <div className="card card-statistics text-center py-3">
+                        <div className="card-body pricing-content">
+                            <div className="pricing-content-card">
+                                <h5>Current Subscription(s)</h5>
+                                <h2 className="text-primary pt-3">Basic</h2>
+                                {/*<p className="text-primary pb-3">/ Monthly</p>*/}
+                                {/*<ul className="py-2">*/}
+                                {/*    <li>post jobs</li>*/}
+                                {/*    <li>advanced instructors search</li>*/}
+                                {/*    <li>invite candidates</li>*/}
+                                {/*    <li>post events</li>*/}
+                                {/*    <li>cancel any time</li>*/}
+                                {/*</ul>*/}
+
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <>
+                    {Object.entries(pricingFields)?.map(([key, value]) => (
+
+                        <div key={key} className="col-xl-3 col-md-6">
+                            <div className="card card-statistics text-center py-3">
+                                <div className="card-body pricing-content">
+                                    <div className="pricing-content-card">
+                                        <h5>{value.name}</h5>
+                                        <h2 className="text-primary pt-3">${value.price}</h2>
+                                        <p className="text-primary pb-3">/ Monthly</p>
+                                        <ul className="py-2">
+                                            <li>post jobs</li>
+                                            <li>advanced instructors search</li>
+                                            <li>invite candidates</li>
+                                            <li>post events</li>
+                                            <li>cancel any time</li>
+                                        </ul>
+                                        <div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go {value.name}</a></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                    ))}
+                </>
+
+            </div>
+
+        </>
+    )
+}

src/component/product/ProductActive.jsx

@@ -1,140 +1,81 @@
-import React from "react";
+import React, { useMemo, useRef, useState } from "react";
+import { useSelector } from "react-redux";
 import getImage from "../../utils/getImage";
-import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { productRefreshSite, getSettingsData } from "../../services/services";
+import Settings from "./settingsTab/Settings";
+import queryKeys from "../../services/queryKeys";
 
 
-export default function ProductActive(){
+export default function ProductActive({productData}){
+
+    const iframe = useRef()
+
+    const refresh = useMutation({
+        mutationFn: (fields) => {
+            return productRefreshSite(fields)
+        },
+        onSuccess: (res) => {
+            iframe.current.src += ''
+        }
+    })
+
+    const handleRefresh = () => {
+        const reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            product_id: productData.product_id,
+            subscription_uid: productData.subscription_uid
+        }
+        refresh.mutate(reqData)
+    }
+    let externalUrl= 'https://'+productData?.internal_url
 
     return(
         <>
-            <BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />
+            {/*<BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />*/}
             {/*<div className="row">*/}
             {/*    <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
             {/*</div>*/}
 
 
             <div className="row account-contant">
-                <div className="col-12">
-                    <div className="card card-statistics">
-                        <div className="card-body p-0">
-                            <div className="row no-gutters">
-                                <div className="col-xl-3 pb-xl-0 pb-5 border-right">
-                                    <div className="page-account-profil pt-5">
-                                        <div className="profile-img text-center rounded-circle">
-                                            <div className="pt-5">
-                                                <div className="bg-img m-auto">
-                                                    <img src={getImage('widget/01.jpg')}   className="img-fluid"
-                                                         alt="users-avatar" />
-                                                </div>
-                                                <div className="profile pt-4">
-                                                    <h4 className="mb-1">Product Short Name</h4>
-                                                    <p>last Update : 00:00:0000</p>
-                                                </div>
-                                            </div>
-                                        </div>
-
-
+                <>
+                    <div className="row tabs-contant">
+                        <div className="col-xxl-6">
+                            <div className="card card-statistics">
+                                <div className="card-header">
+                                    <div className="card-heading d-flex justify-content-between">
+                                        <h4 className="card-title">{externalUrl}</h4>
+                                        <button type="button" onClick={()=>iframe.current.src += ''} className="btn">
+                                            <img src={getImage('refresh.png')} style={{width: '30px', height: 'auto'}} alt='refresh page' />
+                                        </button>
                                     </div>
                                 </div>
-                                <div className="col-xl-5 col-md-6 col-12 border-t border-right">
-                                    <div className="page-account-form">
-                                        <div className="form-titel border-bottom p-3">
-                                            <h5 className="mb-0 py-2">Edit Your Product Settings</h5>
-                                        </div>
-                                        <div className="p-4">
-                                            <form>
-                                                <div className="form-row">
-                                                    <div className="form-group col-md-12">
-                                                        <label htmlFor="name1">Full Name</label>
-                                                        <input type="text" className="form-control" id="name1"
-                                                               value="Alice Williams" />
-                                                    </div>
-                                                    <div className="form-group col-md-12">
-                                                        <label htmlFor="title1">Title</label>
-                                                        <input type="text" className="form-control" id="title1"
-                                                               value="Marketing expert" />
-                                                    </div>
-                                                    <div className="form-group col-md-12">
-                                                        <label htmlFor="phone1">Phone Number</label>
-                                                        <input type="text" className="form-control" id="phone1"
-                                                               value="(01) 97 563 15613" />
-                                                    </div>
-                                                    <div className="form-group col-md-12">
-                                                        <label htmlFor="email1">Email</label>
-                                                        <input type="email" className="form-control" id="email1"
-                                                               value="alicewilliams@gmail.com" />
-                                                    </div>
-                                                </div>
-                                                <div className="form-group">
-                                                    <label htmlFor="add1">Address</label>
-                                                    <input type="text" className="form-control" id="add1"
-                                                           value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
-                                                </div>
-                                                <div className="form-group">
-                                                    <label htmlFor="add2">Address 2</label>
-                                                    <input type="text" className="form-control" id="add2"
-                                                           value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
-                                                </div>
-
-
-                                                <button type="submit" className="btn btn-primary">Update Information
-                                                </button>
-                                            </form>
-                                        </div>
+                                <div className="card-body">
+                                    <iframe ref={iframe} style={{borderWidth: '0px'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe>
+                                </div>
+                                <div className="p-4 ml-auto">
+                                    <button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Loading...' : 'Refresh Site'}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-xxl-6">
+                            <div className="card card-statistics">
+                                <div className="card-header">
+                                    <div className="card-heading">
+                                        <h4 className="card-title"> Site Settings </h4>
                                     </div>
                                 </div>
-                                <div className="col-xl-4 col-md-6 border-t col-12">
-                                    <div className="page-account-form">
-                                        <div className="form-titel border-bottom p-3">
-                                            <h5 className="mb-0 py-2">Your External Link</h5>
-                                        </div>
-                                        <div className="p-4">
-                                            <form>
-                                                <div className="form-group">
-                                                    <label htmlFor="fb">Facebook URL:</label>
-                                                    <input type="text" className="form-control" id="fb"
-                                                           value="https://www.facebook.com/" />
-                                                </div>
-                                                <div className="form-group">
-                                                    <label htmlFor="tr">Twitter URL:</label>
-                                                    <input type="text" className="form-control" id="tr"
-                                                           value="https://twitter.com/" />
-                                                </div>
-
-                                                <div className="form-group">
-                                                    <label htmlFor="br">Blogger URL:</label>
-                                                    <input type="text" className="form-control" id="br"
-                                                           value="https://www.blogger.com" />
-                                                </div>
-
-                                                <div className="form-group">
-                                                    <label htmlFor="go">Google+ URL:</label>
-                                                    <input type="text" className="form-control" id="go"
-                                                           value="https://plus.google.com/discover" />
-                                                </div>
-
-                                                <div className="form-group">
-                                                    <label htmlFor="li">LinkedIn URL:</label>
-                                                    <input type="text" className="form-control" id="li"
-                                                           value="https://in.linkedin.com/" />
-                                                </div>
-
-                                                <div className="form-group">
-                                                    <label htmlFor="we">Website URL:</label>
-                                                    <input type="text" className="form-control" id="we"
-                                                           value="https://yourwebsite.com" />
-                                                </div>
-                                                <button type="submit" className="btn btn-primary">Save & Update</button>
-                                            </form>
-                                        </div>
-                                    </div>
+                                <div className="card-body">
+                                    <Settings productData={productData} />
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
+                </>
             </div>
-
         </>
     )
 }

src/component/product/ProductFactory.jsx

@@ -1,5 +1,4 @@
-import {useEffect} from "react";
-import { useMutation, useQuery } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 // import getImage from "../../utils/getImage";
 import ProductStart from "./ProductStart";
@@ -8,6 +7,7 @@ import {MyProductData} from "../../services/services";
 import ProductActive from "./ProductActive";
 import ProductProvision from "./ProductProvision";
 import {productConst} from "../../constants/products";
+import queryKeys from "../../services/queryKeys";
 
 export default function ProductFactory(){
     const location = useLocation();
@@ -16,30 +16,18 @@ export default function ProductFactory(){
     // Split the pathname by '/' and get the last element
     const productID = pathname.split('/').pop();
 
-    const getProductData = useMutation({
-        mutationFn: (reqData) => {
-            return MyProductData(reqData)
-        },
-        onError: (error) => {
-            console.log(error)
-        },
-        onSuccess: (res) => {
-            if(res?.data?.resultCode != '0'){
-                throw({message: 'Something went wrong'})
-            }
-        }
-    })
-
-    useEffect(()=>{
     let reqData = {
         product_id : productID,
         token: localStorage.getItem('token'), // USER TOKEN
         uid: localStorage.getItem('uid') // USER UID
     }
-    getProductData.mutate(reqData)
-    },[])
-        
-    const myproduct_data = getProductData?.data?.data?.myproduct?.myproudct // PRODUCT DETAILS
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.product_page,
+        queryFn: () => MyProductData(reqData),
+        staleTime: 0
+    })
+
+    const myproduct_data = data?.data?.myproduct?.myproudct // PRODUCT DETAILS
     const product_name =  myproduct_data?.product_name;
     const product_status  = myproduct_data?.status;
 
@@ -47,7 +35,7 @@ export default function ProductFactory(){
         <>
             <BreadcrumbComBS title={product_name} paths={['Dashboard', 'Product']} />
             <div className="row">
-                {getProductData?.isPending ?
+                {isFetching ?
                     <>
                         <div className="row">
                             <div className="col-12">
@@ -55,27 +43,26 @@ export default function ProductFactory(){
                             </div>
                         </div>
                     </>
-                    : getProductData?.error ?
+                    : isError ?
                         <div className="row">
                             <div className="col-12">
-                                <p className='text-danger'>{getProductData?.error?.message}</p>
+                                <p className='text-danger'>{error?.message}</p>
                             </div>
                         </div>
-                        :
-                <div>
-                    {(product_status <= productConst.PRODUCT_AVAILABLE)?
-                        <ProductStart productData={myproduct_data} />
-                        :<></> }
+                    :
+                    <div>
+                        {(product_status <= productConst.PRODUCT_AVAILABLE)?
+                            <ProductStart productData={myproduct_data} />
+                            :<></> }
 
-                     {(product_status === productConst.PRODUCT_PROVISIONING)?
-                        <ProductProvision productData={myproduct_data} />
-                        :<></> }
+                        {(product_status === productConst.PRODUCT_PROVISIONING)?
+                            <ProductProvision productData={myproduct_data} />
+                            :<></> }
 
-                    {(product_status === productConst.PRODUCT_ACTIVE)?
-                        <ProductActive productData={myproduct_data} />
-                        :<></> }
-
-                </div>
+                        {(product_status === productConst.PRODUCT_ACTIVE)?
+                            <ProductActive productData={myproduct_data} />
+                            :<></> }
+                    </div>
                }
             </div>
         </>

src/component/product/ProductProvision.jsx

@@ -25,7 +25,7 @@ export default function ProductProvision(props){
         queryFn: () => productProvision(reqData)
     })
 
-    const provisionData = provision?.data?.provision
+    const provisionData = provision?.data
 
     useEffect(()=>{
         joinRoom(productSubUID); // provision subscription room
@@ -60,7 +60,7 @@ export default function ProductProvision(props){
                                     <div className="card-body">
                                         <div className="progress">
                                             <div className="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
-                                            aria-valuenow={`${provisionData.percent_completed}%`} aria-valuemin="0" aria-valuemax="100" style={{width:`${provisionData.percent_completed}%`}} ></div>
+                                            aria-valuenow={`${provisionData?.percent_completed}%`} aria-valuemin="0" aria-valuemax="100" style={{width:`${provisionData?.percent_completed}%`}} ></div>
                                         </div>
                                 </div>
                             </div>
@@ -110,11 +110,9 @@ export default function ProductProvision(props){
                             <div className="card card-statistics ">
                                 <h4 className="card-title" style={{padding:'10px'}}>Started creating your selection</h4>
                                 <img className="card-img-top" src={getImage('widget/working.jpg')}  alt="Card image cap" />
-                                <div className="card-body">
-                                <p>
-                                    {productDescription}
-                                </p>
-                                </div>
+                                {/* <div className="card-body">
+                                    <div className="" dangerouslySetInnerHTML={{__html: productDescription}}/>
+                                </div> */}
                             </div>
 
                         </div>

src/component/product/ProductStart.jsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
+import {useNavigate} from 'react-router-dom'
 import getImage from "../../utils/getImage";
-// import { Modal } from "bootstrap";
+import { Modal } from "bootstrap";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { subscribe } from '../../services/services'
 import queryKeys from "../../services/queryKeys";
@@ -8,26 +9,28 @@ import queryKeys from "../../services/queryKeys";
 export default function ProductStart(props){
 
     const queryClient = useQueryClient()
+    const navigate = useNavigate()
 
     const [requestStatus, setRequestStatus] = useState({status:false, message: ''})
-
     const product_uid = props?.productData?.product_uid;
     const product_id = props?.productData?.product_id;
-    const productBanner = "product/"+props.productData?.banner;
-    const productTitle  = props.productData?.title;
-    const productDescription  = props.productData?.description;
-    const promotion_text  = props.productData?.promotion_text;
-    const product_status  = props.productData?.status;
-    const saleText  = props.productData?.sale_text;
-    
-    const modalRef = useRef()
+    const productBanner = `product/${props.productData?.banner}`;
+    const productTitle  = props?.productData?.title;
+    const productDescription  = props?.productData?.description;
+    const promotion_text  = props?.productData?.promotion_text;
+    const product_status  = props?.productData?.status;
+    const saleText  = props?.productData?.sale_text;
 
-    const refetch = () => {
-        queryClient.refetchQueries({
-            queryKey: [...queryKeys.product],
-            // type: 'active',
-            // exact: true,
-        })
+    const modalRef = useRef(null)
+
+    const invalidate = () => {
+        // queryClient.refetchQueries({
+        //     queryKey: [...queryKeys.product],
+        //     // type: 'active',
+        //     // exact: true,
+        // })
+        queryClient.invalidateQueries({ queryKey: [...queryKeys.product_url] })
+        queryClient.invalidateQueries({ queryKey: [...queryKeys.product_page] })
     }
 
     const mutation = useMutation({
@@ -40,9 +43,12 @@ export default function ProductStart(props){
         },
           onSuccess: (res) => {
             setRequestStatus({status:true, message:'successful'})
+            navigate(`/product/${product_id}`, {replace: true}) //'/product/'+ product_id
+            dismissModal()
             console.log(res)
         },
         onSettled: () => {
+            invalidate() // Invalidates selected queries
             setTimeout(()=>{
                 setRequestStatus({status:false, message:''})
             },4000)
@@ -53,6 +59,22 @@ export default function ProductStart(props){
         mutation.mutate({product_id: product_id})
     }
 
+    const dismissModal = () => {
+        const body = document.querySelector('body')
+        body.removeAttribute('style')
+        // body.classList.toggle('modal-open')
+
+        const modalBackdrop = document.querySelectorAll('.modal-backdrop')
+        modalBackdrop.forEach(item => {
+            if (item) {
+                item.remove();
+            }
+        })
+        
+        const modal = Modal.getInstance(modalRef.current);
+        modal && modal.hide();
+    };
+
     return (
         <>
             <div className="row">
@@ -113,7 +135,7 @@ export default function ProductStart(props){
                     <div className="modal-content">
                         <div className="modal-header">
                             <h5 className="modal-title" id="verticalCenterTitle">{productTitle}</h5>
-                            <button onClick={refetch} type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
+                            <button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
                                 <span aria-hidden="true">&times;</span>
                             </button>
                         </div>
@@ -140,7 +162,7 @@ export default function ProductStart(props){
                             )}
                         </div>
                         <div className="modal-footer">
-                            <button onClick={refetch} type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
+                            <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
                             <button type="button" className="btn btn-success" disabled={mutation.isSuccess} onClick={handleSubscribe}>{mutation.isPending ? 'loading...' : 'Start'}</button>
                         </div>
                     </div>

src/component/product/_PA.jsx

@@ -0,0 +1,278 @@
+import React from "react";
+import getImage from "../../utils/getImage";
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+
+
+export default function ProductActive(){
+
+    return(
+        <>
+            {/*<BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />*/}
+            {/*<div className="row">*/}
+            {/*    <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
+            {/*</div>*/}
+
+
+            <div className="row account-contant">
+<>
+
+
+    <div className="row tabs-contant">
+        <div className="col-xxl-6">
+            <div className="card card-statistics">
+                <div className="card-header">
+                    <div className="card-heading">
+                        <h4 className="card-title">https://25681.devprov.mermsemr.com/</h4>
+                    </div>
+                </div>
+                <div className="card-body">
+                    <iframe style={{borderWidth: '0px;'}} src="https://25681.devprov.mermsemr.com/" width="100%" height="600" title="https://25681.devprov.mermsemr.com"></iframe>
+
+                </div>
+            </div>
+        </div>
+        <div className="col-xxl-6">
+            <div className="card card-statistics">
+                <div className="card-header">
+                    <div className="card-heading">
+                        <h4 className="card-title"> Site Settings </h4>
+                    </div>
+                </div>
+                <div className="card-body">
+                    <div className="tab tab-vertical">
+                        <ul className="nav nav-tabs" role="tablist">
+                            <li className="nav-item">
+                                <a className="nav-link active show" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true">General</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true">Home Page</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" id="profile-09-tab" data-toggle="tab" href="#profile-09" role="tab" aria-controls="profile-09" aria-selected="false"> Footer </a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" id="portfolio-09-tab" data-toggle="tab" href="#portfolio-09" role="tab" aria-controls="portfolio-09" aria-selected="false">About Page </a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" id="contact-09-tab" data-toggle="tab" href="#contact-09" role="tab" aria-controls="contact-09" aria-selected="false"> Contact Page</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true">Socials</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true">Template</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true"> Color Scheme</a>
+                            </li>
+                        </ul>
+                        <div className="tab-content">
+                            <div className="tab-pane fade active show" id="home-09" role="tabpanel" aria-labelledby="home-09-tab">
+
+                                    <div className="page-account-form">
+                                        <div className="p-4">
+                                            <form>
+                                                <div className="form-row">
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="name1">Full Name</label>
+                                                        <input type="text" className="form-control" id="name1"
+                                                               value="Alice Williams" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="title1">Title</label>
+                                                        <input type="text" className="form-control" id="title1"
+                                                               value="Marketing expert" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="phone1">Phone Number</label>
+                                                        <input type="text" className="form-control" id="phone1"
+                                                               value="(01) 97 563 15613" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="email1">Email</label>
+                                                        <input type="email" className="form-control" id="email1"
+                                                               value="alicewilliams@gmail.com" />
+                                                    </div>
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add1">Address</label>
+                                                    <input type="text" className="form-control" id="add1"
+                                                           value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add2">Address 2</label>
+                                                    <input type="text" className="form-control" id="add2"
+                                                           value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
+                                                </div>
+
+
+                                                <button type="submit" className="btn btn-primary">Update Information
+                                                </button>
+                                            </form>
+                                        </div>
+                                    </div>
+
+                            </div>
+                            <div className="tab-pane fade" id="profile-09" role="tabpanel" aria-labelledby="profile-09-tab">
+                                    <div className="page-account-form">
+
+                                        <div className="p-4">
+                                            <form>
+                                                <div className="form-row">
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="name1">Full Name</label>
+                                                        <input type="text" className="form-control" id="name1"
+                                                               value="Alice Williams" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="title1">Title</label>
+                                                        <input type="text" className="form-control" id="title1"
+                                                               value="Marketing expert" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="phone1">Phone Number</label>
+                                                        <input type="text" className="form-control" id="phone1"
+                                                               value="(01) 97 563 15613" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="email1">Email</label>
+                                                        <input type="email" className="form-control" id="email1"
+                                                               value="alicewilliams@gmail.com" />
+                                                    </div>
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add1">Address</label>
+                                                    <input type="text" className="form-control" id="add1"
+                                                           value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add2">Address 2</label>
+                                                    <input type="text" className="form-control" id="add2"
+                                                           value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
+                                                </div>
+
+
+                                                <button type="submit" className="btn btn-primary">Update Information
+                                                </button>
+                                            </form>
+                                        </div>
+                                    </div>
+                            </div>
+                            <div className="tab-pane fade" id="portfolio-09" role="tabpanel" aria-labelledby="portfolio-09-tab">
+                                <p>
+                                    <div className="page-account-form">
+                                        <div className="form-titel border-bottom p-3">
+                                            <h5 className="mb-0 py-2">Edit Your Product Settings</h5>
+                                        </div>
+                                        <div className="p-4">
+                                            <form>
+                                                <div className="form-row">
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="name1">Full Name</label>
+                                                        <input type="text" className="form-control" id="name1"
+                                                               value="Alice Williams" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="title1">Title</label>
+                                                        <input type="text" className="form-control" id="title1"
+                                                               value="Marketing expert" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="phone1">Phone Number</label>
+                                                        <input type="text" className="form-control" id="phone1"
+                                                               value="(01) 97 563 15613" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="email1">Email</label>
+                                                        <input type="email" className="form-control" id="email1"
+                                                               value="alicewilliams@gmail.com" />
+                                                    </div>
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add1">Address</label>
+                                                    <input type="text" className="form-control" id="add1"
+                                                           value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add2">Address 2</label>
+                                                    <input type="text" className="form-control" id="add2"
+                                                           value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
+                                                </div>
+
+
+                                                <button type="submit" className="btn btn-primary">Update Information
+                                                </button>
+                                            </form>
+                                        </div>
+                                    </div>
+                                </p>                            </div>
+                            <div className="tab-pane fade" id="contact-09" role="tabpanel" aria-labelledby="contact-09-tab">
+                                <p>
+                                    <div className="page-account-form">
+                                        <div className="form-titel border-bottom p-3">
+                                            <h5 className="mb-0 py-2">Edit Your Product Settings</h5>
+                                        </div>
+                                        <div className="p-4">
+                                            <form>
+                                                <div className="form-row">
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="name1">Full Name</label>
+                                                        <input type="text" className="form-control" id="name1"
+                                                               value="Alice Williams" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="title1">Title</label>
+                                                        <input type="text" className="form-control" id="title1"
+                                                               value="Marketing expert" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="phone1">Phone Number</label>
+                                                        <input type="text" className="form-control" id="phone1"
+                                                               value="(01) 97 563 15613" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="email1">Email</label>
+                                                        <input type="email" className="form-control" id="email1"
+                                                               value="alicewilliams@gmail.com" />
+                                                    </div>
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add1">Address</label>
+                                                    <input type="text" className="form-control" id="add1"
+                                                           value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add2">Address 2</label>
+                                                    <input type="text" className="form-control" id="add2"
+                                                           value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
+                                                </div>
+
+
+                                                <button type="submit" className="btn btn-primary">Update Information
+                                                </button>
+                                            </form>
+                                        </div>
+                                    </div>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+
+</>
+
+
+
+
+
+            </div>
+
+        </>
+    )
+}

src/component/product/settingsTab/GeneralTab.jsx

@@ -0,0 +1,118 @@
+import React, {memo, useState} from 'react'
+import { useMutation } from "@tanstack/react-query";
+import { pageSettings } from "../../../services/services";
+import SiteTemplateSelector from './SiteTemplateSelector';
+import NoYesBooleanDropdown from './NoYesBooleanDropdown';
+
+const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
+
+    const [reqStatus, setReqStatus] = useState({error: null, message: ''})
+
+    const fieldData = {}
+    Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+    fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
+    })
+    backendValues.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
+    fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
+    })
+
+    console.log('fieldData', fieldData)
+
+    const [fields, setFields] = useState(fieldData)
+    
+    const handleChange = ({target:{name, value}}) => {
+        setFields(prev => ({...prev, [name]:value}))
+        setFieldsChanged(true)
+    }
+
+    const submitSettings = useMutation({
+        mutationFn: (fields) => {
+            return pageSettings(fields)
+        },
+        onSuccess: (res) => {
+            if(res?.data?.resultCode != '0'){
+                return setReqStatus({error: true, message: 'Unable to complete, try again later'})
+            }
+            setFieldsChanged(false)
+            setReqStatus({error: false, message: 'Completed successfully'})
+        },
+        onError: (err) => {
+            setReqStatus({error: true, message: 'Unable to complete, try again later'})
+        },
+        onSettled: () => {
+            setTimeout(()=>{
+                setReqStatus({error: null, message: ''})
+            },3000)
+        },
+    })
+
+      const handleSubmit = () => {
+        const reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            product_id: productData?.product_id,
+            settings : {
+            ...fields
+            }
+        }
+        // console.log('formInfo', reqData)
+        submitSettings.mutate(reqData)
+      }
+
+      if (isCustom ===  true){
+          return  <SiteTemplateSelector  name={name} data={data} isCustom={isCustom} productData={productData} />
+      }
+
+
+      return (
+        <div className="page-account-form">
+            <div className="p-0" style={{ minHeight: '500px'}}>
+
+                <form id='tab_form'>
+                    <div className="form-row">
+                        <>
+                            {Object.entries(data)?.map(([key, value]) => {
+                                let fieldName = value.name.toLowerCase().replaceAll(" ", "_")
+                                let fieldValue = fields[value.name.toLowerCase().replaceAll(" ", "_")]
+                                return (
+                                    <div key={key} className="form-group col-md-12">
+                                        <label htmlFor="name1">{value.name}</label>
+                                        {value.controls == 'TEXT' ?
+                                            <input name={fieldName} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
+                                            :value.controls == 'TEXTAREA' ?
+                                            <textarea name={fieldName} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
+                                            : value.controls == 'SELECT_NO_YES' ?
+                                            // <NoYesBooleanDropdown name={fieldName} value={fieldValue} onChange={handleChange}  />
+                                            <select onChange={handleChange} name={fieldName} value={fieldValue} className="form-control">
+                                                <option value=''>Select</option>
+                                                <option value='0'>No</option>
+                                                <option value='1'>Yes</option>
+                                            </select>
+                                            :
+                                            null
+                                        }
+                                    </div>
+                                )
+                            }
+                            )}
+                        </>
+                        {reqStatus.message &&
+                            <>
+                            <div className="col-12">
+                                <p className={reqStatus.error ? 'text-danger' : 'text-success'}>{reqStatus.message}</p>
+                            </div>
+                            </>
+                        }
+                        <div className="form-group col-md-12" style={{textAlign:'right'}}>
+                            <button onClick={handleSubmit} type="button" className="btn btn-primary" disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+      )
+    }
+)
+
+
+export default GeneralTab

src/component/product/settingsTab/NoYesBooleanDropdown.jsx

@@ -0,0 +1,11 @@
+import React, {memo} from 'react'
+
+export default function NoYesBooleanDropdown(name, value, onChange) {
+    return (
+        <select onChange={onChange} name={name} value={value} className="form-control">
+            <option value=''>Select</option>
+            <option value='0'>No</option>
+            <option value='1'>Yes</option>
+        </select>
+    )
+}

src/component/product/settingsTab/Settings.jsx

@@ -0,0 +1,163 @@
+import React, { memo, useMemo, useState } from 'react'
+import GeneralTab from './GeneralTab'
+import { getSettingsData } from '../../../services/services';
+import queryKeys from '../../../services/queryKeys';
+import { useSelector } from 'react-redux';
+import { useQuery } from '@tanstack/react-query';
+
+const Settings = memo(({productData}) => {
+
+    const { userDetails: { uid }} = useSelector((state) => state?.userDetails); // GETS USER UID
+   
+    const dataFields ={
+        site_title: { name: 'Title', controls: 'TEXT', active: true },
+        site_description: { name: 'Description', controls: 'TEXTAREA', active: true },
+        site_logo_text: { name: 'Logo Text', controls: 'TEXT', active: true },
+        site_contact_email: { name: 'Email', controls: 'TEXT', active: true },
+        site_contact_phone: { name: 'Phone', controls: 'TEXT', active: true },
+    }
+
+    const socialFields ={
+        facebook: { name: 'Facebook', controls: 'TEXT', active: true },
+        twitter: { name: 'Twitter', controls: 'TEXT', active: true },
+        youtube: { name: 'Youtube', controls: 'TEXT', active: true },
+    }
+
+    const homeFields ={
+        banner_text: { name: 'Banner Text', controls: 'TEXT', active: true },
+        banner_description: { name: 'Banner Description', controls: 'TEXTAREA', active: true },
+    }
+
+    const footerFields ={
+        footer_description: { name: 'Footer Description', controls: 'TEXTAREA', active: true },
+        boolean_footer_show_email: { name: 'Show email in footer', controls: 'SELECT_NO_YES', active: true },
+    }
+
+    const aboutFields ={
+        about_title: { name: 'About Title', controls: 'TEXT', active: true },
+        about_description: { name: 'About Details', controls: 'TEXTAREA', active: true },
+        about_extra_1: { name: 'Extra About us', controls: 'TEXTAREA', active: true },
+        about_extra_2: { name: 'More About us', controls: 'TEXTAREA', active: true },
+    }
+
+    const templateData = {
+        template_16 : { title: 'Template Name-16', template_id: '02af24fd-2b1a-46ed-af21-87018e726408', banner: 'file-icon/svg.png', active: '' },
+        template_22 : { title: 'Template Name-22', template_id: '8b296894-42e4-4f2e-abd1-7c2a38d6e07b', banner: 'file-icon/svg.png', active: '' },
+        template_47 : { title: 'Template Name-47', template_id: 'ef2ffa1c-9272-42cd-9d33-0e614047b4f8', banner: 'file-icon/svg.png', active: '' },
+        template_25 : { title: 'Template Name-25', template_id: 'b3a7ba31-dc47-4a40-a5cc-fd1ff27d6b78', banner: 'file-icon/svg.png', active: '' },
+        template_49 : { title: 'Template Name-49', template_id: '60959c69-6672-4f69-a006-eeb7d210e605', banner: 'file-icon/svg.png', active: '' },
+        template_27 : { title: 'Template Name-27', template_id: 'e4acb98a-c584-45f2-bece-af677dcf0a1f', banner: 'file-icon/svg.png', active: '' },
+        template_51 : { title: 'Template Name-51', template_id: '975ee42e-3169-4978-92d7-d28e7e2ac014', banner: 'file-icon/svg.png', active: '' },
+        template_9 : { title: 'Template Name-9',   template_id: 'fc8f0738-6500-4775-9895-2047cd275302', banner: 'file-icon/svg.png', active: '' },
+    }
+
+    const contactFields ={
+        contact_title : { name: 'Contact Title', controls: 'TEXT', active: true },
+        contact_introduction: { name: 'Extra Introduction', controls: 'TEXTAREA', active: true },
+    }
+
+    const settingsObject = useMemo(()=>{
+        return {
+           settings: { title: 'Settings', controls: 'settings', active: 'active show' , custom: false, data: dataFields},
+           home_tab: { title: 'Home Page', controls: 'home', active: '', custom: false,  data: homeFields},
+           footer_tab: { title: 'Footer', controls: 'footer', active: '', custom: false, data: footerFields },
+           about_tab: { title: 'About Page', controls: 'about', active: '', custom: false, data: aboutFields },
+           contact_tab: { title: 'Contact Page', controls: 'contact', active: '', custom: false, data: contactFields },
+           social_tab: { title: 'Socials', controls: 'social', active: '', custom: false, data: socialFields },
+           template_tab: { title: 'Template', controls: 'template', active: '', custom: true, data: templateData },
+           color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', custom: true, data: {} },
+       };
+    },[])
+
+
+    const [fieldsChanged, setFieldsChanged] = useState(false)
+
+    const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
+
+    const handleChangeTab = (value) => {
+        // if(fieldsChanged){
+        //     const proceed = confirm('Continue without saving changes')
+        //     if(proceed){
+        //         setActiveTab(value)
+        //         setFieldsChanged(false)
+        //     }
+        // }else{
+        //     setActiveTab(value)
+        // }
+        setActiveTab(value)
+    }
+
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.settingsData,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id
+            }
+           return getSettingsData(reqData)
+        }
+    })
+
+    const settingsData = data?.data?.settings
+    // console.log('data', settingsData)
+
+      return (
+        <>
+        {isFetching ? 
+            <>
+                <div className="row">
+                    <div className="col-12">
+                        <p className='text-mute'>Loading...</p>
+                    </div>
+                </div>
+            </>
+            : isError ?
+            <div className="row">
+                <div className="col-12">
+                    <p className='text-danger'>{error.message}</p>
+                </div>
+            </div>
+            :
+            <div className="tab tab-vertical">
+                <ul className="nav nav-tabs" role="tablist">
+                    <>
+                        {Object.entries(settingsObject).map(([key, value]) => (
+                            <li key={key} className="nav-item">
+                            <a className={`nav-link ${activeTab == value.controls && 'active show'}`}
+                                id={key} 
+                                // data-bs-toggle="pill"
+                                // data-bs-target={`#${value.controls}`}
+                                type="button" 
+                                // role="tab"
+                                // aria-controls={value.controls}
+                                // aria-selected="true"
+                                onClick={()=>handleChangeTab(value.controls)}
+                            >
+                                {value.title}
+                            </a>
+                            </li>
+                        ))}
+                    </>
+                </ul>
+                <div className="tab-content">
+                    <>
+                        {Object.entries(settingsObject).map(([key, value]) => (
+                            <div key={key} className={`tab-pane fade  ${activeTab == value.controls && 'active show'}`}
+                                // id={value.controls} role="tabpanel"
+                                // aria-labelledby={key}
+                            >
+                                <GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} backendValues={settingsData} setFieldsChanged={setFieldsChanged} />
+                            </div>
+                        ))}
+                    </>
+                </div>
+            </div>
+            }
+        </>
+      )
+    }
+)
+
+export default Settings

src/component/product/settingsTab/SiteTemplateSelector.jsx

@@ -0,0 +1,33 @@
+import React, {memo} from 'react'
+import getImage from "../../../utils/getImage";
+
+const SiteTemplateSelector = memo(({name='Full Name', data}) =>{
+        console.log("Page data == ", data)
+        return (
+            <div className="page-account-form">
+                <div className="p-0">
+                    <div className="row">
+                        <>
+                            {Object.entries(data)?.map(([key, value]) => (
+                                <div key={key} className="col-xl-6 col-sm-6">
+                                    <div className="card card-statistics">
+                                        <div className="card-body">
+                                            <div className="text-center p-2">
+                                                <div className="mb-2">
+                                                    <img  src={getImage(value.banner)} alt={value.title} />
+                                                </div>
+                                                <h4 className="mb-0">{value.title}</h4>
+                                                <a href="javascript:void(0)" className="btn btn-light">Activate</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+)
+export default SiteTemplateSelector

src/component/subscription/Subscription.jsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import getImage from "../../utils/getImage";
+import { getSubscriptions } from '../../services/services';
+import { useQuery } from '@tanstack/react-query';
+import queryKeys from '../../services/queryKeys';
+
+export default function Subscription() {
+
+    const pricingFields ={
+        starter: { name: 'Starter', price:  5.99, active: true },
+        basic:   { name: 'Basic',   price: 12.99, active: true },
+        premium: { name: 'Premium', price: 20.00, active: true },
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.subscriptions,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid') // USER UID
+            }
+            return getSubscriptions(reqData)
+        }
+    })
+
+    const currentSubscription = data?.data?.current_product
+    const otherSubscriptions = data?.data?.options
+    console.log('urlData', data?.data)
+
+    return (
+        <>
+            <BreadcrumbComBS title='Subscription' paths={['Dashboard', 'Subscription']} />
+
+        {isFetching ? 
+            <>
+                <div className="col-12">
+                    <p className='text-mute'>Loading...</p>
+                </div>
+            </>
+            : isError ?
+            <div className="col-12">
+                <p className='text-danger'>{error.message}</p>
+            </div>
+            :
+            <div className="row">
+                <div className="col-12 col-lg-6 col-xl-3">
+                    <div className="card card-statistics text-center py-3">
+                        <div className="card-body pricing-content">
+                            <div className="pricing-content-card">
+                                <h5>Current Subscription(s)</h5>
+                                <h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <>
+                    {Object.entries(otherSubscriptions)?.map(([key, value]) => (
+
+                    <div key={key} className="col-12 col-lg-6 col-xl-3">
+                        <div className="card card-statistics text-center py-3">
+                            <div className="card-body pricing-content">
+                                <div className="pricing-content-card">
+                                    <h5>{value.display_name}</h5>
+                                    <h2 className="text-primary pt-3">${value.monthly}</h2>
+                                    <p className="text-primary pb-3">/ Monthly</p>
+                                        <ul className="py-2">
+                                            {value?.items?.map(item =>(
+                                            <li key={item}>{item}</li>
+                                            ))}
+                                        </ul>
+                                    <div className="pt-2">
+                                        <button className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    ))}
+                </>
+
+            </div>
+        }
+        </>
+    )
+}

src/css/partials/_header.scss

@@ -588,11 +588,16 @@
                     left: 0px;
                 }
             }
-            .show + .dropdown-menu{
-                margin-top: 0;
-                visibility: visible;
-                opacity: 1;
+            .show{
+                margin-top: 0!important;
+                visibility: visible!important;
+                opacity: 1!important;
             }
+            // .show + .dropdown-menu{
+            //     margin-top: 0;
+            //     visibility: visible;
+            //     opacity: 1;
+            // }
             // .show {
             //     .dropdown-menu{
             //         margin-top: 0;

src/css/style.scss

@@ -90,7 +90,18 @@ $today-highlight-bg: #fcf8e3;
 $btn-bg: #8e54e9;
 $btn-border: #8e54e9;
 $event-padding: 10px;
-
+.manage{
+  background-color:lightgreen !important;
+  border-radius: 5px !important;
+}
+.creating{
+  background-color: lightyellow !important;
+  border-radius: 5px !important;
+}
+.billing{
+  background-color: darkgoldenrod;
+  color: white;
+}
 .extraProductCard{
   background-color: aliceblue;
   border-radius: 5px;

src/links/siteLinks.js

@@ -7,13 +7,16 @@ const siteLinks = {
     contacts: '/contacts',
     comments: '/comments',
     reports: '/reports',
+    subscription: '/subscription',
+    onboard: '/subscription',
     user: '/user',
     calendar: '/calendar',
     settings: '/settings',
     login: '/auth/login',
     signup: '/auth/signup',
     forgetpwd: '/auth/forgetpwd',
-    csignup: '/csignup/:jwt'
+    csignup: '/csignup/:jwt',
+    accreset: '/accreset/:token'
 }
 
 export default siteLinks

src/services/queryKeys.js

@@ -1,12 +1,15 @@
 const queryKeys = {
     user_details: ['user_details'],
+    product_url: ['product_url'],
+    products: ['product-data'],
+    myproduct_provision: ['myproduct_provision'],
+    product_page: ['product_page'],
+    recentAction: ['recent-action'],
+    settingsData: ['settings_data'],
+    subscriptions: ['subscriptions'],
     
     dashboard: ['dashboard'],
     topBar: ['top-bar'],
-    recentAction: ['recent-action'],
-    product: ['product-data'],
-    product_url: ['product_url'],
-    myproduct_provision: ['myproduct_provision'],
     calendar_events: ['calendar_events'],
     contacts: ['contacts']
 }

src/services/services.js

@@ -99,6 +99,30 @@ export const contactData = (reqData) => {
     return postAuxEnd(`/panel/contacts`, postData, false)
 }
 
+// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
+export const productsURL = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products/url`, postData, false)
+}
+
+// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
+export const productsData = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products`, postData, false)
+}
+
+// FUNCTION TO REFRESH SITE
+export const productRefreshSite = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products/refresh`, postData, false)
+}
+
 // FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
 export const recentActions = (reqData) => {
     let postData = {
@@ -110,12 +134,44 @@ export const recentActions = (reqData) => {
     return postAuxEnd(`/panel/account/actions`, postData, false)
 }
 
-// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
-export const productsData = (reqData) => {
+// FUNCTION TO VERIFY RESET TOKEN
+export const verifyResetToken = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/panel/auth/resetverify', postData, false)
+}
+
+// FUNCTION TO COMPLETE PASSWORD RESET
+export const completePWDReset = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/panel/auth/resetcomplete', postData, false)
+}
+
+// FUNCTION TO SUBMIT PAGE TAB SETTINGS
+export const pageSettings = (reqData) => {
     let postData = {
         ...reqData,
     }
-    return postAuxEnd(`/panel/account/products`, postData, false)
+    return postAuxEnd(`/panel/myproduct/settings`, postData, false)
+}
+
+// FUNCTION TO GET SETTINGS DATA
+export const getSettingsData = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/myproduct/settings/values`, postData, false)
+}
+
+// FUNCTION TO GET PRODUCT SUBSCRIPTIONS
+export const getSubscriptions = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/subscription/products`, postData, false)
 }
 
 
@@ -123,17 +179,6 @@ export const productsData = (reqData) => {
 
 
 
-// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
-export const productsURL = (reqData) => {
-    let postData = {
-        ...reqData,
-        token: localStorage.getItem('token'), // USER TOKEN
-        uid: localStorage.getItem('uid') // USER UID
-    }
-    return postAuxEnd(`/panel/account/products/url`, postData, false)
-    // return getAuxEnd(`/panel/account/products/url`)
-}
-
 // FUNCTION TO REGISTER USER
 export const signUpUser = (reqData) => {
     let postData = {

src/views/AccPWDResetPage.jsx

@@ -0,0 +1,7 @@
+import AccPWDReset from '../component/auth/AccPWDReset'
+
+export default function AccPWDResetPage() {
+  return (
+    <AccPWDReset />
+  )
+}

src/views/OnboardPage.jsx

@@ -0,0 +1,7 @@
+
+import Onboard from '../component/onboard/Onboard';
+
+
+export default function OnboardPage(){
+    return <Onboard />
+}

src/views/SubscriptionPage.jsx

@@ -0,0 +1,7 @@
+
+import Subscription from '../component/subscription/Subscription';
+
+
+export default function SubscriptionPage(){
+    return <Subscription />
+}