diff --git a/.env.development b/.env.development index a0077f9..94a4cee 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,3 @@ REACT_APP_URL='https://jupiter.nearle.app/live/api/v1' -REACT_APP_URL2='' +REACT_APP_URL2='https://jupiter.nearle.app/live/api/v2' REACT_APP_STAFF_TOKEN='' diff --git a/.env.staging b/.env.staging index 9afabf2..0f8a209 100644 --- a/.env.staging +++ b/.env.staging @@ -1,3 +1,3 @@ REACT_APP_URL='https://jupiter.nearle.app/live/api/v1' -REACT_APP_URL2='' +REACT_APP_URL2='https://jupiter.nearle.app/live/api/v2' REACT_APP_STAFF_TOKEN='' \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 2812484..4209b7b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,6 +51,7 @@ "react-icons": "^4.12.0", "react-intl": "^6.4.1", "react-loading-icons": "^1.1.0", + "react-phone-number-input": "^3.3.10", "react-redux": "^8.0.5", "react-router": "^6.10.0", "react-router-dom": "^6.10.0", @@ -7161,6 +7162,11 @@ "node": ">=8" } }, + "node_modules/country-flag-icons": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/country-flag-icons/-/country-flag-icons-1.5.10.tgz", + "integrity": "sha512-x3elaK+ZY23W1YtFsNQknRdURzkV7g3Z93AoA7SHZJUEXbVjRsNh4h9Uf09+OjWF/4u8tXeAt37gezGRdwR/2g==" + }, "node_modules/create-ecdh": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz", @@ -10649,6 +10655,14 @@ "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==" }, + "node_modules/input-format": { + "version": "0.3.10", + "resolved": "https://registry.npmjs.org/input-format/-/input-format-0.3.10.tgz", + "integrity": "sha512-5cFv/kOZD7Ch0viprVkuYPDkAU7HBZYBx8QrIpQ6yXUWbAQ0+RQ8IIojDJOf/RO6FDJLL099HDSK2KoVZ2zevg==", + "dependencies": { + "prop-types": "^15.8.1" + } + }, "node_modules/internal-slot": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz", @@ -13464,6 +13478,11 @@ "node": ">= 0.8.0" } }, + "node_modules/libphonenumber-js": { + "version": "1.10.59", + "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.59.tgz", + "integrity": "sha512-HeTsOrDF/hWhEiKqZVwg9Cqlep5x2T+IYDENvT2VRj3iX8JQ7Y+omENv+AIn0vC8m6GYhivfCed5Cgfw27r5SA==" + }, "node_modules/lilconfig": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz", @@ -16933,6 +16952,22 @@ "node": ">= 12.0.0" } }, + "node_modules/react-phone-number-input": { + "version": "3.3.10", + "resolved": "https://registry.npmjs.org/react-phone-number-input/-/react-phone-number-input-3.3.10.tgz", + "integrity": "sha512-onv6ETMejyA4Wi0/6Ay00FcSokHIJcowLUcwdizpALSpeXPFqbyrjHQSL8+pgkxIIruRxr5nyIAB8LT+Sa/Vlg==", + "dependencies": { + "classnames": "^2.3.1", + "country-flag-icons": "^1.5.4", + "input-format": "^0.3.10", + "libphonenumber-js": "^1.10.59", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-redux": { "version": "8.0.5", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz", @@ -25456,6 +25491,11 @@ "yaml": "^1.7.2" } }, + "country-flag-icons": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/country-flag-icons/-/country-flag-icons-1.5.10.tgz", + "integrity": "sha512-x3elaK+ZY23W1YtFsNQknRdURzkV7g3Z93AoA7SHZJUEXbVjRsNh4h9Uf09+OjWF/4u8tXeAt37gezGRdwR/2g==" + }, "create-ecdh": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz", @@ -27969,6 +28009,14 @@ "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==" }, + "input-format": { + "version": "0.3.10", + "resolved": "https://registry.npmjs.org/input-format/-/input-format-0.3.10.tgz", + "integrity": "sha512-5cFv/kOZD7Ch0viprVkuYPDkAU7HBZYBx8QrIpQ6yXUWbAQ0+RQ8IIojDJOf/RO6FDJLL099HDSK2KoVZ2zevg==", + "requires": { + "prop-types": "^15.8.1" + } + }, "internal-slot": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz", @@ -29998,6 +30046,11 @@ "type-check": "~0.4.0" } }, + "libphonenumber-js": { + "version": "1.10.59", + "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.59.tgz", + "integrity": "sha512-HeTsOrDF/hWhEiKqZVwg9Cqlep5x2T+IYDENvT2VRj3iX8JQ7Y+omENv+AIn0vC8m6GYhivfCed5Cgfw27r5SA==" + }, "lilconfig": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz", @@ -32302,6 +32355,18 @@ "resolved": "https://registry.npmjs.org/react-loading-icons/-/react-loading-icons-1.1.0.tgz", "integrity": "sha512-Y9eZ6HAufmUd8DIQd6rFrx5Bt/oDlTM9Nsjvf8YpajTa3dI8cLNU8jUN5z7KTANU+Yd6/KJuBjxVlrU2dMw33g==" }, + "react-phone-number-input": { + "version": "3.3.10", + "resolved": "https://registry.npmjs.org/react-phone-number-input/-/react-phone-number-input-3.3.10.tgz", + "integrity": "sha512-onv6ETMejyA4Wi0/6Ay00FcSokHIJcowLUcwdizpALSpeXPFqbyrjHQSL8+pgkxIIruRxr5nyIAB8LT+Sa/Vlg==", + "requires": { + "classnames": "^2.3.1", + "country-flag-icons": "^1.5.4", + "input-format": "^0.3.10", + "libphonenumber-js": "^1.10.59", + "prop-types": "^15.8.1" + } + }, "react-redux": { "version": "8.0.5", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz", diff --git a/package.json b/package.json index 160531b..40135cc 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "react-icons": "^4.12.0", "react-intl": "^6.4.1", "react-loading-icons": "^1.1.0", + "react-phone-number-input": "^3.3.10", "react-redux": "^8.0.5", "react-router": "^6.10.0", "react-router-dom": "^6.10.0", diff --git a/src/App.js b/src/App.js index ddb4fcd..b12661a 100644 --- a/src/App.js +++ b/src/App.js @@ -13,33 +13,34 @@ import { useEffect } from 'react'; // ==============================|| APP - THEME, ROUTER, LOCAL ||============================== // -const App = () =>{ - let navigate=useNavigate() +const App = () => { + let navigate = useNavigate(); - useEffect(()=>{ - if (!localStorage.getItem("authname")) { - navigate('/login') - } - },[]) + useEffect(() => { + if (!localStorage.getItem('authname')) { + navigate('/login'); + } + }, []); - - return <> - - {/* */} - - - {/* */} - <> - - - - - - {/* */} - - - {/* */} - - -} + return ( + <> + + {/* */} + + + {/* */} + <> + + + + + + {/* */} + + + {/* */} + + + ); +}; export default App; diff --git a/src/layout/MainLayout/Header/HeaderContent/index.js b/src/layout/MainLayout/Header/HeaderContent/index.js index 41606cb..37ea20a 100644 --- a/src/layout/MainLayout/Header/HeaderContent/index.js +++ b/src/layout/MainLayout/Header/HeaderContent/index.js @@ -73,7 +73,7 @@ const HeaderContent = () => { {matchesXs && } - + { const theme = useTheme(); - const matchDownXL = useMediaQuery(theme.breakpoints.down('xl')); + // const matchDownXL = useMediaQuery(theme.breakpoints.down('xl')); + const matchDownXL = useMediaQuery(`(max-width: 1440px)`); + const downLG = useMediaQuery(theme.breakpoints.down('lg')); const { container, miniDrawer, menuOrientation } = useConfig(); diff --git a/src/pages/nearle/api/api.js b/src/pages/nearle/api/api.js index 7bc9698..106be66 100644 --- a/src/pages/nearle/api/api.js +++ b/src/pages/nearle/api/api.js @@ -52,10 +52,10 @@ export const fetchAllTenants = async ({ queryKey }) => { let url = ''; if (search) { - // url = `https://jupiter.nearle.app/live/api/v1/tenants/search/?keyword=${search}`; + // url = `${process.env.REACT_APP_URL}/tenants/search/?keyword=${search}`; url = `${process.env.REACT_APP_URL}/tenants/search/?keyword=${search}`; } else { - // url = `https://jupiter.nearle.app/live/api/v1/tenants/getalltenants?pageno=${pageno}&pagesize=${size}`; + // url = `${process.env.REACT_APP_URL}/tenants/getalltenants?pageno=${pageno}&pagesize=${size}`; url = `${process.env.REACT_APP_URL}/tenants/getalltenants?pageno=${pageno}&pagesize=${size}`; } const response = await axios.get(url); @@ -139,9 +139,9 @@ export const fetchorderdetails = async ({ queryKey }) => { let status = tabValue === 0 ? 'delivered' : tabValue === 1 ? 'pending' : 'cancelled'; const response = await axios.get( // appId == -1 - // ? `https://jupiter.nearle.app/live/api/v1/orders/getorders/?fromdate=${startdate}&todate=${enddate}` - // : `https://jupiter.nearle.app/live/api/v1/orders/getorders/?fromdate=${startdate}&todate=${enddate}&applocationid=${appId}` - `https://jupiter.nearle.app/live/api/v1/deliveries/getdeliveries/?tenantid=${tenid}&fromdate=${startdate}&todate=${enddate}` + // ? `${process.env.REACT_APP_URL}/orders/getorders/?fromdate=${startdate}&todate=${enddate}` + // : `${process.env.REACT_APP_URL}/orders/getorders/?fromdate=${startdate}&todate=${enddate}&applocationid=${appId}` + `${process.env.REACT_APP_URL}/deliveries/getdeliveries/?tenantid=${tenid}&fromdate=${startdate}&todate=${enddate}` ); console.log('fetchorderdetails', response.data.details); @@ -151,7 +151,7 @@ export const fetchorderdetails = async ({ queryKey }) => { export const fetchCount = async ({ queryKey }) => { console.log('queryKey of fetchCount', queryKey); const [startdate, enddate] = queryKey; - const response = await axios.get(`https://jupiter.nearle.app/live/api/v1/orders/getorders/?fromdate=${startdate}&todate=${enddate}`); + const response = await axios.get(`${process.env.REACT_APP_URL}/orders/getorders/?fromdate=${startdate}&todate=${enddate}`); const calculateOrderCounts = () => { let deliveredCount = 0; let pendingCount = 0; diff --git a/src/pages/nearle/login.js b/src/pages/nearle/login.js index 65cda67..095deba 100644 --- a/src/pages/nearle/login.js +++ b/src/pages/nearle/login.js @@ -1,318 +1,309 @@ -import { useState, useEffect } from 'react' +import { useState, useEffect } from 'react'; // import { useSelector } from 'react-redux'; // import AuthWrapper from 'sections/auth/AuthWrapper'; import { - Box, Grid, Card, - CardContent, - // CardHeader, - Stack, - // Divider, - // InputLabel, - // OutlinedInput, - TextField, - Button, - Typography, - CardHeader, - Container, - Link -} from '@mui/material' + Box, + Grid, + Card, + CardContent, + // CardHeader, + Stack, + // Divider, + // InputLabel, + // OutlinedInput, + TextField, + Button, + Typography, + CardHeader, + Container, + Link +} from '@mui/material'; import { useTheme } from '@mui/material/styles'; import AnimateButton from 'components/@extended/AnimateButton'; +import logo from 'assets/images/logo-nearle1.png'; -import logo from 'assets/images/logo-nearle1.png' - -import axios from 'axios' -import { useNavigate } from 'react-router-dom' +import axios from 'axios'; +import { useNavigate } from 'react-router-dom'; // import { openSnackbar } from 'store/reducers/snackbar'; // import { useDispatch } from 'react-redux'; import Loader from 'components/Loader'; import { enqueueSnackbar } from 'notistack'; - const Login = () => { - const theme = useTheme(); - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - const [alertmessage, setAlertmessage] = useState(''); - const [checkusername, setCheckusername] = useState(false); - // const [toast, setToast] = useState(false); - const [loading, setLoading] = useState(false); - let navigate = useNavigate(); - // let dispatch = useDispatch(); - const [submitting, setSubmitting] = useState(false) - // let loginuserid = useSelector((state)=>state.logininfo); + const theme = useTheme(); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [alertmessage, setAlertmessage] = useState(''); + const [checkusername, setCheckusername] = useState(false); + // const [toast, setToast] = useState(false); + const [loading, setLoading] = useState(false); + let navigate = useNavigate(); + // let dispatch = useDispatch(); + const [submitting, setSubmitting] = useState(false); + // let loginuserid = useSelector((state)=>state.logininfo); - // useEffect(() => { + // useEffect(() => { - // if (alertmessage) { - // dispatch( - // openSnackbar({ - // open: true, - // message: alertmessage, - // variant: 'alert', - // anchorOrigin: { vertical: 'top', horizontal: 'right' }, - // alert: { - // // variant:'info', - // color: 'error', + // if (alertmessage) { + // dispatch( + // openSnackbar({ + // open: true, + // message: alertmessage, + // variant: 'alert', + // anchorOrigin: { vertical: 'top', horizontal: 'right' }, + // alert: { + // // variant:'info', + // color: 'error', - // } - // }) - // ) - // } - // }, [toast]) + // } + // }) + // ) + // } + // }, [toast]) - useEffect(() => { - if (localStorage.getItem("authname") - // || localStorage.getItem("appuserid") - ) { - navigate('/orders') - } - - // console.log(alertmessage) - }, []) - - const usernamecheck = async (e) => { - e.preventDefault(); - setUsername(e.target.value) - if (e.target.value) { - try { - // await axios.post(`${process.env.REACT_APP_URL}/auth/login`, { - // "authname": e.target.value - // }) - await axios.post(`${process.env.REACT_APP_URL}/users/login`, { - "authname": e.target.value, - "configid": 1, - "password": 'admin' - }) - .then((res) => { - console.log(res.data) - if (res.data.details.authname === e.target.value) { - - setUsername(e.target.value); - setCheckusername(false); - } else { - setCheckusername(true); - - } - // if (res.data.authname === e.target.value) { - - // setUsername(e.target.value); - // setCheckusername(false); - // } - }).catch((err) => { - // if (err.response.data.message === 'No user found') { - - setCheckusername(true); - // } - }) - } catch (err) { - console.log(err) - - } - } + useEffect(() => { + if ( + localStorage.getItem('authname') + // || localStorage.getItem("appuserid") + ) { + navigate('/orders'); } - const loginsend = async () => { - // e.preventDefault(); - setLoading(true) + // console.log(alertmessage) + }, []); - if (password && username) { - if (password == 'admin') { - - - setSubmitting(true) - try { - await axios.post(`${process.env.REACT_APP_URL}/users/login`, { - "authname": username, - "configid": 1, - "password": password - }).then((res) => { - console.log(res.data) - if (res.data.details.authname === username) { - // setAlertmessage('login Successfull'); - setLoading(false) - // dispatch( - // openSnackbar({ - // open: true, - // message: 'login Successfull', - // variant: 'alert', - // anchorOrigin: { vertical: 'top', horizontal: 'right' }, - // alert: { - // color: 'success' - // } - // }) - // ) - enqueueSnackbar('login Successfull', { - variant: 'success', anchorOrigin: { vertical: 'top', horizontal: 'right' }, - autoHideDuration: 3000 - }) - setUsername(''); - setPassword(''); - localStorage.setItem("firstname", res.data.details.tenantname); - localStorage.setItem("authname", res.data.details.authname); - - localStorage.setItem("appuserid", res.data.details.userid); - localStorage.setItem("roleid", res.data.details.roleid); - localStorage.setItem("tenantid", res.data.details.tenantid); - localStorage.setItem("applocationid", res.data.details.applocationid); - localStorage.setItem("fullname", res.data.details.fullname); - - - navigate('/orders'); - setSubmitting(false) - }else{ - opentoast('Login Error') - setLoading(false) - setSubmitting(false) - - } - }).catch((err) => { - console.log(err); - - // setAlertmessage('Invalid Data'); - // if(err.message == 'Network Error'){ - opentoast(err.message) - // }else{ - // opentoast('Invalid Data'); - - // } - setLoading(false) - setSubmitting(false) - console.log(err.message) - }) - } catch (err) { - console.log(err) - setLoading(false) - setSubmitting(false) - } - }else{ - opentoast('Password is Incorrect'); - setLoading(false) + const usernamecheck = async (e) => { + e.preventDefault(); + setUsername(e.target.value); + if (e.target.value) { + try { + // await axios.post(`${process.env.REACT_APP_URL}/auth/login`, { + // "authname": e.target.value + // }) + await axios + // .post(`${process.env.REACT_APP_URL}/users/login`, { + .post(`${process.env.REACT_APP_URL}/users/tenant/login`, { + authname: e.target.value, + configid: 1, + password: 'admin' + }) + .then((res) => { + console.log(res.data); + if (res.data.details.authname === e.target.value) { + setUsername(e.target.value); + setCheckusername(false); + } else { + setCheckusername(true); } - } else { - // let el2 = document.getElementById('toastid'); - // el2.classList.add('d-block'); - // el2.classList.remove('d-none'); - setAlertmessage('Fill All required fields'); - opentoast('Fill All required fields'); - setLoading(false) - } + // if (res.data.authname === e.target.value) { + // setUsername(e.target.value); + // setCheckusername(false); + // } + }) + .catch((err) => { + // if (err.response.data.message === 'No user found') { + setCheckusername(true); + // } + }); + } catch (err) { + console.log(err); + } } + }; - // const handleClose = () => { + const loginsend = async () => { + // e.preventDefault(); + setLoading(true); + + if (password && username) { + if (password == 'admin') { + setSubmitting(true); + try { + await axios + // .post(`${process.env.REACT_APP_URL}/users/login`, { + .post(`${process.env.REACT_APP_URL}/users/tenant/login`, { + authname: username, + configid: 1, + password: password + }) + .then((res) => { + console.log(res.data); + if (res.data.details.authname === username) { + // setAlertmessage('login Successfull'); + setLoading(false); + // dispatch( + // openSnackbar({ + // open: true, + // message: 'login Successfull', + // variant: 'alert', + // anchorOrigin: { vertical: 'top', horizontal: 'right' }, + // alert: { + // color: 'success' + // } + // }) + // ) + enqueueSnackbar('login Successfull', { + variant: 'success', + anchorOrigin: { vertical: 'top', horizontal: 'right' }, + autoHideDuration: 1000 + }); + setUsername(''); + setPassword(''); + localStorage.setItem('firstname', res.data.details.tenantname); + localStorage.setItem('authname', res.data.details.authname); + localStorage.setItem('appuserid', res.data.details.userid); + localStorage.setItem('roleid', res.data.details.roleid); + localStorage.setItem('tenantid', res.data.details.tenantid); + localStorage.setItem('applocationid', res.data.details.applocationid); + localStorage.setItem('fullname', res.data.details.fullname); + localStorage.setItem('configid', res.data.details.configid); + localStorage.setItem('locationid', res.data.details.locationid); + localStorage.setItem('moduleid', res.data.details.moduleid); + localStorage.setItem('userid', res.data.details.userid); + + navigate('/orders'); + setSubmitting(false); + } else { + opentoast('Login Error'); + setLoading(false); + setSubmitting(false); + } + }) + .catch((err) => { + console.log(err); + + // setAlertmessage('Invalid Data'); + // if(err.message == 'Network Error'){ + opentoast(err.message); + // }else{ + // opentoast('Invalid Data'); + + // } + setLoading(false); + setSubmitting(false); + console.log(err.message); + }); + } catch (err) { + console.log(err); + setLoading(false); + setSubmitting(false); + } + } else { + opentoast('Password is Incorrect'); + setLoading(false); + } + } else { + // let el2 = document.getElementById('toastid'); + // el2.classList.add('d-block'); + // el2.classList.remove('d-none'); + setAlertmessage('Fill All required fields'); + opentoast('Fill All required fields'); + setLoading(false); + } + }; + + // const handleClose = () => { + // setToast(false) + // } + const opentoast = (message) => { + // setToast(true) + + // setTimeout(() => { + // // handleClose(); // setToast(false) - // } - const opentoast = (message) => { - // setToast(true) + // }, 2000); + enqueueSnackbar(message, { + variant: 'error', + anchorOrigin: { vertical: 'top', horizontal: 'right' }, + autoHideDuration: 2000 + }); + }; - - - // setTimeout(() => { - // // handleClose(); - // setToast(false) - // }, 2000); - enqueueSnackbar(message, { - variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' }, - autoHideDuration: 2000 - }) - } - - - - return <> - {/* */} - - {(loading) && - - - } - {/* */} + return ( + <> + {/* */} + + {loading && } + {/* */} + + + legendary + + - + {/* {children} */} + *': { + flexGrow: 1, + flexBasis: '50%' + } + }} > + + {/* Login} /> */} + {/* */} + {/*

eee

*/} + {/* */} - legendary - - - + + + Login} /> + + - > - - {/* {children} */} - *': { - flexGrow: 1, - flexBasis: '50%' - } - }} > - - {/* Login} /> */} - {/* */} - {/*

eee

*/} - {/* */} - - - - - Login} - /> - - - - - {/* + {/* */} - - -
{ e.preventDefault() }} - > - - - {/* */} - {/* Email Address + + + { + e.preventDefault(); + }} + > + + + {/* */} + {/* Email Address { fullWidth id="username1" label="E-mail Address" - variant="outlined" + variant="outlined" autoComplete='email' required onChange={usernamecheck} @@ -336,26 +327,34 @@ const Login = () => { {errors.email} )} */} - - setPassword(e.target.value)} - type='password' id="password1" label="Password" variant="outlined" /> - {/* */} - - - {/* */} - {/* Password */} - {/* + setPassword(e.target.value)} + type="password" + id="password1" + label="Password" + variant="outlined" + /> + {/* */} + + + {/* */} + {/* Password */} + {/* { onChange={(e) => setPassword(e.target.value)} type='password' id="password1" /> */} - {/* {touched.password && errors.password && ( + {/* {touched.password && errors.password && ( {errors.password} )} */} - {/* */} - - Forgot password? - - + {/* */} + + Forgot password? + + - - {/* + {/* { */} - {/* {errors.submit && ( + {/* {errors.submit && ( {errors.submit} )} */} - - {/* */} - - - - {/* */} - - - {/* */} -
- - {/* */} - - - - + + {/* */} + + + + {/* */} + - - - */} + + + {/* */} + + + + + + + {/* */} + + + + + + © All rights reserved + {/* Privacy Policy */} + + + + - {/* */} - - - - - - © All rights reserved - {/* Privacy Policy */} - - - - - - - Terms and Conditions - - - Privacy Policy - - {/* + Terms and Conditions + + + Privacy Policy + + {/* { > CA Privacy Notice */} - - - - - - - {/* */} + + + + + + + {/* */} -} + ); +}; -export default Login; \ No newline at end of file +export default Login; diff --git a/src/pages/nearle/orders/createorder1.js b/src/pages/nearle/orders/createorder1.js index 8f9af4d..dac3f9e 100644 --- a/src/pages/nearle/orders/createorder1.js +++ b/src/pages/nearle/orders/createorder1.js @@ -1,3 +1,5 @@ +import * as React from 'react'; +import { useEffect, useState, useRef, Fragment } from 'react'; import { FormControl, InputAdornment, @@ -12,13 +14,6 @@ import { Chip, Avatar, Divider, - Table, - TableContainer, - TableRow, - TableCell, - TableHead, - TableBody, - Tooltip, DialogTitle, DialogContent, Checkbox, @@ -31,79 +26,43 @@ import { InputLabel, Select, MenuItem, - Switch + 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 CheckCircleIcon from '@mui/icons-material/CheckCircle'; -import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined'; -import { PopupTransition } from 'components/@extended/Transitions'; -// var utc = require('dayjs/plugin/utc') -import * as React from 'react'; -import SwapVertIcon from '@mui/icons-material/SwapVert'; - +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 { usePlacesWidget } from "react-google-autocomplete"; import Geocode from 'react-geocode'; -// import {setApi} from "react-geocode"; -import Autocomplete1 from 'react-google-autocomplete'; -// import logo from 'assets/images/location.png' import Loader from 'components/Loader'; - -import { - // EditOutlined, - CloseOutlined, - PlusOutlined, - SearchOutlined -} from '@ant-design/icons'; -import { usePlacesWidget } from 'react-google-autocomplete'; - -import { DeleteOutlined } from '@ant-design/icons'; import * as geolib from 'geolib'; import MainCard from 'components/MainCard'; -import { - EnvironmentOutlined - // LinkOutlined, - // MailOutlined, - // MoreOutlined, - // PhoneOutlined -} from '@ant-design/icons'; -import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'; -// import VisibilityIcon from '@mui/icons-material/Visibility'; -// import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled'; -// import EditCalendarIcon from '@mui/icons-material/EditCalendar'; -import AccessibilityNewIcon from '@mui/icons-material/AccessibilityNew'; - -// import { PatternFormat } from 'react-number-format'; +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 { TimePicker } from '@mui/x-date-pickers/TimePicker'; - -// import DialogTitle from '@mui/material/DialogTitle'; import Dialog from '@mui/material/Dialog'; -import { - useEffect, - useState, - Fragment - // useReducer -} from 'react'; -// import { Label } from '@mui/icons-material'; import dayjs from 'dayjs'; -// import { useDispatch } from 'react-redux'; -// import { openSnackbar, closeSnackbar } from 'store/reducers/snackbar'; -// import {Autocompletemap} from 'pages/autocompletemap' import { enqueueSnackbar } from 'notistack'; -// import { CheckBox } from '@mui/icons-material'; -// dayjs.extend(utc) var utc = require('dayjs/plugin/utc'); dayjs.extend(utc); - -// import GoogleMaps from './map' 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'; function loadScript(src, position, id) { if (!position) { @@ -117,44 +76,52 @@ function loadScript(src, position, id) { position.appendChild(script); } -const autocompleteService = { current: null }; - const Createorder1 = () => { - const appId = localStorage.getItem('applocationid'); - 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); - function GoogleMaps() { - const [value, setValue] = React.useState(null); - const [inputValue, setInputValue] = React.useState(''); - const [options, setOptions] = React.useState([]); - const loaded = React.useRef(false); - - const [mobilenumber, setMobilenumber] = useState(''); - const [emailaddress, setEmailaddress] = useState(''); - const [city, setCity] = useState(''); - const [zipcode, setZipcode] = useState(''); - const [state, setState] = useState(''); - const [suburb, setSuburb] = useState(''); - const [firstname, setFirstname] = useState(''); - const [doorno, setDoorno] = useState(''); - const [landmark, setLandmark] = useState(''); - const [address, setAddress] = useState(''); - const [latlong, setLatlong] = useState({}); - - // React.useEffect(()=>{ - - // if(value){ - // console.log() - // setAddress(value.description) - // } - // },[value]) - useEffect(() => { + // ====================================================== || 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 @@ -162,29 +129,40 @@ const Createorder1 = () => { console.log(response); if (response.results[0].address_components) { let place = response.results[0]; - let city1, zipcode1, state1, suburb1; + 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': - city1 = place.address_components[i].long_name; + cityA = place.address_components[i].long_name; break; case 'administrative_area_level_1': - state1 = place.address_components[i].long_name; + stateA = place.address_components[i].long_name; break; case 'postal_code': - zipcode1 = place.address_components[i].long_name; + zipcodeA = place.address_components[i].long_name; break; case 'sublocality': - suburb1 = place.address_components[i].long_name; + suburbA = place.address_components[i].long_name; break; } } } - setCity(city1 || ''); - setState(state1 || ''); - setZipcode(zipcode1 || ''); - setSuburb(suburb1 || ''); + 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 }); } } }, @@ -195,488 +173,198 @@ const Createorder1 = () => { } catch (err) { console.log(err); } - }, [address]); + } + }, [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; - 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`, - document.querySelector('head'), - 'google-maps' + 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]); - loaded.current = true; + 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' + ); } - const fetch = React.useMemo( - () => - debounce((request, callback) => { - autocompleteService.current.getPlacePredictions(request, callback); - }, 400), - [] - ); - - 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]); - - const createprofile = async () => { - if (!firstname) { - opentoast('Fill Full name'); - } else if (!mobilenumber) { - opentoast('Fill Mobile Number'); - } else if (!address) { - opentoast('Fill Address'); - } else if (!city) { - opentoast('Fill City'); - } else if (!zipcode) { - opentoast('Fill post code'); - } else if (!suburb) { - opentoast('Fill suburb'); - } else if (!latlong.lat || !latlong.lng) { - opentoast('Choose valid address'); - } else { - let obj = { - customerid: 0, - configid: 1, - firstname: firstname, - applocationid: parseInt(localStorage.getItem('applocationid')), - profileimage: '', - dialcode: '+91', - contactno: mobilenumber, - devicetype: '', - deviceid: '', - customertoken: '', - address: address, - suburb: suburb, - city: city, - state: state, - postcode: zipcode, - landmark: landmark, - doorno: doorno, - latitude: latlong.lat.toString(), - longitude: latlong.lng.toString(), - tenantid: tenantid, - email: emailaddress, - primaryaddress: 1 - }; - - console.log(obj); - - setLoading(true); - try { - await axios - .post(`${process.env.REACT_APP_URL}/customers/create`, obj) - .then((res) => { - console.log(res); - if (res.data.status) { - enqueueSnackbar(' Created Successfully ', { - variant: 'success', - anchorOrigin: { vertical: 'top', horizontal: 'right' }, - autoHideDuration: 1000 - }); - // navigate('/customers') - // setTimeout(()=>{ - // fetchprofiledetails(localStorage.getItem('appuserid')); - - // },1000) - clientdetails(tenantid); - setOpen4(false); - } else if (res.data.message == 'Customer Already available') { - enqueueSnackbar('Customer Already available', { - variant: 'error', - anchorOrigin: { vertical: 'top', horizontal: 'right' }, - autoHideDuration: 1000 - }); - } - setLoading(false); - }) - .catch((err) => { - console.log(err); - - setLoading(false); - enqueueSnackbar(err.message, { - variant: 'error', - anchorOrigin: { vertical: 'top', horizontal: 'right' }, - autoHideDuration: 1000 - }); - }); - } catch (err) { - console.log(err); - setLoading(false); - } - } - }; - - return ( - <> - - - - - Create Customer - - { - setOpen4(false); - }} - > - - - - } - sx={{ height: '100%' }} - > - - - - Name - setFirstname(e.target.value)} - value={firstname} - autoComplete="off" - /> - - - - - - Phone Number - - - { - if (e.target.value.toString().length <= 10) { - setMobilenumber(e.target.value); - } - }} - value={mobilenumber} - autoComplete="off" - sx={{ cursor: 'not-allowed' }} - /> - - - - {/* - - Email Address - setEmailaddress(e.target.value)} - value={emailaddress} - autoComplete='off' - - /> - - */} - - - - Address - {/* setAddress(e.target.value)} - inputRef={materialRef} - /> */} - (typeof option === 'string' ? option : option.description)} - filterOptions={(x) => x} - options={options} - autoComplete - includeInputInList - filterSelectedOptions - value={value} - noOptionsText="No locations" - onChange={(event, newValue) => { - setOptions(newValue ? [newValue, ...options] : options); - setValue(newValue); - // setCity(city1 || '') - // setState(state1 || ''); - // setZipcode(zipcode1 || ''); - // setSuburb(suburb1 || '') - // setAddress(newValue) - - // 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 || '') - console.log(newValue); - setAddress(newValue.description); - }} - onInputChange={(event, newInputValue) => { - setInputValue(newInputValue); - // console.log(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} - - - -
    • - ); - }} - /> -     -     - - - - Location - setSuburb(e.target.value)} - value={suburb} - autoComplete="off" - /> - - - - - City - setCity(e.target.value)} - value={city} - autoComplete="off" - /> - - - - - - State - setState(e.target.value)} - value={state} - autoComplete="off" - /> - - - - - Post Code - setZipcode(e.target.value)} - value={zipcode} - autoComplete="off" - /> - - - - - - Door No - setDoorno(e.target.value)} - value={doorno} - autoComplete="off" - /> - - - - - Landmark - setLandmark(e.target.value)} - value={landmark} - autoComplete="off" - /> - - -     -     -     - - - - - - -     -     - - ); + 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({}); @@ -691,25 +379,53 @@ const Createorder1 = () => { 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(`https://jupiter.nearle.app/live/api/v1/tenants/gettenantpricing/?tenantid=${tid}`); + 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); @@ -721,20 +437,6 @@ const Createorder1 = () => { useEffect(() => { fetchTenantPricing(); }, []); - // const fetchAppPricing = async () => { - // try { - // const pricingResponse = await axios.get(`${process.env.REACT_APP_URL}/utils/getapppricing/?applocationid=${appId}`); - // 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('fetchAppPricing error', error); - // } - // }; - // useEffect(() => { - // fetchAppPricing(); - // }, []); useEffect(() => { console.log('startPoint', startPoint); @@ -758,25 +460,16 @@ const Createorder1 = () => { setTotalCharge(total); } setShowDistance(true); + if (roundedDistance > appLocaRadius) { + opentoast('Service not available at this location', 'error', 2000); + setShowDistance(true); + } }; useEffect(() => { - // if (localStorage.getItem('tenantid')) { - - // fetchtenantlocation(localStorage.getItem('tenantid')) - // clientdetails(localStorage.getItem('tenantid')) - // } - if (localStorage.getItem('partnerid')) { - // fetchtenantinfolist(localStorage.getItem('partnerid')); - } - }, []); - - useEffect(() => { - // fetchtenantlocation(); clientdetails(); - clientdetailsbusiness(); - fetchtenantinfo(); - }, []); + // clientdetailsbusiness(); + }, [searchCustList.length > 3, searchCustList == '']); useEffect(() => { if (timeslotarr[0]) { @@ -821,47 +514,47 @@ const Createorder1 = () => { } }, [searchword]); - const { ref: materialRef } = usePlacesWidget({ - apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY, - onPlaceSelected: (place) => { - console.log(place); + // 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) + // 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'] - } - }); + // 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) => { @@ -870,6 +563,7 @@ const Createorder1 = () => { setTenant(res.data.details); setTenantid(res.data.details.tenantid); fetchAppAdminTokens(); + setSubCatId(res.data.details.subcategoryid); } setLoading(false); }) @@ -880,19 +574,37 @@ const Createorder1 = () => { }; useEffect(() => { fetchtenantinfo(); - // fetchtenantlocation(); + }, []); + // ==================================================== || 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); - console.log('tid', tid); await axios .get(`${process.env.REACT_APP_URL}/utils/getapplocations/?applocationid=${appId}`) .then((res) => { console.log('fetchTiming', res); - const { opentime, closetime } = res.data.details[0]; + 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}`); @@ -919,82 +631,6 @@ const Createorder1 = () => { fetchTiming(); }, [starttime, endtime]); - // const fetchtenantinfolist = async () => { - // setLoading(true); - // console.log('tid', tid); - // // await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`) - // await axios - // .get(`${process.env.REACT_APP_URL}/tenants/gettenants/?partnerid=${tid}&status=active`) - - // .then((res) => { - // console.log(res); - // if (res.data.status) { - // // setTenantinfo(res.data.details); - // let arr = []; - // res.data.details.map((val) => { - // arr.push({ - // ...val, - // label: `${val.tenantname}` - // }); - // }); - // setTenantlist(arr); - // } - // setLoading(false); - // }) - // .catch((err) => { - // console.log(err); - // setLoading(false); - // }); - // }; - - // const fetchtenantlocation = async () => { - // setLoading(true); - // await axios - // .get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations/?tenantid=${tid}`) - // .then((res) => { - // console.log('fetchtenantlocation', res); - // if (res.data.status) { - // let arr = []; - // res.data.details.map((val) => { - // arr.push({ - // ...val, - // label: ` ${val.locationname}` - // }); - // }); - // setTenantlocationlist(arr); - // } - // setLoading(false); - // }) - // .catch((err) => { - // console.log(err); - // setLoading(false); - // }); - // }; - - // // =============================================== || fetchadmintoken (via tid , pid) || =============================================== - // const fetchadmintoken = async (tid, pid) => { - // setLoading(true); - // await axios - // .get(`${process.env.REACT_APP_URL}/partners/getadmintoken/?tenantid=${tid}&partnerid=${pid}`) - // .then((res) => { - // console.log(res); - // if (res.data.status) { - // setAdmintoken(res.data.details.userfcmtokem); - - // let arr = []; - // for (let i = starttime, j = 0; dayjs(endtime).diff(i, 'm') >= 0; j++, i = dayjs(i).add(30, 'm')) { - // arr.push(i); - // } - // console.log(arr); - // setTimeslotarr(arr); - // } - // setLoading(false); - // }) - // .catch((err) => { - // console.log(err); - // setLoading(false); - // }); - // }; // =============================================== || fetchAppAdminTokens (via appId) || =============================================== const fetchAppAdminTokens = async () => { setLoading(true); @@ -1006,12 +642,6 @@ const Createorder1 = () => { console.log('userfcmtokemArray', userfcmtokemArray); if (res.data.status) { setAdmintoken(userfcmtokemArray); - // let arr = []; - // for (let i = starttime, j = 0; dayjs(endtime).diff(i, 'm') >= 0; j++, i = dayjs(i).add(30, 'm')) { - // arr.push(i); - // } - // console.log('setTimeslotarr', arr); - // setTimeslotarr(arr); } setLoading(false); }) @@ -1029,11 +659,11 @@ const Createorder1 = () => { // =============================================== || opentoast || =============================================== - const opentoast = (message) => { + const opentoast = (message, variant, time) => { enqueueSnackbar(message, { - variant: 'error', + variant: variant, anchorOrigin: { vertical: 'top', horizontal: 'right' }, - autoHideDuration: 1000 + autoHideDuration: time ? time : 1500 }); console.log(alertmessage); }; @@ -1080,32 +710,34 @@ const Createorder1 = () => { deliveryaddress: clientinfo.address, deliverytype: deliverytype, pickupaddress: tenantinfo.address, - pickuplat: startPoint.latitude, - pickuplong: startPoint.longitude, + 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, - deliverylong: endPoint.longitude, + 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 '); + opentoast('Choose Client ', 'warning'); } else if (!tenantinfo.address) { - opentoast('Choose Pickup Location'); + opentoast('Choose Pickup Location', 'warning'); } else if (!clientinfo.address) { - opentoast('Choose Drop Location'); + opentoast('Choose Drop Location', 'warning'); } else if (!selectedtime) { - opentoast('Choose Schedule Time'); + opentoast('Choose Schedule Time', 'warning'); } else { setLoading(true); + await axios .post(`${process.env.REACT_APP_URL}/orders/createorders`, arr) .then((res) => { @@ -1122,21 +754,182 @@ const Createorder1 = () => { navigate('/orders'); } else { - opentoast(res.data.message); + opentoast(res.data.message, 'warning'); } setLoading(false); console.log(res); }) .catch((err) => { console.log(err); - opentoast(err.data.message); + opentoast(err.data.message, 'warning'); setLoading(false); }); } - console.log(arr); }; + const createsubmitobj2 = async () => { + let arr = {}; + arr = { + orders: { + orderheaderid: 0, + tenantid: tenant.tenantid, + applocationid: tenant.applolcationid, + locationid: +tenanatLocoId, //main or branch + moduleid: +tenant.moduleid, + categoryid: +tenant.categoryid, + subcategoryid: +subCatId, + configid: +localStorage.getItem('configid'), + orderid: '', // + orderdate: dayjs().format('YYYY-MM-DD HH:mm:ss'), + deliverytime: `${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(selectedtime.$d).format('HH:mm:ss')}`, + deliverytype: pickCust.customerid !== 0 || dropCust.customerid !== 0 ? 'B' : 'C', + orderstatus: 'created', + pending: '', + processing: '', + ready: '', + delivered: '', + cancellled: '', + customerid: +pickCust.customerid || 0, + pickupcustomer: pickCust.firstname || '', + pickupcontactno: pickCust.contactno || '', + pickuplandmark: pickCust.landmark || '', + pickuplocation: pickCust.suburb || '', + pickupcity: pickCust.city || '', + pickuplocationid: pickCust.deliverylocationid || 0, + pickupaddress: pickCust.address || '', + pickuplat: pickCust.latitude.toString(), + pickuplong: pickCust.longitude.toString(), + deliveryid: dropCust.customerid || 0, + deliverycustomer: dropCust.firstname || '', + deliverycontactno: dropCust.contactno || '', + deliverylocationid: dropCust.deliverylocationid || 0, + deliverylat: dropCust.latitude.toString(), + deliverylong: dropCust.longitude.toString(), + deliveryaddress: dropCust.address || '', + deliverylandmark: dropCust.landmark || '', + deliverylocation: dropCust.suburb || '', + deliverycity: dropCust.city || '', + orderamount: +totalCharge.toFixed(2) || 0, + taxamount: 0.0, + ordercharges: 0.0, + ordervalue: +totalCharge.toFixed(2) || 0, + itemcount: 1, + paymenttype: 42, + paymentstatus: 1, + deliverycharge: +totalCharge.toFixed(2) || 0, + ordernotes: otherinstructions, + kms: distance || 0, + smsdelivery: 1, + remarks: '', + tenantuserid: parseInt(localStorage.getItem('userid')), + partnerid: tenant.partnerid + }, + pickup: { + customerid: pickCust.customerid || 0, + configid: parseInt(localStorage.getItem('configid')), + firstname: pickCust.firstname || '', + applocationid: pickCust.applocationid, + profileimage: '', + dialcode: '+91', + contactno: pickCust.contactno || '', + devicetype: '', + deviceid: '', + customertoken: '', + address: pickCust.address || '', + suburb: pickCust.suburb || '', + city: pickCust.city || '', + state: pickCust.state || '', + postcode: pickCust.postcode || '', + landmark: pickCust.landmark || '', + doorno: pickCust.doorno || '', + latitude: pickCust.latitude.toString() || '', + longitude: pickCust.longitude.toString() || '', + tenantid: tenant.tenantid, + email: pickCust.email || '', + primaryaddress: 1 + }, + drop: { + customerid: dropCust.customerid || 0, + configid: parseInt(localStorage.getItem('configid')), + firstname: dropCust.firstname || '', + applocationid: dropCust.applocationid, + profileimage: '', + dialcode: '+91', + contactno: dropCust.contactno || '', + devicetype: '', + deviceid: '', + customertoken: '', + address: dropCust.address || '', + suburb: dropCust.suburb || '', + city: dropCust.city || '', + state: dropCust.state || '', + postcode: dropCust.postcode || '', + landmark: dropCust.landmark || '', + doorno: dropCust.doorno || '', + latitude: dropCust.latitude.toString(), + longitude: dropCust.longitude.toString(), + tenantid: tenant.tenantid, + email: dropCust.email || '', + primaryaddress: 1 + } + }; + 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); + 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); @@ -1153,19 +946,22 @@ const Createorder1 = () => { 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(`${process.env.REACT_APP_URL}/customers/getbytid/?tenantid=${tid}&locationid=0`) + .get(url) .then((res) => { console.log('clientdetails', res.data.details); if (res.data.status) { setClientdetail(res.data.details); - // if (!searchword) { - // setClientdetailarr(res.data.details) - // } + setCustomerlist(res.data.details); let arr = []; res.data.details.map((val) => { arr.push({ @@ -1180,14 +976,14 @@ const Createorder1 = () => { .catch((err) => { console.log(err); setLoading2(false); - opentoast('server error'); + opentoast('server error', 'warning'); }); } catch (err) { console.log(err); setLoading2(false); } }; - + // ========================================================= || clientdetailsbusiness || ========================================================= const clientdetailsbusiness = async () => { setLoading2(true); try { @@ -1214,7 +1010,7 @@ const Createorder1 = () => { .catch((err) => { console.log(err); setLoading2(false); - opentoast('server error'); + opentoast('server error', 'warning'); }); } catch (err) { console.log(err); @@ -1222,44 +1018,6 @@ const Createorder1 = () => { } }; - // ================================================== || notifyadmin || ================================================== - // const notifyadmin = async (id1) => { - // setLoading(true); - // await axios - // .post(`${process.env.REACT_APP_URL}/utils/notifyuser`, { - // sender: localStorage.getItem('firstname'), - // accessid: process.env.REACT_APP_RIDER_ACCESS_ID, - // notification: { - // priority: 'high', - // to: id1, - // notification: { - // title: 'Nearle Admin', - // body: 'Orders has been placed for delivery.Kindly accept and process deliveries', - // 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); - // }); - // }; // ================================================== || sendnotifications || ================================================== const sendnotifications = async () => { setLoading(true); @@ -1297,10 +1055,170 @@ const Createorder1 = () => { setLoading(false); }); }; + // ============================================= || Google Maps Autocomplete(pick) || ============================================= + useEffect(() => { + // Initialize Google Maps Autocomplete + 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('new place lat lng', { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }); // Do something with the selected place + setValue(place); + setAddress(`${place.name} ${place.formatted_address}`); + setPickCust({ ...pickCust, address: `${place.name} ${place.formatted_address}` }); + const 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 + console.log('Address:', address); + }); + }, [address, inputValue2, pickCust]); + // ============================================= || Google Maps Autocomplete(Drop) || ============================================= + + useEffect(() => { + // 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('new place lat lng', { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }); // Do something with the selected place + setValue1(place); + setAddress1(`${place.name} ${place.formatted_address}`); + setDropCust({ ...pickCust, address: `${place.name} ${place.formatted_address}` }); + const 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 + console.log('Address:', address); + }); + }, [address, inputValue3, dropCust]); + + // ============================================= || 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); + } + }} + /> + )} - + - {/* - - - - Choose Client -
    - -     - - - - - {tenant.address || ''} - - - -     -     -     */} - + {/* ================================================= || Pickup || ================================================= */} + - Pickup + Pickup - Customer + {/* Customer { } }} /> - Business + Business */} + - { if (val) { // clientdetails(val.tenantid) if (clientinfo.customerid == val.customerid) { - opentoast('choose different Location'); + opentoast('choose different Location', 'warning'); setTenantinfo({}); } else { setTenantinfo(val); @@ -1421,30 +1361,315 @@ const Createorder1 = () => { )} } - // disabled={tenantid ? false : true} - /> + /> */} + + {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 }); + } + }} + /> + )} +     - - - - {/* {tenantinfo.locationaddress || ''} */} - {tenantinfo.address || ''} - - + + + + 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" + 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 - Drop + + {/* Customer */} + {/* { if (val) { @@ -1457,10 +1682,31 @@ const Createorder1 = () => { }} size="small" /> - Business + Business */} + - { onChange={(e, val) => { if (val) { if (tenantinfo.customerid == val.customerid) { - opentoast('choose different Location'); + opentoast('choose different Location', 'warning'); setClientinfo({}); } else { setClientinfo(val); @@ -1481,8 +1727,6 @@ const Createorder1 = () => { console.log(val); setEndPoint({ latitude: val.latitude, longitude: val.longitude }); }} - // disabled={(tenant.tenantid) ? false : true} - // disabled={tenantid ? false : true} noOptionsText={ // @@ -1501,40 +1745,302 @@ const Createorder1 = () => { )} } - /> + /> */} + + {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 }); + } + }} + /> + )} +     + - - - {clientinfo.address || ''} - - - - {showDistance && ( - - - - - {/* */} - {/* */} - + + 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 + Date + { @@ -1543,6 +2049,7 @@ const Createorder1 = () => { console.log(dateres11); setSelectedtime(''); if (dateres11 <= 0) { + console.log('startdate', e); setStartdate(e); setEnddate(e); @@ -1573,7 +2080,7 @@ const Createorder1 = () => { } } else { setAlertmessage('choose Upcoming Date'); - opentoast('choose Upcoming Date'); + opentoast('choose Upcoming Date', 'warning'); setStartdate(NaN); } }} @@ -1582,11 +2089,9 @@ const Createorder1 = () => { disablePast /> - - - Time - {/*

    {dayjs(selectedtime).format('HH:mm')}

    */} - {/*

    {selectedtime}

    */} + + Time + { }} > - {timeslotarr.map((val) => { + {timeslotarr.map((val, index) => { if ( dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0 - // && currentsno ) { return ( - <> + { - // let arr = orderarr; - // arr[currentsno - 1].deliverytime = val - // setOrderarr([...arr]) - // console.log(arr) - // }} onClick={() => { - setSelectedtime(val); + if (distance > appLocaRadius) { + opentoast('Service not available at this location', 'error', 2000); + } else if (showDistance) { + console.log('selectedtime', val); + setSelectedtime(val); + } else { + opentoast('Select Pickup and Drop', 'error'); + } }} /> - + ); } })} - {/* - - - - - {selectedtime} - { - if (tenantinfo.tenantid) { - setOpen3(true) - - } else { - opentoast('Choose Location & Client') - } - - }} - > - - - - */} -     - - {/* */} - - setOtherinstructions(e.target.value)} - /> - - {/* */}     + + + {showDistance && ( + + + Distance - - - - + /> + Weight + + { + handleChipClick('1-10kgs'); + setWeight('1-10kgs'); + }} + /> + { + handleChipClick('11-20kgs'); + setWeight('11-20kgs'); + }} + /> + { + handleChipClick('21-30kgs'); + setWeight('21-30kgs'); + }} + /> + +     + {/* ================================================= || Notes || ================================================= */} + + + + setOtherinstructions(e.target.value)} + /> + + {/* */} + + + + +     +     - { { - // let arr = orderarr; - // arr[currentsno - 1].deliverytime = val - // setOrderarr([...arr]) - // console.log(arr) - // }} onClick={() => { setSelectedtime(dayjs(val).format('hh:mm A')); }} @@ -1752,22 +2296,156 @@ const Createorder1 = () => { OK + */} + + {/* ============================================= || saved address Dialog || ============================================= */} + { + setIsCustomerOpen(false); + }} + fullWidth + sx={{ minWidth: 'lg' }} + > + + + {`Select Address (${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); }} > - {/* {list(anchor)} */} + - + */}     ); diff --git a/src/pages/nearle/orders/orders.js b/src/pages/nearle/orders/orders.js index 3079dd2..731b7cb 100644 --- a/src/pages/nearle/orders/orders.js +++ b/src/pages/nearle/orders/orders.js @@ -406,8 +406,8 @@ const Orders = () => { {loading && ( <> - {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item) => ( - + {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => ( + @@ -628,12 +628,12 @@ const Orders = () => { - + Shift {k + 1} - + {''}{val5.locationaddress} @@ -643,13 +643,13 @@ const Orders = () => { } - - + + # @@ -662,18 +662,18 @@ const Orders = () => { Price Amount Assigned Roles - - + + - + {((val5.orderdetails) ? val5.orderdetails : []).map((val, i) => { - + return <> - + { {val.productname} - + @@ -710,7 +710,7 @@ const Orders = () => { - + 0) ? "warning" : "error"} variant="light" size="small" /> @@ -718,7 +718,7 @@ const Orders = () => { ${val.price} ${val.landingamount} - + - + - + })} - +
    - - - - - + + + + + - + { }} spacing={2} alignItems={'flex-start'}> Assigned Roles {(stafflist[0]) && - + } label={stafflist[0].locationaddress} variant="light" color="primary" /> } {(stafflist[0]) && - + } - + - + - - + + - - + + - + {(stafflist.length === 0) ? <> {(loading1) ? <> - - + + - + : No Staffs has been Assigned - + } : - + @@ -812,31 +812,31 @@ const Orders = () => { Start Time End Time Pay Rate - + Clockin Clockout - + Hours Worked - - + + Status - + {stafflist.map((val, i) => { - + return - - + + {i + 1} - + @@ -860,48 +860,48 @@ const Orders = () => { {val.rolecost} - - + + - + - + - + - + {val.hoursworked} - - - + + + - + {(val.orderstatus === 'pending') && - + } {(val.orderstatus === 'cancelled') && - - + + } {(val.orderstatus === 'completed') && - + } {(val.orderstatus === 'processing') && @@ -913,7 +913,7 @@ const Orders = () => { {(val.orderstatus === 'confirmed') && } - + {(val.orderstatus === 'active') && } @@ -921,11 +921,11 @@ const Orders = () => { } - + - + }) } @@ -935,18 +935,18 @@ const Orders = () => { - + }) - - + + } - - + + */} diff --git a/yarn.lock b/yarn.lock index 72da94b..c1ad203 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4173,6 +4173,11 @@ cosmiconfig@^8.1.3: parse-json "^5.0.0" path-type "^4.0.0" +country-flag-icons@^1.5.4: + version "1.5.10" + resolved "https://registry.npmjs.org/country-flag-icons/-/country-flag-icons-1.5.10.tgz" + integrity sha512-x3elaK+ZY23W1YtFsNQknRdURzkV7g3Z93AoA7SHZJUEXbVjRsNh4h9Uf09+OjWF/4u8tXeAt37gezGRdwR/2g== + create-ecdh@^4.0.0: version "4.0.4" resolved "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz" @@ -6202,6 +6207,13 @@ ini@^1.3.5: resolved "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz" integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew== +input-format@^0.3.10: + version "0.3.10" + resolved "https://registry.npmjs.org/input-format/-/input-format-0.3.10.tgz" + integrity sha512-5cFv/kOZD7Ch0viprVkuYPDkAU7HBZYBx8QrIpQ6yXUWbAQ0+RQ8IIojDJOf/RO6FDJLL099HDSK2KoVZ2zevg== + dependencies: + prop-types "^15.8.1" + internal-slot@^1.0.3, internal-slot@^1.0.4: version "1.0.5" resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz" @@ -7230,6 +7242,11 @@ levn@~0.3.0: prelude-ls "~1.1.2" type-check "~0.3.2" +libphonenumber-js@^1.10.59: + version "1.10.59" + resolved "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.59.tgz" + integrity sha512-HeTsOrDF/hWhEiKqZVwg9Cqlep5x2T+IYDENvT2VRj3iX8JQ7Y+omENv+AIn0vC8m6GYhivfCed5Cgfw27r5SA== + lilconfig@^2.0.3, lilconfig@^2.0.5, lilconfig@^2.0.6: version "2.0.6" resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz" @@ -9243,6 +9260,17 @@ react-loading-icons@^1.1.0: resolved "https://registry.npmjs.org/react-loading-icons/-/react-loading-icons-1.1.0.tgz" integrity sha512-Y9eZ6HAufmUd8DIQd6rFrx5Bt/oDlTM9Nsjvf8YpajTa3dI8cLNU8jUN5z7KTANU+Yd6/KJuBjxVlrU2dMw33g== +react-phone-number-input@^3.3.10: + version "3.3.10" + resolved "https://registry.npmjs.org/react-phone-number-input/-/react-phone-number-input-3.3.10.tgz" + integrity sha512-onv6ETMejyA4Wi0/6Ay00FcSokHIJcowLUcwdizpALSpeXPFqbyrjHQSL8+pgkxIIruRxr5nyIAB8LT+Sa/Vlg== + dependencies: + classnames "^2.3.1" + country-flag-icons "^1.5.4" + input-format "^0.3.10" + libphonenumber-js "^1.10.59" + prop-types "^15.8.1" + "react-redux@^7.2.1 || ^8.0.2", react-redux@^8.0.5: version "8.0.5" resolved "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz"