diff --git a/src/pages/nearle/clients/createclient.js b/src/pages/nearle/clients/createCustomer.js similarity index 98% rename from src/pages/nearle/clients/createclient.js rename to src/pages/nearle/clients/createCustomer.js index ab51520..a7ba0eb 100644 --- a/src/pages/nearle/clients/createclient.js +++ b/src/pages/nearle/clients/createCustomer.js @@ -40,7 +40,7 @@ import { useNavigate } from 'react-router'; // } // }; -const Createclient = () => { +const CreateCustomer = () => { const theme = useTheme(); const [selectedImage, setSelectedImage] = useState(undefined); const [avatar, setAvatar] = useState(); @@ -386,24 +386,24 @@ const Createclient = () => { - + - + - + - + Role setRole(e.target.value)} value={role} @@ -657,4 +657,4 @@ const Createclient = () => { ); }; -export default Createclient; +export default CreateCustomer; diff --git a/src/pages/nearle/clients/clients1.js b/src/pages/nearle/clients/customers.js similarity index 99% rename from src/pages/nearle/clients/clients1.js rename to src/pages/nearle/clients/customers.js index 9f7ec83..b14196c 100644 --- a/src/pages/nearle/clients/clients1.js +++ b/src/pages/nearle/clients/customers.js @@ -148,7 +148,7 @@ const BootstrapDialog = styled(Dialog)(({ theme }) => ({ } })); -const Clients1 = () => { +const Customers = () => { const theme = useTheme(); const [search, setSearch] = useState(''); const [loading, setLoading] = useState(false); @@ -858,7 +858,7 @@ const Clients1 = () => { {/* */} { > - + { - + @@ -1324,7 +1324,7 @@ const Clients1 = () => { onChange={(e) => { setPackDays(e.target.value); console.log(e.target.value); - + }} > @@ -1420,7 +1420,7 @@ const Clients1 = () => { variant="contained" sx={{ "&:hover": { - + }, mr: 1.5, px: 5, @@ -1464,7 +1464,7 @@ const Clients1 = () => { /> }{" "} Disable - + */} {/* @@ -1742,7 +1742,7 @@ const Clients1 = () => { {/* { {row.ordernotes} - @@ -2075,7 +2075,7 @@ const Clients1 = () => { } - + @@ -2085,7 +2085,7 @@ const Clients1 = () => { }) } - + */} @@ -2211,4 +2211,4 @@ const Clients1 = () => { ); }; -export default Clients1; +export default Customers; diff --git a/src/pages/nearle/orders/createorder1.js b/src/pages/nearle/orders/createorder1.js index 391224b..ca98b22 100644 --- a/src/pages/nearle/orders/createorder1.js +++ b/src/pages/nearle/orders/createorder1.js @@ -114,6 +114,30 @@ const Createorder1 = () => { const autocompleteService = useRef(null); const [tenanatLocoId, setTenanatLocoId] = useState(localStorage.getItem('locationid')); const [isLocation, setIsLocation] = useState(false); + const textFieldRef1 = useRef(null); + const textFieldRef2 = useRef(null); + + const handleOkClick1 = () => { + // Set focus back to the text field after clicking the "OK" chip + if (textFieldRef1.current) { + textFieldRef1.current.focus(); + } + }; + + const handleOkClick2 = () => { + // Set focus back to the text field after clicking the "OK" chip + if (textFieldRef2.current) { + textFieldRef2.current.focus(); + } + }; + + const top100Films = [ + { label: 'The Shawshank Redemption', year: 1994 }, + { label: 'The Godfather', year: 1972 }, + { label: 'The Godfather: Part II', year: 1974 }, + { label: 'The Dark Knight', year: 2008 }, + { label: '12 Angry Men', year: 1957 } + ]; // // // ====================================================== || address (pick)|| ====================================================== // useEffect(() => { @@ -467,11 +491,6 @@ const Createorder1 = () => { } }; - useEffect(() => { - clientdetails(); - // clientdetailsbusiness(); - }, [searchCustList.length > 3, searchCustList == '']); - useEffect(() => { if (timeslotarr[0]) { let arr = []; @@ -912,6 +931,7 @@ const Createorder1 = () => { } else { try { const createRes = await axios.post(`${process.env.REACT_APP_URL2}/orders/createorder`, arr); + // const createRes = await axios.post(`${process.env.REACT_APP_URL}/orders/createorder`, arr); if (createRes.data.status) { console.log('createRes', createRes); enqueueSnackbar('Order Created Successfully', { @@ -958,7 +978,7 @@ const Createorder1 = () => { try { let url = searchCustList == '' - ? `${process.env.REACT_APP_URL}/customers/getbytid/?tenantid=${tid}&pageno=1&pagesize=10` + ? `${process.env.REACT_APP_URL}/customers/getbytid/?tenantid=${tid}&pageno=1&pagesize=1` : `${process.env.REACT_APP_URL}/customers/search/?tenantid=${tid}&keyword=${searchCustList}`; await axios @@ -989,6 +1009,11 @@ const Createorder1 = () => { setLoading2(false); } }; + useEffect(() => { + console.log('clientdetails, by search'); + clientdetails(); + // clientdetailsbusiness(); + }, [searchCustList.length > 3, searchCustList == '']); // ========================================================= || clientdetailsbusiness || ========================================================= const clientdetailsbusiness = async () => { setLoading2(true); @@ -1325,7 +1350,9 @@ const Createorder1 = () => { - Pickup + + Pickup Details + {/* Customer { }} /> Business */} - + */} - - {/* } - onChange={(e, val) => { - console.log(pickupswitch ? 'clientdetailbusinessarr value' : 'clientdetailarr value', val); - if (val) { - // clientdetails(val.tenantid) - if (clientinfo.customerid == val.customerid) { - opentoast('choose different Location', 'warning'); - setTenantinfo({}); - } else { - setTenantinfo(val); - } - } else { - setTenantinfo({}); - } - - console.log(val); - setStartPoint({ latitude: val.latitude, longitude: val.longitude }); - }} - noOptionsText={ - // - - No options - {!pickupswitch && ( - - )} - - } - /> */} - - {addId1 == 0 ? ( - // (typeof option === 'string' ? option : option.description)} - // filterOptions={(x) => x} - // options={options} - // // options={pickCust} - // autoComplete - // includeInputInList - // filterSelectedOptions - // value={value} - // // value={pickCust.address} - // noOptionsText="No locations" - // onChange={(event, newValue, reason) => { - // if (reason == 'clear') { - // setValue(null); - // } - // console.log('pick location', newValue); - // // setOptions(newValue ? [newValue, ...options] : options); - // setValue(newValue); - // setAddress(newValue.description); - // setPickCust({ ...pickCust, address: newValue.description }); - // }} - // onInputChange={(event, newInputValue) => { - // setInputValue(newInputValue); - // }} - // renderInput={(params) => } - // renderOption={(props, option) => { - // const matches = option.structured_formatting.main_text_matched_substrings || []; - // const parts = parse( - // option.structured_formatting.main_text, - // matches.map((match) => [match.offset, match.offset + match.length]) - // ); - - // return ( - //
  • - // - // - // - // - // - // {parts.map((part, index) => ( - // - // {part.text} - // - // ))} - // - // {option.structured_formatting.secondary_text} - // - // - // - //
    • - // ); - // }} - // /> -
    - setInputValue2(e.target.value)} - InputProps={{ - endAdornment: ( - { - setInputValue2(''); - setPickCust({ - ...pickCust, - doorno: '', - suburb: '', - city: '', - postcode: '', - landmark: '' - }); - setShowDistance(false); - setStartPoint({ latitude: 0, longitude: 0 }); - }} - size="small" - > - - - ) - }} - /> -
    - ) : ( + {/* new1 */} + `${option.firstname} (${option.contactno})`} + sx={{ mt: 2, mb: 1 }} + renderInput={(params) => ( { - setAddId1(0); - setPickCust({ - ...pickCust, - firstname: '', - contactno: '', - doorno: '', - suburb: '', - city: '', - postcode: '', - landmark: '' - }); - setShowDistance(false); - setStartPoint({ latitude: 0, longitude: 0 }); - }} - > - - - ) - }} - variant="outlined" - placeholder="Select" - value={pickCust.address} + {...params} + label="Search" onChange={(e) => { - setPickCust({ ...pickCust, address: e.target.value }); - if (e.target.value == '') { - setAddId1(0); - setShowDistance(false); - setStartPoint({ latitude: 0, longitude: 0 }); + setSearchCustList(e.target.value); + }} + InputProps={{ + ...params.InputProps, + inputProps: { + ...params.inputProps, + maxLength: 10 } }} /> )} -     + onChange={(e, val, reason) => { + if (val) { + console.log('pickcustNew', val); + setStartPoint({ latitude: val.latitude, longitude: val.longitude }); + setPickCust(val); + setAddId1(1); + setSearchCustList(''); + } + if (reason == 'clear') { + setSearchCustList(''); + } + }} + noOptionsText={ + /^[0-9]{10}$/.test(searchCustList) ? ( + + { + setPickCust({ ...pickCust, contactno: searchCustList }); + handleOkClick1(); + setSearchCustList(''); + }} + /> + + ) : null + } + />     - - Pickup Details - - {/* ====================================== ||Contact Name (pick) || ====================================== */} - - - - - ) - }} - variant="outlined" - label="Contact Name" - value={pickCust.firstname} - onChange={(e) => { - setPickCust({ ...pickCust, firstname: e.target.value }); - }} - /> - {/* ====================================== ||Contact Number(pick) || ====================================== */} { }} /> + {/* ====================================== ||Contact Name (pick) || ====================================== */} + + + + + ) + }} + variant="outlined" + label="Contact Name" + value={pickCust.firstname} + onChange={(e) => { + setPickCust({ ...pickCust, firstname: e.target.value }); + }} + /> + + + {/* ====================================== || Address (pick) || ====================================== */} + + + + {addId1 == 0 ? ( +
    + setInputValue2(e.target.value)} + InputProps={{ + endAdornment: ( + { + setInputValue2(''); + setPickCust({ + ...pickCust, + doorno: '', + suburb: '', + city: '', + postcode: '', + landmark: '' + }); + setShowDistance(false); + setStartPoint({ latitude: 0, longitude: 0 }); + }} + size="small" + > + + + ) + }} + /> +
    + ) : ( + { + setAddId1(0); + setPickCust({ + ...pickCust, + // firstname: '', + // contactno: '', + doorno: '', + suburb: '', + city: '', + postcode: '', + landmark: '' + }); + setShowDistance(false); + setStartPoint({ latitude: 0, longitude: 0 }); + }} + > + + + ) + }} + variant="outlined" + placeholder="Select" + value={pickCust.address} + onChange={(e) => { + setPickCust({ ...pickCust, address: e.target.value }); + if (e.target.value == '') { + setAddId1(0); + setShowDistance(false); + setStartPoint({ latitude: 0, longitude: 0 }); + } + }} + /> + )} +     +     + {/* ====================================== ||Door No (pick) || ====================================== */} { - Drop + + Drop Details + {/* Customer */} {/* { size="small" /> Business */} - + */} - {/* } - onChange={(e, val) => { - if (val) { - if (tenantinfo.customerid == val.customerid) { - opentoast('choose different Location', 'warning'); - setClientinfo({}); - } else { - setClientinfo(val); - } - } else { - setClientinfo({}); - } - - console.log(val); - setEndPoint({ latitude: val.latitude, longitude: val.longitude }); - }} - noOptionsText={ - // - - No options - {!dropswitch && ( - - )} - - } - /> */} - - {addId2 == 0 ? ( - // (typeof option === 'string' ? option : option.description)} - // filterOptions={(x) => x} - // options={options1} - // autoComplete - // includeInputInList - // filterSelectedOptions - // value={value1} - // // value={dropCust.address} - // noOptionsText="No locations" - // onChange={(event, newValue) => { - // setOptions1(newValue ? [newValue, ...options1] : options1); - // setValue1(newValue); - // console.log(newValue); - // setAddress1(newValue.description); - // setDropCust({ ...dropCust, address: newValue.description }); - // }} - // onInputChange={(event, newInputValue) => { - // setInputValue1(newInputValue); - // }} - // renderInput={(params) => } - // renderOption={(props, option) => { - // const matches = option.structured_formatting.main_text_matched_substrings || []; - // const parts = parse( - // option.structured_formatting.main_text, - // matches.map((match) => [match.offset, match.offset + match.length]) - // ); - - // return ( - //
  • - // - // - // - // - // - // {parts.map((part, index) => ( - // - // {part.text} - // - // ))} - // - // {option.structured_formatting.secondary_text} - // - // - // - //
    • - // ); - // }} - // /> -
    - setInputValue3(e.target.value)} - InputProps={{ - endAdornment: ( - { - setInputValue3(''); - setDropCust({ - ...dropCust, - doorno: '', - suburb: '', - city: '', - postcode: '', - landmark: '' - }); - setShowDistance(false); - setEndPoint({ latitude: 0, longitude: 0 }); - }} - size="small" - > - - - ) - }} - /> -
    - ) : ( + {/* new2 */} + `${option.firstname} (${option.contactno})`} + sx={{ mt: 0, mb: 1 }} + renderInput={(params) => ( { - setAddId2(0); - setDropCust({ - ...dropCust, - firstname: '', - contactno: '', - doorno: '', - suburb: '', - city: '', - postcode: '', - landmark: '' - }); - setShowDistance(false); - setEndPoint({ latitude: 0, longitude: 0 }); - }} - > - - - ) - }} - variant="outlined" - placeholder="Select" - value={dropCust.address} + {...params} + label="Search" onChange={(e) => { - setPickCust({ ...dropCust, address: e.target.value }); - if (e.target.value == '') { - setAddId2(0); - setShowDistance(false); - setEndPoint({ latitude: 0, longitude: 0 }); + setSearchCustList(e.target.value); + }} + InputProps={{ + ...params.InputProps, + inputProps: { + ...params.inputProps, + maxLength: 10 } }} /> )} -     + onChange={(e, val, reason) => { + if (val) { + if (pickCust.customerid === val.customerid) { + opentoast('Select Another Customer', 'error'); + setSearchCustList(''); + } else { + console.log('DropClient', val); + setDropCust(val); + setEndPoint({ latitude: val.latitude, longitude: val.longitude }); + setAddId2(1); + } + } + if (reason == 'clear') { + setSearchCustList(''); + } + }} + noOptionsText={ + /^[0-9]{10}$/.test(searchCustList) ? ( + + { + setDropCust({ ...dropCust, contactno: searchCustList }); + handleOkClick2(); + setSearchCustList(''); + }} + /> + + ) : null + } + />     - - Drop Details - - {/* ====================================== ||Contact Name (drop) || ====================================== */} - - - - - ) - }} - value={dropCust.firstname} - onChange={(e) => { - setDropCust({ ...dropCust, firstname: e.target.value }); - }} - /> - {/* ====================================== ||Contact Number (drop) || ====================================== */} { }} /> + {/* ====================================== ||Contact Name (drop) || ====================================== */} + + + + + ) + }} + value={dropCust.firstname} + onChange={(e) => { + setDropCust({ ...dropCust, firstname: e.target.value }); + }} + /> + + + + + {addId2 == 0 ? ( +
    + setInputValue3(e.target.value)} + InputProps={{ + endAdornment: ( + { + setInputValue3(''); + setDropCust({ + ...dropCust, + doorno: '', + suburb: '', + city: '', + postcode: '', + landmark: '' + }); + setShowDistance(false); + setEndPoint({ latitude: 0, longitude: 0 }); + }} + size="small" + > + + + ) + }} + /> +
    + ) : ( + { + setAddId2(0); + setDropCust({ + ...dropCust, + firstname: '', + contactno: '', + doorno: '', + suburb: '', + city: '', + postcode: '', + landmark: '' + }); + setShowDistance(false); + setEndPoint({ latitude: 0, longitude: 0 }); + }} + > + + + ) + }} + variant="outlined" + placeholder="Select" + value={dropCust.address} + onChange={(e) => { + setPickCust({ ...dropCust, address: e.target.value }); + if (e.target.value == '') { + setAddId2(0); + setShowDistance(false); + setEndPoint({ latitude: 0, longitude: 0 }); + } + }} + /> + )} +     +     + {/* ====================================== ||Door No (drop) || ====================================== */} { setOtherinstructions(e.target.value)} diff --git a/src/pages/nearle/orders/rough.js b/src/pages/nearle/orders/rough.js new file mode 100644 index 0000000..0bc9698 --- /dev/null +++ b/src/pages/nearle/orders/rough.js @@ -0,0 +1,2559 @@ +import * as React from 'react'; +import { useEffect, useState, useRef, Fragment } from 'react'; +import { + FormControl, + InputAdornment, + Grid, + Typography, + Stack, + Box, + Button, + TextField, + Autocomplete, + CardActions, + Chip, + Avatar, + Divider, + DialogTitle, + DialogContent, + Checkbox, + DialogActions, + CircularProgress, + ButtonGroup, + FormLabel, + IconButton, + Drawer, + InputLabel, + Select, + MenuItem, + Switch, + CardHeader, + Card, + OutlinedInput +} from '@mui/material'; +import CloseIcon from '@mui/icons-material/Close'; +import { Empty } from 'antd'; +import { FaPhoneAlt } from 'react-icons/fa'; +import { GiDoorHandle } from 'react-icons/gi'; +import { FaLandmarkDome } from 'react-icons/fa6'; +import ClearIcon from '@mui/icons-material/Clear'; +import { useNavigate } from 'react-router'; +import { MdLocationCity } from 'react-icons/md'; +import { TbMapPinCode } from 'react-icons/tb'; +import { FaLocationDot } from 'react-icons/fa6'; +import axios from 'axios'; +import { useTheme } from '@mui/material/styles'; +import Geocode from 'react-geocode'; +import Loader from 'components/Loader'; +import * as geolib from 'geolib'; +import MainCard from 'components/MainCard'; +import { FaUser } from 'react-icons/fa6'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import Dialog from '@mui/material/Dialog'; +import dayjs from 'dayjs'; +import { enqueueSnackbar } from 'notistack'; +var utc = require('dayjs/plugin/utc'); +dayjs.extend(utc); +import LocationOnIcon from '@mui/icons-material/LocationOn'; +import parse from 'autosuggest-highlight/parse'; +import { debounce } from '@mui/material/utils'; +import CardContent from 'themes/overrides/CardContent'; +import { PhoneAndroid } from '@mui/icons-material'; +import { SearchOutlined, CloseOutlined } from '@ant-design/icons'; +import PhoneInput from 'react-phone-number-input/input'; +import MyLocationIcon from '@mui/icons-material/MyLocation'; +import HighlightOffIcon from '@mui/icons-material/HighlightOff'; + +function loadScript(src, position, id) { + if (!position) { + return; + } + + const script = document.createElement('script'); + script.setAttribute('async', ''); + script.setAttribute('id', id); + script.src = src; + position.appendChild(script); +} + +const Createorder1 = () => { + Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY); + // ================================================= || GoogleMaps (Drawer) || ================================================= + const [value, setValue] = React.useState(null); + const [value1, setValue1] = React.useState(null); + const [inputValue, setInputValue] = React.useState(''); + const [inputValue1, setInputValue1] = React.useState(''); + const [inputValue2, setInputValue2] = React.useState(''); + const [inputValue3, setInputValue3] = React.useState(''); + const [options, setOptions] = React.useState([]); + const [options1, setOptions1] = React.useState([]); + const loaded = React.useRef(false); + const loaded1 = React.useRef(false); + const [mobilenumber, setMobilenumber] = useState(''); + const [emailaddress, setEmailaddress] = useState(''); + const [city, setCity] = useState(''); + const [city1, setCity1] = useState(''); + const [zipcode, setZipcode] = useState(''); + const [zipcode1, setZipcode1] = useState(''); + const [state, setState] = useState(''); + const [state1, setState1] = useState(''); + const [suburb, setSuburb] = useState(''); + const [suburb1, setSuburb1] = useState(''); + const [pickContactName, setPickContactName] = useState(''); + const [dropContactName, setDropContactName] = useState(''); + const [pickdoorno, setPickDoorno] = useState(''); + const [dropDoorno, setDropDoorno] = useState(''); + const [pickLandmark, setPickLandmark] = useState(''); + const [dropLandmark, setDropLandmark] = useState(''); + const [address, setAddress] = useState(''); + const [address1, setAddress1] = useState(''); + const [latlong, setLatlong] = useState({}); + const [latlong1, setLatlong1] = useState({}); + const autocompleteService = useRef(null); + const [tenanatLocoId, setTenanatLocoId] = useState(localStorage.getItem('locationid')); + const [isLocation, setIsLocation] = useState(false); + + // // // ====================================================== || address (pick)|| ====================================================== + // useEffect(() => { + // if (address) { + // try { + // Geocode.fromAddress(address).then( + // (response) => { + // if (response.status == 'OK') { + // const { lat, lng } = response.results[0].geometry.location; + // console.log({ lat, lng }); + // setLatlong({ + // lat, + // lng + // }); + // console.log(response); + // if (response.results[0].address_components) { + // let place = response.results[0]; + // let cityA, zipcodeA, stateA, suburbA; + // 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': + // cityA = place.address_components[i].long_name; + // break; + // case 'administrative_area_level_1': + // stateA = place.address_components[i].long_name; + // break; + // case 'postal_code': + // zipcodeA = place.address_components[i].long_name; + // break; + // case 'sublocality': + // suburbA = place.address_components[i].long_name; + // break; + // } + // } + // } + // setCity(cityA || ''); + // setState(stateA || ''); + // setZipcode(zipcodeA || ''); + // setSuburb(suburbA || ''); + // console.log({ lat, lng, cityA, stateA, zipcodeA, suburbA }); + // setPickCust({ + // ...pickCust + // // city: cityA, + // // state: stateA, + // // postcode: zipcodeA, + // // suburb: suburbA + // // latitude: lat, + // // longitude: lng + // }); + // // setStartPoint({ latitude: lat, longitude: lng }); + // } + // } + // }, + // (error) => { + // console.log(error); + // } + // ); + // } catch (err) { + // console.log(err); + // } + // } + // }, [address]); + // // // ====================================================== || address 1 (drop)|| ====================================================== + // useEffect(() => { + // if (address) { + // try { + // Geocode.fromAddress(address1).then( + // (response) => { + // if (response.status == 'OK') { + // const { lat, lng } = response.results[0].geometry.location; + + // setLatlong1({ + // lat, + // lng + // }); + // console.log(response); + // if (response.results[0].address_components) { + // let place = response.results[0]; + // let cityB, zipcodeB, stateB, suburbB; + // 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': + // cityB = place.address_components[i].long_name; + // break; + // case 'administrative_area_level_1': + // stateB = place.address_components[i].long_name; + // break; + // case 'postal_code': + // zipcodeB = place.address_components[i].long_name; + // break; + // case 'sublocality': + // suburbB = place.address_components[i].long_name; + // break; + // } + // } + // } + // setCity(cityB || ''); + // setState(stateB || ''); + // setZipcode(zipcodeB || ''); + // setSuburb(suburbB || ''); + // console.log({ lat, lng, cityB, stateB, zipcodeB, suburbB }); + // setDropCust({ + // ...dropCust + // // city: cityB, + // // state: stateB, + // // postcode: zipcodeB, + // // suburb: suburbB + // // latitude: lat, + // // longitude: lng + // }); + // // setEndPoint({ latitude: lat, longitude: lng }); + // } + // } + // }, + // (error) => { + // console.log(error); + // } + // ); + // } catch (err) { + // console.log(err); + // } + // } + // }, [address1]); + + if (typeof window !== 'undefined' && !loaded.current) { + if (!document.querySelector('#google-maps')) { + loadScript( + `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}&libraries=places&location=10.3656,77.9690&radius=50000&components=country:IN&strictbounds=true`, + document.querySelector('head'), + 'google-maps' + ); + } + loaded.current = true; + } + + // const fetch = React.useMemo( + // () => + // debounce((request, callback) => { + // autocompleteService.current.getPlacePredictions(request, callback); + // }, 400), + // [] + // ); + // const fetch1 = React.useMemo( + // () => + // debounce((request, callback) => { + // autocompleteService.current.getPlacePredictions(request, callback); + // }, 400), + // [] + // ); + + // ====================================================== || options (pick)|| ====================================================== + + // React.useEffect(() => { + // let active = true; + // if (!autocompleteService.current && window.google) { + // autocompleteService.current = new window.google.maps.places.AutocompleteService(); + // } + // if (!autocompleteService.current) { + // return undefined; + // } + // if (inputValue === '') { + // setOptions(value ? [value] : []); + // return undefined; + // } + // fetch({ input: inputValue }, (results) => { + // if (active) { + // let newOptions = []; + + // if (value) { + // newOptions = [value]; + // } + + // if (results) { + // newOptions = [...newOptions, ...results]; + // } + + // setOptions(newOptions); + // } + // }); + + // return () => { + // active = false; + // }; + // }, [value, inputValue, fetch]); + + // // ====================================================== || options1 (drop)|| ====================================================== + // React.useEffect(() => { + // let active = true; + // if (!autocompleteService.current && window.google) { + // autocompleteService.current = new window.google.maps.places.AutocompleteService(); + // } + // if (!autocompleteService.current) { + // return undefined; + // } + // if (inputValue1 === '') { + // setOptions1(value1 ? [value1] : []); + // return undefined; + // } + // fetch1({ input: inputValue1 }, (results) => { + // if (active) { + // let newOptions = []; + + // if (value1) { + // newOptions = [value1]; + // } + + // if (results) { + // newOptions = [...newOptions, ...results]; + // } + + // setOptions1(newOptions); + // } + // }); + + // return () => { + // active = false; + // }; + // }, [value1, inputValue1, fetch1]); + + const appId = localStorage.getItem('applocationid'); + const navigate = useNavigate(); + const [open, setOpen] = useState({}); + const [open1, setOpen1] = useState(''); + const [open2, setOpen2] = useState(false); + const [open3, setOpen3] = useState(false); + const [open4, setOpen4] = useState(false); + const [shift, setShift] = useState(1); + const [clientlist, setClientlist] = useState([]); + const [clientdetail, setClientdetail] = useState([]); + const [eventname, setEventname] = useState(''); + const [startdate, setStartdate] = useState(dayjs().format('MM-DD-YYYY')); + const [enddate, setEnddate] = useState(dayjs().add(1, 'day').format('MM-DD-YYYY')); + // const [starttime, setStatrttime] = useState(`${dayjs().format('MM-DD-YYYY')} 08:00:00`); + const [starttime, setStatrttime] = useState(); + // const [endtime, setEndtime] = useState(`${dayjs().format('MM-DD-YYYY')} 20:00:00`); + const [endtime, setEndtime] = useState(); + const [timeslotarr, setTimeslotarr] = useState([]); + const [currentsno, setCurrentsno] = useState(''); + const [roleoptions, setRoleoptions] = useState([]); + const theme = useTheme(); + const [otherinstructions, setOtherinstructions] = useState(''); + const [attireslist, setAttireslist] = useState([]); + const [serviceaddonslist, setServiceaddonslist] = useState([]); + const [orderaddonobj, setOrderaddonobj] = useState([]); + const [stafflist, setStafflist] = useState([]); + const [loading2, setLoading2] = useState(false); + const [loading, setLoading] = useState(false); + const [shiftarr, setShiftarr] = useState([]); + const [shiftarr1, setShiftarr1] = useState([]); + const [orderarr, setOrderarr] = useState([]); + const [alertmessage, setAlertmessage] = useState(''); + const [tabstatus, setTabstatus] = useState(''); + const [tenantinfo, setTenantinfo] = useState({}); + const [searchword, setSearchword] = useState(''); + const [clientdetailarr, setClientdetailarr] = useState([]); + const [clientdetailbusinessarr, setClientdetailbusinessarr] = useState([]); + const [admintoken, setAdmintoken] = useState(); + const [tenantlocationlist, setTenantlocationlist] = useState([]); + const [tenant, setTenant] = useState({}); + const [clientinfo, setClientinfo] = useState({}); + const [selectedtime, setSelectedtime] = useState(''); + const [tenantlist, setTenantlist] = useState([]); + const [tenantid, setTenantid] = useState(); + const [tenantlocation, setTenantlocation] = useState(''); + const [pickupswitch, setPickupswitch] = useState(true); + const [deliverytype, setDeliverytype] = useState('B'); + const [dropswitch, setDropswitch] = useState(false); + const [startPoint, setStartPoint] = useState({ latitude: 0, longitude: 0 }); + const [endPoint, setEndPoint] = useState({ latitude: 0, longitude: 0 }); + const [showDistance, setShowDistance] = useState(false); + const [distance, setDistance] = useState(0); + const [basePrice, setBasePrice] = useState(0); + const [pricePerKm, setPricePerKm] = useState(0); + const [minKm, setMinKm] = useState(0); + const [totalCharge, setTotalCharge] = useState(0); + const [subCat, setSubCat] = useState([]); + const [subCatName, setSubCatName] = useState('Select '); + const [subCatId, setSubCatId] = useState(); + const [weight, setWeight] = useState(''); + const tid = localStorage.getItem('tenantid'); + const [selectedCatChip, setSelectedCatChip] = useState(null); + const [isCustomerOpen, setIsCustomerOpen] = useState(false); + const [searchCustList, setSearchCustList] = useState(''); + const [customerlist, setCustomerlist] = useState([]); + const [pickCust, setPickCust] = useState({}); + const [dropCust, setDropCust] = useState({}); + const [pickordrop, setpickordrop] = useState(0); // 1 ->pick 2 -> drop + const [addId1, setAddId1] = useState(0); + const [addId2, setAddId2] = useState(0); + const [tenantLocations, setTenantlocations] = useState([]); + const [appLocaLat, setAppLocaLat] = useState(); + const [appLocaLng, setAppLocaLng] = useState(); + const [appLocaRadius, setAppLocaRadius] = useState(); + + const handleChipClick = (chipLabel) => { + setSelectedCatChip(chipLabel); + }; + + const chipStyle = (chipLabel) => ({ + cursor: 'pointer', + backgroundColor: selectedCatChip === chipLabel ? theme.palette.primary.main : 'default', + color: selectedCatChip === chipLabel ? '#fff' : '', + '&:hover': { + backgroundColor: selectedCatChip === chipLabel ? theme.palette.primary.main : theme.palette.primary.light, + color: '#fff' + } + }); + + const fetchTenantPricing = async () => { + try { + const pricingResponse = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantpricing/?tenantid=${tid}`); + console.log('pricingResponse', pricingResponse.data.details); + setBasePrice(pricingResponse.data.details.baseprice); + setPricePerKm(pricingResponse.data.details.priceperkm); + setMinKm(pricingResponse.data.details.minkm); + } catch (error) { + console.log('fetchTenantPricing error', error); + } + }; + useEffect(() => { + fetchTenantPricing(); + }, []); + + useEffect(() => { + console.log('startPoint', startPoint); + console.log('endPoint', endPoint); + if (startPoint.latitude != 0 && startPoint.longitude != 0 && endPoint.latitude != 0 && endPoint.longitude != 0) { + getDistance(); + } + }, [startPoint, endPoint]); + + const getDistance = () => { + const dist = geolib.getPreciseDistance(startPoint, endPoint, 1); + console.log(`Distance: ${dist} meters`); + const distanceInKm = (dist / 1000).toFixed(2); + const roundedDistance = Math.round(distanceInKm); + console.log('roundedDistance', roundedDistance); + setDistance(roundedDistance.toFixed(2)); + if (roundedDistance < minKm) { + setTotalCharge(basePrice); + } else { + const total = (roundedDistance - minKm) * pricePerKm + basePrice; + setTotalCharge(total); + } + setShowDistance(true); + if (roundedDistance > appLocaRadius) { + setShowDistance(true); + setOpen4(true); + } + }; + + useEffect(() => { + clientdetails(); + // clientdetailsbusiness(); + }, [searchCustList.length > 3, searchCustList == '']); + + useEffect(() => { + if (timeslotarr[0]) { + let arr = []; + timeslotarr.map((val) => { + if (dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0) { + arr.push(val); + } + }); + + if (arr[0]) { + setOrderarr([ + { + sno: 1, + address: '', + customerid: '', + deliverytime: dayjs(arr[0]) || '', + deliverylocationid: '', + clientname: '', + contactno: '', + latitude: '', + longitude: '' + } + ]); + } + } + }, [timeslotarr]); + + useEffect(() => { + if (searchword) { + let arr = clientdetail.filter((val) => { + return ( + val.address.toLowerCase().includes(searchword.toLowerCase()) || + val.firstname.toLowerCase().includes(searchword.toLowerCase()) || + val.contactno.toLowerCase().includes(searchword.toLowerCase()) + ); + }); + console.log(arr); + setClientdetailarr([...arr]); + } else { + setClientdetailarr([...clientdetail]); + } + }, [searchword]); + + // 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 || '') + // }, + + // options: { + // types: ['address' || 'geocode'] + // } + // }); + + // ==================================================== || fetchtenantinfo || ==================================================== + const fetchtenantinfo = async () => { + setLoading(true); + console.log('tid', tid); + + await axios + .get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`) + .then((res) => { + console.log('fetchtenantinfo', res); + if (res.data.status) { + setTenant(res.data.details); + setTenantid(res.data.details.tenantid); + fetchAppAdminTokens(); + setSubCatId(res.data.details.subcategoryid); + } + setLoading(false); + }) + .catch((err) => { + console.log(err); + setLoading(false); + }); + }; + useEffect(() => { + fetchtenantinfo(); + }, []); + // ==================================================== || getsubcategories || ==================================================== + const getsubcategories = async () => { + await axios + .get(`${process.env.REACT_APP_URL}/utils/getsubcategories/?moduleid=6`) + .then((res) => { + console.log('subcateRes', res.data.details); + if (res.data.status) { + setSubCat(res.data.details); + } + }) + .catch((err) => { + console.log(err); + }); + }; + useEffect(() => { + getsubcategories(); + }, []); + + // ==================================================== || fetchTiming || ==================================================== + const fetchTiming = async () => { + setLoading(true); + await axios + .get(`${process.env.REACT_APP_URL}/utils/getapplocations/?applocationid=${appId}`) + .then((res) => { + console.log('fetchTiming', res); + const { opentime, closetime, latitude, longitude, radius } = res.data.details[0]; + if (res.data.status) { + setAppLocaLat(latitude); + setAppLocaLng(longitude); + setAppLocaRadius(radius); + setStatrttime(`${dayjs().format('MM-DD-YYYY')} ${opentime}`); + setEndtime(`${dayjs().format('MM-DD-YYYY')} ${closetime}`); + console.log('starttime', `${dayjs().format('MM-DD-YYYY')} ${opentime}`); + console.log('endtime', `${dayjs().format('MM-DD-YYYY')} ${closetime} `); + let arr = []; + for ( + let i = `${dayjs().format('MM-DD-YYYY')} ${opentime}`, j = 0; + dayjs(`${dayjs().format('MM-DD-YYYY')} ${closetime} `).diff(i, 'm') >= 0; + j++, i = dayjs(i).add(30, 'm') + ) { + arr.push(i); + } + console.log('setTimeslotarr', arr); + setTimeslotarr(arr); + } + setLoading(false); + }) + .catch((err) => { + console.log(err); + setLoading(false); + }); + }; + useEffect(() => { + fetchTiming(); + }, [starttime, endtime]); + + // =============================================== || fetchAppAdminTokens (via appId) || =============================================== + const fetchAppAdminTokens = async () => { + setLoading(true); + await axios + .get(`${process.env.REACT_APP_URL}/utils/getapplocationconfig/?applocationid=${appId}`) + .then((res) => { + const userfcmtokemArray = res.data.details.applocationadmins.map((admin) => admin.userfcmtokem); + console.log('fetchAppAdminTokens', res); + console.log('userfcmtokemArray', userfcmtokemArray); + if (res.data.status) { + setAdmintoken(userfcmtokemArray); + } + setLoading(false); + }) + .catch((err) => { + console.log(err); + setLoading(false); + }); + }; + + useEffect(() => { + if (starttime && endtime) { + fetchAppAdminTokens(); + } + }, [starttime, endtime]); + + // =============================================== || opentoast || =============================================== + + const opentoast = (message, variant, time) => { + enqueueSnackbar(message, { + variant: variant, + anchorOrigin: { vertical: 'top', horizontal: 'right' }, + autoHideDuration: time ? time : 1500 + }); + console.log(alertmessage); + }; + + function closeAddressModal() { + setOpen2(false); + } + function closetimemodal() { + setOpen3(false); + setCurrentsno(''); + } + + // =============================================== || createsubmitobj1 (create orders) || =============================================== + const createsubmitobj1 = async () => { + let arr = []; + let timecheck = false; + let addresscheck = false; + arr = [ + { + orderheaderid: 0, + tenantid: parseFloat(tid), + locationid: clientinfo.tenantlocationid ? clientinfo.tenantlocationid : tenantinfo.tenantlocationid, + moduleid: tenant.moduleid, + configid: 7, + orderid: '', + customerid: tenantinfo.customerid, + orderdate: dayjs().format('YYYY-MM-DD HH:mm:ss'), + orderstatus: 'created', + pending: '', + processing: '', + ready: '', + delivered: '', + cancellled: '', + orderamount: totalCharge, + taxamount: 0, + ordercharges: 0, + ordervalue: totalCharge, + itemcount: 1, + paymenttype: 64, + paymentstatus: 0, + deliverycharge: totalCharge, + deliverytime: `${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(selectedtime.$d).format('HH:mm:ss')}`, + deliverylocationid: clientinfo.deliverylocationid, + deliveryaddress: clientinfo.address, + deliverytype: deliverytype, + pickupaddress: tenantinfo.address, + pickuplat: startPoint.latitude.toString(), + pickuplong: startPoint.longitude.toString(), + ordernotes: otherinstructions, + remarks: '', + tenantuserid: parseInt(localStorage.getItem('userid')), + categoryid: tenant.categoryid, + subcategoryid: tenant.subcategoryid, + partnerid: tenant.partnerid, + deliverylat: endPoint.latitude.toString(), + deliverylong: endPoint.longitude.toString(), + applocationid: parseInt(localStorage.getItem('applocationid')), + deliveryid: clientinfo.customerid, + pickuplocationid: tenantinfo.deliverylocationid, + kms: distance + } + ]; + + if (!tid) { + opentoast('Choose Client ', 'warning'); + } else if (!tenantinfo.address) { + opentoast('Choose Pickup Location', 'warning'); + } else if (!clientinfo.address) { + opentoast('Choose Drop Location', 'warning'); + } else if (!selectedtime) { + opentoast('Choose Schedule Time', 'warning'); + } else { + setLoading(true); + + await axios + .post(`${process.env.REACT_APP_URL}/orders/createorders`, arr) + .then((res) => { + if (res.data.status) { + enqueueSnackbar('Order Created Successfully', { + variant: 'success', + anchorOrigin: { vertical: 'top', horizontal: 'right' }, + autoHideDuration: 1000 + }); + if (admintoken) { + // notifyadmin(admintoken); + sendnotifications(); + } + + navigate('/orders'); + } else { + opentoast(res.data.message, 'warning'); + } + setLoading(false); + console.log(res); + }) + .catch((err) => { + console.log(err); + opentoast(err.data.message, 'warning'); + setLoading(false); + }); + } + console.log(arr); + }; + + const createsubmitobj2 = async () => { + let arr = {}; + arr = { + orders: { + applocationid: tenant.applolcationid, + cancellled: '', + categoryid: +tenant.categoryid, + configid: +localStorage.getItem('configid'), + customerid: +pickCust.customerid || 0, + deliveryaddress: dropCust.address || '', + deliverycharge: +totalCharge.toFixed(2) || 0, + deliverycity: dropCust.city || '', + deliverycontactno: dropCust.contactno || '', + deliverycustomer: dropCust.firstname || '', + deliveryid: dropCust.customerid || 0, + deliverylandmark: dropCust.landmark || '', + deliverylat: dropCust.latitude.toString(), + deliverylocation: dropCust.suburb || '', + deliverylocationid: dropCust.deliverylocationid || 0, + deliverylong: dropCust.longitude.toString(), + deliverytime: `${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(selectedtime.$d).format('HH:mm:ss')}`, + deliverytype: pickCust.customerid !== 0 || dropCust.customerid !== 0 ? 'B' : 'C', + delivered: '', + itemcount: 1, + kms: distance || 0, + locationid: +tenanatLocoId, //main or branch + moduleid: +tenant.moduleid, + orderamount: +totalCharge.toFixed(2) || 0, + ordercharges: 0.0, + orderdate: dayjs().format('YYYY-MM-DD HH:mm:ss'), + orderheaderid: 0, + orderid: '', // + ordernotes: otherinstructions, + orderstatus: 'created', + ordervalue: +totalCharge.toFixed(2) || 0, + partnerid: tenant.partnerid, + paymentstatus: 1, + paymenttype: 42, + pending: '', + pickupaddress: pickCust.address || '', + pickupcity: pickCust.city || '', + pickupcontactno: pickCust.contactno || '', + pickupcustomer: pickCust.firstname || '', + pickuplandmark: pickCust.landmark || '', + pickuplat: pickCust.latitude.toString(), + pickuplocation: pickCust.suburb || '', + pickuplocationid: pickCust.deliverylocationid || 0, + pickuplong: pickCust.longitude.toString(), + pickupaddress: pickCust.address || '', + processing: '', + ready: '', + remarks: '', + smsdelivery: 1, + subcategoryid: +subCatId, + taxamount: 0.0, + tenantid: tenant.tenantid, + tenantuserid: parseInt(localStorage.getItem('userid')) + }, + + pickup: { + address: pickCust.address || '', + applocationid: tenant.applolcationid, + city: pickCust.city || '', + configid: parseInt(localStorage.getItem('configid')), + contactno: pickCust.contactno || '', + customertoken: '', + customerid: pickCust.customerid || 0, + devicetype: '', + deviceid: '', + dialcode: '+91', + doorno: pickCust.doorno || '', + email: pickCust.email || '', + firstname: pickCust.firstname || '', + landmark: pickCust.landmark || '', + latitude: pickCust.latitude.toString() || '', + longitude: pickCust.longitude.toString() || '', + locationid: pickCust.deliverylocationid || 0, + postcode: pickCust.postcode || '', + primaryaddress: 1, + profileimage: '', + state: pickCust.state || '', + suburb: pickCust.suburb || '', + tenantid: tenant.tenantid + }, + + drop: { + address: dropCust.address || '', + applocationid: tenant.applolcationid, + city: dropCust.city || '', + configid: parseInt(localStorage.getItem('configid')), + contactno: dropCust.contactno || '', + customertoken: '', + customerid: dropCust.customerid || 0, + devicetype: '', + deviceid: '', + dialcode: '+91', + doorno: dropCust.doorno || '', + email: dropCust.email || '', + firstname: dropCust.firstname || '', + landmark: dropCust.landmark || '', + latitude: dropCust.latitude.toString(), + longitude: dropCust.longitude.toString(), + locationid: dropCust.deliverylocationid || 0, + postcode: dropCust.postcode || '', + primaryaddress: 1, + profileimage: '', + state: dropCust.state || '', + suburb: dropCust.suburb || '', + tenantid: tenant.tenantid + } + }; + console.log('createsubmitobj2', arr); + if (!pickCust.firstname) { + opentoast('Enter Pickup Contact Name ', 'warning'); + } else if (!pickCust.contactno) { + opentoast('Enter Pickup Contact Number ', 'warning'); + } else if (!pickCust.suburb) { + opentoast('Enter Pickup Location ', 'warning'); + } else if (!pickCust.city) { + opentoast('Enter Pickup City ', 'warning'); + } else if (!pickCust.postcode) { + opentoast('Enter Pickup Postcode ', 'warning'); + } else if (!pickCust.landmark) { + opentoast('Enter Pickup Landmark ', 'warning'); + } else if (!dropCust.firstname) { + opentoast('Enter Drop Contact Name ', 'warning'); + } else if (!dropCust.contactno) { + opentoast('Enter Drop Contact Number', 'warning'); + } else if (!dropCust.suburb) { + opentoast('Enter Drop Suburb ', 'warning'); + } else if (!dropCust.city) { + opentoast('Enter Drop City ', 'warning'); + } else if (!dropCust.postcode) { + opentoast('Enter Drop postcode ', 'warning'); + } else if (!dropCust.landmark) { + opentoast('Enter Drop Landmark ', 'warning'); + } else if (!selectedtime) { + opentoast('Choose deliverytime ', 'warning'); + } else if (!setSubCatId) { + opentoast('Choose SubCategory ', 'warning'); + } else { + try { + const createRes = await axios.post(`${process.env.REACT_APP_URL2}/orders/createorder`, arr); + // const createRes = await axios.post(`${process.env.REACT_APP_URL}/orders/createorder`, arr); + if (createRes.data.status) { + console.log('createRes', createRes); + enqueueSnackbar('Order Created Successfully', { + variant: 'success', + anchorOrigin: { vertical: 'top', horizontal: 'right' }, + autoHideDuration: 1000 + }); + if (admintoken) { + // notifyadmin(admintoken); + sendnotifications(); + } + + navigate('/orders'); + } else { + opentoast(res.data.message, 'warning'); + } + setLoading(false); + console.log(res); + } catch (error) { + console.log('createResErr', error); + } + } + }; + + useEffect(() => { + console.log('shiftarr'); + console.log(shiftarr); + }, [shiftarr]); + + const clicked1 = (e) => { + setShift(e); + }; + + const dialogopen = (i, result) => { + console.log(i, result); + setOpen({ shiftsno: result.sno, sno: i.sno }); + }; + const dialogclose = () => { + setOpen(''); + }; + // ========================================================= || clientdetails || ========================================================= + const clientdetails = async () => { + setLoading2(true); + try { + let url = + searchCustList == '' + ? `${process.env.REACT_APP_URL}/customers/getbytid/?tenantid=${tid}&pageno=1&pagesize=10` + : `${process.env.REACT_APP_URL}/customers/search/?tenantid=${tid}&keyword=${searchCustList}`; + + await axios + .get(url) + .then((res) => { + console.log('clientdetails', res.data.details); + if (res.data.status) { + setClientdetail(res.data.details); + setCustomerlist(res.data.details); + let arr = []; + res.data.details.map((val) => { + arr.push({ + label: `${val.firstname} | ${val.contactno}`, + ...val + }); + }); + setClientdetailarr(arr); + } + setLoading2(false); + }) + .catch((err) => { + console.log(err); + setLoading2(false); + opentoast('server error', 'warning'); + }); + } catch (err) { + console.log(err); + setLoading2(false); + } + }; + // ========================================================= || clientdetailsbusiness || ========================================================= + const clientdetailsbusiness = async () => { + setLoading2(true); + try { + await axios + .get(`${process.env.REACT_APP_URL}/customers/getbytid/?tenantid=${tid}&locationid=1`) + .then((res) => { + console.log('clientdetailsbusiness', res.data.details); + if (res.data.status) { + setClientdetail(res.data.details); + // if (!searchword) { + // setClientdetailarr(res.data.details) + // } + let arr = []; + res.data.details.map((val) => { + arr.push({ + label: `${val.firstname} | ${val.contactno}`, + ...val + }); + }); + setClientdetailbusinessarr(arr); + } + setLoading2(false); + }) + .catch((err) => { + console.log(err); + setLoading2(false); + opentoast('server error', 'warning'); + }); + } catch (err) { + console.log(err); + setLoading2(false); + } + }; + + // ================================================== || sendnotifications || ================================================== + const sendnotifications = async () => { + setLoading(true); + await axios + .post(`${process.env.REACT_APP_URL}/utils/sendnotifications`, { + priority: 'high', + registration_ids: admintoken, + data: { + accessid: process.env.REACT_APP_RIDER_ACCESS_ID + }, + notification: { + title: 'Nearle Merchant', + body: 'An Order has been placed successfully,kindly process the same', + sound: 'ring' + } + }) + .then((res) => { + console.log(res); + if (res.data.message == 'Success') { + enqueueSnackbar('Notification sent Successfully', { + variant: 'success', + anchorOrigin: { vertical: 'top', horizontal: 'right' }, + autoHideDuration: 1000 + }); + } + setLoading(false); + }) + .catch((err) => { + console.log(err); + enqueueSnackbar(err.message, { + variant: 'error', + anchorOrigin: { vertical: 'top', horizontal: 'right' }, + autoHideDuration: 1000 + }); + setLoading(false); + }); + }; + // ============================================= || Google Maps Autocomplete(pick) || ============================================= + useEffect(() => { + // Initialize Google Maps Autocomplete + if (inputValue2) { + const autocompleteInput = document.getElementById('addressAuto1'); + const autocomplete = new window.google.maps.places.Autocomplete(autocompleteInput, { + // types: ['(cities)'], // You can adjust the types parameter based on your requirements + strictBounds: true, + bounds: new window.google.maps.Circle({ + // center: new window.google.maps.LatLng(11.0050707, 76.9509083), + // radius: 100000 + center: new window.google.maps.LatLng(appLocaLat, appLocaLng), + radius: appLocaRadius * 1000 + }).getBounds() + }); + let arr = []; + // Event listener for autocomplete place changed + autocomplete.addListener('place_changed', () => { + const place = autocomplete.getPlace(); + setInputValue2(`${place.name}, ${place.formatted_address}`); + console.log('new place', place); // Do something with the selected place + console.log(' pick (new place) lat lng', { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }); // Do something with the selected place + // to trigger getDistance + setStartPoint({ latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng() }); + setValue(place); + setAddress(`${place.name} ${place.formatted_address}`); + setPickCust({ ...pickCust, address: `${place.name} ${place.formatted_address}` }); + const address = { + address: `${place.name} ${place.formatted_address}`, + street_number: '', + route: '', + locality: '', + sublocality_level_1: '', + administrative_area_level_3: '', + administrative_area_level_1: '', + country: '', + postal_code: '' + }; + place.address_components.forEach((component) => { + component.types.forEach((type) => { + switch (type) { + case 'street_number': + address.street_number = component.long_name; + break; + case 'route': + address.route = component.long_name; + break; + case 'locality': + address.locality = component.long_name; + break; + case 'sublocality_level_1': + address.sublocality_level_1 = component.long_name; + break; + case 'administrative_area_level_3': + address.administrative_area_level_3 = component.long_name; + break; + case 'administrative_area_level_1': + address.administrative_area_level_1 = component.long_name; + break; + case 'country': + address.country = component.long_name; + break; + case 'postal_code': + address.postal_code = component.long_name; + break; + // Add more cases as needed for other types + } + }); + }); + + // Use address object as per your requirements + setPickCust({ + ...pickCust, + address: address.address, + doorno: `${address.street_number} ${address.route}`, + suburb: address.sublocality_level_1, + city: address.locality, + postcode: address.postal_code, + latitude: place.geometry.location.lat(), + longitude: place.geometry.location.lng() + }); + console.log('Pick Address:', address); + }); + } + }, [inputValue2]); + // ============================================= || Google Maps Autocomplete(Drop) || ============================================= + + useEffect(() => { + if (inputValue3) { + // Initialize Google Maps Autocomplete + const autocompleteInput = document.getElementById('addressAuto2'); + const autocomplete = new window.google.maps.places.Autocomplete(autocompleteInput, { + // types: ['(cities)'], // You can adjust the types parameter based on your requirements + strictBounds: true, + bounds: new window.google.maps.Circle({ + // center: new window.google.maps.LatLng(11.0050707, 76.9509083), + center: new window.google.maps.LatLng(appLocaLat, appLocaLng), + radius: appLocaRadius * 1000 //km to m + // radius: 100000 //km to m + }).getBounds() + }); + let arr = []; + // Event listener for autocomplete place changed + autocomplete.addListener('place_changed', () => { + const place = autocomplete.getPlace(); + setInputValue3(`${place.name}, ${place.formatted_address}`); + console.log('new place', place); // Do something with the selected place + console.log('drop (new place) lat lng', { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }); // Do something with the selected place + setEndPoint({ latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng() }); + setValue1(place); + setAddress1(`${place.name} ${place.formatted_address}`); + setDropCust({ ...dropCust, address: `${place.name} ${place.formatted_address}` }); + const address = { + address: `${place.name} ${place.formatted_address}`, + street_number: '', + route: '', + locality: '', + sublocality_level_1: '', + administrative_area_level_3: '', + administrative_area_level_1: '', + country: '', + postal_code: '' + }; + place.address_components.forEach((component) => { + component.types.forEach((type) => { + switch (type) { + case 'street_number': + address.street_number = component.long_name; + break; + case 'route': + address.route = component.long_name; + break; + case 'locality': + address.locality = component.long_name; + break; + case 'sublocality_level_1': + address.sublocality_level_1 = component.long_name; + break; + case 'administrative_area_level_3': + address.administrative_area_level_3 = component.long_name; + break; + case 'administrative_area_level_1': + address.administrative_area_level_1 = component.long_name; + break; + case 'country': + address.country = component.long_name; + break; + case 'postal_code': + address.postal_code = component.long_name; + break; + // Add more cases as needed for other types + } + }); + }); + + // Use address object as per your requirements + setDropCust({ + ...dropCust, + address: address.address, + doorno: `${address.street_number} ${address.route}`, + suburb: address.sublocality_level_1, + city: address.locality, + postcode: address.postal_code, + latitude: place.geometry.location.lat(), + longitude: place.geometry.location.lng() + }); + console.log('Drop Address:', address); + }); + } + }, [inputValue3]); + + // ============================================= || gettenantlocations (branches) || ============================================= + const gettenantlocations = async () => { + try { + const res = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations/?tenantid=${tid}`); + console.log('gettenantlocations', res.data.details); + setTenantlocations(res.data.details); + if (res.data.details.length == 1) { + setIsLocation(true); + setTenanatLocoId(res.data.details[0].locationid); + } + } catch (err) { + console.log('gettenantlocations', err); + } + }; + useEffect(() => { + gettenantlocations(); + }, []); + + return ( + <> + {loading && } + + + + + + Create Order + {tenantLocations.length == 1 ? ( + + + + ) + }} + /> + ) : ( + `${option.locationname} (${option.locationsuburb})` || ''} + sx={{ width: 300 }} + renderInput={(params) => } + onChange={(event, value, reason) => { + if (value) { + console.log('locationid', value.locationid); + setTenanatLocoId(value.locationid); + setIsLocation(true); + } + if (reason == 'clear') { + setIsLocation(false); + } + }} + /> + )} + + + + + + + + + + {/* ================================================= || Pickup || ================================================= */} + + + + + + Pickup + + {/* Customer + { + if (val) { + setPickupswitch(true); + setDeliverytype('B'); + setTenantinfo({}); + } else { + setPickupswitch(false); + setTenantinfo({}); + setDeliverytype('C'); + } + }} + /> + Business */} + + + + + {/* } + onChange={(e, val) => { + console.log(pickupswitch ? 'clientdetailbusinessarr value' : 'clientdetailarr value', val); + if (val) { + // clientdetails(val.tenantid) + if (clientinfo.customerid == val.customerid) { + opentoast('choose different Location', 'warning'); + setTenantinfo({}); + } else { + setTenantinfo(val); + } + } else { + setTenantinfo({}); + } + + console.log(val); + setStartPoint({ latitude: val.latitude, longitude: val.longitude }); + }} + noOptionsText={ + // + + No options + {!pickupswitch && ( + + )} + + } + /> */} + + {addId1 == 0 ? ( + // (typeof option === 'string' ? option : option.description)} + // filterOptions={(x) => x} + // options={options} + // // options={pickCust} + // autoComplete + // includeInputInList + // filterSelectedOptions + // value={value} + // // value={pickCust.address} + // noOptionsText="No locations" + // onChange={(event, newValue, reason) => { + // if (reason == 'clear') { + // setValue(null); + // } + // console.log('pick location', newValue); + // // setOptions(newValue ? [newValue, ...options] : options); + // setValue(newValue); + // setAddress(newValue.description); + // setPickCust({ ...pickCust, address: newValue.description }); + // }} + // onInputChange={(event, newInputValue) => { + // setInputValue(newInputValue); + // }} + // renderInput={(params) => } + // renderOption={(props, option) => { + // const matches = option.structured_formatting.main_text_matched_substrings || []; + // const parts = parse( + // option.structured_formatting.main_text, + // matches.map((match) => [match.offset, match.offset + match.length]) + // ); + + // return ( + //
  • + // + // + // + // + // + // {parts.map((part, index) => ( + // + // {part.text} + // + // ))} + // + // {option.structured_formatting.secondary_text} + // + // + // + //
    • + // ); + // }} + // /> +
    + setInputValue2(e.target.value)} + InputProps={{ + endAdornment: ( + { + setInputValue2(''); + setPickCust({ + ...pickCust, + doorno: '', + suburb: '', + city: '', + postcode: '', + landmark: '' + }); + setShowDistance(false); + setStartPoint({ latitude: 0, longitude: 0 }); + }} + size="small" + > + + + ) + }} + /> +
    + ) : ( + { + setAddId1(0); + setPickCust({ + ...pickCust, + firstname: '', + contactno: '', + doorno: '', + suburb: '', + city: '', + postcode: '', + landmark: '' + }); + setShowDistance(false); + setStartPoint({ latitude: 0, longitude: 0 }); + }} + > + + + ) + }} + variant="outlined" + placeholder="Select" + value={pickCust.address} + onChange={(e) => { + setPickCust({ ...pickCust, address: e.target.value }); + if (e.target.value == '') { + setAddId1(0); + setShowDistance(false); + setStartPoint({ latitude: 0, longitude: 0 }); + } + }} + /> + )} +     +     + + + + Pickup Details + + + {/* ====================================== ||Contact Name (pick) || ====================================== */} + + + + + ) + }} + variant="outlined" + label="Contact Name" + value={pickCust.firstname} + onChange={(e) => { + setPickCust({ ...pickCust, firstname: e.target.value }); + }} + /> + + {/* ====================================== ||Contact Number(pick) || ====================================== */} + + + + + ) + }} + variant="outlined" + label="Contact Number" + value={pickCust.contactno} + onChange={(e) => { + if (e.target.value.length <= 10) { + setPickCust({ ...pickCust, contactno: e.target.value }); + } + }} + /> + + {/* ====================================== ||Door No (pick) || ====================================== */} + + + + + ) + }} + variant="outlined" + label="Door No / Street" + value={pickCust.doorno} + onChange={(e) => { + setPickCust({ ...pickCust, doorno: e.target.value }); + }} + /> + + {/* ====================================== || Suburb (pick) || ====================================== */} + + + + + ) + }} + variant="outlined" + label="Location" + value={pickCust.suburb} + onChange={(e) => { + setPickCust({ ...pickCust, suburb: e.target.value }); + }} + /> + + {/* ====================================== || City (pick) || ====================================== */} + + + + + ) + }} + variant="outlined" + label="City" + value={pickCust.city} + onChange={(e) => { + setPickCust({ ...pickCust, city: e.target.value }); + }} + /> + + {/* ====================================== || postcode (pick) || ====================================== */} + + + + + ) + }} + variant="outlined" + label="Postcode" + value={pickCust.postcode} + onChange={(e) => { + setPickCust({ ...pickCust, postcode: e.target.value }); + }} + /> + + {/* ====================================== || Landmark (pick) || ====================================== */} + + + + + ) + }} + variant="outlined" + label="Landmark" + value={pickCust.landmark} + onChange={(e) => { + setPickCust({ ...pickCust, landmark: e.target.value }); + }} + /> + + + + {/* + + */} +     +     +     + {/* ================================================= || Drop || ================================================= */} + + + + + + Drop + + {/* Customer */} + {/* { + if (val) { + setDropswitch(true); + setClientinfo({}); + } else { + setDropswitch(false); + setClientinfo({}); + } + }} + size="small" + /> + Business */} + + + + {/* } + onChange={(e, val) => { + if (val) { + if (tenantinfo.customerid == val.customerid) { + opentoast('choose different Location', 'warning'); + setClientinfo({}); + } else { + setClientinfo(val); + } + } else { + setClientinfo({}); + } + + console.log(val); + setEndPoint({ latitude: val.latitude, longitude: val.longitude }); + }} + noOptionsText={ + // + + No options + {!dropswitch && ( + + )} + + } + /> */} + + {addId2 == 0 ? ( + // (typeof option === 'string' ? option : option.description)} + // filterOptions={(x) => x} + // options={options1} + // autoComplete + // includeInputInList + // filterSelectedOptions + // value={value1} + // // value={dropCust.address} + // noOptionsText="No locations" + // onChange={(event, newValue) => { + // setOptions1(newValue ? [newValue, ...options1] : options1); + // setValue1(newValue); + // console.log(newValue); + // setAddress1(newValue.description); + // setDropCust({ ...dropCust, address: newValue.description }); + // }} + // onInputChange={(event, newInputValue) => { + // setInputValue1(newInputValue); + // }} + // renderInput={(params) => } + // renderOption={(props, option) => { + // const matches = option.structured_formatting.main_text_matched_substrings || []; + // const parts = parse( + // option.structured_formatting.main_text, + // matches.map((match) => [match.offset, match.offset + match.length]) + // ); + + // return ( + //
  • + // + // + // + // + // + // {parts.map((part, index) => ( + // + // {part.text} + // + // ))} + // + // {option.structured_formatting.secondary_text} + // + // + // + //
    • + // ); + // }} + // /> +
    + setInputValue3(e.target.value)} + InputProps={{ + endAdornment: ( + { + setInputValue3(''); + setDropCust({ + ...dropCust, + doorno: '', + suburb: '', + city: '', + postcode: '', + landmark: '' + }); + setShowDistance(false); + setEndPoint({ latitude: 0, longitude: 0 }); + }} + size="small" + > + + + ) + }} + /> +
    + ) : ( + { + setAddId2(0); + setDropCust({ + ...dropCust, + firstname: '', + contactno: '', + doorno: '', + suburb: '', + city: '', + postcode: '', + landmark: '' + }); + setShowDistance(false); + setEndPoint({ latitude: 0, longitude: 0 }); + }} + > + + + ) + }} + variant="outlined" + placeholder="Select" + value={dropCust.address} + onChange={(e) => { + setPickCust({ ...dropCust, address: e.target.value }); + if (e.target.value == '') { + setAddId2(0); + setShowDistance(false); + setEndPoint({ latitude: 0, longitude: 0 }); + } + }} + /> + )} +     +     + + + + Drop Details + + + {/* ====================================== ||Contact Name (drop) || ====================================== */} + + + + + ) + }} + value={dropCust.firstname} + onChange={(e) => { + setDropCust({ ...dropCust, firstname: e.target.value }); + }} + /> + + {/* ====================================== ||Contact Number (drop) || ====================================== */} + + + + + ) + }} + value={dropCust.contactno} + onChange={(e) => { + if (e.target.value.length <= 10) { + setDropCust({ ...dropCust, contactno: e.target.value }); + } + }} + /> + + {/* ====================================== ||Door No (drop) || ====================================== */} + + + + + ) + }} + value={dropCust.doorno} + onChange={(e) => { + setDropCust({ ...dropCust, doorno: e.target.value }); + }} + /> + + {/* ====================================== ||Suburb (drop) || ====================================== */} + + + + + ) + }} + value={dropCust.suburb} + onChange={(e) => { + setDropCust({ ...dropCust, suburb: e.target.value }); + }} + /> + + {/* ====================================== ||City (drop) || ====================================== */} + + + + + ) + }} + value={dropCust.city} + onChange={(e) => { + setDropCust({ ...dropCust, city: e.target.value }); + }} + /> + + + {/* ====================================== ||Postcode (drop) || ====================================== */} + + + + + ) + }} + value={dropCust.postcode} + onChange={(e) => { + setDropCust({ ...dropCust, postcode: e.target.value }); + }} + /> + + {/* ====================================== ||Landmark (drop) || ====================================== */} + + + + + ) + }} + value={dropCust.landmark} + onChange={(e) => { + setDropCust({ ...dropCust, landmark: e.target.value }); + }} + /> + + + + {/* + + */} +     +     +     + {/* ================================================= || Time || ================================================= */} + + + + + Date + + { + let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd'); + console.log('dateres11'); + console.log(dateres11); + setSelectedtime(''); + if (dateres11 <= 0) { + console.log('startdate', e); + setStartdate(e); + setEnddate(e); + + let arr = []; + timeslotarr.map((val) => { + if ( + dayjs().diff(dayjs(`${dayjs(e).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0 + ) { + arr.push(val); + } + }); + if (arr[0]) { + setOrderarr([ + { + sno: 1, + address: '', + customerid: '', + deliverytime: dayjs(arr[0]) || '', + deliverylocationid: '', + clientname: '', + contactno: '', + latitude: '', + longitude: '' + } + ]); + } else { + setOrderarr([]); + } + } else { + setAlertmessage('choose Upcoming Date'); + opentoast('choose Upcoming Date', 'warning'); + setStartdate(NaN); + } + }} + value={dayjs(startdate)} + sx={{ width: '100%', mt: 2 }} + disablePast + /> + + + Time + + + + {timeslotarr.map((val, index) => { + if ( + dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0 + ) { + return ( + + + { + if (distance > appLocaRadius) { + setOpen4(true); + } else if (showDistance) { + console.log('selectedtime', val); + setSelectedtime(val); + } else { + opentoast('Select Pickup and Drop', 'error'); + } + }} + /> + + + ); + } + })} + + + + + + + + + {showDistance && ( + + + Distance + + + + + Charges + + + + )} + Category + `${option.subcategoryname}` || ''} + sx={{ my: 2, zIndex: '100' }} + fullWidth + renderInput={(params) => } + onChange={(event, value, reason) => { + if (value) { + console.log(value); + setSubCatName(value.subcategoryname); + setSubCatId(value.subcategoryid); + } + }} + /> + Weight + + { + handleChipClick('1-10kgs'); + setWeight('1-10kgs'); + }} + /> + { + handleChipClick('11-20kgs'); + setWeight('11-20kgs'); + }} + /> + { + handleChipClick('21-30kgs'); + setWeight('21-30kgs'); + }} + /> + + + +     +     +     + {/* ================================================= || Notes || ================================================= */} + + + + setOtherinstructions(e.target.value)} + /> + + {/* */} + + + + +     + +     +     + + {/* + + + Select Time + + + + + + {timeslotarr.map((val) => { + if ( + dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0 + // && currentsno + ) { + return ( + <> + + { + setSelectedtime(dayjs(val).format('hh:mm A')); + }} + /> + + + ); + } + })} + + + + + + + + */} + + {/* ============================================= || saved address Dialog || ============================================= */} + { + setIsCustomerOpen(false); + }} + fullWidth + sx={{ minWidth: 'lg' }} + > + + + {`Select Location (${pickordrop === 1 ? 'Pickup' : 'Drop'})`} + + + setSearchCustList(e.target.value)} + // onChange={handleSearch} + sx={{ + '& .MuiOutlinedInput-input': { + p: '10.5px 0px 12px' + }, + bgcolor: 'white' + }} + startAdornment={ + + + + } + endAdornment={ + { + setSearchCustList(''); + }} + > + + + } + autoComplete="off" + /> + + + + + + + {customerlist.length == 0 ? ( + + + + ) : ( + + {customerlist && + customerlist.map((address, index) => ( + + ))} + + )} + + + + + {/* */} + + + + { + setOpen4(false); + }} + > + + + + Error + + + + + Service not available at this location + + + { + setOpen4(false); + }} + > + Close + + + + + ); +}; + +export default Createorder1; diff --git a/src/routes/MainRoutes.js b/src/routes/MainRoutes.js index 700a331..387b69d 100644 --- a/src/routes/MainRoutes.js +++ b/src/routes/MainRoutes.js @@ -17,7 +17,7 @@ const SamplePage = Loadable(lazy(() => import('pages/extra-pages/sample-page'))) const Login = Loadable(lazy(() => import('pages/nearle/login'))); const Dashboard = Loadable(lazy(() => import('pages/nearle/dashboard'))); -const Client1 = Loadable(lazy(() => import('pages/nearle/clients/clients1'))); +const Customers = Loadable(lazy(() => import('pages/nearle/clients/customers'))); const Orders = Loadable(lazy(() => import('pages/nearle/orders/orders'))); const Details = Loadable(lazy(() => import('pages/nearle/orders/details'))); @@ -25,7 +25,7 @@ const Details = Loadable(lazy(() => import('pages/nearle/orders/details'))); const Accountsettings = Loadable(lazy(() => import('pages/nearle/accountsettings'))); // const Createorder = Loadable(lazy(() => import('pages/nearle/orders/createorder'))); -const Createclient = Loadable(lazy(() => import('pages/nearle/clients/createclient'))); +const Createclient = Loadable(lazy(() => import('pages/nearle/clients/createCustomer'))); const Createorder1 = Loadable(lazy(() => import('pages/nearle/orders/createorder1'))); @@ -57,11 +57,11 @@ const MainRoutes = { }, { path: 'customers', - element: + element: }, // { // path: 'clients1', - // element: + // element: // }, { path: 'orders',