@nerdjs/sales-kit 4.0.56 → 4.0.57

package/dist/hooks/quote/helpers.js

@@ -20,6 +20,7 @@ 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",
@@ -47,7 +48,7 @@ export const getStopsColumnDef = (dispatch, stopKind, rows, customerPortal, onEd
             editable: false,
             width: 40,
             valueGetter: (_v, row) => {
-                return rows.findIndex((r) => r.key === row.key) + 1;
+                return rows.findIndex((r) => r.id === row.id) + 1;
             },
             renderCell: (p) => (_jsx(Avatar, { size: "sm", variant: "soft", children: p.value })),
         },
@@ -77,25 +78,32 @@ export const getStopsColumnDef = (dispatch, stopKind, rows, customerPortal, onEd
             valueSetter(value, row) {
                 if (value && typeof value != "string")
                     if (typeof value != "number")
-                        if (locationEntityTypeGuard(value))
+                        if (locationEntityTypeGuard(value)) {
                             return {
                                 ...row,
                                 locationId: value.id,
                                 zip: value.address.zip,
+                                placeId: undefined,
                             };
-                        else
+                        }
+                        else {
                             return {
                                 ...row,
                                 locationId: value.id,
                                 zip: value.zip,
+                                placeId: undefined,
                             };
-                    else
+                        }
+                    else {
                         return {
                             ...row,
                             locationId: value,
+                            placeId: undefined,
                         };
-                else
-                    return { ...row, locationId: undefined };
+                    }
+                else {
+                    return { ...row, locationId: undefined, placeId: undefined };
+                }
             },
         },
         {
@@ -120,7 +128,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.key));
+                        dispatch(removeStop(p.row.id));
                     }, color: "inherit" }, "delete"),
             ],
         },
@@ -275,144 +283,181 @@ export const getPalletsColumnDef = (deleteAction, customerPortal, perPalletClass
     });
     return ret;
 };
-const ZipCodeRenderCell = ({ value, errors, }) => {
-    const fetchAutocompleteSuggestions = google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions;
-    const [googleMapsPredictions, setGoogleMapsPredictions] = useState([]);
+const ZipCodeRenderCell = ({ value, errors, row, id, }) => {
+    const apiRef = useGridApiContext();
+    const { getSuggestions } = useGoogleMapsAutocompleteCache();
     useEffect(() => {
-        if (value) {
-            fetchAutocompleteSuggestions({
+        let active = true;
+        if (!value) {
+            return;
+        }
+        if (!row.placeId)
+            getSuggestions({
                 input: value,
-                includedRegionCodes: ["US"],
                 includedPrimaryTypes: ["(regions)"],
+                includedRegionCodes: ["US"],
                 language: "en-US",
                 region: "us",
-            }).then(({ suggestions }) => {
-                setGoogleMapsPredictions(suggestions);
+            }).then((suggestions) => {
+                if (!active || !suggestions?.[0])
+                    return;
+                const place = suggestions?.[0].placePrediction?.toPlace();
+                if (!place)
+                    return;
+                place
+                    .fetchFields({
+                    fields: ["addressComponents"],
+                })
+                    .then((result) => {
+                    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 || "";
+                    apiRef.current.updateRows([
+                        {
+                            id,
+                            zip: finalValue,
+                            placeId: suggestions[0].placePrediction?.placeId || undefined,
+                        },
+                    ]);
+                });
             });
-        }
+        return () => {
+            active = false;
+        };
     }, [value]);
     return (_jsx(Box, { width: "100%", children: value ? (_jsx(Typography, { level: "body-sm", sx: {
                 display: "inline",
-                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: "*" })] })) }));
+                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: "*" })] })) }));
 };
-const ZipCodeRenderEditCell = ({ value: _value, id, field, hasFocus, }) => {
+export const ZipCodeRenderEditCell = ({ id, field, hasFocus, value: initialValue, row, }) => {
     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(() => {
-        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);
-            });
+        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;
+        };
     }, []);
-    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,
-                    });
-                }
-            }
+    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.setEditCellValue({
+                id,
+                field,
+                value: "",
+            });
+            apiRef.current.setEditCellValue({
+                id,
+                field: "placeId",
+                value: undefined,
+            });
+            return;
         }
-        else {
-            apiRef.current?.setEditCellValue({
+        if (typeof newValue === "string") {
+            setInputValue(newValue);
+            apiRef.current.setEditCellValue({
                 id,
                 field,
                 value: newValue,
             });
-        }
-    };
-    const getGoogleAddresses = async (_event, value) => {
-        if (value) {
-            const { suggestions } = await fetchAutocompleteSuggestions({
-                input: value,
-                includedRegionCodes: ["US"],
-                includedPrimaryTypes: ["(regions)"],
-                language: "en-US",
-                region: "us",
+            apiRef.current.setEditCellValue({
+                id,
+                field: "placeId",
+                value: undefined,
             });
-            setGoogleMapsPredictions(suggestions);
+            return;
         }
+        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.setEditCellValue({
+            id,
+            field,
+            value: finalValue,
+        });
+        apiRef.current.setEditCellValue({
+            id,
+            field: "placeId",
+            value: newValue.placePrediction?.placeId || undefined,
+        });
     };
-    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({
+    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({
                 id,
                 field,
                 value: v,
             });
-        }, 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)) }));
+        }, renderInput: (params) => (_jsx(TextField, { ...params, inputRef: ref, placeholder: "Enter zip or city, state...", autoFocus: true })) }));
 };
 const NumberEditCell = ({ id, value, field }) => {
     const apiRef = useGridApiContext();
@@ -672,152 +717,125 @@ export function AccessorialInput({ accessorialIDs: _accessorialIDs, onChange, })
  * @returns {ReactElement} The autocomplete
  */
 export function LocationInputCell(props) {
-    const { id, value, field, hasFocus, onEditLocationClick, customerPortal } = props;
+    const { id, 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 [open, setOpen] = useState(false);
+    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]);
     useLayoutEffect(() => {
-        if (hasFocus) {
+        if (hasFocus)
             ref.current?.focus();
-        }
     }, [hasFocus]);
     useEffect(() => {
-        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 = () => {
+        const idNum = Number(props.value);
+        if (idNum)
+            getLocation(idNum, true);
+    }, [props.value]);
+    const findBounds = useCallback(() => {
+        if (!zip)
+            return;
         googleMapsGeocoder.geocode({
-            address: props.row.zip || props.row.quoteZip,
+            address: zip,
             componentRestrictions: { country: "US" },
             language: "en-US",
         }, (results, status) => {
-            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);
+            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());
                 const circle = new google.maps.Circle({
-                    center: center,
+                    center,
                     radius: 10000,
                 });
                 const bounds = circle.getBounds() || undefined;
                 setBounds(bounds);
             }
         });
-    };
-    const getGoogleAddresses = async (searchText) => {
-        if (searchText) {
-            const { suggestions } = await fetchAutocompleteSuggestions({
-                input: searchText,
-                locationBias: bounds,
-                language: "en-US",
-                region: "us",
-                includedRegionCodes: ["US"],
-            });
-            setGoogleMapsPredictions(suggestions);
+    }, [zip]);
+    useEffect(() => {
+        if (props.row.zip || props.row.quoteZip) {
+            findBounds();
         }
-    };
-    const onInputChange = useCallback((e) => {
-        const zip = props.row.zip || props.row.quoteZip || "";
-        const _zip = [...zip.matchAll(/\d/g)].map((m) => m[0]).join("");
+    }, [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: _zip ? _zip : zip,
-            location: e.target.value,
+            zip,
+            location: value,
         });
-        getGoogleAddresses(e.target.value);
-    }, [props.row]);
-    const debouncedChangeHandler = useMemo(() => debounce(onInputChange, 500), []);
+        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)) {
+            apiRef.current?.setEditCellValue({
+                id,
+                field,
+                value: newValue,
+            });
+            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;
+        }
+    };
     return (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { fullWidth: true, sx: {
-                    "& fieldset": {
-                        borderWidth: "0px !important",
-                    },
+                    "& fieldset": { borderWidth: "0px !important" },
                 }, options: [
                     ...(locationSuggestions ?? []),
                     ...(googleMapsPredictions ?? []),
-                ], 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) => {
+                ], 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) => {
                     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({
@@ -825,131 +843,92 @@ export const LocationInput = ({ zip, locationID, onChange, customerPortal, autoC
         place: undefined,
     });
     const [openDialog, setOpenDialog] = useState(false);
-    const [locationInputValue, setLocationInputValue] = useState("");
-    const [searchExistingLocation, { data: existingLocations }] = useLazySearchExistingLocationQuery();
-    const [searchLocation, { data: locationSuggestions }] = useLazySearchLocationQuery();
-    const [bounds, setBounds] = useState();
+    const [inputValue, setInputValue] = useState("");
     const [googleMapsPredictions, setGoogleMapsPredictions] = useState([]);
-    const fetchAutocompleteSuggestions = google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions;
     const googleMapsGeocoder = new google.maps.Geocoder();
+    const [bounds, setBounds] = useState();
+    const [searchExistingLocation, { data: existingLocations }] = useLazySearchExistingLocationQuery();
+    const [searchLocation, { data: locationSuggestions }] = useLazySearchLocationQuery();
     const [getLocation] = useLazyGetLocationQuery();
     const [location, setLocation] = useState();
+    const { getSuggestions } = useGoogleMapsAutocompleteCache();
     useEffect(() => {
         if (locationID) {
             getLocation(locationID, true)
                 .unwrap()
-                .then((d) => setLocation(d))
+                .then(setLocation)
                 .catch(() => undefined);
         }
-        else
+        else {
             setLocation(undefined);
+        }
     }, [locationID]);
     useEffect(() => {
-        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 = () => {
+        if (!zip)
+            return;
         googleMapsGeocoder.geocode({
             address: zip,
             componentRestrictions: { country: "US" },
-            language: "en",
         }, (results, status) => {
-            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);
+            if (status === google.maps.GeocoderStatus.OK && results?.[0]) {
+                const loc = results[0].geometry.location;
                 const circle = new google.maps.Circle({
-                    center: center,
+                    center: loc,
                     radius: 10000,
                 });
-                const bounds = circle.getBounds() || undefined;
-                setBounds(bounds);
+                setBounds(circle.getBounds() || undefined);
             }
         });
-    };
-    const getGoogleAddresses = async (searchText) => {
-        if (searchText) {
-            const { suggestions } = await fetchAutocompleteSuggestions({
-                input: searchText,
-                locationBias: bounds,
-                language: "en-US",
-                region: "us",
-                includedRegionCodes: ["US"],
+    }, [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"],
             });
-            setGoogleMapsPredictions(suggestions);
+            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 });
         }
     };
-    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 })] }));
+    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 })] }));
 };
 /**
  *