MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

new image data

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2025-08-30 11:17:47 -04:00
parent 98bf50fcde
commit 1e7014172d
2 changed files with 76 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/img/tell-us-more.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 417 KiB

src/component/profile_complete/ProfileCompleteCom.jsx
+73 -54
View File
@@ -1,16 +1,16 @@
import React, { useEffect, useMemo, useState } from "react"; import React, {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";
import { IoMdArrowDropdown } from "react-icons/io"; import {IoMdArrowDropdown} from "react-icons/io";
import { completeProfile, getCommonPractice } from '../../services/services'; import {completeProfile, getCommonPractice} from '../../services/services';
import siteLinks from "../../links/siteLinks"; import siteLinks from "../../links/siteLinks";
import { useLocation, useNavigate } from "react-router-dom"; import {useLocation, useNavigate} from "react-router-dom";
import { updateUserDetails } from "../../store/UserDetails"; 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({
@@ -26,13 +26,13 @@ import { useDispatch } from "react-redux";
// }; // };
export default function ProfileCompleteCom(){ export default function ProfileCompleteCom() {
const dispatch = useDispatch() const dispatch = useDispatch()
const navigate = useNavigate() const navigate = useNavigate()
const {state:{redirectLink}} = useLocation() const {state: {redirectLink}} = useLocation()
const [practices, setPractices] = useState([]) const [practices, setPractices] = useState([])
@@ -42,35 +42,37 @@ export default function ProfileCompleteCom(){
introduction: '', introduction: '',
}) })
const specialties = useMemo(()=>{ // FUNCTION TO UPDATE SPECIALITY ARRAY EACH TIME PRACTICE CHANGES const specialties = useMemo(() => { // FUNCTION TO UPDATE SPECIALITY ARRAY EACH TIME PRACTICE CHANGES
setInitialValues(prev => ({...prev, specialization: ''})) setInitialValues(prev => ({...prev, specialization: ''}))
if(!initialValues.practice){ if (!initialValues.practice) {
return [] return []
} }
const specialtiesArr = practices.filter(item => item.practice == initialValues.practice)[0]?.specialties const specialtiesArr = practices.filter(item => item.practice == initialValues.practice)[0]?.specialties
return specialtiesArr return specialtiesArr
},[initialValues.practice]) }, [initialValues.practice])
const mutation = useMutation({ const mutation = useMutation({
mutationFn: (fields) => { mutationFn: (fields) => {
const {practice, specialization} = fields const {practice, specialization} = fields
if(!practice || !specialization){ if (!practice || !specialization) {
throw new Error('Please select both practice and specialization fields') throw new Error('Please select both practice and specialization fields')
} }
return completeProfile(fields) return completeProfile(fields)
}, },
onError: () => { onError: () => {
setTimeout(()=>{mutation.reset()}, 4000) setTimeout(() => {
mutation.reset()
}, 4000)
}, },
onSuccess: (res) => { onSuccess: (res) => {
if(res.data.resultCode != '0'){ if (res.data.resultCode != '0') {
throw({message: res?.data?.resultDescription}) throw({message: res?.data?.resultDescription})
} }
dispatch(updateUserDetails({profile_completed: res?.data?.profile_completed })); dispatch(updateUserDetails({profile_completed: res?.data?.profile_completed}));
setTimeout(()=>{ setTimeout(() => {
navigate(redirectLink) navigate(redirectLink)
},2000) }, 2000)
// console.log('res', res) // console.log('res', res)
} }
}) })
@@ -79,11 +81,11 @@ export default function ProfileCompleteCom(){
mutationFn: (fields) => { mutationFn: (fields) => {
return getCommonPractice(fields) return getCommonPractice(fields)
}, },
onError: ()=> { onError: () => {
setPractices([]) setPractices([])
}, },
onSuccess: (res) => { onSuccess: (res) => {
if(!res?.data){ if (!res?.data) {
return setPractices([]) return setPractices([])
} }
let returnPractices = Object.entries(res?.data).filter(([key, value]) => typeof value == 'object')?.map(item => item[1]) let returnPractices = Object.entries(res?.data).filter(([key, value]) => typeof value == 'object')?.map(item => item[1])
@@ -91,8 +93,8 @@ export default function ProfileCompleteCom(){
} }
}) })
const handlePracticeChange = ({target:{name, value}}) => { const handlePracticeChange = ({target: {name, value}}) => {
setInitialValues(prev => ({...prev, [name]:value})) setInitialValues(prev => ({...prev, [name]: value}))
} }
const handleCompleteProfile = () => { // FUNCTION TO COMPLETE PROFILE const handleCompleteProfile = () => { // FUNCTION TO COMPLETE PROFILE
@@ -104,17 +106,17 @@ export default function ProfileCompleteCom(){
mutation.mutate(reqData) mutation.mutate(reqData)
} }
useEffect(()=>{ useEffect(() => {
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
} }
commonPractices.mutate(reqData) commonPractices.mutate(reqData)
},[]) }, [])
return <> return <>
<BreadcrumbComBS title='Tell us more about your practice.' paths={['Dashboard', 'Profile']} /> <BreadcrumbComBS title='Tell us more about your practice.' paths={['Dashboard', 'Profile']}/>
{commonPractices?.isFetching ? {commonPractices?.isFetching ?
<> <>
@@ -130,19 +132,19 @@ export default function ProfileCompleteCom(){
<p className='text-danger'>{commonPractices?.error?.message}</p> <p className='text-danger'>{commonPractices?.error?.message}</p>
</div> </div>
</div> </div>
: :
<div className="row pt-1"> <div className="row pt-1">
<div className="col-md-6 m-b-30"> <div className="col-md-6 m-b-30">
<div className="card card-statistics h-100 mb-0" style={{borderRadius: '10px'}}> <div className="card card-statistics h-100 mb-0" style={{borderRadius: '10px'}}>
{/* <div className="card-header d-flex align-items-center justify-content-between"> {/* <div className="card-header d-flex align-items-center justify-content-between">
<div className="card-heading"> <div className="card-heading">
<h4 className="card-title">My Product URLs</h4> <h4 className="card-title">My Product URLs</h4>
</div> </div>
</div> */} </div> */}
{/* <div style={{minHeight: '400px'}}></div> */} {/* <div style={{minHeight: '400px'}}></div> */}
<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"> */}
<> <>
<div className=""> <div className="">
<div className="form-group position-relative"> <div className="form-group position-relative">
@@ -154,63 +156,80 @@ export default function ProfileCompleteCom(){
<option key={index} value={practice.practice}>{practice.practice}</option> <option key={index} value={practice.practice}>{practice.practice}</option>
))} ))}
</select> */} </select> */}
<select onChange={handlePracticeChange} name='practice' value={initialValues.practice} className="form-control"> <select onChange={handlePracticeChange} name='practice'
value={initialValues.practice} className="form-control">
<option value=''>Select</option> <option value=''>Select</option>
{practices.map((practice, index)=>( {practices.map((practice, index) => (
<option key={index} value={practice.practice}>{practice.practice}</option> <option key={index}
value={practice.practice}>{practice.practice}</option>
))} ))}
</select> </select>
<IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} /> <IoMdArrowDropdown className='position-absolute w-auto' style={{
top: '50%',
right: '2px',
transform: 'translateY(-50%)'
}}/>
</div> </div>
</div> </div>
</div> </div>
<div className=""> <div className="">
<div className="form-group"> <div className="form-group">
<label className={`text-black fw-bold control-label`}>Your Specialization :</label> <label className={`text-black fw-bold control-label`}>Your
Specialization :</label>
<div className="position-relative"> <div className="position-relative">
<select onChange={handlePracticeChange} name='specialization' value={initialValues.specialization} className="form-control"> <select onChange={handlePracticeChange} name='specialization'
value={initialValues.specialization}
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={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} /> <IoMdArrowDropdown className='position-absolute w-auto' style={{
top: '50%',
right: '2px',
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 Information :</label> <label className={`text-black fw-bold control-label`}>Other General
<textarea name='introduction' rows={10} style={{resize: 'none'}} className="form-control" value={initialValues.introduction} onChange={handlePracticeChange} /> Information :</label>
<textarea name='introduction' rows={10} style={{resize: 'none'}}
className="form-control" value={initialValues.introduction}
onChange={handlePracticeChange}/>
</div> </div>
</div> </div>
{(mutation.isError || mutation.isSuccess) && {(mutation.isError || mutation.isSuccess) &&
<> <>
<div className=""> <div className="">
<p className={`${mutation.isSuccess ? 'text-success' : 'text-danger'}`}>{mutation.isSuccess ? 'Completed successfully, redirecting...' : mutation.error.message}</p> <p className={`${mutation.isSuccess ? 'text-success' : 'text-danger'}`}>{mutation.isSuccess ? 'Completed successfully, redirecting...' : mutation.error.message}</p>
</div> </div>
</> </>
} }
<div className="mt-auto text-end"> <div className="mt-auto text-end">
<button type='button' onClick={handleCompleteProfile} className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Continue'}</button> <button type='button' onClick={handleCompleteProfile}
className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Continue'}</button>
</div> </div>
</> </>
{/* </div> */} {/* </div> */}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div className="col-md-6 m-b-30">
<div className="col-md-6 m-b-30"> <div className="text-center img-block left-column wow fadeInRight">
<div className="text-center img-block left-column wow fadeInRight"> <img className="img-fluid" src={getImage('tell-us-more.png')} alt="content-image"/>
<img className="img-fluid" src={getImage('img-07.png')} alt="content-image" /> </div>
</div> </div>
</div> </div>
</div>
} }
</>; </>;