@nerdjs/sales-kit 4.0.53-beta.1 → 4.0.54

package/dist/hooks/quote/helpers.js

@@ -20,7 +20,6 @@ import { LocationForm } from "../locationsForm";
 import { FREIGHT_CLASS, LTL, SHIPPERS, TL } from "./constants";
 import { LocationFormSales } from "../locationsForm/locationFormSales/locationFormSales";
 import { unstable_debounce as debounce } from "@mui/utils";
-import { getCacheByPlaceId, useGoogleMapsAutocompleteCache, } from "../../helpers";
 export const getStopsColumnDef = (dispatch, stopKind, rows, customerPortal, onEditLocationClick, errors) => {
     const date = {
         headerName: "Date",
@@ -48,7 +47,7 @@ export const getStopsColumnDef = (dispatch, stopKind, rows, customerPortal, onEd
             editable: false,
             width: 40,
             valueGetter: (_v, row) => {
-                return rows.findIndex((r) => r.id === row.id) + 1;
+                return rows.findIndex((r) => r.key === row.key) + 1;
             },
             renderCell: (p) => (_jsx(Avatar, { size: "sm", variant: "soft", children: p.value })),
         },
@@ -78,36 +77,25 @@ export const getStopsColumnDef = (dispatch, stopKind, rows, customerPortal, onEd
             valueSetter(value, row) {
                 if (value && typeof value != "string")
                     if (typeof value != "number")
-                        if (locationEntityTypeGuard(value)) {
-                            console.warn(value);
+                        if (locationEntityTypeGuard(value))
                             return {
                                 ...row,
                                 locationId: value.id,
                                 zip: value.address.zip,
-                                placeId: undefined,
                             };
-                        }
-                        else {
-                            console.warn(value, "2");
+                        else
                             return {
                                 ...row,
                                 locationId: value.id,
                                 zip: value.zip,
-                                placeId: undefined,
                             };
-                        }
-                    else {
-                        console.warn(value, "HOHO");
+                    else
                         return {
                             ...row,
                             locationId: value,
-                            placeId: undefined,
                         };
-                    }
-                else {
-                    console.warn(value, "HAHA");
-                    return { ...row, locationId: undefined, placeId: undefined };
-                }
+                else
+                    return { ...row, locationId: undefined };
             },
         },
         {
@@ -132,7 +120,7 @@ export const getStopsColumnDef = (dispatch, stopKind, rows, customerPortal, onEd
             getActions: (p) => [
                 _jsx(GridActionsCellItem, { icon: _jsx("i", { style: { fontSize: 14 }, className: "fa-sharp fa-solid fa-trash" }), label: `Delete`, onClick: (e) => {
                         e.stopPropagation();
-                        dispatch(removeStop(p.row.id));
+                        dispatch(removeStop(p.row.key));
                     }, color: "inherit" }, "delete"),
             ],
         },
@@ -287,153 +275,144 @@ export const getPalletsColumnDef = (deleteAction, customerPortal, perPalletClass
     });
     return ret;
 };
-const ZipCodeRenderCell = ({ value, errors, row, id, }) => {
-    const apiRef = useGridApiContext();
-    const { getSuggestions } = useGoogleMapsAutocompleteCache();
+const ZipCodeRenderCell = ({ value, errors, }) => {
+    const fetchAutocompleteSuggestions = google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions;
+    const [googleMapsPredictions, setGoogleMapsPredictions] = useState([]);
     useEffect(() => {
-        let active = true;
-        if (!value) {
-            return;
-        }
-        if (!row.placeId)
-            getSuggestions({
+        if (value) {
+            fetchAutocompleteSuggestions({
                 input: value,
-                includedPrimaryTypes: ["(regions)"],
                 includedRegionCodes: ["US"],
+                includedPrimaryTypes: ["(regions)"],
                 language: "en-US",
                 region: "us",
-            }).then((suggestions) => {
-                if (!active || !suggestions?.[0])
-                    return;
-                const text = suggestions[0].placePrediction?.text?.text || value;
-                apiRef.current.updateRows([
-                    {
-                        id: id,
-                        zip: text,
-                        placeId: suggestions[0].placePrediction?.placeId || undefined,
-                    },
-                ]);
+            }).then(({ suggestions }) => {
+                setGoogleMapsPredictions(suggestions);
             });
-        return () => {
-            active = false;
-        };
+        }
     }, [value]);
     return (_jsx(Box, { width: "100%", children: value ? (_jsx(Typography, { level: "body-sm", sx: {
                 display: "inline",
-                opacity: errors ? 1 : 0.5,
-                color: (theme) => (errors ? theme.palette.danger[500] : undefined),
-            }, children: value })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { level: "body-sm", display: "inline", children: "Enter zip or city, state..." }), _jsx(Typography, { display: "inline", color: "danger", children: "*" })] })) }));
+                opacity: value || errors ? 1 : 0.5,
+                color: (theme) => errors && !value ? theme.palette.danger[500] : undefined,
+            }, children: googleMapsPredictions?.[0]
+                ? googleMapsPredictions[0].placePrediction?.text.text || ""
+                : value })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { display: "inline", level: "body-sm", sx: {
+                        opacity: value || errors ? 1 : 0.5,
+                        color: (theme) => errors && !value ? theme.palette.danger[500] : undefined,
+                    }, children: "Enter zip or city, state... " }), _jsx(Typography, { display: "inline", color: "danger", children: "*" })] })) }));
 };
-export const ZipCodeRenderEditCell = ({ id, field, hasFocus, value: initialValue, row, }) => {
+const ZipCodeRenderEditCell = ({ value: _value, id, field, hasFocus, }) => {
     const apiRef = useGridApiContext();
+    const [googleMapsPredictions, setGoogleMapsPredictions] = useState([]);
+    const fetchAutocompleteSuggestions = google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions;
     const ref = useRef(null);
-    const { getSuggestions } = useGoogleMapsAutocompleteCache();
-    const [options, setOptions] = useState([]);
-    const [inputValue, setInputValue] = useState("");
     const [open, setOpen] = useState(false);
+    const [value, setValue] = useState(null);
     useLayoutEffect(() => {
-        if (hasFocus)
+        if (hasFocus) {
             ref.current?.focus();
+        }
     }, [hasFocus]);
     useEffect(() => {
-        let active = true;
-        if (!initialValue) {
-            setInputValue("");
-            return;
-        }
-        if (row.placeId) {
-            const cached = getCacheByPlaceId(row.placeId);
-            setInputValue(cached?.[0]?.placePrediction?.text?.text || initialValue);
-            return;
-        }
-        getSuggestions(initialValue)
-            .then((suggestions) => {
-            if (!active)
-                return;
-            const text = suggestions?.[0]?.placePrediction?.text?.text || initialValue;
-            setInputValue(text);
-        })
-            .catch(() => {
-            if (active)
-                setInputValue(initialValue);
-        });
-        return () => {
-            active = false;
-        };
+        if (_value)
+            fetchAutocompleteSuggestions({
+                input: _value,
+                includedPrimaryTypes: ["(regions)"],
+                language: "en-US",
+                region: "us",
+                includedRegionCodes: ["US"],
+            }).then(async ({ suggestions }) => {
+                const result = suggestions[0];
+                if (result) {
+                    if (result.placePrediction?.text.text) {
+                        setValue(result.placePrediction?.text.text);
+                    }
+                    else
+                        setValue(_value);
+                }
+                else
+                    setValue(_value);
+            });
     }, []);
-    const loadSuggestions = useMemo(() => debounce(async (val) => {
-        if (!val)
-            return;
-        const results = await getSuggestions({
-            input: val,
-            includedPrimaryTypes: ["(regions)"],
-            includedRegionCodes: ["US"],
-            language: "en-US",
-            region: "us",
-        });
-        setOptions(results);
-    }, 300), [getSuggestions]);
-    const handleChange = async (_, newValue) => {
-        if (!newValue) {
-            apiRef.current.updateRows([
-                {
-                    id: id,
-                    zip: "",
-                    placeId: undefined,
-                },
-            ]);
-            return;
+    const handleValueChange = async (_, newValue) => {
+        setValue(newValue);
+        if (typeof newValue != "string" && newValue != null) {
+            if (newValue.placePrediction?.text.text) {
+                const _place = newValue.placePrediction.toPlace();
+                if (_place) {
+                    const place = (await _place.fetchFields({ fields: ["addressComponents"] })).place;
+                    const mainText = place.addressComponents?.[0]?.longText;
+                    let _value = mainText;
+                    if (Number.isNaN(Number(mainText)) &&
+                        place.addressComponents?.[2]?.shortText) {
+                        _value =
+                            place.addressComponents?.[0]?.longText +
+                                ", " +
+                                place.addressComponents?.[2]?.shortText;
+                    }
+                    apiRef.current?.setEditCellValue({
+                        id,
+                        field,
+                        value: _value,
+                    });
+                }
+            }
         }
-        if (typeof newValue === "string") {
-            setInputValue(newValue);
-            apiRef.current.updateRows([
-                {
-                    id: id,
-                    zip: newValue,
-                    placeId: undefined,
-                },
-            ]);
-            return;
+        else {
+            apiRef.current?.setEditCellValue({
+                id,
+                field,
+                value: newValue,
+            });
         }
-        const place = newValue.placePrediction?.toPlace();
-        if (!place)
-            return;
-        const result = await place.fetchFields({
-            fields: ["addressComponents"],
-        });
-        const components = result.place.addressComponents || [];
-        const city = components.find((c) => c.types.includes("locality"))?.longText ||
-            components.find((c) => c.types.includes("postal_town"))?.longText ||
-            components.find((c) => c.types.includes("administrative_area_level_2"))
-                ?.longText ||
-            "";
-        const state = components.find((c) => c.types.includes("administrative_area_level_1"))
-            ?.shortText || "";
-        const zip = components.find((c) => c.types.includes("postal_code"))?.longText || "";
-        const main = city || zip;
-        const finalValue = main && state ? `${main}, ${state}` : main || state || "";
-        setInputValue(finalValue);
-        apiRef.current.updateRows([
-            {
-                id: id,
-                zip: finalValue,
-                placeId: newValue.placePrediction?.placeId || undefined,
-            },
-        ]);
     };
-    return (_jsx(Autocomplete, { fullWidth: true, freeSolo: true, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), options: options, filterOptions: (x) => x, value: inputValue, getOptionLabel: (option) => typeof option === "string"
-            ? option
-            : option.placePrediction?.text.text || "", onChange: handleChange, onInputChange: (_, v) => {
-            if (v === inputValue)
-                return;
-            setInputValue(v);
-            loadSuggestions(v);
-            apiRef.current.setEditCellValue({
+    const getGoogleAddresses = async (_event, value) => {
+        if (value) {
+            const { suggestions } = await fetchAutocompleteSuggestions({
+                input: value,
+                includedRegionCodes: ["US"],
+                includedPrimaryTypes: ["(regions)"],
+                language: "en-US",
+                region: "us",
+            });
+            setGoogleMapsPredictions(suggestions);
+        }
+    };
+    const debouncedChangeHandler = useMemo(() => debounce(getGoogleAddresses, 300), []);
+    return (_jsx(Autocomplete, { fullWidth: true, sx: {
+            "& fieldset": {
+                borderWidth: "0px !important",
+            },
+        }, onClose: () => {
+            setOpen(false);
+        }, options: googleMapsPredictions || [], open: open, onOpen: () => setOpen(true), value: value || "", freeSolo: true, onChange: handleValueChange, onKeyDown: (e) => {
+            if (e.key === "Enter" && open) {
+                e.stopPropagation();
+                setOpen(false);
+            }
+        }, onInputChange: (e, v) => {
+            debouncedChangeHandler(e, v);
+            apiRef.current?.setEditCellValue({
                 id,
                 field,
                 value: v,
             });
-        }, renderInput: (params) => (_jsx(TextField, { ...params, inputRef: ref, placeholder: "Enter zip or city, state...", autoFocus: true })) }));
+        }, getOptionLabel: (option) => {
+            if (typeof option != "string") {
+                return option.placePrediction?.text.text || "";
+            }
+            else
+                return option;
+        }, filterOptions: (x) => x, renderInput: (params) => (_jsx(TextField, { tabIndex: 0, ...params, placeholder: "Enter zip or city, state...", autoFocus: apiRef.current?.getRowMode(id) === "edit" ? false : true, inputRef: ref, InputProps: {
+                ...params.InputProps,
+                tabIndex: 0,
+                onKeyDown: (e) => {
+                    if (e.key === "Tab") {
+                        e.stopPropagation();
+                    }
+                },
+            } })), renderOption: (props, c) => (_jsx(LocationOption, { cellInput: true, props: props, c: c }, locationEntityTypeGuard(c) ? c.id : c.placePrediction?.placeId)) }));
 };
 const NumberEditCell = ({ id, value, field }) => {
     const apiRef = useGridApiContext();
@@ -693,126 +672,152 @@ export function AccessorialInput({ accessorialIDs: _accessorialIDs, onChange, })
  * @returns {ReactElement} The autocomplete
  */
 export function LocationInputCell(props) {
-    const { id, field, hasFocus, onEditLocationClick, customerPortal } = props;
+    const { id, value, field, hasFocus, onEditLocationClick, customerPortal } = props;
     const apiRef = useGridApiContext();
     const [openDialog, setOpenDialog] = useState(false);
     const [locationInputValue, setLocationInputValue] = useState("");
-    const [open, setOpen] = useState(false);
     const [searchExistingLocation, { data: existingLocations }] = useLazySearchExistingLocationQuery();
     const [searchLocation, { data: locationSuggestions }] = useLazySearchLocationQuery();
+    const [bounds, setBounds] = useState();
     const [googleMapsPredictions, setGoogleMapsPredictions] = useState([]);
     const fetchAutocompleteSuggestions = google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions;
     const googleMapsGeocoder = new google.maps.Geocoder();
     const [getLocation, { data: location }] = useLazyGetLocationQuery();
-    const [bounds, setBounds] = useState();
     const ref = useRef(null);
-    const zip = useMemo(() => {
-        const z = props.row.zip || props.row.quoteZip || "";
-        return [...z.matchAll(/\d/g)].map((m) => m[0]).join("") || z;
-    }, [props.row.zip, props.row.quoteZip]);
+    const [open, setOpen] = useState(false);
     useLayoutEffect(() => {
-        if (hasFocus)
+        if (hasFocus) {
             ref.current?.focus();
+        }
     }, [hasFocus]);
     useEffect(() => {
-        const idNum = Number(props.value);
-        if (idNum)
-            getLocation(idNum, true);
-    }, [props.value]);
-    const findBounds = useCallback(() => {
-        if (!zip)
-            return;
+        const id = Number(value);
+        if (id) {
+            getLocation(id, true);
+        }
+    }, [value]);
+    useEffect(() => {
+        if (props.row.zip || props.row.quoteZip) {
+            findBounds();
+        }
+    }, [props.row]);
+    const handleValueChange = async (_, newValue) => {
+        if (typeof newValue != "string") {
+            if (newValue && locationEntityTypeGuard(newValue)) {
+                apiRef.current?.setEditCellValue({
+                    id,
+                    field,
+                    value: newValue,
+                });
+            }
+            else if (newValue) {
+                const place = newValue.placePrediction?.toPlace();
+                await place?.fetchFields({
+                    fields: ["formattedAddress"],
+                });
+                if (place && place.formattedAddress) {
+                    try {
+                        const existingLocations = await searchExistingLocation(place.formattedAddress).unwrap();
+                        if (existingLocations.length > 0)
+                            setOpenDialog(true);
+                        else {
+                            onEditLocationClick(place, id, field);
+                        }
+                    }
+                    catch {
+                        return;
+                    }
+                }
+            }
+            else {
+                apiRef.current?.setEditCellValue({
+                    id,
+                    field,
+                    value: newValue,
+                });
+            }
+        }
+    };
+    const findBounds = () => {
         googleMapsGeocoder.geocode({
-            address: zip,
+            address: props.row.zip || props.row.quoteZip,
             componentRestrictions: { country: "US" },
             language: "en-US",
         }, (results, status) => {
-            if (status === google.maps.GeocoderStatus.OK && results?.length) {
-                const result = results.find((r) => r.address_components?.some((a) => a.types.includes("country"))) || results[0];
-                const center = new google.maps.LatLng(result.geometry.location.lat(), result.geometry.location.lng());
+            if (status === google.maps.GeocoderStatus.OK && results != undefined) {
+                const result = results.find((r) => r.address_components.find((a) => a.types.includes("country"))
+                    ?.short_name === "US") || results[0];
+                const lat = result.geometry.location.lat();
+                const lng = result.geometry.location.lng();
+                const center = new google.maps.LatLng(lat, lng);
                 const circle = new google.maps.Circle({
-                    center,
+                    center: center,
                     radius: 10000,
                 });
                 const bounds = circle.getBounds() || undefined;
                 setBounds(bounds);
             }
         });
-    }, [zip]);
-    useEffect(() => {
-        if (props.row.zip || props.row.quoteZip) {
-            findBounds();
-        }
-    }, [props.row.zip, props.row.quoteZip, findBounds]);
-    const getGoogleAddresses = useCallback(async (searchText) => {
-        if (!searchText)
-            return;
-        const { suggestions } = await fetchAutocompleteSuggestions({
-            input: searchText,
-            locationBias: bounds,
-            language: "en-US",
-            region: "us",
-            includedRegionCodes: ["US"],
-        });
-        setGoogleMapsPredictions(suggestions || []);
-    }, [bounds]);
-    const debouncedSearch = useMemo(() => debounce((value) => {
-        searchLocation({
-            zip,
-            location: value,
-        });
-        getGoogleAddresses(value);
-    }, 400), [zip, bounds, searchLocation, getGoogleAddresses]);
-    const handleValueChange = async (_, newValue) => {
-        if (!newValue || typeof newValue === "string") {
-            apiRef.current?.setEditCellValue({ id, field, value: undefined });
-            return;
-        }
-        if (locationEntityTypeGuard(newValue)) {
-            console.warn(newValue);
-            apiRef.current?.setEditCellValue({
-                id,
-                field,
-                value: newValue,
+    };
+    const getGoogleAddresses = async (searchText) => {
+        if (searchText) {
+            const { suggestions } = await fetchAutocompleteSuggestions({
+                input: searchText,
+                locationBias: bounds,
+                language: "en-US",
+                region: "us",
+                includedRegionCodes: ["US"],
             });
-            return;
-        }
-        const place = newValue.placePrediction?.toPlace();
-        await place?.fetchFields({ fields: ["formattedAddress"] });
-        if (!place?.formattedAddress)
-            return;
-        try {
-            const existing = await searchExistingLocation(place.formattedAddress).unwrap();
-            if (existing.length > 0) {
-                setOpenDialog(true);
-            }
-            else {
-                onEditLocationClick(place, id, field);
-            }
-        }
-        catch {
-            return;
+            setGoogleMapsPredictions(suggestions);
         }
     };
+    const onInputChange = useCallback((e) => {
+        const zip = props.row.zip || props.row.quoteZip || "";
+        const _zip = [...zip.matchAll(/\d/g)].map((m) => m[0]).join("");
+        searchLocation({
+            zip: _zip ? _zip : zip,
+            location: e.target.value,
+        });
+        getGoogleAddresses(e.target.value);
+    }, [props.row]);
+    const debouncedChangeHandler = useMemo(() => debounce(onInputChange, 500), []);
     return (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { fullWidth: true, sx: {
-                    "& fieldset": { borderWidth: "0px !important" },
+                    "& fieldset": {
+                        borderWidth: "0px !important",
+                    },
                 }, options: [
                     ...(locationSuggestions ?? []),
                     ...(googleMapsPredictions ?? []),
-                ], open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), value: location || "", inputValue: locationInputValue, freeSolo: true, filterOptions: (x) => x, getOptionLabel: (option) => typeof option === "string"
-                    ? option
-                    : locationEntityTypeGuard(option)
-                        ? option.name
-                        : option.placePrediction?.mainText?.text || "", onChange: handleValueChange, onInputChange: (_e, v) => {
-                    setLocationInputValue(v);
-                    debouncedSearch(v);
-                }, renderInput: (params) => (_jsx(TextField, { ...params, size: "small", placeholder: "Pick a location...", inputRef: ref })), renderOption: (props, c) => (_jsx(LocationOption, { cellInput: true, props: props, c: c }, locationEntityTypeGuard(c) ? c.id : c.placePrediction?.placeId)) }), _jsx(ExistingLocations, { updateCell: (value) => {
+                ], open: open, onClose: () => {
+                    setOpen(false);
+                }, onOpen: () => setOpen(true), value: location || "", onChange: handleValueChange, inputValue: locationInputValue, onKeyDown: (e) => {
+                    if (e.key === "Enter" && open) {
+                        e.stopPropagation();
+                        setOpen(false);
+                    }
+                }, freeSolo: true, onInputChange: (_e, v) => setLocationInputValue(v), getOptionLabel: (option) => {
+                    if (typeof option != "string") {
+                        if (locationEntityTypeGuard(option)) {
+                            return option.name;
+                        }
+                        return option.placePrediction?.mainText?.text || "";
+                    }
+                    else
+                        return option;
+                }, filterOptions: (x) => x, renderInput: (params) => (_jsx(TextField, { tabIndex: 0, variant: "outlined", ...params, size: "small", placeholder: "Pick a location...", autoFocus: apiRef.current?.getRowMode(id) === "edit" ? false : true, onChange: (e) => {
+                        debouncedChangeHandler(e);
+                    }, inputRef: ref, InputProps: {
+                        ...params.InputProps,
+                        tabIndex: 0,
+                    } })), renderOption: (props, c) => (_jsx(LocationOption, { cellInput: true, props: props, c: c }, locationEntityTypeGuard(c) ? c.id : c.placePrediction?.placeId)) }), _jsx(ExistingLocations, { updateCell: (value) => {
                     apiRef.current?.setEditCellValue({
                         id,
                         field,
-                        value,
+                        value: value,
                     });
-                }, existingLocations: existingLocations, close: () => setOpenDialog(false), open: openDialog, openLocationForm: (place) => onEditLocationClick(place, id, field), customerPortal: customerPortal })] }));
+                }, existingLocations: existingLocations, close: () => {
+                    setOpenDialog(false);
+                }, open: openDialog, openLocationForm: (place) => onEditLocationClick(place, id, field), customerPortal: customerPortal })] }));
 }
 export const LocationInput = ({ zip, locationID, onChange, customerPortal, autoCompleteProps, }) => {
     const [locationFormOpen, setLocationFormOpen] = useState({
@@ -820,92 +825,131 @@ export const LocationInput = ({ zip, locationID, onChange, customerPortal, autoC
         place: undefined,
     });
     const [openDialog, setOpenDialog] = useState(false);
-    const [inputValue, setInputValue] = useState("");
-    const [googleMapsPredictions, setGoogleMapsPredictions] = useState([]);
-    const googleMapsGeocoder = new google.maps.Geocoder();
-    const [bounds, setBounds] = useState();
+    const [locationInputValue, setLocationInputValue] = useState("");
     const [searchExistingLocation, { data: existingLocations }] = useLazySearchExistingLocationQuery();
     const [searchLocation, { data: locationSuggestions }] = useLazySearchLocationQuery();
+    const [bounds, setBounds] = useState();
+    const [googleMapsPredictions, setGoogleMapsPredictions] = useState([]);
+    const fetchAutocompleteSuggestions = google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions;
+    const googleMapsGeocoder = new google.maps.Geocoder();
     const [getLocation] = useLazyGetLocationQuery();
     const [location, setLocation] = useState();
-    const { getSuggestions } = useGoogleMapsAutocompleteCache();
     useEffect(() => {
         if (locationID) {
             getLocation(locationID, true)
                 .unwrap()
-                .then(setLocation)
+                .then((d) => setLocation(d))
                 .catch(() => undefined);
         }
-        else {
+        else
             setLocation(undefined);
-        }
     }, [locationID]);
     useEffect(() => {
-        if (!zip)
-            return;
+        if (zip) {
+            findBounds();
+        }
+    }, [zip]);
+    const handleValueChange = async (_, newValue) => {
+        if (typeof newValue != "string")
+            if (newValue && locationEntityTypeGuard(newValue)) {
+                onChange(newValue);
+            }
+            else if (newValue) {
+                const place = newValue.placePrediction?.toPlace();
+                await place?.fetchFields({
+                    fields: ["formattedAddress"],
+                });
+                if (place && place.formattedAddress) {
+                    try {
+                        const existingLocations = await searchExistingLocation(place?.formattedAddress).unwrap();
+                        if (existingLocations.length > 0)
+                            setOpenDialog(true);
+                        else {
+                            setLocationFormOpen({ open: true, place: place });
+                        }
+                    }
+                    catch {
+                        return;
+                    }
+                }
+            }
+            else {
+                onChange(newValue);
+            }
+    };
+    const findBounds = () => {
         googleMapsGeocoder.geocode({
             address: zip,
             componentRestrictions: { country: "US" },
+            language: "en",
         }, (results, status) => {
-            if (status === google.maps.GeocoderStatus.OK && results?.[0]) {
-                const loc = results[0].geometry.location;
+            if (status === google.maps.GeocoderStatus.OK && results != undefined) {
+                const result = results[0];
+                const lat = result.geometry.location.lat();
+                const lng = result.geometry.location.lng();
+                const center = new google.maps.LatLng(lat, lng);
                 const circle = new google.maps.Circle({
-                    center: loc,
+                    center: center,
                     radius: 10000,
                 });
-                setBounds(circle.getBounds() || undefined);
+                const bounds = circle.getBounds() || undefined;
+                setBounds(bounds);
             }
         });
-    }, [zip]);
-    const handleValueChange = async (_, newValue) => {
-        if (typeof newValue !== "string") {
-            if (!newValue) {
-                onChange(undefined);
-                return;
-            }
-            if (locationEntityTypeGuard(newValue)) {
-                onChange(newValue);
-                return;
-            }
-            const place = newValue.placePrediction?.toPlace();
-            if (!place)
-                return;
-            const result = await place.fetchFields({
-                fields: ["formattedAddress"],
+    };
+    const getGoogleAddresses = async (searchText) => {
+        if (searchText) {
+            const { suggestions } = await fetchAutocompleteSuggestions({
+                input: searchText,
+                locationBias: bounds,
+                language: "en-US",
+                region: "us",
+                includedRegionCodes: ["US"],
             });
-            const formatted = result.place.formattedAddress;
-            if (!formatted)
-                return;
-            const existing = await searchExistingLocation(formatted).unwrap();
-            if (existing.length > 0) {
-                setOpenDialog(true);
-                return;
-            }
-            setLocationFormOpen({ open: true, place });
+            setGoogleMapsPredictions(suggestions);
         }
     };
-    const debouncedSearch = useMemo(() => debounce(async (v) => {
-        searchLocation({ zip, location: v });
-        const googleResults = await getSuggestions({
-            input: v,
-            locationBias: bounds,
-            includedRegionCodes: ["US"],
-            language: "en-US",
-            region: "us",
-        });
-        setGoogleMapsPredictions(googleResults);
-    }, 400), [zip, bounds]);
-    return (_jsxs(_Fragment, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Pick a location..." }), _jsx(JoyAutocomplete, { ...autoCompleteProps, size: "sm", value: location || null, inputValue: inputValue, freeSolo: true, options: [...(locationSuggestions ?? []), ...googleMapsPredictions], filterOptions: (x) => x, getOptionLabel: (option) => typeof option === "string"
-                            ? option
-                            : locationEntityTypeGuard(option)
-                                ? option.name
-                                : option.placePrediction?.mainText?.text || "", onChange: handleValueChange, onInputChange: (_, v) => {
-                            setInputValue(v);
-                            debouncedSearch(v);
-                        }, endDecorator: location ? (_jsx(IconButton, { size: "small", onClick: () => setLocationFormOpen({
-                                open: true,
-                                place: location,
-                            }), children: _jsx("i", { className: "fa-solid fa-pen-to-square" }) })) : null, renderOption: (props, c) => typeof c !== "string" ? (_jsx(LocationOption, { props: props, c: c, cellInput: false }, locationEntityTypeGuard(c) ? c.id : c.placePrediction?.placeId)) : (c) })] }), customerPortal ? (_jsx(LocationForm, { open: locationFormOpen.open, onClose: () => setLocationFormOpen({ open: false, place: undefined }), place: locationFormOpen.place, onConfirm: onChange })) : (_jsx(LocationFormSales, { open: locationFormOpen.open, onClose: () => setLocationFormOpen({ open: false, place: undefined }), place: locationFormOpen.place, onCreateLocation: onChange, onSaveLocation: onChange })), _jsx(ExistingLocations, { open: openDialog, close: () => setOpenDialog(false), existingLocations: existingLocations, updateCell: onChange, openLocationForm: (place, open) => setLocationFormOpen({ open, place }), customerPortal: customerPortal })] }));
+    const onInputChange = useCallback((v) => {
+        searchLocation({ zip: zip, location: v });
+        getGoogleAddresses(v);
+    }, [zip]);
+    const debouncedChangeHandler = useMemo(() => debounce(onInputChange, 500), []);
+    return (_jsxs(_Fragment, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Pick a location..." }), _jsx(JoyAutocomplete, { size: "sm", ...autoCompleteProps, slotProps: {
+                            listbox: {
+                                sx: {
+                                    zIndex: (theme) => theme.zIndex.modal,
+                                },
+                            },
+                        }, options: [
+                            ...(locationSuggestions ?? []),
+                            ...(googleMapsPredictions ?? []),
+                        ], filterOptions: (x) => x, value: location || "", onChange: handleValueChange, inputValue: locationInputValue, freeSolo: true, onInputChange: (_e, v) => {
+                            setLocationInputValue(v);
+                            debouncedChangeHandler(v);
+                        }, getOptionLabel: (option) => {
+                            if (typeof option != "string") {
+                                if (locationEntityTypeGuard(option)) {
+                                    return option.name;
+                                }
+                                return option.placePrediction?.mainText?.text || "";
+                            }
+                            else
+                                return option;
+                        }, endDecorator: _jsx(IconButton, { sx: {
+                                display: location ? "inherit" : "none",
+                            }, size: "small", onClick: () => {
+                                setLocationFormOpen({ open: true, place: location });
+                            }, children: _jsx("i", { className: "fa-solid fa-pen-to-square" }) }), renderOption: (props, c) => typeof c !== "string" ? (_jsx(LocationOption, { props: props, c: c, cellInput: false }, locationEntityTypeGuard(c) ? c.id : c.placePrediction?.placeId)) : (c) })] }), customerPortal ? (_jsx(LocationForm, { open: locationFormOpen.open, onClose: () => setLocationFormOpen({ open: false, place: undefined }), place: locationFormOpen.place, onConfirm: (value) => {
+                    onChange(value);
+                } })) : (_jsx(LocationFormSales, { onClose: () => setLocationFormOpen({ open: false, place: undefined }), open: locationFormOpen.open, place: locationFormOpen.place, onCreateLocation: (value) => {
+                    onChange(value);
+                }, onSaveLocation: (value) => {
+                    onChange(value);
+                } })), _jsx(ExistingLocations, { updateCell: (value) => {
+                    onChange(value);
+                }, existingLocations: existingLocations, close: () => {
+                    setOpenDialog(false);
+                }, open: openDialog, openLocationForm: (place, open) => setLocationFormOpen({ open, place }), customerPortal: customerPortal })] }));
 };
 /**
  *