Compare commits
36 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
b535a656a0 | ||
|
CHIEFSOFT\ameye
|
e69cc9130e | ||
|
CHIEFSOFT\ameye
|
daafb66cbb | ||
|
CHIEFSOFT\ameye
|
3852468afe | ||
|
CHIEFSOFT\ameye
|
d32204e08f | ||
|
CHIEFSOFT\ameye
|
8372209923 | ||
|
CHIEFSOFT\ameye
|
6c3f96d9a3 | ||
|
CHIEFSOFT\ameye
|
c25acecb1a | ||
|
CHIEFSOFT\ameye
|
3f5ae4685e | ||
 ameye
|
a80298c824 | ||
|
victorAnumudu
|
e9bc1c1318 | ||
|
ameye
|
2543a91b19 | ||
|
victorAnumudu
|
4c38b0a31f | ||
|
ameye
|
6ed396a34c | ||
|
victorAnumudu
|
465a480f02 | ||
|
CHIEFSOFT\ameye
|
4409ed45f3 | ||
|
CHIEFSOFT\ameye
|
470c94ae5e | ||
|
CHIEFSOFT\ameye
|
52fd4275e9 | ||
|
CHIEFSOFT\ameye
|
0dadaf00b0 | ||
|
CHIEFSOFT\ameye
|
0fbe0f4c3f | ||
|
CHIEFSOFT\ameye
|
464182e583 | ||
|
ameye
|
517886df7e | ||
|
victorAnumudu
|
3db5d56410 | ||
|
CHIEFSOFT\ameye
|
6c107c8000 | ||
|
ameye
|
225a3d36e4 | ||
|
victorAnumudu
|
f66f92c58d | ||
|
CHIEFSOFT\ameye
|
599e8a7715 | ||
|
ameye
|
97b75e0d9b | ||
|
victorAnumudu
|
4bc985892e | ||
|
CHIEFSOFT\ameye
|
c951f925d8 | ||
|
CHIEFSOFT\ameye
|
1681ca1437 | ||
|
ameye
|
d2cb38f141 | ||
|
victorAnumudu
|
67d26f6ab0 | ||
|
ameye
|
72dc343d01 | ||
|
victorAnumudu
|
4969ad1ae4 | ||
|
ameye
|
9e33578ef2 |
@@ -14,6 +14,10 @@
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.border-radius-10 {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.login-links{
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
|
||||
+43
-39
@@ -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,51 @@ 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";
|
||||
import TrafficPage from "./views/TrafficPage";
|
||||
|
||||
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.traffic} element={<TrafficPage/>}/>
|
||||
<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;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@@ -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)
|
||||
|
||||
@@ -93,13 +93,13 @@ export default function Login() {
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className="control-label text-black fw-bold">User Name*</label>
|
||||
<input maxLength={55} name='username' value={fields.username} onChange={handleChange} type="text" className="form-control" placeholder="Username" />
|
||||
<input maxLength={25} name='username' value={fields.username} onChange={handleChange} type="text" className="form-control" placeholder="Username" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className="control-label text-black fw-bold">Password*</label>
|
||||
<input maxLength={55} name='password' value={fields.password} onChange={handleChange} type="password" className="form-control" placeholder="Password" />
|
||||
<input maxLength={25} name='password' value={fields.password} onChange={handleChange} type="password" className="form-control" placeholder="Password" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
|
||||
@@ -82,9 +82,13 @@ export default function Signup() {
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<hr />
|
||||
<p className='font-medium'>Already have an account ?
|
||||
<Link to={siteLinks.login}
|
||||
className='hover:text-primary font-bold'> Sign In
|
||||
className='bg-secondary; hover:text-primary font-bold' style={{paddingRight: '10px'}}>
|
||||
<button className="btn btn-warning text-uppercase">
|
||||
Sign In
|
||||
</button>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
+150
-111
@@ -1,101 +1,119 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Form, Formik } from "formik";
|
||||
import React, {useState} from 'react'
|
||||
import {Form, Formik} from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
// import LoginImg from '../../assets/bg/login.svg'
|
||||
|
||||
import { Link } from 'react-router-dom'
|
||||
import {Link} from 'react-router-dom'
|
||||
import siteLinks from '../../links/siteLinks'
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { signUpUser } from '../../services/services';
|
||||
import {useMutation} from '@tanstack/react-query';
|
||||
import {signUpUser} from '../../services/services';
|
||||
import getImage from '../../utils/getImage';
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
email: Yup.string()
|
||||
.email("Wrong email format")
|
||||
// .matches(
|
||||
// /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
|
||||
// "Invalid email format"
|
||||
// )
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(50, "Maximum 50 characters")
|
||||
.required("Email is required"),
|
||||
.email("Wrong email format")
|
||||
// .matches(
|
||||
// /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
|
||||
// "Invalid email format"
|
||||
// )
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(50, "Maximum 50 characters")
|
||||
.required("Email is required"),
|
||||
firstname: Yup.string().required("Firstname is required"),
|
||||
lastname: Yup.string().required("Lastname is required"),
|
||||
isChecked: Yup.bool().oneOf([true], "Please accept the terms & policy"), // use bool instead of boolean
|
||||
// username: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
|
||||
// password: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
|
||||
})
|
||||
})
|
||||
|
||||
const initialValues = {
|
||||
const initialValues = {
|
||||
email: '',
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
isChecked: false,
|
||||
// username: '',
|
||||
// password: ''
|
||||
};
|
||||
};
|
||||
|
||||
export default function Signup2() {
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return signUpUser(fields)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
console.log('res', res)
|
||||
const mutation = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return signUpUser(fields)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
console.log('res', res)
|
||||
}
|
||||
})
|
||||
|
||||
const signUp = (values) => {
|
||||
// helpers.resetForm()
|
||||
// console.log('values', values, helpers)
|
||||
delete values.isChecked
|
||||
mutation.mutate(values)
|
||||
}
|
||||
})
|
||||
|
||||
const signUp = (values) => {
|
||||
// helpers.resetForm()
|
||||
// console.log('values', values, helpers)
|
||||
delete values.isChecked
|
||||
mutation.mutate(values)
|
||||
}
|
||||
|
||||
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">{process.env.REACT_APP_PANEL_NAME}</h1>
|
||||
<p>Welcome, Please create your account.</p>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={signUp}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className='mt-2 mt-sm-5'>
|
||||
<div className="row">
|
||||
{!mutation.isSuccess ?
|
||||
<>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First Name*</label>
|
||||
<input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
|
||||
<input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
|
||||
<input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="col-12">
|
||||
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">{process.env.REACT_APP_PANEL_NAME}</h1>
|
||||
<p>Welcome, Please create your account.</p>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={signUp}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className='mt-2 mt-sm-5'>
|
||||
<div className="row">
|
||||
{!mutation.isSuccess ?
|
||||
<>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="form-group">
|
||||
<label
|
||||
className={`text-black fw-bold control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First
|
||||
Name*</label>
|
||||
<input type="text" name='firstname'
|
||||
className="form-control"
|
||||
placeholder="First Name"
|
||||
value={props.values.firstname}
|
||||
onChange={props.handleChange}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="form-group">
|
||||
<label
|
||||
className={`text-black fw-bold control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last
|
||||
Name*</label>
|
||||
<input type="text" name='lastname'
|
||||
className="form-control"
|
||||
placeholder="Last Name"
|
||||
value={props.values.lastname}
|
||||
onChange={props.handleChange}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label
|
||||
className={`text-black fw-bold control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
|
||||
<input type="email" name='email'
|
||||
className="form-control"
|
||||
placeholder="Email"
|
||||
value={props.values.email}
|
||||
onChange={props.handleChange}/>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
|
||||
<input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
|
||||
@@ -107,62 +125,83 @@ export default function Signup2() {
|
||||
<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-check">
|
||||
<input name='isChecked' className="form-check-input" type="checkbox" id="gridCheck" value={props.values.isChecked} onChange={props.handleChange} />
|
||||
<label className="form-check-label" htmlFor="gridCheck">
|
||||
I accept terms & policy
|
||||
</label>
|
||||
</div>
|
||||
<span className={`${(props.errors.isChecked && props.touched.isChecked) && 'text-danger'}`}>{props.errors.isChecked}</span>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input name='isChecked'
|
||||
className="form-check-input"
|
||||
type="checkbox" id="gridCheck"
|
||||
value={props.values.isChecked}
|
||||
onChange={props.handleChange}/>
|
||||
<label className="form-check-label"
|
||||
htmlFor="gridCheck">
|
||||
I accept terms & policy
|
||||
</label>
|
||||
</div>
|
||||
<span
|
||||
className={`${(props.errors.isChecked && props.touched.isChecked) && 'text-danger'}`}>{props.errors.isChecked}</span>
|
||||
</div>
|
||||
|
||||
{mutation.error &&
|
||||
<>
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{mutation.error.message}</p>
|
||||
</div>
|
||||
{mutation.error &&
|
||||
<>
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{mutation.error.message}</p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
<div className="col-12 mt-3 text-end">
|
||||
<button type='submit'
|
||||
className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
<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'
|
||||
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>
|
||||
}
|
||||
|
||||
<div className="col-12 mt-3 text-end">
|
||||
<button type='submit' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
<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' 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 className="col-12 mt-3">
|
||||
<p>Already have an account ?<Link
|
||||
to={siteLinks.login}>
|
||||
<button
|
||||
className="btn btn-warning text-uppercase">
|
||||
Sign In
|
||||
</button>
|
||||
</Link></p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className="col-12 mt-3">
|
||||
<p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="signup-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||
{/* <div className="signup-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>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
+323
-532
@@ -1,558 +1,349 @@
|
||||
import React from "react";
|
||||
"use client";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import getImage from "../../utils/getImage";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { commentsData } from "../../services/services";
|
||||
import queryKeys from "../../services/queryKeys";
|
||||
import getCustomTime from "../../utils/getCustomTime";
|
||||
|
||||
export default function Comments() {
|
||||
// const {data:contacts, isFetching, isError, error} = useQuery({
|
||||
// queryKey: queryKeys.contacts,
|
||||
// queryFn: () => contactData()
|
||||
// })
|
||||
|
||||
const [activeCategoryUID, setActiveCategoryUID] = useState("0"); // HOLDS VALUE OF THE ACTIVE CATEGORY
|
||||
|
||||
const [activeContactUID, setActiveContactUID] = useState("");
|
||||
const [activeDetail, setActiveDetail] = useState([]);
|
||||
|
||||
const [filteredContactData, setFiltererdContactData] = useState([]);
|
||||
|
||||
const getContactData = useMutation({
|
||||
mutationFn: (reqData) => {
|
||||
return commentsData(reqData);
|
||||
},
|
||||
onError: (error) => {
|
||||
console.log(error);
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if (res?.data?.resultCode != "0") {
|
||||
throw { message: "Something went wrong" };
|
||||
}
|
||||
setFiltererdContactData(res?.data?.contacts);
|
||||
},
|
||||
});
|
||||
|
||||
const changeActiveUID = (uid) => {
|
||||
setActiveContactUID(uid);
|
||||
let detail = contactsData.filter((item) => item.uid == uid);
|
||||
setActiveDetail(detail);
|
||||
};
|
||||
|
||||
const changeActiveCategoryUID = (id) => {
|
||||
let filteredConData = [];
|
||||
setActiveCategoryUID(id);
|
||||
if (id == "0") {
|
||||
filteredConData = contactsData;
|
||||
} else {
|
||||
filteredConData = contactsData.filter((item) => item.category == id);
|
||||
}
|
||||
setFiltererdContactData(filteredConData);
|
||||
changeActiveUID(filteredConData[0]?.uid);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let reqData = {
|
||||
token: localStorage.getItem("token"), // USER TOKEN
|
||||
uid: localStorage.getItem("uid"), // USER UID
|
||||
};
|
||||
getContactData.mutate(reqData);
|
||||
}, []);
|
||||
|
||||
const contactsData = getContactData?.data?.data?.contacts; // LIST OF CONTACTS
|
||||
const contactsCategory = getContactData?.data?.data?.category; // LIST OF CATEGORY
|
||||
|
||||
return (
|
||||
<>
|
||||
<BreadcrumbComBS title="Comments" paths={["Dashboard", "Comments"]} />
|
||||
<div className="row">
|
||||
{/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
||||
<div className="col-12">
|
||||
<div className="card card-statistics mail-contant">
|
||||
<div className="card-body p-0">
|
||||
<div className="row no-gutters">
|
||||
<div className="col-md-4 col-xxl-2 col-md-4">
|
||||
<div className="mail-sidebar">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-12">
|
||||
<div className="text-center mail-sidebar-title px-4">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="btn btn-primary btn-block py-3 font-weight-bold font-18"
|
||||
>
|
||||
<i className="fa fa-plus pl-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="px-4 py-4">
|
||||
<ul className="pl-0">
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-envelope-o text-primary pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Inbox</span>
|
||||
</span>
|
||||
<span className="nav-item ml-auto text-right">
|
||||
<span className="badge badge-pill badge-primary float-right">
|
||||
0+
|
||||
<>
|
||||
<BreadcrumbComBS title="Comments" paths={["Dashboard", "Comments"]} />
|
||||
{getContactData?.isPending ? (
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className="text-mute">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : getContactData?.error ? (
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className="text-danger">{getContactData?.error?.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="row">
|
||||
{/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="card card-statistics mail-contant"
|
||||
style={{ minHeight: "200px", borderRadius: "10px" }}
|
||||
>
|
||||
<div className="card-body p-0">
|
||||
<div className="row no-gutters">
|
||||
<div className="col-md-4 col-xxl-2 col-md-4">
|
||||
<div className="mail-sidebar">
|
||||
<div className="row justify-content-center">
|
||||
<div className="d-none col-12">
|
||||
<div className="text-center mail-sidebar-title px-4">
|
||||
<a
|
||||
href="#"
|
||||
className="btn btn-primary btn-block py-3 font-weight-bold font-18"
|
||||
>
|
||||
<i className="fa fa-plus pl-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="px-4 py-4">
|
||||
<ul className="pl-0">
|
||||
<li className="py-2">
|
||||
<a href="#">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-envelope-o text-primary pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Inbox</span>
|
||||
</span>
|
||||
<span className="nav-item ml-auto text-right">
|
||||
<span className="badge badge-pill badge-primary float-right">
|
||||
{contactsData?.length}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-paper-plane-o pr-4"></i>
|
||||
</a>
|
||||
</li>
|
||||
{/*<li className="py-2">*/}
|
||||
{/* <a href="#">*/}
|
||||
{/* <span*/}
|
||||
{/* className="nav align-items-center">*/}
|
||||
{/* <span>*/}
|
||||
{/* <i className="fa fa-paper-plane-o pr-4"></i>*/}
|
||||
{/* </span>*/}
|
||||
{/* <span>*/}
|
||||
{/* <span>Replied Mail</span>*/}
|
||||
{/* </span>*/}
|
||||
{/* </span>*/}
|
||||
{/* </a>*/}
|
||||
{/*</li>*/}
|
||||
</ul>
|
||||
|
||||
<ul className="pl-0 mt-5">
|
||||
<li
|
||||
className="py-2"
|
||||
onClick={() => changeActiveCategoryUID("0")}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<div>
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i
|
||||
className={`fa fa-circle-o pr-4 ${
|
||||
activeCategoryUID == "0"
|
||||
? "text-primary"
|
||||
: "text-warning"
|
||||
}`}
|
||||
></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>All</span>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
<span>Sent Mail</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="pl-0 mt-5">
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-circle-o text-danger pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Personal</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-circle-o pr-4 text-warning"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Work</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-plus pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Add Category</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-8 col-xxl-4 border-md-t">
|
||||
<div className="mail-content border-right border-n h-100">
|
||||
<div className="mail-search border-bottom">
|
||||
<div className="row align-items-center mx-0">
|
||||
<div className="col-12">
|
||||
<div className="form-group pt-3">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="search"
|
||||
placeholder="Search.."
|
||||
/>
|
||||
<i className="fa fa-search"></i>
|
||||
</div>
|
||||
</li>
|
||||
{contactsCategory &&
|
||||
contactsCategory.map((item) => (
|
||||
<li
|
||||
key={item?.cid}
|
||||
className="py-2"
|
||||
onClick={() =>
|
||||
changeActiveCategoryUID(`${item?.cid}`)
|
||||
}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<div>
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i
|
||||
className={`fa fa-circle-o pr-4 ${
|
||||
activeCategoryUID ==
|
||||
`${item?.cid}`
|
||||
? "text-primary"
|
||||
: "text-warning"
|
||||
}`}
|
||||
></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>{item?.description}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mail-msg scrollbar scroll_dark">
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/01.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Martin smith</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
||||
<p>
|
||||
Since there is not an "all the above" category,
|
||||
I'll take the opportunity to enthusiastically
|
||||
congratulate you on the very high quality.
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
<div className={`${filteredContactData.length > 0 ? 'col-md-8 col-xxl-4' : 'col-md-8 col-xxl-10'} border-md-t`}>
|
||||
<div className="mail-content border-right border-n h-100" style={{placeContent: 'center'}}>
|
||||
{/* <div className="mail-search border-bottom">
|
||||
<div className="row align-items-center mx-0">
|
||||
<div className="col-12">
|
||||
<div className="form-group pt-3">
|
||||
<input type="text" className="form-control" id="search" placeholder="Search.." />
|
||||
<i className="fa fa-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="mail-msg scrollbar scroll_dark">
|
||||
{ filteredContactData.length ?
|
||||
filteredContactData?.map((contact, index) => {
|
||||
const isActive =
|
||||
contact?.uid == activeContactUID ||
|
||||
(!activeContactUID && index == 0);
|
||||
const avtarImage =
|
||||
contact?.category === undefined
|
||||
? "avtar/01.jpg"
|
||||
: "avtar/" + contact.category + ".png";
|
||||
return (
|
||||
<div
|
||||
key={contact?.uid}
|
||||
onClick={() => changeActiveUID(contact?.uid)}
|
||||
className={`mail-msg-item ${
|
||||
isActive && "bg-light"
|
||||
}`}
|
||||
>
|
||||
<a href="#">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage(avtarImage)}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
color: "#148399",
|
||||
fontWeight: "bolder",
|
||||
}}
|
||||
>
|
||||
{contact?.sender}
|
||||
</span>
|
||||
</p>
|
||||
{/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
|
||||
<p className="d-none d-xl-block">
|
||||
<span style={{ fontSize: "14px" }}>
|
||||
{new Date(
|
||||
contact?.added
|
||||
).toDateString()}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">
|
||||
{contact?.title}
|
||||
</h5>
|
||||
<p>
|
||||
{contact?.message?.length < 100
|
||||
? contact?.message
|
||||
: contact?.message.substring(0, 101) +
|
||||
" ..."}
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
<span>
|
||||
{new Date(
|
||||
contact?.added
|
||||
).toDateString()}
|
||||
{/* {getCustomTime(contact.added)} */}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
:
|
||||
<p className="text-center">Messages will appear here as soon as they are available for selection</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/02.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
{filteredContactData.length > 0 &&
|
||||
<div className="col-xxl-6 border-t border-xxl-t">
|
||||
<div className="mail-chat py-5 px-5">
|
||||
<div className="media align-items-center">
|
||||
<div className="bg-img mr-3">
|
||||
<img
|
||||
src={activeContactUID ? getImage("avtar/" + activeDetail[0].category + ".png") : getImage(filteredContactData[0] == undefined ? "avtar/01.jpg": "avtar/" + filteredContactData[0].category + ".png")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0" style={{ color: "#148399" }}>
|
||||
{activeContactUID
|
||||
? activeDetail[0]?.sender
|
||||
: filteredContactData[0]?.sender}
|
||||
</h4>
|
||||
<p>
|
||||
{activeContactUID
|
||||
? new Date(activeDetail[0]?.added).toDateString()
|
||||
: new Date(
|
||||
filteredContactData[0]?.added
|
||||
).toDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>DutcaPatrick</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
<div className="mt-4 d-flex justify-content-between">
|
||||
<div>
|
||||
<h3>
|
||||
{activeContactUID
|
||||
? activeDetail[0]?.title
|
||||
: filteredContactData[0]?.title}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
{activeContactUID
|
||||
? activeDetail[0]?.message
|
||||
: filteredContactData[0]?.message}
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">
|
||||
Mobile app Designer{" "}
|
||||
</h5>
|
||||
<p>
|
||||
Very nice template, lots of pages and good
|
||||
documentation.
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/03.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>m_morsch</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">
|
||||
Landing page Designer
|
||||
</h5>
|
||||
<p>
|
||||
Excellent and at a great price... thank you very
|
||||
much!
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/04.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>AnnaHorno</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Re-Design ios app</h5>
|
||||
<p>
|
||||
Solved my theme problem in 10 minutes. We thank
|
||||
you.
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/05.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Wdcorbitt</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">
|
||||
Mobil UX/UI Designer
|
||||
</h5>
|
||||
<p>
|
||||
Asked for information and received it EXTREMELY
|
||||
quickly. Great layout - good code - great price!{" "}
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/06.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Anne Smith</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Jobly Opportunity</h5>
|
||||
<p>
|
||||
Mentor has so many features and layouts. Its a
|
||||
great choice.
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/07.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Paul Flavius</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
||||
<p>
|
||||
There are many people in the world with amazing
|
||||
talents who realize only a small percentage of
|
||||
their potential.{" "}
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/08.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Sara Lisbon</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">UI Designer</h5>
|
||||
<p>
|
||||
We can look a bit further back in time to Albert
|
||||
Einstein or even further back to Abraham
|
||||
Lincoln.
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/09.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Annahorno</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
||||
<p>
|
||||
One of the most difficult aspects of achieving
|
||||
success is staying motivated over the long haul.
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6 border-t border-xxl-t">
|
||||
<div className="mail-chat py-5 px-5">
|
||||
<div className="media align-items-center">
|
||||
<div className="bg-img mr-3">
|
||||
<img
|
||||
src={getImage("avtar/03.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0">Dutca Patrick</h4>
|
||||
<p>30 Min ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 d-flex justify-content-between">
|
||||
<div>
|
||||
<h3>Landing page Designer...</h3>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="my-4">hey adminjon...</p>
|
||||
<p className="mb-2">
|
||||
I truly believe Augustine’s words are true and if you
|
||||
look at history you know it is true. There are many
|
||||
people in the world with amazing talents who realize
|
||||
only a small percentage of their potential. We all know
|
||||
people who live this truth.
|
||||
</p>
|
||||
<p>
|
||||
We also know those epic stories, those modern-day
|
||||
legends surrounding the early failures of such supremely
|
||||
successful folks as Michael Jordan and Bill Gates. We
|
||||
can look a bit further back in time to Albert Einstein
|
||||
or even further back to Abraham Lincoln. What made each
|
||||
of these people so successful? Motivation.
|
||||
</p>
|
||||
<p>
|
||||
We know this in our gut, but what can we do about it?
|
||||
How can we motivate ourselves? One of the most difficult
|
||||
aspects of achieving success is staying motivated over
|
||||
the long haul.
|
||||
</p>
|
||||
<div className="my-5">
|
||||
<p>Have lovely Day,</p>
|
||||
<p>adminjon</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*<div className="d-md-flex px-5 py-4">*/}
|
||||
{/* <div className="flex-fill align-items-center">*/}
|
||||
{/* <div className="d-flex">*/}
|
||||
{/* <i className="ti ti-clip pr-3 font-22"></i>*/}
|
||||
{/* <p className="pr-3 font-weight-bold">Wireframe</p>*/}
|
||||
{/* <p>(220.MB)</p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="flex-fill text-left text-md-right"><a href="javascript:void(0)" className="text-primary"><i className="ti ti-download pr-2"></i><span>Download</span></a></div>*/}
|
||||
{/*</div>*/}
|
||||
<div className="bg-light mail-f px-4 py-3">
|
||||
<div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
|
||||
<p>
|
||||
Click here to{" "}
|
||||
<a
|
||||
href="#editer"
|
||||
data-toggle="collapse"
|
||||
className="text-primary px-1"
|
||||
>
|
||||
Reply
|
||||
</a>
|
||||
or
|
||||
<a
|
||||
href="#forward"
|
||||
data-toggle="collapse"
|
||||
className="text-primary px-1"
|
||||
>
|
||||
Forward
|
||||
</a>
|
||||
</p>
|
||||
<a href="javascript:void(0)" className="text-primary">
|
||||
<i className="fa fa-microphone"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div className="collapse" id="editer">
|
||||
<div className="form-group">
|
||||
<textarea
|
||||
className="form-control mt-3"
|
||||
id="exampleFormControlTextarea1"
|
||||
rows="3"
|
||||
placeholder="Type here..."
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="collapse" id="forward">
|
||||
<div className="form-group">
|
||||
<input
|
||||
className="form-control mt-3"
|
||||
id="exampleFormControl"
|
||||
placeholder="Email Address"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex align-items-center justify-content-between py-2">
|
||||
<div>
|
||||
<ul className="nav">
|
||||
<li className="nav-item pr-3">
|
||||
<a href="javascript:void(0)">
|
||||
<i className="ti ti-clip font-20"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item pr-3">
|
||||
<a href="javascript:void(0)">
|
||||
<i className="ti ti-face-smile font-20"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a href="javascript:void(0)">
|
||||
<i className="ti ti-gallery font-20"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="btn btn-primary"
|
||||
>
|
||||
<span>Send</span>{" "}
|
||||
<i className="fa fa-paper-plane"></i>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import React from 'react'
|
||||
import { getDashPayments } from '../../services/services'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import queryKeys from '../../services/queryKeys'
|
||||
import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
|
||||
import getImage from '../../utils/getImage'
|
||||
|
||||
export default function DashPayments() {
|
||||
@@ -18,7 +19,7 @@ export default function DashPayments() {
|
||||
}
|
||||
})
|
||||
|
||||
const payments = data?.data
|
||||
const payments = data?.data?.member_payments
|
||||
// console.log('data', payments)
|
||||
|
||||
return (
|
||||
@@ -30,7 +31,7 @@ export default function DashPayments() {
|
||||
<h4 className="card-title">Payments</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body scrollbar scroll_dark pt-0" style={{maxHeight: '350px'}}>
|
||||
<div className="overflow-y-auto card-body scrollbar scroll_dark pt-0" style={{maxHeight: '350px'}}>
|
||||
<div className="datatable-wrapper table-responsive">
|
||||
{isFetching ?
|
||||
<>
|
||||
@@ -53,7 +54,7 @@ export default function DashPayments() {
|
||||
{/* <th style={{width: '30px'}}>#</th> */}
|
||||
<th>Date</th>
|
||||
|
||||
<th style={{width: '130px'}}>Subscription</th>
|
||||
<th style={{width: '130px'}}>Description</th>
|
||||
<th style={{width: '80px'}}>Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -62,17 +63,13 @@ export default function DashPayments() {
|
||||
payments.map((item, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td>{Number(item?.id).toString().padStart(6,'0')}</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}
|
||||
{getDateTimeFromDateString(item?.added)}
|
||||
</td>
|
||||
|
||||
<td><span className={`badge ${statusColor}`}>{statusText}</span></td>
|
||||
<td>
|
||||
<a className="mr-3" href={productUrl}>
|
||||
<img src={getImage('arrow-next.png')} alt='next' />
|
||||
</a>
|
||||
</td>
|
||||
<td>{item?.option_name}</td>
|
||||
<td className='text-right'>${item?.amount}</td>
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -2,14 +2,16 @@ import { useQuery } from '@tanstack/react-query'
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
// import getImage from "../../utils/getImage";
|
||||
import ProductStart from "./ProductStart";
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import {MyProductData} from "../../services/services";
|
||||
import ProductActive from "./ProductActive";
|
||||
import ProductProvision from "./ProductProvision";
|
||||
import {productConst} from "../../constants/products";
|
||||
import queryKeys from "../../services/queryKeys";
|
||||
import siteLinks from '../../links/siteLinks';
|
||||
|
||||
export default function ProductFactory(){
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation();
|
||||
const pathname = location.pathname;
|
||||
|
||||
@@ -45,8 +47,9 @@ export default function ProductFactory(){
|
||||
</>
|
||||
: isError ?
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="text-center col-12" style={{minHeight: '500px', placeContent: 'center'}}>
|
||||
<p className='text-danger'>{error?.message}</p>
|
||||
<button onClick={() => navigate(siteLinks.home)} className='mt-3 btn btn-primary'>Return Home</button>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
const ColorStyleConfigure =()=>{
|
||||
|
||||
return <>COLOR CONFIG</>
|
||||
}
|
||||
|
||||
export default ColorStyleConfigure
|
||||
@@ -1,126 +1,196 @@
|
||||
import React, {memo, useState} from 'react'
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { pageSettings } from "../../../services/services";
|
||||
import React, {memo, useEffect, useMemo, useState} from 'react'
|
||||
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';
|
||||
import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder';
|
||||
import URLConfiguration from "./URLConfiguration";
|
||||
import ColorStyleConfigure from "./ColorStyleConfigure";
|
||||
|
||||
const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
|
||||
const GeneralTab = memo(({
|
||||
name = 'Full Name',
|
||||
data,
|
||||
tabKey,
|
||||
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 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 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(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: () => {
|
||||
queryClient.refetchQueries({ // refetches productProvision API call
|
||||
queryKey: [...queryKeys.settingsData],
|
||||
const [fields, setFields] = useState({})
|
||||
|
||||
const sortedData = sortObjectByListOrder(data ? data : {}) // SORTED SETTINGSCONFIG
|
||||
|
||||
useEffect(() => {
|
||||
const fieldData = {}
|
||||
Object.entries(sortedData)?.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)
|
||||
}
|
||||
// console.log('formInfo', reqData)
|
||||
submitSettings.mutate(reqData)
|
||||
}
|
||||
|
||||
if (isCustom === true){
|
||||
return <SiteTemplateSelector name={name} data={data} isCustom={isCustom} productData={productData} />
|
||||
}
|
||||
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)
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
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} />
|
||||
<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 &&
|
||||
<>
|
||||
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)
|
||||
}
|
||||
console.log(tabKey);
|
||||
return (
|
||||
<>
|
||||
{backendValues?.isFetching || !backendValues?.data ?
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className={reqStatus.error ? 'text-danger' : 'text-success'}>{reqStatus.message}</p>
|
||||
<p className='text-mute'>Loading...</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>
|
||||
)
|
||||
</>
|
||||
: backendValues?.isError ?
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{backendValues?.error.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<>
|
||||
{isCustom === true ?
|
||||
<>
|
||||
{(tabKey === 'template_tab') && <SiteTemplateSelector name={name} data={sortedData}
|
||||
isCustom={isCustom}
|
||||
productData={productData}/>}
|
||||
{(tabKey === 'url_config_tab') && <URLConfiguration name={name} data={sortedData}
|
||||
isCustom={isCustom}
|
||||
productData={productData}/>}
|
||||
{(tabKey === 'color_scheme_tab') && <ColorStyleConfigure name={name} data={sortedData}
|
||||
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(sortedData)?.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>
|
||||
}
|
||||
</>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@@ -1,80 +1,35 @@
|
||||
import React, { memo, useMemo, useState } from 'react'
|
||||
import GeneralTab from './GeneralTab'
|
||||
import { getSettingsData } from '../../../services/services';
|
||||
import { getSettingsData, getMyProductConfig } from '../../../services/services';
|
||||
import queryKeys from '../../../services/queryKeys';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder'
|
||||
|
||||
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 },
|
||||
boolean_footer_show_made_by: { name: 'Show made by in footer', controls: 'SELECT_NO_YES', active: true },
|
||||
boolean_footer_show_socials: { name: 'Show social 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 {data:configData, isFetching:configIsFetching, configIsError, error:configError} = useQuery({
|
||||
queryKey: queryKeys.myProductConfig,
|
||||
queryFn: () => {
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid'), // USER UID
|
||||
product_id: productData?.product_id
|
||||
}
|
||||
return getMyProductConfig(reqData)
|
||||
},
|
||||
staleTime: 0,
|
||||
})
|
||||
const settingsConfig = configData?.data?.settings_items
|
||||
// console.log('CONFIG DATA...', settingsConfig)
|
||||
|
||||
|
||||
const [fieldsChanged, setFieldsChanged] = useState(false)
|
||||
|
||||
const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
|
||||
// const [activeTab, setActiveTab] = useState(Object.entries(settingsConfig)[0][1]?.controls)
|
||||
const [activeTab, setActiveTab] = useState(null)
|
||||
|
||||
const handleChangeTab = (value) => {
|
||||
// if(fieldsChanged){
|
||||
@@ -99,15 +54,19 @@ const Settings = memo(({productData}) => {
|
||||
product_id: productData?.product_id
|
||||
}
|
||||
return getSettingsData(reqData)
|
||||
}
|
||||
},
|
||||
staleTime: 0,
|
||||
enabled: settingsConfig ? true : false
|
||||
})
|
||||
|
||||
const settingsData = data?.data?.settings
|
||||
const settingsData = {data: data?.data?.settings, isFetching, isError, error}
|
||||
// console.log('data', settingsData)
|
||||
|
||||
const sortedSettingsConfig = sortObjectByListOrder(settingsConfig ? settingsConfig : {}) // SORTED SETTINGSCONFIG
|
||||
|
||||
return (
|
||||
<>
|
||||
{isFetching ?
|
||||
{configIsFetching ?
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
@@ -115,19 +74,19 @@ const Settings = memo(({productData}) => {
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
: isError ?
|
||||
: configIsError ?
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{error.message}</p>
|
||||
<p className='text-danger'>{configError.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div className="tab tab-vertical">
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
<>
|
||||
{Object.entries(settingsObject).map(([key, value]) => (
|
||||
{Object.entries(sortedSettingsConfig).map(([key, value], index) => (
|
||||
<li key={key} className="nav-item">
|
||||
<a className={`nav-link ${activeTab == value.controls && 'active show'}`}
|
||||
<a className={`nav-link ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
|
||||
id={key}
|
||||
// data-bs-toggle="pill"
|
||||
// data-bs-target={`#${value.controls}`}
|
||||
@@ -145,12 +104,12 @@ const Settings = memo(({productData}) => {
|
||||
</ul>
|
||||
<div className="tab-content">
|
||||
<>
|
||||
{Object.entries(settingsObject).map(([key, value]) => (
|
||||
<div key={key} className={`tab-pane fade ${activeTab == value.controls && 'active show'}`}
|
||||
{Object.entries(sortedSettingsConfig).map(([key, value], index) => (
|
||||
<div key={key} className={`tab-pane fade ${(activeTab == value.controls || (index == 0 & !activeTab)) && '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} />
|
||||
<GeneralTab tabKey={key} name={value.title} data={value.data} isCustom={value.custom} productData={productData} backendValues={settingsData} setFieldsChanged={setFieldsChanged} />
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
@@ -162,4 +121,4 @@ const Settings = memo(({productData}) => {
|
||||
}
|
||||
)
|
||||
|
||||
export default Settings
|
||||
export default Settings
|
||||
@@ -1,11 +1,13 @@
|
||||
import React, {memo} from 'react'
|
||||
import getImage from "../../../utils/getImage";
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import queryKeys from '../../../services/queryKeys';
|
||||
import { getProductTemplateData } from '../../../services/services';
|
||||
import { getProductTemplateData, activateTemplate } from '../../../services/services';
|
||||
|
||||
const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const {data:templateData, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.productTemplateData,
|
||||
queryFn: () => {
|
||||
@@ -20,10 +22,42 @@ const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
|
||||
})
|
||||
|
||||
const templateResponse = templateData?.data
|
||||
const currentTemUID = templateResponse?.current_template_uid
|
||||
const templates = templateResponse?.templates
|
||||
|
||||
// console.log('data Template', templates)
|
||||
// console.log('data Template', templateResponse)
|
||||
// console.log("Page data == ", data)
|
||||
|
||||
const handleActivateTemplate = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return activateTemplate(fields)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if(res?.data?.resultCode != '0'){
|
||||
throw new Error(res.data.resultDescription)
|
||||
}
|
||||
queryClient.refetchQueries({ // refetches productProvision API call
|
||||
queryKey: [...queryKeys.settingsData],
|
||||
})
|
||||
},
|
||||
onSettled: () => {
|
||||
setTimeout(()=>{
|
||||
handleActivateTemplate.reset()
|
||||
}, 3000)
|
||||
}
|
||||
})
|
||||
|
||||
const handleSubmit = (tem_uid) => {
|
||||
const reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid'), // USER UID
|
||||
product_id: productData?.product_id,
|
||||
template_uid: tem_uid
|
||||
}
|
||||
// console.log(reqData)
|
||||
handleActivateTemplate.mutate(reqData)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page-account-form">
|
||||
<div className="p-0">
|
||||
@@ -44,7 +78,7 @@ const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
|
||||
:
|
||||
<div className="row">
|
||||
<>
|
||||
{!templates.length ?
|
||||
{!templates?.length ?
|
||||
<p>No data Found</p>
|
||||
:
|
||||
templates.map(template => (
|
||||
@@ -56,7 +90,11 @@ const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
|
||||
<img src={getImage('file-icon/svg.png')} alt={template.title} />
|
||||
</div>
|
||||
<h4 className="mb-0">{template.title}</h4>
|
||||
<a href="#" className="btn btn-light">Activate</a>
|
||||
{currentTemUID == template.template_uid ?
|
||||
<button className="btn btn-light" disabled={true}>Active</button>
|
||||
:
|
||||
<button onClick={()=>handleSubmit(template.template_uid)} className="btn btn-primary">Activate</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -79,6 +117,22 @@ const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
|
||||
</div>
|
||||
))} */}
|
||||
</>
|
||||
|
||||
<div className="col-12">
|
||||
<>
|
||||
{handleActivateTemplate.isPending ?
|
||||
<p className={'text-center '}>loading...</p>
|
||||
:
|
||||
handleActivateTemplate.isError ?
|
||||
<p className={'text-center text-danger'}>{handleActivateTemplate.error.message}</p>
|
||||
:
|
||||
handleActivateTemplate.isSuccess?
|
||||
<p className={'text-center text-success'}>Templated activated successfully</p>
|
||||
:
|
||||
null
|
||||
}
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
const URLConfiguration = () => {
|
||||
|
||||
return <>
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">URL Configuration</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body button-list">
|
||||
<div className="row">
|
||||
<div className="col-12 mb-2">
|
||||
<div className="alert alert-primary" role="alert" style={{borderRadius: '10px'}}>
|
||||
<h3 className="text-white">Default URL</h3>
|
||||
<p className="text-white">
|
||||
https://127476.devprov.mermsemr.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">Default</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="form-group">
|
||||
<label htmlFor="exampleInputEmail1">Email address</label>
|
||||
<input type="email" className="form-control" id="exampleInputEmail1"
|
||||
aria-describedby="emailHelp" placeholder="Enter your url"/>
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
export default URLConfiguration
|
||||
@@ -0,0 +1,128 @@
|
||||
import React, {memo, useState} from 'react'
|
||||
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 queryKeys from '../../../services/queryKeys';
|
||||
|
||||
const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
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: () => {
|
||||
queryClient.refetchQueries({ // refetches productProvision API call
|
||||
queryKey: [...queryKeys.settingsData],
|
||||
})
|
||||
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} />
|
||||
<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>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
export default GeneralTab
|
||||
@@ -0,0 +1,179 @@
|
||||
import React, { memo, useMemo, useState } from 'react'
|
||||
import GeneralTab from './GeneralTab'
|
||||
import { getSettingsData, getMyProductConfig } 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 {data:configData, isFetching:configIsFetching, configIsError, error:configError} = useQuery({
|
||||
queryKey: queryKeys.myProductConfig,
|
||||
queryFn: () => {
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid'), // USER UID
|
||||
product_id: productData?.product_id
|
||||
}
|
||||
return getMyProductConfig(reqData)
|
||||
}
|
||||
})
|
||||
const settingsConfig = configData?.data?.settings_items
|
||||
// console.log('CONFIG DATA...', settingsConfig)
|
||||
|
||||
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 },
|
||||
boolean_footer_show_made_by: { name: 'Show made by in footer', controls: 'SELECT_NO_YES', active: true },
|
||||
boolean_footer_show_socials: { name: 'Show social 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
|
||||
@@ -40,6 +40,7 @@ export default function ProfileCompleteCom() {
|
||||
practice: '',
|
||||
specialization: '',
|
||||
introduction: '',
|
||||
url_name: ''
|
||||
})
|
||||
|
||||
const specialties = useMemo(() => { // FUNCTION TO UPDATE SPECIALITY ARRAY EACH TIME PRACTICE CHANGES
|
||||
@@ -215,6 +216,35 @@ export default function ProfileCompleteCom() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
<div className="form-group position-relative">
|
||||
<label className={`text-black fw-bold control-label`}>URL Name :</label>
|
||||
<div className="position-relative d-xxl-flex" style={{gap: '10px'}}>
|
||||
{/* <select onChange={handlePracticeChange} name='url_name'
|
||||
value={initialValues.url_name} className="form-control">
|
||||
<option value=''>Select</option>
|
||||
{practices.map((practice, index) => (
|
||||
<option key={index}
|
||||
value={practice.practice}>{practice.practice}</option>
|
||||
))}
|
||||
</select>
|
||||
<IoMdArrowDropdown className='position-absolute w-auto' style={{
|
||||
top: '50%',
|
||||
right: '2px',
|
||||
transform: 'translateY(-50%)'
|
||||
}}/> */}
|
||||
<input
|
||||
className="form-control"
|
||||
onChange={handlePracticeChange} name='url_name'
|
||||
value={initialValues.url_name}
|
||||
/>
|
||||
<p className="border-radius-10 p-2 border border-warning">We use the URL Name to form part of your default URL when we configure
|
||||
a new URL for your products. You can always change your product URL
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(mutation.isError || mutation.isSuccess) &&
|
||||
<>
|
||||
<div className="">
|
||||
|
||||
+244
-166
@@ -1,10 +1,68 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import getImage from "../../utils/getImage";
|
||||
import queryKeys from "../../services/queryKeys";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { profileDetails } from "../../services/services";
|
||||
|
||||
|
||||
|
||||
|
||||
const profileValidationSchema = Yup.object().shape({
|
||||
// firstname: Yup.string().required("firstname is required"),
|
||||
// lastname: Yup.string().required("lastname is required"),
|
||||
// email: Yup.string().required("email is required"),
|
||||
// account_name: Yup.string().required("account name is required"),
|
||||
// phone: Yup.string().required("phone is required"),
|
||||
// full_address: Yup.string().required("full address is required"),
|
||||
})
|
||||
|
||||
const linksValidationSchema = Yup.object().shape({
|
||||
// facebook_url: Yup.string().required("facebook is required"),
|
||||
// twitter_url: Yup.string().required("twitter is required"),
|
||||
// blogger_url: Yup.string().required("blog is required"),
|
||||
// google_url: Yup.string().required("google is required"),
|
||||
// linked_url: Yup.string().required("linkedin is required"),
|
||||
// website_url: Yup.string().required("website is required"),
|
||||
})
|
||||
|
||||
|
||||
export default function Settings() {
|
||||
const avtarImage = "avtar/merms-user.png";
|
||||
|
||||
const [intialData, setInitialData] = useState({
|
||||
external_links: {},
|
||||
personal_data: {},
|
||||
})
|
||||
|
||||
const {data:profileInfo, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.profile_data,
|
||||
queryFn: () => {
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
}
|
||||
return profileDetails(reqData)
|
||||
}
|
||||
})
|
||||
// const profileData = profileInfo?.data // profile data
|
||||
useMemo(()=>{
|
||||
const data = profileInfo?.data
|
||||
setInitialData({external_links: data?.external_links, personal_data: data?.personal_data})
|
||||
},[profileInfo])
|
||||
// console.log('INI', intialData)
|
||||
|
||||
|
||||
const updateProfile = (values, helpers) => {
|
||||
console.log('Values', values)
|
||||
}
|
||||
|
||||
const updateLinks = (values, helpers) => {
|
||||
console.log('Values', values)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<BreadcrumbComBS title='Settings' paths={['Dashboard', 'Settings']}/>
|
||||
@@ -12,184 +70,205 @@ export default function Settings() {
|
||||
{/* <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
|
||||
<div className="row account-contant">
|
||||
{isFetching ?
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className="text-mute">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
: isError ?
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-body p-0" style={{backgroundColor: "#f9f9fb"}}>
|
||||
<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="assets/img/avtar/01.jpg" className="img-fluid"*/}
|
||||
{/* alt="users-avatar" />*/}
|
||||
<img src={getImage(avtarImage)}
|
||||
className="img-fluid" alt="user"/>
|
||||
</div>
|
||||
<div className="profile pt-4">
|
||||
<h4 className="mb-1">Alice Williams</h4>
|
||||
<div style={{padding: '10px'}}>
|
||||
<hr/>
|
||||
<p className="text-danger">{error?.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div className="row account-contant">
|
||||
<div className="col-12">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-body p-0" style={{backgroundColor: "#f9f9fb"}}>
|
||||
<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="assets/img/avtar/01.jpg" className="img-fluid"*/}
|
||||
{/* alt="users-avatar" />*/}
|
||||
<img src={getImage(avtarImage)}
|
||||
className="img-fluid" alt="user"/>
|
||||
</div>
|
||||
<div className="profile pt-4">
|
||||
<h4 className="mb-1">{intialData?.personal_data?.lastname} {intialData?.personal_data?.firstname}</h4>
|
||||
<div style={{padding: '10px'}}>
|
||||
<hr/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="profile-btn text-center">
|
||||
<div>
|
||||
<button className="btn btn-light text-primary mb-2">Upload New Avatar
|
||||
</button>
|
||||
<div className="profile-btn text-center">
|
||||
<div>
|
||||
<button className="btn btn-light text-primary mb-2">Upload New Avatar
|
||||
</button>
|
||||
</div>
|
||||
{/*<div>*/}
|
||||
{/* <button className="btn btn-danger">Delete</button>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
{/*<div>*/}
|
||||
{/* <button className="btn btn-danger">Delete</button>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
</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 Personal Settings</h5>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<form>
|
||||
<div className="form-row">
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">First Name</label>
|
||||
<input type="text" className="form-control" id="name1"
|
||||
value="Alice"/>
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Last Name</label>
|
||||
<input type="text" className="form-control" id="name1"
|
||||
value="Williams"/>
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Account Name</label>
|
||||
<input type="text" className="form-control" id="name1"
|
||||
value="This is the best hospital name"/>
|
||||
</div>
|
||||
{/*<div className="form-group col-md-12">*/}
|
||||
{/* <label htmlFor="title1">Email</label>*/}
|
||||
{/* <input type="text" className="form-control" id="title1"*/}
|
||||
{/* value="email@email.com" />*/}
|
||||
{/*</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>
|
||||
<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 Personal Settings</h5>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<Formik
|
||||
initialValues={intialData?.personal_data}
|
||||
validationSchema={profileValidationSchema}
|
||||
onSubmit={updateProfile}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className=''>
|
||||
<div className="form-row">
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">First Name {(props.errors.firstname && props.touched.firstname) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="firstname" value={props.values?.firstname} onChange={props.handleChange} />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Last Name {(props.errors.lastname && props.touched.lastname) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="lastname" value={props.values?.lastname} onChange={props.handleChange} />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Account Name {(props.errors.account_name && props.touched.account_name) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="account_name" value={props.values?.account_name} onChange={props.handleChange} />
|
||||
</div>
|
||||
{/*<div className="form-group col-md-12">*/}
|
||||
{/* <label htmlFor="title1">Email</label>*/}
|
||||
{/* <input type="text" className="form-control" name="title1"*/}
|
||||
{/* value="email@email.com" />*/}
|
||||
{/*</div>*/}
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="phone1">Phone Number {(props.errors.phone && props.touched.phone) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="phone" value={props.values?.phone} onChange={props.handleChange} />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="email1">Email {(props.errors.email && props.touched.email) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="email" value={props.values?.email} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add1">Address {(props.errors.full_address && props.touched.full_address) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="full_address" value={props.values?.full_address} onChange={props.handleChange} />
|
||||
</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>*/}
|
||||
|
||||
{/*<div className="form-row">*/}
|
||||
{/* <div className="form-group col-md-4">*/}
|
||||
{/* <label htmlFor="inputState3">City</label>*/}
|
||||
{/* <select id="inputState3" className="form-control">*/}
|
||||
{/* <option>Choose...</option>*/}
|
||||
{/* <option selected="">London</option>*/}
|
||||
{/* <option>Montreal</option>*/}
|
||||
{/* <option>Delhi</option>*/}
|
||||
{/* <option>Tokyo</option>*/}
|
||||
{/* </select>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="form-group col-md-4">*/}
|
||||
{/* <label htmlFor="inputState4">State</label>*/}
|
||||
{/* <select id="inputState4" className="form-control">*/}
|
||||
{/* <option>Choose...</option>*/}
|
||||
{/* <option selected="">England</option>*/}
|
||||
{/* <option>California</option>*/}
|
||||
{/* <option>Texas</option>*/}
|
||||
{/* <option>Scotland</option>*/}
|
||||
{/* </select>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="form-group col-md-4">*/}
|
||||
{/* <label htmlFor="inputZip">Zip</label>*/}
|
||||
{/* <input type="text" className="form-control" id="inputZip"*/}
|
||||
{/* value="EC1A 1BB" />*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="form-group">*/}
|
||||
{/* <div className="form-check">*/}
|
||||
{/* <input className="form-check-input" type="checkbox"*/}
|
||||
{/* id="gridCheck" />*/}
|
||||
{/* <label className="form-check-label" htmlFor="gridCheck">*/}
|
||||
{/* I agree to receive email notification.*/}
|
||||
{/* </label>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
<div style={{textAlign: "right"}}>
|
||||
<button type="submit" className="btn btn-primary">Update Profile
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
{/*<div className="form-row">*/}
|
||||
{/* <div className="form-group col-md-4">*/}
|
||||
{/* <label htmlFor="inputState3">City</label>*/}
|
||||
{/* <select id="inputState3" className="form-control">*/}
|
||||
{/* <option>Choose...</option>*/}
|
||||
{/* <option selected="">London</option>*/}
|
||||
{/* <option>Montreal</option>*/}
|
||||
{/* <option>Delhi</option>*/}
|
||||
{/* <option>Tokyo</option>*/}
|
||||
{/* </select>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="form-group col-md-4">*/}
|
||||
{/* <label htmlFor="inputState4">State</label>*/}
|
||||
{/* <select id="inputState4" className="form-control">*/}
|
||||
{/* <option>Choose...</option>*/}
|
||||
{/* <option selected="">England</option>*/}
|
||||
{/* <option>California</option>*/}
|
||||
{/* <option>Texas</option>*/}
|
||||
{/* <option>Scotland</option>*/}
|
||||
{/* </select>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="form-group col-md-4">*/}
|
||||
{/* <label htmlFor="inputZip">Zip</label>*/}
|
||||
{/* <input type="text" className="form-control" id="inputZip"*/}
|
||||
{/* value="EC1A 1BB" />*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="form-group">*/}
|
||||
{/* <div className="form-check">*/}
|
||||
{/* <input className="form-check-input" type="checkbox"*/}
|
||||
{/* id="gridCheck" />*/}
|
||||
{/* <label className="form-check-label" htmlFor="gridCheck">*/}
|
||||
{/* I agree to receive email notification.*/}
|
||||
{/* </label>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
<div style={{textAlign: "right"}}>
|
||||
<button type="submit" className="btn btn-primary">Update Profile
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</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="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">
|
||||
<Formik
|
||||
initialValues={intialData?.external_links}
|
||||
validationSchema={linksValidationSchema}
|
||||
onSubmit={updateLinks}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className=''>
|
||||
<div className="form-group">
|
||||
<label htmlFor="fb">Facebook URL: {(props.errors.facebook_url && props.touched.facebook_url) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="facebook_url" value={props.values?.facebook_url} onChange={props.handleChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="tr">Twitter URL: {(props.errors.twitter_url && props.touched.twitter_url) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="twitter_url" value={props.values?.twitter_url} onChange={props.handleChange} />
|
||||
</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="br">Blogger URL: {(props.errors.blogger_url && props.touched.blogger_url) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="blogger_url" value={props.values?.blogger_url} onChange={props.handleChange} />
|
||||
</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="go">Google+ URL: {(props.errors.google_url && props.touched.google_url) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="google_url" value={props.values?.google_url} onChange={props.handleChange} />
|
||||
</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="li">LinkedIn URL: {(props.errors.linked_url && props.touched.linked_url) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="linked_url" value={props.values?.linked_url} onChange={props.handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="we">Website URL:</label>
|
||||
<input type="text" className="form-control" id="we"
|
||||
value="https://yourwebsite.com"/>
|
||||
</div>
|
||||
<div style={{textAlign: "right"}}>
|
||||
<button type="submit" className="btn btn-primary">Update Links
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<div className="form-group">
|
||||
<label htmlFor="we">Website URL: {(props.errors.website_url && props.touched.website_url) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="website_url" value={props.values?.website_url} onChange={props.handleChange} />
|
||||
</div>
|
||||
<div style={{textAlign: "right"}}>
|
||||
<button type="submit" className="btn btn-primary">Update Links
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -197,8 +276,7 @@ export default function Settings() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import React from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import getImage from "../../utils/getImage";
|
||||
|
||||
export default function Start() {
|
||||
|
||||
const bgImg = getImage("side-banner.jpg");
|
||||
|
||||
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"
|
||||
style={{minHeight: '550px', borderRadius: '10px', backgroundImage: `url(${bgImg})`}}>
|
||||
</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-primary btn-round btn-sm">Start</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-primary btn-round btn-sm">Start</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>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import TrafficChart from "./TrafficChart";
|
||||
|
||||
|
||||
export default function Traffic() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<BreadcrumbComBS title='Traffic' paths={['Dashboard', 'Traffic']}/>
|
||||
<div className="row">
|
||||
<div className="col-lg-4">
|
||||
<div className="card card-statistics" style={{minHeight: '350px', borderRadius: '10px', backgroundColor: 'aliceblue'}}>
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">Site Traffic Monitoring</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-8">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">Plot</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="apexchart-wrapper">
|
||||
<TrafficChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import { useState } from "react";
|
||||
import ReactApexChart from "react-apexcharts";
|
||||
|
||||
const TrafficChart = () => {
|
||||
const [state, setState] = useState({
|
||||
|
||||
series: [
|
||||
{
|
||||
// name: "High - 2013",
|
||||
name: 'Professional Website',
|
||||
data: [28, 29, 33, 36, 32, 32, 33, 33, 36, 32, 32, 33]
|
||||
},
|
||||
{
|
||||
// name: "Low - 2013",
|
||||
name: 'Personal Website',
|
||||
data: [12, 11, 14, 18, 17, 13, 13, 14, 18, 17, 13, 13]
|
||||
},
|
||||
{
|
||||
// name: "Low - 2013",
|
||||
name: 'Personal Forum',
|
||||
data: [10, 11, 14, 19, 18, 23, 17, 14, 10, 17, 23, 10]
|
||||
},
|
||||
{
|
||||
// name: "High - 2013",
|
||||
name: 'Professional Forum',
|
||||
data: [20, 19, 30, 36, 30, 35, 33, 33, 36, 32, 32, 30]
|
||||
}
|
||||
],
|
||||
options: {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
color: '#000',
|
||||
top: 18,
|
||||
left: 7,
|
||||
blur: 10,
|
||||
opacity: 0.5
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: ['#77B6EA', '#545454', '#F50898','#213ece'],
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth'
|
||||
},
|
||||
title: {
|
||||
text: 'Recent Sites Traffic',
|
||||
align: 'left'
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#e7e7e7',
|
||||
row: {
|
||||
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
|
||||
opacity: 0.5
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 1
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
|
||||
title: {
|
||||
text: 'Month'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Visits'
|
||||
},
|
||||
min: 5,
|
||||
max: 40
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'right',
|
||||
floating: true,
|
||||
offsetY: -25,
|
||||
offsetX: -5
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div id="chart">
|
||||
<ReactApexChart options={state.options} series={state.series} type="line" height={450} />
|
||||
</div>
|
||||
<div id="html-dist"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default TrafficChart
|
||||
@@ -0,0 +1,14 @@
|
||||
const sortObjectByListOrder = (data) => {
|
||||
const sortedEntriesByValue = Object.entries(data).sort((a, b) => {
|
||||
if(a[1].list_order > b[1].list_order){
|
||||
return 1
|
||||
}else{
|
||||
return -1
|
||||
}
|
||||
}); // Sorts numerically by value
|
||||
|
||||
const sortedObjectByValue = Object.fromEntries(sortedEntriesByValue);
|
||||
return sortedObjectByValue
|
||||
}
|
||||
|
||||
export default sortObjectByListOrder
|
||||
@@ -3,6 +3,8 @@ const siteLinks = {
|
||||
help: '/help',
|
||||
home: '/',
|
||||
dash: '/dash',
|
||||
traffic: '/traffic',
|
||||
start: '/start',
|
||||
profile_complete: '/profile-complete',
|
||||
product: '/product/*',
|
||||
contacts: '/contacts',
|
||||
|
||||
@@ -7,8 +7,10 @@ const queryKeys = {
|
||||
product_page: ['product_page'],
|
||||
recentAction: ['recent-action'],
|
||||
settingsData: ['settings_data'],
|
||||
myProductConfig: ['myproduct_config'],
|
||||
productTemplateData: ['product_template_data'],
|
||||
subscriptions: ['subscriptions'],
|
||||
profile_data: ['profile_data'],
|
||||
|
||||
dashboard: ['dashboard'],
|
||||
topBar: ['top-bar'],
|
||||
|
||||
@@ -26,7 +26,8 @@ const postAuxEnd = (path, postData, media=false) => {
|
||||
return axios.post(`${basePath}${path}`, postData).then(res => {
|
||||
return res
|
||||
}).catch(err => {
|
||||
throw new Error(err.response.data.msg);
|
||||
// console.log('res', err.response.data)
|
||||
throw new Error(err.response.data.error_message);
|
||||
})
|
||||
}
|
||||
|
||||
@@ -75,6 +76,14 @@ export const topBar = (reqData) => {
|
||||
return postAuxEnd(`/panel/account/bar`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET PROFILE DATA
|
||||
export const profileDetails = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
}
|
||||
return postAuxEnd(`/panel/account/profile`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET PRODUCT BY ID
|
||||
export const MyProductData = (reqData) => {
|
||||
let postData = {
|
||||
@@ -98,7 +107,7 @@ export const getCalendarEvents = (reqData) => {
|
||||
return postAuxEnd(`/panel/account/calendar`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
|
||||
// FUNCTION TO GET CONTACT DATA
|
||||
export const contactData = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
@@ -106,6 +115,14 @@ export const contactData = (reqData) => {
|
||||
return postAuxEnd(`/panel/contacts`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET COMMENTS DATA
|
||||
export const commentsData = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
}
|
||||
return postAuxEnd(`/panel/comments`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
|
||||
export const productsURL = (reqData) => {
|
||||
let postData = {
|
||||
@@ -114,7 +131,7 @@ export const productsURL = (reqData) => {
|
||||
return postAuxEnd(`/panel/account/products/url`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
|
||||
// FUNCTION TO GET DASHBOARD PAYMENTS
|
||||
export const getDashPayments = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
@@ -181,6 +198,14 @@ export const getSettingsData = (reqData) => {
|
||||
return postAuxEnd(`/panel/myproduct/settings/values`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET MY PRODUCT CONFIGURATION
|
||||
export const getMyProductConfig = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
}
|
||||
return postAuxEnd(`/panel/myproduct/configuration`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET SETTINGS DATA
|
||||
export const getProductTemplateData = (reqData) => {
|
||||
let postData = {
|
||||
@@ -189,6 +214,14 @@ export const getProductTemplateData = (reqData) => {
|
||||
return postAuxEnd(`/panel/account/products/templates`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO ACTIVATE TEMPLATE
|
||||
export const activateTemplate = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
}
|
||||
return postAuxEnd(`/panel/account/template/activate`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET PRODUCT SUBSCRIPTIONS
|
||||
export const completeProfile = (reqData) => {
|
||||
let postData = {
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
|
||||
import Start from "../component/start/Start";
|
||||
|
||||
|
||||
export default function StartPage(){
|
||||
return <Start />
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import React from 'react'
|
||||
import Traffic from "../component/traffic/Traffic";
|
||||
|
||||
export default function TrafficPage() {
|
||||
return (
|
||||
<Traffic />
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user