@nerdjs/sales-kit 2.0.77 → 2.0.78

package/dist/hooks/quote/result.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Chip, Button as JoyButton, Table, Typography, LinearProgress, Alert, Link, useColorScheme, Menu, MenuItem, Dropdown, MenuButton, Sheet, } from "@mui/joy";
-import { Accordion, AccordionDetails, AccordionSummary, Box, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Grid, IconButton, Typography as MUITypography, Paper, TableBody, TableCell, TableFooter, TableHead, TableRow, TextField, Tooltip, alpha, darken, styled, useMediaQuery, useTheme, } from "@mui/material";
+import { Button, Chip, Table, Typography, LinearProgress, Alert, Link, useColorScheme, Menu, MenuItem, Dropdown, MenuButton, Sheet, useTheme, Box, CircularProgress, Modal, ModalDialog, DialogActions, DialogContent, DialogTitle, Divider, Grid, Tooltip, Accordion, AccordionDetails, AccordionSummary, AccordionGroup, accordionClasses, IconButton, } from "@mui/joy";
+import { alpha, darken, styled } from "@mui/system";
 import { LocalizationProvider, PickersDay, StaticDatePicker, } from "@mui/x-date-pickers";
 import { Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { useTranslation } from "react-i18next";
@@ -9,11 +9,9 @@ import { restartQuote, setCostBreakdownOpen, setFormOpen, setMarketCostOpen, set
 import { useLazyGetCostBreakdownQuery, useGetMarketCostQuery, useLazyGetMarketCostQuery, } from "../../redux/quote/quoteEndpoints";
 import { costBreakdownOpenSelector, formOpenSelector, quoteBodySelector, quoteResultSelector, selectedDateSelector, selectedServiceLevelSelector, } from "../../redux/quote/quoteSelector";
 import { SALES_QUOTE_EXPIRATION, CUSTOMER_PORTAL_QUOTE_EXPIRATION, LTL_DOC, TL_DOC, serviceLevelColors, serviceLevelIcons, usdFormatter, } from "./constants";
-import { CalendarMonth, Check, Clear, ExpandMore, Warning, } from "@mui/icons-material";
 import { DateTime } from "luxon";
 import { Link as RouterLink } from "react-router-dom";
 import { useHotkeys } from "react-hotkeys-hook";
-import { grey } from "@mui/material/colors";
 import { useGetCustomerCreditQuery } from "../../redux";
 import { nanoid } from "@reduxjs/toolkit";
 import { CustomAdapterLuxon } from "@nerdjs/nerd-ui";
@@ -29,8 +27,6 @@ export function QuoteResult(props) {
     const response = useSelector(quoteResultSelector);
     const body = useSelector(quoteBodySelector);
     const { t } = useTranslation("salesKit");
-    const theme = useTheme();
-    const sm = useMediaQuery(theme.breakpoints.down(600));
     const expired = response
         ? DateTime.now() >
             DateTime.fromISO(response.createdAt).plus({
@@ -54,15 +50,19 @@ export function QuoteResult(props) {
                 flex: 1,
                 display: "flex",
                 flexDirection: "column",
-                p: sm ? 0 : 2,
+                p: { xs: 0, sm: 2 },
                 gap: 2,
-            }, children: [!customerPortal && (_jsxs(Paper, { sx: { p: 2, display: "flex", gap: 1 }, children: [_jsxs(Chip, { startDecorator: _jsx("i", { className: "fa-regular fa-map-location" }), variant: "outlined", color: "neutral", children: [response?.totalMiles, " ", t("miles")] }), _jsxs(Chip, { startDecorator: _jsx("i", { className: "fa-solid fa-timer" }), variant: "outlined", color: "neutral", children: [Math.round(response?.transitTime ?? 0), " ", t("hours")] })] })), !customerPortal && !response?.customerId ? (_jsx(Alert, { color: "warning", variant: "soft", startDecorator: _jsx(Warning, {}), children: "No customer selected, select a customer and run the quote again." })) : null, expired && (_jsx(Alert, { color: "warning", variant: "soft", startDecorator: _jsx(Warning, {}), children: customerPortal
+            }, children: [!customerPortal && (_jsxs(Sheet, { sx: {
+                        p: 2,
+                        display: "flex",
+                        gap: 1,
+                        borderRadius: "sm",
+                        boxShadow: "md",
+                    }, children: [_jsxs(Chip, { startDecorator: _jsx("i", { className: "fa-regular fa-map-location" }), variant: "outlined", color: "neutral", children: [response?.totalMiles, " ", t("miles")] }), _jsxs(Chip, { startDecorator: _jsx("i", { className: "fa-solid fa-timer" }), variant: "outlined", color: "neutral", children: [Math.round(response?.transitTime ?? 0), " ", t("hours")] })] })), !customerPortal && !response?.customerId ? (_jsx(Alert, { color: "warning", variant: "soft", startDecorator: _jsx("i", { className: "fa-solid fa-triangle-exclamation" }), children: "No customer selected, select a customer and run the quote again." })) : null, expired && (_jsx(Alert, { color: "warning", variant: "soft", startDecorator: _jsx("i", { className: "fa-solid fa-triangle-exclamation" }), children: customerPortal
                         ? 'Quote is expired, click on "Run Quote" to create a new one.'
-                        : "Quote is expired" })), body.loadId && (_jsxs(Alert, { color: "warning", variant: "soft", startDecorator: _jsx(Warning, {}), children: ['Quote has already been tendered, click on "Run Quote" to create a new one.', "\u00A0", openLoadLink ? (_jsx(Link, { component: RouterLink, to: openLoadLink, children: "Open Shipment" })) : null] })), _jsx(ServiceLevels, { customerPortal: customerPortal }), _jsx(CostBreakdown, {}), _jsx(Summary, { customerPortal: customerPortal, handleOnTenderLoadClick: handleOnTenderLoadClick }), customerPortal ? (_jsxs(Box, { textAlign: "center", sx: {
+                        : "Quote is expired" })), body.loadId && (_jsxs(Alert, { color: "warning", variant: "soft", startDecorator: _jsx("i", { className: "fa-solid fa-triangle-exclamation" }), children: ['Quote has already been tendered, click on "Run Quote" to create a new one.', "\u00A0", openLoadLink ? (_jsx(Link, { component: RouterLink, to: openLoadLink, children: "Open Shipment" })) : null] })), _jsx(ServiceLevels, { customerPortal: customerPortal }), _jsx(CostBreakdown, {}), _jsx(Summary, { customerPortal: customerPortal, handleOnTenderLoadClick: handleOnTenderLoadClick }), customerPortal ? (_jsxs(Box, { textAlign: "center", sx: {
                         lineHeight: 0.6,
-                    }, children: [_jsx(MUITypography, { variant: "caption", display: "inline", children: _jsx(Box, { className: "fa-duotone fa-circle-info pright", component: "i", sx: {
-                                    color: (theme) => theme.palette.warning.main,
-                                } }) }), _jsxs(MUITypography, { variant: "caption", display: "inline", sx: { opacity: 0.5 }, children: [`${t("quoteRateWarning")} `, _jsx(Link, { sx: { fontSize: "inherit" }, target: "_blank", href: LTL_DOC, children: "LTL" }), " ", "-", " ", _jsx(Link, { sx: { fontSize: "inherit" }, target: "_blank", href: TL_DOC, children: "TL" })] })] })) : null] }) }));
+                    }, children: [_jsx(Typography, { level: "body-sm", display: "inline", color: "warning", children: _jsx(Box, { className: "fa-duotone fa-circle-info pright", component: "i" }) }), _jsxs(Typography, { level: "body-sm", display: "inline", sx: { opacity: 0.5 }, children: [`${t("quoteRateWarning")} `, _jsx(Link, { sx: { fontSize: "inherit" }, target: "_blank", href: LTL_DOC, children: "LTL" }), " ", "-", " ", _jsx(Link, { sx: { fontSize: "inherit" }, target: "_blank", href: TL_DOC, children: "TL" })] })] })) : null] }) }));
 }
 /**
  *
@@ -71,8 +71,6 @@ export function QuoteResult(props) {
  */
 function Wrapper(props) {
     const { customerPortal } = props;
-    const theme = useTheme();
-    const sm = useMediaQuery(theme.breakpoints.down(600));
     const open = useSelector(formOpenSelector("result"));
     const { t } = useTranslation("salesKit");
     const shrink = true;
@@ -81,11 +79,6 @@ function Wrapper(props) {
     const selectedServiceLevel = useSelector(selectedServiceLevelSelector);
     const ref = useRef();
     const dispatch = useDispatch();
-    useEffect(() => {
-        if (sm) {
-            dispatch(setFormOpen({ formID: "result", isOpen: true }));
-        }
-    }, [sm]);
     useLayoutEffect(() => {
         if (selectedServiceLevel && ref)
             setTimeout(() => {
@@ -96,21 +89,20 @@ function Wrapper(props) {
                 });
             }, 60);
     }, [selectedDate, selectedServiceLevel, ref]);
-    if (sm) {
-        return (_jsxs(Dialog, { fullScreen: true, open: open ?? false, onClose: () => dispatch(setFormOpen({ formID: "result", isOpen: false })), children: [_jsxs(DialogTitle, { component: "div", children: [_jsx(Typography, { level: "h4", sx: {
-                                display: "inline",
-                                fontWeight: 600,
-                                fontSize: shrink ? "22px !important" : "36px !important",
-                                transition: "font-size .3s ease-in-out",
-                            }, children: t("Quote") }), "\u00A0", _jsxs(Typography, { display: "inline", level: "body-sm", children: ["#", response?.id] }), customerPortal ? null : (_jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [_jsxs(JoyButton, { onClick: () => dispatch(setMarketCostOpen(true)), size: shrink ? "sm" : "md", variant: "outlined", children: [_jsx("i", { className: "fa-solid fa-money-bill-trend-up pright" }), t("Market")] }), _jsxs(JoyButton, { onClick: () => dispatch(setCostBreakdownOpen(true)), size: shrink ? "sm" : "md", variant: "outlined", children: [_jsx("i", { className: "fa-solid fa-filter-circle-dollar pright" }), t("Breakdown")] })] }))] }), _jsx(DialogContent, { children: props.children }), _jsx(DialogActions, { children: _jsx(Button, { fullWidth: true, variant: "soft", color: "neutral", onClick: () => dispatch(setFormOpen({ formID: "result", isOpen: false })), children: t("Close") }) })] }));
-    }
-    else
-        return (_jsxs(Box, { ref: ref, sx: {
-                height: "100%",
-                width: "100%",
-                overflow: "auto",
-                borderLeft: "solid 1px rgba(155,155,155,0.3)",
-            }, children: [_jsx(Toolbar, { customerPortal: customerPortal, shrink: shrink }), props.children] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Modal, { open: open ?? false, onClose: () => dispatch(setFormOpen({ formID: "result", isOpen: false })), sx: {
+                    display: { xs: "initial", md: "none" },
+                }, children: _jsxs(ModalDialog, { layout: "fullscreen", children: [_jsxs(DialogTitle, { component: "div", children: [_jsx(Typography, { level: "h4", sx: {
+                                        display: "inline",
+                                        fontWeight: 600,
+                                        fontSize: shrink ? "22px !important" : "36px !important",
+                                        transition: "font-size .3s ease-in-out",
+                                    }, children: t("Quote") }), "\u00A0", _jsxs(Typography, { display: "inline", level: "body-sm", children: ["#", response?.id] }), customerPortal ? null : (_jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [_jsxs(Button, { onClick: () => dispatch(setMarketCostOpen(true)), size: shrink ? "sm" : "md", variant: "outlined", children: [_jsx("i", { className: "fa-solid fa-money-bill-trend-up pright" }), t("Market")] }), _jsxs(Button, { onClick: () => dispatch(setCostBreakdownOpen(true)), size: shrink ? "sm" : "md", variant: "outlined", children: [_jsx("i", { className: "fa-solid fa-filter-circle-dollar pright" }), t("Breakdown")] })] }))] }), _jsx(DialogContent, { children: props.children }), _jsx(DialogActions, { children: _jsx(Button, { fullWidth: true, variant: "soft", color: "neutral", onClick: () => dispatch(setFormOpen({ formID: "result", isOpen: false })), children: t("Close") }) })] }) }), _jsxs(Box, { ref: ref, sx: {
+                    height: "100%",
+                    width: "100%",
+                    overflow: "auto",
+                    borderLeft: "solid 1px rgba(155,155,155,0.3)",
+                    display: { xs: "none", md: "block" },
+                }, children: [_jsx(Toolbar, { customerPortal: customerPortal, shrink: shrink }), props.children] })] }));
 }
 /**
  * Service Levels. Displays prices for each service levels
@@ -124,12 +116,13 @@ function ServiceLevels({ customerPortal }) {
     const response = useSelector(quoteResultSelector);
     const selectedServiceLevel = useSelector(selectedServiceLevelSelector);
     const { t } = useTranslation("salesKit");
+    const theme = useTheme();
     return (_jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [customerPortal && response ? (_jsx(ServiceLevelsDetails, { quoteResponse: response })) : (_jsx(Box, { sx: { display: "flex", gap: 2 }, children: response?.serviceLevels?.map((l) => {
                     const swatch = response.type === "LTL"
-                        ? serviceLevelColors.LTL[l.serviceLevel]
-                        : serviceLevelColors.TL[l.serviceLevel];
+                        ? serviceLevelColors(theme).LTL[l.serviceLevel]
+                        : serviceLevelColors(theme).TL[l.serviceLevel];
                     const color = swatch[500];
-                    return (_jsxs(Paper, { sx: {
+                    return (_jsxs(Sheet, { sx: {
                             flex: 1,
                             p: 1,
                             color,
@@ -137,29 +130,33 @@ function ServiceLevels({ customerPortal }) {
                             flexDirection: "column",
                             gap: 1,
                             background: alpha(color, 0.1),
+                            borderRadius: "sm",
+                            boxShadow: "md",
                         }, children: [_jsxs(Box, { sx: { textAlign: "center" }, children: [_jsxs(Box, { sx: { display: "flex", gap: 1, justifyContent: "center" }, children: [_jsx("img", { src: l.serviceLevel === "guaranteed"
                                                     ? response.getGuaranteedIcon()
                                                     : l.serviceLevel === "premium"
                                                         ? response.getPremiumIcon()
-                                                        : response.getEconomyIcon(), style: { height: 20 } }), _jsx(Typography, { sx: { textTransform: "capitalize", fontWeight: 500 }, children: l.name })] }), _jsx(Typography, { level: "body-sm", children: l.description })] }), _jsxs(Box, { children: [_jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [_jsx(Typography, { level: "body-sm", children: t("Base") }), _jsx(Typography, { level: "body-sm", children: usdFormatter.format(l.baseRate) })] }), _jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [_jsx(Typography, { level: "body-sm", children: t("Fuel") }), _jsx(Typography, { level: "body-sm", children: usdFormatter.format(l.fuelRate) })] }), _jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [_jsx(Typography, { level: "body-sm", children: t("Extra") }), _jsx(Typography, { level: "body-sm", children: usdFormatter.format(l.extra) })] })] }), _jsx(Divider, {}), _jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [_jsxs(Typography, { level: "body-md", children: [t("Total"), ":"] }), _jsx(Typography, { level: "body-md", children: usdFormatter.format(l.totalRate) })] }), _jsx(JoyButton, { onClick: () => {
+                                                        : response.getEconomyIcon(), style: { height: 20 } }), _jsx(Typography, { sx: { textTransform: "capitalize", fontWeight: 500 }, children: l.name })] }), _jsx(Typography, { level: "body-sm", children: l.description })] }), _jsxs(Box, { children: [_jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [_jsx(Typography, { level: "body-sm", children: t("Base") }), _jsx(Typography, { level: "body-sm", children: usdFormatter.format(l.baseRate) })] }), _jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [_jsx(Typography, { level: "body-sm", children: t("Fuel") }), _jsx(Typography, { level: "body-sm", children: usdFormatter.format(l.fuelRate) })] }), _jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [_jsx(Typography, { level: "body-sm", children: t("Extra") }), _jsx(Typography, { level: "body-sm", children: usdFormatter.format(l.extra) })] })] }), _jsx(Divider, { sx: { mt: "auto" } }), _jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [_jsxs(Typography, { level: "body-md", children: [t("Total"), ":"] }), _jsx(Typography, { level: "body-md", children: usdFormatter.format(l.totalRate) })] }), _jsx(Button, { onClick: () => {
                                     dispatch(setSelectedDate(null));
                                     dispatch(setSelectedServiceLevel(l));
                                 }, sx: {
                                     background: color,
                                     color: "white",
                                     "&:hover": {
-                                        background: swatch[700],
+                                        background: swatch[600],
                                     },
                                 }, children: _jsxs(Box, { children: [!l.flexible
                                             ? t("Select delivery date")
                                             : t("Select delivery window"), _jsx("br", {}), _jsxs(Typography, { level: "body-sm", display: "block", sx: { color: "inherit" }, children: [DateTime.fromFormat(l.from, "yyyy-L-d").toFormat(DATE_FORMAT), l.from != l.to
                                                     ? ` - ${DateTime.fromFormat(l.to, "yyyy-L-d").toFormat(DATE_FORMAT)}`
                                                     : []] })] }) })] }, l.id));
-                }) })), selectedServiceLevel && response ? (_jsx(Paper, { sx: {
+                }) })), selectedServiceLevel && response ? (_jsx(Sheet, { sx: {
                     overflow: "hidden",
+                    borderRadius: "sm",
+                    boxShadow: "md",
                 }, children: _jsx(LocalizationProvider, { dateAdapter: CustomAdapterLuxon, children: _jsx(StaticDatePicker, { displayStaticWrapperAs: "desktop", value: DateTime.fromFormat(selectedServiceLevel.from, "yyyy-L-d"), onChange: () => {
                             // Empty function
-                        }, disableHighlightToday: true, renderDay: (date, _s, pickersDayProps) => (_jsx(RenderDay, { date: date, pickersDayProps: pickersDayProps, serviceLevel: selectedServiceLevel, type: response.type }, date.toString())), renderInput: (params) => _jsx(TextField, { ...params }), inputFormat: "'Week of' MMM d" }) }) })) : ([])] }));
+                        }, disableHighlightToday: true, renderDay: (date, _s, pickersDayProps) => (_jsx(RenderDay, { date: date, pickersDayProps: pickersDayProps, serviceLevel: selectedServiceLevel, type: response.type }, date.toString())), renderInput: () => _jsx(_Fragment, {}), inputFormat: "'Week of' MMM d" }) }) })) : ([])] }));
 }
 /**
  *
@@ -178,18 +175,12 @@ function ServiceLevelsDetails({ quoteResponse, }) {
         const guaranteed = serviceLevels?.find((s) => s.serviceLevel == "guaranteed");
         return { economy, premium, guaranteed };
     }, [serviceLevels]);
-    return (_jsx(Paper, { sx: {
-            borderRadius: "10px",
+    return (_jsx(Sheet, { sx: {
+            borderRadius: "sm",
+            boxShadow: "md",
         }, children: _jsxs(Table, { sx: {
                 "& td": { textAlign: "center" },
-            }, size: "lg", children: [_jsx(TableHead, { children: _jsxs(TableRow, { sx: {
-                            "& th:first-of-type": {
-                                borderTopLeftRadius: "10px!important",
-                            },
-                            "& th:last-of-type": {
-                                borderTopRightRadius: "10px!important",
-                            },
-                        }, children: [_jsx("th", { style: {
+            }, size: "lg", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: {
                                     width: "50px",
                                 } }), _jsx("th", { style: {
                                     width: "125px",
@@ -199,67 +190,43 @@ function ServiceLevelsDetails({ quoteResponse, }) {
                                     textAlign: "center",
                                 }, children: [_jsx("img", { width: 60, alt: "premium", src: quoteResponse.getPremiumIcon() }), _jsx(Typography, { children: premium.name })] })), economy && (_jsxs("th", { style: {
                                     textAlign: "center",
-                                }, children: [_jsx("img", { width: 60, alt: "economy", src: quoteResponse.getEconomyIcon() }), _jsx(Typography, { children: economy.name })] }))] }) }), _jsxs(TableBody, { sx: {
-                        "& tr th:first-of-type": {
-                            borderLeft: `1px solid ${grey[200]}`,
-                        },
-                        "& tr td:last-of-type": {
-                            borderRight: `1px solid ${grey[200]}`,
-                        },
-                        "& tr:last-of-type td": {
-                            borderBottomWidth: "0px",
-                        },
-                    }, children: [_jsxs(TableRow, { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-truck-clock" }) }), _jsx("th", { style: {
+                                }, children: [_jsx("img", { width: 60, alt: "economy", src: quoteResponse.getEconomyIcon() }), _jsx(Typography, { children: economy.name })] }))] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-truck-clock" }) }), _jsx("th", { style: {
                                         whiteSpace: "normal",
                                         wordBreak: "break-word",
-                                    }, children: t("Transit Time") }), guaranteed && _jsx(TableCell, { children: guaranteed.description }), premium && _jsx(TableCell, { children: premium.description }), economy && _jsx(TableCell, { children: economy.description })] }), _jsxs(TableRow, { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-calendar-days" }) }), _jsx("th", { style: {
+                                    }, children: t("Transit Time") }), guaranteed && _jsx("td", { children: guaranteed.description }), premium && _jsx("td", { children: premium.description }), economy && _jsx("td", { children: economy.description })] }), _jsxs("tr", { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-calendar-days" }) }), _jsx("th", { style: {
                                         whiteSpace: "normal",
                                         wordBreak: "break-word",
-                                    }, children: t("Appointment") }), guaranteed && _jsx(TableCell, { children: t("Strict") }), premium && _jsx(TableCell, { children: t("4h Window") }), economy && _jsx(TableCell, { children: t("8h Window") })] }), _jsxs(TableRow, { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-up" }) }), _jsx("th", { style: {
+                                    }, children: t("Appointment") }), guaranteed && _jsx("td", { children: t("Strict") }), premium && _jsx("td", { children: t("4h Window") }), economy && _jsx("td", { children: t("8h Window") })] }), _jsxs("tr", { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-up" }) }), _jsx("th", { style: {
                                         whiteSpace: "normal",
                                         wordBreak: "break-word",
-                                    }, children: t("loadToRide") }), guaranteed && (_jsx(TableCell, { children: _jsx(Check, { color: "success" }) })), premium && (_jsx(TableCell, { children: _jsx(Check, { color: "success" }) })), economy && (_jsx(TableCell, { children: _jsx(Check, { color: "success" }) }))] }), _jsxs(TableRow, { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-truck-ramp-box" }) }), _jsx("th", { style: {
+                                    }, children: t("loadToRide") }), guaranteed && (_jsx("td", { children: _jsx(Typography, { color: "success", children: _jsx("i", { className: "fa-solid fa-check" }) }) })), premium && (_jsx("td", { children: _jsx(Typography, { color: "success", children: _jsx("i", { className: "fa-solid fa-check" }) }) })), economy && (_jsx("td", { children: _jsx(Typography, { color: "success", children: _jsx("i", { className: "fa-solid fa-check" }) }) }))] }), _jsxs("tr", { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-truck-ramp-box" }) }), _jsx("th", { style: {
                                         whiteSpace: "normal",
                                         wordBreak: "break-word",
-                                    }, children: t("floorLoad") }), quoteResponse.type === "TL" ? (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: _jsx(Check, { color: "success" }) }), _jsx(TableCell, { children: _jsx(Check, { color: "success" }) }), _jsx(TableCell, { children: _jsx(Check, { color: "success" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: _jsx(Clear, {}) }), _jsx(TableCell, { children: _jsx(Clear, {}) }), _jsx(TableCell, { children: _jsx(Clear, {}) })] }))] }), _jsxs(TableRow, { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-clock" }) }), _jsx("th", { style: {
+                                    }, children: t("floorLoad") }), quoteResponse.type === "TL" ? (_jsxs(_Fragment, { children: [guaranteed && (_jsx("td", { children: _jsx(Typography, { color: "success", children: _jsx("i", { className: "fa-solid fa-check" }) }) })), premium && (_jsx("td", { children: _jsx(Typography, { color: "success", children: _jsx("i", { className: "fa-solid fa-check" }) }) })), economy && (_jsx("td", { children: _jsx(Typography, { color: "success", children: _jsx("i", { className: "fa-solid fa-check" }) }) }))] })) : (_jsxs(_Fragment, { children: [guaranteed && (_jsx("td", { children: _jsx("i", { className: "fa-solid fa-xmark" }) })), premium && (_jsx("td", { children: _jsx("i", { className: "fa-solid fa-xmark" }) })), economy && (_jsx("td", { children: _jsx("i", { className: "fa-solid fa-xmark" }) }))] }))] }), _jsxs("tr", { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-clock" }) }), _jsx("th", { style: {
                                         whiteSpace: "normal",
                                         wordBreak: "break-word",
-                                    }, children: t("Same Day Pickup") }), guaranteed && (_jsxs(TableCell, { children: [_jsx(Typography, { children: "99.9%" }), _jsx(LinearProgress, { value: 99.9, determinate: true, thickness: 5 })] })), premium && (_jsxs(TableCell, { children: [_jsx(Typography, { children: "85%" }), _jsx(LinearProgress, { value: 85, determinate: true, thickness: 5 })] })), economy && (_jsxs(TableCell, { children: [_jsx(Typography, { children: "50%" }), _jsx(LinearProgress, { value: 50, determinate: true, thickness: 5 })] }))] }), _jsxs(TableRow, { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-truck-front" }) }), _jsx("th", { style: {
+                                    }, children: t("Same Day Pickup") }), guaranteed && (_jsxs("td", { children: [_jsx(Typography, { children: "99.9%" }), _jsx(LinearProgress, { value: 99.9, determinate: true, thickness: 5 })] })), premium && (_jsxs("td", { children: [_jsx(Typography, { children: "85%" }), _jsx(LinearProgress, { value: 85, determinate: true, thickness: 5 })] })), economy && (_jsxs("td", { children: [_jsx(Typography, { children: "50%" }), _jsx(LinearProgress, { value: 50, determinate: true, thickness: 5 })] }))] }), _jsxs("tr", { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-truck-front" }) }), _jsx("th", { style: {
                                         whiteSpace: "normal",
                                         wordBreak: "break-word",
-                                    }, children: t("Driver / Equipment Allocation") }), guaranteed && (_jsxs(TableCell, { children: [_jsx(Typography, { children: "99.9%" }), _jsx(LinearProgress, { value: 99.9, determinate: true, thickness: 5 })] })), premium && (_jsxs(TableCell, { children: [_jsx(Typography, { children: "85%" }), _jsx(LinearProgress, { value: 85, determinate: true, thickness: 5 })] })), economy && (_jsxs(TableCell, { children: [_jsx(Typography, { children: "50%" }), _jsx(LinearProgress, { value: 50, determinate: true, thickness: 5 })] }))] }), _jsxs(TableRow, { children: [_jsx("th", {}), _jsx("th", { style: {
+                                    }, children: t("Driver / Equipment Allocation") }), guaranteed && (_jsxs("td", { children: [_jsx(Typography, { children: "99.9%" }), _jsx(LinearProgress, { value: 99.9, determinate: true, thickness: 5 })] })), premium && (_jsxs("td", { children: [_jsx(Typography, { children: "85%" }), _jsx(LinearProgress, { value: 85, determinate: true, thickness: 5 })] })), economy && (_jsxs("td", { children: [_jsx(Typography, { children: "50%" }), _jsx(LinearProgress, { value: 50, determinate: true, thickness: 5 })] }))] }), _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { style: {
                                         whiteSpace: "normal",
                                         wordBreak: "break-word",
-                                    }, children: t("Base") }), guaranteed && (_jsx(TableCell, { children: usdFormatter.format(guaranteed.baseRate) })), premium && (_jsx(TableCell, { children: usdFormatter.format(premium.baseRate) })), economy && (_jsx(TableCell, { children: usdFormatter.format(economy.baseRate) }))] }), _jsxs(TableRow, { children: [_jsx("th", {}), _jsx("th", { style: {
+                                    }, children: t("Base") }), guaranteed && _jsx("td", { children: usdFormatter.format(guaranteed.baseRate) }), premium && _jsx("td", { children: usdFormatter.format(premium.baseRate) }), economy && _jsx("td", { children: usdFormatter.format(economy.baseRate) })] }), _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { style: {
                                         whiteSpace: "normal",
                                         wordBreak: "break-word",
-                                    }, children: t("Fuel") }), guaranteed && (_jsx(TableCell, { children: usdFormatter.format(guaranteed.fuelRate) })), premium && (_jsx(TableCell, { children: usdFormatter.format(premium.fuelRate) })), economy && (_jsx(TableCell, { children: usdFormatter.format(economy.fuelRate) }))] }), _jsxs(TableRow, { children: [_jsx("th", {}), _jsx("th", { style: {
+                                    }, children: t("Fuel") }), guaranteed && _jsx("td", { children: usdFormatter.format(guaranteed.fuelRate) }), premium && _jsx("td", { children: usdFormatter.format(premium.fuelRate) }), economy && _jsx("td", { children: usdFormatter.format(economy.fuelRate) })] }), _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { style: {
                                         whiteSpace: "normal",
                                         wordBreak: "break-word",
-                                    }, children: t("Extra") }), guaranteed && (_jsx(TableCell, { children: usdFormatter.format(guaranteed.extra) })), premium && (_jsx(TableCell, { children: usdFormatter.format(premium.extra) })), economy && (_jsx(TableCell, { children: usdFormatter.format(economy.extra) }))] }), _jsxs(TableRow, { children: [_jsx("th", {}), _jsx("th", { style: {
+                                    }, children: t("Extra") }), guaranteed && _jsx("td", { children: usdFormatter.format(guaranteed.extra) }), premium && _jsx("td", { children: usdFormatter.format(premium.extra) }), economy && _jsx("td", { children: usdFormatter.format(economy.extra) })] }), _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { style: {
                                         whiteSpace: "normal",
                                         wordBreak: "break-word",
-                                    }, children: t("Total") }), guaranteed && (_jsx(TableCell, { children: usdFormatter.format(guaranteed.totalRate) })), premium && (_jsx(TableCell, { children: usdFormatter.format(premium.totalRate) })), economy && (_jsx(TableCell, { children: usdFormatter.format(economy.totalRate) }))] })] }), _jsx(TableFooter, { sx: {
+                                    }, children: t("Total") }), guaranteed && _jsx("td", { children: usdFormatter.format(guaranteed.totalRate) }), premium && _jsx("td", { children: usdFormatter.format(premium.totalRate) }), economy && _jsx("td", { children: usdFormatter.format(economy.totalRate) })] })] }), _jsx("tfoot", { style: {
                         height: 70,
-                        "& tr th:first-of-type": {
-                            borderLeft: `1px solid ${grey[200]}`,
-                        },
-                        "& tr td:last-of-type": {
-                            borderRight: `1px solid ${grey[200]}`,
-                        },
-                        "& tr:last-of-type": {
-                            "& th:nth-of-type(1),th:nth-of-type(2)": {
-                                borderBottomWidth: "1px",
-                                borderBottomStyle: "solid",
-                            },
-                            "& th:first-of-type": {
-                                borderBottomLeftRadius: "10px",
-                            },
-                            "& td:last-of-type": {
-                                borderBottomRightRadius: "10px",
-                            },
-                        },
-                    }, children: _jsxs(TableRow, { children: [_jsx("th", {}), _jsx("th", {}), guaranteed && (_jsx(TableCell, { children: _jsx(JoyButton, { onClick: () => {
+                    }, children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { style: {
+                                    borderBottomRightRadius: 0,
+                                } }), guaranteed && (_jsx("td", { style: {
+                                    borderBottomLeftRadius: 0,
+                                }, children: _jsx(Button, { onClick: () => {
                                         dispatch(setSelectedDate(null));
                                         dispatch(setSelectedServiceLevel(guaranteed));
                                     }, sx: {
@@ -271,7 +238,9 @@ function ServiceLevelsDetails({ quoteResponse, }) {
                                         },
                                     }, children: _jsxs(Box, { children: [t("Select delivery date"), _jsx("br", {}), _jsxs(Typography, { level: "body-sm", display: "block", sx: { color: "inherit" }, children: [DateTime.fromFormat(guaranteed.from, "yyyy-L-d").toFormat(DATE_FORMAT), guaranteed.from != guaranteed.to
                                                         ? ` - ${DateTime.fromFormat(guaranteed.to, "yyyy-L-d").toFormat(DATE_FORMAT)}`
-                                                        : []] })] }) }) })), premium && (_jsx(TableCell, { children: _jsx(JoyButton, { onClick: () => {
+                                                        : []] })] }) }) })), premium && (_jsx("td", { style: {
+                                    borderBottomLeftRadius: 0,
+                                }, children: _jsx(Button, { onClick: () => {
                                         dispatch(setSelectedDate(null));
                                         dispatch(setSelectedServiceLevel(premium));
                                     }, sx: {
@@ -283,7 +252,9 @@ function ServiceLevelsDetails({ quoteResponse, }) {
                                         },
                                     }, children: _jsxs(Box, { children: [t("Select delivery window"), _jsx("br", {}), _jsxs(Typography, { level: "body-sm", display: "block", sx: { color: "inherit" }, children: [DateTime.fromFormat(premium.from, "yyyy-L-d").toFormat(DATE_FORMAT), premium.from != premium.to
                                                         ? ` - ${DateTime.fromFormat(premium.to, "yyyy-L-d").toFormat(DATE_FORMAT)}`
-                                                        : []] })] }) }) })), economy && (_jsx(TableCell, { children: _jsx(JoyButton, { onClick: () => {
+                                                        : []] })] }) }) })), economy && (_jsx("td", { style: {
+                                    borderBottomLeftRadius: 0,
+                                }, children: _jsx(Button, { onClick: () => {
                                         dispatch(setSelectedDate(null));
                                         dispatch(setSelectedServiceLevel(economy));
                                     }, sx: {
@@ -333,7 +304,7 @@ function Toolbar({ shrink = false, customerPortal, }) {
                                 fontWeight: 600,
                                 fontSize: shrink ? "22px !important" : "36px !important",
                                 transition: "font-size .3s ease-in-out",
-                            }, children: t("Quote") }), "\u00A0", _jsxs(Typography, { display: "inline", level: "body-sm", children: ["#", response?.id] })] }), customerPortal ? null : (_jsx(Box, { sx: { display: "flex", gap: 1 }, children: _jsxs(JoyButton, { onClick: () => dispatch(setCostBreakdownOpen(true)), size: shrink ? "sm" : "md", variant: "outlined", children: [_jsx("i", { className: "fa-solid fa-filter-circle-dollar pright" }), t("Breakdown")] }) }))] }) }));
+                            }, children: t("Quote") }), "\u00A0", _jsxs(Typography, { display: "inline", level: "body-sm", children: ["#", response?.id] })] }), customerPortal ? null : (_jsx(Box, { sx: { display: "flex", gap: 1 }, children: _jsxs(Button, { onClick: () => dispatch(setCostBreakdownOpen(true)), size: shrink ? "sm" : "md", variant: "outlined", children: [_jsx("i", { className: "fa-solid fa-filter-circle-dollar pright" }), t("Breakdown")] }) }))] }) }));
 }
 const RenderDay = ({ date, pickersDayProps, serviceLevel, type, }) => {
     const response = useSelector(quoteResultSelector);
@@ -378,7 +349,10 @@ const CustomPickersDay = styled(PickersDay, {
         "quoteType",
     ].includes(prop.toString()),
 })(({ theme, enabled, first, last, serviceLevel, selectedDate, day, quoteType, }) => {
-    const swatch = quoteType === "LTL" ? serviceLevelColors.LTL : serviceLevelColors.TL;
+    const _theme = useTheme();
+    const swatch = quoteType === "LTL"
+        ? serviceLevelColors(_theme).LTL
+        : serviceLevelColors(_theme).TL;
     return {
         ...(enabled && {
             ...(!serviceLevel.flexible
@@ -387,7 +361,7 @@ const CustomPickersDay = styled(PickersDay, {
                         ? swatch[serviceLevel.serviceLevel][600]
                         : theme.palette.common.white,
                     border: selectedDate?.toMillis() === day.toMillis()
-                        ? `2px ${swatch[serviceLevel.serviceLevel][600]} solid`
+                        ? `2px ${swatch[serviceLevel.serviceLevel][500]} solid`
                         : "0px",
                     backgroundColor: selectedDate?.toMillis() === day.toMillis()
                         ? theme.palette.common.white
@@ -408,15 +382,15 @@ const CustomPickersDay = styled(PickersDay, {
                     borderBottomRightRadius: !last ? "0%" : "100%",
                     borderLeft: !first || !selectedDate
                         ? "0px"
-                        : `2px ${swatch[serviceLevel.serviceLevel][600]} solid`,
+                        : `2px ${swatch[serviceLevel.serviceLevel][500]} solid`,
                     borderRight: !last || !selectedDate
                         ? "0px"
-                        : `2px ${swatch[serviceLevel.serviceLevel][600]} solid`,
+                        : `2px ${swatch[serviceLevel.serviceLevel][500]} solid`,
                     borderTop: selectedDate
-                        ? `2px ${swatch[serviceLevel.serviceLevel][600]} solid`
+                        ? `2px ${swatch[serviceLevel.serviceLevel][500]} solid`
                         : "0px",
                     borderBottom: selectedDate
-                        ? `2px ${swatch[serviceLevel.serviceLevel][600]} solid`
+                        ? `2px ${swatch[serviceLevel.serviceLevel][500]} solid`
                         : "0px",
                     backgroundColor: selectedDate
                         ? theme.palette.common.white
@@ -509,30 +483,53 @@ const CostBreakdown = () => {
         setExpand(false);
         setKey(nanoid());
     });
-    return (_jsxs(Dialog, { open: open, onClose: handleClose, fullScreen: true, children: [_jsx(DialogContent, { children: !marketCost || !costBreakdown.length ? (_jsx(Box, { sx: {
-                        display: "flex",
-                        height: "100%",
-                        alignItems: "center",
-                        justifyContent: "center",
-                    }, children: _jsx(CircularProgress, {}) })) : (_jsxs(Box, { sx: {
-                        maxHeight: "100%",
-                        height: "100%",
-                        display: "flex",
-                        flexDirection: "column",
-                    }, children: [_jsx(MarketCost, {}), _jsx(Sheet, { sx: {
-                                borderRadius: (theme) => theme.radius.md,
-                                p: 1,
-                                mt: 1,
-                                overflow: "auto",
-                            }, variant: "outlined", children: _jsxs(Grid, { container: true, spacing: 1, children: [_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { level: "h4", children: "Cost Breakdown" }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Box, { sx: { display: "flex", gap: 1 }, children: costBreakdown.map((serviceLevel, k) => (_jsxs(Box, { children: [_jsxs(Typography, { sx: { mb: 3, textTransform: "capitalize" }, level: "title-md", children: [_jsx("img", { src: serviceLevelIcons[serviceLevel.name], style: { height: 20, marginRight: 8 } }), serviceLevel.name] }), serviceLevel.sections.map((s) => (_jsx(Box, { sx: { mb: 1 }, children: _jsxs(Accordion, { defaultExpanded: expand, children: [_jsxs(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), children: [_jsx(Typography, { level: "body-md", sx: { fontWeight: 600 }, children: s.name }), _jsx(Chip, { variant: "soft", size: "sm", sx: { ml: "auto", mr: 1 }, children: usdFormatter.format(s.content.total) })] }), _jsx(AccordionDetails, { children: _jsx(Grid, { container: true, spacing: 1, justifyContent: "space-between", children: s.content.paths.map((p, i) => (_jsxs(Fragment, { children: [_jsx(Grid, { item: true, xs: 8, children: _jsx(Typography, { level: "body-sm", children: p.description }) }), _jsx(Grid, { item: true, xs: 4, display: "flex", justifyContent: "flex-end", children: _jsx(Typography, { fontWeight: 600, level: "body-sm", children: usdFormatter.format(p.cost_amount) }) }), i < s.content.paths.length - 1 ? (_jsx(Grid, { item: true, xs: 12, children: _jsx(Divider, {}) })) : null] }, i))) }) })] }) }, s.name)))] }, k))) }, key) })] }) })] })) }), _jsxs(DialogActions, { children: [_jsxs(Dropdown, { children: [_jsx(MenuButton, { sx: {
+    return (_jsx(Modal, { open: open, onClose: handleClose, children: _jsxs(ModalDialog, { layout: "fullscreen", children: [_jsx(DialogContent, { children: !marketCost || !costBreakdown.length ? (_jsx(Box, { sx: {
+                            display: "flex",
+                            height: "100%",
+                            alignItems: "center",
+                            justifyContent: "center",
+                        }, children: _jsx(CircularProgress, {}) })) : (_jsxs(Box, { sx: {
+                            maxHeight: "100%",
+                            height: "100%",
+                            display: "flex",
+                            flexDirection: "column",
+                        }, children: [_jsx(MarketCost, {}), _jsx(Sheet, { sx: {
+                                    borderRadius: (theme) => theme.radius.md,
+                                    p: 1,
+                                    mt: 1,
+                                    overflow: "auto",
+                                }, variant: "outlined", children: _jsxs(Grid, { container: true, spacing: 1, children: [_jsx(Grid, { xs: 12, children: _jsx(Typography, { level: "h4", children: "Cost Breakdown" }) }), _jsx(Grid, { xs: 12, children: _jsx(Box, { sx: { display: "flex", gap: 1 }, children: costBreakdown.map((serviceLevel, k) => (_jsxs(Box, { children: [_jsxs(Typography, { sx: { mb: 3, textTransform: "capitalize" }, level: "title-md", children: [_jsx("img", { src: serviceLevelIcons[serviceLevel.name], style: { height: 20, marginRight: 8 } }), serviceLevel.name] }), _jsx(AccordionGroup, { sx: {
+                                                                [`& .${accordionClasses.root}`]: {
+                                                                    marginTop: "0.5rem",
+                                                                    transition: "0.2s ease",
+                                                                    '& button:not([aria-expanded="true"])': {
+                                                                        transition: "0.2s ease",
+                                                                        paddingBottom: "0.625rem",
+                                                                    },
+                                                                    "& button:hover": {
+                                                                        background: "transparent",
+                                                                    },
+                                                                },
+                                                                [`& .${accordionClasses.root}.${accordionClasses.expanded}`]: {
+                                                                    bgcolor: "background.level1",
+                                                                    borderRadius: "md",
+                                                                    borderBottom: "1px solid",
+                                                                    borderColor: "background.level2",
+                                                                },
+                                                                '& [aria-expanded="true"]': {
+                                                                    boxShadow: (theme) => `inset 0 -1px 0 ${theme.vars.palette.divider}`,
+                                                                },
+                                                            }, children: serviceLevel.sections.map((s) => (_jsxs(Accordion, { defaultExpanded: expand, children: [_jsxs(AccordionSummary, { children: [_jsx(Typography, { level: "body-md", sx: { fontWeight: 600 }, children: s.name }), _jsx(Chip, { variant: "soft", size: "sm", sx: { ml: "auto", mr: 1 }, children: usdFormatter.format(s.content.total) })] }), _jsx(AccordionDetails, { children: _jsx(Grid, { container: true, spacing: 1, justifyContent: "space-between", children: s.content.paths.map((p, i) => (_jsxs(Fragment, { children: [_jsx(Grid, { xs: 8, children: _jsx(Typography, { level: "body-sm", children: p.description }) }), _jsx(Grid, { xs: 4, display: "flex", justifyContent: "flex-end", children: _jsx(Typography, { fontWeight: 600, level: "body-sm", children: usdFormatter.format(p.cost_amount) }) }), i < s.content.paths.length - 1 ? (_jsx(Grid, { xs: 12, children: _jsx(Divider, {}) })) : null] }, i))) }) })] }, s.name))) })] }, k))) }, key) })] }) })] })) }), _jsx(DialogActions, { children: _jsxs(Dropdown, { children: [_jsx(Button, { onClick: handleClose, children: t("Close") }), _jsx(MenuButton, { sx: {
                                     mr: "auto",
                                 }, size: "sm", color: "neutral", variant: "soft", startDecorator: _jsx("i", { className: "fa-solid fa-keyboard" }), children: "Keyboard Shortcuts" }), _jsxs(Menu, { sx: {
-                                    zIndex: 99999999,
+                                    zIndex: (t) => t.zIndex.modal,
                                 }, children: [_jsx(MenuItem, { onClick: () => {
                                             setExpand(true);
+                                            setKey(nanoid());
                                         }, children: _jsxs(Box, { sx: { display: "flex", gap: 1, alignItems: "baseline" }, children: [_jsx(Letter, { children: "ctrl" }), " ", _jsx(Typography, { level: "body-sm", children: "+" }), _jsx(Letter, { children: "e" }), ": Expand all"] }) }), _jsx(MenuItem, { onClick: () => {
                                             setExpand(false);
-                                        }, children: _jsxs(Box, { sx: { display: "flex", gap: 1, alignItems: "baseline" }, children: [_jsx(Letter, { children: "ctrl" }), " ", _jsx(Typography, { level: "body-sm", children: "+" }), _jsx(Letter, { children: "shift" }), " ", _jsx(Typography, { level: "body-sm", children: "+" }), " ", _jsx(Letter, { children: "e" }), ": Collapse all"] }) })] })] }), _jsx(Button, { onClick: handleClose, children: t("Close") })] })] }));
+                                            setKey(nanoid());
+                                        }, children: _jsxs(Box, { sx: { display: "flex", gap: 1, alignItems: "baseline" }, children: [_jsx(Letter, { children: "ctrl" }), " ", _jsx(Typography, { level: "body-sm", children: "+" }), _jsx(Letter, { children: "shift" }), " ", _jsx(Typography, { level: "body-sm", children: "+" }), " ", _jsx(Letter, { children: "e" }), ": Collapse all"] }) })] })] }) })] }) }));
 };
 const Letter = (props) => {
     return (_jsx(Box, { sx: {
@@ -556,7 +553,7 @@ const MarketCost = () => {
         return (_jsx(Sheet, { sx: {
                 borderRadius: (theme) => theme.radius.md,
                 p: 1,
-            }, variant: "outlined", children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { level: "h4", children: t("Market Cost") }) }), _jsx(Grid, { item: true, xs: 6, children: _jsxs(Grid, { container: true, spacing: 0.5, children: [_jsx(Grid, { item: true, xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), " ", t("Linehaul Cost")] }) }), _jsx(Grid, { item: true, xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.linehaul_cost) }) }), _jsx(Grid, { item: true, xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), " ", t("Fuel Cost")] }) }), _jsx(Grid, { item: true, xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.fuel_cost) }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Divider, {}) }), _jsx(Grid, { item: true, xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), t("TL Total Cost")] }) }), _jsx(Grid, { item: true, xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.truckload_total_cost) }) }), _jsx(Grid, { item: true, xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), t("LTL Pallet Percentage")] }) }), _jsx(Grid, { item: true, xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: marketCosts.ltl_pallet_percentage }) }), _jsx(Grid, { item: true, xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), " ", t("Stop Off Fees")] }) }), _jsx(Grid, { item: true, xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.stop_fees) }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Divider, {}) }), _jsx(Grid, { item: true, xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), t("Market Price")] }) }), _jsx(Grid, { item: true, xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.total_cost) }) }), _jsx(Grid, { item: true, xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), " ", t("Margin")] }) }), _jsx(Grid, { item: true, xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.margin) }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Divider, {}) }), _jsx(Grid, { item: true, xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), t("Total Cost With Margin")] }) }), _jsx(Grid, { item: true, xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.total_cost_with_margin) }) })] }) }), marketCosts.market_data ? (_jsx(Grid, { item: true, xs: 6, children: _jsxs(Grid, { container: true, spacing: 0.5, children: [_jsx(Grid, { item: true, xs: 8, children: _jsx(Typography, { display: "block", children: t("• Miles") }) }), _jsx(Grid, { item: true, xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: marketCosts.otr_miles }) }), _jsx(Grid, { item: true, xs: 8, children: _jsx(Typography, { display: "block", children: t("• Fuel Rate per Mile") }) }), _jsx(Grid, { item: true, xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.market_data.fuel_rate) }) }), _jsx(Grid, { item: true, xs: 8, children: _jsx(Typography, { display: "block", children: t("• Line Haul Rate per Mile") }) }), _jsx(Grid, { item: true, xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.market_data.linehaul_rate) }) }), _jsx(Grid, { item: true, xs: 8, children: _jsx(Typography, { display: "block", children: t("• Line Haul Total") }) }), _jsx(Grid, { item: true, xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.market_data.linehaul_total) }) }), _jsx(Grid, { item: true, xs: 8, children: _jsx(Typography, { display: "block", children: t("• Market Type") }) }), _jsx(Grid, { item: true, xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: marketCosts.market_data.market_type }) }), _jsx(Grid, { item: true, xs: 6, children: _jsx(Typography, { display: "block", children: t("• Market Lane") }) }), _jsx(Grid, { item: true, xs: 6, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: marketCosts.market_data.market_lane }) }), _jsx(Grid, { item: true, xs: 8, children: _jsx(Typography, { display: "block", children: t("• Market Days") }) }), _jsx(Grid, { item: true, xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { size: "sm", variant: "soft", children: marketCosts.market_data.market_days }) })] }) })) : ([])] }) }));
+            }, variant: "outlined", children: _jsxs(Grid, { container: true, spacing: 0.5, children: [_jsx(Grid, { xs: 12, children: _jsx(Typography, { level: "h4", children: t("Market Cost") }) }), _jsxs(Grid, { xs: 6, container: true, children: [_jsx(Grid, { xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), " ", t("Linehaul Cost")] }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.linehaul_cost) }) }), _jsx(Grid, { xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), " ", t("Fuel Cost")] }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.fuel_cost) }) }), _jsx(Grid, { xs: 12, children: _jsx(Divider, {}) }), _jsx(Grid, { xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), t("TL Total Cost")] }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.truckload_total_cost) }) }), _jsx(Grid, { xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), t("LTL Pallet Percentage")] }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: marketCosts.ltl_pallet_percentage }) }), _jsx(Grid, { xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), " ", t("Stop Off Fees")] }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.stop_fees) }) }), _jsx(Grid, { xs: 12, children: _jsx(Divider, {}) }), _jsx(Grid, { xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), t("Market Price")] }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.total_cost) }) }), _jsx(Grid, { xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), " ", t("Margin")] }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.margin) }) }), _jsx(Grid, { xs: 12, children: _jsx(Divider, {}) }), _jsx(Grid, { xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), t("Total Cost With Margin")] }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.total_cost_with_margin) }) })] }), marketCosts.market_data ? (_jsxs(Grid, { xs: 6, container: true, children: [_jsx(Grid, { xs: 8, children: _jsx(Typography, { display: "block", children: t("• Miles") }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: marketCosts.otr_miles }) }), _jsx(Grid, { xs: 8, children: _jsx(Typography, { display: "block", children: t("• Fuel Rate per Mile") }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.market_data.fuel_rate) }) }), _jsx(Grid, { xs: 8, children: _jsx(Typography, { display: "block", children: t("• Line Haul Rate per Mile") }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.market_data.linehaul_rate) }) }), _jsx(Grid, { xs: 8, children: _jsx(Typography, { display: "block", children: t("• Line Haul Total") }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: usdFormatter.format(marketCosts.market_data.linehaul_total) }) }), _jsx(Grid, { xs: 8, children: _jsx(Typography, { display: "block", children: t("• Market Type") }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: marketCosts.market_data.market_type }) }), _jsx(Grid, { xs: 6, children: _jsx(Typography, { display: "block", children: t("• Market Lane") }) }), _jsx(Grid, { xs: 6, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: marketCosts.market_data.market_lane }) }), _jsx(Grid, { xs: 8, children: _jsx(Typography, { display: "block", children: t("• Market Days") }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { size: "sm", variant: "soft", children: marketCosts.market_data.market_days }) })] })) : ([])] }) }));
 };
 const Summary = ({ handleOnTenderLoadClick, customerPortal, }) => {
     const selectedDate = useSelector(selectedDateSelector);
@@ -568,6 +565,7 @@ const Summary = ({ handleOnTenderLoadClick, customerPortal, }) => {
     const dispatch = useDispatch();
     const { t } = useTranslation("salesKit");
     const DATE_FORMAT = "LLLL d yyyy";
+    const theme = useTheme();
     const expired = response
         ? DateTime.now() >
             DateTime.fromISO(response.createdAt).plus({
@@ -577,22 +575,24 @@ const Summary = ({ handleOnTenderLoadClick, customerPortal, }) => {
             })
         : false;
     const { data: customerCredit } = useGetCustomerCreditQuery(response?.customerId || 0, { skip: !response?.customerId || customerPortal });
-    const swatch = response?.type === "LTL" ? serviceLevelColors.LTL : serviceLevelColors.TL;
+    const swatch = response?.type === "LTL"
+        ? serviceLevelColors(theme).LTL
+        : serviceLevelColors(theme).TL;
     if (!selectedDate || !selectedServiceLevel)
         return null;
-    return (_jsxs(Paper, { sx: { p: 2 }, children: [_jsxs(Typography, { level: "title-lg", children: [_jsx("i", { className: "fa-duotone fa-truck pright" }), " ", t("Summary")] }), _jsxs(Grid, { container: true, spacing: 1, rowGap: 2, sx: {
+    return (_jsxs(Sheet, { sx: { p: 2, borderRadius: "sm", boxShadow: "md" }, children: [_jsxs(Typography, { level: "title-lg", children: [_jsx("i", { className: "fa-duotone fa-truck pright" }), " ", t("Summary")] }), _jsxs(Grid, { container: true, spacing: 1, rowGap: 2, sx: {
                     mt: 2,
-                }, children: [_jsxs(Grid, { item: true, xs: 12, children: [_jsx(Typography, { level: "title-md", children: t("About") }), _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx("th", { style: { width: "11%" }, children: t("Quote ID") }), _jsx("th", { style: { width: "10%" }, children: t("Service") }), _jsx("th", { style: { width: "8%" }, children: t("Mode") }), response?.temp && _jsx("th", { children: t("Temperature") }), _jsx("th", { children: t("Commodity Description") }), _jsx("th", { children: t("Total Weight") }), !customerPortal && _jsx("th", { children: t("Freight Class") }), _jsx("th", { style: { width: "10%" }, children: t("Feet") }), _jsx("th", { style: { width: "10%" }, children: t("Pallets") })] }) }), _jsx(TableBody, { children: _jsxs(TableRow, { children: [_jsxs(TableCell, { children: ["#", response?.id] }), _jsx(TableCell, { children: response?.type }), _jsx(TableCell, { children: response?.temp ? t("Reefer") : t("Dry") }), response?.temp && _jsx(TableCell, { children: response.temp }), _jsx(TableCell, { children: response?.commodityDescription }), _jsx(TableCell, { children: response?.weight }), !customerPortal && (_jsx(TableCell, { children: response?.freightClass })), _jsx(TableCell, { children: response?.feet }), _jsx(TableCell, { children: response?.pallets })] }) })] })] }), _jsxs(Grid, { item: true, xs: 12, children: [_jsx(Typography, { level: "title-md", children: t("Stops") }), _jsxs(Grid, { container: true, spacing: 1, mt: 1, rowGap: 2, children: [!customerPortal && (_jsxs(Grid, { item: true, xs: 12, children: [_jsxs(Chip, { startDecorator: _jsx("i", { className: "fa-regular fa-map-location" }), variant: "outlined", color: "neutral", children: [response?.totalMiles, " ", t("miles")] }), _jsxs(Chip, { startDecorator: _jsx("i", { className: "fa-solid fa-timer" }), variant: "outlined", color: "neutral", sx: {
-                                                    ml: 1,
-                                                }, children: [Math.round(response?.transitTime ?? 0), " ", t("hours")] })] })), _jsxs(Grid, { item: true, xs: 4, children: [_jsx("i", { className: "fa-regular fa-arrow-up" }), _jsx(Typography, { ml: 1, display: "inline", level: "body-sm", children: t("From") }), _jsxs(Grid, { container: true, children: [_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { children: from?.address.line1 || t("Unknown Location") }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { children: from?.city }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { children: from?.zip }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Chip, { startDecorator: _jsx(CalendarMonth, {}), variant: "soft", children: from?.date
-                                                                ? DateTime.fromFormat(from.date, "yyyy-L-d").toFormat(DATE_FORMAT)
-                                                                : "" }) })] })] }), _jsxs(Grid, { item: true, xs: 4, children: [_jsx("i", { className: "fa-regular fa-arrow-down" }), _jsx(Typography, { ml: 1, display: "inline", level: "body-sm", children: t("To") }), _jsxs(Grid, { container: true, children: [_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { children: to?.address.line1 || t("Unknown Location") }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { children: to?.city }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { children: to?.zip }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Chip, { startDecorator: _jsx(CalendarMonth, {}), variant: "soft", children: selectedServiceLevel.serviceLevel == "guaranteed"
-                                                                ? selectedDate?.toFormat(DATE_FORMAT)
-                                                                : `${DateTime.fromFormat(selectedServiceLevel.from, "yyyy-L-d").toFormat(DATE_FORMAT)} - ${DateTime.fromFormat(selectedServiceLevel.to, "yyyy-L-d").toFormat(DATE_FORMAT)}` }) })] })] })] })] }), _jsxs(Grid, { item: true, xs: 12, children: [_jsx(Typography, { level: "title-md", children: t("Costs") }), _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx("th", { children: t("Service Level") }), _jsx("th", { children: t("Description") }), _jsx("th", { children: t("Base Rate") }), _jsx("th", { children: t("Fuel Rate") }), _jsx("th", { children: t("Extra") })] }) }), _jsx(TableBody, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx("img", { src: selectedServiceLevel.serviceLevel === "guaranteed"
+                }, children: [_jsxs(Grid, { xs: 12, children: [_jsx(Typography, { level: "title-md", children: t("About") }), _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: { width: "11%" }, children: t("Quote ID") }), _jsx("th", { style: { width: "10%" }, children: t("Service") }), _jsx("th", { style: { width: "8%" }, children: t("Mode") }), response?.temp && _jsx("th", { children: t("Temperature") }), _jsx("th", { children: t("Commodity Description") }), _jsx("th", { children: t("Total Weight") }), !customerPortal && _jsx("th", { children: t("Freight Class") }), _jsx("th", { style: { width: "10%" }, children: t("Feet") }), _jsx("th", { style: { width: "10%" }, children: t("Pallets") })] }) }), _jsx("tbody", { children: _jsxs("tr", { children: [_jsxs("td", { children: ["#", response?.id] }), _jsx("td", { children: response?.type }), _jsx("td", { children: response?.temp ? t("Reefer") : t("Dry") }), response?.temp && _jsx("td", { children: response.temp }), _jsx("td", { children: response?.commodityDescription }), _jsx("td", { children: response?.weight }), !customerPortal && _jsx("td", { children: response?.freightClass }), _jsx("td", { children: response?.feet }), _jsx("td", { children: response?.pallets })] }) })] })] }), _jsxs(Grid, { xs: 12, container: true, children: [_jsx(Grid, { xs: 12, children: _jsx(Typography, { level: "title-md", children: t("Stops") }) }), !customerPortal && (_jsxs(Grid, { xs: 12, children: [_jsxs(Chip, { startDecorator: _jsx("i", { className: "fa-regular fa-map-location" }), variant: "outlined", color: "neutral", children: [response?.totalMiles, " ", t("miles")] }), _jsxs(Chip, { startDecorator: _jsx("i", { className: "fa-solid fa-timer" }), variant: "outlined", color: "neutral", sx: {
+                                            ml: 1,
+                                        }, children: [Math.round(response?.transitTime ?? 0), " ", t("hours")] })] })), _jsxs(Grid, { container: true, xs: 4, children: [_jsxs(Grid, { xs: 12, children: [_jsx("i", { className: "fa-regular fa-arrow-up" }), _jsx(Typography, { ml: 1, display: "inline", level: "body-sm", children: t("From") })] }), _jsx(Grid, { xs: 12, children: _jsx(Typography, { children: from?.address.line1 || t("Unknown Location") }) }), _jsx(Grid, { xs: 12, children: _jsx(Typography, { children: from?.city }) }), _jsx(Grid, { xs: 12, children: _jsx(Typography, { children: from?.zip }) }), _jsx(Grid, { xs: 12, children: _jsx(Chip, { startDecorator: _jsx("i", { className: "fa-solid fa-calendar-days" }), variant: "soft", children: from?.date
+                                                ? DateTime.fromFormat(from.date, "yyyy-L-d").toFormat(DATE_FORMAT)
+                                                : "" }) })] }), _jsxs(Grid, { xs: 4, container: true, children: [_jsxs(Grid, { xs: 12, children: [_jsx("i", { className: "fa-regular fa-arrow-down" }), _jsx(Typography, { ml: 1, display: "inline", level: "body-sm", children: t("To") })] }), _jsx(Grid, { xs: 12, children: _jsx(Typography, { children: to?.address.line1 || t("Unknown Location") }) }), _jsx(Grid, { xs: 12, children: _jsx(Typography, { children: to?.city }) }), _jsx(Grid, { xs: 12, children: _jsx(Typography, { children: to?.zip }) }), _jsx(Grid, { xs: 12, children: _jsx(Chip, { startDecorator: _jsx("i", { className: "fa-solid fa-calendar-days" }), variant: "soft", children: selectedServiceLevel.serviceLevel == "guaranteed"
+                                                ? selectedDate?.toFormat(DATE_FORMAT)
+                                                : `${DateTime.fromFormat(selectedServiceLevel.from, "yyyy-L-d").toFormat(DATE_FORMAT)} - ${DateTime.fromFormat(selectedServiceLevel.to, "yyyy-L-d").toFormat(DATE_FORMAT)}` }) })] })] }), _jsxs(Grid, { xs: 12, children: [_jsx(Typography, { level: "title-md", children: t("Costs") }), _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: t("Service Level") }), _jsx("th", { children: t("Description") }), _jsx("th", { children: t("Base Rate") }), _jsx("th", { children: t("Fuel Rate") }), _jsx("th", { children: t("Extra") })] }) }), _jsx("tbody", { children: _jsxs("tr", { children: [_jsx("td", { children: _jsx("img", { src: selectedServiceLevel.serviceLevel === "guaranteed"
                                                             ? response?.getGuaranteedIcon()
                                                             : selectedServiceLevel.serviceLevel === "premium"
                                                                 ? response?.getPremiumIcon()
-                                                                : response?.getEconomyIcon(), style: { height: 20 } }) }), _jsx(TableCell, { children: selectedServiceLevel?.description }), _jsx(TableCell, { children: usdFormatter.format(selectedServiceLevel.baseRate) }), _jsx(TableCell, { children: usdFormatter.format(selectedServiceLevel.fuelRate) }), _jsx(TableCell, { children: usdFormatter.format(selectedServiceLevel.extra) })] }) })] })] }), _jsx(Grid, { item: true, xs: 12, textAlign: "right", children: _jsxs(Grid, { container: true, spacing: 1, justifyContent: "end", children: [_jsxs(Grid, { item: true, children: [_jsx(Typography, { children: t("Total") }), _jsx(Typography, { level: "title-md", children: usdFormatter.format(selectedServiceLevel.totalRate) })] }), !customerPortal ? (_jsxs(_Fragment, { children: [_jsx(Grid, { item: true, children: _jsx(Divider, { orientation: "vertical" }) }), _jsxs(Grid, { item: true, children: [_jsx(Typography, { children: t("Customer Credit") }), _jsx(Typography, { level: "title-md", children: usdFormatter.format(customerCredit?.availableCredit || 0) })] })] })) : null] }) }), _jsx(Grid, { item: true, xs: 12, textAlign: "right", children: _jsx(Tooltip, { title: expired && customerPortal
+                                                                : response?.getEconomyIcon(), style: { height: 20 } }) }), _jsx("td", { children: selectedServiceLevel?.description }), _jsx("td", { children: usdFormatter.format(selectedServiceLevel.baseRate) }), _jsx("td", { children: usdFormatter.format(selectedServiceLevel.fuelRate) }), _jsx("td", { children: usdFormatter.format(selectedServiceLevel.extra) })] }) })] })] }), _jsxs(Grid, { xs: 12, textAlign: "right", justifyContent: "end", container: true, children: [_jsxs(Grid, { children: [_jsx(Typography, { children: t("Total") }), _jsx(Typography, { level: "title-md", children: usdFormatter.format(selectedServiceLevel.totalRate) })] }), !customerPortal ? (_jsxs(_Fragment, { children: [_jsx(Grid, { children: _jsx(Divider, { orientation: "vertical" }) }), _jsxs(Grid, { children: [_jsx(Typography, { children: t("Customer Credit") }), _jsx(Typography, { level: "title-md", children: usdFormatter.format(customerCredit?.availableCredit || 0) })] })] })) : null] }), _jsx(Grid, { xs: 12, textAlign: "right", children: _jsx(Tooltip, { title: expired && customerPortal
                                 ? 'Quote is expired, click on "Run Quote" to create a new one.'
                                 : body.loadId
                                     ? 'Quote has already been tendered, click on "Run Quote" to create a new one.'
@@ -610,16 +610,17 @@ const Summary = ({ handleOnTenderLoadClick, customerPortal, }) => {
                                                 ? swatch[selectedServiceLevel.serviceLevel][700]
                                                 : undefined,
                                         },
-                                        "&.Joy-disabled": {
+                                        "&.Mui-disabled": {
                                             background: response
                                                 ? swatch[selectedServiceLevel.serviceLevel][300]
                                                 : undefined,
+                                            color: "white",
                                         },
                                     }, onClick: () => {
                                         if (response && selectedServiceLevel) {
                                             handleOnTenderLoadClick(response.id, customerPortal
                                                 ? selectedServiceLevel.id
-                                                : selectedServiceLevel.serviceLevel, selectedDate, customerCredit?.availableCredit &&
+                                                : selectedServiceLevel.serviceLevel, !selectedServiceLevel.flexible ? selectedDate : null, customerCredit?.availableCredit &&
                                                 customerCredit.availableCredit <
                                                     selectedServiceLevel.totalRate
                                                 ? customerCredit.availableCredit -