@nerdjs/sales-kit 2.0.77 → 2.0.78

package/dist/hooks/quote/form.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Checkbox, FormControl, FormLabel, Input, Alert, Button, IconButton, Typography as JoyTypography, Option, Select, Sheet, Tab, TabList, Tabs, useColorScheme, CircularProgress, } from "@mui/joy";
-import { Backdrop, Box, Dialog, DialogActions, DialogContent, DialogTitle, Divider, FormHelperText, Grid, Paper, Tooltip, Typography, useMediaQuery, useTheme, } from "@mui/material";
+import { Checkbox, FormControl, FormLabel, Input, Alert, Button, IconButton, Typography, Option, Select, Sheet, Tab, TabList, Tabs, useColorScheme, CircularProgress, Tooltip, Grid, Divider, Box, Modal, ModalDialog, DialogActions, DialogContent, DialogTitle, FormHelperText, } from "@mui/joy";
 import { DataGridPremium, useGridApiRef, } from "@mui/x-data-grid-premium";
 import { NerdDatePicker } from "@nerdjs/nerd-ui";
 import { DateTime } from "luxon";
@@ -35,29 +34,40 @@ export function QuoteForm(props) {
     const { customerPortal, quoteRoute, perPalletClass } = props;
     const { t } = useTranslation("salesKit");
     const errors = useSelector(quoteErrorsSelector);
-    const theme = useTheme();
     const result = useSelector(quoteResultSelector);
-    const sm = useMediaQuery(theme.breakpoints.down(600));
     const dispatch = useDispatch();
     const running = useSelector(quoteRunningSelector);
-    return (_jsx(_Fragment, { children: _jsxs(Box, { sx: { flex: 1, height: "100%", overflowY: "auto" }, children: [_jsx(Toolbar, { quoteRoute: quoteRoute }), _jsx(Typography, { pl: 2, display: "inline", color: "red", children: "*" }), " ", _jsx(Typography, { display: "inline", variant: "body2", children: t("requiredField") }), _jsxs(Box, { sx: {
+    return (_jsx(_Fragment, { children: _jsxs(Box, { sx: {
+                flex: 1,
+                height: "100%",
+                overflowY: !running ? "auto" : "hidden",
+            }, children: [_jsx(Toolbar, { quoteRoute: quoteRoute }), _jsx(Typography, { pl: 2, display: "inline", color: "danger", children: "*" }), " ", _jsx(Typography, { display: "inline", level: "body-sm", children: t("requiredField") }), _jsxs(Box, { sx: {
                         display: "flex",
                         flexDirection: "column",
                         gap: 2,
                         p: 2,
-                    }, children: [errors ? (_jsx(Alert, { color: "danger", children: _jsx("ul", { style: { margin: 0 }, children: errors.map((e) => (_jsx("li", { children: e }, e))) }) })) : ([]), running ? (_jsx(_Fragment, { children: _jsx(Backdrop, { open: true, sx: {
-                                    zIndex: (theme) => theme.zIndex.modal,
-                                    position: "absolute",
-                                    top: 49,
-                                }, children: _jsx(CircularProgress, {}) }) })) : null, _jsx(AboutTheLoad, { customerPortal: customerPortal, perPalletClass: perPalletClass }), _jsx(ShipCons, { customerPortal: customerPortal }), sm ? _jsx(FormStop, { customerPortal: customerPortal }) : [], _jsxs(Box, { sx: { textAlign: "center", lineHeight: 0.6 }, children: [_jsx(Typography, { variant: "caption", display: "inline", children: _jsx(Box, { className: "fa-duotone fa-circle-info pright", component: "i", sx: {
-                                            color: (theme) => theme.palette.warning.main,
-                                        } }) }), _jsxs(Typography, { display: "inline", variant: "caption", sx: { opacity: 0.5 }, children: [t("inaccurateWarning"), _jsx("br", {}), t("selectLocationWarning")] })] })] }), sm && result ? (_jsx(Box, { onClick: () => dispatch(setFormOpen({ formID: "result", isOpen: true })), sx: {
+                    }, children: [errors ? (_jsx(Alert, { color: "danger", children: _jsx("ul", { style: { margin: 0 }, children: errors.map((e) => (_jsx("li", { children: e }, e))) }) })) : ([]), running ? (_jsx(_Fragment, { children: _jsx(Modal, { disablePortal: true, open: true, sx: {
+                                    zIndex: 200,
+                                    "& .MuiModal-backdrop": {
+                                        mt: "50px",
+                                    },
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                }, children: _jsx(CircularProgress, { sx: {
+                                        outline: "none",
+                                    } }) }) })) : null, _jsx(AboutTheLoad, { customerPortal: customerPortal, perPalletClass: perPalletClass }), _jsx(ShipCons, { customerPortal: customerPortal }), _jsx(Box, { sx: {
+                                display: { sm: "initial", md: "none" },
+                            }, children: _jsx(FormStop, { customerPortal: customerPortal }) }), _jsxs(Box, { sx: { textAlign: "center", lineHeight: 0.6 }, children: [_jsx(Typography, { level: "body-sm", display: "inline", children: _jsx(Box, { className: "fa-duotone fa-circle-info pright", component: "i", sx: {
+                                            color: (theme) => theme.palette.warning[500],
+                                        } }) }), _jsxs(Typography, { display: "inline", level: "body-sm", sx: { opacity: 0.5 }, children: [t("inaccurateWarning"), _jsx("br", {}), t("selectLocationWarning")] })] })] }), result ? (_jsx(Box, { onClick: () => dispatch(setFormOpen({ formID: "result", isOpen: true })), sx: {
                         position: "sticky",
                         bottom: 0,
                         p: 1,
                         backdropFilter: "blur(10px)",
                         borderTop: "solid 1px rgba(155,155,155, 0.3)",
                         background: "rgba(255,255,255,0.4)",
+                        display: { sm: "block", md: "none" },
                     }, children: _jsx(Button, { color: "danger", fullWidth: true, children: t("viewQuoteResult") }) })) : ([])] }) }));
 }
 /**
@@ -148,11 +158,11 @@ function Toolbar(props) {
                 p: 2,
                 pt: shrink ? 1 : 2,
                 pb: shrink ? 1 : 2,
-            }, children: [_jsx(Typography, { variant: "h4", sx: {
+            }, children: [_jsx(Typography, { level: "h4", sx: {
                         fontWeight: 600,
                         fontSize: shrink ? "22px !important" : "36px !important",
                         transition: "font-size .3s ease-in-out",
-                    }, children: t("Form") }), _jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [_jsx(Tooltip, { title: "ctrl+r", children: _jsxs(Button, { size: shrink ? "sm" : "md", onClick: resetQuote, variant: "soft", color: "neutral", children: [_jsx("i", { className: "fa-sharp fa-solid fa-arrows-rotate pright" }), t("restart")] }) }), _jsx(Tooltip, { title: "ctrl+x", children: _jsxs(Button, { variant: "solid", size: shrink ? "sm" : "md", onClick: () => {
+                    }, children: t("Form") }), _jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [_jsx(Tooltip, { title: "ctrl+r", children: _jsxs(Button, { disabled: running, size: shrink ? "sm" : "md", onClick: resetQuote, variant: "soft", color: "neutral", children: [_jsx("i", { className: "fa-sharp fa-solid fa-arrows-rotate pright" }), t("restart")] }) }), _jsx(Tooltip, { title: "ctrl+x", children: _jsxs(Button, { variant: "solid", size: shrink ? "sm" : "md", onClick: () => {
                                     setTimeout(() => runQuote(), 200);
                                 }, loading: running, children: [_jsx("i", { className: "fa-duotone fa-play" }), _jsx("span", { style: { paddingLeft: 4 }, children: t("runQuote") })] }) })] })] }) }));
 }
@@ -174,8 +184,6 @@ function AboutTheLoad({ customerPortal, perPalletClass, }) {
     const [getCustomer, { data: _customer, isFetching }] = useLazyGetCustomerQuery();
     const { data: commodities } = useGetQuoteCommodityDescriptionQuery(customerPortal);
     const [value, setValue] = useState(_customer || null);
-    const theme = useTheme();
-    const sm = useMediaQuery(theme.breakpoints.down(600));
     const _error = error;
     useEffect(() => {
         if (palletDimensions?.length) {
@@ -234,49 +242,50 @@ function AboutTheLoad({ customerPortal, perPalletClass, }) {
         : !TL_TEMPERATURE.test(reeferTemp);
     // const perPalletWeightDisabled = useSelector(perPalletWeightDisabledSelector);
     // const totalWeightDisabled = useSelector(totalWeightDisabledSelector);
-    return (_jsxs(Paper, { sx: { p: 2 }, children: [_jsxs(Typography, { variant: "h6", children: [_jsx("i", { className: "fa-duotone fa-truck-ramp-box pright" }), " ", t("aboutTheLoad")] }), _jsxs(Grid, { container: true, spacing: 2, sx: { pt: 1 }, children: [!customerPortal ? (_jsx(Grid, { item: true, xs: 12, children: _jsx(CustomerAutocomplete, { isLoading: isFetching, value: value, onChange: (v) => {
+    return (_jsxs(Sheet, { sx: { p: 2, borderRadius: "sm", boxShadow: "md" }, children: [_jsxs(Typography, { level: "title-lg", children: [_jsx("i", { className: "fa-duotone fa-truck-ramp-box pright" }), " ", t("aboutTheLoad")] }), _jsxs(Grid, { container: true, spacing: 2, sx: { pt: 1 }, children: [!customerPortal ? (_jsx(Grid, { xs: 12, children: _jsx(CustomerAutocomplete, { isLoading: isFetching, value: value, onChange: (v) => {
                                 dispatch(setCustomerID(v?.id));
                                 setValue(v);
-                            } }) })) : ([]), _jsx(Grid, { item: true, children: _jsx(Tabs, { "aria-label": "Vertical tabs", orientation: "vertical", value: body.service, onChange: (_e, v) => {
+                            } }) })) : ([]), _jsx(Grid, { children: _jsx(Tabs, { "aria-label": "Vertical tabs", orientation: "vertical", value: body.service, onChange: (_e, v) => {
                                 const _v = v;
                                 if (_v)
                                     s({ service: _v });
-                            }, sx: { borderRadius: "lg" }, children: _jsx(TabList, { children: loadTypeOptions(customerPortal).map((i) => (_jsx(Tab, { value: i, children: _jsx(JoyTypography, { level: "body-sm", startDecorator: icons[i], children: i }) }, i))) }) }) }), _jsx(Grid, { item: true, children: _jsx(Tabs, { "aria-label": "Vertical tabs", orientation: "vertical", value: body.mode, onChange: (_e, v) => {
+                            }, sx: { borderRadius: "lg" }, children: _jsx(TabList, { children: loadTypeOptions(customerPortal).map((i) => (_jsx(Tab, { value: i, children: _jsx(Typography, { level: "body-sm", startDecorator: icons[i], children: i }) }, i))) }) }) }), _jsx(Grid, { children: _jsx(Tabs, { "aria-label": "Vertical tabs", orientation: "vertical", value: body.mode, onChange: (_e, v) => {
                                 const _v = v;
                                 if (_v)
                                     s({ mode: _v });
                                 if (_v === DRY)
                                     r({ reeferTemp: undefined });
-                            }, sx: { borderRadius: "lg" }, children: _jsx(TabList, { children: [DRY, REEFER].map((i) => (_jsx(Tab, { value: i, children: _jsx(JoyTypography, { level: "body-sm", startDecorator: icons[i], children: i }) }, i))) }) }) }), body.mode === REEFER ? (_jsxs(_Fragment, { children: [_jsx(Grid, { item: true, xs: 12, md: 3, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { required: true, children: t("temperature") }), _jsx(Input, { autoFocus: true, value: body.reefer?.reeferTemp ?? "", onChange: (e) => r({ reeferTemp: e.target.value }), error: temperatureError }), _jsx(FormHelperText, { children: body.service === LTL
+                            }, sx: { borderRadius: "lg" }, children: _jsx(TabList, { children: [DRY, REEFER].map((i) => (_jsx(Tab, { value: i, children: _jsx(Typography, { level: "body-sm", startDecorator: icons[i], children: i }) }, i))) }) }) }), body.mode === REEFER ? (_jsxs(_Fragment, { children: [_jsx(Grid, { xs: 12, md: 3, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { required: true, children: t("temperature") }), _jsx(Input, { autoFocus: true, value: body.reefer?.reeferTemp ?? "", onChange: (e) => r({ reeferTemp: e.target.value }), error: temperatureError }), _jsx(FormHelperText, { children: body.service === LTL
                                                 ? "Between 40℉ and 80℉"
-                                                : "Between -20℉ and 80℉" })] }) }), _jsx(Grid, { item: true, xs: 12, md: 4, children: _jsxs(Button, { color: "neutral", sx: { textTransform: "none" }, variant: body.reefer?.reeferCont ? "solid" : "outlined", onClick: () => r({ reeferCont: !(body.reefer?.reeferCont ?? false) }), children: [icons[CONTINUOUS_RUNNING], CONTINUOUS_RUNNING] }) })] })) : (_jsxs(_Fragment, { children: [!customerPortal ? (_jsx(Grid, { item: true, children: _jsx(Button, { startDecorator: _jsx("i", { className: "fa-duotone fa-truck-container-empty" }), color: "neutral", variant: body.emptyLoad ? "solid" : "outlined", onClick: handleEmptyLoadClick, children: t("emptyLoad") }) })) : null, _jsx(Grid, { item: true, children: _jsxs(Button, { sx: { textTransform: "none" }, color: "neutral", variant: body.dryVanOnly ? "solid" : "outlined", onClick: () => s({ dryVanOnly: !(body.dryVanOnly ?? false) }), children: [icons[DRY_VAN_ONLY], DRY_VAN_ONLY] }) })] })), _jsx(Grid, { item: true, xs: 12 }), body.emptyLoad && !customerPortal ? null : (_jsxs(_Fragment, { children: [_jsx(Grid, { item: true, xs: 12, md: 3, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { id: "commodity-select-helper-label", children: t("commodityDescription") }), _jsx(Select, { startDecorator: body.commodityDescriptionId &&
+                                                : "Between -20℉ and 80℉" })] }) }), _jsx(Grid, { xs: 12, md: 4, children: _jsxs(Button, { color: "neutral", sx: { textTransform: "none" }, variant: body.reefer?.reeferCont ? "solid" : "outlined", onClick: () => r({ reeferCont: !(body.reefer?.reeferCont ?? false) }), children: [icons[CONTINUOUS_RUNNING], CONTINUOUS_RUNNING] }) })] })) : (_jsxs(_Fragment, { children: [!customerPortal ? (_jsx(Grid, { children: _jsx(Button, { startDecorator: _jsx("i", { className: "fa-duotone fa-truck-container-empty" }), color: "neutral", variant: body.emptyLoad ? "solid" : "outlined", onClick: handleEmptyLoadClick, children: t("emptyLoad") }) })) : null, _jsx(Grid, { children: _jsxs(Button, { sx: { textTransform: "none" }, color: "neutral", variant: body.dryVanOnly ? "solid" : "outlined", onClick: () => s({ dryVanOnly: !(body.dryVanOnly ?? false) }), children: [icons[DRY_VAN_ONLY], DRY_VAN_ONLY] }) })] })), _jsx(Grid, { xs: 12 }), body.emptyLoad && !customerPortal ? null : (_jsxs(_Fragment, { children: [_jsx(Grid, { xs: 12, md: 3, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { id: "commodity-select-helper-label", children: t("commodityDescription") }), _jsx(Select, { startDecorator: body.commodityDescriptionId &&
                                                 icons[body.commodityDescriptionId], value: commodities ? body.commodityDescriptionId || null : null, onChange: (_e, value) => s({
                                                 commodityDescriptionId: value || undefined,
-                                            }), children: commodities?.map((c) => (_jsxs(Option, { value: c.id, children: [c.id && icons[c.id], c.name] }, c.id))) }), _jsx(FormHelperText, { children: t("Note: No Haz Mat, Ice Cream.") })] }) }), _jsx(Grid, { item: true, xs: 12, md: 3, children: _jsxs(FormControl, { required: true, children: [_jsx(FormLabel, { slotProps: {
+                                            }), children: commodities?.map((c) => (_jsxs(Option, { value: c.id, children: [c.id && icons[c.id], c.name] }, c.id))) }), _jsx(FormHelperText, { children: t("Note: No Haz Mat, Ice Cream.") })] }) }), _jsx(Grid, { xs: 12, md: 3, children: _jsxs(FormControl, { required: true, children: [_jsx(FormLabel, { slotProps: {
                                                 asterisk: {
                                                     sx: {
                                                         color: (theme) => theme.palette.danger[400],
                                                     },
                                                 },
-                                            }, children: t("totalWeight") }), _jsx(Input, { error: errors && !body.units?.totalDimensions?.totalWeight, type: "number", placeholder: "in lbs", value: body.units?.totalDimensions?.totalWeight ?? "", onChange: (e) => d({ totalWeight: e.target.value }) })] }) }), !customerPortal && (_jsxs(_Fragment, { children: [!perPalletClass ? (_jsx(Grid, { item: true, xs: 12, md: 3, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("freightClass") }), _jsx(Select, { value: body.freightClass ?? null, onChange: (_e, v) => s({ freightClass: v || undefined }), children: FREIGHT_CLASS.map((f) => (_jsx(Option, { value: f, children: f }, f))) })] }) })) : null, _jsx(Grid, { item: true, xs: 12, md: 3, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("Miles") }), _jsx(Input, { value: body.manualMiles ?? "", onChange: (e) => s({ manualMiles: Number(e.target.value) || undefined }), type: "number" })] }) })] })), _jsxs(Grid, { item: true, xs: 12, children: [_jsx(PalletsDataGrid, { customerPortal: customerPortal, perPalletClass: perPalletClass }), _jsx(Tooltip, { title: "ctrl+p", children: _jsxs(Button, { size: "sm", sx: { mt: 2 }, variant: "soft", color: errors && body.units?.palletDimensions?.length === 0
+                                            }, children: t("totalWeight") }), _jsx(Input, { error: errors && !body.units?.totalDimensions?.totalWeight, type: "number", placeholder: "in lbs", value: body.units?.totalDimensions?.totalWeight ?? "", onChange: (e) => d({ totalWeight: e.target.value }) })] }) }), !customerPortal && (_jsxs(_Fragment, { children: [!perPalletClass ? (_jsx(Grid, { xs: 12, md: 3, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("freightClass") }), _jsx(Select, { value: body.freightClass ?? null, onChange: (_e, v) => s({ freightClass: v || undefined }), children: FREIGHT_CLASS.map((f) => (_jsx(Option, { value: f, children: f }, f))) })] }) })) : null, _jsx(Grid, { xs: 12, md: 3, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("Miles") }), _jsx(Input, { value: body.manualMiles ?? "", onChange: (e) => s({ manualMiles: Number(e.target.value) || undefined }), type: "number" })] }) })] })), _jsxs(Grid, { xs: 12, children: [_jsx(PalletsDataGrid, { customerPortal: customerPortal, perPalletClass: perPalletClass }), _jsx(Tooltip, { title: "ctrl+p", children: _jsxs(Button, { size: "sm", sx: { mt: 2, display: { xs: "none", sm: "initial" } }, variant: "soft", color: errors && body.units?.palletDimensions?.length === 0
                                                 ? "danger"
                                                 : "neutral", onClick: () => {
                                                 dispatch(addPallet());
-                                                if (sm)
-                                                    dispatch(setFormOpen({ isOpen: true, formID: "pallet" }));
-                                            }, children: [_jsx("i", { className: "fa-duotone fa-pallet-boxes pright" }), " ", t("addPallet")] }) })] }), palletsCheck &&
+                                            }, children: [_jsx("i", { className: "fa-duotone fa-pallet-boxes pright" }), " ", t("addPallet")] }) }), _jsxs(Button, { size: "sm", sx: { mt: 2, display: { xs: "initial", sm: "none" } }, variant: "soft", color: errors && body.units?.palletDimensions?.length === 0
+                                            ? "danger"
+                                            : "neutral", onClick: () => {
+                                            dispatch(addPallet());
+                                            dispatch(setFormOpen({ isOpen: true, formID: "pallet" }));
+                                        }, children: [_jsx("i", { className: "fa-duotone fa-pallet-boxes pright" }), " ", t("addPallet")] })] }), palletsCheck &&
                                 palletDimensions &&
                                 palletDimensions.length > 0 &&
-                                !error ? (_jsx(Grid, { item: true, xs: 12, children: _jsxs(Alert, { startDecorator: _jsx("i", { className: "fa-solid fa-thumbs-up" }), color: "neutral", children: [t("validSpecs"), " ", _jsx("b", { children: t("totalSpecs", {
+                                !error ? (_jsx(Grid, { xs: 12, children: _jsxs(Alert, { startDecorator: _jsx("i", { className: "fa-solid fa-thumbs-up" }), color: "neutral", children: [t("validSpecs"), " ", _jsx("b", { children: t("totalSpecs", {
                                                 feet: palletsCheck.feet,
                                                 weight: Math.floor(palletsCheck.weight),
                                                 pallets: palletsCheck.pallets,
-                                            }) })] }) })) : ([]), error ? (_jsx(Grid, { item: true, xs: 12, children: _jsxs(Alert, { color: "danger", variant: "solid", startDecorator: _jsx("i", { className: "fa-solid fa-triangle-exclamation" }), children: [t("equipmentIssue"), " ", _jsx("b", { children: _error?.data?.message })] }) })) : ([])] }))] }), sm && !body.emptyLoad ? _jsx(FormPallet, {}) : []] }));
+                                            }) })] }) })) : ([]), error ? (_jsx(Grid, { xs: 12, children: _jsxs(Alert, { color: "danger", variant: "solid", startDecorator: _jsx("i", { className: "fa-solid fa-triangle-exclamation" }), children: [t("equipmentIssue"), " ", _jsx("b", { children: _error?.data?.message })] }) })) : ([])] }))] }), !body.emptyLoad ? _jsx(FormPallet, {}) : []] }));
 }
 const PalletsDataGrid = ({ customerPortal, perPalletClass, }) => {
     const body = useSelector(quoteBodySelector);
-    const theme = useTheme();
-    const sm = useMediaQuery(theme.breakpoints.down(600));
     const dispatch = useDispatch();
     const apiRef = useGridApiRef();
     const palletUpdate = async (_pallet) => {
@@ -293,7 +302,7 @@ const PalletsDataGrid = ({ customerPortal, perPalletClass, }) => {
         });
     }, []);
     return (_jsx(DataGridPremium, { density: "compact", apiRef: apiRef, onCellClick: (e) => {
-            if (sm) {
+            if (window.matchMedia("(max-width:600px)").matches) {
                 dispatch(setStagedPallet(e.row));
                 dispatch(setFormOpen({ formID: "pallet", isOpen: true }));
             }
@@ -317,7 +326,14 @@ const PalletsDataGrid = ({ customerPortal, perPalletClass, }) => {
  */
 function ShipCons({ customerPortal }) {
     const { t } = useTranslation("salesKit");
-    return (_jsxs(Paper, { sx: { p: 2, display: "flex", flexDirection: "column", gap: 1 }, children: [_jsxs(Typography, { variant: "h6", children: [_jsx("i", { className: "fa-duotone fa-location-dot pright" }), t("stops")] }), _jsx(Stops, { stopKind: SHIPPERS, customerPortal: customerPortal }), _jsx(TrailerAvailability, { customerPortal: customerPortal }), _jsx(Divider, {}), _jsx(Stops, { stopKind: CONSIGNEES, customerPortal: customerPortal })] }));
+    return (_jsxs(Sheet, { sx: {
+            p: 2,
+            display: "flex",
+            flexDirection: "column",
+            gap: 1,
+            borderRadius: "sm",
+            boxShadow: "md",
+        }, children: [_jsxs(Typography, { level: "title-lg", children: [_jsx("i", { className: "fa-duotone fa-location-dot pright" }), t("stops")] }), _jsx(Stops, { stopKind: SHIPPERS, customerPortal: customerPortal }), _jsx(TrailerAvailability, { customerPortal: customerPortal }), _jsx(Divider, {}), _jsx(Stops, { stopKind: CONSIGNEES, customerPortal: customerPortal })] }));
 }
 /**
  * ShipCons. Form that contains input to gather stops.
@@ -418,8 +434,6 @@ function Stops({ stopKind, customerPortal, }) {
     const { t } = useTranslation("salesKit");
     const apiRef = useGridApiRef();
     const stops = stopKind === SHIPPERS ? shippers : consignees;
-    const theme = useTheme();
-    const sm = useMediaQuery(theme.breakpoints.down(600));
     useHotkeys(keyboardShortcuts[stopKind], () => {
         dispatch(addStop(stopKind));
     }, {
@@ -436,10 +450,10 @@ function Stops({ stopKind, customerPortal, }) {
     const stopPosition = (params) => {
         dispatch(reorderStop(stopKind, params.oldIndex, params.targetIndex));
     };
-    return (_jsxs(Sheet, { sx: { p: 1 }, children: [_jsxs(Typography, { variant: "h6", sx: { textTransform: "capitalize" }, children: [icons[stopKind], stopKind] }), _jsx(DataGridPremium, { density: "compact", autoHeight: true, rowReordering: true, hideFooter: true, slotProps: {
+    return (_jsxs(Sheet, { sx: { p: 1 }, children: [_jsxs(Typography, { level: "body-lg", sx: { textTransform: "capitalize" }, children: [icons[stopKind], stopKind] }), _jsx(DataGridPremium, { density: "compact", autoHeight: true, rowReordering: true, hideFooter: true, slotProps: {
                     cell: { tabIndex: 0 },
                 }, apiRef: apiRef, onCellClick: (e) => {
-                    if (sm) {
+                    if (window.matchMedia("(max-width:600px)").matches) {
                         dispatch(setStagedStop(e.row));
                         dispatch(setFormOpen({ formID: "stop", isOpen: true }));
                     }
@@ -447,11 +461,24 @@ function Stops({ stopKind, customerPortal, }) {
                         apiRef.current.getCellMode(e.id, e.field) === "view") {
                         apiRef.current?.startCellEditMode({ id: e.id, field: e.field });
                     }
-                }, processRowUpdate: stopUpdate, onRowOrderChange: stopPosition, getRowId: (p) => p.key, rows: stops ?? [], columns: getStopsColumnDef(dispatch, stopKind, stops ?? [], customerPortal, errors) }), _jsx(Tooltip, { title: keyboardShortcuts[stopKind], children: _jsxs(Button, { size: "sm", sx: { mt: 2 }, variant: "soft", color: "neutral", onClick: () => {
+                }, processRowUpdate: stopUpdate, onRowOrderChange: stopPosition, getRowId: (p) => p.key, rows: stops ?? [], columns: getStopsColumnDef(dispatch, stopKind, stops ?? [], customerPortal, errors) }), _jsx(Tooltip, { title: keyboardShortcuts[stopKind], children: _jsxs(Button, { size: "sm", sx: {
+                        mt: 2,
+                        display: {
+                            xs: "none",
+                            sm: "initial",
+                        },
+                    }, variant: "soft", color: "neutral", onClick: () => {
                         dispatch(addStop(stopKind));
-                        if (sm)
-                            dispatch(setFormOpen({ isOpen: true, formID: "stop" }));
-                    }, children: [_jsx("i", { className: "fa-solid fa-location-dot pright" }), t("addStop")] }) })] }));
+                    }, children: [_jsx("i", { className: "fa-solid fa-location-dot pright" }), t("addStop")] }) }), _jsxs(Button, { size: "sm", sx: {
+                    mt: 2,
+                    display: {
+                        xs: "initial",
+                        sm: "none",
+                    },
+                }, variant: "soft", color: "neutral", onClick: () => {
+                    dispatch(addStop(stopKind));
+                    dispatch(setFormOpen({ isOpen: true, formID: "stop" }));
+                }, children: [_jsx("i", { className: "fa-solid fa-location-dot pright" }), t("addStop")] })] }));
 }
 /**
  *
@@ -481,83 +508,88 @@ function FormPallet() {
         if (stagedPallet)
             setPallet(stagedPallet);
     }, [stagedPallet]);
-    return (_jsxs(Dialog, { open: open ?? false, onClose: close, fullScreen: true, fullWidth: true, children: [_jsx(DialogTitle, { children: _jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [_jsx(JoyTypography, { startDecorator: _jsx("i", { className: "fa-solid fa-pallet-boxes" }), level: "title-md", children: t("palletDetails") }), _jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [_jsx(IconButton, { onClick: deletePallet, variant: "soft", color: "neutral", children: _jsx("i", { className: "fa-solid fa-trash" }) }), _jsx(IconButton, { onClick: close, variant: "soft", color: "neutral", children: _jsx("i", { className: "fa-solid fa-xmark" }) })] })] }) }), _jsx(Divider, {}), _jsx(DialogContent, { children: pallet ? (_jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [_jsx(Input, { onFocus: (event) => {
-                                event.target.select();
-                            }, type: "number", sx: {
-                                ".MuiInput-input": {
-                                    textAlign: "right",
-                                },
-                            }, onChange: (e) => {
-                                setPallet((p) => {
-                                    if (p)
-                                        return { ...p, count: parseInt(e.target.value) };
-                                    return p;
-                                });
-                            }, value: pallet?.count ?? "", startDecorator: "Count" }), _jsx(Checkbox, { checked: pallet?.stackable, onChange: (e) => {
-                                setPallet((p) => {
-                                    if (p)
-                                        return { ...p, stackable: e.target.checked };
-                                    return p;
-                                });
-                            }, label: "Stackable" }), _jsx(Input, { type: "number", onFocus: (event) => {
-                                event.target.select();
-                            }, sx: {
-                                ".MuiInput-input": {
-                                    textAlign: "right",
-                                },
-                            }, value: pallet?.length ?? "", onChange: (e) => {
-                                setPallet((p) => {
-                                    if (p)
-                                        return { ...p, length: parseInt(e.target.value) };
-                                    return p;
-                                });
-                            }, startDecorator: "Length", placeholder: `In ${stagedPallet?.units}` }), _jsx(Input, { type: "number", onFocus: (event) => {
-                                event.target.select();
-                            }, sx: {
-                                ".MuiInput-input": {
-                                    textAlign: "right",
-                                },
-                            }, value: pallet?.width ?? "", onChange: (e) => {
-                                setPallet((p) => {
-                                    if (p)
-                                        return { ...p, width: parseInt(e.target.value) };
-                                    return p;
-                                });
-                            }, startDecorator: "Width", placeholder: `In ${stagedPallet?.units}` }), _jsx(Input, { type: "number", onFocus: (event) => {
-                                event.target.select();
-                            }, sx: {
-                                ".MuiInput-input": {
-                                    textAlign: "right",
-                                },
-                            }, value: pallet?.height ?? "", onChange: (e) => {
-                                setPallet((p) => {
-                                    if (p)
-                                        return { ...p, height: parseInt(e.target.value) };
-                                    return p;
-                                });
-                            }, startDecorator: "Height", placeholder: `In ${stagedPallet?.units}` }), _jsxs(Select, { startDecorator: "Units", sx: {
-                                ".MuiSelect-button": {
-                                    justifyContent: "end",
-                                },
-                            }, value: stagedPallet?.units, onChange: (_e, value) => {
-                                setPallet((p) => {
-                                    if (p)
-                                        return { ...p, units: value };
-                                    return p;
-                                });
-                            }, children: [_jsx(Option, { value: "inches", children: "Inches" }), _jsx(Option, { value: "feet", children: "Feet" })] }), _jsx(Input, { type: "number", onFocus: (event) => {
-                                event.target.select();
-                            }, sx: {
-                                ".MuiInput-input": {
-                                    textAlign: "right",
-                                },
-                            }, value: pallet?.weight ?? "", onChange: (e) => {
-                                setPallet((p) => {
-                                    if (p)
-                                        return { ...p, weight: parseInt(e.target.value) };
-                                    return p;
-                                });
-                            }, startDecorator: "Weight", placeholder: `In lbs` })] })) : ([]) }), _jsxs(DialogActions, { children: [_jsx(Button, { fullWidth: true, color: "neutral", variant: "soft", onClick: close, children: t("Cancel") }), _jsx(Button, { onClick: save, fullWidth: true, children: t("Save") })] })] }));
+    return (_jsx(Modal, { open: open ?? false, onClose: close, sx: {
+            display: {
+                sm: "initial",
+                md: "none",
+            },
+        }, children: _jsxs(ModalDialog, { layout: "fullscreen", children: [_jsx(DialogTitle, { children: _jsxs(Box, { sx: { display: "flex", width: "100%" }, children: [_jsx(Typography, { startDecorator: _jsx("i", { className: "fa-solid fa-pallet-boxes" }), level: "title-md", children: t("palletDetails") }), _jsxs(Box, { sx: { display: "flex", gap: 1, ml: "auto" }, children: [_jsx(IconButton, { onClick: deletePallet, variant: "soft", color: "neutral", children: _jsx("i", { className: "fa-solid fa-trash" }) }), _jsx(IconButton, { onClick: close, variant: "soft", color: "neutral", children: _jsx("i", { className: "fa-solid fa-xmark" }) })] })] }) }), _jsx(Divider, {}), _jsx(DialogContent, { children: pallet ? (_jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [_jsx(Input, { onFocus: (event) => {
+                                    event.target.select();
+                                }, type: "number", sx: {
+                                    ".MuiInput-input": {
+                                        textAlign: "right",
+                                    },
+                                }, onChange: (e) => {
+                                    setPallet((p) => {
+                                        if (p)
+                                            return { ...p, count: parseInt(e.target.value) };
+                                        return p;
+                                    });
+                                }, value: pallet?.count ?? "", startDecorator: "Count" }), _jsx(Checkbox, { checked: pallet?.stackable, onChange: (e) => {
+                                    setPallet((p) => {
+                                        if (p)
+                                            return { ...p, stackable: e.target.checked };
+                                        return p;
+                                    });
+                                }, label: "Stackable" }), _jsx(Input, { type: "number", onFocus: (event) => {
+                                    event.target.select();
+                                }, sx: {
+                                    ".MuiInput-input": {
+                                        textAlign: "right",
+                                    },
+                                }, value: pallet?.length ?? "", onChange: (e) => {
+                                    setPallet((p) => {
+                                        if (p)
+                                            return { ...p, length: parseInt(e.target.value) };
+                                        return p;
+                                    });
+                                }, startDecorator: "Length", placeholder: `In ${stagedPallet?.units}` }), _jsx(Input, { type: "number", onFocus: (event) => {
+                                    event.target.select();
+                                }, sx: {
+                                    ".MuiInput-input": {
+                                        textAlign: "right",
+                                    },
+                                }, value: pallet?.width ?? "", onChange: (e) => {
+                                    setPallet((p) => {
+                                        if (p)
+                                            return { ...p, width: parseInt(e.target.value) };
+                                        return p;
+                                    });
+                                }, startDecorator: "Width", placeholder: `In ${stagedPallet?.units}` }), _jsx(Input, { type: "number", onFocus: (event) => {
+                                    event.target.select();
+                                }, sx: {
+                                    ".MuiInput-input": {
+                                        textAlign: "right",
+                                    },
+                                }, value: pallet?.height ?? "", onChange: (e) => {
+                                    setPallet((p) => {
+                                        if (p)
+                                            return { ...p, height: parseInt(e.target.value) };
+                                        return p;
+                                    });
+                                }, startDecorator: "Height", placeholder: `In ${stagedPallet?.units}` }), _jsxs(Select, { startDecorator: "Units", sx: {
+                                    ".MuiSelect-button": {
+                                        justifyContent: "end",
+                                    },
+                                }, value: stagedPallet?.units, onChange: (_e, value) => {
+                                    setPallet((p) => {
+                                        if (p)
+                                            return { ...p, units: value };
+                                        return p;
+                                    });
+                                }, children: [_jsx(Option, { value: "inches", children: "Inches" }), _jsx(Option, { value: "feet", children: "Feet" })] }), _jsx(Input, { type: "number", onFocus: (event) => {
+                                    event.target.select();
+                                }, sx: {
+                                    ".MuiInput-input": {
+                                        textAlign: "right",
+                                    },
+                                }, value: pallet?.weight ?? "", onChange: (e) => {
+                                    setPallet((p) => {
+                                        if (p)
+                                            return { ...p, weight: parseInt(e.target.value) };
+                                        return p;
+                                    });
+                                }, startDecorator: "Weight", placeholder: `In lbs` })] })) : ([]) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: save, fullWidth: true, children: t("Save") }), _jsx(Button, { fullWidth: true, color: "neutral", variant: "soft", onClick: close, children: t("Cancel") })] })] }) }));
 }
 /**
  *
@@ -593,48 +625,48 @@ function FormStop({ customerPortal }) {
             setStop(stagedStop);
         }
     }, [stagedStop]);
-    return (_jsxs(Dialog, { open: open ?? false, onClose: close, fullScreen: true, fullWidth: true, children: [_jsx(DialogTitle, { children: _jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [_jsx(JoyTypography, { startDecorator: _jsx("i", { className: "fa-solid fa-location-dot" }), level: "title-md", children: t("stopDetails") }), _jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [_jsx(IconButton, { onClick: deleteStop, variant: "soft", color: "neutral", children: _jsx("i", { className: "fa-solid fa-trash" }) }), _jsx(IconButton, { onClick: close, variant: "soft", color: "neutral", children: _jsx("i", { className: "fa-solid fa-xmark" }) })] })] }) }), _jsx(Divider, {}), _jsx(DialogContent, { children: stop ? (_jsxs(Box, { sx: { display: "flex", gap: 2, flexDirection: "column" }, children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(JoyTypography, { endDecorator: _jsx(JoyTypography, { color: "danger", children: "*" }), children: "Enter zip or city, state..." }) }), _jsx(Input, { onFocus: (event) => {
-                                        event.target.select();
-                                    }, type: "number", placeholder: "Enter zip or city, state...", autoComplete: "off", onChange: (e) => {
-                                        setStop((p) => {
-                                            if (p)
-                                                return { ...p, zip: e.target.value };
-                                            return p;
-                                        });
-                                    }, value: stop?.zip ?? "" })] }), _jsx(LocationInput, { customerPortal: customerPortal, zip: stop.zip, locationID: stop.locationId, onChange: (e) => {
-                                setStop((p) => {
-                                    if (p)
-                                        return { ...p, locationId: e?.id };
-                                    return p;
-                                });
-                            } }), isShipper ? (_jsx(NerdDatePicker, { value: stop.date ? DateTime.fromISO(stop.date) : null, label: _jsx(JoyTypography, { endDecorator: _jsx(JoyTypography, { color: "danger", children: "*" }), children: "Pickup Date" }), inputProps: {
-                                placeholder: "Pickup Date",
-                                variant: "outlined",
-                            }, onChange: (e) => {
-                                setStop((p) => {
-                                    if (p)
-                                        return { ...p, date: e?.toISO() ?? "" };
-                                    return p;
-                                });
-                            }, openCalendar: false, datePickerProps: {
-                                shouldDisableDate(d) {
-                                    return typeof d != "string" && d < DateTime.now();
-                                },
-                                autoFocus: true,
-                                closeOnSelect: true,
-                                renderDay: (date, _selectedDay, props) => (_jsx(RenderDay, { handleChange: (e) => {
-                                        setStop((p) => {
-                                            if (p)
-                                                return { ...p, date: e?.toISO() ?? "" };
-                                            return p;
-                                        });
-                                    }, date: date, pickersDayProps: props }, date.toString())),
-                            } })) : ([]), _jsx(AccessorialInput, { accessorialIDs: stop.accessorialIds, onChange: (e) => {
-                                setStop((p) => {
-                                    if (p)
-                                        return { ...p, accessorialIds: e };
-                                    return p;
-                                });
-                            } })] })) : ([]) }), _jsxs(DialogActions, { children: [_jsx(Button, { fullWidth: true, color: "neutral", variant: "soft", onClick: close, children: t("Cancel") }), _jsx(Button, { onClick: save, fullWidth: true, children: t("Save") })] })] }));
+    return (_jsx(Modal, { open: Boolean(open), onClose: close, children: _jsxs(ModalDialog, { layout: "fullscreen", children: [_jsx(DialogTitle, { children: _jsxs(Box, { sx: { display: "flex", width: "100%" }, children: [_jsx(Typography, { startDecorator: _jsx("i", { className: "fa-solid fa-location-dot" }), level: "title-md", children: t("stopDetails") }), _jsxs(Box, { sx: { display: "flex", gap: 1, ml: "auto" }, children: [_jsx(IconButton, { onClick: deleteStop, variant: "soft", color: "neutral", children: _jsx("i", { className: "fa-solid fa-trash" }) }), _jsx(IconButton, { onClick: close, variant: "soft", color: "neutral", children: _jsx("i", { className: "fa-solid fa-xmark" }) })] })] }) }), _jsx(Divider, {}), _jsx(DialogContent, { children: stop ? (_jsxs(Box, { sx: { display: "flex", gap: 2, flexDirection: "column" }, children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(Typography, { endDecorator: _jsx(Typography, { color: "danger", children: "*" }), children: "Enter zip or city, state..." }) }), _jsx(Input, { onFocus: (event) => {
+                                            event.target.select();
+                                        }, type: "number", placeholder: "Enter zip or city, state...", autoComplete: "off", onChange: (e) => {
+                                            setStop((p) => {
+                                                if (p)
+                                                    return { ...p, zip: e.target.value };
+                                                return p;
+                                            });
+                                        }, value: stop?.zip ?? "" })] }), _jsx(LocationInput, { customerPortal: customerPortal, zip: stop.zip, locationID: stop.locationId, onChange: (e) => {
+                                    setStop((p) => {
+                                        if (p)
+                                            return { ...p, locationId: e?.id };
+                                        return p;
+                                    });
+                                } }), isShipper ? (_jsx(NerdDatePicker, { value: stop.date ? DateTime.fromISO(stop.date) : null, label: _jsx(Typography, { endDecorator: _jsx(Typography, { color: "danger", children: "*" }), children: "Pickup Date" }), inputProps: {
+                                    placeholder: "Pickup Date",
+                                    variant: "outlined",
+                                }, onChange: (e) => {
+                                    setStop((p) => {
+                                        if (p)
+                                            return { ...p, date: e?.toISO() ?? "" };
+                                        return p;
+                                    });
+                                }, openCalendar: false, datePickerProps: {
+                                    shouldDisableDate(d) {
+                                        return typeof d != "string" && d < DateTime.now();
+                                    },
+                                    autoFocus: true,
+                                    closeOnSelect: true,
+                                    renderDay: (date, _selectedDay, props) => (_jsx(RenderDay, { handleChange: (e) => {
+                                            setStop((p) => {
+                                                if (p)
+                                                    return { ...p, date: e?.toISO() ?? "" };
+                                                return p;
+                                            });
+                                        }, date: date, pickersDayProps: props }, date.toString())),
+                                } })) : ([]), _jsx(AccessorialInput, { accessorialIDs: stop.accessorialIds, onChange: (e) => {
+                                    setStop((p) => {
+                                        if (p)
+                                            return { ...p, accessorialIds: e };
+                                        return p;
+                                    });
+                                } })] })) : ([]) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: save, fullWidth: true, children: t("Save") }), _jsx(Button, { fullWidth: true, color: "neutral", variant: "soft", onClick: close, children: t("Cancel") })] })] }) }));
 }
 //# sourceMappingURL=form.js.map