@nerdjs/sales-kit 2.0.35-alpha.2 → 2.0.36

package/dist/hooks/locationsForm/locationsFormSales.js

@@ -0,0 +1,826 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, FormControl, FormLabel, Input, Typography, Grid, Checkbox, CircularProgress, Select, Option, FormHelperText, Modal, ModalDialog, Textarea, Tabs, TabList, tabClasses, Tab, TabPanel, Box, useTheme, Autocomplete, } from "@mui/joy";
+import { NerdClickToCopy, NerdDatePicker, NerdFileUpload, NerdPhoneField, NerdTimePicker, useNerdConfirm, } from "@nerdjs/nerd-ui";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import { locationEntityTypeGuard } from "../../entities/location/location";
+import { locationFormOpenSelector, selectedPlaceSelector, setLocationFormOpen, } from "../../redux/quote";
+import { useCreateLocationAccessorialV1Mutation, useCreateLocationV1Mutation, useDeleteLocationAccessorialsV1Mutation, useGetAccessorialsV1Query, useGetLocationAccessorialsV1Query, useGetLocationV1Query, useUpdateLocationAccessorialsV1Mutation, useUpdateLocationV1Mutation, } from "../../redux/locationV1";
+import { DateTime } from "luxon";
+import { Cancel, Delete, Edit, OpenInNew, Save } from "@mui/icons-material";
+import { useMediaQuery, Select as MuiSelect, MenuItem } from "@mui/material";
+import { DataGridPro, GridActionsCellItem, GridRowEditStopReasons, GridRowModes, useGridApiContext, } from "@mui/x-data-grid-pro";
+import { useDeleteArcherFileMutation, useGetArcherFilesQuery, useShareArcherFileMutation, useUnshareArcherFileMutation, useUploadArcherFileMutation, } from "../../redux/archerFile";
+/**
+ *
+ * @param {object} props props
+ * @param {Function} props.onConfirm onConfirm callback
+ * @returns {ReactElement} LocationForm
+ */
+export function LocationFormSales({ onCreateLocation, }) {
+    const { t } = useTranslation("salesKit");
+    const dispatch = useDispatch();
+    const open = useSelector(locationFormOpenSelector);
+    const place = useSelector(selectedPlaceSelector);
+    const [createLocation] = useCreateLocationV1Mutation();
+    const [updateLocation] = useUpdateLocationV1Mutation();
+    const [validationObject, setValidationObject] = useState({
+        phone: true,
+        phone1: true,
+        openTime: true,
+        closeTime: true,
+        FCFSIN: true,
+        FCFSOUT: true,
+    });
+    const { data, isFetching } = useGetLocationV1Query(locationEntityTypeGuard(place) ? place.id : 0, { skip: locationEntityTypeGuard(place) ? false : true });
+    const [location, setLocation] = useState(data || {});
+    const [body, setBody] = useState({
+        verified: false,
+    });
+    const theme = useTheme();
+    const matches = useMediaQuery(theme.breakpoints.down("lg"));
+    const googleMapsAutocompleteService = new google.maps.places.AutocompleteService();
+    const googleMapsGeocoder = new google.maps.Geocoder();
+    const [googleMapsPredictions, setGoogleMapsPredictions] = useState(null);
+    const [value, setValue] = useState(null);
+    const [loadingMapsLocations, setLoadingMapsLocations] = useState(true);
+    const loading = loadingMapsLocations || isFetching;
+    const addressFormGeocoder = (place) => {
+        const address = {};
+        const _ref = place.address_components;
+        const _len = _ref.length;
+        for (let _i = 0; _i < _len; _i++) {
+            const i = _ref[_i];
+            const _ref1 = i.types;
+            const _len1 = _ref1.length;
+            for (let _j = 0; _j < _len1; _j++) {
+                const t = _ref1[_j];
+                address[t] = i.short_name;
+                address[`${t}_long`] = i.long_name;
+            }
+        }
+        const line1 = `${address.street_number ? `${address.street_number} ` : ""}${address.route}`.trim();
+        const city = address.locality_long ||
+            address.sublocality_long ||
+            address.sublocality_level_1_long ||
+            address.neighborhood_long;
+        const state = address.administrative_area_level_1;
+        const zip = address.postal_code;
+        const formatted_address = place.formatted_address;
+        return { line1, city, state, zip, formatted_address };
+    };
+    useEffect(() => {
+        if (data) {
+            setLocation(data);
+            if (data.formatted_address) {
+                getGoogleAddresses(data.formatted_address, true);
+            }
+            else {
+                setLoadingMapsLocations(false);
+            }
+        }
+    }, [data]);
+    useEffect(() => {
+        if (value && value.place_id !== location.place_id) {
+            googleMapsGeocoder.geocode({ placeId: value.place_id }, (result) => {
+                const place = result?.[0];
+                if (place) {
+                    const address = addressFormGeocoder(place);
+                    setBody({
+                        ...body,
+                        ...address,
+                        place_id: place.place_id,
+                    });
+                    setLocation({
+                        ...location,
+                        ...address,
+                        place_id: place.place_id,
+                    });
+                }
+            });
+        }
+    }, [value]);
+    useEffect(() => {
+        if (place && !locationEntityTypeGuard(place)) {
+            const address = addressFormGeocoder(place);
+            setBody({ ...address });
+            setLocation({ ...address });
+            setLoadingMapsLocations(false);
+            getGoogleAddresses(place.formatted_address, true);
+        }
+    }, [place]);
+    useEffect(() => {
+        if (!loadingMapsLocations) {
+            setValue(googleMapsPredictions?.find((l) => location.place_id === l.place_id) ||
+                googleMapsPredictions?.[0] ||
+                null);
+        }
+    }, [loadingMapsLocations]);
+    const handleSaveLocation = () => {
+        if (location.id) {
+            updateLocation({
+                id: location.id,
+                body: { location: { ...body } },
+            });
+        }
+        else {
+            createLocation(body)
+                .unwrap()
+                .then((l) => {
+                onCreateLocation(l);
+            });
+        }
+    };
+    const handleClose = () => {
+        setValue(null);
+        setBody({});
+        setLocation({});
+        setLoadingMapsLocations(true);
+        dispatch(setLocationFormOpen(false, undefined));
+    };
+    const getGoogleAddresses = (searchText, init) => {
+        if (init)
+            setLoadingMapsLocations(true);
+        googleMapsAutocompleteService.getPlacePredictions({
+            input: searchText,
+            componentRestrictions: { country: "us" },
+            types: ["address"],
+            language: "en",
+        }, (googleSuggestions) => {
+            setGoogleMapsPredictions(googleSuggestions);
+            if (init)
+                setLoadingMapsLocations(false);
+        });
+    };
+    return (_jsx(Modal, { open: open, onClose: handleClose, onClick: (event) => event.stopPropagation(), children: _jsx(ModalDialog, { layout: matches ? "fullscreen" : "center", "aria-labelledby": "edit-location-modal-dialog-title", children: loading ? (_jsx(Box, { sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                }, children: _jsx(CircularProgress, {}) })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { id: "edit-location-modal-dialog-title", level: "h4", children: location?.id ? t("Edit Location") : t("New Location") }), _jsxs(Tabs, { defaultValue: 0, sx: {
+                            bgcolor: "transparent",
+                            overflowY: "auto",
+                            overflowX: "hidden",
+                        }, size: "sm", children: [_jsxs(TabList, { sx: {
+                                    p: 0.5,
+                                    gap: 0.5,
+                                    borderRadius: "xl",
+                                    bgcolor: "background.level1",
+                                    [`& .${tabClasses.root}[aria-selected="true"]`]: {
+                                        boxShadow: "sm",
+                                        bgcolor: "background.surface",
+                                    },
+                                }, children: [_jsx(Tab, { disableIndicator: true, children: "Main" }), location.id ? (_jsxs(_Fragment, { children: [_jsx(Tab, { disableIndicator: true, children: "Accessorials" }), _jsx(Tab, { disableIndicator: true, children: "Documents" })] })) : null] }), _jsx(TabPanel, { value: 0, sx: {
+                                    overflowY: "auto",
+                                    overflowX: "hidden",
+                                }, children: _jsxs(Grid, { container: true, spacing: 0.5, children: [_jsx(Grid, { xs: 12, children: _jsx(Typography, { level: "h4", color: "neutral", children: _jsx("i", { className: "fa-solid fa-location-dot" }) }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("Name") }), _jsx(Input, { fullWidth: true, onChange: (e) => {
+                                                            setLocation((l) => ({ ...l, name: e.target.value }));
+                                                            setBody((l) => ({ ...l, name: e.target.value }));
+                                                        }, size: "sm", value: location?.name ?? "", placeholder: t("Facility's name") })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Line 1" }), _jsx(Input, { fullWidth: true, readOnly: true, size: "sm", value: location?.line1 ?? "", placeholder: t("Line 1") })] }) }), _jsx(Grid, { xs: 6, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "City" }), _jsx(Input, { fullWidth: true, readOnly: true, size: "sm", value: location?.city ?? "", placeholder: t("City") })] }) }), _jsx(Grid, { xs: 3, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "State" }), _jsx(Input, { fullWidth: true, readOnly: true, size: "sm", value: location?.state ?? "", placeholder: t("State") })] }) }), _jsx(Grid, { xs: 3, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "ZIP" }), _jsx(Input, { fullWidth: true, readOnly: true, size: "sm", value: location?.zip ?? "", placeholder: t("ZIP") })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Address" }), _jsx(Autocomplete, { value: value, options: googleMapsPredictions || [], onInputChange: (_e, v) => {
+                                                            getGoogleAddresses(v, false);
+                                                        }, onChange: (_e, v) => setValue(v), getOptionLabel: (option) => `${option.structured_formatting.main_text}, ${option.structured_formatting.secondary_text}`, isOptionEqualToValue: (o, v) => o.place_id === v.place_id })] }) }), _jsx(Grid, { xs: 12, mt: 1, children: _jsx(Typography, { level: "h4", color: "neutral", children: _jsx("i", { className: "fa-solid fa-address-card" }) }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Emails" }), _jsx(Input, { fullWidth: true, onChange: (e) => {
+                                                            setLocation((l) => ({
+                                                                ...l,
+                                                                email_addresses: e.target.value,
+                                                            }));
+                                                            setBody((l) => ({
+                                                                ...l,
+                                                                email_addresses: e.target.value,
+                                                            }));
+                                                        }, size: "sm", value: location?.email_addresses || "", placeholder: "one@email.com; two@email.com..." })] }) }), _jsx(Grid, { xs: 6, lg: 3, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Contact" }), _jsx(Input, { fullWidth: true, onChange: (e) => {
+                                                            setLocation((l) => ({
+                                                                ...l,
+                                                                contact: e.target.value,
+                                                            }));
+                                                            setBody((l) => ({
+                                                                ...l,
+                                                                contact: e.target.value,
+                                                            }));
+                                                        }, size: "sm", value: location.contact || "", placeholder: "Contact" }), !matches ? (
+                                                    /* Don't remove the FormHelperText or the space between tags. */
+                                                    _jsx(FormHelperText, { children: " " })) : null] }) }), _jsx(Grid, { xs: 12, lg: 4.5, children: _jsx(NerdPhoneField, { value: location.phone, label: t("Phone"), inputProps: {
+                                                    placeholder: t("Phone"),
+                                                    size: "sm",
+                                                    fullWidth: true,
+                                                }, onAccept: (value) => {
+                                                    setValidationObject({
+                                                        ...validationObject,
+                                                        phone: true,
+                                                    });
+                                                    setLocation((l) => ({ ...l, phone: value }));
+                                                    setBody((l) => ({ ...l, phone: value }));
+                                                }, onError: () => {
+                                                    setValidationObject({
+                                                        ...validationObject,
+                                                        phone: false,
+                                                    });
+                                                } }) }), _jsx(Grid, { xs: 12, lg: 4.5, children: _jsx(NerdPhoneField, { value: location.ext_number, label: "Ext", inputProps: {
+                                                    placeholder: "Ext",
+                                                    size: "sm",
+                                                    fullWidth: true,
+                                                }, onAccept: (value) => {
+                                                    setValidationObject({
+                                                        ...validationObject,
+                                                        phone1: true,
+                                                    });
+                                                    setLocation((l) => ({ ...l, ext_number: value }));
+                                                    setBody((l) => ({ ...l, ext_number: value }));
+                                                }, onError: () => {
+                                                    setValidationObject({
+                                                        ...validationObject,
+                                                        phone1: false,
+                                                    });
+                                                } }) }), _jsx(Grid, { xs: 12, mt: 1, children: _jsx(Typography, { level: "h4", color: "neutral", children: _jsx("i", { className: "fa-regular fa-memo-circle-info" }) }) }), _jsx(Grid, { lg: 6, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: " " }), _jsx(Checkbox, { label: "Need File", checked: location.needs_file || false, onChange: (e) => {
+                                                            setLocation((l) => ({
+                                                                ...l,
+                                                                needs_file: e.target.checked,
+                                                            }));
+                                                            setBody((l) => ({
+                                                                ...l,
+                                                                needs_file: e.target.checked,
+                                                            }));
+                                                        } })] }) }), _jsx(Grid, { lg: 6, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: " " }), _jsx(Checkbox, { label: "Need Liquor Permit", checked: location.needs_liquor_permit || false, onChange: (e) => {
+                                                            setLocation((l) => ({
+                                                                ...l,
+                                                                needs_liquor_permit: e.target.checked,
+                                                            }));
+                                                            setBody((l) => ({
+                                                                ...l,
+                                                                needs_liquor_permit: e.target.checked,
+                                                            }));
+                                                        } })] }) }), _jsx(Grid, { lg: 12, children: _jsx(Checkbox, { label: "First come first serve(FCFS)", checked: location.first_come_first_serve || false, onChange: (e) => {
+                                                    setLocation((l) => ({
+                                                        ...l,
+                                                        first_come_first_serve: e.target.checked,
+                                                    }));
+                                                    setBody((l) => ({
+                                                        ...l,
+                                                        first_come_first_serve: e.target.checked,
+                                                    }));
+                                                } }) }), _jsx(Grid, { lg: 5, children: _jsx(NerdDatePicker, { value: location.first_come_date
+                                                    ? DateTime.fromISO(location.first_come_date)
+                                                    : null, onChange: (newDate) => {
+                                                    setLocation((l) => ({
+                                                        ...l,
+                                                        first_come_date: newDate?.toISO() || "",
+                                                    }));
+                                                    setBody((l) => ({
+                                                        ...l,
+                                                        first_come_date: newDate?.toISO() || "",
+                                                    }));
+                                                } }) }), _jsx(Grid, { lg: "auto", children: _jsx(NerdTimePicker, { label: "FCFS IN", inputProps: {
+                                                    sx: {
+                                                        width: 100,
+                                                    },
+                                                    slotProps: {
+                                                        input: {
+                                                            sx: {
+                                                                p: 0.5,
+                                                            },
+                                                        },
+                                                    },
+                                                }, value: location.first_come_in
+                                                    ? DateTime.fromISO(location.first_come_in)
+                                                        .toUTC()
+                                                        .toFormat("HH:mm")
+                                                    : null, onChange: (time) => {
+                                                    if (!time.isValid) {
+                                                        setValidationObject({
+                                                            ...validationObject,
+                                                            FCFSIN: false,
+                                                        });
+                                                    }
+                                                    else {
+                                                        setValidationObject({
+                                                            ...validationObject,
+                                                            FCFSIN: true,
+                                                        });
+                                                        const newTime = time.duration
+                                                            ? DateTime.now()
+                                                                .toUTC()
+                                                                .set({
+                                                                hour: time.duration.hours,
+                                                                minute: time.duration.minutes,
+                                                                second: 0,
+                                                            })
+                                                                .toISO() || ""
+                                                            : "";
+                                                        setLocation((l) => ({
+                                                            ...l,
+                                                            first_come_in: newTime,
+                                                        }));
+                                                        setBody((l) => ({
+                                                            ...l,
+                                                            first_come_in: newTime,
+                                                        }));
+                                                    }
+                                                } }) }), _jsx(Grid, { lg: "auto", children: _jsx(NerdTimePicker, { label: "FCFS OUT", inputProps: {
+                                                    sx: {
+                                                        width: 100,
+                                                    },
+                                                    slotProps: {
+                                                        input: {
+                                                            sx: {
+                                                                p: 0.5,
+                                                            },
+                                                        },
+                                                    },
+                                                }, value: location.first_come_out
+                                                    ? DateTime.fromISO(location.first_come_out)
+                                                        .toUTC()
+                                                        .toFormat("HH:mm")
+                                                    : null, onChange: (time) => {
+                                                    if (!time.isValid) {
+                                                        setValidationObject({
+                                                            ...validationObject,
+                                                            FCFSOUT: false,
+                                                        });
+                                                    }
+                                                    else {
+                                                        setValidationObject({
+                                                            ...validationObject,
+                                                            FCFSOUT: true,
+                                                        });
+                                                        const newTime = time.duration
+                                                            ? DateTime.now()
+                                                                .toUTC()
+                                                                .set({
+                                                                hour: time.duration.hours,
+                                                                minute: time.duration.minutes,
+                                                                second: 0,
+                                                            })
+                                                                .toISO() || ""
+                                                            : "";
+                                                        setLocation((l) => ({
+                                                            ...l,
+                                                            first_come_out: newTime,
+                                                        }));
+                                                        setBody((l) => ({
+                                                            ...l,
+                                                            first_come_out: newTime,
+                                                        }));
+                                                    }
+                                                } }) }), _jsx(Grid, { xs: 6, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "TMS Link" }), _jsx(Input, { fullWidth: true, onChange: (e) => {
+                                                            setLocation((l) => ({
+                                                                ...l,
+                                                                tms_link: e.target.value,
+                                                            }));
+                                                            setBody((l) => ({
+                                                                ...l,
+                                                                tms_link: e.target.value,
+                                                            }));
+                                                        }, size: "sm", value: location.tms_link || "", placeholder: "TMS Link" })] }) }), _jsx(Grid, { xs: 2, alignSelf: "end", children: _jsx(Button, { variant: "soft", size: "sm", component: location.tms_link ? "a" : "button", href: location.tms_link
+                                                    ? location.tms_link.match(/^https?:\/{2}/)
+                                                        ? location.tms_link
+                                                        : `//${location.tms_link}`
+                                                    : "", startDecorator: _jsx(OpenInNew, {}), target: "_blank", rel: "noopener noreferrer", sx: {
+                                                    textDecoration: "none!important",
+                                                }, children: "GO" }) }), _jsx(Grid, { xs: 12, lg: 4, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "PSR Days" }), _jsxs(Select, { size: "sm", defaultValue: location.preschedule_days || 0, onChange: (_e, value) => {
+                                                            setLocation((l) => ({
+                                                                ...l,
+                                                                preschedule_days: value || 0,
+                                                            }));
+                                                            setBody((l) => ({
+                                                                ...l,
+                                                                preschedule_days: value || 0,
+                                                            }));
+                                                        }, slotProps: {
+                                                            listbox: {
+                                                                sx: { zIndex: (theme) => theme.zIndex.modal },
+                                                            },
+                                                        }, children: [_jsx(Option, { value: 0, children: "None" }, 0), [1, 2, 3, 4, 5].map((v) => (_jsx(Option, { value: v, children: v }, v))), _jsx(Option, { value: 14, children: "ASAP" }, 14)] })] }) }), _jsx(Grid, { xs: 4, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Channel" }), _jsx(Select, { size: "sm", defaultValue: location.scheduling_channel, onChange: (_e, value) => {
+                                                            setLocation((l) => ({
+                                                                ...l,
+                                                                scheduling_channel: value || "",
+                                                            }));
+                                                            setBody((l) => ({
+                                                                ...l,
+                                                                scheduling_channel: value || "",
+                                                            }));
+                                                        }, slotProps: {
+                                                            listbox: {
+                                                                sx: { zIndex: (theme) => theme.zIndex.modal },
+                                                            },
+                                                        }, children: [
+                                                            { label: "None", value: "" },
+                                                            { label: "Email", value: "email" },
+                                                            { label: "Call", value: "call" },
+                                                            { label: "Portal", value: "portal" },
+                                                            { label: "Customer", value: "customer" },
+                                                        ].map((v) => (_jsx(Option, { value: v.value, children: v.label }, v.value))) }), _jsx(FormHelperText, { children: " " })] }) }), _jsx(Grid, { lg: "auto", children: _jsx(NerdTimePicker, { inputProps: {
+                                                    sx: {
+                                                        width: 100,
+                                                    },
+                                                }, label: "Open Time", value: location.time_from
+                                                    ? DateTime.fromISO(location.time_from)
+                                                        .toUTC()
+                                                        .toFormat("HH:mm")
+                                                    : null, onChange: (time) => {
+                                                    if (!time.isValid) {
+                                                        setValidationObject({
+                                                            ...validationObject,
+                                                            openTime: false,
+                                                        });
+                                                    }
+                                                    else {
+                                                        setValidationObject({
+                                                            ...validationObject,
+                                                            openTime: true,
+                                                        });
+                                                        const newTime = time.duration
+                                                            ? DateTime.now()
+                                                                .toUTC()
+                                                                .set({
+                                                                hour: time.duration.hours,
+                                                                minute: time.duration.minutes,
+                                                                second: 0,
+                                                            })
+                                                                .toISO() || ""
+                                                            : "";
+                                                        setLocation((l) => ({
+                                                            ...l,
+                                                            time_from: newTime,
+                                                        }));
+                                                        setBody((l) => ({
+                                                            ...l,
+                                                            time_from: newTime,
+                                                        }));
+                                                    }
+                                                } }) }), _jsx(Grid, { lg: "auto", children: _jsx(NerdTimePicker, { inputProps: {
+                                                    sx: {
+                                                        width: 100,
+                                                    },
+                                                }, label: "Close Time", value: location.time_to
+                                                    ? DateTime.fromISO(location.time_to)
+                                                        .toUTC()
+                                                        .toFormat("HH:mm")
+                                                    : null, onChange: (time) => {
+                                                    if (!time.isValid) {
+                                                        setValidationObject({
+                                                            ...validationObject,
+                                                            closeTime: false,
+                                                        });
+                                                    }
+                                                    else {
+                                                        setValidationObject({
+                                                            ...validationObject,
+                                                            closeTime: true,
+                                                        });
+                                                        const newTime = time.duration
+                                                            ? DateTime.now()
+                                                                .toUTC()
+                                                                .set({
+                                                                hour: time.duration.hours,
+                                                                minute: time.duration.minutes,
+                                                                second: 0,
+                                                            })
+                                                                .toISO() || ""
+                                                            : "";
+                                                        setLocation((l) => ({
+                                                            ...l,
+                                                            time_to: newTime,
+                                                        }));
+                                                        setBody((l) => ({
+                                                            ...l,
+                                                            time_to: newTime,
+                                                        }));
+                                                    }
+                                                } }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Prev. Appts." }), _jsx(Textarea, { onChange: (e) => {
+                                                            setLocation((l) => ({
+                                                                ...l,
+                                                                prev_apts: e.target.value,
+                                                            }));
+                                                            setBody((l) => ({
+                                                                ...l,
+                                                                prev_apts: e.target.value,
+                                                            }));
+                                                        }, size: "sm", value: location.prev_apts || "" })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Location Notes" }), _jsx(Textarea, { onChange: (e) => {
+                                                            setLocation((l) => ({
+                                                                ...l,
+                                                                notes: e.target.value,
+                                                            }));
+                                                            setLocation((l) => ({
+                                                                ...l,
+                                                                notes: e.target.value,
+                                                            }));
+                                                        }, size: "sm", value: location.notes || "" })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Location Scheduling Notes" }), _jsx(Textarea, { onChange: (e) => {
+                                                            setLocation((l) => ({
+                                                                ...l,
+                                                                scheduling_notes: e.target.value,
+                                                            }));
+                                                            setBody((l) => ({
+                                                                ...l,
+                                                                scheduling_notes: e.target.value,
+                                                            }));
+                                                        }, size: "sm", value: location.scheduling_notes || "" })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Driver Instructions" }), _jsx(Textarea, { onChange: (e) => {
+                                                            setLocation((l) => ({
+                                                                ...l,
+                                                                driver_instructions: e.target.value,
+                                                            }));
+                                                            setBody((l) => ({
+                                                                ...l,
+                                                                driver_instructions: e.target.value,
+                                                            }));
+                                                        }, size: "sm", value: location.driver_instructions || "" })] }) })] }) }), location.id ? (_jsx(TabPanel, { value: 1, sx: {
+                                    overflowY: "auto",
+                                    overflowX: "hidden",
+                                }, children: _jsx(Box, { sx: {
+                                        width: { xs: "85vw", lg: "40vw" },
+                                        height: { xs: "55vh", lg: "70vh" },
+                                    }, children: _jsx(LocationAccessoralsList, { locationID: location.id }) }) })) : null, location.id ? (_jsx(TabPanel, { value: 2, sx: {
+                                    overflowY: "auto",
+                                    overflowX: "hidden",
+                                }, children: _jsx(Box, { sx: {
+                                        width: { xs: "85vw", lg: "40vw" },
+                                        height: { xs: "55vh", lg: "70vh" },
+                                    }, children: _jsx(DocumentsList, { locationID: location.id }) }) })) : null] }), _jsxs(Box, { sx: {
+                            display: "flex",
+                            gap: 1,
+                            justifyContent: "flex-end",
+                            pt: 2,
+                        }, children: [_jsx(Button, { variant: "soft", color: "neutral", onClick: () => {
+                                    handleClose();
+                                }, children: t("Cancel") }), _jsx(Button, { variant: "soft", onClick: () => {
+                                    handleSaveLocation();
+                                    handleClose();
+                                }, disabled: Object.values(validationObject).every(Boolean) ? false : true, children: location.id ? t("Save") : t("Create") })] })] })) }) }));
+}
+function LocationAccessoralsList({ locationID }) {
+    const { data: accessorials } = useGetAccessorialsV1Query();
+    const { data, isFetching } = useGetLocationAccessorialsV1Query({
+        id: locationID,
+    });
+    const [createLocationAccessorial] = useCreateLocationAccessorialV1Mutation();
+    const [updateLocationAccessorial] = useUpdateLocationAccessorialsV1Mutation();
+    const [deleteLocationAccessorial] = useDeleteLocationAccessorialsV1Mutation();
+    const [rows, setRows] = useState(data || []);
+    const [rowModesModel, setRowModesModel] = useState({});
+    useEffect(() => {
+        setRows(data || []);
+    }, [data]);
+    const handleEditClick = (id) => () => {
+        setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } });
+    };
+    const handleSaveClick = (id) => () => {
+        setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
+    };
+    const handleDeleteClick = (id) => () => {
+        deleteLocationAccessorial(Number(id));
+    };
+    const handleCancelClick = (id) => () => {
+        setRowModesModel({
+            ...rowModesModel,
+            [id]: { mode: GridRowModes.View, ignoreModifications: true },
+        });
+        const editedRow = rows.find((row) => row.id === id);
+        if (editedRow?.isNew) {
+            setRows(rows.filter((row) => row.id !== id));
+        }
+    };
+    const processRowUpdate = (newRow) => {
+        const { isNew, ...row } = newRow;
+        if (isNew) {
+            createLocationAccessorial({ locationaccessorial: row });
+        }
+        else {
+            updateLocationAccessorial({
+                id: row.id,
+                body: { locationaccessorial: row },
+            });
+        }
+        return row;
+    };
+    const handleRowEditStop = (params, event) => {
+        if (params.reason === GridRowEditStopReasons.rowFocusOut) {
+            event.defaultMuiPrevented = true;
+        }
+    };
+    return (_jsx(DataGridPro, { editMode: "row", density: "compact", rowModesModel: rowModesModel, processRowUpdate: processRowUpdate, onRowEditStop: handleRowEditStop, onRowModesModelChange: (v) => setRowModesModel(v), experimentalFeatures: {
+            newEditingApi: true,
+        }, hideFooter: true, components: {
+            Toolbar: CustomToolbar,
+        }, componentsProps: {
+            toolbar: { setRows, setRowModesModel, locationID },
+        }, loading: isFetching, rows: rows || [], columns: [
+            {
+                field: "accessorial_id",
+                headerName: "Accessorial",
+                flex: 1,
+                editable: true,
+                renderCell(params) {
+                    return accessorials?.find((a) => a.id == params.value)?.name || "";
+                },
+                renderEditCell(params) {
+                    return _jsx(AccessorialEditCell, { ...params });
+                },
+            },
+            {
+                field: "cost_amount",
+                headerName: "Amount",
+                type: "number",
+                flex: 1,
+                editable: true,
+            },
+            {
+                field: "load_type",
+                headerName: "Load Type",
+                flex: 1,
+                editable: true,
+                type: "singleSelect",
+                valueOptions: [
+                    { value: "all", label: "All" },
+                    { value: "tl", label: "TL" },
+                    { value: "ltl", label: "LTL" },
+                ],
+                valueFormatter(params) {
+                    return (params.value.charAt(0).toUpperCase() + params.value.substring(1));
+                },
+            },
+            {
+                field: "contract",
+                headerName: "Contract",
+                type: "boolean",
+                flex: 1,
+                editable: true,
+            },
+            {
+                field: "actions",
+                type: "actions",
+                headerName: "Actions",
+                width: 100,
+                cellClassName: "actions",
+                getActions: ({ id }) => {
+                    const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit;
+                    if (isInEditMode) {
+                        return [
+                            _jsx(GridActionsCellItem, { icon: _jsx(Save, {}), label: "Save", sx: {
+                                    color: "primary.main",
+                                }, onClick: handleSaveClick(id) }, "save"),
+                            _jsx(GridActionsCellItem, { icon: _jsx(Cancel, {}), label: "Cancel", className: "textPrimary", onClick: handleCancelClick(id), color: "inherit" }, "cancel"),
+                        ];
+                    }
+                    return [
+                        _jsx(GridActionsCellItem, { icon: _jsx(Edit, {}), label: "Edit", className: "textPrimary", onClick: handleEditClick(id), color: "inherit" }, "edit"),
+                        _jsx(GridActionsCellItem, { icon: _jsx(Delete, {}), label: "Delete", onClick: handleDeleteClick(id), color: "inherit" }, "delete"),
+                    ];
+                },
+            },
+        ] }));
+}
+/**
+ *
+ * @returns {ReactElement} Custom toolbar for Datagrid
+ */
+function CustomToolbar(props) {
+    const { setRowModesModel, setRows, locationID } = props;
+    const handleClick = () => {
+        const id = DateTime.now().toMillis();
+        setRows((oldRows) => [
+            ...oldRows,
+            {
+                id,
+                name: "",
+                accessorial_id: 0,
+                contract: false,
+                cost_amount: 0,
+                load_type: "All",
+                location_id: locationID,
+                isNew: true,
+            },
+        ]);
+        setRowModesModel((oldModel) => ({
+            ...oldModel,
+            [id]: { mode: GridRowModes.Edit, fieldToFocus: "accessorial_id" },
+        }));
+    };
+    return (_jsx(_Fragment, { children: _jsx(Box, { sx: { display: "flex", gap: 1, p: 1, position: "relative" }, children: _jsx(Button, { variant: "soft", size: "sm", onClick: handleClick, children: "+ Accessorial" }) }) }));
+}
+function AccessorialEditCell(params) {
+    const { field, id, value } = params;
+    const { data: accessorials } = useGetAccessorialsV1Query();
+    const gridApiRef = useGridApiContext();
+    return (_jsx(MuiSelect, { defaultValue: value || "", onChange: (e) => gridApiRef.current.setEditCellValue({
+            field,
+            id,
+            value: e.target.value,
+        }), fullWidth: true, children: accessorials?.map((a) => (_jsx(MenuItem, { value: a.id, children: a.name }, a.id))) }));
+}
+function DocumentsList({ locationID }) {
+    const params = {
+        filter: JSON.stringify([
+            { property: "model_type", value: "Location" },
+            { property: "model_id", value: locationID },
+        ]),
+    };
+    const confirm = useNerdConfirm();
+    const [shareFileAction] = useShareArcherFileMutation();
+    const [unshareAction] = useUnshareArcherFileMutation();
+    const [deleteFile] = useDeleteArcherFileMutation();
+    const { data: rows, isFetching } = useGetArcherFilesQuery(params);
+    const [iframe, setIframe] = useState("");
+    const [iframeLoading, setIframeLoading] = useState(true);
+    const [shareFile, setShareFile] = useState(null);
+    const columns = useMemo(() => [
+        { field: "file_name", headerName: "File", flex: 1 },
+        {
+            field: "description",
+            headerName: "Type",
+            flex: 1,
+        },
+        {
+            field: "created_at",
+            headerName: "Uploaded At",
+            flex: 1,
+            type: "string",
+            valueFormatter(params) {
+                return DateTime.fromISO(params.value).toUTC().toFormat("ff");
+            },
+        },
+        {
+            field: "user",
+            headerName: "Uploaded By",
+            flex: 1,
+        },
+        {
+            field: "actions",
+            type: "actions",
+            headerName: "Actions",
+            getActions: ({ row }) => [
+                _jsx(GridActionsCellItem, { icon: _jsx("i", { className: "fa-solid fa-eye" }), label: `View File`, onClick: () => {
+                        setIframe(`https://api.alpha.wa-labs.com/v3/file-service/files/${row.id}?inline=1`);
+                    } }, "view"),
+                _jsx(GridActionsCellItem, { showInMenu: true, icon: _jsx("i", { className: "fa-solid fa-download" }), label: `Download File`, onClick: () => {
+                        const link = document.createElement("a");
+                        link.href = `https://api.alpha.wa-labs.com/v3/file-service/files/${row.id}`;
+                        link.click();
+                        link.remove();
+                    } }, "download"),
+                _jsx(GridActionsCellItem, { showInMenu: true, icon: _jsx("i", { className: "fa-solid fa-trash" }), label: `Delete File`, onClick: () => {
+                        confirm.setOpen({
+                            onConfirm() {
+                                deleteFile(row.id);
+                            },
+                        });
+                    } }, "delete"),
+                _jsx(GridActionsCellItem, { showInMenu: true, icon: _jsx("i", { className: "fa-solid fa-share" }), label: `Share File`, onClick: () => {
+                        setShareFile(row);
+                    } }, "share"),
+            ],
+        },
+    ], []);
+    const handleClose = () => {
+        setIframe("");
+        setIframeLoading(true);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataGridPro, { hideFooter: true, loading: isFetching, rows: rows || [], columns: columns, components: {
+                    Toolbar: DocumentListCustomToolbar,
+                }, componentsProps: {
+                    toolbar: {
+                        locationID,
+                    },
+                } }), _jsx(Modal, { open: Boolean(iframe), onClose: handleClose, children: _jsxs(ModalDialog, { sx: {
+                        width: { xs: "85vw", lg: "40vw" },
+                        height: { xs: "55vh", lg: "70vh" },
+                    }, children: [iframeLoading && (_jsx(Box, { sx: {
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                width: "100%",
+                                height: "100%",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                            }, children: _jsx(CircularProgress, {}) })), _jsx("iframe", { style: {
+                                opacity: iframeLoading ? 0 : 1,
+                                border: "none",
+                                height: "100%",
+                                width: "100%",
+                            }, src: iframe, onLoad: () => setIframeLoading(false) })] }) }), _jsx(Modal, { open: Boolean(shareFile), onClose: () => setShareFile(null), children: _jsx(ModalDialog, { sx: {
+                        maxWidth: 400,
+                    }, children: _jsx(Grid, { container: true, spacing: 1, children: shareFile?.shared_file_url ? (_jsxs(_Fragment, { children: [_jsx(Grid, { xs: 12, children: _jsx(NerdClickToCopy, { typographyProps: {
+                                            sx: {
+                                                lineBreak: "anywhere",
+                                            },
+                                        }, children: shareFile.shared_file_url }) }), _jsx(Grid, { xs: 12, children: _jsx(Button, { fullWidth: true, onClick: () => {
+                                            unshareAction(shareFile.id);
+                                        }, children: "Unshare" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Grid, { xs: 12, children: _jsx(Typography, { children: "By sharing this file it will be publicly viewable to people outside of the White Arrow organization. Do you wish to continue?" }) }), _jsx(Grid, { xs: 12, children: _jsx(Button, { fullWidth: true, onClick: () => {
+                                            if (shareFile?.id)
+                                                shareFileAction(shareFile.id);
+                                        }, children: "Share" }) })] })) }) }) })] }));
+}
+function DocumentListCustomToolbar({ locationID, }) {
+    const [uploadFile] = useUploadArcherFileMutation();
+    const handleUpload = (file) => {
+        uploadFile({
+            file,
+            description: "Location Form",
+            modelID: locationID,
+            modelType: "Location",
+        });
+    };
+    return (_jsx(_Fragment, { children: _jsx(Box, { sx: { display: "flex", gap: 1, p: 1, position: "relative" }, children: _jsx(NerdFileUpload, { hideFilesList: true, uploadFile: handleUpload, browseFilesButtonProps: {
+                    variant: "soft",
+                    size: "sm",
+                } }) }) }));
+}
+//# sourceMappingURL=locationsFormSales.js.map