Compare commits
23 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
4b6c927efc | ||
|
CHIEFSOFT\ameye
|
8a8adcbbc7 | ||
|
CHIEFSOFT\ameye
|
706baadb33 | ||
 ameye
|
58128fdd96 | ||
|
victorAnumudu
|
14e8b1b01d | ||
|
ameye
|
504bfbcae4 | ||
|
victorAnumudu
|
ec47aa5f9c | ||
|
CHIEFSOFT\ameye
|
9267ded0f1 | ||
|
ameye
|
0b24ca650d | ||
|
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 |
@@ -14,6 +14,10 @@
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border-radius-10 {
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.login-links{
|
.login-links{
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -93,13 +93,13 @@ export default function Login() {
|
|||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label className="control-label text-black fw-bold">User Name*</label>
|
<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>
|
</div>
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label className="control-label text-black fw-bold">Password*</label>
|
<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>
|
</div>
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
|
|||||||
@@ -82,9 +82,13 @@ export default function Signup() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-3">
|
<div className="mt-3">
|
||||||
|
<hr />
|
||||||
<p className='font-medium'>Already have an account ?
|
<p className='font-medium'>Already have an account ?
|
||||||
<Link to={siteLinks.login}
|
<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>
|
</Link>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+150
-111
@@ -1,101 +1,119 @@
|
|||||||
import React, { useState } from 'react'
|
import React, {useState} from 'react'
|
||||||
import { Form, Formik } from "formik";
|
import {Form, Formik} from "formik";
|
||||||
import * as Yup from "yup";
|
import * as Yup from "yup";
|
||||||
|
|
||||||
// import LoginImg from '../../assets/bg/login.svg'
|
// 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 siteLinks from '../../links/siteLinks'
|
||||||
import { useMutation } from '@tanstack/react-query';
|
import {useMutation} from '@tanstack/react-query';
|
||||||
import { signUpUser } from '../../services/services';
|
import {signUpUser} from '../../services/services';
|
||||||
import getImage from '../../utils/getImage';
|
import getImage from '../../utils/getImage';
|
||||||
|
|
||||||
const validationSchema = Yup.object().shape({
|
const validationSchema = Yup.object().shape({
|
||||||
email: Yup.string()
|
email: Yup.string()
|
||||||
.email("Wrong email format")
|
.email("Wrong email format")
|
||||||
// .matches(
|
// .matches(
|
||||||
// /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
|
// /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
|
||||||
// "Invalid email format"
|
// "Invalid email format"
|
||||||
// )
|
// )
|
||||||
.min(3, "Minimum 3 characters")
|
.min(3, "Minimum 3 characters")
|
||||||
.max(50, "Maximum 50 characters")
|
.max(50, "Maximum 50 characters")
|
||||||
.required("Email is required"),
|
.required("Email is required"),
|
||||||
firstname: Yup.string().required("Firstname is required"),
|
firstname: Yup.string().required("Firstname is required"),
|
||||||
lastname: Yup.string().required("Lastname is required"),
|
lastname: Yup.string().required("Lastname is required"),
|
||||||
isChecked: Yup.bool().oneOf([true], "Please accept the terms & policy"), // use bool instead of boolean
|
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"),
|
// 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"),
|
// password: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
|
||||||
})
|
})
|
||||||
|
|
||||||
const initialValues = {
|
const initialValues = {
|
||||||
email: '',
|
email: '',
|
||||||
firstname: '',
|
firstname: '',
|
||||||
lastname: '',
|
lastname: '',
|
||||||
isChecked: false,
|
isChecked: false,
|
||||||
// username: '',
|
// username: '',
|
||||||
// password: ''
|
// password: ''
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Signup2() {
|
export default function Signup2() {
|
||||||
|
|
||||||
const mutation = useMutation({
|
const mutation = useMutation({
|
||||||
mutationFn: (fields) => {
|
mutationFn: (fields) => {
|
||||||
return signUpUser(fields)
|
return signUpUser(fields)
|
||||||
},
|
},
|
||||||
onSuccess: (res) => {
|
onSuccess: (res) => {
|
||||||
console.log('res', res)
|
console.log('res', res)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const signUp = (values) => {
|
||||||
|
// helpers.resetForm()
|
||||||
|
// console.log('values', values, helpers)
|
||||||
|
delete values.isChecked
|
||||||
|
mutation.mutate(values)
|
||||||
}
|
}
|
||||||
})
|
|
||||||
|
|
||||||
const signUp = (values) => {
|
return (
|
||||||
// helpers.resetForm()
|
<div className="app">
|
||||||
// console.log('values', values, helpers)
|
<div className="app-wrap">
|
||||||
delete values.isChecked
|
<div className="app-contant">
|
||||||
mutation.mutate(values)
|
<div className="vh-100 bg-white custom-bg">
|
||||||
}
|
<div className="container-fluid p-0">
|
||||||
|
<div className="row no-gutters justify-content-center">
|
||||||
return (
|
<div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1"
|
||||||
<div className="app">
|
style={{maxWidth: '520px'}}>
|
||||||
<div className="app-wrap">
|
<div className="mt-5 d-flex">
|
||||||
<div className="app-contant">
|
<div className="bg-white register p-5">
|
||||||
<div className="vh-100 bg-white custom-bg">
|
<h1 className="mb-2">{process.env.REACT_APP_PANEL_NAME}</h1>
|
||||||
<div className="container-fluid p-0">
|
<p>Welcome, Please create your account.</p>
|
||||||
<div className="row no-gutters justify-content-center">
|
<Formik
|
||||||
<div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
|
initialValues={initialValues}
|
||||||
<div className="mt-5 d-flex">
|
validationSchema={validationSchema}
|
||||||
<div className="bg-white register p-5">
|
onSubmit={signUp}
|
||||||
<h1 className="mb-2">{process.env.REACT_APP_PANEL_NAME}</h1>
|
>
|
||||||
<p>Welcome, Please create your account.</p>
|
{(props) => {
|
||||||
<Formik
|
return (
|
||||||
initialValues={initialValues}
|
<Form className='mt-2 mt-sm-5'>
|
||||||
validationSchema={validationSchema}
|
<div className="row">
|
||||||
onSubmit={signUp}
|
{!mutation.isSuccess ?
|
||||||
>
|
<>
|
||||||
{(props) => {
|
<div className="col-12 col-md-6">
|
||||||
return (
|
<div className="form-group">
|
||||||
<Form className='mt-2 mt-sm-5'>
|
<label
|
||||||
<div className="row">
|
className={`text-black fw-bold control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First
|
||||||
{!mutation.isSuccess ?
|
Name*</label>
|
||||||
<>
|
<input type="text" name='firstname'
|
||||||
<div className="col-12 col-md-6">
|
className="form-control"
|
||||||
<div className="form-group">
|
placeholder="First Name"
|
||||||
<label className={`text-black fw-bold control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First Name*</label>
|
value={props.values.firstname}
|
||||||
<input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} />
|
onChange={props.handleChange}/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-6">
|
<div className="col-12 col-md-6">
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label className={`text-black fw-bold control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
|
<label
|
||||||
<input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
|
className={`text-black fw-bold control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last
|
||||||
</div>
|
Name*</label>
|
||||||
</div>
|
<input type="text" name='lastname'
|
||||||
<div className="col-12">
|
className="form-control"
|
||||||
<div className="form-group">
|
placeholder="Last Name"
|
||||||
<label className={`text-black fw-bold control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
|
value={props.values.lastname}
|
||||||
<input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} />
|
onChange={props.handleChange}/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="col-12">
|
<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">
|
<div className="form-group">
|
||||||
<label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
|
<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} />
|
<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} />
|
<input type="password" name='password' className="form-control" placeholder="Password" value={props.values.password} onChange={props.handleChange} />
|
||||||
</div>
|
</div>
|
||||||
</div> */}
|
</div> */}
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<div className="form-check">
|
<div className="form-check">
|
||||||
<input name='isChecked' className="form-check-input" type="checkbox" id="gridCheck" value={props.values.isChecked} onChange={props.handleChange} />
|
<input name='isChecked'
|
||||||
<label className="form-check-label" htmlFor="gridCheck">
|
className="form-check-input"
|
||||||
I accept terms & policy
|
type="checkbox" id="gridCheck"
|
||||||
</label>
|
value={props.values.isChecked}
|
||||||
</div>
|
onChange={props.handleChange}/>
|
||||||
<span className={`${(props.errors.isChecked && props.touched.isChecked) && 'text-danger'}`}>{props.errors.isChecked}</span>
|
<label className="form-check-label"
|
||||||
</div>
|
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 &&
|
{mutation.error &&
|
||||||
<>
|
<>
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<p className='text-danger'>{mutation.error.message}</p>
|
<p className='text-danger'>{mutation.error.message}</p>
|
||||||
</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>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
<div className="col-12 mt-3 text-end">
|
<div className="col-12 mt-3">
|
||||||
<button type='submit' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
|
<p>Already have an account ?<Link
|
||||||
</div>
|
to={siteLinks.login}>
|
||||||
</>
|
<button
|
||||||
:
|
className="btn btn-warning text-uppercase">
|
||||||
<div className='col-12'>
|
Sign In
|
||||||
<div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#F2FAF7'}}>
|
</button>
|
||||||
<h4 className='p-4 text-black' style={{marginBottom: '-30px'}}>Check your email to continue.</h4>
|
</Link></p>
|
||||||
<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>
|
</div>
|
||||||
}
|
</Form>
|
||||||
|
);
|
||||||
<div className="col-12 mt-3">
|
}}
|
||||||
<p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
|
</Formik>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Formik>
|
|
||||||
</div>
|
</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="row align-items-center h-100">
|
||||||
<div className="col-7 mx-auto ">
|
<div className="col-7 mx-auto ">
|
||||||
<img className="img-fluid" src={LoginImg} alt="" />
|
<img className="img-fluid" src={LoginImg} alt="" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> */}
|
</div> */}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,6 @@
|
|||||||
|
const ColorStyleConfigure =()=>{
|
||||||
|
|
||||||
|
return <>COLOR CONFIG</>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ColorStyleConfigure
|
||||||
@@ -6,8 +6,18 @@ import NoYesBooleanDropdown from './NoYesBooleanDropdown';
|
|||||||
import {IoMdArrowDropdown} from 'react-icons/io';
|
import {IoMdArrowDropdown} from 'react-icons/io';
|
||||||
import queryKeys from '../../../services/queryKeys';
|
import queryKeys from '../../../services/queryKeys';
|
||||||
import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder';
|
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()
|
||||||
|
|
||||||
@@ -81,7 +91,7 @@ const GeneralTab = memo(({name = 'Full Name', data, isCustom, productData, backe
|
|||||||
}
|
}
|
||||||
submitSettings.mutate(reqData)
|
submitSettings.mutate(reqData)
|
||||||
}
|
}
|
||||||
|
console.log(tabKey);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{backendValues?.isFetching || !backendValues?.data ?
|
{backendValues?.isFetching || !backendValues?.data ?
|
||||||
@@ -101,8 +111,17 @@ const GeneralTab = memo(({name = 'Full Name', data, isCustom, productData, backe
|
|||||||
:
|
:
|
||||||
<>
|
<>
|
||||||
{isCustom === true ?
|
{isCustom === true ?
|
||||||
<SiteTemplateSelector name={name} data={sortedData} isCustom={isCustom}
|
<>
|
||||||
productData={productData}/>
|
{(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="page-account-form">
|
||||||
<div className="p-0" style={{minHeight: '500px'}}>
|
<div className="p-0" style={{minHeight: '500px'}}>
|
||||||
|
|||||||
@@ -109,7 +109,7 @@ const Settings = memo(({productData}) => {
|
|||||||
// id={value.controls} role="tabpanel"
|
// id={value.controls} role="tabpanel"
|
||||||
// aria-labelledby={key}
|
// 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>
|
</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
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import React, {useEffect, useMemo, useState} from "react";
|
import React, {useCallback, useEffect, useMemo, useState} from "react";
|
||||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||||
// import { useLocation } from "react-router-dom";
|
// import { useLocation } from "react-router-dom";
|
||||||
// import { Form, Formik } from "formik";
|
import { Form, Formik } from "formik";
|
||||||
import * as Yup from "yup";
|
import * as Yup from "yup";
|
||||||
import {useMutation, useQuery} from "@tanstack/react-query";
|
import {useMutation, useQuery} from "@tanstack/react-query";
|
||||||
import getImage from "../../utils/getImage";
|
import getImage from "../../utils/getImage";
|
||||||
@@ -13,17 +13,16 @@ import {updateUserDetails} from "../../store/UserDetails";
|
|||||||
import {useDispatch} from "react-redux";
|
import {useDispatch} from "react-redux";
|
||||||
|
|
||||||
|
|
||||||
// const validationSchema = Yup.object().shape({
|
const validationSchema = Yup.object().shape({
|
||||||
// practice: Yup.string().required("Required"),
|
practice: Yup.string().required("Required"),
|
||||||
// specialization: Yup.string().required("Required"),
|
specialization: Yup.string().when('practice', {
|
||||||
// introduction: Yup.string().min(1, "Minimum 10 characters").max(50, "Maximum 50 characters").required("Required"),
|
is: (value) => typeof value === 'string' && value.trim().length > 0,
|
||||||
// })
|
then: (schema) => schema.required('Required'),
|
||||||
|
otherwise: (schema) => schema,
|
||||||
// const initialValues = {
|
}),
|
||||||
// practice: '',
|
introduction: Yup.string().min(1, "Minimum 1 character").max(50, "Maximum 50 characters"),
|
||||||
// specialization: '',
|
url_name: Yup.string().min(6, "Minimum 6 characters").max(16, "Maximum 16 characters").required("Required"),
|
||||||
// introduction: '',
|
})
|
||||||
// };
|
|
||||||
|
|
||||||
|
|
||||||
export default function ProfileCompleteCom() {
|
export default function ProfileCompleteCom() {
|
||||||
@@ -35,28 +34,27 @@ export default function ProfileCompleteCom() {
|
|||||||
const {state: {redirectLink}} = useLocation()
|
const {state: {redirectLink}} = useLocation()
|
||||||
|
|
||||||
const [practices, setPractices] = useState([])
|
const [practices, setPractices] = useState([])
|
||||||
|
const [specialties, setSpecialties] = useState([])
|
||||||
|
|
||||||
const [initialValues, setInitialValues] = useState({
|
const [initialValues, setInitialValues] = useState({
|
||||||
practice: '',
|
practice: '',
|
||||||
specialization: '',
|
specialization: '',
|
||||||
introduction: '',
|
introduction: '',
|
||||||
|
url_name: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
const specialties = useMemo(() => { // FUNCTION TO UPDATE SPECIALITY ARRAY EACH TIME PRACTICE CHANGES
|
const handleUpdateSpecialties = (e) => {
|
||||||
setInitialValues(prev => ({...prev, specialization: ''}))
|
setInitialValues(prev => ({...prev, specialization: ''}))
|
||||||
if (!initialValues.practice) {
|
const specialtiesArr = practices.filter(item => item.practice == e.target.value)[0]?.specialties
|
||||||
return []
|
setSpecialties(specialtiesArr)
|
||||||
}
|
}
|
||||||
const specialtiesArr = practices.filter(item => item.practice == initialValues.practice)[0]?.specialties
|
|
||||||
return specialtiesArr
|
|
||||||
}, [initialValues.practice])
|
|
||||||
|
|
||||||
|
|
||||||
const mutation = useMutation({
|
const mutation = useMutation({
|
||||||
mutationFn: (fields) => {
|
mutationFn: (fields) => {
|
||||||
const {practice, specialization} = fields
|
const {practice, specialization, url_name} = fields
|
||||||
if (!practice || !specialization) {
|
if (!practice || !specialization || !url_name) {
|
||||||
throw new Error('Please select both practice and specialization fields')
|
throw new Error('Please select both practice, specialization and Enter URL_Name')
|
||||||
}
|
}
|
||||||
return completeProfile(fields)
|
return completeProfile(fields)
|
||||||
},
|
},
|
||||||
@@ -93,15 +91,11 @@ export default function ProfileCompleteCom() {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const handlePracticeChange = ({target: {name, value}}) => {
|
const handleCompleteProfile = (values) => { // FUNCTION TO COMPLETE PROFILE
|
||||||
setInitialValues(prev => ({...prev, [name]: value}))
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCompleteProfile = () => { // FUNCTION TO COMPLETE PROFILE
|
|
||||||
let reqData = {
|
let reqData = {
|
||||||
token: localStorage.getItem('token'), // USER TOKEN
|
token: localStorage.getItem('token'), // USER TOKEN
|
||||||
uid: localStorage.getItem('uid'), // USER UID
|
uid: localStorage.getItem('uid'), // USER UID
|
||||||
...initialValues
|
...values
|
||||||
}
|
}
|
||||||
mutation.mutate(reqData)
|
mutation.mutate(reqData)
|
||||||
}
|
}
|
||||||
@@ -145,89 +139,146 @@ export default function ProfileCompleteCom() {
|
|||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<div className='h-100 row flex-column'>
|
<div className='h-100 row flex-column'>
|
||||||
{/* <div className="row"> */}
|
{/* <div className="row"> */}
|
||||||
<>
|
<Formik
|
||||||
<div className="">
|
initialValues={initialValues}
|
||||||
<div className="form-group position-relative">
|
validationSchema={validationSchema}
|
||||||
<label className={`text-black fw-bold control-label`}>Practice :</label>
|
onSubmit={handleCompleteProfile}
|
||||||
<div className="position-relative">
|
enableReinitialize={true}
|
||||||
{/* <select onChange={props.handleChange} name='practice' value={props.values.practice} className="form-control">
|
>
|
||||||
<option value=''>Select</option>
|
{(props) => {
|
||||||
{practices.map((practice, index)=>(
|
return (
|
||||||
<option key={index} value={practice.practice}>{practice.practice}</option>
|
<Form className='mt-2'>
|
||||||
))}
|
<>
|
||||||
</select> */}
|
<div className="">
|
||||||
<select onChange={handlePracticeChange} name='practice'
|
<div className="form-group position-relative">
|
||||||
value={initialValues.practice} className="form-control">
|
<label className={`text-black fw-bold control-label`}>Practice : <span className="text-danger">{(props.errors.practice && props.touched.practice) && props.errors.practice}</span></label>
|
||||||
<option value=''>Select</option>
|
<div className="position-relative">
|
||||||
{practices.map((practice, index) => (
|
{/* <select onChange={props.handleChange} name='practice' value={props.values.practice} className="form-control">
|
||||||
<option key={index}
|
<option value=''>Select</option>
|
||||||
value={practice.practice}>{practice.practice}</option>
|
{practices.map((practice, index)=>(
|
||||||
))}
|
<option key={index} value={practice.practice}>{practice.practice}</option>
|
||||||
</select>
|
))}
|
||||||
<IoMdArrowDropdown className='position-absolute w-auto' style={{
|
</select> */}
|
||||||
top: '50%',
|
<select
|
||||||
right: '2px',
|
onChange={(e) => {props.handleChange(e); props.setFieldValue('specialization', ''); handleUpdateSpecialties(e)}}
|
||||||
transform: 'translateY(-50%)'
|
name='practice'
|
||||||
}}/>
|
value={props.values.practice} className="form-control">
|
||||||
</div>
|
<option value=''>Select</option>
|
||||||
</div>
|
{practices.map((practice, index) => (
|
||||||
</div>
|
<option key={index}
|
||||||
|
value={practice.practice}>{practice.practice}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<IoMdArrowDropdown className='position-absolute w-auto' style={{
|
||||||
|
top: '50%',
|
||||||
|
right: '2px',
|
||||||
|
transform: 'translateY(-50%)'
|
||||||
|
}}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="">
|
<div className="">
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label className={`text-black fw-bold control-label`}>Your
|
<label className={`text-black fw-bold control-label`}>Your
|
||||||
Specialization :</label>
|
Specialization : <span className="text-danger">{(props.errors.specialization && props.touched.specialization) && props.errors.specialization}</span></label>
|
||||||
<div className="position-relative">
|
<div className="position-relative">
|
||||||
<select onChange={handlePracticeChange} name='specialization'
|
<select onChange={props.handleChange} name='specialization'
|
||||||
value={initialValues.specialization}
|
value={props.values.specialization}
|
||||||
className="form-control">
|
className="form-control">
|
||||||
<option value=''>Select</option>
|
<option value=''>Select</option>
|
||||||
{specialties.map((specialty, index) => (
|
{specialties.map((specialty, index) => (
|
||||||
<option key={index} value={specialty}>{specialty}</option>
|
<option key={index} value={specialty}>{specialty}</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
<IoMdArrowDropdown className='position-absolute w-auto' style={{
|
<IoMdArrowDropdown className='position-absolute w-auto' style={{
|
||||||
top: '50%',
|
top: '50%',
|
||||||
right: '2px',
|
right: '2px',
|
||||||
transform: 'translateY(-50%)'
|
transform: 'translateY(-50%)'
|
||||||
}}/>
|
}}/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="">
|
<div className="">
|
||||||
<div className="form-group position-relative">
|
<div className="form-group position-relative">
|
||||||
<label className={`text-black fw-bold control-label`}>Other General
|
<label className={`text-black fw-bold control-label`}>Other General Information : <span className="text-danger">{(props.errors.introduction && props.touched.introduction) && props.errors.introduction}</span></label>
|
||||||
Information :</label>
|
<textarea name='introduction' rows={5} style={{resize: 'none'}}
|
||||||
<textarea name='introduction' rows={10} style={{resize: 'none'}}
|
className="form-control" value={props.values.introduction}
|
||||||
className="form-control" value={initialValues.introduction}
|
onChange={props.handleChange}/>
|
||||||
onChange={handlePracticeChange}/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="">
|
<div className="">
|
||||||
<div className="form-group position-relativ'e">
|
<div className="form-group position-relativ'e">
|
||||||
{/*<label className={`text-black fw-bold control-label`}>What we use this*/}
|
{/*<label className={`text-black fw-bold control-label`}>What we use this*/}
|
||||||
{/* information for :</label>*/}
|
{/* information for :</label>*/}
|
||||||
<div style={{fontSize: '14px', borderRadius: '10px', backgroundColor: 'aliceblue', fontWeight:'bolder', padding: '15px' }}>
|
<div style={{
|
||||||
MERMS A.I. agents use the information supplied to help generate useful entries for your product settings.
|
fontSize: '14px',
|
||||||
</div>
|
borderRadius: '10px',
|
||||||
</div>
|
backgroundColor: 'aliceblue',
|
||||||
</div>
|
fontWeight: 'bolder',
|
||||||
|
padding: '15px'
|
||||||
|
}}>
|
||||||
|
MERMS A.I. agents use the information supplied to help generate
|
||||||
|
useful entries for your product settings.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{(mutation.isError || mutation.isSuccess) &&
|
<div className="">
|
||||||
<>
|
<div className="form-group position-relative">
|
||||||
<div className="">
|
<label className={`text-black fw-bold control-label`}>URL Name : <span className="text-danger">{(props.errors.url_name && props.touched.url_name) && props.errors.url_name}</span></label>
|
||||||
<p className={`${mutation.isSuccess ? 'text-success' : 'text-danger'}`}>{mutation.isSuccess ? 'Completed successfully, redirecting...' : mutation.error.message}</p>
|
<div className="position-relative d-flex flex-column flex-xxl-row" style={{gap: '10px'}}>
|
||||||
</div>
|
{/* <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={props.handleChange} name='url_name'
|
||||||
|
value={props.values.url_name}
|
||||||
|
minLength={6}
|
||||||
|
maxLength={16}
|
||||||
|
/>
|
||||||
|
<p className="border-radius-10 p-2 border border-warning"
|
||||||
|
style={{fontSize: "1.0rem"}}>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. <br/>
|
||||||
|
<b>Example : <span style={{color: 'red'}}>url_name</span>.product.mermsemr.com
|
||||||
|
</b>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="mt-auto text-end">
|
{(mutation.isError || mutation.isSuccess) &&
|
||||||
<button type='button' onClick={handleCompleteProfile}
|
<>
|
||||||
className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Continue'}</button>
|
<div className="">
|
||||||
</div>
|
<p className={`${mutation.isSuccess ? 'text-success' : 'text-danger'}`}>{mutation.isSuccess ? 'Completed successfully, redirecting...' : mutation.error.message}</p>
|
||||||
</>
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div className="mt-auto text-end">
|
||||||
|
<button type='submit'
|
||||||
|
className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Continue'}</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</Formik>
|
||||||
{/* </div> */}
|
{/* </div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -52,7 +52,7 @@ export default function Settings() {
|
|||||||
const data = profileInfo?.data
|
const data = profileInfo?.data
|
||||||
setInitialData({external_links: data?.external_links, personal_data: data?.personal_data})
|
setInitialData({external_links: data?.external_links, personal_data: data?.personal_data})
|
||||||
},[profileInfo])
|
},[profileInfo])
|
||||||
console.log('INI', intialData)
|
// console.log('INI', intialData)
|
||||||
|
|
||||||
|
|
||||||
const updateProfile = (values, helpers) => {
|
const updateProfile = (values, helpers) => {
|
||||||
@@ -101,7 +101,7 @@ export default function Settings() {
|
|||||||
className="img-fluid" alt="user"/>
|
className="img-fluid" alt="user"/>
|
||||||
</div>
|
</div>
|
||||||
<div className="profile pt-4">
|
<div className="profile pt-4">
|
||||||
<h4 className="mb-1">Alice Williams</h4>
|
<h4 className="mb-1">{intialData?.personal_data?.lastname} {intialData?.personal_data?.firstname}</h4>
|
||||||
<div style={{padding: '10px'}}>
|
<div style={{padding: '10px'}}>
|
||||||
<hr/>
|
<hr/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ export default function Traffic() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<div className="apexchart-wrapper">
|
<div className="apexchart-wrapper">
|
||||||
{/* <TrafficChart /> */}
|
<TrafficChart />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -7,13 +7,23 @@ import ReactApexChart from "react-apexcharts";
|
|||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
// name: "High - 2013",
|
// name: "High - 2013",
|
||||||
name: 'High',
|
name: 'Professional Website',
|
||||||
data: [28, 29, 33, 36, 32, 32, 33, 33, 36, 32, 32, 33]
|
data: [28, 29, 33, 36, 32, 32, 33, 33, 36, 32, 32, 33]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
// name: "Low - 2013",
|
// name: "Low - 2013",
|
||||||
name: 'Low',
|
name: 'Personal Website',
|
||||||
data: [12, 11, 14, 18, 17, 13, 13, 14, 18, 17, 13, 13]
|
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: {
|
options: {
|
||||||
@@ -35,7 +45,7 @@ import ReactApexChart from "react-apexcharts";
|
|||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
colors: ['#77B6EA', '#545454'],
|
colors: ['#77B6EA', '#545454', '#F50898','#213ece'],
|
||||||
dataLabels: {
|
dataLabels: {
|
||||||
enabled: true,
|
enabled: true,
|
||||||
},
|
},
|
||||||
@@ -43,7 +53,7 @@ import ReactApexChart from "react-apexcharts";
|
|||||||
curve: 'smooth'
|
curve: 'smooth'
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
text: 'Average High & Low Temperature',
|
text: 'Recent Sites Traffic',
|
||||||
align: 'left'
|
align: 'left'
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
@@ -64,7 +74,7 @@ import ReactApexChart from "react-apexcharts";
|
|||||||
},
|
},
|
||||||
yaxis: {
|
yaxis: {
|
||||||
title: {
|
title: {
|
||||||
text: 'Temperature'
|
text: 'Visits'
|
||||||
},
|
},
|
||||||
min: 5,
|
min: 5,
|
||||||
max: 40
|
max: 40
|
||||||
@@ -86,7 +96,7 @@ import ReactApexChart from "react-apexcharts";
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div id="chart">
|
<div id="chart">
|
||||||
<ReactApexChart options={state.options} series={state.series} type="line" height={350} />
|
<ReactApexChart options={state.options} series={state.series} type="line" height={450} />
|
||||||
</div>
|
</div>
|
||||||
<div id="html-dist"></div>
|
<div id="html-dist"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user