Compare commits

...

4 Commits

Author SHA1 Message Date
victorAnumudu 4bc985892e redirects to /start on complete signup 2025-09-04 11:43:48 +01:00
CHIEFSOFT\ameye c951f925d8 panel data key 2025-09-03 21:00:28 -04:00
CHIEFSOFT\ameye 1681ca1437 Start page 2025-09-02 14:58:59 -04:00
ameye d2cb38f141 Merge branch 'template-endpoint' of MERMS/MermsPanelReactJS into master 2025-09-01 20:10:56 +00:00
6 changed files with 295 additions and 177 deletions
+41 -39
View File
@@ -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';
@@ -23,47 +23,49 @@ import SubscriptionPage from './views/SubscriptionPage';
import OnboardPage from "./views/OnboardPage";
import AccPWDResetPage from './views/AccPWDResetPage';
import ProfileCompletePage from './views/ProfileCompletePage';
import SubscribePage from './views/Subscribe'
import SubscribePage from './views/Subscribe'
import StartPage from "./views/StartPage";
function AppRouters() {
return (
<div className="">
<Routes>
<Route element={<BearerToken />}>
{/* auth routes wrapper */}
<Route element={<AuthLayout />}>
<Route path={siteLinks.home} element={<LoginPage />} />
<Route path={siteLinks.login} element={<LoginPage />} />
<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>
return (
<div className="">
<Routes>
<Route element={<BearerToken/>}>
{/* auth routes wrapper */}
<Route element={<AuthLayout/>}>
<Route path={siteLinks.home} element={<LoginPage/>}/>
<Route path={siteLinks.login} element={<LoginPage/>}/>
<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>
{/* protected routes */}
<Route element={<SocketIOContextProvider />}>
<Route element={<UserExist />}>
<Route path={siteLinks.dash} element={<HomePage />} />
<Route path={siteLinks.profile_complete} element={<ProfileCompletePage />} />
<Route path={siteLinks.product} element={<ProductPage />} />
<Route path={siteLinks.reports} element={<ReportsPage />} />
<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.subscription_success} element={<SubscriptionPage />} />
<Route path={siteLinks.onboard} element={<OnboardPage />} />
<Route path={siteLinks.calendar} element={<CalendarPage />} />
<Route path={siteLinks.settings} element={<SettingsPage />} />
<Route path={siteLinks.subscribe} element={<SubscribePage />} />
<Route path={siteLinks.help} element={<HelpPage />} />
</Route>
</Route>
</Route>
</Routes>
</div>
);
{/* 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/>}/>
<Route path={siteLinks.reports} element={<ReportsPage/>}/>
<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.subscription_success} element={<SubscriptionPage/>}/>
<Route path={siteLinks.onboard} element={<OnboardPage/>}/>
<Route path={siteLinks.calendar} element={<CalendarPage/>}/>
<Route path={siteLinks.settings} element={<SettingsPage/>}/>
<Route path={siteLinks.subscribe} element={<SubscribePage/>}/>
<Route path={siteLinks.help} element={<HelpPage/>}/>
</Route>
</Route>
</Route>
</Routes>
</div>
);
}
export default AppRouters;
+1 -1
View File
@@ -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)
+153 -137
View File
@@ -1,158 +1,174 @@
import React, {memo, useEffect, useMemo, useState} from 'react'
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { pageSettings } from "../../../services/services";
import {useMutation, useQueryClient} from "@tanstack/react-query";
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()
const queryClient = useQueryClient()
const [reqStatus, setReqStatus] = useState({error: null, message: ''})
const [reqStatus, setReqStatus] = useState({error: null, message: ''})
// const computeFieldData = useMemo(()=>{
// const fieldData = {}
// Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
// fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
// })
// backendValues?.data?.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
// })
// return fieldData
// },[backendValues.data])
const [fields, setFields] = useState({})
// const computeFieldData = useMemo(()=>{
// const fieldData = {}
// Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
// fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
// })
// backendValues?.data?.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
// })
// return fieldData
// },[backendValues.data])
useEffect(()=>{
const fieldData = {}
Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
})
backendValues?.data?.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
})
setFields(fieldData)
},[backendValues.data])
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: () => {
queryClient.refetchQueries({ // refetches productProvision API call
queryKey: [...queryKeys.settingsData],
const [fields, setFields] = useState({})
useEffect(() => {
const fieldData = {}
Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
})
setTimeout(()=>{
setReqStatus({error: null, message: ''})
},3000)
},
})
backendValues?.data?.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
})
setFields(fieldData)
}, [backendValues.data])
const handleSubmit = () => {
const reqData = {
token: localStorage.getItem('token'), // USER TOKEN
uid: localStorage.getItem('uid'), // USER UID
product_id: productData?.product_id,
settings : {
...fields
}
const handleChange = ({target: {name, value}}) => {
setFields(prev => ({...prev, [name]: value}))
setFieldsChanged(true)
}
submitSettings.mutate(reqData)
}
return (
<>
{backendValues?.isFetching || !backendValues?.data ?
<>
<div className="row">
<div className="col-12">
<p className='text-mute'>Loading...</p>
</div>
</div>
</>
: backendValues?.isError ?
<div className="row">
<div className="col-12">
<p className='text-danger'>{backendValues?.error.message}</p>
</div>
</div>
:
<>
{isCustom === true ?
<SiteTemplateSelector name={name} data={data} isCustom={isCustom} productData={productData} />
:
<div className="page-account-form">
<div className="p-0" style={{ minHeight: '500px'}}>
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: () => {
queryClient.refetchQueries({ // refetches productProvision API call
queryKey: [...queryKeys.settingsData],
})
setTimeout(() => {
setReqStatus({error: null, message: ''})
}, 3000)
},
})
<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} />
<div className='position-relative'>
<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%)'}} />
</div>
:
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>
const handleSubmit = () => {
const reqData = {
token: localStorage.getItem('token'), // USER TOKEN
uid: localStorage.getItem('uid'), // USER UID
product_id: productData?.product_id,
settings: {
...fields
}
}
submitSettings.mutate(reqData)
}
return (
<>
{backendValues?.isFetching || !backendValues?.data ?
<>
<div className="row">
<div className="col-12">
<p className='text-mute'>Loading...</p>
</div>
</div>
</form>
</div>
</div>
}
</>
: backendValues?.isError ?
<div className="row">
<div className="col-12">
<p className='text-danger'>{backendValues?.error.message}</p>
</div>
</div>
:
<>
{isCustom === true ?
<SiteTemplateSelector name={name} data={data} isCustom={isCustom}
productData={productData}/>
:
<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 = key; // value.key.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' ?
<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} />
<div className='position-relative'>
<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%)'
}}/>
</div>
:
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>
}
</>
}
</>
}
</>
)
)
}
)
+92
View File
@@ -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>
</>
)
}
+1
View File
@@ -3,6 +3,7 @@ const siteLinks = {
help: '/help',
home: '/',
dash: '/dash',
start: '/start',
profile_complete: '/profile-complete',
product: '/product/*',
contacts: '/contacts',
+7
View File
@@ -0,0 +1,7 @@
import Start from "../component/start/Start";
export default function StartPage(){
return <Start />
}