import { useEffect, useState } from 'react'; // material-ui import { useLocation, useNavigate } from 'react-router-dom'; import { Box, Button, Grid, InputLabel, MenuItem, Select, Stack, TextField, Typography, Autocomplete, useMediaQuery, useTheme } from '@mui/material'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; // third-party // import { PatternFormat } from 'react-number-format'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; // project import import MainCard from 'components/MainCard'; import axios from 'axios'; import { usePlacesWidget } from 'react-google-autocomplete'; import Loader from 'components/Loader'; import Geocode from 'react-geocode'; import { enqueueSnackbar } from 'notistack'; import dayjs from 'dayjs'; import CircularLoader from 'components/CircularLoader'; const EditRider = () => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('md')); const location = useLocation(); const [riderdata, setRiderdata] = useState(null); const navigate = useNavigate(); const [address, setAddress] = useState(''); const [suburb, setSuburb] = useState(''); const [city, setCity] = useState(''); const [state, setState] = useState(''); const [partner, setPartner] = useState({}); const [vehiclelist, setVehiclelist] = useState([]); const [accountlist, setAccountlist] = useState([]); const [partnerlist, setPartnerlist] = useState([]); const [shiftlist, setShiftlist] = useState([]); const [locaName, setLocoName] = useState(); const userid = localStorage.getItem('userid'); Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY); const [loading, setLoading] = useState(false); const fetchRiderData = async (id) => { try { let riderdataresponse = await axios.get(`https://jupiter.nearle.app/live/api/v1/partners/getriderdetail/?userid=${id}`); console.log('riderdataresponse', riderdataresponse.data.details); setRiderdata(riderdataresponse.data.details); fetchridershifts(riderdataresponse.data.details.applocationid); } catch (error) { console.log('fetchmanagerList', error); } }; useEffect(() => { fetchRiderData(location.state.riderdata.userid); }, []); useEffect(() => { console.log('riderdata', riderdata); }, [riderdata, address]); useEffect(() => { setAddress(location.state.riderdata.address); setSuburb(location.state.riderdata.suburb); setCity(location.state.riderdata.city); setState(location.state.riderdata.state); }, []); useEffect(() => { if (localStorage.getItem('tenantid')) { fetchtenantinfo(localStorage.getItem('tenantid')); } fetchvehicle(); fetchaccounttype(); }, []); useEffect(() => { if (partner.applocationid) { fetchridershifts(partner.applocationid); } }, [partner.applocationid]); const fetchtenantinfo = async (tid) => { setLoading(true); await axios .get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`) .then((res) => { console.log(res); if (res.data.status) { setTenantinfo(res.data.details); } setLoading(false); }) .catch((err) => { console.log(err); setLoading(false); }); }; const fetchvehicle = async () => { setLoading(true); await axios .get(`${process.env.REACT_APP_URL}/utils/getapptypes?tag=vehicle`) .then((res) => { console.log('fetchvehicle', res); let arr = []; res.data.map((val) => { arr.push({ ...val, label: val.typename }); }); setVehiclelist([...arr]); setLoading(false); }) .catch((err) => { console.log(err); setLoading(false); }); }; const fetchaccounttype = async () => { setLoading(true); await axios .get(`${process.env.REACT_APP_URL}/utils/getapptypes?tag=accounttype`) .then((res) => { console.log(res); // if (res.data.status) { let arr = []; res.data.map((val) => { arr.push({ ...val, label: val.typename }); }); setAccountlist([...arr]); console.log(arr); // } setLoading(false); }) .catch((err) => { console.log(err); setLoading(false); }); }; // const fetchpartnerlist = async () => { // setLoading(true); // await axios // .get(`${process.env.REACT_APP_URL}/partners/getpartners`) // .then((res) => { // console.log('fetchpartnerlist', res); // // if (res.data.status) { // let arr = []; // res.data.details.map((val) => { // arr.push({ // ...val, // label: val.partnername // }); // }); // setPartnerlist([...arr]); // console.log(arr); // // } // setLoading(false); // }) // .catch((err) => { // console.log(err); // setLoading(false); // }); // }; // ==============================|| fetchAppLocations ||============================== // const fetchAppLocations = async () => { try { const locationRes = await axios.get(`${process.env.REACT_APP_URL}/partners/getlocations/?userid=${userid}`); // const updatedLocations = [ // ...locationRes.data.details, // { locationname: 'All', applocationid: 0 } // Add your new object here // ]; console.log('fetchAppLocations', locationRes.data.details); setPartnerlist(locationRes.data.details); } catch (err) { console.log('locationRes', err); } }; useEffect(() => { fetchAppLocations(); }, []); const fetchridershifts = async (id) => { setLoading(true); await axios .get(`${process.env.REACT_APP_URL}/partners/getridershifts/?applocationid=${id}`) .then((res) => { console.log('fetchridershifts', res); // if (res.data.status) { let arr = []; res.data.details.map((val) => { arr.push({ ...val, label: val.shiftname }); }); setShiftlist([...arr]); console.log(arr); // } setLoading(false); }) .catch((err) => { console.log(err); setLoading(false); }); }; useEffect(() => { if (selectedImage) { setAvatar(URL.createObjectURL(selectedImage)); } }, [selectedImage]); const { ref: materialRef } = usePlacesWidget({ apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY, onPlaceSelected: (place) => { console.log(place); setAddress(place.formatted_address); let city1, zipcode1, state1, suburb1; for (let i = 0; i < place.address_components.length; i++) { for (let j = 0; j < place.address_components[i].types.length; j++) { switch (place.address_components[i].types[j]) { case 'locality': city1 = place.address_components[i].long_name; break; case 'administrative_area_level_1': state1 = place.address_components[i].long_name; break; case 'postal_code': zipcode1 = place.address_components[i].long_name; break; case 'sublocality': suburb1 = place.address_components[i].long_name; break; } } } setCity(city1 || ''); setState(state1 || ''); setZipcode(zipcode1 || ''); setSuburb(suburb1 || ''); // setAddress(place.formatted_address) }, // inputAutocompleteValue: "country", options: { // componentRestrictions: 'us', // types: ["establishment"] types: ['address' || 'geocode'] } }); const updateRider = async () => { setLoading(true); console.log('updated riderData', riderdata); await axios .put(`https://jupiter.nearle.app/live/api/v1/partners/updaterider`, { userid: riderdata.userid, contactno: riderdata.contactno, firstname: riderdata.firstname, lastname: riderdata.lastname, email: riderdata.email, address: riderdata.address, suburb: riderdata.suburb, city: riderdata.city, state: riderdata.state, partnerid: riderdata.partnerid, applocationid: riderdata.applocationid, ridersettings: { riderid: riderdata.riderid, userid: riderdata.userid, partnerid: riderdata.partnerid, shiftid: riderdata.shiftid, identificationno: riderdata.identificationno, basefare: riderdata.basefare, additionalkm: riderdata.additionalkm, othercharges: riderdata.othercharges, accountno: riderdata.accountno, accountname: riderdata.accountname, accounttypeid: riderdata.accounttypeid, accounttype: riderdata.accounttype, bankname: riderdata.bankname, ifsccode: riderdata.ifsccode, Branch: riderdata.branch, vehicleid: riderdata.vehicleid, vehiclename: riderdata.vehiclename, vehicleno: riderdata.vehicleno, model: riderdata.model, color: riderdata.color, licenseno: riderdata.licenseno, insurancedate: dayjs(riderdata.insurancedate).format('YYYY-MM-DD HH:mm:ss') } }) .then((response) => { console.log('post response', response); if (response.status == 200) { enqueueSnackbar(`Updated Sucessfully`, { variant: 'success', anchorOrigin: { vertical: 'top', horizontal: 'right' }, autoHideDuration: 2000 }); setRiderdata(null); navigate('/nearle/riders'); setLoading(false); } else { enqueueSnackbar('Update Failed', { variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' }, autoHideDuration: 2000 }); setLoading(false); } }); }; return ( <> {loading && ( <> )} Edit Rider } > {/* || =========================================== || Contact Information || =========================================== || */} Contact Information } > {/* ========================== || First Name || ========================== */} First Name { setRiderdata({ ...riderdata, firstname: e.target.value }); }} placeholder="Name" autoComplete="off" /> {/* ========================== || Last Name || ========================== */} Last Name { setRiderdata({ ...riderdata, lastname: e.target.value }); }} value={riderdata?.lastname} autoComplete="off" /> {/* ========================== || Phone Number || ========================== */} Phone Number { setRiderdata({ ...riderdata, contactno: e.target.value }); }} value={riderdata?.contactno} autoComplete="off" // disabled sx={{ cursor: 'not-allowed' }} /> {' '} {/* ========================== || Email Address || ========================== */} Email Address { setRiderdata({ ...riderdata, email: e.target.value }); }} value={riderdata?.email} autoComplete="off" /> {/* ========================== ||Address || ========================== */} Address { setAddress(e.target.value); }} inputRef={materialRef} /> {/* ========================== || Location|| ========================== */} Location { setRiderdata({ ...riderdata, suburb: e.target.value }); setSuburb(e.target.value); }} value={suburb} autoComplete="off" /> {/* ========================== || City|| ========================== */} City { setRiderdata({ ...riderdata, city: e.target.value }); setCity(e.target.value); }} value={city} autoComplete="off" /> {/* ========================== || State|| ========================== */} State { setRiderdata({ ...riderdata, state: e.target.value }); setState(e.target.value); }} value={state} autoComplete="off" /> {/* ========================== || Identification No|| ========================== */} Identification No { setRiderdata({ ...riderdata, identificationno: e.target.value }); }} value={riderdata?.identificationno} autoComplete="off" /> {/* ========================== || Choose Partner|| ========================== */} Choose Partner `${option.locationname}`} sx={{ width: { xs: '100%', sm: 300 }, height: '30px', ml: { xs: 0, sm: 3 }, zIndex: '100' }} onChange={(event, value) => { if (value) { console.log(value); setLocoName(value.locationname); fetchridershifts(value.applocationid); setRiderdata({ ...riderdata, partnerid: value.partnerid, applocationid: value.applocationid }); } else { setPartner({}); } }} renderInput={(params) => } /> {/* } label={locaName} options={partnerlist} getOptionLabel={(option) => `${option.locationname}`} onChange={(e, val) => { if (val) { setPartner(val); setRiderdata({ ...riderdata, partnerid: val.partnerid }); } else { setPartner({}); } }} freeSolo /> */} {/* || =========================================== || Charges || =========================================== || */} Charges } > {/* ========================== || Shift Type || ========================== */} Shift Type ( )} // disabled options={shiftlist} onChange={(e, val) => { if (val) { console.log('shift', val); setRiderdata({ ...riderdata, shiftid: val.shiftid, additionalkm: val.additionalkm, additionalcharges: val.additionalcharges, basefare: val.basefare, starttime: val.starttime, endtime: val.endtime }); setBasefare(val.basefare); setAdditionalkms(val.additionalkm); setOthercharges(val.additionalcharges); setShift(val); } else { setBasefare(''); setAdditionalkms(''); setOthercharges(''); setShift({}); } }} freeSolo /> {/* ========================== || Base Fare || ========================== */} Base Fare { setRiderdata({ ...riderdata, basefare: e.target.value }); setBasefare(e.target.value); }} value={riderdata?.basefare} autoComplete="off" disabled /> {/* ========================== || Additional Kms || ========================== */} Additional Kms { setRiderdata({ ...riderdata, additionalkm: e.target.value }); setAdditionalkms(e.target.value); }} value={riderdata?.additionalkm} autoComplete="off" disabled /> {/* ========================== || Other Charges || ========================== */} Other Charges { setRiderdata({ ...riderdata, additionalcharges: e.target.value }); setOthercharges(e.target.value); }} value={riderdata?.additionalcharges} autoComplete="off" disabled /> {/* || =========================================== || Bank Details || =========================================== || */} Bank Details } > {' '} {/* ========================== || Account No|| ========================== */} Account No { setRiderdata({ ...riderdata, accountno: e.target.value }); setAccountno(e.target.value); }} autoComplete="off" /> {' '} {/* ========================== || Account Name || ========================== */} Account Name { setRiderdata({ ...riderdata, accountname: e.target.value }); setAccountname(e.target.value); }} autoComplete="off" /> {' '} {/* ========================== || Account Type || ========================== */} Account Type ( )} // disabled options={accountlist} // value={clientdetail} onChange={(e, val) => { console.log('ac type', val); if (val) { setRiderdata({ ...riderdata, accounttype: val.label }); setAccount(val); setAccountType(val.label); // fetchroles(val.tenantid); } else { setAccount({}); } }} freeSolo /> {' '} {/* ========================== || Bank Name|| ========================== */} Bank Name { setRiderdata({ ...riderdata, bankname: e.target.value }); setBankname(e.target.value); }} autoComplete="off" /> {' '} {/* ========================== || IFSC Code || ========================== */} IFSC Code { setRiderdata({ ...riderdata, ifsccode: e.target.value }); setIfsc(e.target.value); }} autoComplete="off" /> {/* ========================== || Branch || ========================== */} Branch { setRiderdata({ ...riderdata, branch: e.target.value }); setBranch(e.target.value); }} autoComplete="off" /> {/* || =========================================== || Vehicle Details || =========================================== || */} Vehicle Details } > {/* ========================== || Vehicle Name || ========================== */} Vehicle Name ( )} // disabled options={vehiclelist} // value={clientdetail} onChange={(e, val) => { if (val) { console.log('vehi', val); setVehicle(val); setRiderdata({ ...riderdata, vehiclename: val.label, vehicleid: val.apptypeid }); // fetchroles(val.tenantid); } else { setVehicle({}); } }} freeSolo /> {' '} {/* ========================== || Vehicle No || ========================== */} Vehicle No { setRiderdata({ ...riderdata, vehicleno: e.target.value }); }} value={riderdata?.vehicleno} autoComplete="off" /> {' '} {/* ========================== || Model Year || ========================== */} Model Year { setRiderdata({ ...riderdata, model: e.target.value }); setModelyear(e.target.value); }} value={riderdata?.model} autoComplete="off" /> {' '} {/* ========================== || Vehicle Color || ========================== */} Vehicle Color { setRiderdata({ ...riderdata, color: e.target.value }); setVehiclecolor(e.target.value); }} value={riderdata?.color} autoComplete="off" /> {' '} {/* ========================== || License No || ========================== */} License No { setRiderdata({ ...riderdata, licenseno: e.target.value }); }} value={riderdata?.licenseno} autoComplete="off" /> {' '} {/* ========================== || Insurance No || ========================== */} Insurance No { setRiderdata({ ...riderdata, insuranceno: e.target.value }); }} value={riderdata?.insuranceno} autoComplete="off" /> {' '} {/* ========================== || Insurance Expiry Date || ========================== */} Insurance Expiry Date { setExpirydate(dayjs(e.$d).format('YYYY-MM-DD 00:00:00')); setRiderdata({ ...riderdata, insurancedate: dayjs(e.$d).format('YYYY-MM-DD 00:00:00') }); }} sx={{ width: '100%' }} // disablePast // minDate={dayjs().add(1, 'day')} /> {/* ================= FIXED BOTTOM ACTION ================= */} {/* ========================== || Update || ========================== */} ); }; export default EditRider;