@nerdjs/sales-kit 2.4.2 → 2.4.3

package/dist/hooks/quote/result.js

@@ -1,21 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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 { 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, FormControl, FormLabel, FormHelperText, } from "@mui/joy";
+import { alpha, styled } from "@mui/system";
 import { LocalizationProvider, PickersDay, StaticDatePicker, } from "@mui/x-date-pickers";
 import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import salesKitI18n from "../../i18n";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
-import { restartQuote, setCostBreakdownOpen, setFormOpen, setMarketCostOpen, setQuoteResult, setSelectedDate, setSelectedServiceLevel, } from "../../redux/quote";
+import { restartQuote, setCostBreakdownOpen, setEconomyCargoLiability, setFormOpen, setGuaranteedCargoLiability, setMarketCostOpen, setPremiumCargoLiability, setQuoteResult, setSelectedDate, setSelectedServiceLevel, useCalculateLoadLiabilityCostMutation, } from "../../redux/quote";
 import { useLazyGetCostBreakdownQuery, useGetMarketCostQuery, useLazyGetMarketCostQuery, } from "../../redux/quote/quoteCustomerPortalEndpoints";
-import { costBreakdownOpenSelector, formOpenSelector, selectedDateSelector, selectedServiceLevelSelector, } from "../../redux/quote/quoteSelectors";
+import { costBreakdownOpenSelector, economyCargoLiabilitySelector, formOpenSelector, guaranteedCargoLiabilitySelector, premiumCargoLiabilitySelector, quoteResultSelector, selectedDateSelector, selectedServiceLevelSelector, } from "../../redux/quote/quoteSelectors";
 import { SALES_QUOTE_EXPIRATION, CUSTOMER_PORTAL_QUOTE_EXPIRATION, LTL_DOC, TL_DOC, serviceLevelColors, serviceLevelIcons, usdFormatter, quoteResultToEmail, } from "./constants";
 import { DateTime } from "luxon";
 import { Link as RouterLink } from "react-router-dom";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useGetCustomerCreditQuery } from "../../redux";
 import { nanoid } from "@reduxjs/toolkit";
-import { CustomAdapterLuxon } from "@nerdjs/nerd-ui";
+import { CustomAdapterLuxon, NerdCurrencyField } from "@nerdjs/nerd-ui";
 const DATE_FORMAT = "LLL d";
 /**
  * QuoteResponse. A drawer that displays the quote response
@@ -165,7 +165,7 @@ export function ServiceLevels({ customerPortal, response, }) {
                                             }, children: [_jsx(Typography, { level: "body-sm", children: t("global.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("global.Total"), ":"] }), _jsx(Typography, { level: "body-md", children: usdFormatter.format(l.totalRate) })] }), _jsx(Button, { onClick: () => {
+                                    }, children: [_jsxs(Typography, { level: "body-md", children: [t("global.Total"), ":"] }), _jsx(Typography, { level: "body-md", children: usdFormatter.format(l.totalRate + 500) })] }), _jsx(Button, { onClick: () => {
                                         dispatch(setSelectedDate(null));
                                         dispatch(setSelectedServiceLevel(l));
                                     }, sx: {
@@ -198,28 +198,49 @@ function ServiceLevelsDetails({ quoteResponse, }) {
     const { serviceLevels } = quoteResponse;
     const dispatch = useDispatch();
     const { t } = useTranslation("common", { i18n: salesKitI18n });
+    const [openEcoCargoLiabilityForm, setOpenEcoCargoLiabilityForm] = useState(false);
+    const [openPreCargoLiabilityForm, setOpenPreCargoLiabilityForm] = useState(false);
+    const [openGuaCargoLiabilityForm, setOpenGuaCargoLiabilityForm] = useState(false);
     const { economy, guaranteed, premium } = useMemo(() => {
         const economy = serviceLevels?.find((s) => s.serviceLevel == "economy");
         const premium = serviceLevels?.find((s) => s.serviceLevel == "premium");
         const guaranteed = serviceLevels?.find((s) => s.serviceLevel == "guaranteed");
         return { economy, premium, guaranteed };
     }, [serviceLevels]);
+    const minEconomyLiabilityCoverage = useMemo(() => economy?.liabilityCoverage || 0, [economy?.liabilityCoverage]);
+    const minPremiumLiabilityCoverage = useMemo(() => premium?.liabilityCoverage || 0, [premium?.liabilityCoverage]);
+    const minGuaranteedLiabilityCoverage = useMemo(() => guaranteed?.liabilityCoverage || 0, [guaranteed?.liabilityCoverage]);
+    const { data: economyCargoLiabilityCost } = useCalculateLoadLiabilityCostMutation({ fixedCacheKey: "economy" })[1];
+    const { data: premiumCargoLiabilityCost } = useCalculateLoadLiabilityCostMutation({ fixedCacheKey: "premium" })[1];
+    const { data: guaranteedCargoLiabilityCost } = useCalculateLoadLiabilityCostMutation({ fixedCacheKey: "guaranteed" })[1];
+    const guaranteedCargoLiability = useSelector(guaranteedCargoLiabilitySelector);
+    const premiumCargoLiability = useSelector(premiumCargoLiabilitySelector);
+    const economyCargoLiability = useSelector(economyCargoLiabilitySelector);
+    useEffect(() => {
+        dispatch(setGuaranteedCargoLiability(minGuaranteedLiabilityCoverage));
+        dispatch(setPremiumCargoLiability(minPremiumLiabilityCoverage));
+        dispatch(setEconomyCargoLiability(minEconomyLiabilityCoverage));
+    }, [
+        minEconomyLiabilityCoverage,
+        minPremiumLiabilityCoverage,
+        minGuaranteedLiabilityCoverage,
+    ]);
     return (_jsx(Sheet, { sx: {
             borderRadius: "sm",
             boxShadow: "md",
         }, children: _jsxs(Table, { sx: {
                 "& td": { textAlign: "center" },
-            }, size: "lg", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: {
+            }, size: "md", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: {
                                     width: "50px",
                                 } }), _jsx("th", { style: {
                                     width: "125px",
                                 } }), guaranteed && (_jsxs("th", { style: {
                                     textAlign: "center",
-                                }, children: [_jsx("img", { width: 60, alt: "guaranteed", src: quoteResponse.getGuaranteedIcon() }), _jsx(Typography, { children: guaranteed.name })] })), premium && (_jsxs("th", { style: {
+                                }, children: [_jsx("img", { width: 45, alt: "guaranteed", src: quoteResponse.getGuaranteedIcon() }), _jsx(Typography, { children: guaranteed.name })] })), premium && (_jsxs("th", { style: {
                                     textAlign: "center",
-                                }, children: [_jsx("img", { width: 60, alt: "premium", src: quoteResponse.getPremiumIcon() }), _jsx(Typography, { children: premium.name })] })), economy && (_jsxs("th", { style: {
+                                }, children: [_jsx("img", { width: 45, 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("tbody", { children: [_jsxs("tr", { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-truck-clock" }) }), _jsx("th", { style: {
+                                }, children: [_jsx("img", { width: 45, 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("global.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: {
@@ -240,6 +261,25 @@ function ServiceLevelsDetails({ quoteResponse, }) {
                                     }, children: t("global.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: "Cargo Liability" }), guaranteed && (_jsxs("td", { children: [_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", flexWrap: "wrap", children: [_jsx(Chip, { color: "primary", startDecorator: guaranteedCargoLiability !==
+                                                        minGuaranteedLiabilityCoverage ? (_jsx("i", { className: "fa-solid fa-circle-check" })) : null, children: usdFormatter.format(guaranteedCargoLiability) }), _jsx(Button, { sx: {
+                                                        mt: 0.5,
+                                                    }, size: "sm", variant: "plain", onClick: () => setOpenGuaCargoLiabilityForm(true), children: "Add More" })] }), _jsx(EditCargoLiabilityModal, { onClose: () => setOpenGuaCargoLiabilityForm(false), open: openGuaCargoLiabilityForm, value: guaranteedCargoLiability, setValue: (v) => dispatch(setGuaranteedCargoLiability(v)), minValue: minGuaranteedLiabilityCoverage, serviceLevel: "guaranteed" })] })), premium && (_jsxs("td", { children: [_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", flexWrap: "wrap", children: [_jsx(Chip, { color: "primary", startDecorator: premiumCargoLiability !== minPremiumLiabilityCoverage ? (_jsx("i", { className: "fa-solid fa-circle-check" })) : null, children: usdFormatter.format(premiumCargoLiability) }), _jsx(Button, { sx: {
+                                                        mt: 0.5,
+                                                    }, size: "sm", variant: "plain", onClick: () => setOpenPreCargoLiabilityForm(true), children: "Add More" })] }), _jsx(EditCargoLiabilityModal, { onClose: () => setOpenPreCargoLiabilityForm(false), open: openPreCargoLiabilityForm, value: premiumCargoLiability, setValue: (v) => dispatch(setPremiumCargoLiability(v)), minValue: minPremiumLiabilityCoverage, serviceLevel: "premium" })] })), economy && (_jsxs("td", { children: [_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", flexWrap: "wrap", children: [_jsx(Chip, { color: "primary", startDecorator: economyCargoLiability !== minEconomyLiabilityCoverage ? (_jsx("i", { className: "fa-solid fa-circle-check" })) : null, children: usdFormatter.format(economyCargoLiability) }), _jsx(Button, { sx: {
+                                                        mt: 0.5,
+                                                    }, size: "sm", variant: "plain", onClick: () => setOpenEcoCargoLiabilityForm(true), children: "Add more" })] }), _jsx(EditCargoLiabilityModal, { onClose: () => setOpenEcoCargoLiabilityForm(false), open: openEcoCargoLiabilityForm, value: economyCargoLiability, setValue: (v) => dispatch(setEconomyCargoLiability(v)), minValue: minEconomyLiabilityCoverage, serviceLevel: "economy" })] }))] }), _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { style: {
+                                        whiteSpace: "normal",
+                                        wordBreak: "break-word",
+                                    }, children: "Cargo Liability Cost" }), guaranteed && (_jsx("td", { children: _jsx(Chip, { size: "sm", color: "primary", startDecorator: _jsx("i", { className: "fa-solid fa-circle-check" }), children: guaranteedCargoLiability === minGuaranteedLiabilityCoverage
+                                            ? "Included"
+                                            : usdFormatter.format(guaranteedCargoLiabilityCost?.guaranteed || 0) }) })), premium && (_jsx("td", { children: _jsx(Chip, { size: "sm", color: "primary", startDecorator: _jsx("i", { className: "fa-solid fa-circle-check" }), children: premiumCargoLiability === minPremiumLiabilityCoverage
+                                            ? "Included"
+                                            : usdFormatter.format(premiumCargoLiabilityCost?.premium || 0) }) })), economy && (_jsx("td", { children: _jsx(Chip, { size: "sm", color: "primary", startDecorator: _jsx("i", { className: "fa-solid fa-circle-check" }), children: economyCargoLiability === minEconomyLiabilityCoverage
+                                            ? "Included"
+                                            : usdFormatter.format(economyCargoLiabilityCost?.economy || 0) }) }))] }), _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { style: {
+                                        whiteSpace: "normal",
+                                        wordBreak: "break-word",
                                     }, children: t("global.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",
@@ -249,7 +289,10 @@ function ServiceLevelsDetails({ quoteResponse, }) {
                                     }, children: t("global.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("global.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: {
+                                    }, children: t("global.Total") }), guaranteed && (_jsx("td", { children: guaranteedCargoLiability !== minGuaranteedLiabilityCoverage ? (_jsx(Chip, { size: "sm", color: "primary", startDecorator: _jsx("i", { className: "fa-solid fa-circle-check" }), children: usdFormatter.format(guaranteed.totalRate +
+                                            (guaranteedCargoLiabilityCost?.guaranteed || 0)) })) : (usdFormatter.format(guaranteed.totalRate)) })), premium && (_jsx("td", { children: premiumCargoLiability !== minPremiumLiabilityCoverage ? (_jsx(Chip, { size: "sm", color: "primary", startDecorator: _jsx("i", { className: "fa-solid fa-circle-check" }), children: usdFormatter.format(premium.totalRate +
+                                            (premiumCargoLiabilityCost?.premium || 0)) })) : (usdFormatter.format(premium.totalRate)) })), economy && (_jsx("td", { children: economyCargoLiability !== minEconomyLiabilityCoverage ? (_jsx(Chip, { size: "sm", startDecorator: _jsx("i", { className: "fa-solid fa-circle-check" }), color: "primary", children: usdFormatter.format(economy.totalRate +
+                                            (economyCargoLiabilityCost?.economy || 0)) })) : (usdFormatter.format(economy.totalRate)) }))] })] }), _jsx("tfoot", { style: {
                         height: 70,
                     }, children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { style: {
                                     borderBottomRightRadius: 0,
@@ -258,45 +301,83 @@ function ServiceLevelsDetails({ quoteResponse, }) {
                                 }, children: _jsx(Button, { onClick: () => {
                                         dispatch(setSelectedDate(null));
                                         dispatch(setSelectedServiceLevel(guaranteed));
-                                    }, sx: {
-                                        height: "100%",
-                                        background: quoteResponse.getGuaranteedColor(),
-                                        color: "white",
-                                        "&:hover": {
-                                            background: darken(quoteResponse.getGuaranteedColor(), 0.3),
-                                        },
-                                    }, children: _jsxs(Box, { children: [t("global.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
+                                    }, color: "danger", children: _jsxs(Box, { children: [t("global.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("td", { style: {
                                     borderBottomLeftRadius: 0,
                                 }, children: _jsx(Button, { onClick: () => {
                                         dispatch(setSelectedDate(null));
                                         dispatch(setSelectedServiceLevel(premium));
-                                    }, sx: {
-                                        height: "100%",
-                                        background: quoteResponse.getPremiumColor(),
-                                        color: "white",
-                                        "&:hover": {
-                                            background: darken(quoteResponse.getPremiumColor(), 0.3),
-                                        },
-                                    }, children: _jsxs(Box, { children: [t("global.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
+                                    }, color: "warning", children: _jsxs(Box, { children: [t("global.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("td", { style: {
                                     borderBottomLeftRadius: 0,
                                 }, children: _jsx(Button, { onClick: () => {
                                         dispatch(setSelectedDate(null));
                                         dispatch(setSelectedServiceLevel(economy));
-                                    }, sx: {
-                                        height: "100%",
-                                        background: quoteResponse.getEconomyColor(),
-                                        color: "white",
-                                        "&:hover": {
-                                            background: darken(quoteResponse.getEconomyColor(), 0.3),
-                                        },
-                                    }, children: _jsxs(Box, { children: [t("global.Select delivery window"), _jsx("br", {}), _jsxs(Typography, { level: "body-sm", display: "block", sx: { color: "inherit" }, children: [DateTime.fromFormat(economy.from, "yyyy-L-d").toFormat(DATE_FORMAT), economy.from != economy.to
+                                    }, color: "success", children: _jsxs(Box, { children: [t("global.Select delivery window"), _jsx("br", {}), _jsxs(Typography, { level: "body-sm", display: "block", sx: { color: "inherit" }, children: [DateTime.fromFormat(economy.from, "yyyy-L-d").toFormat(DATE_FORMAT), economy.from != economy.to
                                                         ? ` - ${DateTime.fromFormat(economy.to, "yyyy-L-d").toFormat(DATE_FORMAT)}`
                                                         : []] })] }) }) }))] }) })] }) }));
 }
+const EditCargoLiabilityModal = ({ value, setValue, open, onClose, minValue, serviceLevel, }) => {
+    const { t } = useTranslation("common", { i18n: salesKitI18n });
+    const [_value, _setValue] = useState(value);
+    const [error, setError] = useState(false);
+    const [calculateCost, { isLoading }] = useCalculateLoadLiabilityCostMutation({
+        fixedCacheKey: serviceLevel,
+    });
+    const result = useSelector(quoteResultSelector);
+    const handleSave = () => {
+        if (result && _value !== undefined) {
+            calculateCost({
+                amount: _value,
+                weight: result?.weight,
+            })
+                .unwrap()
+                .then(() => {
+                setValue(_value);
+                handleClose();
+            })
+                .catch(() => {
+                return;
+            });
+        }
+    };
+    const handleClose = () => {
+        onClose();
+        _setValue(undefined);
+    };
+    useEffect(() => {
+        _setValue(value);
+    }, [open]);
+    return (_jsx(Modal, { open: open, onClose: handleClose, children: _jsxs(ModalDialog, { layout: "center", sx: (theme) => ({
+                width: 450,
+                [theme.breakpoints.only("xs")]: {
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    border: 0,
+                    borderRadius: 0,
+                    transform: "initial",
+                    maxWidth: "initial",
+                    maxHeight: "initial",
+                    width: "initial",
+                },
+            }), children: [_jsx(DialogTitle, { children: "Cargo Liability" }), _jsxs(DialogContent, { children: [_jsxs(Typography, { level: "body-sm", children: ["The minimum and included cargo liability amount for the selected service level is", " ", _jsx(Typography, { level: "body-sm", color: "primary", fontWeight: "md", children: usdFormatter.format(minValue) }), ". Feel free to increase it; the cost will be calculated automatically."] }), _jsx(Box, { mt: 1, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Cargo Liability" }), _jsx(NerdCurrencyField, { value: _value, inputProps: {
+                                            fullWidth: true,
+                                            error,
+                                            endDecorator: _value !== minValue ? (_jsx(Tooltip, { title: "Reset", size: "sm", children: _jsx(IconButton, { size: "sm", onClick: () => _setValue(minValue), children: _jsx("i", { className: "fa-solid fa-xmark" }) }) })) : null,
+                                        }, onChange: (v) => {
+                                            _setValue(v);
+                                            if (!v || v < minValue)
+                                                setError(true);
+                                            else
+                                                setError(false);
+                                        } }), _jsx(FormHelperText, { children: error
+                                            ? `The minimum amount is ${usdFormatter.format(minValue)}`
+                                            : "" })] }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { loading: isLoading, color: "primary", onClick: handleSave, disabled: error, children: t("global.Confirm") }), _jsx(Button, { color: "neutral", variant: "soft", onClick: handleClose, children: t("global.Cancel") })] })] }) }));
+};
 /**
  * Quote toolbar. Contains actions like restart, run quote or find a quote.
  *
@@ -588,7 +669,6 @@ export const Summary = ({ handleOnTenderLoadClick, customerPortal, response, bod
     const dispatch = useDispatch();
     const { t } = useTranslation("common", { i18n: salesKitI18n });
     const DATE_FORMAT = "LLLL d yyyy";
-    const theme = useTheme();
     const expired = response
         ? DateTime.now() >
             DateTime.fromISO(response.createdAt).plus({
@@ -598,9 +678,24 @@ export const Summary = ({ handleOnTenderLoadClick, customerPortal, response, bod
             })
         : false;
     const { data: customerCredit } = useGetCustomerCreditQuery(response?.customerId || 0, { skip: !response?.customerId || customerPortal });
-    const swatch = response?.type === "LTL"
-        ? serviceLevelColors(theme).LTL
-        : serviceLevelColors(theme).TL;
+    const { data: _cargoLiabilityCost } = useCalculateLoadLiabilityCostMutation({
+        fixedCacheKey: selectedServiceLevel?.serviceLevel,
+    })[1];
+    const cargoLiabilityCost = useMemo(() => {
+        switch (selectedServiceLevel?.serviceLevel) {
+            case "economy":
+                return _cargoLiabilityCost?.economy || 0;
+            case "premium":
+                return _cargoLiabilityCost?.premium || 0;
+            case "guaranteed":
+                return _cargoLiabilityCost?.guaranteed || 0;
+            default:
+                return 0;
+        }
+    }, [_cargoLiabilityCost]);
+    const guaranteedCargoLiability = useSelector(guaranteedCargoLiabilitySelector);
+    const premiumCargoLiability = useSelector(premiumCargoLiabilitySelector);
+    const economyCargoLiability = useSelector(economyCargoLiabilitySelector);
     if (!selectedDate || !selectedServiceLevel)
         return null;
     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("global.Summary")] }), _jsxs(Grid, { container: true, spacing: 1, rowGap: 1.5, sx: {
@@ -611,11 +706,25 @@ export const Summary = ({ handleOnTenderLoadClick, customerPortal, response, bod
                                                 ? 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("global.To") })] }), _jsx(Grid, { xs: 12, children: _jsx(Typography, { children: to?.address.line1 || t("global.Unknown Location") }) }), _jsx(Grid, { xs: 12, children: _jsxs(Typography, { children: [to?.city, ", ", to?.state] }) }), _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-lg", children: t("global.Costs") }), _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: t("global.Service Level") }), _jsx("th", { children: t("global.Description") }), _jsx("th", { children: t("global.Base Rate") }), _jsx("th", { children: t("global.Fuel Rate") }), _jsx("th", { children: t("global.Extra") })] }) }), _jsx("tbody", { children: _jsxs("tr", { children: [_jsx("td", { children: _jsx("img", { src: selectedServiceLevel.serviceLevel === "guaranteed"
+                                                : `${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-lg", children: t("global.Costs") }), _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: t("global.Service Level") }), _jsx("th", { children: t("global.Description") }), _jsx("th", { style: {
+                                                        width: 150,
+                                                    }, children: "Cargo Liability Cost" }), _jsx("th", { children: t("global.Base Rate") }), _jsx("th", { children: t("global.Fuel Rate") }), _jsx("th", { children: t("global.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("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("global.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("global.Customer Credit") }), _jsx(Typography, { level: "title-md", children: usdFormatter.format(customerCredit?.availableCredit || 0) })] })] })) : null] }), !hideTenderButton ? (_jsx(Grid, { xs: 12, textAlign: "right", children: _jsx(Tooltip, { title: expired && customerPortal
+                                                                : response?.getEconomyIcon(), style: { height: 20 } }) }), _jsx("td", { children: selectedServiceLevel?.description }), _jsx("td", { children: _jsx(Chip, { size: "sm", color: cargoLiabilityCost ? "primary" : "neutral", sx: {
+                                                            backgroundColor: cargoLiabilityCost
+                                                                ? undefined
+                                                                : "inherit",
+                                                        }, children: cargoLiabilityCost === 0
+                                                            ? "Included"
+                                                            : usdFormatter.format(cargoLiabilityCost) }) }), _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, { sx: {
+                                            pr: 1,
+                                        }, children: t("global.Total") }), _jsx(Chip, { color: cargoLiabilityCost !== 0 ? "primary" : "neutral", sx: {
+                                            backgroundColor: cargoLiabilityCost !== 0 ? undefined : "inherit",
+                                        }, children: _jsx(Typography, { level: "title-md", sx: {
+                                                color: "inherit",
+                                            }, children: usdFormatter.format(selectedServiceLevel.totalRate + cargoLiabilityCost) }) })] }), !customerPortal ? (_jsxs(_Fragment, { children: [_jsx(Grid, { children: _jsx(Divider, { orientation: "vertical" }) }), _jsxs(Grid, { children: [_jsx(Typography, { children: t("global.Customer Credit") }), _jsx(Typography, { level: "title-md", children: usdFormatter.format(customerCredit?.availableCredit || 0) })] })] })) : null] }), !hideTenderButton ? (_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.'
@@ -623,23 +732,11 @@ export const Summary = ({ handleOnTenderLoadClick, customerPortal, response, bod
                                         ? "No customer selected"
                                         : undefined, children: _jsx("span", { children: _jsx(Button, { disabled: (expired && customerPortal) || body?.loadId
                                         ? true
-                                        : false || (!customerPortal && !response?.customerId), sx: {
-                                        color: "white",
-                                        background: response
-                                            ? swatch[selectedServiceLevel.serviceLevel][500]
-                                            : undefined,
-                                        "&:hover": {
-                                            background: response
-                                                ? swatch[selectedServiceLevel.serviceLevel][700]
-                                                : undefined,
-                                        },
-                                        "&.Mui-disabled": {
-                                            background: response
-                                                ? swatch[selectedServiceLevel.serviceLevel][300]
-                                                : undefined,
-                                            color: "white",
-                                        },
-                                    }, onClick: () => {
+                                        : false || (!customerPortal && !response?.customerId), color: selectedServiceLevel.serviceLevel == "economy"
+                                        ? "success"
+                                        : selectedServiceLevel.serviceLevel == "premium"
+                                            ? "warning"
+                                            : "danger", onClick: () => {
                                         if (response && selectedServiceLevel) {
                                             handleOnTenderLoadClick?.(response.id, customerPortal
                                                 ? selectedServiceLevel.id
@@ -648,6 +745,12 @@ export const Summary = ({ handleOnTenderLoadClick, customerPortal, response, bod
                                                     selectedServiceLevel.totalRate
                                                 ? customerCredit.availableCredit -
                                                     selectedServiceLevel.totalRate
+                                                : undefined, cargoLiabilityCost !== 0
+                                                ? selectedServiceLevel.serviceLevel === "economy"
+                                                    ? economyCargoLiability
+                                                    : selectedServiceLevel.serviceLevel === "guaranteed"
+                                                        ? guaranteedCargoLiability
+                                                        : premiumCargoLiability
                                                 : undefined);
                                             dispatch(restartQuote());
                                             dispatch(setQuoteResult(undefined));