@nerdjs/sales-kit 2.4.5 → 2.4.6

package/dist/hooks/quote/result.js

@@ -1,22 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Chip, Table, Typography, LinearProgress, Alert, Link, useColorScheme, Menu, MenuItem, Dropdown, MenuButton, Sheet, useTheme, Box, CircularProgress, Modal, ModalDialog, DialogActions, DialogContent, DialogTitle, Divider, Grid, Tooltip, Accordion, AccordionDetails, AccordionSummary, AccordionGroup, accordionClasses, IconButton, } from "@mui/joy";
+import { 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, setFormOpen, setMarketCostOpen, setQuoteResult, setSelectedDate, setSelectedServiceLevel, } from "../../redux/quote";
-import { useLazyGetCostBreakdownQuery, useGetMarketCostQuery, useLazyGetMarketCostQuery, } from "../../redux/quote/quoteCustomerPortalEndpoints";
-import { costBreakdownOpenSelector, formOpenSelector, 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";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useGetCustomerCreditQuery } from "../../redux";
 import { nanoid } from "@reduxjs/toolkit";
-import { CustomAdapterLuxon } from "@nerdjs/nerd-ui";
+import { CustomAdapterLuxon, NerdCurrencyField } from "@nerdjs/nerd-ui";
 const DATE_FORMAT = "LLL d";
+const FIXED_CACHE_KEY = "cargoLiability";
 /**
  * QuoteResponse. A drawer that displays the quote response
  *
@@ -198,50 +199,29 @@ 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");
         const guaranteed = serviceLevels?.find((s) => s.serviceLevel == "guaranteed");
         return { economy, premium, guaranteed };
     }, [serviceLevels]);
-    // const minEconomyLiabilityCoverage = useMemo(
-    //   () => economy?.liabilityCoverage || 0,
-    //   [economy?.liabilityCoverage]
-    // );
-    // const minPremiumLiabilityCoverage = useMemo(
-    //   () => premium?.liabilityCoverage || 0,
-    //   [premium?.liabilityCoverage]
-    // );
-    // const minGuaranteedLiabilityCoverage = useMemo(
-    //   () => guaranteed?.liabilityCoverage || 0,
-    //   [guaranteed?.liabilityCoverage]
-    // );
-    // const { data: economyCargoLiabilityCost } =
-    //   useCalculateLoadLiabilityCostMutation({ fixedCacheKey: "economy" })[1];
-    // const { data: premiumCargoLiabilityCost } =
-    //   useCalculateLoadLiabilityCostMutation({ fixedCacheKey: "premium" })[1];
-    // const { data: guaranteedCargoLiabilityCost } =
-    //   useCalculateLoadLiabilityCostMutation({ fixedCacheKey: "guaranteed" })[1];
-    // const guaranteedCargoLiability = useSelector(
-    //   guaranteedCargoLiabilitySelector
-    // );
-    // const premiumCargoLiability = useSelector(premiumCargoLiabilitySelector);
-    // const economyCargoLiability = useSelector(economyCargoLiabilitySelector);
-    // useEffect(() => {
-    //   dispatch(setGuaranteedCargoLiability(minGuaranteedLiabilityCoverage));
-    //   dispatch(setPremiumCargoLiability(minPremiumLiabilityCoverage));
-    //   dispatch(setEconomyCargoLiability(minEconomyLiabilityCoverage));
-    // }, [
-    //   minEconomyLiabilityCoverage,
-    //   minPremiumLiabilityCoverage,
-    //   minGuaranteedLiabilityCoverage,
-    // ]);
+    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",
@@ -275,7 +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: {
+                                    }, 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: "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: {
@@ -287,7 +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: usdFormatter.format(guaranteed.totalRate) })), premium && (_jsx("td", { children: usdFormatter.format(premium.totalRate) })), economy && (_jsx("td", { children: usdFormatter.format(economy.totalRate) }))] })] }), _jsx("tfoot", { style: {
+                                    }, children: t("global.Total") }), guaranteed && (_jsx("td", { children: _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,
@@ -314,133 +356,84 @@ function ServiceLevelsDetails({ quoteResponse, }) {
                                                         ? ` - ${DateTime.fromFormat(economy.to, "yyyy-L-d").toFormat(DATE_FORMAT)}`
                                                         : []] })] }) }) }))] }) })] }) }));
 }
-// const EditCargoLiabilityModal = ({
-//   value,
-//   setValue,
-//   open,
-//   onClose,
-//   minValue,
-//   serviceLevel,
-// }: {
-//   value: number;
-//   setValue: (value: number) => void;
-//   open: boolean;
-//   onClose: () => void;
-//   minValue: number;
-//   serviceLevel: "economy" | "premium" | "guaranteed";
-// }) => {
-//   const { t } = useTranslation("common", { i18n: salesKitI18n });
-//   const [_value, _setValue] = useState<number | undefined>(value);
-//   const [error, setError] = useState(false);
-//   const [calculateCost, { isLoading }] = useCalculateLoadLiabilityCostMutation({
-//     fixedCacheKey: serviceLevel,
-//   });
-//   const result = useSelector(quoteResultSelector);
-//   const handleSave = () => {
-//     if (result && _value !== undefined) {
-//       calculateCost({
-//         amount: _value,
-//         weight: result?.weight,
-//       })
-//         .unwrap()
-//         .then(() => {
-//           setValue(_value);
-//           handleClose();
-//         })
-//         .catch(() => {
-//           return;
-//         });
-//     }
-//   };
-//   const handleClose = () => {
-//     onClose();
-//     _setValue(undefined);
-//   };
-//   useEffect(() => {
-//     _setValue(value);
-//   }, [open]);
-//   return (
-//     <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>
-//           <Typography level="body-sm">
-//             The minimum and included cargo liability amount for the selected
-//             service level is{" "}
-//             <Typography level="body-sm" color="primary" fontWeight={"md"}>
-//               {usdFormatter.format(minValue)}
-//             </Typography>
-//             . Feel free to increase it; the cost will be calculated
-//             automatically.
-//           </Typography>
-//           <Box mt={1}>
-//             <FormControl>
-//               <FormLabel>Cargo Liability</FormLabel>
-//               <NerdCurrencyField
-//                 value={_value}
-//                 inputProps={{
-//                   fullWidth: true,
-//                   error,
-//                   endDecorator:
-//                     _value !== minValue ? (
-//                       <Tooltip title="Reset" size="sm">
-//                         <IconButton
-//                           size="sm"
-//                           onClick={() => _setValue(minValue)}
-//                         >
-//                           <i className="fa-solid fa-xmark" />
-//                         </IconButton>
-//                       </Tooltip>
-//                     ) : null,
-//                 }}
-//                 onChange={(v) => {
-//                   _setValue(v);
-//                   if (!v || v < minValue) setError(true);
-//                   else setError(false);
-//                 }}
-//               />
-//               <FormHelperText>
-//                 {error
-//                   ? `The minimum amount is ${usdFormatter.format(minValue)}`
-//                   : ""}
-//               </FormHelperText>
-//             </FormControl>
-//           </Box>
-//         </DialogContent>
-//         <DialogActions>
-//           <Button
-//             loading={isLoading}
-//             color="primary"
-//             onClick={handleSave}
-//             disabled={error}
-//           >
-//             {t("global.Confirm")}
-//           </Button>
-//           <Button color="neutral" variant="soft" onClick={handleClose}>
-//             {t("global.Cancel")}
-//           </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: 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.
  *
@@ -741,26 +734,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: selectedServiceLevel?.serviceLevel,
-    // })[1];
-    // const cargoLiabilityCost = useMemo(() => {
-    //   switch (selectedServiceLevel?.serviceLevel) {
-    //     case "economy":
-    //       return _cargoLiabilityCost?.economy || 0;
-    //     case "premium":
-    //       return _cargoLiabilityCost?.premium || 0;
-    //     case "guaranteed":
-    //       return _cargoLiabilityCost?.guaranteed || 0;
-    //     default:
-    //       return 0;
-    //   }
-    // }, [_cargoLiabilityCost]);
-    // const guaranteedCargoLiability = useSelector(
-    //   guaranteedCargoLiabilitySelector
-    // );
-    // const premiumCargoLiability = useSelector(premiumCargoLiabilitySelector);
-    // const economyCargoLiability = useSelector(economyCargoLiabilitySelector);
+    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: {
@@ -771,11 +760,19 @@ export const Summary = ({ handleOnTenderLoadClick, customerPortal, response, bod
                                                 ? DateTime.fromFormat(from.date, "yyyy-L-d").toFormat(DATE_FORMAT)
                                                 : "" }) })] }), _jsxs(Grid, { xs: 4, container: true, children: [_jsxs(Grid, { xs: 12, children: [_jsx("i", { className: "fa-regular fa-arrow-down" }), _jsx(Typography, { ml: 1, display: "inline", level: "body-sm", children: t("global.To") })] }), _jsx(Grid, { xs: 12, children: _jsx(Typography, { children: to?.address.line1 || t("global.Unknown Location") }) }), _jsx(Grid, { xs: 12, children: _jsxs(Typography, { children: [to?.city, ", ", to?.state] }) }), _jsx(Grid, { xs: 12, children: _jsx(Typography, { children: to?.zip }) }), _jsx(Grid, { xs: 12, children: _jsx(Chip, { startDecorator: _jsx("i", { className: "fa-solid fa-calendar-days" }), variant: "soft", children: selectedServiceLevel.serviceLevel == "guaranteed"
                                                 ? selectedDate?.toFormat(DATE_FORMAT)
-                                                : `${DateTime.fromFormat(selectedServiceLevel.from, "yyyy-L-d").toFormat(DATE_FORMAT)} - ${DateTime.fromFormat(selectedServiceLevel.to, "yyyy-L-d").toFormat(DATE_FORMAT)}` }) })] })] }), _jsxs(Grid, { xs: 12, children: [_jsx(Typography, { level: "title-lg", children: t("global.Costs") }), _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: t("global.Service Level") }), _jsx("th", { children: t("global.Description") }), _jsx("th", { children: t("global.Base Rate") }), _jsx("th", { children: t("global.Fuel Rate") }), _jsx("th", { children: t("global.Extra") })] }) }), _jsx("tbody", { children: _jsxs("tr", { children: [_jsx("td", { children: _jsx("img", { src: selectedServiceLevel.serviceLevel === "guaranteed"
+                                                : `${DateTime.fromFormat(selectedServiceLevel.from, "yyyy-L-d").toFormat(DATE_FORMAT)} - ${DateTime.fromFormat(selectedServiceLevel.to, "yyyy-L-d").toFormat(DATE_FORMAT)}` }) })] })] }), _jsxs(Grid, { xs: 12, children: [_jsx(Typography, { level: "title-lg", children: t("global.Costs") }), _jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: t("global.Service Level") }), _jsx("th", { children: t("global.Description") }), !response?.loadId && response?.type == "LTL" ? (_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
+                                                                : 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) }) })) : 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,
                                     // }}
@@ -802,15 +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));
                                         }