@nerdjs/sales-kit 3.1.23 → 3.1.25

package/dist/hooks/quote/result.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Accordion, AccordionDetails, AccordionGroup, AccordionSummary, Alert, Box, Button, Chip, CircularProgress, DialogActions, DialogContent, DialogTitle, Divider, Dropdown, Grid, IconButton, Link, Menu, MenuButton, MenuItem, Modal, ModalDialog, Sheet, Table, Tooltip, Typography, accordionClasses, useColorScheme, useTheme, } from "@mui/joy";
+import { Accordion, AccordionDetails, AccordionGroup, AccordionSummary, Alert, Box, Button, Chip, CircularProgress, DialogActions, DialogContent, DialogTitle, Divider, Dropdown, FormControl, FormLabel, Grid, IconButton, Link, Menu, MenuButton, MenuItem, Modal, ModalDialog, Sheet, Table, Tooltip, Typography, accordionClasses, useColorScheme, useTheme, } from "@mui/joy";
 import { alpha, styled } from "@mui/system";
 import { LocalizationProvider, PickersDay, StaticDatePicker, } from "@mui/x-date-pickers-pro";
-import { CustomAdapterLuxon } from "@nerdjs/nerd-ui";
+import { CustomAdapterLuxon, NerdCurrencyField } from "@nerdjs/nerd-ui";
 import { nanoid } from "@reduxjs/toolkit";
 import { DateTime } from "luxon";
 import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
@@ -12,18 +12,12 @@ import { useDispatch, useSelector } from "react-redux";
 import { Link as RouterLink } from "react-router-dom";
 import salesKitI18n from "../../i18n";
 import { useGetCustomerCreditQuery } from "../../redux";
-import { restartQuote, setCostBreakdownOpen, 
-// setCargoLiability,
-setFormOpen, setMarketCostOpen, setQuoteResult, setSelectedDate, setSelectedServiceLevel, } from "../../redux/quote";
-import { useGetMarketCostQuery, useLazyGetCostBreakdownQuery, useLazyGetMarketCostQuery, } from "../../redux/quote/quoteCustomerPortalEndpoints";
-import { costBreakdownOpenSelector, 
-// cargoLiabilitySelector,
-formOpenSelector, 
-// quoteResultSelector,
-selectedDateSelector, selectedServiceLevelSelector, } from "../../redux/quote/quoteSelectors";
+import { restartQuote, setCostBreakdownOpen, setCargoLiability, setFormOpen, setMarketCostOpen, setQuoteResult, setSelectedDate, setSelectedServiceLevel, } from "../../redux/quote";
+import { useCalculateLoadLiabilityCostMutation, useGetMarketCostQuery, useLazyGetCostBreakdownQuery, useLazyGetMarketCostQuery, } from "../../redux/quote/quoteCustomerPortalEndpoints";
+import { costBreakdownOpenSelector, cargoLiabilitySelector, formOpenSelector, quoteResultSelector, selectedDateSelector, selectedServiceLevelSelector, } from "../../redux/quote/quoteSelectors";
 import { CUSTOMER_PORTAL_QUOTE_EXPIRATION, LTL_DOC, SALES_QUOTE_EXPIRATION, TL_DOC, quoteResultToEmail, serviceLevelColors, serviceLevelIcons, } from "./constants";
 const DATE_FORMAT = "LLL d";
-// const FIXED_CACHE_KEY = "cargoLiability";
+const FIXED_CACHE_KEY = "cargoLiability";
 const usdFormatter = new Intl.NumberFormat("en-US", {
     style: "currency",
     currency: "USD",
@@ -36,7 +30,7 @@ const usdFormatter = new Intl.NumberFormat("en-US", {
  * @returns {ReactElement} Response drawer
  */
 export function QuoteResult(props) {
-    const { customerPortal, handleOnTenderLoadClick, openLoadLink, body, response, } = props;
+    const { customerPortal, handleOnTenderLoadClick, openLoadLink, body, response, cargoLiability: showCargoLiability, } = props;
     const { t } = useTranslation("common", { i18n: salesKitI18n });
     const expired = response
         ? DateTime.now() >
@@ -78,7 +72,7 @@ export function QuoteResult(props) {
                                             ml: "auto",
                                         }, children: _jsx("i", { className: "fa-solid fa-copy" }) }) }), _jsx(Tooltip, { title: "Copy Full Email", children: _jsx(IconButton, { onClick: () => onCopyClick(true), color: "neutral", variant: "soft", children: _jsx("i", { className: "fa-solid fa-file-invoice" }) }) })] })) : null] })), !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("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, response: response }), _jsx(CostBreakdown, { response: response }), _jsx(Summary, { response: response, body: body, 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, response: response, showCargoLiability: showCargoLiability }), _jsx(CostBreakdown, { response: response }), _jsx(Summary, { response: response, body: body, customerPortal: customerPortal, handleOnTenderLoadClick: handleOnTenderLoadClick, showCargoLiability: showCargoLiability }), customerPortal ? (_jsxs(Box, { textAlign: "center", sx: {
                         lineHeight: 0.6,
                     }, 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("global.quoteRateWarning", {
                                     clientName: window._APP_CONFIG?.client?.name,
@@ -131,7 +125,7 @@ function Wrapper(props) {
  * @param {boolean} props.response response
  * @returns {ReactElement} Response drawer
  */
-export function ServiceLevels({ customerPortal, response, }) {
+export function ServiceLevels({ customerPortal, response, showCargoLiability, }) {
     const dispatch = useDispatch();
     const selectedServiceLevel = useSelector(selectedServiceLevelSelector);
     const { t } = useTranslation("common", { i18n: salesKitI18n });
@@ -141,7 +135,7 @@ export function ServiceLevels({ customerPortal, response, }) {
                 flexDirection: "column",
                 gap: 2,
                 margin: 1,
-            }, children: [customerPortal && response ? (_jsx(ServiceLevelsDetails, { quoteResponse: response })) : (_jsx(Box, { sx: { display: "flex", gap: 2 }, children: response?.serviceLevels?.map((l) => {
+            }, children: [customerPortal && response ? (_jsx(ServiceLevelsDetails, { quoteResponse: response, showCargoLiability: showCargoLiability })) : (_jsx(Box, { sx: { display: "flex", gap: 2 }, children: response?.serviceLevels?.map((l) => {
                         const swatch = response.type === "LTL"
                             ? serviceLevelColors(theme).LTL[l.serviceLevel]
                             : serviceLevelColors(theme).TL[l.serviceLevel];
@@ -216,43 +210,33 @@ export function ServiceLevels({ customerPortal, response, }) {
  * @param props.quoteResponse
  * @returns {ReactElement} ServiceLevelsDetails
  */
-function ServiceLevelsDetails({ quoteResponse, }) {
+function ServiceLevelsDetails({ quoteResponse, showCargoLiability, }) {
     const { serviceLevels } = quoteResponse;
     const dispatch = useDispatch();
     const { t } = useTranslation("common", { i18n: salesKitI18n });
-    // const [openCargoLiabilityForm, setOpenCargoLiabilityForm] = useState({
-    //   open: false,
-    //   initialValue: 0,
-    // });
+    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");
         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: cargoLiabilityCost, reset } =
-    //   useCalculateLoadLiabilityCostMutation({
-    //     fixedCacheKey: FIXED_CACHE_KEY,
-    //   })[1];
-    // const cargoLiability = useSelector(cargoLiabilitySelector);
-    // useEffect(() => {
-    //   return () => {
-    //     dispatch(setCargoLiability(0));
-    //     reset();
-    //   };
-    // }, []);
+    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: cargoLiabilityCost, reset } = useCalculateLoadLiabilityCostMutation({
+        fixedCacheKey: FIXED_CACHE_KEY,
+    })[1];
+    const cargoLiability = useSelector(cargoLiabilitySelector);
+    useEffect(() => {
+        return () => {
+            dispatch(setCargoLiability(0));
+            reset();
+        };
+    }, []);
     return (_jsx(Sheet, { sx: {
             borderRadius: "sm",
             boxShadow: "md",
@@ -274,7 +258,59 @@ function ServiceLevelsDetails({ quoteResponse, }) {
                                     }, 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: {
                                         whiteSpace: "normal",
                                         wordBreak: "break-word",
-                                    }, children: t("global.Appointment") }), guaranteed && _jsx("td", { children: t("global.Strict") }), premium && _jsx("td", { children: t("global.4h Window") }), economy && _jsx("td", { children: t("global.8h Window") })] }), _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { style: {
+                                    }, children: t("global.Appointment") }), guaranteed && _jsx("td", { children: t("global.Strict") }), premium && _jsx("td", { children: t("global.4h Window") }), economy && _jsx("td", { children: t("global.8h Window") })] }), showCargoLiability &&
+                            !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: "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: {
@@ -286,43 +322,52 @@ 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: _jsx(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"
-                                            "primary", startDecorator: 
-                                            // !cargoLiabilityCost?.guaranteed ? (
-                                            //   <i className="fa-solid fa-circle-check" />
-                                            // ) : null
-                                            _jsx("i", { className: "fa-solid fa-circle-check" }), children: usdFormatter.format(guaranteed.totalRate) }) }) })), premium && (_jsx("td", { children: _jsx(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"
-                                            "primary", startDecorator: 
-                                            // !cargoLiabilityCost?.premium ? (
-                                            //   <i className="fa-solid fa-circle-check" />
-                                            // ) : null
-                                            _jsx("i", { className: "fa-solid fa-circle-check" }), children: usdFormatter.format(premium.totalRate) }) }) })), economy && (_jsx("td", { children: _jsx(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"
-                                            "primary", startDecorator: 
-                                            // !cargoLiabilityCost?.economy ? (
-                                            //   <i className="fa-solid fa-circle-check" />
-                                            // ) : null
-                                            _jsx("i", { className: "fa-solid fa-circle-check" }), children: 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", ...(showCargoLiability
+                                                    ? {
+                                                        sx: {
+                                                            textDecoration: cargoLiabilityCost?.guaranteed
+                                                                ? "line-through"
+                                                                : undefined,
+                                                        },
+                                                        color: !cargoLiabilityCost?.guaranteed
+                                                            ? "primary"
+                                                            : "neutral",
+                                                        startDecorator: !cargoLiabilityCost?.guaranteed ? (_jsx("i", { className: "fa-solid fa-circle-check" })) : null,
+                                                    }
+                                                    : {
+                                                        color: "primary",
+                                                        startDecorator: (_jsx("i", { className: "fa-solid fa-circle-check" })),
+                                                    }), children: usdFormatter.format(guaranteed.totalRate) }), cargoLiabilityCost?.guaranteed && showCargoLiability ? (_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", ...(showCargoLiability
+                                                    ? {
+                                                        sx: {
+                                                            textDecoration: cargoLiabilityCost?.premium
+                                                                ? "line-through"
+                                                                : undefined,
+                                                        },
+                                                        color: !cargoLiabilityCost?.premium
+                                                            ? "primary"
+                                                            : "neutral",
+                                                        startDecorator: !cargoLiabilityCost?.premium ? (_jsx("i", { className: "fa-solid fa-circle-check" })) : null,
+                                                    }
+                                                    : {
+                                                        color: "primary",
+                                                        startDecorator: (_jsx("i", { className: "fa-solid fa-circle-check" })),
+                                                    }), children: usdFormatter.format(premium.totalRate) }), cargoLiabilityCost?.premium && showCargoLiability ? (_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", ...(showCargoLiability
+                                                    ? {
+                                                        sx: {
+                                                            textDecoration: cargoLiabilityCost?.economy
+                                                                ? "line-through"
+                                                                : undefined,
+                                                        },
+                                                        color: !cargoLiabilityCost?.economy
+                                                            ? "primary"
+                                                            : "neutral",
+                                                        startDecorator: !cargoLiabilityCost?.economy ? (_jsx("i", { className: "fa-solid fa-circle-check" })) : null,
+                                                    }
+                                                    : {
+                                                        color: "primary",
+                                                        startDecorator: (_jsx("i", { className: "fa-solid fa-circle-check" })),
+                                                    }), children: usdFormatter.format(economy.totalRate) }), cargoLiabilityCost?.economy && showCargoLiability ? (_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,
@@ -349,147 +394,84 @@ function ServiceLevelsDetails({ quoteResponse, }) {
                                                         ? ` - ${DateTime.fromFormat(economy.to, "yyyy-L-d").toFormat(DATE_FORMAT)}`
                                                         : []] })] }) }) }))] }) })] }) }));
 }
-// const EditCargoLiabilityModal = ({
-//   value,
-//   setValue,
-//   open,
-//   onClose,
-//   initialValue,
-// }: {
-//   value: number;
-//   setValue: (value: number) => void;
-//   open: boolean;
-//   onClose: () => void;
-//   initialValue: number;
-// }) => {
-//   const { t } = useTranslation("common", { i18n: salesKitI18n });
-//   const [_value, _setValue] = useState<number | undefined>(
-//     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({
-//         statedValue: _value,
-//         quoteID: result.id,
-//       })
-//         .unwrap()
-//         .then(() => {
-//           setValue(_value);
-//           handleClose();
-//         })
-//         .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(value ? value : undefined);
-//   };
-//   useEffect(() => {
-//     _setValue(value ? value : undefined);
-//   }, [open]);
-//   return (
-//     <Modal open={open} onClose={handleClose}>
-//       <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",
-//           },
-//         })}
-//       >
-//         <DialogTitle>Cargo Liability</DialogTitle>
-//         <DialogContent>
-//           <form
-//             onSubmit={(event) => {
-//               event.preventDefault();
-//               if (_value) handleSave();
-//             }}
-//           >
-//             <Typography level="body-sm">
-//               Feel free to increase the Cargo Liability; the cost will be
-//               calculated automatically.
-//             </Typography>
-//             <Box mt={1}>
-//               <FormControl>
-//                 <FormLabel>Cargo Liability</FormLabel>
-//                 <NerdCurrencyField
-//                   value={_value}
-//                   inputProps={{
-//                     fullWidth: true,
-//                     placeholder: usdFormatter.format(initialValue).substring(1),
-//                   }}
-//                   onChange={(v) => {
-//                     _setValue(v);
-//                   }}
-//                 />
-//               </FormControl>
-//             </Box>
-//           </form>
-//         </DialogContent>
-//         <DialogActions>
-//           <Button
-//             loading={isLoading2}
-//             color="neutral"
-//             variant="soft"
-//             onClick={handleReset}
-//           >
-//             {t("global.Reset")}
-//           </Button>
-//           <Button color="neutral" variant="soft" onClick={handleClose}>
-//             {t("global.Cancel")}
-//           </Button>
-//           <Button
-//             loading={isLoading}
-//             color="primary"
-//             onClick={handleSave}
-//             disabled={!_value}
-//           >
-//             {t("global.Confirm")}
-//           </Button>
-//         </DialogActions>
-//       </ModalDialog>
-//     </Modal>
-//   );
-// };
+const EditCargoLiabilityModal = ({ value, setValue, open, onClose, initialValue, }) => {
+    const { t } = useTranslation("common", { i18n: salesKitI18n });
+    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({
+                statedValue: _value,
+                quoteID: result.id,
+            })
+                .unwrap()
+                .then(() => {
+                setValue(_value);
+                handleClose();
+            })
+                .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(value ? value : undefined);
+    };
+    useEffect(() => {
+        _setValue(value ? value : undefined);
+    }, [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" }), _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: isLoading2, color: "neutral", variant: "soft", onClick: handleReset, children: t("global.Reset") }), _jsx(Button, { color: "neutral", variant: "soft", onClick: handleClose, children: t("global.Cancel") }), _jsx(Button, { loading: isLoading, color: "primary", onClick: handleSave, disabled: !_value, children: t("global.Confirm") })] })] }) }));
+};
 /**
  * Quote toolbar. Contains actions like restart, run quote or find a quote.
  *
@@ -790,7 +772,7 @@ const MarketCost = ({ response }) => {
                 p: 1,
             }, variant: "outlined", children: _jsxs(Grid, { container: true, spacing: 0.5, children: [_jsx(Grid, { xs: 12, children: _jsx(Typography, { level: "h4", children: t("global.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("global.Linehaul Cost")] }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: _2FractionDigitUSDFormatter.format(marketCosts.linehaul_cost) }) }), _jsx(Grid, { xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), " ", t("global.Fuel Cost")] }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: _2FractionDigitUSDFormatter.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("global.TL Total Cost")] }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: _2FractionDigitUSDFormatter.format(marketCosts.truckload_total_cost) }) }), _jsx(Grid, { xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), t("global.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("global.Stop Off Fees")] }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: _2FractionDigitUSDFormatter.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("global.Market Price")] }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: _2FractionDigitUSDFormatter.format(marketCosts.total_cost) }) }), _jsx(Grid, { xs: 8, children: _jsxs(Typography, { display: "block", children: [_jsx("i", { className: "fa-solid fa-plus pright" }), " ", t("global.Margin")] }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: _2FractionDigitUSDFormatter.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("global.Total Cost With Margin")] }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: _2FractionDigitUSDFormatter.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("global.• 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("global.• Fuel Rate per Mile") }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: _4FractionDigitUSDFormatter.format(marketCosts.market_data.fuel_rate) }) }), _jsx(Grid, { xs: 8, children: _jsx(Typography, { display: "block", children: t("global.• Line Haul Rate per Mile") }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: _4FractionDigitUSDFormatter.format(marketCosts.market_data.linehaul_rate) }) }), _jsx(Grid, { xs: 8, children: _jsx(Typography, { display: "block", children: t("global.• Line Haul Total") }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { variant: "soft", size: "sm", children: _2FractionDigitUSDFormatter.format(marketCosts.market_data.linehaul_total) }) }), _jsx(Grid, { xs: 8, children: _jsx(Typography, { display: "block", children: t("global.• 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("global.• 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("global.• Market Days") }) }), _jsx(Grid, { xs: 4, style: { textAlign: "right" }, children: _jsx(Chip, { size: "sm", variant: "soft", children: marketCosts.market_data.market_days }) })] })) : ([])] }) }));
 };
-export const Summary = ({ handleOnTenderLoadClick, customerPortal, response, body, hideTenderButton, }) => {
+export const Summary = ({ handleOnTenderLoadClick, customerPortal, response, body, hideTenderButton, showCargoLiability, }) => {
     const selectedDate = useSelector(selectedDateSelector);
     const selectedServiceLevel = useSelector(selectedServiceLevelSelector);
     const from = response?.stops.find((stop) => stop.type == "shipper");
@@ -807,22 +789,22 @@ export const Summary = ({ handleOnTenderLoadClick, customerPortal, response, bod
             })
         : false;
     const { data: customerCredit } = useGetCustomerCreditQuery(response?.customerId || 0, { skip: !response?.customerId || customerPortal });
-    // const { data: _cargoLiabilityCost } = useCalculateLoadLiabilityCostMutation({
-    //   fixedCacheKey: FIXED_CACHE_KEY,
-    // })[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, selectedServiceLevel?.serviceLevel]);
-    // const cargoLiability = useSelector(cargoLiabilitySelector);
+    const { data: _cargoLiabilityCost } = useCalculateLoadLiabilityCostMutation({
+        fixedCacheKey: FIXED_CACHE_KEY,
+    })[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, 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: {
@@ -839,11 +821,23 @@ export const Summary = ({ handleOnTenderLoadClick, customerPortal, response, bod
                                                         width: "60%",
                                                     }, children: t("components:lepShipcons.stop") }), _jsx("th", { style: {
                                                         width: "10%",
-                                                    }, children: t("components:lepAdjustments.amount") })] }) }), _jsx("tbody", { children: response.accessorials.map((a, i) => (_jsxs("tr", { children: [_jsx("td", { children: a.name }), _jsx("td", { children: a.stopName }), _jsx("td", { children: usdFormatter.format(a.costAmount || 0) })] }, i))) })] })] })) : null, _jsxs(Grid, { xs: 12, children: [_jsx(Typography, { level: "title-lg", children: t("global.Costs") }), _jsxs(Table, { size: "sm", 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"
+                                                    }, children: t("components:lepAdjustments.amount") })] }) }), _jsx("tbody", { children: response.accessorials.map((a, i) => (_jsxs("tr", { children: [_jsx("td", { children: a.name }), _jsx("td", { children: a.stopName }), _jsx("td", { children: usdFormatter.format(a.costAmount || 0) })] }, i))) })] })] })) : null, _jsxs(Grid, { xs: 12, children: [_jsx(Typography, { level: "title-lg", children: t("global.Costs") }), _jsxs(Table, { size: "sm", 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" &&
+                                                    showCargoLiability ? (_jsx("th", { style: {
+                                                        width: 150,
+                                                    }, 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: 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", sx: {
+                                                                : response?.getEconomyIcon(), style: { height: 20 } }) }), _jsx("td", { children: selectedServiceLevel?.description }), !response?.loadId &&
+                                                    response?.type == "LTL" &&
+                                                    showCargoLiability ? (_jsx("td", { children: _jsx(Chip, { size: "sm", color: cargoLiabilityCost ? "primary" : "neutral", sx: {
+                                                            backgroundColor: cargoLiabilityCost
+                                                                ? undefined
+                                                                : "inherit",
+                                                        }, children: cargoLiabilityCost === 0
+                                                            ? "Included"
+                                                            : 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, { 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.'
@@ -868,9 +862,9 @@ export const Summary = ({ handleOnTenderLoadClick, customerPortal, response, bod
                                                     selectedServiceLevel.totalRate
                                                 ? customerCredit.availableCredit -
                                                     selectedServiceLevel.totalRate
-                                                : undefined
-                                            // cargoLiabilityCost !== 0 ? cargoLiability : undefined
-                                            );
+                                                : undefined, cargoLiabilityCost !== 0 && showCargoLiability
+                                                ? cargoLiability
+                                                : undefined);
                                             dispatch(restartQuote());
                                             dispatch(setQuoteResult(undefined));
                                         }