victorAnumudu
105 lines
4.4 KiB
React
105 lines
4.4 KiB
React
import React, {memo, useState} from 'react'
|
|
import { useMutation } from "@tanstack/react-query";
|
|
import { pageSettings } from "../../../services/services";
|
|
import SiteTemplateSelector from './SiteTemplateSelector';
|
|
|
|
const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
|
|
|
|
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().replace(" ", "_")] = ''
|
|
})
|
|
backendValues.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
|
|
fieldData[item?.setting_key?.toLowerCase().replace(" ", "_")] = 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: () => {
|
|
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]) => (
|
|
<div key={key} className="form-group col-md-12">
|
|
<label htmlFor="name1">{value.name}</label>
|
|
{value.controls == 'TEXT' ?
|
|
<input name={value.name.toLowerCase().replace(" ", "_")} type="text" className="form-control" id={key} value={fields[value.name.toLowerCase().replace(" ", "_")]} onChange={handleChange} />
|
|
:value.controls == 'TEXTAREA' ?
|
|
<textarea name={value.name.toLowerCase().replace(" ", "_")} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fields[value.name.toLowerCase().replace(" ", "_")]} onChange={handleChange} />
|
|
:
|
|
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 |