625 lines
26 KiB
JavaScript
625 lines
26 KiB
JavaScript
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';
|
|
|
|
// third-party
|
|
// import { PatternFormat } from 'react-number-format';
|
|
|
|
// project import
|
|
import Avatar from 'components/@extended/Avatar';
|
|
import MainCard from 'components/MainCard';
|
|
import {
|
|
// facebookColor, linkedInColor, twitterColor
|
|
ThemeMode
|
|
} from 'config';
|
|
import axios from 'axios';
|
|
// assets
|
|
import {
|
|
// FacebookFilled, LinkedinFilled, TwitterSquareFilled,
|
|
CameraOutlined
|
|
} from '@ant-design/icons';
|
|
import { usePlacesWidget } from "react-google-autocomplete";
|
|
import Loader from 'components/Loader';
|
|
import Geocode from "react-geocode";
|
|
import { enqueueSnackbar } from 'notistack';
|
|
import { useNavigate } from 'react-router';
|
|
// import { setLocationType } from 'react-geocode';
|
|
|
|
// 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 Createclient = () => {
|
|
const theme = useTheme();
|
|
const [selectedImage, setSelectedImage] = useState(undefined);
|
|
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 [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 [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)
|
|
|
|
useEffect(() => {
|
|
// fetchprofiledetails(localStorage.getItem('appuserid'));
|
|
// fetchprofiledetails(181);
|
|
if(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
|
|
})
|
|
console.log(response);
|
|
|
|
|
|
}
|
|
|
|
}, (error) => {
|
|
console.log(error)
|
|
}
|
|
);
|
|
|
|
} catch (err) {
|
|
console.log(err)
|
|
|
|
}
|
|
|
|
}, [address])
|
|
|
|
const opentoast = (message) => {
|
|
|
|
enqueueSnackbar(message, {
|
|
variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
|
autoHideDuration: 2000
|
|
})
|
|
// console.log(alertmessage)
|
|
}
|
|
|
|
const fetchprofiledetails = async (userid) => {
|
|
if (userid) {
|
|
setLoading(true)
|
|
try {
|
|
await axios.get(`${process.env.REACT_APP_URL2}/tenants/getclient?id=${userid}`)
|
|
.then((res) => {
|
|
console.log(res)
|
|
if (res.data.message === 'Successful') {
|
|
let res1 = res.data.details;
|
|
setProfiledetails(res1)
|
|
setBusinessname(res1.tenantname)
|
|
setBusinessno(res1.registrationno);
|
|
setMobilenumber(res1.contactno);
|
|
setPrimarycontact(res1.primarycontact)
|
|
setEmailaddress(res1.primaryemail);
|
|
setAddress(res1.address);
|
|
setCity(res1.city);
|
|
setZipcode(res1.postcode);
|
|
setState(res1.state);
|
|
setSuburb(res1.suburb);
|
|
setLatlong({
|
|
lat: res1.latitude,
|
|
lng: res1.longitude
|
|
})
|
|
}
|
|
setLoading(false)
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
setLoading(false)
|
|
|
|
})
|
|
|
|
} catch (err) {
|
|
console.log(err)
|
|
setLoading(false)
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
const fetchtenantinfo = async (tid) => {
|
|
setLoading(true)
|
|
await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`)
|
|
.then((res) => {
|
|
console.log(res)
|
|
if (res.data.status) {
|
|
setTenantinfo(res.data.details);
|
|
}
|
|
setLoading(false)
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
setLoading(false)
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (selectedImage) {
|
|
setAvatar(URL.createObjectURL(selectedImage));
|
|
}
|
|
}, [selectedImage]);
|
|
|
|
|
|
|
|
const { ref: materialRef } = usePlacesWidget({
|
|
apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
|
|
onPlaceSelected: (place) => {
|
|
|
|
console.log(place)
|
|
|
|
setAddress(place.formatted_address)
|
|
let city1, zipcode1, state1,suburb1;
|
|
for (let i = 0; i < place.address_components.length; i++) {
|
|
for (let j = 0; j < place.address_components[i].types.length; j++) {
|
|
switch (place.address_components[i].types[j]) {
|
|
case "locality":
|
|
city1 = place.address_components[i].long_name;
|
|
break;
|
|
case "administrative_area_level_1":
|
|
state1 = place.address_components[i].long_name;
|
|
break;
|
|
case "postal_code":
|
|
zipcode1 = place.address_components[i].long_name;
|
|
break;
|
|
case "sublocality":
|
|
suburb1 = place.address_components[i].long_name;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
setCity(city1 || '')
|
|
setState(state1 || '');
|
|
setZipcode(zipcode1 || '');
|
|
setSuburb(suburb1 || '')
|
|
|
|
// setAddress(place.formatted_address)
|
|
},
|
|
// inputAutocompleteValue: "country",
|
|
options: {
|
|
// componentRestrictions: 'us',
|
|
// types: ["establishment"]
|
|
types: ['address' || 'geocode']
|
|
},
|
|
});
|
|
|
|
|
|
|
|
const 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 (!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={
|
|
"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'))
|
|
}
|
|
|
|
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: 2000
|
|
})
|
|
navigate('/clients')
|
|
// 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' },
|
|
autoHideDuration: 2000
|
|
})
|
|
}
|
|
setLoading(false)
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
|
|
setLoading(false)
|
|
enqueueSnackbar(err.message, {
|
|
variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
|
autoHideDuration: 2000
|
|
})
|
|
|
|
})
|
|
|
|
} catch (err) {
|
|
console.log(err)
|
|
setLoading(false)
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
// const [experience, setExperience] = useState('0');
|
|
|
|
// const handleChange = (event) => {
|
|
// setExperience(event.target.value);
|
|
// };
|
|
return <>
|
|
{(loading) && <Loader />}
|
|
|
|
<Grid item xs={12}
|
|
sx={{ mb: 2 }}
|
|
>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
|
<Typography variant="h3">Create Client</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
<MainCard>
|
|
<Grid container spacing={3}>
|
|
<Grid item xs={12} sm={4} >
|
|
<MainCard title="Personal Information" sx={{ height: '100%' }}>
|
|
<Grid container spacing={3}>
|
|
<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}
|
|
>
|
|
<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}
|
|
>
|
|
<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}>
|
|
<InputLabel htmlFor="personal-last-name">Name</InputLabel>
|
|
<TextField fullWidth
|
|
id="personal-last-name" placeholder="Name"
|
|
onChange={(e) => setFirstname(e.target.value)}
|
|
value={firstname}
|
|
autoComplete='off'
|
|
|
|
/>
|
|
</Stack>
|
|
</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 item xs={12}
|
|
>
|
|
<Stack spacing={1.25} >
|
|
<InputLabel htmlFor="personal-phone">Phone Number</InputLabel>
|
|
<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'
|
|
// format="##########"
|
|
// mask="_"
|
|
fullWidth
|
|
// customInput={TextField}
|
|
placeholder="Phone Number"
|
|
// defaultValue="8654239581"
|
|
// onBlur={() => { }}
|
|
onChange={(e) => {
|
|
if(e.target.value.toString().length <= 10){
|
|
setMobilenumber(e.target.value)
|
|
}
|
|
}}
|
|
value={mobilenumber}
|
|
autoComplete='off'
|
|
// disabled
|
|
sx={{cursor: 'not-allowed'}}
|
|
/>
|
|
</Stack>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid item xs={12}
|
|
// sm={6}
|
|
>
|
|
<Stack spacing={1.25}>
|
|
<InputLabel htmlFor="personal-email">Email Address</InputLabel>
|
|
<TextField type="email" fullWidth
|
|
// defaultValue="stebin.ben@gmail.com"
|
|
id="personal-email" placeholder="Email Address"
|
|
onChange={(e) => setEmailaddress(e.target.value)}
|
|
value={emailaddress}
|
|
autoComplete='off'
|
|
|
|
/>
|
|
</Stack>
|
|
</Grid>
|
|
|
|
|
|
<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">Suburb</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}>
|
|
<Stack spacing={1.25}>
|
|
<InputLabel htmlFor="personal-location">Door No</InputLabel>
|
|
<TextField fullWidth
|
|
// defaultValue="New York"
|
|
id="personal-location" placeholder="Door No"
|
|
onChange={(e) => setDoorno(e.target.value)}
|
|
value={doorno}
|
|
autoComplete='off'
|
|
|
|
/>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<Stack spacing={1.25}>
|
|
<InputLabel htmlFor="personal-email">Landmark</InputLabel>
|
|
<TextField type="email" fullWidth
|
|
// defaultValue="stebin.ben@gmail.com"
|
|
id="personal-email" placeholder="Landmark"
|
|
onChange={(e) => setLandmark(e.target.value)}
|
|
value={landmark}
|
|
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>
|
|
</Stack>
|
|
|
|
</Grid>
|
|
</Grid>
|
|
</MainCard>
|
|
</>
|
|
}
|
|
|
|
export default Createclient; |