createCustomer updated

This commit is contained in:
joshikannan
2024-01-22 16:25:54 +05:30
parent 183a1870e1
commit bea9164791
2 changed files with 502 additions and 485 deletions

View File

@@ -2,11 +2,7 @@ import { useEffect, useState } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import {
Box, Button, FormLabel, Grid, InputLabel,
MenuItem,
Select, Stack, TextField, Typography
} from '@mui/material';
import { Box, Button, FormLabel, Grid, InputLabel, MenuItem, Select, Stack, TextField, Typography } from '@mui/material';
// third-party
// import { PatternFormat } from 'react-number-format';
@@ -24,9 +20,9 @@ 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 Geocode from "react-geocode";
import Geocode from 'react-geocode';
import { enqueueSnackbar } from 'notistack';
import { useNavigate } from 'react-router';
// import { setLocationType } from 'react-geocode';
@@ -47,96 +43,87 @@ import { useNavigate } from 'react-router';
const Createclient = () => {
const theme = useTheme();
const [selectedImage, setSelectedImage] = useState(undefined);
const [avatar, setAvatar] = useState(
const [avatar, setAvatar] = useState();
// avatarImage(`./default.png`)
);
const [businessname, setBusinessname] = useState('');
const [businessno, setBusinessno] = useState('');
// const [role, setRole] = useState('');
const [mobilenumber, setMobilenumber] = useState('')
const [emailaddress, setEmailaddress] = useState('')
const [city, setCity] = useState('')
const [mobilenumber, setMobilenumber] = useState('');
const [emailaddress, setEmailaddress] = useState('');
const [city, setCity] = useState('');
const [zipcode, setZipcode] = useState('');
const [address, setAddress] = useState('');
const [state, setState] = useState('');
const [suburb, setSuburb] = useState('');
const [latlong, setLatlong] = useState({});
const [profiledetails, setProfiledetails] = useState({});
const [primarycontact, setPrimarycontact] = useState('')
const [primarycontact, setPrimarycontact] = useState('');
const [firstname, setFirstname] = useState('');
const [doorno, setDoorno] = useState('');
const [landmark, setLandmark] = useState('');
const [tenantinfo, setTenantinfo] = useState({});
const navigate = useNavigate();
Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY);
// Geocode.setApiKey('AIzaSyCF4KatYCI3vqz1_H3kiHeyS3yCMfYToh8');
const [loading, setLoading] = useState(false)
const [loading, setLoading] = useState(false);
useEffect(() => {
// fetchprofiledetails(localStorage.getItem('appuserid'));
// fetchprofiledetails(181);
if (localStorage.getItem('tenantid')) {
fetchtenantinfo(localStorage.getItem('tenantid'))
fetchtenantinfo(localStorage.getItem('tenantid'));
}
}, [])
}, []);
useEffect(() => {
try {
Geocode.fromAddress(address).then(
(response) => {
if (response.status == 'OK') {
const { lat, lng } = response.results[0].geometry.location;
setLatlong({
lat, lng
})
lat,
lng
});
console.log(response);
}
}, (error) => {
console.log(error)
},
(error) => {
console.log(error);
}
);
} catch (err) {
console.log(err)
console.log(err);
}
}, [address])
}, [address]);
const opentoast = (message) => {
enqueueSnackbar(message, {
variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' },
variant: 'error',
anchorOrigin: { vertical: 'top', horizontal: 'right' },
autoHideDuration: 2000
})
});
// console.log(alertmessage)
}
};
const fetchprofiledetails = async (userid) => {
if (userid) {
setLoading(true)
setLoading(true);
try {
await axios.get(`${process.env.REACT_APP_URL2}/tenants/getclient?id=${userid}`)
await axios
.get(`${process.env.REACT_APP_URL2}/tenants/getclient?id=${userid}`)
.then((res) => {
console.log(res)
console.log(res);
if (res.data.message === 'Successful') {
let res1 = res.data.details;
setProfiledetails(res1)
setBusinessname(res1.tenantname)
setProfiledetails(res1);
setBusinessname(res1.tenantname);
setBusinessno(res1.registrationno);
setMobilenumber(res1.contactno);
setPrimarycontact(res1.primarycontact)
setPrimarycontact(res1.primarycontact);
setEmailaddress(res1.primaryemail);
setAddress(res1.address);
setCity(res1.city);
@@ -146,37 +133,37 @@ const Createclient = () => {
setLatlong({
lat: res1.latitude,
lng: res1.longitude
})
});
}
setLoading(false)
}).catch((err) => {
console.log(err)
setLoading(false)
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
} catch (err) {
console.log(err)
setLoading(false)
}
console.log(err);
setLoading(false);
}
}
};
const fetchtenantinfo = async (tid) => {
setLoading(true)
await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`)
setLoading(true);
await axios
.get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`)
.then((res) => {
console.log(res)
console.log('fetchtenantinfo', res.data.details);
if (res.data.status) {
setTenantinfo(res.data.details);
}
setLoading(false)
}).catch((err) => {
console.log(err)
setLoading(false)
setLoading(false);
})
}
.catch((err) => {
console.log(err);
setLoading(false);
});
};
useEffect(() => {
if (selectedImage) {
@@ -184,38 +171,35 @@ const Createclient = () => {
}
}, [selectedImage]);
const { ref: materialRef } = usePlacesWidget({
apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
onPlaceSelected: (place) => {
console.log(place);
console.log(place)
setAddress(place.formatted_address)
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":
case 'locality':
city1 = place.address_components[i].long_name;
break;
case "administrative_area_level_1":
case 'administrative_area_level_1':
state1 = place.address_components[i].long_name;
break;
case "postal_code":
case 'postal_code':
zipcode1 = place.address_components[i].long_name;
break;
case "sublocality":
case 'sublocality':
suburb1 = place.address_components[i].long_name;
break;
}
}
}
setCity(city1 || '')
setCity(city1 || '');
setState(state1 || '');
setZipcode(zipcode1 || '');
setSuburb(suburb1 || '')
setSuburb(suburb1 || '');
// setAddress(place.formatted_address)
},
@@ -224,13 +208,11 @@ const Createclient = () => {
// componentRestrictions: 'us',
// types: ["establishment"]
types: ['address' || 'geocode']
},
}
});
const createprofile = async () => {
console.log('res', businessname, businessno, mobilenumber, emailaddress, address, city, zipcode)
console.log('res', businessname, businessno, mobilenumber, emailaddress, address, city, zipcode);
// if (!businessname) {
// opentoast('Fill Business name')
@@ -239,108 +221,108 @@ const Createclient = () => {
// }
// else
if (!firstname) {
opentoast('Fill Full name')
opentoast('Fill Full name');
} else if (!mobilenumber) {
opentoast('Fill Mobile Number')
opentoast('Fill Mobile Number');
}
// else if (!emailaddress) {
// opentoast('Fill emailaddress')
// }
else if (!address) {
opentoast('Fill Address')
opentoast('Fill Address');
} else if (!city) {
opentoast('Fill City')
opentoast('Fill City');
} else if (!zipcode) {
opentoast('Fill post code')
opentoast('Fill post code');
} else if (!suburb) {
opentoast('Fill suburb')
opentoast('Fill suburb');
}
// else if (!emailaddress) {
// opentoast('Fill emailaddress')
// }
else if (!latlong.lat || !latlong.lng) {
opentoast('Choose valid address')
opentoast('Choose valid address');
} else {
let obj = {
"customerid": 0,
"configid": 1,
"firstname": firstname,
"applocationid": tenantinfo.applolcationid,
"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": parseInt(localStorage.getItem('tenantid')),
"email" : emailaddress,
"primaryaddress":1
}
customerid: 0,
configid: 1,
firstname: firstname,
applocationid: tenantinfo.applolcationid,
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: parseInt(localStorage.getItem('tenantid')),
email: emailaddress,
primaryaddress: 1
};
console.log(obj)
console.log(obj);
setLoading(true)
setLoading(true);
try {
await axios.post(`${process.env.REACT_APP_URL}/customers/create`, obj)
await axios
.post(`${process.env.REACT_APP_URL}/customers/create`, obj)
.then((res) => {
console.log(res)
console.log(res);
if (res.data.status) {
enqueueSnackbar(' Created Successfully ', {
variant: 'success', anchorOrigin: { vertical: 'top', horizontal: 'right' },
variant: 'success',
anchorOrigin: { vertical: 'top', horizontal: 'right' },
autoHideDuration: 2000
})
navigate('/customers')
});
navigate('/customers');
// setTimeout(()=>{
// fetchprofiledetails(localStorage.getItem('appuserid'));
// },2000)
} else if (res.data.message == "Customer Already available") {
enqueueSnackbar("Customer Already available", {
variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' },
} else if (res.data.message == 'Customer Already available') {
enqueueSnackbar('Customer Already available', {
variant: 'error',
anchorOrigin: { vertical: 'top', horizontal: 'right' },
autoHideDuration: 2000
})
});
}
setLoading(false)
}).catch((err) => {
console.log(err)
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false)
setLoading(false);
enqueueSnackbar(err.message, {
variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' },
variant: 'error',
anchorOrigin: { vertical: 'top', horizontal: 'right' },
autoHideDuration: 2000
})
})
});
});
} catch (err) {
console.log(err)
setLoading(false)
}
console.log(err);
setLoading(false);
}
}
};
// const [experience, setExperience] = useState('0');
// const handleChange = (event) => {
// setExperience(event.target.value);
// };
return <>
{(loading) && <Loader />}
return (
<>
{loading && <Loader />}
<Grid item xs={12}
sx={{ mb: 2 }}
>
<Grid item xs={12} sx={{ mb: 2 }}>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography variant="h3">Create Customer</Typography>
</Stack>
@@ -434,13 +416,15 @@ const Createclient = () => {
</Grid>
</MainCard>
</Grid> */}
<Grid item xs={12}
<Grid
item
xs={12}
// sm={8}
>
<MainCard
// title="Contact Information"
sx={{ height: '100%' }}>
sx={{ height: '100%' }}
>
<Grid container spacing={3}>
{/* <Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
@@ -468,30 +452,28 @@ const Createclient = () => {
<Grid item xs={12}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-last-name">Name</InputLabel>
<TextField fullWidth
id="personal-last-name" placeholder="Name"
<TextField
fullWidth
id="personal-last-name"
placeholder="Name"
onChange={(e) => setFirstname(e.target.value)}
value={firstname}
autoComplete='off'
autoComplete="off"
/>
</Stack>
</Grid>
{/* <Grid item xs={12} sm={6}>
</Grid> */}
<Grid item xs={12} sm={6}
>
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-phone">Phone Number</InputLabel>
<Stack direction="row" justifyContent="space-between" alignItems="center"
spacing={2}>
<Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
<Select defaultValue="+1" disabled sx={{ cursor: 'not-allowed' }}>
<MenuItem value="+1">+91</MenuItem>
</Select>
<TextField
type='number'
id='personal-phone'
type="number"
id="personal-phone"
// format="##########"
// mask="_"
fullWidth
@@ -501,34 +483,33 @@ const Createclient = () => {
// onBlur={() => { }}
onChange={(e) => {
if (e.target.value.toString().length <= 10) {
setMobilenumber(e.target.value)
setMobilenumber(e.target.value);
}
}}
value={mobilenumber}
autoComplete='off'
autoComplete="off"
// disabled
sx={{ cursor: 'not-allowed' }}
/>
</Stack>
</Stack>
</Grid>
<Grid item xs={12}
sm={6}
>
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-email">Email Address</InputLabel>
<TextField type="email" fullWidth
<TextField
type="email"
fullWidth
// defaultValue="stebin.ben@gmail.com"
id="personal-email" placeholder="Email Address"
id="personal-email"
placeholder="Email Address"
onChange={(e) => setEmailaddress(e.target.value)}
value={emailaddress}
autoComplete='off'
autoComplete="off"
/>
</Stack>
</Grid>
<Grid item xs={12}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-address">Address</InputLabel>
@@ -547,27 +528,29 @@ const Createclient = () => {
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-location">Location</InputLabel>
<TextField fullWidth
<TextField
fullWidth
// defaultValue="New York"
id="personal-location" placeholder="Location"
id="personal-location"
placeholder="Location"
onChange={(e) => setSuburb(e.target.value)}
value={suburb}
autoComplete='off'
autoComplete="off"
/>
</Stack>
</Grid>
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-zipcode">City</InputLabel>
<TextField fullWidth
<TextField
fullWidth
// defaultValue="956754"
// type='number'
id="personal-zipcode" placeholder="City"
id="personal-zipcode"
placeholder="City"
onChange={(e) => setCity(e.target.value)}
value={city}
autoComplete='off'
autoComplete="off"
/>
</Stack>
</Grid>
@@ -575,27 +558,29 @@ const Createclient = () => {
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-location">State</InputLabel>
<TextField fullWidth
<TextField
fullWidth
// defaultValue="New York"
id="personal-location" placeholder="State"
id="personal-location"
placeholder="State"
onChange={(e) => setState(e.target.value)}
value={state}
autoComplete='off'
autoComplete="off"
/>
</Stack>
</Grid>
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-zipcode">Post Code</InputLabel>
<TextField fullWidth
<TextField
fullWidth
// defaultValue="956754"
type='number'
id="personal-zipcode" placeholder="Zipcode"
type="number"
id="personal-zipcode"
placeholder="Zipcode"
onChange={(e) => setZipcode(e.target.value)}
value={zipcode}
autoComplete='off'
autoComplete="off"
/>
</Stack>
</Grid>
@@ -603,44 +588,73 @@ const Createclient = () => {
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-location">Door No</InputLabel>
<TextField fullWidth
<TextField
fullWidth
// defaultValue="New York"
id="personal-location" placeholder="Door No"
id="personal-location"
placeholder="Door No"
onChange={(e) => setDoorno(e.target.value)}
value={doorno}
autoComplete='off'
autoComplete="off"
/>
</Stack>
</Grid>
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-email">Landmark</InputLabel>
<TextField type="email" fullWidth
<TextField
type="email"
fullWidth
// defaultValue="stebin.ben@gmail.com"
id="personal-email" placeholder="Landmark"
id="personal-email"
placeholder="Landmark"
onChange={(e) => setLandmark(e.target.value)}
value={landmark}
autoComplete='off'
autoComplete="off"
/>
</Stack>
</Grid>
</Grid>
</MainCard>
</Grid>
<Grid item xs={12}>
<Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={2}>
<Button variant="contained"
onClick={() => createprofile()}
>Create</Button>
<Button
variant="contained"
onClick={() => {
if (firstname === '') {
opentoast('Enter Name');
} else if (mobilenumber === '') {
opentoast('Enter Mobile Number ');
} else if (address === '') {
opentoast('Enter Address ');
} else if (city === '') {
opentoast('Enter City ');
} else if (state === '') {
opentoast('Enter State ');
} else if (suburb === '') {
opentoast('Enter location ');
} else if (zipcode === '') {
opentoast('Enter Post Code ');
} else if (landmark === '') {
opentoast('Enter Land Mark ');
} else if (latlong.lat === '') {
opentoast('Invalid latitude ');
} else if (latlong.lng === '') {
opentoast('Invaiid Longitude ');
} else {
createprofile();
}
}}
>
Create
</Button>
</Stack>
</Grid>
</Grid>
</MainCard>
</>
}
);
};
export default Createclient;

View File

@@ -746,6 +746,9 @@ const Createorder1 = () => {
console.log('fetchTenantPricing error', error);
}
};
useEffect(() => {
fetchTenantPricing();
}, []);
useEffect(() => {
console.log('startPoint', startPoint);