From f61be9285d6f3c7bc78d816ff2d6e9d57a3bf381 Mon Sep 17 00:00:00 2001 From: joshikannan Date: Wed, 24 Apr 2024 15:37:30 +0530 Subject: [PATCH] multipleorders --- src/pages/nearle/orders/multipleOrders.js | 1148 ++++++++++++++++++++- 1 file changed, 1147 insertions(+), 1 deletion(-) diff --git a/src/pages/nearle/orders/multipleOrders.js b/src/pages/nearle/orders/multipleOrders.js index feec990..9ab46ee 100644 --- a/src/pages/nearle/orders/multipleOrders.js +++ b/src/pages/nearle/orders/multipleOrders.js @@ -1,7 +1,1153 @@ import React from 'react'; +import Loader from 'components/Loader'; +import { useEffect, useState, useRef, Fragment } from 'react'; +import { useTheme } from '@mui/material/styles'; +import MainCard from 'components/MainCard'; +import axios from 'axios'; +import ClearIcon from '@mui/icons-material/Clear'; +import { SearchOutlined, CloseOutlined } from '@ant-design/icons'; +import { Empty } from 'antd'; +import MyLocationIcon from '@mui/icons-material/MyLocation'; +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 dayjs from 'dayjs'; +var utc = require('dayjs/plugin/utc'); +dayjs.extend(utc); +import { enqueueSnackbar } from 'notistack'; +import { useNavigate } from 'react-router'; + +import { + FormControl, + InputAdornment, + Grid, + Typography, + Stack, + Box, + Button, + TextField, + Autocomplete, + CardActions, + Chip, + Avatar, + Divider, + Dialog, + DialogTitle, + DialogContent, + Checkbox, + DialogActions, + CircularProgress, + ButtonGroup, + FormLabel, + IconButton, + Drawer, + InputLabel, + Select, + MenuItem, + Switch, + CardHeader, + Card, + OutlinedInput, + FormGroup, + FormControlLabel, + Table, + TableContainer, + TableCell, + TableBody, + TableRow, + Paper, + TableHead +} from '@mui/material'; +import { log } from 'util'; const MultipleOrders = () => { - return
MultipleOrders
; + const navigate = useNavigate(); + const theme = useTheme(); + const [locaName, setLocoName] = useState('Select Location'); + const [locations, setLocations] = useState([]); + const [tenantlist, setTenantlist] = useState([]); + const [loading, setLoading] = useState(false); + const [btnLoading, setBtnLoading] = useState(false); + const [appId, setAppId] = useState(0); + const [isAppLocation, setIsAppLocation] = useState(false); + const [isBusiness, setIsBusiness] = useState(false); + const [isClient, setisclient] = useState(false); + const [tenantLocations, setTenantlocations] = useState([]); + const userid = localStorage.getItem('userid'); + const tenId = localStorage.getItem('tenantid'); + const [tenantid, setTenantid] = useState(); + const [tid, setTid] = useState(0); + const [tenanatLocoId, setTenanatLocoId] = useState(localStorage.getItem('locationid')); + const [tenantlocation, setTenantlocation] = useState(''); + const [isLocation, setIsLocation] = useState(false); + const [basePrice, setBasePrice] = useState(0); + const [pricePerKm, setPricePerKm] = useState(0); + const [minKm, setMinKm] = useState(0); + const [tenantinfo, setTenantinfo] = useState({}); + const [pickCust, setPickCust] = useState({}); + const [dropCust, setDropCust] = useState([]); + const [isCustomerOpen, setIsCustomerOpen] = useState(false); + const [searchCustList, setSearchCustList] = useState(''); + const [customerlist, setCustomerlist] = useState([]); + const [clientdetail, setClientdetail] = useState([]); + const [appLocaLat, setAppLocaLat] = useState(); + const [appLocaLng, setAppLocaLng] = useState(); + const [appLocaRadius, setAppLocaRadius] = useState(); + const [startdate, setStartdate] = useState(dayjs().format('MM-DD-YYYY')); + const [timeslotarr, setTimeslotarr] = useState([]); + const [showDistance, setShowDistance] = useState(false); + const [subCat, setSubCat] = useState([]); + const [subCatName, setSubCatName] = useState('Select '); + const [subCatId, setSubCatId] = useState(0); + const [weight, setWeight] = useState(''); + const [selectedCatChip, setSelectedCatChip] = useState(null); + const [isSms, setIsSms] = useState(0); + const [starttime, setStatrttime] = useState(); + const [endtime, setEndtime] = useState(); + const [selectedtime, setSelectedtime] = useState(''); + const [distance, setDistance] = useState(0); + const [alertmessage, setAlertmessage] = useState(''); + const [otherinstructions, setOtherinstructions] = useState(''); + const [totalCharge, setTotalCharge] = useState(0); + const [admintoken, setAdmintoken] = useState(); + const [tenant, setTenant] = useState(0); + const [totaldist, settotaldist] = useState(0); + const [totalAmt, settotalAmt] = useState(0); + + // =============================================== || chipStyle ( time slot) || =============================================== + 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 handleChipClick = (chipLabel) => { + setSelectedCatChip(chipLabel); + }; + + // =============================================== || opentoast || =============================================== + const opentoast = (message, variant, time) => { + enqueueSnackbar(message, { + variant: variant, + anchorOrigin: { vertical: 'top', horizontal: 'right' }, + autoHideDuration: time ? time : 1500 + }); + console.log(alertmessage); + }; + // ==============================|| 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) { + 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); + setLoading(false); + }); + }; + // ============================================= || fetchTenantPricing || ============================================= + + const fetchTenantPricing = async (id) => { + try { + const pricingResponse = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantpricing/?tenantid=${tenId}`); + console.log('pricingResponse', pricingResponse.data.details); + setBasePrice(pricingResponse.data.details.baseprice); + setPricePerKm(pricingResponse.data.details.priceperkm); + setMinKm(pricingResponse.data.details.minkm); + } catch (error) { + console.log('fetchTenantPricing error', error); + } + }; + useEffect(() => { + fetchTenantPricing(); + }, []); + // ============================================= || 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); + setPickCust(res.data.details[0]); + 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); + } + }; + useEffect(() => { + gettenantlocations(tenId); + }, []); + // ========================================================= || clientdetails || ========================================================= + const clientdetails = async () => { + try { + let url = + searchCustList == '' + ? `${process.env.REACT_APP_URL}/customers/gettenantcustomers/?tenantid=${tenId}&pageno=1&pagesize=10` + : `${process.env.REACT_APP_URL}/customers/search/?tenantid=${tenId}&keyword=${searchCustList}`; + await axios + .get(url) + .then((res) => { + if (res.data.status) { + console.log('clientdetails', res.data.details); + + setClientdetail(res.data.details); + setCustomerlist(res.data.details); + let arr = []; + res.data.details.map((val) => { + arr.push({ + label: `${val.firstname} | ${val.contactno}`, + ...val + }); + }); + } + }) + .catch((err) => { + console.log(err); + opentoast('server error', 'warning'); + }); + } catch (err) { + console.log(err); + } + }; + useEffect(() => { + if (tenId) { + clientdetails(); + } + }, [searchCustList.length > 3, searchCustList == '', tenId]); + + // ========================================================= || calculateTotal(dist , charge) || ========================================================= + const calculateTotal = () => { + let a1 = 0; + let a2 = 0; + dropCust.map((customer) => { + a1 += customer.distance; + a2 += customer.totalcharge; + }); + settotaldist(a1); + settotalAmt(a2); + }; + useEffect(() => { + calculateTotal(); + }, [dropCust]); + + // ========================================================= || handleCheckboxChange || ========================================================= + const handleCheckboxChange = async (event, customer) => { + if (event.target.checked) { + // If the checkbox is checked, calculate the distance and add the customer + try { + const obj = await calculateDistance(customer); + const { roundedDistance, totalcharge } = obj; + // Create a new customer object with the distance property + const updatedCustomer = { + ...customer, + distance: roundedDistance, + totalcharge: totalcharge + }; + + // Add the updated customer object to dropCust + setDropCust((prevDropCust) => [...prevDropCust, updatedCustomer]); + + // Log the rounded distance + console.log(`Rounded Distance: ${roundedDistance} km`); + } catch (error) { + console.error('Failed to calculate distance:', error); + } + } else { + // If the checkbox is unchecked, remove the customer from dropCust + setDropCust((prevDropCust) => { + return prevDropCust.filter((cust) => cust.customerid !== customer.customerid); + }); + } + }; + + // ========================================================= || calculateDistance || ========================================================= + const calculateDistance = async (customer) => { + const service = new google.maps.DistanceMatrixService(); + + // Helper function to get the distance matrix + const getDistanceMatrix = (origins, destinations) => { + return new Promise((resolve, reject) => { + service.getDistanceMatrix( + { + origins: [new google.maps.LatLng(origins.locationlatitude, origins.locationlong)], + destinations: [new google.maps.LatLng(destinations.latitude, destinations.longitude)], + travelMode: 'DRIVING', + unitSystem: google.maps.UnitSystem.METRIC // Distances in metric units (km) + }, + (response, status) => { + if (status === 'OK') { + resolve(response); + } else { + reject(new Error(`Error calculating distance: ${status}`)); + } + } + ); + }); + }; + + try { + // Call getDistanceMatrix and wait for the response + const response = await getDistanceMatrix(pickCust, customer); + + // Extract distance from the first result + const distanceInMeters = response.rows[0].elements[0].distance.value; + + // Convert distance from meters to kilometers + const distanceInKilometers = distanceInMeters / 1000; + + // Round the distance to the nearest integer + const roundedDistance = Math.round(distanceInKilometers); + let totalcharge; + if (roundedDistance < minKm) { + setTotalCharge(basePrice); + } else { + console.log('minKm', minKm); + console.log('pricePerKm', pricePerKm); + console.log('basePrice', basePrice); + totalcharge = (roundedDistance - minKm) * pricePerKm + basePrice; + console.log('totalcharge', totalcharge); + setTotalCharge(totalcharge); + } + + // Return the rounded distance + return { roundedDistance, totalcharge }; + } catch (error) { + console.error('Error calculating distance:', error); + throw error; // Rethrow the error to be handled by the caller + } + }; + + // ==================================================== || fetchTiming || ==================================================== + const fetchTiming = async () => { + setLoading(true); + await axios + .get(`${process.env.REACT_APP_URL}/utils/getapplocations/?applocationid=${appId}`) + .then((res) => { + console.log('fetchTiming', res); + const { opentime, closetime, latitude, longitude, radius } = res.data.details[0]; + if (res.data.status) { + setAppLocaLat(latitude); + setAppLocaLng(longitude); + setAppLocaRadius(radius); + setStatrttime(`${dayjs().format('MM-DD-YYYY')} ${opentime}`); + setEndtime(`${dayjs().format('MM-DD-YYYY')} ${closetime}`); + console.log('starttime', `${dayjs().format('MM-DD-YYYY')} ${opentime}`); + console.log('endtime', `${dayjs().format('MM-DD-YYYY')} ${closetime} `); + let arr = []; + for ( + let i = `${dayjs().format('MM-DD-YYYY')} ${opentime}`, j = 0; + dayjs(`${dayjs().format('MM-DD-YYYY')} ${closetime} `).diff(i, 'm') >= 0; + j++, i = dayjs(i).add(30, 'm') + ) { + arr.push(i); + } + console.log('setTimeslotarr', arr); + setTimeslotarr(arr); + } + setLoading(false); + }) + .catch((err) => { + console.log(err); + setLoading(false); + }); + }; + useEffect(() => { + if (appId) { + fetchTiming(); + } + }, [starttime, endtime, appId]); + // ==================================================== || 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(); + }, []); + const fetchAppAdminTokens = async () => { + setLoading(true); + await axios + .get(`${process.env.REACT_APP_URL}/utils/getapplocationconfig/?applocationid=${appId}`) + .then((res) => { + const userfcmtokemArray = res.data.details.applocationadmins.map((admin) => admin.userfcmtokem); // fcm => firebase cloud messaging + console.log('fetchAppAdminTokens', res); + console.log('userfcmtokemArray', userfcmtokemArray); + if (res.data.status) { + setAdmintoken(userfcmtokemArray); + } + setLoading(false); + }) + .catch((err) => { + console.log(err); + setLoading(false); + }); + }; + + useEffect(() => { + if (starttime && endtime) { + fetchAppAdminTokens(); + } + }, [starttime, endtime]); + + useEffect(() => { + console.log('pickCust', pickCust); + }, [pickCust]); + useEffect(() => { + console.log('dropCust', dropCust); + }, [dropCust]); + // ==================================================== || fetchtenantinfo || ==================================================== + const fetchtenantinfo = async () => { + setLoading(true); + console.log('tid', tid); + + await axios + .get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`) + .then((res) => { + console.log('fetchtenantinfo', res); + if (res.data.status) { + setTenant(res.data.details); + setTenantid(res.data.details.tenantid); + fetchAppAdminTokens(); + setSubCatName(res.data.details.subcategoryname); + setSubCatId(res.data.details.subcategoryid); + } + setLoading(false); + }) + .catch((err) => { + console.log(err); + setLoading(false); + }); + }; + useEffect(() => { + if (tid) { + fetchtenantinfo(); + } + }, [tid]); + // ================================================== || sendnotifications || ================================================== + const sendnotifications = async () => { + setLoading(true); + await axios + .post(`${process.env.REACT_APP_URL}/utils/sendnotifications`, { + priority: 'high', + registration_ids: admintoken, + data: { + accessid: process.env.REACT_APP_RIDER_ACCESS_ID + }, + notification: { + title: 'Nearle Merchant', + body: 'An Order has been placed successfully,kindly process the same', + sound: 'ring' + } + }) + .then((res) => { + console.log(res); + if (res.data.message == 'Success') { + enqueueSnackbar('Notification sent Successfully', { + variant: 'success', + anchorOrigin: { vertical: 'top', horizontal: 'right' }, + autoHideDuration: 1000 + }); + } + setLoading(false); + }) + .catch((err) => { + console.log(err); + enqueueSnackbar(err.message, { + variant: 'error', + anchorOrigin: { vertical: 'top', horizontal: 'right' }, + autoHideDuration: 1000 + }); + setLoading(false); + }); + }; + // =============================================== || createorders || =============================================== + const createorders = async () => { + const arr = dropCust.map((customer) => ({ + applocationid: pickCust.applocationid, + cancellled: '', + // categoryid: +tenant.categoryid, + configid: 9, + customerid: 0, + deliveryaddress: customer.address || '', + deliverycharge: +customer.totalcharge || 0, + deliverycity: customer.city || '', + deliverycontactno: customer.contactno || '', + deliverycustomer: customer.firstname || '', + deliveryid: +customer.customerid, + deliverylandmark: customer.landmark || '', + deliverylat: customer.latitude.toString(), + deliverylocation: customer.suburb || '', + deliverylocationid: customer.deliverylocationid || 0, + deliverylong: customer.longitude.toString(), + deliverytime: `${dayjs(startdate).format('YYYY-MM-DD')} `, + deliverytype: 'B', + delivered: '', + itemcount: 1, + kms: customer.distance.toString() || 0, + locationid: +pickCust.locationid, + moduleid: +pickCust.moduleid, + orderamount: +customer.totalcharge || 0, + ordercharges: 0.0, + orderdate: dayjs().format('YYYY-MM-DD HH:mm:ss'), + orderheaderid: 0, + orderid: '', // + ordernotes: otherinstructions, + orderstatus: 'created', + ordervalue: +customer.totalcharge || 0, + partnerid: pickCust.partnerid, + partneruserid: +userid, + paymentstatus: 1, + paymenttype: 42, + pending: '', + pickupaddress: pickCust.locationaddress || '', + pickupcity: pickCust.locationcity || '', + pickupcontactno: pickCust.locationcontact || '', + pickupcustomer: pickCust.locationname || '', + pickuplandmark: pickCust.landmark || '', + pickuplat: pickCust.locationlatitude.toString(), + pickuplocation: pickCust.locationsuburb || '', + pickuplocationid: pickCust.locationid || 0, + pickuplong: pickCust.locationlong.toString(), + processing: '', + ready: '', + remarks: '', + // smsdelivery: isSms, + // subcategoryid: +subCatId, + taxamount: 0.0, + tenantid: pickCust.tenantid, + tenantuserid: 0 + })); + console.log('arr', arr); + + if (!tenId) { + opentoast('Choose Client ', 'warning'); + } + // else if (!tenantinfo.address) { + // opentoast('Choose Pickup Location', 'warning'); + // } else if (!clientinfo.address) { + // opentoast('Choose Drop Location', 'warning'); + // } else if (!selectedtime) { + // opentoast('Choose Schedule Time', 'warning'); + // } + else { + setLoading(true); + + await axios + .post(`${process.env.REACT_APP_URL}/orders/createorders`, arr) + .then((res) => { + if (res.data.status) { + enqueueSnackbar('Order Created Successfully', { + variant: 'success', + anchorOrigin: { vertical: 'top', horizontal: 'right' }, + autoHideDuration: 1000 + }); + if (admintoken) { + // notifyadmin(admintoken); + sendnotifications(); + } + + navigate('/orders'); + } else { + opentoast(res.data.message, 'warning'); + } + setLoading(false); + console.log(res); + }) + .catch((err) => { + console.log(err); + // opentoast(err.data.message, 'warning'); + setLoading(false); + }); + } + console.log(arr); + }; + return ( + <> + {loading && } + + + + Create Multiple Order + {tenantLocations.length == 1 ? ( + + + + ) + }} + /> + ) : ( + `${option.locationname} (${option.locationsuburb})` || ''} + renderInput={(params) => } + sx={{ width: '350px' }} + onChange={(event, value, reason) => { + if (value) { + console.log('Business Locations', value); + console.log('locationid', value.locationid); + setTenanatLocoId(value.locationid); + setTid(value.tenantid); + setTenantlocation(value.locationaddress); + setIsLocation(true); + setIsBusiness(true); + setPickCust(value); + } + if (reason == 'clear') { + setIsLocation(false); + setIsBusiness(false); + } + }} + /> + )} + + + + {/* ===================================================== || Pickup || ===================================================== */} + + + { + let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd'); + console.log('dateres11'); + console.log(dateres11); + setSelectedtime(''); + if (dateres11 <= 0) { + console.log('startdate', e); + setStartdate(e); + let arr = []; + timeslotarr.map((val) => { + if (dayjs().diff(dayjs(`${dayjs(e).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0) { + arr.push(val); + } + }); + if (arr[0]) { + setOrderarr([ + { + sno: 1, + address: '', + customerid: '', + deliverytime: dayjs(arr[0]) || '', + deliverylocationid: '', + clientname: '', + contactno: '', + latitude: '', + longitude: '' + } + ]); + } else { + setOrderarr([]); + } + } else { + setAlertmessage('choose Upcoming Date'); + opentoast('choose Upcoming Date', 'warning'); + setStartdate(NaN); + } + }} + value={dayjs(startdate)} + sx={{ width: '100%' }} + disablePast + /> + + } + > + + + + + Tenant + Address + + + + + {pickCust.locationname} + {pickCust.locationaddress} + + +
+ + + + {/* ===================================================== || Drop || ===================================================== */} + + { + if (!isLocation) { + opentoast('Select Business Location', 'warning'); + } else { + setIsCustomerOpen(true); + setSearchCustList(''); + } + }} + > + Select Customers + + } + > + + + + + S.No + Customer + Address + Kms + Charge + Action + + + + {dropCust.map((customer, index) => ( + + {index + 1} + {customer.firstname} + {customer.address} + {customer.distance} + {`₹${customer.totalcharge}.00`} + + { + handleCheckboxChange(event, customer)} + /> + } + + + ))} + {dropCust.length != 0 && ( + + Total + + + {totaldist} + {`₹${totalAmt}.00`} + + + )} + +
+ + + + {/* ================================================= || Time || ================================================= */} + + {/* + + + + Date + + { + let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd'); + console.log('dateres11'); + console.log(dateres11); + setSelectedtime(''); + if (dateres11 <= 0) { + console.log('startdate', e); + setStartdate(e); + let arr = []; + timeslotarr.map((val) => { + if (dayjs().diff(dayjs(`${dayjs(e).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0) { + arr.push(val); + } + }); + if (arr[0]) { + setOrderarr([ + { + sno: 1, + address: '', + customerid: '', + deliverytime: dayjs(arr[0]) || '', + deliverylocationid: '', + clientname: '', + contactno: '', + latitude: '', + longitude: '' + } + ]); + } else { + setOrderarr([]); + } + } else { + setAlertmessage('choose Upcoming Date'); + opentoast('choose Upcoming Date', 'warning'); + setStartdate(NaN); + } + }} + value={dayjs(startdate)} + sx={{ width: '100%', mt: 2 }} + disablePast + /> + + + Time + + + + {timeslotarr.map((val, index) => { + if (dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0) { + return ( + + + { + setSelectedtime(val); + }} + /> + + + ); + } + })} + + + + + {showDistance && ( + + + + + + + + + )} + + + Category + `${option.subcategoryname}` || ''} + sx={{ my: 2, zIndex: '99' }} + fullWidth + renderInput={(params) => } + onChange={(event, value, reason) => { + if (value) { + console.log(value); + setSubCatName(value.subcategoryname); + setSubCatId(value.subcategoryid); + } + }} + /> + + Weight + + { + handleChipClick('1-10kgs'); + setWeight('1-10kgs'); + }} + /> + { + handleChipClick('11-20kgs'); + setWeight('11-20kgs'); + }} + /> + { + handleChipClick('21-30kgs'); + setWeight('21-30kgs'); + }} + /> + + + SMS Delivery + { + setIsSms(e.target.checked ? 1 : 0); + }} + /> + + + + + */} + + {/* ================================================= || Notes || ================================================= */} + + + + setOtherinstructions(e.target.value)} + /> + + + + + + + + + {/* ============================================= || saved address Dialog || ============================================= */} + { + setIsCustomerOpen(false); + }} + fullWidth + sx={{ minWidth: 'lg' }} + > + + + {`Select Drop Customers (${dropCust.length || 0})`} + + + setSearchCustList(e.target.value)} + sx={{ + '& .MuiOutlinedInput-input': { + p: '10.5px 0px 12px' + }, + bgcolor: 'white' + }} + startAdornment={ + + + + } + endAdornment={ + { + setSearchCustList(''); + }} + > + + + } + autoComplete="off" + /> + + + + + + + {customerlist.length == 0 ? ( + + + + ) : ( + + {customerlist && + customerlist.map((customer, index) => ( + + cust.customerid === customer.customerid)} // Set the checked state of the checkbox based on whether the customer is in `dropCust` + onChange={(event) => handleCheckboxChange(event, customer)} + /> + } + label={ +
+ + {`${customer.firstname} (${customer.contactno})`} + + + + {customer.address} + +
+ } + /> + + ))} + + )} + + + + + + + + ); }; export default MultipleOrders;