@nerdjs/sales-kit 2.0.34 → 2.0.35-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/entities/load/helper.d.ts +1 -0
- package/dist/entities/load/helper.js +19 -0
- package/dist/entities/load/helper.js.map +1 -1
- package/dist/hooks/quote/constants.d.ts +3 -1
- package/dist/hooks/quote/constants.js +3 -4
- package/dist/hooks/quote/constants.js.map +1 -1
- package/dist/hooks/quote/form.js +21 -15
- package/dist/hooks/quote/form.js.map +1 -1
- package/dist/hooks/quote/helpers.js +26 -2
- package/dist/hooks/quote/helpers.js.map +1 -1
- package/dist/hooks/quote/result.js +132 -76
- package/dist/hooks/quote/result.js.map +1 -1
- package/dist/hooks/tender/form.js +20 -17
- package/dist/hooks/tender/form.js.map +1 -1
- package/dist/locales/salesKitEn.d.ts +7 -3
- package/dist/locales/salesKitEn.js +7 -3
- package/dist/locales/salesKitEn.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { Button, Chip, Button as JoyButton, Table, Typography, LinearProgress, Alert, Link, useColorScheme, Menu, MenuItem, } from "@mui/joy";
|
|
3
|
-
import { Accordion, AccordionDetails, AccordionSummary, Box, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Grid, IconButton, Typography as MUITypography, Paper, TextField, Tooltip, alpha, darken, styled, useMediaQuery, useTheme, } from "@mui/material";
|
|
3
|
+
import { Accordion, AccordionDetails, AccordionSummary, Box, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Grid, IconButton, Typography as MUITypography, Paper, TableBody, TableCell, TableFooter, TableHead, TableRow, TextField, Tooltip, alpha, darken, styled, useMediaQuery, useTheme, } from "@mui/material";
|
|
4
4
|
import { LocalizationProvider, PickersDay, StaticDatePicker, } from "@mui/x-date-pickers";
|
|
5
5
|
import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
|
|
6
6
|
import { Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
|
|
@@ -10,12 +10,13 @@ import { restartQuote, setCostBreakdownOpen, setFormOpen, setMarketCostOpen, set
|
|
|
10
10
|
import { useLazyGetCostBreakdownQuery, useLazyGetMarketCostQuery, } from "../../redux/quote/quoteEndpoints";
|
|
11
11
|
import { costBreakdownOpenSelector, formOpenSelector, marketCostOpenSelector, quoteBodySelector, quoteResultSelector, selectedDateSelector, selectedServiceLevelSelector, } from "../../redux/quote/quoteSelector";
|
|
12
12
|
import { LTL_DOC, TL_DOC, serviceLevelColors, serviceLevelIcons, usdFormatter, } from "./constants";
|
|
13
|
-
import {
|
|
13
|
+
import { CalendarMonth, Check, Clear, ExpandMore, Warning, } from "@mui/icons-material";
|
|
14
14
|
import { DateTime } from "luxon";
|
|
15
15
|
import { showNotification } from "@nerdjs/nerd-ui";
|
|
16
16
|
import { nanoid } from "@reduxjs/toolkit";
|
|
17
17
|
import { Link as RouterLink } from "react-router-dom";
|
|
18
18
|
import { useHotkeys } from "react-hotkeys-hook";
|
|
19
|
+
import { grey } from "@mui/material/colors";
|
|
19
20
|
const DATE_FORMAT = "LLL d";
|
|
20
21
|
/**
|
|
21
22
|
* QuoteResponse. A drawer that displays the quote response
|
|
@@ -50,7 +51,9 @@ export function QuoteResult(props) {
|
|
|
50
51
|
flexDirection: "column",
|
|
51
52
|
p: sm ? 0 : 2,
|
|
52
53
|
gap: 2,
|
|
53
|
-
}, children: [!customerPortal && (_jsxs(Paper, { sx: { p: 2, display: "flex", gap: 1 }, children: [_jsxs(Chip, { startDecorator: _jsx("i", { className: "fa-regular fa-map-location" }), variant: "outlined", color: "neutral", children: [response?.totalMiles, " ", t("miles")] }), _jsxs(Chip, { startDecorator: _jsx("i", { className: "fa-solid fa-timer" }), variant: "outlined", color: "neutral", children: [Math.round(response?.transitTime ?? 0), " ", t("hours")] })] })), expired && (_jsx(Alert, { color: "warning", variant: "soft", startDecorator: _jsx(Warning, {}), children: 'Quote is expired, click on "Run Quote" to create a new one.' })), body.loadId && (_jsxs(Alert, { color: "warning", variant: "soft", startDecorator: _jsx(Warning, {}), children: ['Quote has already been tendered, click on "Run Quote" to create a new one.', "\u00A0", openLoadLink ? (_jsx(Link, { component: RouterLink, to: openLoadLink, children: "Open Shipment" })) : null] })), _jsx(ServiceLevels, { customerPortal: customerPortal }), _jsx(CostBreakdown, {}), _jsx(MarketCost, {}), _jsx(Summary, { customerPortal: customerPortal, handleOnTenderLoadClick: handleOnTenderLoadClick }), customerPortal ? (_jsxs(Box, { textAlign: "center",
|
|
54
|
+
}, children: [!customerPortal && (_jsxs(Paper, { sx: { p: 2, display: "flex", gap: 1 }, children: [_jsxs(Chip, { startDecorator: _jsx("i", { className: "fa-regular fa-map-location" }), variant: "outlined", color: "neutral", children: [response?.totalMiles, " ", t("miles")] }), _jsxs(Chip, { startDecorator: _jsx("i", { className: "fa-solid fa-timer" }), variant: "outlined", color: "neutral", children: [Math.round(response?.transitTime ?? 0), " ", t("hours")] })] })), expired && (_jsx(Alert, { color: "warning", variant: "soft", startDecorator: _jsx(Warning, {}), children: 'Quote is expired, click on "Run Quote" to create a new one.' })), body.loadId && (_jsxs(Alert, { color: "warning", variant: "soft", startDecorator: _jsx(Warning, {}), children: ['Quote has already been tendered, click on "Run Quote" to create a new one.', "\u00A0", openLoadLink ? (_jsx(Link, { component: RouterLink, to: openLoadLink, children: "Open Shipment" })) : null] })), _jsx(ServiceLevels, { customerPortal: customerPortal }), _jsx(CostBreakdown, {}), _jsx(MarketCost, {}), _jsx(Summary, { customerPortal: customerPortal, handleOnTenderLoadClick: handleOnTenderLoadClick }), customerPortal ? (_jsxs(Box, { textAlign: "center", sx: {
|
|
55
|
+
lineHeight: 0.6,
|
|
56
|
+
}, children: [_jsx(MUITypography, { variant: "caption", display: "inline", children: _jsx(Box, { className: "fa-duotone fa-circle-info pright", component: "i", sx: {
|
|
54
57
|
color: (theme) => theme.palette.warning.main,
|
|
55
58
|
} }) }), _jsxs(MUITypography, { variant: "caption", display: "inline", sx: { opacity: 0.5 }, children: [`${t("quoteRateWarning")} `, _jsx(Link, { sx: { fontSize: "inherit" }, target: "_blank", href: LTL_DOC, children: "LTL" }), " ", "-", " ", _jsx(Link, { sx: { fontSize: "inherit" }, target: "_blank", href: TL_DOC, children: "TL" })] })] })) : null] }) }));
|
|
56
59
|
}
|
|
@@ -64,7 +67,7 @@ function Wrapper(props) {
|
|
|
64
67
|
const theme = useTheme();
|
|
65
68
|
const sm = useMediaQuery(theme.breakpoints.down(600));
|
|
66
69
|
const open = useSelector(formOpenSelector("result"));
|
|
67
|
-
const { t } = useTranslation();
|
|
70
|
+
const { t } = useTranslation("salesKit");
|
|
68
71
|
const shrink = true;
|
|
69
72
|
const response = useSelector(quoteResultSelector);
|
|
70
73
|
const selectedDate = useSelector(selectedDateSelector);
|
|
@@ -114,9 +117,8 @@ function ServiceLevels({ customerPortal }) {
|
|
|
114
117
|
const selectedServiceLevel = useSelector(selectedServiceLevelSelector);
|
|
115
118
|
const { t } = useTranslation("salesKit");
|
|
116
119
|
return (_jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [customerPortal && response ? (_jsx(ServiceLevelsDetails, { quoteResponse: response })) : (_jsx(Box, { sx: { display: "flex", gap: 2 }, children: response?.serviceLevels?.map((l) => {
|
|
117
|
-
const swatch = serviceLevelColors[l.serviceLevel];
|
|
120
|
+
const swatch = serviceLevelColors[response.type][l.serviceLevel];
|
|
118
121
|
const color = swatch[500];
|
|
119
|
-
const icon = serviceLevelIcons[l.serviceLevel];
|
|
120
122
|
return (_jsxs(Paper, { sx: {
|
|
121
123
|
flex: 1,
|
|
122
124
|
p: 1,
|
|
@@ -125,7 +127,11 @@ function ServiceLevels({ customerPortal }) {
|
|
|
125
127
|
flexDirection: "column",
|
|
126
128
|
gap: 1,
|
|
127
129
|
background: alpha(color, 0.1),
|
|
128
|
-
}, children: [_jsxs(Box, { sx: { textAlign: "center" }, children: [_jsxs(Box, { sx: { display: "flex", gap: 1, justifyContent: "center" }, children: [_jsx("img", { src:
|
|
130
|
+
}, children: [_jsxs(Box, { sx: { textAlign: "center" }, children: [_jsxs(Box, { sx: { display: "flex", gap: 1, justifyContent: "center" }, children: [_jsx("img", { src: l.serviceLevel === "guaranteed"
|
|
131
|
+
? response.getGuaranteedIcon()
|
|
132
|
+
: l.serviceLevel === "premium"
|
|
133
|
+
? response.getPremiumIcon()
|
|
134
|
+
: response.getEconomyIcon(), style: { height: 20 } }), _jsx(Typography, { sx: { textTransform: "capitalize", fontWeight: 500 }, children: l.name })] }), _jsx(Typography, { level: "body2", children: l.description })] }), _jsxs(Box, { children: [_jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [_jsx(Typography, { level: "body2", children: t("Base") }), _jsx(Typography, { level: "body2", children: usdFormatter.format(l.baseRate) })] }), _jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [_jsx(Typography, { level: "body2", children: t("Fuel") }), _jsx(Typography, { level: "body2", children: usdFormatter.format(l.fuelRate) })] }), _jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [_jsx(Typography, { level: "body2", children: t("Extra") }), _jsx(Typography, { level: "body2", children: usdFormatter.format(l.extra) })] })] }), _jsx(Divider, {}), _jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [_jsxs(Typography, { level: "body1", children: [t("Total"), ":"] }), _jsx(Typography, { level: "body1", children: usdFormatter.format(l.totalRate) })] }), _jsx(JoyButton, { onClick: () => {
|
|
129
135
|
dispatch(setSelectedDate(null));
|
|
130
136
|
dispatch(setSelectedServiceLevel(l));
|
|
131
137
|
}, sx: {
|
|
@@ -139,11 +145,11 @@ function ServiceLevels({ customerPortal }) {
|
|
|
139
145
|
: t("Select delivery window"), _jsx("br", {}), _jsxs(Typography, { level: "body2", display: "block", sx: { color: "inherit" }, children: [DateTime.fromFormat(l.from, "yyyy-L-d").toFormat(DATE_FORMAT), l.from != l.to
|
|
140
146
|
? ` - ${DateTime.fromFormat(l.to, "yyyy-L-d").toFormat(DATE_FORMAT)}`
|
|
141
147
|
: []] })] }) })] }, l.id));
|
|
142
|
-
}) })), selectedServiceLevel ? (_jsx(Paper, { sx: {
|
|
148
|
+
}) })), selectedServiceLevel && response ? (_jsx(Paper, { sx: {
|
|
143
149
|
overflow: "hidden",
|
|
144
150
|
}, children: _jsx(LocalizationProvider, { dateAdapter: AdapterLuxon, children: _jsx(StaticDatePicker, { displayStaticWrapperAs: "desktop", value: DateTime.fromFormat(selectedServiceLevel.from, "yyyy-L-d"), onChange: () => {
|
|
145
151
|
// Empty function
|
|
146
|
-
}, disableHighlightToday: true, renderDay: (date, _s, pickersDayProps) => (_jsx(RenderDay, { date: date, pickersDayProps: pickersDayProps, serviceLevel: selectedServiceLevel }, date.toString())), renderInput: (params) => _jsx(TextField, { ...params }), inputFormat: "'Week of' MMM d" }) }) })) : ([])] }));
|
|
152
|
+
}, disableHighlightToday: true, renderDay: (date, _s, pickersDayProps) => (_jsx(RenderDay, { date: date, pickersDayProps: pickersDayProps, serviceLevel: selectedServiceLevel, type: response.type }, date.toString())), renderInput: (params) => _jsx(TextField, { ...params }), inputFormat: "'Week of' MMM d" }) }) })) : ([])] }));
|
|
147
153
|
}
|
|
148
154
|
/**
|
|
149
155
|
*
|
|
@@ -154,7 +160,7 @@ function ServiceLevels({ customerPortal }) {
|
|
|
154
160
|
function ServiceLevelsDetails({ quoteResponse, }) {
|
|
155
161
|
const { serviceLevels } = quoteResponse;
|
|
156
162
|
const dispatch = useDispatch();
|
|
157
|
-
const { t } = useTranslation();
|
|
163
|
+
const { t } = useTranslation("salesKit");
|
|
158
164
|
const { economy, guaranteed, premium } = useMemo(() => {
|
|
159
165
|
const economy = serviceLevels?.find((s) => s.serviceLevel == "economy");
|
|
160
166
|
const premium = serviceLevels?.find((s) => s.serviceLevel == "premium");
|
|
@@ -162,46 +168,88 @@ function ServiceLevelsDetails({ quoteResponse, }) {
|
|
|
162
168
|
return { economy, premium, guaranteed };
|
|
163
169
|
}, [serviceLevels]);
|
|
164
170
|
return (_jsx(Paper, { sx: {
|
|
165
|
-
|
|
166
|
-
}, children:
|
|
171
|
+
borderRadius: "10px",
|
|
172
|
+
}, children: _jsxs(Table, { sx: {
|
|
167
173
|
"& td": { textAlign: "center" },
|
|
168
|
-
},
|
|
174
|
+
}, size: "lg", children: [_jsx(TableHead, { children: _jsxs(TableRow, { sx: {
|
|
175
|
+
"& th": { bgcolor: grey[50] },
|
|
176
|
+
"& th:first-of-type": {
|
|
177
|
+
borderTopLeftRadius: "10px!important",
|
|
178
|
+
},
|
|
179
|
+
"& th:last-of-type": {
|
|
180
|
+
borderTopRightRadius: "10px!important",
|
|
181
|
+
},
|
|
182
|
+
}, children: [_jsx("th", { style: {
|
|
183
|
+
width: "50px",
|
|
184
|
+
} }), _jsx("th", { style: {
|
|
185
|
+
width: "120px",
|
|
186
|
+
} }), guaranteed && (_jsxs("th", { style: {
|
|
169
187
|
textAlign: "center",
|
|
170
188
|
}, children: [_jsx("img", { width: 60, alt: "guaranteed", src: quoteResponse.getGuaranteedIcon() }), _jsx(Typography, { children: guaranteed.name })] })), premium && (_jsxs("th", { style: {
|
|
171
189
|
textAlign: "center",
|
|
172
190
|
}, children: [_jsx("img", { width: 60, alt: "premium", src: quoteResponse.getPremiumIcon() }), _jsx(Typography, { children: premium.name })] })), economy && (_jsxs("th", { style: {
|
|
173
191
|
textAlign: "center",
|
|
174
|
-
}, children: [_jsx("img", { width: 60, alt: "economy", src: quoteResponse.getEconomyIcon() }), _jsx(Typography, { children: economy.name })] }))] })
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
192
|
+
}, children: [_jsx("img", { width: 60, alt: "economy", src: quoteResponse.getEconomyIcon() }), _jsx(Typography, { children: economy.name })] }))] }) }), _jsxs(TableBody, { sx: {
|
|
193
|
+
"& tr th:first-of-type": {
|
|
194
|
+
borderLeft: `1px solid ${grey[200]}`,
|
|
195
|
+
},
|
|
196
|
+
"& tr td:last-of-type": {
|
|
197
|
+
borderRight: `1px solid ${grey[200]}`,
|
|
198
|
+
},
|
|
199
|
+
"& tr:last-of-type td": {
|
|
200
|
+
borderBottomWidth: "0px",
|
|
201
|
+
},
|
|
202
|
+
}, children: [_jsxs(TableRow, { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-truck-clock" }) }), _jsx("th", { style: {
|
|
203
|
+
whiteSpace: "normal",
|
|
204
|
+
wordBreak: "break-word",
|
|
205
|
+
}, children: t("Transit Time") }), guaranteed && _jsx(TableCell, { children: guaranteed.description }), premium && _jsx(TableCell, { children: premium.description }), economy && _jsx(TableCell, { children: economy.description })] }), _jsxs(TableRow, { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-calendar-days" }) }), _jsx("th", { style: {
|
|
206
|
+
whiteSpace: "normal",
|
|
207
|
+
wordBreak: "break-word",
|
|
208
|
+
}, children: t("Appointment") }), guaranteed && _jsx(TableCell, { children: t("Strict") }), premium && _jsx(TableCell, { children: t("4h Window") }), economy && _jsx(TableCell, { children: t("8h Window") })] }), _jsxs(TableRow, { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-up" }) }), _jsx("th", { style: {
|
|
209
|
+
whiteSpace: "normal",
|
|
210
|
+
wordBreak: "break-word",
|
|
211
|
+
}, children: t("loadToRide") }), guaranteed && (_jsx(TableCell, { children: _jsx(Check, { color: "success" }) })), premium && (_jsx(TableCell, { children: _jsx(Check, { color: "success" }) })), economy && (_jsx(TableCell, { children: _jsx(Check, { color: "success" }) }))] }), _jsxs(TableRow, { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-truck-ramp-box" }) }), _jsx("th", { style: {
|
|
212
|
+
whiteSpace: "normal",
|
|
213
|
+
wordBreak: "break-word",
|
|
214
|
+
}, children: t("floorLoad") }), quoteResponse.type === "TL" ? (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: _jsx(Check, { color: "success" }) }), _jsx(TableCell, { children: _jsx(Check, { color: "success" }) }), _jsx(TableCell, { children: _jsx(Check, { color: "success" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: _jsx(Clear, {}) }), _jsx(TableCell, { children: _jsx(Clear, {}) }), _jsx(TableCell, { children: _jsx(Clear, {}) })] }))] }), _jsxs(TableRow, { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-clock" }) }), _jsx("th", { style: {
|
|
215
|
+
whiteSpace: "normal",
|
|
216
|
+
wordBreak: "break-word",
|
|
217
|
+
}, children: t("Same Day Pickup") }), guaranteed && (_jsxs(TableCell, { children: [_jsx(Typography, { children: "99.9%" }), _jsx(LinearProgress, { value: 99.9, determinate: true, thickness: 5 })] })), premium && (_jsxs(TableCell, { children: [_jsx(Typography, { children: "85%" }), _jsx(LinearProgress, { value: 85, determinate: true, thickness: 5 })] })), economy && (_jsxs(TableCell, { children: [_jsx(Typography, { children: "50%" }), _jsx(LinearProgress, { value: 50, determinate: true, thickness: 5 })] }))] }), _jsxs(TableRow, { children: [_jsx("th", { children: _jsx("i", { className: "fa-solid fa-truck-front" }) }), _jsx("th", { style: {
|
|
218
|
+
whiteSpace: "normal",
|
|
219
|
+
wordBreak: "break-word",
|
|
220
|
+
}, children: t("Driver / Equipment Allocation") }), guaranteed && (_jsxs(TableCell, { children: [_jsx(Typography, { children: "99.9%" }), _jsx(LinearProgress, { value: 99.9, determinate: true, thickness: 5 })] })), premium && (_jsxs(TableCell, { children: [_jsx(Typography, { children: "85%" }), _jsx(LinearProgress, { value: 85, determinate: true, thickness: 5 })] })), economy && (_jsxs(TableCell, { children: [_jsx(Typography, { children: "50%" }), _jsx(LinearProgress, { value: 50, determinate: true, thickness: 5 })] }))] }), _jsxs(TableRow, { children: [_jsx("th", {}), _jsx("th", { style: {
|
|
221
|
+
whiteSpace: "normal",
|
|
222
|
+
wordBreak: "break-word",
|
|
223
|
+
}, children: t("Base") }), guaranteed && (_jsx(TableCell, { children: usdFormatter.format(guaranteed.baseRate) })), premium && (_jsx(TableCell, { children: usdFormatter.format(premium.baseRate) })), economy && (_jsx(TableCell, { children: usdFormatter.format(economy.baseRate) }))] }), _jsxs(TableRow, { children: [_jsx("th", {}), _jsx("th", { style: {
|
|
224
|
+
whiteSpace: "normal",
|
|
225
|
+
wordBreak: "break-word",
|
|
226
|
+
}, children: t("Fuel") }), guaranteed && (_jsx(TableCell, { children: usdFormatter.format(guaranteed.fuelRate) })), premium && (_jsx(TableCell, { children: usdFormatter.format(premium.fuelRate) })), economy && (_jsx(TableCell, { children: usdFormatter.format(economy.fuelRate) }))] }), _jsxs(TableRow, { children: [_jsx("th", {}), _jsx("th", { style: {
|
|
227
|
+
whiteSpace: "normal",
|
|
228
|
+
wordBreak: "break-word",
|
|
229
|
+
}, children: t("Extra") }), guaranteed && (_jsx(TableCell, { children: usdFormatter.format(guaranteed.extra) })), premium && (_jsx(TableCell, { children: usdFormatter.format(premium.extra) })), economy && (_jsx(TableCell, { children: usdFormatter.format(economy.extra) }))] }), _jsxs(TableRow, { children: [_jsx("th", {}), _jsx("th", { style: {
|
|
230
|
+
whiteSpace: "normal",
|
|
231
|
+
wordBreak: "break-word",
|
|
232
|
+
}, children: t("Total") }), guaranteed && (_jsx(TableCell, { children: usdFormatter.format(guaranteed.totalRate) })), premium && (_jsx(TableCell, { children: usdFormatter.format(premium.totalRate) })), economy && (_jsx(TableCell, { children: usdFormatter.format(economy.totalRate) }))] })] }), _jsx(TableFooter, { sx: {
|
|
233
|
+
height: 70,
|
|
234
|
+
"& tr th:first-of-type": {
|
|
235
|
+
borderLeft: `1px solid ${grey[200]}`,
|
|
236
|
+
},
|
|
237
|
+
"& tr td:last-of-type": {
|
|
238
|
+
borderRight: `1px solid ${grey[200]}`,
|
|
239
|
+
},
|
|
240
|
+
"& tr:last-of-type": {
|
|
241
|
+
"& th:nth-of-type(1),th:nth-of-type(2)": {
|
|
242
|
+
borderBottomWidth: "1px",
|
|
243
|
+
borderBottomStyle: "solid",
|
|
244
|
+
},
|
|
245
|
+
"& th:first-of-type": {
|
|
246
|
+
borderBottomLeftRadius: "10px",
|
|
247
|
+
},
|
|
248
|
+
"& td:last-of-type": {
|
|
249
|
+
borderBottomRightRadius: "10px",
|
|
250
|
+
},
|
|
251
|
+
},
|
|
252
|
+
}, children: _jsxs(TableRow, { children: [_jsx("th", {}), _jsx("th", {}), guaranteed && (_jsx(TableCell, { children: _jsx(JoyButton, { onClick: () => {
|
|
205
253
|
dispatch(setSelectedDate(null));
|
|
206
254
|
dispatch(setSelectedServiceLevel(guaranteed));
|
|
207
255
|
}, sx: {
|
|
@@ -213,7 +261,7 @@ function ServiceLevelsDetails({ quoteResponse, }) {
|
|
|
213
261
|
},
|
|
214
262
|
}, children: _jsxs(Box, { children: [t("Select delivery date"), _jsx("br", {}), _jsxs(Typography, { level: "body2", display: "block", sx: { color: "inherit" }, children: [DateTime.fromFormat(guaranteed.from, "yyyy-L-d").toFormat(DATE_FORMAT), guaranteed.from != guaranteed.to
|
|
215
263
|
? ` - ${DateTime.fromFormat(guaranteed.to, "yyyy-L-d").toFormat(DATE_FORMAT)}`
|
|
216
|
-
: []] })] }) }) })), premium && (_jsx(
|
|
264
|
+
: []] })] }) }) })), premium && (_jsx(TableCell, { children: _jsx(JoyButton, { onClick: () => {
|
|
217
265
|
dispatch(setSelectedDate(null));
|
|
218
266
|
dispatch(setSelectedServiceLevel(premium));
|
|
219
267
|
}, sx: {
|
|
@@ -225,7 +273,7 @@ function ServiceLevelsDetails({ quoteResponse, }) {
|
|
|
225
273
|
},
|
|
226
274
|
}, children: _jsxs(Box, { children: [t("Select delivery window"), _jsx("br", {}), _jsxs(Typography, { level: "body2", display: "block", sx: { color: "inherit" }, children: [DateTime.fromFormat(premium.from, "yyyy-L-d").toFormat(DATE_FORMAT), premium.from != premium.to
|
|
227
275
|
? ` - ${DateTime.fromFormat(premium.to, "yyyy-L-d").toFormat(DATE_FORMAT)}`
|
|
228
|
-
: []] })] }) }) })), economy && (_jsx(
|
|
276
|
+
: []] })] }) }) })), economy && (_jsx(TableCell, { children: _jsx(JoyButton, { onClick: () => {
|
|
229
277
|
dispatch(setSelectedDate(null));
|
|
230
278
|
dispatch(setSelectedServiceLevel(economy));
|
|
231
279
|
}, sx: {
|
|
@@ -237,7 +285,7 @@ function ServiceLevelsDetails({ quoteResponse, }) {
|
|
|
237
285
|
},
|
|
238
286
|
}, children: _jsxs(Box, { children: [t("Select delivery window"), _jsx("br", {}), _jsxs(Typography, { level: "body2", display: "block", sx: { color: "inherit" }, children: [DateTime.fromFormat(economy.from, "yyyy-L-d").toFormat(DATE_FORMAT), economy.from != economy.to
|
|
239
287
|
? ` - ${DateTime.fromFormat(economy.to, "yyyy-L-d").toFormat(DATE_FORMAT)}`
|
|
240
|
-
: []] })] }) }) }))] })
|
|
288
|
+
: []] })] }) }) }))] }) })] }) }));
|
|
241
289
|
}
|
|
242
290
|
/**
|
|
243
291
|
* Quote toolbar. Contains actions like restart, run quote or find a quote.
|
|
@@ -275,7 +323,7 @@ function Toolbar({ shrink = false, customerPortal, }) {
|
|
|
275
323
|
transition: "font-size .3s ease-in-out",
|
|
276
324
|
}, children: [t("Quote"), _jsxs(Typography, { display: "inline", level: "body2", children: ["#", response?.id] })] }) }), customerPortal ? null : (_jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [_jsxs(JoyButton, { onClick: () => dispatch(setMarketCostOpen(true)), size: shrink ? "sm" : "md", variant: "outlined", children: [_jsx("i", { className: "fa-solid fa-money-bill-trend-up pright" }), t("Market")] }), _jsxs(JoyButton, { onClick: () => dispatch(setCostBreakdownOpen(true)), size: shrink ? "sm" : "md", variant: "outlined", children: [_jsx("i", { className: "fa-solid fa-filter-circle-dollar pright" }), t("Breakdown")] })] }))] }) }));
|
|
277
325
|
}
|
|
278
|
-
const RenderDay = ({ date, pickersDayProps, serviceLevel, }) => {
|
|
326
|
+
const RenderDay = ({ date, pickersDayProps, serviceLevel, type, }) => {
|
|
279
327
|
const response = useSelector(quoteResultSelector);
|
|
280
328
|
const shippers = response?.stops.filter((s) => s.type === "shipper");
|
|
281
329
|
const from = DateTime.fromFormat(serviceLevel.from, "yyyy-L-d");
|
|
@@ -285,7 +333,7 @@ const RenderDay = ({ date, pickersDayProps, serviceLevel, }) => {
|
|
|
285
333
|
const last = date.hasSame(to, "day");
|
|
286
334
|
const selectedDate = useSelector(selectedDateSelector);
|
|
287
335
|
const dispatch = useDispatch();
|
|
288
|
-
const { t } = useTranslation();
|
|
336
|
+
const { t } = useTranslation("salesKit");
|
|
289
337
|
let pickupDate = false;
|
|
290
338
|
shippers?.forEach((s) => s.date
|
|
291
339
|
? (pickupDate = DateTime.fromFormat(s.date, "yyyy-L-d").hasSame(date, "day"))
|
|
@@ -294,7 +342,7 @@ const RenderDay = ({ date, pickersDayProps, serviceLevel, }) => {
|
|
|
294
342
|
display: "flex",
|
|
295
343
|
alignItems: "center",
|
|
296
344
|
justifyContent: "center",
|
|
297
|
-
}, children: pickupDate ? (_jsx(Tooltip, { title: t("Pickup"), children: _jsx(Box, { children: _jsx(IconButton, { disabled: true, sx: { width: 35, height: 35 }, children: _jsx("i", { style: { fontSize: 16 }, className: "fa-duotone fa-truck" }) }) }) })) : (_jsx(CustomPickersDay, { ...pickersDayProps, selected: false, disableMargin: true, enabled: enabled, disabled: !enabled, first: first, last: last, serviceLevel: serviceLevel, selectedDate: selectedDate, onClick: () => dispatch(setSelectedDate(pickersDayProps.day)) })) }));
|
|
345
|
+
}, children: pickupDate ? (_jsx(Tooltip, { title: t("Pickup"), children: _jsx(Box, { children: _jsx(IconButton, { disabled: true, sx: { width: 35, height: 35 }, children: _jsx("i", { style: { fontSize: 16 }, className: "fa-duotone fa-truck" }) }) }) })) : (_jsx(CustomPickersDay, { ...pickersDayProps, selected: false, disableMargin: true, enabled: enabled, disabled: !enabled, first: first, last: last, serviceLevel: serviceLevel, quoteType: type, selectedDate: selectedDate, onClick: () => dispatch(setSelectedDate(pickersDayProps.day)) })) }));
|
|
298
346
|
};
|
|
299
347
|
const CustomPickersDay = styled(PickersDay, {
|
|
300
348
|
shouldForwardProp: (prop) => ![
|
|
@@ -304,28 +352,29 @@ const CustomPickersDay = styled(PickersDay, {
|
|
|
304
352
|
"last",
|
|
305
353
|
"serviceLevel",
|
|
306
354
|
"selectedDate",
|
|
355
|
+
"quoteType",
|
|
307
356
|
].includes(prop.toString()),
|
|
308
|
-
})(({ theme, enabled, first, last, serviceLevel, selectedDate, day }) => {
|
|
357
|
+
})(({ theme, enabled, first, last, serviceLevel, selectedDate, day, quoteType, }) => {
|
|
309
358
|
return {
|
|
310
359
|
...(enabled && {
|
|
311
360
|
...(!serviceLevel.flexible
|
|
312
361
|
? {
|
|
313
362
|
color: selectedDate?.toMillis() === day.toMillis()
|
|
314
|
-
? serviceLevelColors[serviceLevel.serviceLevel][600]
|
|
363
|
+
? serviceLevelColors[quoteType][serviceLevel.serviceLevel][600]
|
|
315
364
|
: theme.palette.common.white,
|
|
316
365
|
border: selectedDate?.toMillis() === day.toMillis()
|
|
317
|
-
? `2px ${serviceLevelColors[serviceLevel.serviceLevel][600]} solid`
|
|
366
|
+
? `2px ${serviceLevelColors[quoteType][serviceLevel.serviceLevel][600]} solid`
|
|
318
367
|
: "0px",
|
|
319
368
|
backgroundColor: selectedDate?.toMillis() === day.toMillis()
|
|
320
369
|
? theme.palette.common.white
|
|
321
|
-
: serviceLevelColors[serviceLevel.serviceLevel][500],
|
|
370
|
+
: serviceLevelColors[quoteType][serviceLevel.serviceLevel][500],
|
|
322
371
|
"&:hover": {
|
|
323
|
-
backgroundColor: serviceLevelColors[serviceLevel.serviceLevel][600],
|
|
372
|
+
backgroundColor: serviceLevelColors[quoteType][serviceLevel.serviceLevel][600],
|
|
324
373
|
},
|
|
325
374
|
"&:focus": {
|
|
326
375
|
backgroundColor: selectedDate?.toMillis() === day.toMillis()
|
|
327
376
|
? theme.palette.common.white
|
|
328
|
-
: serviceLevelColors[serviceLevel.serviceLevel][600],
|
|
377
|
+
: serviceLevelColors[quoteType][serviceLevel.serviceLevel][600],
|
|
329
378
|
},
|
|
330
379
|
}
|
|
331
380
|
: {
|
|
@@ -335,31 +384,31 @@ const CustomPickersDay = styled(PickersDay, {
|
|
|
335
384
|
borderBottomRightRadius: !last ? "0%" : "100%",
|
|
336
385
|
borderLeft: !first || !selectedDate
|
|
337
386
|
? "0px"
|
|
338
|
-
: `2px ${serviceLevelColors[serviceLevel.serviceLevel][600]} solid`,
|
|
387
|
+
: `2px ${serviceLevelColors[quoteType][serviceLevel.serviceLevel][600]} solid`,
|
|
339
388
|
borderRight: !last || !selectedDate
|
|
340
389
|
? "0px"
|
|
341
|
-
: `2px ${serviceLevelColors[serviceLevel.serviceLevel][600]} solid`,
|
|
390
|
+
: `2px ${serviceLevelColors[quoteType][serviceLevel.serviceLevel][600]} solid`,
|
|
342
391
|
borderTop: selectedDate
|
|
343
|
-
? `2px ${serviceLevelColors[serviceLevel.serviceLevel][600]} solid`
|
|
392
|
+
? `2px ${serviceLevelColors[quoteType][serviceLevel.serviceLevel][600]} solid`
|
|
344
393
|
: "0px",
|
|
345
394
|
borderBottom: selectedDate
|
|
346
|
-
? `2px ${serviceLevelColors[serviceLevel.serviceLevel][600]} solid`
|
|
395
|
+
? `2px ${serviceLevelColors[quoteType][serviceLevel.serviceLevel][600]} solid`
|
|
347
396
|
: "0px",
|
|
348
397
|
backgroundColor: selectedDate
|
|
349
398
|
? theme.palette.common.white
|
|
350
|
-
: serviceLevelColors[serviceLevel.serviceLevel][500],
|
|
399
|
+
: serviceLevelColors[quoteType][serviceLevel.serviceLevel][500],
|
|
351
400
|
"&:hover": {
|
|
352
401
|
backgroundColor: selectedDate
|
|
353
402
|
? theme.palette.common.white
|
|
354
|
-
: serviceLevelColors[serviceLevel.serviceLevel][600],
|
|
403
|
+
: serviceLevelColors[quoteType][serviceLevel.serviceLevel][600],
|
|
355
404
|
},
|
|
356
405
|
"&:focus": {
|
|
357
406
|
backgroundColor: selectedDate
|
|
358
407
|
? theme.palette.common.white
|
|
359
|
-
: serviceLevelColors[serviceLevel.serviceLevel][600],
|
|
408
|
+
: serviceLevelColors[quoteType][serviceLevel.serviceLevel][600],
|
|
360
409
|
},
|
|
361
410
|
color: selectedDate
|
|
362
|
-
? serviceLevelColors[serviceLevel.serviceLevel][600]
|
|
411
|
+
? serviceLevelColors[quoteType][serviceLevel.serviceLevel][600]
|
|
363
412
|
: theme.palette.common.white,
|
|
364
413
|
}),
|
|
365
414
|
}),
|
|
@@ -501,27 +550,34 @@ const Summary = ({ handleOnTenderLoadClick, customerPortal, }) => {
|
|
|
501
550
|
return null;
|
|
502
551
|
return (_jsxs(Paper, { sx: { p: 2 }, children: [_jsxs(Typography, { level: "h5", children: [_jsx("i", { className: "fa-duotone fa-truck pright" }), " ", t("Summary")] }), _jsxs(Grid, { container: true, spacing: 1, rowGap: 2, sx: {
|
|
503
552
|
mt: 2,
|
|
504
|
-
}, children: [_jsxs(Grid, { item: true, xs: 12, children: [_jsx(Typography, { level: "h6", children: t("About") }), _jsxs(Table, { children: [_jsx(
|
|
553
|
+
}, children: [_jsxs(Grid, { item: true, xs: 12, children: [_jsx(Typography, { level: "h6", children: t("About") }), _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx("th", { style: { width: "11%" }, children: t("Quote ID") }), _jsx("th", { style: { width: "10%" }, children: t("Service") }), _jsx("th", { style: { width: "8%" }, children: t("Mode") }), response?.temp && _jsx("th", { children: t("Temperature") }), _jsx("th", { children: t("Commodity Description") }), _jsx("th", { children: t("Total Weight") }), !customerPortal && _jsx("th", { children: t("Freight Class") }), _jsx("th", { style: { width: "10%" }, children: t("Feet") }), _jsx("th", { style: { width: "10%" }, children: t("Pallets") })] }) }), _jsx(TableBody, { children: _jsxs(TableRow, { children: [_jsxs(TableCell, { children: ["#", response?.id] }), _jsx(TableCell, { children: response?.type }), _jsx(TableCell, { children: response?.temp ? t("Reefer") : t("Dry") }), response?.temp && _jsx(TableCell, { children: response.temp }), _jsx(TableCell, { children: response?.commodityDescription }), _jsx(TableCell, { children: response?.weight }), !customerPortal && (_jsx(TableCell, { children: response?.freightClass })), _jsx(TableCell, { children: response?.feet }), _jsx(TableCell, { children: response?.pallets })] }) })] })] }), _jsxs(Grid, { item: true, xs: 12, children: [_jsx(Typography, { level: "h6", children: t("Stops") }), _jsxs(Grid, { container: true, spacing: 1, mt: 1, rowGap: 2, children: [!customerPortal && (_jsxs(Grid, { item: true, xs: 12, children: [_jsxs(Chip, { startDecorator: _jsx("i", { className: "fa-regular fa-map-location" }), variant: "outlined", color: "neutral", children: [response?.totalMiles, " ", t("miles")] }), _jsxs(Chip, { startDecorator: _jsx("i", { className: "fa-solid fa-timer" }), variant: "outlined", color: "neutral", sx: {
|
|
505
554
|
ml: 1,
|
|
506
|
-
}, children: [Math.round(response?.transitTime ?? 0), " ", t("hours")] })] })), _jsxs(Grid, { item: true, xs: 4, children: [_jsx(Typography, { level: "body2", children: t("From") }), _jsxs(Grid, { container: true, children: [
|
|
555
|
+
}, children: [Math.round(response?.transitTime ?? 0), " ", t("hours")] })] })), _jsxs(Grid, { item: true, xs: 4, children: [_jsx("i", { className: "fa-regular fa-arrow-up" }), _jsx(Typography, { ml: 1, display: "inline", level: "body2", children: t("From") }), _jsxs(Grid, { container: true, children: [_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { children: from?.address.line1 || t("Unknown Location") }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { children: from?.city }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { children: from?.zip }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Chip, { startDecorator: _jsx(CalendarMonth, {}), variant: "soft", children: from?.date
|
|
507
556
|
? DateTime.fromFormat(from.date, "yyyy-L-d").toFormat(DATE_FORMAT)
|
|
508
|
-
: "" }) })] })] }), _jsxs(Grid, { item: true, xs: 4, children: [_jsx(Typography, { level: "body2", children: t("To") }), _jsxs(Grid, { container: true, children: [
|
|
557
|
+
: "" }) })] })] }), _jsxs(Grid, { item: true, xs: 4, children: [_jsx("i", { className: "fa-regular fa-arrow-down" }), _jsx(Typography, { ml: 1, display: "inline", level: "body2", children: t("To") }), _jsxs(Grid, { container: true, children: [_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { children: to?.address.line1 || t("Unknown Location") }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { children: to?.city }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { children: to?.zip }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(Chip, { startDecorator: _jsx(CalendarMonth, {}), variant: "soft", children: selectedServiceLevel.serviceLevel == "guaranteed"
|
|
509
558
|
? selectedDate?.toFormat(DATE_FORMAT)
|
|
510
|
-
: `${DateTime.fromFormat(selectedServiceLevel.from, "yyyy-L-d").toFormat(DATE_FORMAT)} - ${DateTime.fromFormat(selectedServiceLevel.to, "yyyy-L-d").toFormat(DATE_FORMAT)}` }) })] })] })] })] }), _jsxs(Grid, { item: true, xs: 12, children: [_jsx(Typography, { level: "h6", children: t("Costs") }), _jsxs(Table, { children: [_jsx(
|
|
511
|
-
|
|
512
|
-
.
|
|
513
|
-
|
|
559
|
+
: `${DateTime.fromFormat(selectedServiceLevel.from, "yyyy-L-d").toFormat(DATE_FORMAT)} - ${DateTime.fromFormat(selectedServiceLevel.to, "yyyy-L-d").toFormat(DATE_FORMAT)}` }) })] })] })] })] }), _jsxs(Grid, { item: true, xs: 12, children: [_jsx(Typography, { level: "h6", children: t("Costs") }), _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx("th", { children: t("Service Level") }), _jsx("th", { children: t("Description") }), _jsx("th", { children: t("Base Rate") }), _jsx("th", { children: t("Fuel Rate") }), _jsx("th", { children: t("Extra") })] }) }), _jsx(TableBody, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx("img", { src: selectedServiceLevel.serviceLevel === "guaranteed"
|
|
560
|
+
? response?.getGuaranteedIcon()
|
|
561
|
+
: selectedServiceLevel.serviceLevel === "premium"
|
|
562
|
+
? response?.getPremiumIcon()
|
|
563
|
+
: response?.getEconomyIcon(), style: { height: 20 } }) }), _jsx(TableCell, { children: selectedServiceLevel?.description }), _jsx(TableCell, { children: usdFormatter.format(selectedServiceLevel.baseRate) }), _jsx(TableCell, { children: usdFormatter.format(selectedServiceLevel.fuelRate) }), _jsx(TableCell, { children: usdFormatter.format(selectedServiceLevel.extra) })] }) })] })] }), _jsxs(Grid, { item: true, xs: 12, textAlign: "right", children: [_jsx(Typography, { children: t("Total") }), _jsx(Typography, { level: "h6", children: usdFormatter.format(selectedServiceLevel.totalRate) }), _jsx(Tooltip, { title: expired
|
|
514
564
|
? 'Quote is expired, click on "Run Quote" to create a new one.'
|
|
515
565
|
: body.loadId
|
|
516
566
|
? 'Quote has already been tendered, click on "Run Quote" to create a new one.'
|
|
517
|
-
: undefined, children: _jsx("span", { children: _jsx(Button, { disabled: expired || body.loadId
|
|
567
|
+
: undefined, children: _jsx("span", { children: _jsx(Button, { disabled: expired || body.loadId ? true : false, sx: {
|
|
518
568
|
color: "white",
|
|
519
|
-
background:
|
|
569
|
+
background: response
|
|
570
|
+
? serviceLevelColors[response?.type][selectedServiceLevel.serviceLevel][500]
|
|
571
|
+
: undefined,
|
|
520
572
|
"&:hover": {
|
|
521
|
-
background:
|
|
573
|
+
background: response
|
|
574
|
+
? serviceLevelColors[response.type][selectedServiceLevel.serviceLevel][700]
|
|
575
|
+
: undefined,
|
|
522
576
|
},
|
|
523
577
|
"&.Joy-disabled": {
|
|
524
|
-
background:
|
|
578
|
+
background: response
|
|
579
|
+
? serviceLevelColors[response.type][selectedServiceLevel.serviceLevel][300]
|
|
580
|
+
: undefined,
|
|
525
581
|
},
|
|
526
582
|
}, onClick: () => {
|
|
527
583
|
if (response && selectedServiceLevel) {
|