redirects to /start on complete signup

src/AppRouters.jsx

@@ -1,4 +1,4 @@
-import { Routes, Route } from 'react-router-dom';
+import {Routes, Route} from 'react-router-dom';
 
 import UserExist from './component/authorization/UserExist';
 import AuthLayout from './component/auth/AuthLayout';
@@ -24,40 +24,42 @@ import OnboardPage from "./views/OnboardPage";
 import AccPWDResetPage from './views/AccPWDResetPage';
 import ProfileCompletePage from './views/ProfileCompletePage';
 import SubscribePage from './views/Subscribe'
+import StartPage from "./views/StartPage";
 
 function AppRouters() {
     return (
         <div className="">
             <Routes>
-        <Route element={<BearerToken />}>
+                <Route element={<BearerToken/>}>
                     {/* auth routes wrapper */}
-          <Route element={<AuthLayout />}>
+                    <Route element={<AuthLayout/>}>
-            <Route path={siteLinks.home} element={<LoginPage />} />
+                        <Route path={siteLinks.home} element={<LoginPage/>}/>
-            <Route path={siteLinks.login} element={<LoginPage />} />
+                        <Route path={siteLinks.login} element={<LoginPage/>}/>
-            <Route path={siteLinks.signup} element={<SignupPage />} />
+                        <Route path={siteLinks.signup} element={<SignupPage/>}/>
-            <Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
+                        <Route path={siteLinks.forgetpwd} element={<ForgetpwdPage/>}/>
-            <Route path={siteLinks.csignup} element={<CSignupPage />} />
+                        <Route path={siteLinks.csignup} element={<CSignupPage/>}/>
-            <Route path={siteLinks.accreset} element={<AccPWDResetPage />} />
+                        <Route path={siteLinks.accreset} element={<AccPWDResetPage/>}/>
-            <Route path={siteLinks.error} element={<LoginPage />} />
+                        <Route path={siteLinks.error} element={<LoginPage/>}/>
                     </Route>
 
                     {/* protected routes */}
-          <Route element={<SocketIOContextProvider />}>
+                    <Route element={<SocketIOContextProvider/>}>
-            <Route element={<UserExist />}> 
+                        <Route element={<UserExist/>}>
-              <Route path={siteLinks.dash} element={<HomePage />} />
+                            <Route path={siteLinks.start} element={<StartPage/>}/>
-              <Route path={siteLinks.profile_complete} element={<ProfileCompletePage />} />
+                            <Route path={siteLinks.dash} element={<HomePage/>}/>
-              <Route path={siteLinks.product} element={<ProductPage />} />
+                            <Route path={siteLinks.profile_complete} element={<ProfileCompletePage/>}/>
-              <Route path={siteLinks.reports} element={<ReportsPage />} />
+                            <Route path={siteLinks.product} element={<ProductPage/>}/>
-              <Route path={siteLinks.comments} element={<CommentsPage />} />
+                            <Route path={siteLinks.reports} element={<ReportsPage/>}/>
-              <Route path={siteLinks.contacts} element={<ContactsPage />} />
+                            <Route path={siteLinks.comments} element={<CommentsPage/>}/>
-              <Route path={siteLinks.user} element={<UserPage />} />
+                            <Route path={siteLinks.contacts} element={<ContactsPage/>}/>
-              <Route path={siteLinks.subscription} element={<SubscriptionPage />} />
+                            <Route path={siteLinks.user} element={<UserPage/>}/>
-              <Route path={siteLinks.subscription_success} element={<SubscriptionPage />} />
+                            <Route path={siteLinks.subscription} element={<SubscriptionPage/>}/>
-              <Route path={siteLinks.onboard} element={<OnboardPage />} />
+                            <Route path={siteLinks.subscription_success} element={<SubscriptionPage/>}/>
-              <Route path={siteLinks.calendar} element={<CalendarPage />} />
+                            <Route path={siteLinks.onboard} element={<OnboardPage/>}/>
-              <Route path={siteLinks.settings} element={<SettingsPage />} />
+                            <Route path={siteLinks.calendar} element={<CalendarPage/>}/>
-              <Route path={siteLinks.subscribe} element={<SubscribePage />} />
+                            <Route path={siteLinks.settings} element={<SettingsPage/>}/>
-              <Route path={siteLinks.help} element={<HelpPage />} />
+                            <Route path={siteLinks.subscribe} element={<SubscribePage/>}/>
+                            <Route path={siteLinks.help} element={<HelpPage/>}/>
                         </Route>
                     </Route>
                 </Route>

src/component/auth/CSignup.jsx

@@ -66,7 +66,7 @@ export default function CSignup() {
         localStorage.setItem('room', room)
         localStorage.setItem('uid', uid)
         dispatch(updateUserDetails({ ...res?.data }));
-        navigate('/dash') // later add redux to dispatch state
+        navigate(siteLinks.start, {replace: true}) // later add redux to dispatch state
     },
     // onError: (err) => {
     //     console.log('err', err)

src/component/product/settingsTab/GeneralTab.jsx

@@ -1,12 +1,12 @@
 import React, {memo, useEffect, useMemo, useState} from 'react'
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {useMutation, useQueryClient} from "@tanstack/react-query";
-import { pageSettings } from "../../../services/services";
+import {pageSettings} from "../../../services/services";
 import SiteTemplateSelector from './SiteTemplateSelector';
 import NoYesBooleanDropdown from './NoYesBooleanDropdown';
-import { IoMdArrowDropdown } from 'react-icons/io';
+import {IoMdArrowDropdown} from 'react-icons/io';
 import queryKeys from '../../../services/queryKeys';
 
-const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
+const GeneralTab = memo(({name = 'Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) => {
 
         const queryClient = useQueryClient()
 
@@ -27,7 +27,7 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
 
         const [fields, setFields] = useState({})
 
-    useEffect(()=>{
+        useEffect(() => {
             const fieldData = {}
             Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
                 fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
@@ -36,10 +36,10 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
                 fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
             })
             setFields(fieldData)
-    },[backendValues.data])
+        }, [backendValues.data])
 
-    const handleChange = ({target:{name, value}}) => {
+        const handleChange = ({target: {name, value}}) => {
-        setFields(prev => ({...prev, [name]:value}))
+            setFields(prev => ({...prev, [name]: value}))
             setFieldsChanged(true)
         }
 
@@ -48,7 +48,7 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
                 return pageSettings(fields)
             },
             onSuccess: (res) => {
-            if(res?.data?.resultCode != '0'){
+                if (res?.data?.resultCode != '0') {
                     return setReqStatus({error: true, message: 'Unable to complete, try again later'})
                 }
                 setFieldsChanged(false)
@@ -61,9 +61,9 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
                 queryClient.refetchQueries({  // refetches productProvision API call
                     queryKey: [...queryKeys.settingsData],
                 })
-            setTimeout(()=>{
+                setTimeout(() => {
                     setReqStatus({error: null, message: ''})
-            },3000)
+                }, 3000)
             },
         })
 
@@ -72,7 +72,7 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
                 token: localStorage.getItem('token'), // USER TOKEN
                 uid: localStorage.getItem('uid'), // USER UID
                 product_id: productData?.product_id,
-            settings : {
+                settings: {
                     ...fields
                 }
             }
@@ -98,33 +98,48 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
                         :
                         <>
                             {isCustom === true ?
-            <SiteTemplateSelector  name={name} data={data} isCustom={isCustom} productData={productData} />
+                                <SiteTemplateSelector name={name} data={data} isCustom={isCustom}
+                                                      productData={productData}/>
                                 :
                                 <div className="page-account-form">
-                <div className="p-0" style={{ minHeight: '500px'}}>
+                                    <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 fieldName = key; // value.key.toLowerCase().replaceAll(" ", "_")
-                                    let fieldValue = fields[value.name.toLowerCase().replaceAll(" ", "_")]
+                                                            let fieldValue = fields[key]; //fields[value.name.toLowerCase().replaceAll(" ", "_")]
                                                             return (
                                                                 <div key={key} className="form-group col-md-12">
                                                                     <label htmlFor="name1">{value.name}</label>
-                                            {value.controls == 'TEXT' ?
+                                                                    {value.controls === 'TEXT' ?
-                                                <input name={fieldName} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
+                                                                        <input name={fieldName} type="text"
-                                                :value.controls == 'TEXTAREA' ?
+                                                                               className="form-control" id={key}
-                                                <textarea name={fieldName} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
+                                                                               value={fieldValue} onChange={handleChange}/>
-                                                : value.controls == 'SELECT_NO_YES' ?
+                                                                        : 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}  />
                                                                                 <div className='position-relative'>
-                                                    <select onChange={handleChange} name={fieldName} value={fieldValue} className="form-control">
+                                                                                    <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>
-                                                    <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />                                               
+                                                                                    <IoMdArrowDropdown
+                                                                                        className='position-absolute w-auto'
+                                                                                        style={{
+                                                                                            top: '50%',
+                                                                                            right: '2px',
+                                                                                            transform: 'translateY(-50%)'
+                                                                                        }}/>
                                                                                 </div>
                                                                                 :
                                                                                 null
@@ -141,8 +156,9 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
                                                         </div>
                                                     </>
                                                 }
-                            <div className="form-group col-md-12" style={{textAlign:'right'}}>
+                                                <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>
+                                                    <button onClick={handleSubmit} type="button" className="btn btn-primary"
+                                                            disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button>
                                                 </div>
                                             </div>
                                         </form>

src/component/start/Start.jsx

@@ -0,0 +1,92 @@
+import React from "react";
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+
+
+export default function Start(){
+
+    return(
+        <>
+            <BreadcrumbComBS title='Get Started...' paths={['Dashboard', 'Start']} />
+            <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>Premium</h5>*/}
+                            {/*    <h2 className="text-primary pt-3">$150</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-primary btn-round btn-sm">go premium</a></div>*/}
+                            {/*</div>*/}
+                        </div>
+                    </div>
+                </div>
+
+                <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>Start with</h5>
+                                <h2 className="text-primary pt-3" ><a href="/product/A000001">Personal Website</a></h2>
+                                <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="/product/A000001" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <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>Start with</h5>
+                                <h2 className="text-primary pt-3"><a href="/product/A000002">Business Website</a></h2>
+                                <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="/product/A000001" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <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>small</h5>*/}
+                            {/*    <h2 className="text-primary pt-3">$80</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 premium</a></div>*/}
+                            {/*</div>*/}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </>
+    )
+}

src/links/siteLinks.js

@@ -3,6 +3,7 @@ const siteLinks = {
     help: '/help',
     home: '/',
     dash: '/dash',
+    start: '/start',
     profile_complete: '/profile-complete',
     product: '/product/*',
     contacts: '/contacts',

src/views/StartPage.jsx

@@ -0,0 +1,7 @@
+
+import Start from "../component/start/Start";
+
+
+export default function StartPage(){
+    return <Start />
+}