CHIEFSOFT\ameye
198 lines
12 KiB
React
198 lines
12 KiB
React
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 queryKeys from '../../../services/queryKeys';
|
|
import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder';
|
|
import URLConfiguration from "./URLConfiguration";
|
|
import ColorStyleConfigure from "./ColorStyleConfigure";
|
|
|
|
const GeneralTab = memo(({
|
|
name = 'Full Name',
|
|
data,
|
|
tabKey,
|
|
isCustom,
|
|
productData,
|
|
backendValues,
|
|
setFieldsChanged
|
|
}) => {
|
|
|
|
const queryClient = useQueryClient()
|
|
|
|
const [reqStatus, setReqStatus] = useState({error: null, message: ''})
|
|
|
|
|
|
// const computeFieldData = useMemo(()=>{
|
|
// const fieldData = {}
|
|
// Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
|
|
// fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
|
|
// })
|
|
// backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
|
|
// fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
|
|
// })
|
|
// return fieldData
|
|
// },[backendValues.data])
|
|
|
|
|
|
const [fields, setFields] = useState({})
|
|
|
|
const 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(" ", "_")] = ''
|
|
})
|
|
backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
|
|
fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
|
|
})
|
|
setFields(fieldData)
|
|
}, [backendValues.data])
|
|
|
|
const handleChange = ({target: {name, value}}) => {
|
|
setFields(prev => ({...prev, [name]: value}))
|
|
setFieldsChanged(true)
|
|
}
|
|
|
|
const submitSettings = useMutation({
|
|
mutationFn: (fields) => {
|
|
return pageSettings(fields)
|
|
},
|
|
onSuccess: (res) => {
|
|
if (res?.data?.resultCode != '0') {
|
|
return setReqStatus({error: true, message: 'Unable to complete, try again later'})
|
|
}
|
|
setFieldsChanged(false)
|
|
setReqStatus({error: false, message: 'Completed successfully'})
|
|
},
|
|
onError: (err) => {
|
|
setReqStatus({error: true, message: 'Unable to complete, try again later'})
|
|
},
|
|
onSettled: () => {
|
|
queryClient.refetchQueries({ // refetches productProvision API call
|
|
queryKey: [...queryKeys.settingsData],
|
|
})
|
|
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
|
|
}
|
|
}
|
|
submitSettings.mutate(reqData)
|
|
}
|
|
console.log(tabKey);
|
|
return (
|
|
<>
|
|
{backendValues?.isFetching || !backendValues?.data ?
|
|
<>
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<p className='text-mute'>Loading...</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
: backendValues?.isError ?
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<p className='text-danger'>{backendValues?.error.message}</p>
|
|
</div>
|
|
</div>
|
|
:
|
|
<>
|
|
{isCustom === true ?
|
|
<>
|
|
{(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>
|
|
}
|
|
</>
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
)
|
|
|
|
|
|
export default GeneralTab |