customercreate

This commit is contained in:
joshikannan
2024-04-29 19:01:57 +05:30
parent 8f54179ba5
commit 8416f56112
2 changed files with 462 additions and 600 deletions

View File

@@ -1,67 +1,73 @@
import { useEffect, useState } from 'react'; import { React, useEffect, useState } from 'react';
// material-ui // material-ui
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
import { Box, Button, FormLabel, Grid, InputLabel, MenuItem, Select, Stack, TextField, Typography } from '@mui/material'; import {
Box,
// third-party Button,
// import { PatternFormat } from 'react-number-format'; FormLabel,
Grid,
InputLabel,
MenuItem,
Select,
Stack,
TextField,
Typography,
IconButton,
Autocomplete,
InputAdornment
} from '@mui/material';
import MyLocationIcon from '@mui/icons-material/MyLocation';
// project import // project import
import Avatar from 'components/@extended/Avatar'; import Avatar from 'components/@extended/Avatar';
import MainCard from 'components/MainCard'; import MainCard from 'components/MainCard';
import {
// facebookColor, linkedInColor, twitterColor
ThemeMode
} from 'config';
import axios from 'axios'; import axios from 'axios';
// assets
import {
// FacebookFilled, LinkedinFilled, TwitterSquareFilled,
CameraOutlined
} from '@ant-design/icons';
import { usePlacesWidget } from 'react-google-autocomplete'; import { usePlacesWidget } from 'react-google-autocomplete';
import Loader from 'components/Loader'; import Loader from 'components/Loader';
import Geocode from 'react-geocode'; import Geocode from 'react-geocode';
import { enqueueSnackbar } from 'notistack'; import { enqueueSnackbar } from 'notistack';
import { useNavigate } from 'react-router'; import { useNavigate } from 'react-router';
// import { setLocationType } from 'react-geocode'; import CloseIcon from '@mui/icons-material/Close';
// const avatarImage = require.context('assets/images/users', true);
// styles & constant
// const ITEM_HEIGHT = 48;
// const ITEM_PADDING_TOP = 8;
// const MenuProps = {
// PaperProps: {
// style: {
// maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP
// }
// }
// };
const CreateCustomer = () => { const CreateCustomer = () => {
const appId = localStorage.getItem('applocationid');
const theme = useTheme(); const theme = useTheme();
const [selectedImage, setSelectedImage] = useState(undefined); const [selectedImage, setSelectedImage] = useState(undefined);
const [avatar, setAvatar] = useState(); const [avatar, setAvatar] = useState();
// avatarImage(`./default.png`)
const [businessname, setBusinessname] = useState(''); const [businessname, setBusinessname] = useState('');
const [businessno, setBusinessno] = useState(''); const [businessno, setBusinessno] = useState('');
// const [role, setRole] = useState('');
const [mobilenumber, setMobilenumber] = useState(''); const [mobilenumber, setMobilenumber] = useState('');
const [emailaddress, setEmailaddress] = useState(''); const [emailaddress, setEmailaddress] = useState('');
const [city, setCity] = useState(''); const [city, setCity] = useState('');
const [zipcode, setZipcode] = useState(''); const [zipcode, setZipcode] = useState('');
const [address, setAddress] = useState(''); const [address, setAddress] = useState('');
const [state, setState] = useState('');
const [suburb, setSuburb] = useState(''); const [suburb, setSuburb] = useState('');
const [latlong, setLatlong] = useState({}); const [latlong, setLatlong] = useState({});
const [profiledetails, setProfiledetails] = useState({});
const [primarycontact, setPrimarycontact] = useState('');
const [firstname, setFirstname] = useState(''); const [firstname, setFirstname] = useState('');
const [doorno, setDoorno] = useState(''); const [doorno, setDoorno] = useState('');
const [landmark, setLandmark] = useState(''); const [landmark, setLandmark] = useState('');
const [tenantinfo, setTenantinfo] = useState({}); const [tenantinfo, setTenantinfo] = useState({});
const [inputValue2, setInputValue2] = useState('');
const [appLocaLat, setAppLocaLat] = useState();
const [appLocaLng, setAppLocaLng] = useState();
const [appLocaRadius, setAppLocaRadius] = useState();
const [locaName, setLocoName] = useState('Select Location');
const [locations, setLocations] = useState('Select Location');
const [tenantlist, setTenantlist] = useState([]);
const userid = localStorage.getItem('userid');
const [isAppLocation, setIsAppLocation] = useState(false);
const [tenantLocations, setTenantlocations] = useState([]);
const [isClient, setisclient] = useState(false);
const [tid, setTid] = useState(0);
const [isBusiness, setIsBusiness] = useState(false);
const [tenanatLocoId, setTenanatLocoId] = useState(localStorage.getItem('locationid'));
const [tenantlocation, setTenantlocation] = useState('');
const [isLocation, setIsLocation] = useState(false);
const [pickCust, setPickCust] = useState({});
const [startPoint, setStartPoint] = useState({ latitude: 0, longitude: 0 });
const navigate = useNavigate(); const navigate = useNavigate();
@@ -71,69 +77,109 @@ const CreateCustomer = () => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
useEffect(() => { useEffect(() => {
// fetchprofiledetails(localStorage.getItem('appuserid'));
// fetchprofiledetails(181);
if (localStorage.getItem('tenantid')) { if (localStorage.getItem('tenantid')) {
fetchtenantinfo(localStorage.getItem('tenantid')); fetchtenantinfo(localStorage.getItem('tenantid'));
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
try { // Initialize Google Maps Autocomplete
Geocode.fromAddress(address).then( if (inputValue2) {
(response) => { const autocompleteInput = document.getElementById('addressAuto1');
if (response.status == 'OK') { const autocomplete = new window.google.maps.places.Autocomplete(autocompleteInput, {
const { lat, lng } = response.results[0].geometry.location; // types: ['(cities)'], // You can adjust the types parameter based on your requirements
setLatlong({ strictBounds: true,
lat, bounds: new window.google.maps.Circle({
lng // center: new window.google.maps.LatLng(11.0050707, 76.9509083),
}); // radius: 100000
console.log(response); center: new window.google.maps.LatLng(appLocaLat, appLocaLng),
}
},
(error) => {
console.log(error);
}
);
} catch (err) {
console.log(err);
}
}, [address]);
const opentoast = (message) => { radius: appLocaRadius * 1000
enqueueSnackbar(message, { }).getBounds()
variant: 'error',
anchorOrigin: { vertical: 'top', horizontal: 'right' },
autoHideDuration: 2000
}); });
// console.log(alertmessage) 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() });
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) => {
const fetchprofiledetails = async (userid) => { component.types.forEach((type) => {
if (userid) { switch (type) {
setLoading(true); case 'street_number':
try { address.street_number = component.long_name;
await axios break;
.get(`${process.env.REACT_APP_URL2}/tenants/getclient?id=${userid}`) case 'route':
.then((res) => { address.route = component.long_name;
console.log(res); break;
if (res.data.message === 'Successful') { case 'locality':
let res1 = res.data.details; address.locality = component.long_name;
setProfiledetails(res1); break;
setBusinessname(res1.tenantname); case 'sublocality_level_1':
setBusinessno(res1.registrationno); address.sublocality_level_1 = component.long_name;
setMobilenumber(res1.contactno); break;
setPrimarycontact(res1.primarycontact); case 'administrative_area_level_3':
setEmailaddress(res1.primaryemail); address.administrative_area_level_3 = component.long_name;
setAddress(res1.address); break;
setCity(res1.city); case 'administrative_area_level_1':
setZipcode(res1.postcode); address.administrative_area_level_1 = component.long_name;
setState(res1.state); break;
setSuburb(res1.suburb); case 'country':
setLatlong({ address.country = component.long_name;
lat: res1.latitude, break;
lng: res1.longitude 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.administrative_area_level_3,
city: address.locality,
state: address.administrative_area_level_1,
postcode: address.postal_code,
latitude: place.geometry.location.lat(),
longitude: place.geometry.location.lng()
});
console.log('Pick Address:', address);
});
}
}, [inputValue2]);
// ==================================================== || getapplocations || ====================================================
const getapplocations = async () => {
setLoading(true);
await axios
.get(`${process.env.REACT_APP_URL}/utils/getapplocations/?applocationid=${appId}`)
.then((res) => {
console.log('getapplocations', res);
const { opentime, closetime, latitude, longitude, radius } = res.data.details[0];
if (res.data.status) {
setAppLocaLat(latitude);
setAppLocaLng(longitude);
setAppLocaRadius(radius);
console.log('radius', radius);
} }
setLoading(false); setLoading(false);
}) })
@@ -141,13 +187,84 @@ const CreateCustomer = () => {
console.log(err); console.log(err);
setLoading(false); setLoading(false);
}); });
};
useEffect(() => {
getapplocations();
}, [appId]);
// ==============================|| fetchAppLocations ||============================== //
const fetchAppLocations = async () => {
try {
const locationRes = await axios.get(`${process.env.REACT_APP_URL}/partners/getlocations/?userid=${userid}`);
// const updatedLocations = [
// ...locationRes.data.details,
// { partnername: 'All', applocationid: -1 }
// ];
// console.log('fetchAppLocations', updatedLocations);
console.log('fetchAppLocations', locationRes.data.details);
setLocations(locationRes.data.details);
} catch (err) { } catch (err) {
console.log('locationRes', err);
}
};
useEffect(() => {
fetchAppLocations();
}, []);
// ===================================================== || fetchtenantinfolist || =====================================================
const fetchtenantinfolist = async (id) => {
setLoading(true);
await axios
.get(`${process.env.REACT_APP_URL}/tenants/gettenants/?applocationid=${id}&status=active`)
.then((res) => {
console.log(res);
if (res.data.status) {
let arr = [];
res.data.details.map((val) => {
arr.push({
...val,
label: `${val.tenantname}`
});
});
setTenantlist(arr);
}
setLoading(false);
})
.catch((err) => {
console.log(err); console.log(err);
setLoading(false); setLoading(false);
});
};
// ============================================= || gettenantlocations (branches) || =============================================
const gettenantlocations = async (id) => {
try {
const res = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations/?tenantid=${id}`);
console.log('gettenantlocations', res.data.details);
if (res.data.details.length == 1) {
setIsLocation(true);
setTenantlocations(res.data.details);
setTenanatLocoId(res.data.details[0].locationid);
setTenantlocation(res.data.details[0].locationaddress); //client address
setIsBusiness(true);
} else {
setTenantlocations(res.data.details);
setIsBusiness(false); // became true after select from tenanatLocations
} }
} catch (err) {
console.log('gettenantlocations', err);
} }
}; };
const opentoast = (message) => {
enqueueSnackbar(message, {
variant: 'error',
anchorOrigin: { vertical: 'top', horizontal: 'right' },
autoHideDuration: 2000
});
};
const fetchtenantinfo = async (tid) => { const fetchtenantinfo = async (tid) => {
setLoading(true); setLoading(true);
await axios await axios
@@ -171,103 +288,31 @@ const CreateCustomer = () => {
} }
}, [selectedImage]); }, [selectedImage]);
const { ref: materialRef } = usePlacesWidget({
apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
onPlaceSelected: (place) => {
console.log(place);
setAddress(place.formatted_address);
let city1, zipcode1, state1, suburb1;
for (let i = 0; i < place.address_components.length; i++) {
for (let j = 0; j < place.address_components[i].types.length; j++) {
switch (place.address_components[i].types[j]) {
case 'locality':
city1 = place.address_components[i].long_name;
break;
case 'administrative_area_level_1':
state1 = place.address_components[i].long_name;
break;
case 'postal_code':
zipcode1 = place.address_components[i].long_name;
break;
case 'sublocality':
suburb1 = place.address_components[i].long_name;
break;
}
}
}
setCity(city1 || '');
setState(state1 || '');
setZipcode(zipcode1 || '');
setSuburb(suburb1 || '');
// setAddress(place.formatted_address)
},
// inputAutocompleteValue: "country",
options: {
// componentRestrictions: 'us',
// types: ["establishment"]
types: ['address' || 'geocode']
}
});
const createprofile = async () => { const createprofile = async () => {
console.log('res', businessname, businessno, mobilenumber, emailaddress, address, city, zipcode);
// if (!businessname) {
// opentoast('Fill Business name')
// } else if (!businessno) {
// opentoast('Fill Registration No')
// }
// else
if (!firstname) {
opentoast('Fill Full name');
} else if (!mobilenumber) {
opentoast('Fill Mobile Number');
}
// else if (!emailaddress) {
// opentoast('Fill emailaddress')
// }
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 (!emailaddress) {
// opentoast('Fill emailaddress')
// }
else if (!latlong.lat || !latlong.lng) {
opentoast('Choose valid address');
} else {
let obj = { let obj = {
applocationid: +appId,
tenantid: +localStorage.getItem('tenantid'),
customerid: 0, customerid: 0,
configid: 1, configid: 1,
firstname: firstname, firstname: firstname,
applocationid: tenantinfo.applolcationid,
profileimage: '',
dialcode: '+91', dialcode: '+91',
contactno: mobilenumber, contactno: mobilenumber,
email: emailaddress,
doorno: doorno,
address: pickCust.address,
suburb: pickCust.suburb,
city: pickCust.city,
state: pickCust.state,
postcode: pickCust.postcode,
landmark: landmark,
latitude: startPoint.latitude.toString(),
longitude: startPoint.longitude.toString(),
profileimage: '',
devicetype: '', devicetype: '',
deviceid: '', deviceid: '',
customertoken: '', customertoken: '',
address: address,
suburb: suburb,
city: city,
state: state,
postcode: zipcode,
landmark: landmark,
doorno: doorno,
latitude: latlong.lat.toString(),
longitude: latlong.lng.toString(),
tenantid: parseInt(localStorage.getItem('tenantid')),
email: emailaddress,
primaryaddress: 1 primaryaddress: 1
}; };
console.log(obj); console.log(obj);
setLoading(true); setLoading(true);
@@ -283,10 +328,6 @@ const CreateCustomer = () => {
autoHideDuration: 2000 autoHideDuration: 2000
}); });
navigate('/customers'); navigate('/customers');
// setTimeout(()=>{
// fetchprofiledetails(localStorage.getItem('appuserid'));
// },2000)
} else if (res.data.message == 'Customer Already available') { } else if (res.data.message == 'Customer Already available') {
enqueueSnackbar('Customer Already available', { enqueueSnackbar('Customer Already available', {
variant: 'error', variant: 'error',
@@ -310,146 +351,22 @@ const CreateCustomer = () => {
console.log(err); console.log(err);
setLoading(false); setLoading(false);
} }
}
}; };
// const [experience, setExperience] = useState('0');
// const handleChange = (event) => {
// setExperience(event.target.value);
// };
return ( return (
<> <>
{loading && <Loader />} {loading && <Loader />}
<Grid item xs={12} sx={{ mb: 2 }}> <Grid item xs={12} sx={{ mb: 2 }}>
<Stack direction="row" justifyContent="space-between" alignItems="center"> <Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography variant="h3">Create Customer</Typography> <Typography variant="h3">Create Customer</Typography>
</Stack> </Stack>
</Grid> </Grid>
<MainCard> <MainCard>
<Grid container spacing={3}>
{/* <Grid item xs={12} sm={4} >
<MainCard title="Personal Information" sx={{ height: '100%' }}>
<Grid container spacing={3}> <Grid container spacing={3}>
<Grid item xs={12}> <Grid item xs={12}>
<Stack spacing={2.5} alignItems="center" sx={{ m: 3 }}>
<FormLabel
htmlFor="change-avtar"
sx={{
position: 'relative',
borderRadius: '50%',
overflow: 'hidden',
'&:hover .MuiBox-root': { opacity: 1 },
cursor: 'pointer'
}}
>
<Avatar alt="Avatar 1"
src={avatar}
sx={{ width: 76, height: 76 }} />
<Box
sx={{
position: 'absolute',
top: 0,
left: 0,
backgroundColor: theme.palette.mode === ThemeMode.DARK ? 'rgba(255, 255, 255, .75)' : 'rgba(0,0,0,.65)',
width: '100%',
height: '100%',
opacity: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Stack spacing={0.5} alignItems="center">
<CameraOutlined style={{ color: theme.palette.secondary.lighter, fontSize: '1.5rem' }} />
<Typography sx={{ color: 'secondary.lighter' }} variant="caption">
Upload
</Typography>
</Stack>
</Box>
</FormLabel>
<TextField
type="file"
accept="image/*"
id="change-avtar"
placeholder="Outlined"
variant="outlined"
sx={{ display: 'none' }}
onChange={(e) => setSelectedImage(e.target.files?.[0])}
/>
</Stack>
</Grid>
<Grid item xs={12}
>
</Grid>
<Grid item xs={12}
>
</Grid>
<Grid item xs={12}
>
</Grid>
<Grid item xs={12}
>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-role-name">Role</InputLabel>
<TextField fullWidth
id="personal-role-name" placeholder="Role Name" autoFocus
onChange={(e) => setRole(e.target.value)}
value={role}
autoComplete='off'
/>
</Stack>
</Grid>
</Grid>
</MainCard>
</Grid> */}
<Grid
item
xs={12}
// sm={8}
>
<MainCard
// title="Contact Information"
sx={{ height: '100%' }}
>
<Grid container spacing={3}> <Grid container spacing={3}>
{/* <Grid item xs={12} sm={6}> {/* ===================================================== || Name|| ===================================================== */}
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-first-name">Business Name</InputLabel>
<TextField fullWidth
id="personal-first-name" placeholder="Business Name" autoFocus
onChange={(e) => setBusinessname(e.target.value)}
value={businessname}
autoComplete='off'
/>
</Stack>
</Grid>
<Grid item xs={12} sm={6}> <Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-last-name">Registration No</InputLabel>
<TextField fullWidth
id="personal-last-name" placeholder="Registration No"
onChange={(e) => setBusinessno(e.target.value)}
value={businessno}
autoComplete='off'
/>
</Stack>
</Grid> */}
<Grid item xs={12}>
<Stack spacing={1.25}> <Stack spacing={1.25}>
<InputLabel htmlFor="personal-last-name">Name</InputLabel> <InputLabel htmlFor="personal-last-name">Name</InputLabel>
<TextField <TextField
@@ -462,8 +379,7 @@ const CreateCustomer = () => {
/> />
</Stack> </Stack>
</Grid> </Grid>
{/* <Grid item xs={12} sm={6}> {/* ===================================================== || Phone Number || ===================================================== */}
</Grid> */}
<Grid item xs={12} sm={6}> <Grid item xs={12} sm={6}>
<Stack spacing={1.25}> <Stack spacing={1.25}>
<InputLabel htmlFor="personal-phone">Phone Number</InputLabel> <InputLabel htmlFor="personal-phone">Phone Number</InputLabel>
@@ -474,13 +390,8 @@ const CreateCustomer = () => {
<TextField <TextField
type="number" type="number"
id="personal-phone" id="personal-phone"
// format="##########"
// mask="_"
fullWidth fullWidth
// customInput={TextField}
placeholder="Phone Number" placeholder="Phone Number"
// defaultValue="8654239581"
// onBlur={() => { }}
onChange={(e) => { onChange={(e) => {
if (e.target.value.toString().length <= 10) { if (e.target.value.toString().length <= 10) {
setMobilenumber(e.target.value); setMobilenumber(e.target.value);
@@ -494,6 +405,8 @@ const CreateCustomer = () => {
</Stack> </Stack>
</Stack> </Stack>
</Grid> </Grid>
{/* ===================================================== || Email|| ===================================================== */}
<Grid item xs={12} sm={6}> <Grid item xs={12} sm={6}>
<Stack spacing={1.25}> <Stack spacing={1.25}>
<InputLabel htmlFor="personal-email">Email Address</InputLabel> <InputLabel htmlFor="personal-email">Email Address</InputLabel>
@@ -509,81 +422,7 @@ const CreateCustomer = () => {
/> />
</Stack> </Stack>
</Grid> </Grid>
{/* ===================================================== || door no || ===================================================== */}
<Grid item xs={12}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-address">Address</InputLabel>
<TextField
fullWidth
// defaultValue="Street 110-B Kalians Bag, Dewan, M.P. New York"
id="personal-address"
placeholder="Address"
value={address}
onChange={(e) => setAddress(e.target.value)}
inputRef={materialRef}
/>
</Stack>
</Grid>
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-location">Location</InputLabel>
<TextField
fullWidth
// defaultValue="New York"
id="personal-location"
placeholder="Location"
onChange={(e) => setSuburb(e.target.value)}
value={suburb}
autoComplete="off"
/>
</Stack>
</Grid>
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-zipcode">City</InputLabel>
<TextField
fullWidth
// defaultValue="956754"
// type='number'
id="personal-zipcode"
placeholder="City"
onChange={(e) => setCity(e.target.value)}
value={city}
autoComplete="off"
/>
</Stack>
</Grid>
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-location">State</InputLabel>
<TextField
fullWidth
// defaultValue="New York"
id="personal-location"
placeholder="State"
onChange={(e) => setState(e.target.value)}
value={state}
autoComplete="off"
/>
</Stack>
</Grid>
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-zipcode">Post Code</InputLabel>
<TextField
fullWidth
// defaultValue="956754"
type="number"
id="personal-zipcode"
placeholder="Zipcode"
onChange={(e) => setZipcode(e.target.value)}
value={zipcode}
autoComplete="off"
/>
</Stack>
</Grid>
<Grid item xs={12} sm={6}> <Grid item xs={12} sm={6}>
<Stack spacing={1.25}> <Stack spacing={1.25}>
@@ -599,7 +438,102 @@ const CreateCustomer = () => {
/> />
</Stack> </Stack>
</Grid> </Grid>
{/* ===================================================== || Address || ===================================================== */}
<Grid item xs={12}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-email"> Address</InputLabel>
<TextField
variant="outlined"
id="addressAuto1"
fullWidth
value={inputValue2}
onChange={(e) => setInputValue2(e.target.value)}
InputProps={{
endAdornment: (
<IconButton
onClick={() => {
setInputValue2('');
setPickCust({
...pickCust,
doorno: '',
suburb: '',
city: '',
postcode: '',
landmark: ''
});
setStartPoint({ latitude: 0, longitude: 0 });
}}
size="small"
>
<CloseIcon />
</IconButton>
)
}}
/>
</Stack>
</Grid>
<Grid item xs={12} sm={6}> <Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-location">Location</InputLabel>
<TextField
fullWidth
// defaultValue="New York"
id="personal-location"
placeholder="Location"
onChange={(e) => setPickCust({ ...pickCust, suburb: e.target.value })}
value={pickCust.suburb}
autoComplete="off"
/>
</Stack>
</Grid>
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-zipcode">City</InputLabel>
<TextField
fullWidth
id="personal-zipcode"
placeholder="City"
onChange={(e) => setPickCust({ ...pickCust, city: e.target.value })}
value={pickCust.city}
autoComplete="off"
/>
</Stack>
</Grid>
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-location">State</InputLabel>
<TextField
fullWidth
// defaultValue="New York"
id="personal-location"
placeholder="State"
onChange={(e) => setPickCust({ ...pickCust, state: e.target.value })}
value={pickCust.state}
autoComplete="off"
/>
</Stack>
</Grid>
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-zipcode">Post Code</InputLabel>
<TextField
fullWidth
// defaultValue="956754"
type="number"
id="personal-zipcode"
placeholder="Zipcode"
onChange={(e) => setPickCust({ ...pickCust, postcode: e.target.value })}
value={pickCust.postcode}
autoComplete="off"
/>
</Stack>
</Grid>
<Grid item xs={12}>
<Stack spacing={1.25}> <Stack spacing={1.25}>
<InputLabel htmlFor="personal-email">Landmark</InputLabel> <InputLabel htmlFor="personal-email">Landmark</InputLabel>
<TextField <TextField
@@ -615,32 +549,35 @@ const CreateCustomer = () => {
</Stack> </Stack>
</Grid> </Grid>
</Grid> </Grid>
</MainCard>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={2}> <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={2}>
<Button <Button
variant="contained" variant="contained"
onClick={() => { onClick={() => {
if (firstname === '') { if (appId === '') {
opentoast('Select Applocation ');
} else if (tid === '') {
opentoast('Select Tenant');
} else if (firstname === '') {
opentoast('Enter Name'); opentoast('Enter Name');
} else if (mobilenumber === '') { } else if (mobilenumber === '') {
opentoast('Enter Mobile Number '); opentoast('Enter Mobile Number ');
} else if (address === '') { } else if (address === '') {
opentoast('Enter Address '); opentoast('Enter Address ');
} else if (city === '') { } else if (pickCust.city === '') {
opentoast('Enter City '); opentoast('Enter City ');
} else if (state === '') { } else if (pickCust.state === '') {
opentoast('Enter State '); opentoast('Enter State ');
} else if (suburb === '') { } else if (pickCust.suburb === '') {
opentoast('Enter location '); opentoast('Enter location ');
} else if (zipcode === '') { } else if (pickCust.postcode === '') {
opentoast('Enter Post Code '); opentoast('Enter Post Code ');
} else if (landmark === '') { } else if (landmark === '') {
opentoast('Enter Land Mark '); opentoast('Enter Land Mark ');
} else if (latlong.lat === '') { } else if (pickCust.latitude === '') {
opentoast('Invalid latitude '); opentoast('Invalid latitude ');
} else if (latlong.lng === '') { } else if (pickCust.longitude === '') {
opentoast('Invaiid Longitude '); opentoast('Invaiid Longitude ');
} else { } else {
createprofile(); createprofile();

View File

@@ -1352,23 +1352,6 @@ const Createorder1 = () => {
Pickup Details Pickup Details
</Typography> </Typography>
<Stack direction={'row'} spacing={1} alignItems={'center'}> <Stack direction={'row'} spacing={1} alignItems={'center'}>
{/* <Typography>Customer</Typography>
<Switch
size="small"
checked={pickupswitch}
onChange={(e, val) => {
if (val) {
setPickupswitch(true);
setDeliverytype('B');
setTenantinfo({});
} else {
setPickupswitch(false);
setTenantinfo({});
setDeliverytype('C');
}
}}
/>
<Typography>Business</Typography> */}
<Button <Button
variant="outlined" variant="outlined"
sx={{ sx={{
@@ -1394,64 +1377,6 @@ const Createorder1 = () => {
</Button> </Button>
</Stack> </Stack>
</Stack> </Stack>
{/* new1 */}
{/* <Autocomplete
disabled={!isLocation}
fullWidth
disablePortal
id="combo-box-demo"
// options={customerlist}
options={clientdetailarr}
getOptionLabel={(option) => `${option.firstname} (${option.contactno})`}
sx={{ mt: 2, mb: 1 }}
renderInput={(params) => (
<TextField
{...params}
label="Search"
onChange={(e) => {
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) ? (
<Stack sx={{ width: '100%', display: 'flex', alignItems: 'end', justifyContent: 'end' }}>
<Chip
label={'OK'}
sx={{
width: 50,
cursor: 'pointer',
'&:hover': { background: theme.palette.primary.main, color: 'white' }
}}
onClick={() => {
setPickCust({ ...pickCust, contactno: searchCustList });
handleOkClick1();
setSearchCustList('');
}}
/>
</Stack>
) : null
}
/> */}
</Grid> </Grid>
<Grid item xs={12} sx={{}}> <Grid item xs={12} sx={{}}>