@nerdjs/sales-kit 2.4.4 → 2.4.6

package/dist/hooks/quote/result.js

@@ -1,14 +1,14 @@
 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, FormControl, FormLabel, FormHelperText, } from "@mui/joy";
+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, } 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, setEconomyCargoLiability, setFormOpen, setGuaranteedCargoLiability, setMarketCostOpen, setPremiumCargoLiability, setQuoteResult, setSelectedDate, setSelectedServiceLevel, useCalculateLoadLiabilityCostMutation, } from "../../redux/quote";
-import { useLazyGetCostBreakdownQuery, useGetMarketCostQuery, useLazyGetMarketCostQuery, } from "../../redux/quote/quoteCustomerPortalEndpoints";
-import { costBreakdownOpenSelector, economyCargoLiabilitySelector, formOpenSelector, guaranteedCargoLiabilitySelector, premiumCargoLiabilitySelector, quoteResultSelector, selectedDateSelector, selectedServiceLevelSelector, } from "../../redux/quote/quoteSelectors";
+import { restartQuote, setCostBreakdownOpen, setCargoLiability, setFormOpen, setMarketCostOpen, setQuoteResult, setSelectedDate, setSelectedServiceLevel, } from "../../redux/quote";
+import { useLazyGetCostBreakdownQuery, useGetMarketCostQuery, useLazyGetMarketCostQuery, useCalculateLoadLiabilityCostMutation, } from "../../redux/quote/quoteCustomerPortalEndpoints";
+import { costBreakdownOpenSelector, cargoLiabilitySelector, formOpenSelector, 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";
@@ -17,6 +17,7 @@ import { useGetCustomerCreditQuery } from "../../redux";
 import { nanoid } from "@reduxjs/toolkit";
 import { CustomAdapterLuxon, NerdCurrencyField } from "@nerdjs/nerd-ui";
 const DATE_FORMAT = "LLL d";
+const FIXED_CACHE_KEY = "cargoLiability";
 /**
  * QuoteResponse. A drawer that displays the quote response
  *
@@ -198,9 +199,10 @@ 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 [openCargoLiabilityForm, setOpenCargoLiabilityForm] = useState({
+        open: false,
+        initialValue: 0,
+    });
     const { economy, guaranteed, premium } = useMemo(() => {
         const economy = serviceLevels?.find((s) => s.serviceLevel == "economy");
         const premium = serviceLevels?.find((s) => s.serviceLevel == "premium");
@@ -210,21 +212,16 @@ function ServiceLevelsDetails({ quoteResponse, }) {
     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);
+    const { data: cargoLiabilityCost, reset } = useCalculateLoadLiabilityCostMutation({
+        fixedCacheKey: FIXED_CACHE_KEY,
+    })[1];
+    const cargoLiability = useSelector(cargoLiabilitySelector);
     useEffect(() => {
-        dispatch(setGuaranteedCargoLiability(minGuaranteedLiabilityCoverage));
-        dispatch(setPremiumCargoLiability(minPremiumLiabilityCoverage));
-        dispatch(setEconomyCargoLiability(minEconomyLiabilityCoverage));
-    }, [
-        minEconomyLiabilityCoverage,
-        minPremiumLiabilityCoverage,
-        minGuaranteedLiabilityCoverage,
-    ]);
+        return () => {
+            dispatch(setCargoLiability(0));
+            reset();
+        };
+    }, []);
     return (_jsx(Sheet, { sx: {
             borderRadius: "sm",
             boxShadow: "md",
@@ -258,26 +255,57 @@ function ServiceLevelsDetails({ quoteResponse, }) {
                                     }, children: t("global.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("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: {
+                                    }, 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 })] }))] }), !quoteResponse.loadId && quoteResponse.type == "LTL" ? (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("th", {}), _jsxs("th", { style: {
+                                                whiteSpace: "normal",
+                                                wordBreak: "break-word",
+                                            }, children: ["Cargo Liability", _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: {
+                                                    }, size: "sm", variant: "soft", onClick: () => setOpenCargoLiabilityForm({
+                                                        open: true,
+                                                        initialValue: minEconomyLiabilityCoverage,
+                                                    }), startDecorator: _jsx("i", { className: "fa-solid fa-plus" }), children: "Add More" })] }), guaranteed && (_jsx("td", { children: _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5, children: [_jsx(Chip, { color: cargoLiability > minGuaranteedLiabilityCoverage
+                                                            ? "neutral"
+                                                            : "primary", startDecorator: cargoLiability >
+                                                            minGuaranteedLiabilityCoverage ? null : (_jsx("i", { className: "fa-solid fa-circle-check" })), sx: {
+                                                            textDecoration: cargoLiability > minGuaranteedLiabilityCoverage
+                                                                ? "line-through"
+                                                                : undefined,
+                                                        }, size: cargoLiability > minGuaranteedLiabilityCoverage
+                                                            ? "sm"
+                                                            : "md", children: usdFormatter.format(minGuaranteedLiabilityCoverage) }), cargoLiability > minGuaranteedLiabilityCoverage ? (_jsx(Chip, { color: "primary", startDecorator: _jsx("i", { className: "fa-solid fa-circle-check" }), children: usdFormatter.format(cargoLiability) })) : null] }) })), premium && (_jsx("td", { children: _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5, children: [_jsx(Chip, { color: cargoLiability > minPremiumLiabilityCoverage
+                                                            ? "neutral"
+                                                            : "primary", startDecorator: cargoLiability >
+                                                            minPremiumLiabilityCoverage ? null : (_jsx("i", { className: "fa-solid fa-circle-check" })), sx: {
+                                                            textDecoration: cargoLiability > minPremiumLiabilityCoverage
+                                                                ? "line-through"
+                                                                : undefined,
+                                                        }, size: cargoLiability > minPremiumLiabilityCoverage
+                                                            ? "sm"
+                                                            : "md", children: usdFormatter.format(minPremiumLiabilityCoverage) }), cargoLiability > minPremiumLiabilityCoverage ? (_jsx(Chip, { color: "primary", startDecorator: _jsx("i", { className: "fa-solid fa-circle-check" }), children: usdFormatter.format(cargoLiability) })) : null] }) })), economy && (_jsx("td", { children: _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5, children: [_jsx(Chip, { color: cargoLiability > minEconomyLiabilityCoverage
+                                                            ? "neutral"
+                                                            : "primary", startDecorator: cargoLiability >
+                                                            minEconomyLiabilityCoverage ? null : (_jsx("i", { className: "fa-solid fa-circle-check" })), sx: {
+                                                            textDecoration: cargoLiability > minEconomyLiabilityCoverage
+                                                                ? "line-through"
+                                                                : undefined,
+                                                        }, size: cargoLiability > minEconomyLiabilityCoverage
+                                                            ? "sm"
+                                                            : "md", children: usdFormatter.format(minEconomyLiabilityCoverage) }), cargoLiability > minEconomyLiabilityCoverage ? (_jsx(Chip, { color: "primary", startDecorator: _jsx("i", { className: "fa-solid fa-circle-check" }), children: usdFormatter.format(cargoLiability) })) : null] }) })), _jsx(EditCargoLiabilityModal, { onClose: () => setOpenCargoLiabilityForm({ open: false, initialValue: 0 }), initialValue: openCargoLiabilityForm.initialValue, open: openCargoLiabilityForm.open, value: cargoLiability, setValue: (v) => dispatch(setCargoLiability(v)) })] }), _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { style: {
+                                                whiteSpace: "normal",
+                                                wordBreak: "break-word",
+                                            }, children: "Cargo Liability Cost" }), guaranteed && (_jsx("td", { children: _jsxs(Box, { display: "flex", alignItems: "center", flexDirection: "column", gap: 0.5, children: [_jsx(Chip, { sx: {
+                                                            textDecoration: cargoLiabilityCost?.guaranteed
+                                                                ? "line-through"
+                                                                : undefined,
+                                                        }, color: cargoLiabilityCost?.guaranteed ? "neutral" : "primary", size: "sm", startDecorator: cargoLiabilityCost?.guaranteed ? undefined : (_jsx("i", { className: "fa-solid fa-circle-check" })), children: "Included" }), cargoLiabilityCost?.guaranteed ? (_jsx(Chip, { color: "primary", size: "sm", startDecorator: _jsx("i", { className: "fa-solid fa-circle-check" }), children: usdFormatter.format(cargoLiabilityCost.guaranteed || 0) })) : null] }) })), premium && (_jsx("td", { children: _jsxs(Box, { display: "flex", alignItems: "center", flexDirection: "column", gap: 0.5, children: [_jsx(Chip, { sx: {
+                                                            textDecoration: cargoLiabilityCost?.premium
+                                                                ? "line-through"
+                                                                : undefined,
+                                                        }, color: cargoLiabilityCost?.premium ? "neutral" : "primary", size: "sm", startDecorator: cargoLiabilityCost?.premium ? undefined : (_jsx("i", { className: "fa-solid fa-circle-check" })), children: "Included" }), cargoLiabilityCost?.premium ? (_jsx(Chip, { color: "primary", size: "sm", startDecorator: _jsx("i", { className: "fa-solid fa-circle-check" }), children: usdFormatter.format(cargoLiabilityCost.premium || 0) })) : null] }) })), economy && (_jsx("td", { children: _jsxs(Box, { display: "flex", alignItems: "center", flexDirection: "column", gap: 0.5, children: [_jsx(Chip, { sx: {
+                                                            textDecoration: cargoLiabilityCost?.economy
+                                                                ? "line-through"
+                                                                : undefined,
+                                                        }, color: cargoLiabilityCost?.economy ? "neutral" : "primary", size: "sm", startDecorator: cargoLiabilityCost?.economy ? undefined : (_jsx("i", { className: "fa-solid fa-circle-check" })), children: "Included" }), cargoLiabilityCost?.economy ? (_jsx(Chip, { color: "primary", size: "sm", startDecorator: _jsx("i", { className: "fa-solid fa-circle-check" }), children: usdFormatter.format(cargoLiabilityCost.economy || 0) })) : null] }) }))] })] })) : null, _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: {
@@ -289,10 +317,19 @@ 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: 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: {
+                                    }, children: t("global.Total") }), guaranteed && (_jsx("td", { children: _jsxs(Box, { display: "flex", alignItems: "center", flexDirection: "column", gap: 0.5, children: [_jsx(Chip, { size: "sm", sx: {
+                                                    textDecoration: cargoLiabilityCost?.guaranteed
+                                                        ? "line-through"
+                                                        : undefined,
+                                                }, color: !cargoLiabilityCost?.guaranteed ? "primary" : "neutral", startDecorator: !cargoLiabilityCost?.guaranteed ? (_jsx("i", { className: "fa-solid fa-circle-check" })) : null, children: usdFormatter.format(guaranteed.totalRate) }), cargoLiabilityCost?.guaranteed ? (_jsx(Chip, { size: "sm", color: "primary", startDecorator: _jsx("i", { className: "fa-solid fa-circle-check" }), children: usdFormatter.format(guaranteed.totalRate + cargoLiabilityCost.guaranteed) })) : null] }) })), premium && (_jsx("td", { children: _jsxs(Box, { display: "flex", alignItems: "center", flexDirection: "column", gap: 0.5, children: [_jsx(Chip, { size: "sm", sx: {
+                                                    textDecoration: cargoLiabilityCost?.premium
+                                                        ? "line-through"
+                                                        : undefined,
+                                                }, color: !cargoLiabilityCost?.premium ? "primary" : "neutral", startDecorator: !cargoLiabilityCost?.premium ? (_jsx("i", { className: "fa-solid fa-circle-check" })) : null, children: usdFormatter.format(premium.totalRate) }), cargoLiabilityCost?.premium ? (_jsx(Chip, { size: "sm", color: "primary", startDecorator: _jsx("i", { className: "fa-solid fa-circle-check" }), children: usdFormatter.format(premium.totalRate + cargoLiabilityCost.premium) })) : null] }) })), economy && (_jsx("td", { children: _jsxs(Box, { display: "flex", alignItems: "center", flexDirection: "column", gap: 0.5, children: [_jsx(Chip, { size: "sm", sx: {
+                                                    textDecoration: cargoLiabilityCost?.economy
+                                                        ? "line-through"
+                                                        : undefined,
+                                                }, color: !cargoLiabilityCost?.economy ? "primary" : "neutral", startDecorator: !cargoLiabilityCost?.economy ? (_jsx("i", { className: "fa-solid fa-circle-check" })) : null, children: usdFormatter.format(economy.totalRate) }), cargoLiabilityCost?.economy ? (_jsx(Chip, { size: "sm", color: "primary", startDecorator: _jsx("i", { className: "fa-solid fa-circle-check" }), children: usdFormatter.format(economy.totalRate + cargoLiabilityCost.economy) })) : null] }) }))] })] }), _jsx("tfoot", { style: {
                         height: 70,
                     }, children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { style: {
                                     borderBottomRightRadius: 0,
@@ -319,19 +356,22 @@ function ServiceLevelsDetails({ quoteResponse, }) {
                                                         ? ` - ${DateTime.fromFormat(economy.to, "yyyy-L-d").toFormat(DATE_FORMAT)}`
                                                         : []] })] }) }) }))] }) })] }) }));
 }
-const EditCargoLiabilityModal = ({ value, setValue, open, onClose, minValue, serviceLevel, }) => {
+const EditCargoLiabilityModal = ({ value, setValue, open, onClose, initialValue, }) => {
     const { t } = useTranslation("common", { i18n: salesKitI18n });
-    const [_value, _setValue] = useState(value);
-    const [error, setError] = useState(false);
-    const [calculateCost, { isLoading }] = useCalculateLoadLiabilityCostMutation({
-        fixedCacheKey: serviceLevel,
+    const [_value, _setValue] = useState(value ? value : undefined);
+    const [calculateCost] = useCalculateLoadLiabilityCostMutation({
+        fixedCacheKey: FIXED_CACHE_KEY,
     });
     const result = useSelector(quoteResultSelector);
+    //Cannot use the isLoading attribute from the useCalculateLoadLiabilityCostMutation hook
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLoading2, setIsLoading2] = useState(false);
     const handleSave = () => {
         if (result && _value !== undefined) {
+            setIsLoading(true);
             calculateCost({
-                amount: _value,
-                weight: result?.weight,
+                statedValue: _value,
+                quoteID: result.id,
             })
                 .unwrap()
                 .then(() => {
@@ -340,15 +380,34 @@ const EditCargoLiabilityModal = ({ value, setValue, open, onClose, minValue, ser
             })
                 .catch(() => {
                 return;
-            });
+            })
+                .finally(() => setIsLoading(false));
+        }
+    };
+    const handleReset = () => {
+        if (result) {
+            setIsLoading2(true);
+            calculateCost({
+                statedValue: 0,
+                quoteID: result.id,
+            })
+                .unwrap()
+                .then(() => {
+                setValue(0);
+                handleClose();
+            })
+                .catch(() => {
+                return;
+            })
+                .finally(() => setIsLoading2(false));
         }
     };
     const handleClose = () => {
         onClose();
-        _setValue(undefined);
+        _setValue(value ? value : undefined);
     };
     useEffect(() => {
-        _setValue(value);
+        _setValue(value ? value : undefined);
     }, [open]);
     return (_jsx(Modal, { open: open, onClose: handleClose, children: _jsxs(ModalDialog, { layout: "center", sx: (theme) => ({
                 width: 450,
@@ -364,19 +423,16 @@ const EditCargoLiabilityModal = ({ value, setValue, open, onClose, minValue, ser
                     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") })] })] }) }));
+            }), children: [_jsx(DialogTitle, { children: "Cargo Liability" }), _jsx(DialogContent, { children: _jsxs("form", { onSubmit: (event) => {
+                            event.preventDefault();
+                            if (_value)
+                                handleSave();
+                        }, children: [_jsx(Typography, { level: "body-sm", children: "Feel free to increase the Cargo Liability; 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,
+                                                placeholder: usdFormatter.format(initialValue).substring(1),
+                                            }, onChange: (v) => {
+                                                _setValue(v);
+                                            } })] }) })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { loading: isLoading, color: "primary", onClick: handleSave, disabled: !_value, children: t("global.Confirm") }), _jsx(Button, { color: "neutral", variant: "soft", onClick: handleClose, children: t("global.Cancel") }), _jsx(Button, { loading: isLoading2, color: "neutral", variant: "soft", onClick: handleReset, children: t("global.Reset") })] })] }) }));
 };
 /**
  * Quote toolbar. Contains actions like restart, run quote or find a quote.
@@ -679,7 +735,7 @@ export const Summary = ({ handleOnTenderLoadClick, customerPortal, response, bod
         : false;
     const { data: customerCredit } = useGetCustomerCreditQuery(response?.customerId || 0, { skip: !response?.customerId || customerPortal });
     const { data: _cargoLiabilityCost } = useCalculateLoadLiabilityCostMutation({
-        fixedCacheKey: selectedServiceLevel?.serviceLevel,
+        fixedCacheKey: FIXED_CACHE_KEY,
     })[1];
     const cargoLiabilityCost = useMemo(() => {
         switch (selectedServiceLevel?.serviceLevel) {
@@ -692,10 +748,8 @@ export const Summary = ({ handleOnTenderLoadClick, customerPortal, response, bod
             default:
                 return 0;
         }
-    }, [_cargoLiabilityCost]);
-    const guaranteedCargoLiability = useSelector(guaranteedCargoLiabilitySelector);
-    const premiumCargoLiability = useSelector(premiumCargoLiabilitySelector);
-    const economyCargoLiability = useSelector(economyCargoLiabilitySelector);
+    }, [_cargoLiabilityCost, selectedServiceLevel?.serviceLevel]);
+    const cargoLiability = useSelector(cargoLiabilitySelector);
     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: {
@@ -706,25 +760,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", { style: {
+                                                : `${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") }), !response?.loadId && response?.type == "LTL" ? (_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"
+                                                    }, children: "Cargo Liability Cost" })) : null, _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: _jsx(Chip, { size: "sm", color: cargoLiabilityCost ? "primary" : "neutral", sx: {
+                                                                : response?.getEconomyIcon(), style: { height: 20 } }) }), _jsx("td", { children: selectedServiceLevel?.description }), !response?.loadId && response?.type == "LTL" ? (_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
+                                                            : usdFormatter.format(cargoLiabilityCost) }) })) : null, _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(Typography, { level: "title-md", sx: {
+                                            color: "inherit",
+                                        }, 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
                                 ? '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.'
@@ -745,13 +799,7 @@ 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);
+                                                : undefined, cargoLiabilityCost !== 0 ? cargoLiability : undefined);
                                             dispatch(restartQuote());
                                             dispatch(setQuoteResult(undefined));
                                         }