redirects to /start on complete signup

src/AppRouters.jsx

@@ -24,6 +24,7 @@ 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 (
@@ -44,6 +45,7 @@ function AppRouters() {
                     {/* protected routes */}
                     <Route element={<SocketIOContextProvider/>}>
                         <Route element={<UserExist/>}>
+                            <Route path={siteLinks.start} element={<StartPage/>}/>
                             <Route path={siteLinks.dash} element={<HomePage/>}/>
                             <Route path={siteLinks.profile_complete} element={<ProfileCompletePage/>}/>
                             <Route path={siteLinks.product} element={<ProductPage/>}/>

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

@@ -98,7 +98,8 @@ 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'}}>
@@ -107,24 +108,38 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
                                             <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
@@ -142,7 +157,8 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
                                                     </>
                                                 }
                                                 <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 />
+}