@nerdjs/sales-kit 2.2.11 → 2.3.0

package/dist/hooks/lep/lepShipcons.js

@@ -1,31 +1,31 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Autocomplete, AutocompleteOption, Button, Checkbox, CircularProgress, FormControl, FormLabel, Grid, Input, ListItemContent, Modal, ModalDialog, Option, Select, Skeleton, Switch, Textarea, Typography, Box, Tooltip, Sheet, } from "@mui/joy";
 import { Popper } from "@mui/base";
+import { Autocomplete, AutocompleteOption, Box, Button, Checkbox, CircularProgress, FormControl, FormLabel, Grid, Input, ListItemContent, Modal, ModalDialog, Option, Select, Sheet, Skeleton, Switch, Textarea, Tooltip, Typography, } from "@mui/joy";
 import { ListItemIcon, Menu, MenuItem } from "@mui/material";
+import { GRID_REORDER_COL_DEF, GridActionsCellItem, useGridApiRef, } from "@mui/x-data-grid-premium";
+import { NerdEmailValidator, useGetCurrentUserQuery, } from "@nerdjs/account-kit";
 import { CopyInputDecorator, NerdDatePicker, NerdTimePicker, showNotification, } from "@nerdjs/nerd-ui";
+import { nanoid } from "@reduxjs/toolkit";
 import { DateTime } from "luxon";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import salesKitI18n from "../../i18n";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { useTranslation } from "react-i18next";
-import { useParams } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
+import { Person, locationEntityTypeGuard, } from "../../entities";
+import salesKitI18n from "../../i18n";
+import { getAppointmentIssueSubcategoriesSelectors, getAppointmentNotesSelectors, getCarriersSelectors, getDriverNamesSelectors, getNodeNamesSelectors, getPeopleSelectors, getShipconsSelectors, useCreateAppointmentIssueMutation, useCreateShipconV1Mutation, useDeleteShipconV1Mutation, useEmailArcherFileMutation, useGetAppointmentIssueCategoryFilteredByRoleQuery, useGetAppointmentNoteTypesQuery, useGetAppointmentNotesQuery, useGetCarriersQuery, useGetCustomerPeopleQuery, useGetDriverNamesQuery, useGetLoadFilesQuery, useGetLoadQuery, useGetLocationV1Query, useGetNodeNamesQuery, useGetPeopleQuery, useGetShipconQuery, useGetShipconsQuery, useLazyGetAppointmentIssueSubcategoriesQuery, useReorderShipconsMutation, useShipconCreateUserNoteMutation, useUpdateLoadV1Mutation, useUpdateLocationV1Mutation, useUpdateShipconV1Mutation, } from "../../redux";
+import { addLoadInfoTask } from "../../redux/loadInfoTasksSlice/loadInfoTasksSlice";
+import { setRecalculateBody } from "../../redux/quote";
+import { quoteRecalculateBodySelector } from "../../redux/quote/quoteSelectors";
+import { addShipconsTask, setShipconsTasks, } from "../../redux/shipconsTasksSlice/shipconsTasksSlice";
+import { LocationFormSales } from "../locationsForm";
+import { LocationCell, LocationInput, LocationInputCell } from "../quote";
+import { getCSRS } from "./helpers";
 import { LepDateInputCell } from "./lepDateInputCell";
+import { LepStyledDataGrid } from "./lepStyledDataGrid";
 import { LepTimeInputCell } from "./lepTimeInputCell";
+import { LoadIDContext } from "./loadEditPanel";
 import { VirtualizedAutocompleteList } from "./virtualizedAutocompleteList";
-import { addShipconsTask, setShipconsTasks, } from "../../redux/shipconsTasksSlice/shipconsTasksSlice";
-import { nanoid } from "@reduxjs/toolkit";
-import { GridActionsCellItem, useGridApiRef, } from "@mui/x-data-grid-premium";
-import { LepStyledDataGrid } from "./lepStyledDataGrid";
-import { NerdEmailValidator, useGetCurrentUserQuery, } from "@nerdjs/account-kit";
-import { quoteRecalculateBodySelector } from "../../redux/quote/quoteSelectors";
-import { setRecalculateBody } from "../../redux/quote";
-import { addLoadInfoTask } from "../../redux/loadInfoTasksSlice/loadInfoTasksSlice";
-import { getCSRS } from "./helpers";
-import { locationEntityTypeGuard, Person, } from "../../entities";
-import { useGetShipconsQuery, useGetLoadQuery, useGetPeopleQuery, useGetCustomerPeopleQuery, useUpdateShipconV1Mutation, useDeleteShipconV1Mutation, useReorderShipconsMutation, getShipconsSelectors, useShipconCreateUserNoteMutation, useEmailArcherFileMutation, useGetLoadFilesQuery, useGetShipconQuery, useCreateShipconV1Mutation, useGetAppointmentNotesQuery, getAppointmentNotesSelectors, useGetAppointmentNoteTypesQuery, useGetLocationV1Query, useUpdateLocationV1Mutation, useCreateAppointmentIssueMutation, useGetAppointmentIssueCategoryFilteredByRoleQuery, useLazyGetAppointmentIssueSubcategoriesQuery, getAppointmentIssueSubcategoriesSelectors, useGetNodeNamesQuery, getNodeNamesSelectors, useGetDriverNamesQuery, getDriverNamesSelectors, getPeopleSelectors, useUpdateLoadV1Mutation, useGetCarriersQuery, getCarriersSelectors, } from "../../redux";
-import { LocationFormSales } from "../locationsForm";
-import { LocationInputCell, LocationCell, LocationInput } from "../quote";
 const KEYS_MAP = {
     stopNumber: "stop_number",
     shipConsType: "ship_cons_type",
@@ -41,10 +41,12 @@ const KEYS_MAP = {
 /**
  * LepShipcons
  *
+ * @param root0
+ * @param root0.quoteRoute
  * @returns {null} LepShipcons
  */
 export function LepShipcons({ quoteRoute }) {
-    const { id } = useParams();
+    const id = useContext(LoadIDContext);
     const params = {
         filters: JSON.stringify([
             { name: "ship_cons.load_id", comparison: "eq", value: id },
@@ -70,10 +72,7 @@ export function LepShipcons({ quoteRoute }) {
     if (isLoading || isFetchingContacts || isFetching || isLoadingLoad) {
         return (_jsxs(Box, { height: "100%", children: [_jsx(Box, { display: "flex", sx: {
                         mb: 1,
-                    }, children: _jsx(Box, { ml: { xs: "0", lg: "auto" }, children: _jsxs(Grid, { container: true, spacing: 1, alignItems: "center", children: [_jsx(Grid, { xs: 12, md: "auto", children: _jsx(Skeleton, { variant: "rectangular", width: 160, height: 35 }) }), _jsx(Grid, { xs: 12, md: "auto", children: _jsx(Skeleton, { variant: "rectangular", width: 160, height: 35 }) }), _jsx(Grid, { xs: 12, md: "auto", children: _jsx(Skeleton, { variant: "rectangular", width: 100, height: 35 }) })] }) }) }), _jsx(Skeleton, { variant: "rectangular", width: "100%", height: 80 }), _jsx(Box, { display: "flex", sx: {
-                        mt: 2,
-                        mb: 1,
-                    }, children: _jsx(Skeleton, { variant: "rectangular", width: 92, height: 28 }) })] }));
+                    }, children: _jsxs(Grid, { container: true, spacing: 1, alignItems: "center", width: "100%", children: [_jsx(Grid, { xs: 12, sm: "auto", children: _jsx(Skeleton, { variant: "rectangular", width: 160, height: 35 }) }), _jsx(Grid, { xs: 12, sm: "auto", children: _jsx(Skeleton, { variant: "rectangular", width: 160, height: 35 }) }), _jsx(Grid, { xs: 12, sm: "auto", ml: { xs: "0", sm: "auto" }, children: _jsx(Skeleton, { variant: "rectangular", width: 100, height: 35 }) })] }) }), _jsx(Skeleton, { variant: "rectangular", width: "100%", height: 80 })] }));
     }
     else
         return _jsx(Content, { quoteRoute: quoteRoute });
@@ -81,6 +80,8 @@ export function LepShipcons({ quoteRoute }) {
 /**
  * LepShipcons
  *
+ * @param root0
+ * @param root0.quoteRoute
  * @returns {null} LepShipcons
  */
 function Content({ quoteRoute }) {
@@ -89,7 +90,7 @@ function Content({ quoteRoute }) {
     const [updateShipcon] = useUpdateShipconV1Mutation();
     const [deleteShipcon] = useDeleteShipconV1Mutation();
     const [reorderShipcons] = useReorderShipconsMutation();
-    const { id } = useParams();
+    const id = useContext(LoadIDContext);
     const params = {
         filters: JSON.stringify([
             { name: "ship_cons.load_id", comparison: "eq", value: id },
@@ -108,6 +109,7 @@ function Content({ quoteRoute }) {
     const [issueShipconID, setIssueShipconID] = useState();
     const [showIssuesShipconID, setShowIssuesShipconID] = useState(null);
     const [stagedShipcon, setStagedShipcon] = useState(null);
+    const [open, setOpen] = useState(false);
     const [scheduleEmailStagedShipcon, setScheduleEmailStagedShipcon] = useState(null);
     const [anchorEl, setAnchorEl] = useState(null);
     const [createNote] = useShipconCreateUserNoteMutation();
@@ -212,6 +214,7 @@ function Content({ quoteRoute }) {
         return {
             shipconID: s.id,
             task,
+            loadID: Number(id),
         };
     };
     useEffect(() => {
@@ -221,11 +224,7 @@ function Content({ quoteRoute }) {
                 const item = test(s);
                 tasks = { ...tasks, [item.shipconID]: item.task };
             });
-            dispatch(setShipconsTasks(tasks));
-            setTimeout(() => apiRef.current?.autosizeColumns({
-                includeHeaders: true,
-                includeOutliers: true,
-            }), 200);
+            dispatch(setShipconsTasks({ loadID: Number(id), tasks: tasks }));
         }
     }, [shipcons]);
     const handleDeleteShipcon = (id) => {
@@ -238,47 +237,55 @@ function Content({ quoteRoute }) {
         reorderShipcons(rowsClone.map((r) => r.id));
     }, [shipcons]);
     const columns = useMemo(() => [
+        {
+            ...GRID_REORDER_COL_DEF,
+            width: 20,
+        },
         {
             field: "stopNumber",
-            headerName: "Stop #",
+            headerName: "#",
             editable: true,
             sortable: false,
+            width: 30,
         },
         {
             field: "shipConsType",
-            headerName: "Kind",
+            headerName: "T",
             type: "singleSelect",
             editable: true,
             valueOptions: [
-                { value: "shipper", label: "Shipper" },
-                { value: "consignee", label: "Consignee" },
+                { value: "shipper", label: "S" },
+                { value: "consignee", label: "C" },
             ],
             sortable: false,
+            width: 30,
         },
         {
             field: "dropStop",
-            headerName: "Drop Stop",
+            headerName: "Dr",
             type: "boolean",
             renderCell(params) {
                 return params.value ? (_jsx("i", { className: "fa-solid fa-check" })) : (_jsx("i", { className: "fa-solid fa-xmark" }));
             },
             editable: true,
             sortable: false,
+            width: 30,
         },
         {
             field: "standbyAppointment",
-            headerName: "Standby apt",
+            headerName: "Sby",
             type: "boolean",
             renderCell(params) {
                 return params.value ? (_jsx("i", { className: "fa-solid fa-check" })) : (_jsx("i", { className: "fa-solid fa-xmark" }));
             },
             editable: true,
             sortable: false,
+            width: 30,
         },
         {
             field: "stopDate",
             headerName: "Date",
-            minWidth: 162,
+            width: 110,
             editable: true,
             renderCell: (p) => p.row.stopDate
                 ? DateTime.fromISO(p.row.stopDate).toUTC().toFormat("LL/dd/yyyy")
@@ -293,7 +300,7 @@ function Content({ quoteRoute }) {
             field: "timeFrom",
             headerName: "From",
             editable: true,
-            minWidth: 102,
+            width: 100,
             renderCell: (p) => p.row.timeFrom
                 ? DateTime.fromISO(p.row.timeFrom).toUTC().toFormat("HH:mm")
                 : "",
@@ -307,7 +314,7 @@ function Content({ quoteRoute }) {
             field: "timeTo",
             headerName: "To",
             editable: true,
-            minWidth: 102,
+            width: 100,
             renderCell: (p) => p.row.timeTo
                 ? DateTime.fromISO(p.row.timeTo).toUTC().toFormat("HH:mm")
                 : "",
@@ -354,7 +361,7 @@ function Content({ quoteRoute }) {
                     return { ...params.row, locationID: 0 };
             },
             editable: true,
-            minWidth: 250,
+            width: 200,
             cellClassName: (p) => `ShipconsTaskItem-${p.id}-location`,
             sortable: false,
         },
@@ -373,6 +380,7 @@ function Content({ quoteRoute }) {
             type: "string",
             editable: true,
             sortable: false,
+            width: 65,
         },
         {
             field: "city",
@@ -380,6 +388,7 @@ function Content({ quoteRoute }) {
             type: "string",
             editable: false,
             sortable: false,
+            width: 90,
         },
         {
             field: "state",
@@ -387,6 +396,7 @@ function Content({ quoteRoute }) {
             type: "string",
             editable: false,
             sortable: false,
+            width: 30,
         },
         {
             field: "referenceNumber",
@@ -395,6 +405,8 @@ function Content({ quoteRoute }) {
             editable: true,
             cellClassName: (p) => `ShipconsTaskItem-${p.id}-referenceNumber`,
             sortable: false,
+            flex: 1,
+            minWidth: 190,
         },
         {
             field: "confirmationNumber",
@@ -402,12 +414,14 @@ function Content({ quoteRoute }) {
             type: "string",
             editable: true,
             sortable: false,
+            flex: 1,
+            minWidth: 190,
         },
         {
             field: "actions",
             type: "actions",
             headerName: "Actions",
-            width: 100,
+            width: 60,
             cellClassName: "actions",
             getActions: ({ row }) => [
                 _jsx(GridActionsCellItem, { showInMenu: true, icon: _jsx("i", { className: "fa-duotone fa-notes" }), label: "Show Appointment Notes", onClick: () => {
@@ -440,7 +454,7 @@ function Content({ quoteRoute }) {
         {
             field: "appointmentIssues",
             headerName: "Issues",
-            width: 60,
+            width: 30,
             cellClassName: "actions",
             renderCell(params) {
                 const [anchorEl, setAnchorEl] = useState(null);
@@ -483,34 +497,34 @@ function Content({ quoteRoute }) {
             }, 100);
         }
     };
-    return (_jsxs(Box, { sx: { display: "grid", width: "100%" }, children: [_jsx(Box, { display: "flex", sx: {
+    return (_jsxs(Box, { width: "100%", children: [_jsx(Box, { sx: {
                     mb: 1,
-                }, children: _jsx(ActionBar, { quoteRoute: quoteRoute }) }), _jsx(LepStyledDataGrid, { loading: isFetching, rows: shipcons, autoHeight: true, rowReordering: true, onRowOrderChange: handleRowOrderChange, hideFooter: true, apiRef: apiRef, editMode: "row", onCellClick: (e) => {
-                    if (apiRef.current.isCellEditable(e) &&
-                        apiRef.current.getRowMode(e.id) === "view")
-                        apiRef.current?.startRowEditMode({ id: e.id });
-                }, processRowUpdate: onRowUpdate, density: "compact", initialState: {
-                    pinnedColumns: {
-                        right: ["actions", "appointmentIssues"],
-                    },
-                }, columns: columns, getRowClassName: (params) => {
-                    if (params.row.quoteCity?.toLowerCase() !=
-                        params.row.city?.toLowerCase() ||
-                        params.row.quoteState != params.row.state ||
-                        params.row.quoteZip != params.row.zip)
-                        return "grid-row-red";
-                    else if (!params.row.locationID ||
-                        !params.row.stopDate ||
-                        (params.row.shipConsType == "shipper" && !params.row.timeTo) ||
-                        !params.row.timeFrom ||
-                        !params.row.referenceNumber) {
-                        return "grid-row-yellow";
-                    }
-                    else if (!params.row.address?.verified)
-                        return "grid-row-green";
-                    else
-                        return "";
-                } }), _jsx(LocationFormSales, { onCreateLocation: handleSaveLocation, onSaveLocation: handleSaveLocation, open: locationFormOpen.open, place: locationFormOpen.place, onClose: () => setLocationFormOpen({ open: false }) }), _jsx(AptNotes, { close: () => setAptNotesShipConID(null), shipConID: aptNotesShipConID }), _jsx(LocationContact, { locationID: contactLocationID, close: () => setContactLocationID(null) }), _jsx(LocationNotes, { locationID: notesLocationID, close: () => setNotesLocationID(null) }), _jsx(AppointmentIssueForm, { shipconID: issueShipconID, loadID: Number.isNaN(Number(id)) ? undefined : Number(id), close: () => setIssueShipconID(undefined) }), _jsx(AppointmentIssues, { shipconID: showIssuesShipconID, close: () => setShowIssuesShipconID(null) }), _jsx(ScheduleEmail, { shipcon: scheduleEmailStagedShipcon, close: () => setScheduleEmailStagedShipcon(null), shipcons: shipcons }), _jsxs(Menu, { anchorEl: anchorEl, open: openSchedulingMenu, onClose: handleClose, slotProps: {
+                }, children: _jsx(ActionBar, { quoteRoute: quoteRoute }) }), _jsxs(Box, { display: "flex", gap: 0.5, width: "100%", children: [_jsxs(Box, { sx: { display: "grid", gap: 1, width: "100%" }, children: [_jsx(LepStyledDataGrid, { sx: { flexGrow: 1 }, loading: isFetching, rows: shipcons, autoHeight: true, rowReordering: true, onRowOrderChange: handleRowOrderChange, hideFooter: true, apiRef: apiRef, editMode: "row", onCellClick: (e) => {
+                                    if (apiRef.current.isCellEditable(e) &&
+                                        apiRef.current.getRowMode(e.id) === "view")
+                                        apiRef.current?.startRowEditMode({ id: e.id });
+                                }, processRowUpdate: onRowUpdate, density: "compact", initialState: {
+                                    pinnedColumns: {
+                                        right: ["actions", "appointmentIssues"],
+                                    },
+                                }, columns: columns, getRowClassName: (params) => {
+                                    if (params.row.quoteCity?.toLowerCase() !=
+                                        params.row.city?.toLowerCase() ||
+                                        params.row.quoteState != params.row.state ||
+                                        params.row.quoteZip != params.row.zip)
+                                        return "grid-row-red";
+                                    else if (!params.row.locationID ||
+                                        !params.row.stopDate ||
+                                        (params.row.shipConsType == "shipper" && !params.row.timeTo) ||
+                                        !params.row.timeFrom ||
+                                        !params.row.referenceNumber) {
+                                        return "grid-row-yellow";
+                                    }
+                                    else if (!params.row.address?.verified)
+                                        return "grid-row-green";
+                                    else
+                                        return "";
+                                } }), _jsx(AddStop, { open: open, close: () => setOpen(false) })] }), _jsx(Button, { size: "sm", variant: "soft", onClick: () => setOpen(true), children: _jsx("i", { className: "fa-solid fa-plus" }) })] }), _jsx(LocationFormSales, { onCreateLocation: handleSaveLocation, onSaveLocation: handleSaveLocation, open: locationFormOpen.open, place: locationFormOpen.place, onClose: () => setLocationFormOpen({ open: false }) }), _jsx(AptNotes, { close: () => setAptNotesShipConID(null), shipConID: aptNotesShipConID }), _jsx(LocationContact, { locationID: contactLocationID, close: () => setContactLocationID(null) }), _jsx(LocationNotes, { locationID: notesLocationID, close: () => setNotesLocationID(null) }), _jsx(AppointmentIssueForm, { shipconID: issueShipconID, loadID: Number.isNaN(Number(id)) ? undefined : Number(id), close: () => setIssueShipconID(undefined) }), _jsx(AppointmentIssues, { shipconID: showIssuesShipconID, close: () => setShowIssuesShipconID(null) }), _jsx(ScheduleEmail, { shipcon: scheduleEmailStagedShipcon, close: () => setScheduleEmailStagedShipcon(null), shipcons: shipcons }), _jsxs(Menu, { anchorEl: anchorEl, open: openSchedulingMenu, onClose: handleClose, slotProps: {
                     paper: {
                         elevation: 1,
                     },
@@ -550,6 +564,11 @@ function Content({ quoteRoute }) {
                             setShowIssuesShipconID(stagedShipcon?.id || null);
                         }, children: [_jsx(ListItemIcon, { children: _jsx("i", { className: "fa-duotone fa-circle-exclamation" }) }), t("components:lepShipcons.view_appointment_issues")] })] })] }));
 }
+const FROM = [
+    "cs@whitearrow.com",
+    "scheduling@whitearrow.com",
+    "logistics@whitearrow.com",
+];
 const ScheduleEmail = ({ shipcon, shipcons, close, }) => {
     const { t } = useTranslation("common", { i18n: salesKitI18n });
     const dispatch = useDispatch();
@@ -615,7 +634,7 @@ const ScheduleEmail = ({ shipcon, shipcons, close, }) => {
                                             setEmail(e.target.value);
                                             const isValid = await NerdEmailValidator(e.target.value);
                                             setIsEmailValid(isValid);
-                                        } })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.subject") }), _jsx(Input, { value: subject, onChange: (e) => setSubject(e.target.value) })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.from_email") }), _jsxs(Select, { value: fromEmail, onChange: (_e, v) => setFromEmail(v), children: [_jsx(Option, { value: "cs@whitearrow.com", children: "cs@whitearrow.com" }), _jsx(Option, { value: "scheduling@whitearrow.com", children: "scheduling@whitearrow.com" })] })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.file") }), _jsx(Autocomplete, { value: selectedFiles, onChange: (_e, v) => setSelectedFiles(v), multiple: true, options: files?.filter((f) => ["PickUp Document", "Location Form"].includes(f.description)) || [], getOptionLabel: (o) => o.name, renderOption: (props, option) => (_createElement(AutocompleteOption, { ...props, key: option.id },
+                                        } })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.subject") }), _jsx(Input, { value: subject, onChange: (e) => setSubject(e.target.value) })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.from_email") }), _jsx(Select, { value: fromEmail, onChange: (_e, v) => setFromEmail(v), children: FROM.map((a) => (_jsx(Option, { value: a, children: a }, a))) })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.file") }), _jsx(Autocomplete, { value: selectedFiles, onChange: (_e, v) => setSelectedFiles(v), multiple: true, options: files?.filter((f) => ["PickUp Document", "Location Form"].includes(f.description)) || [], getOptionLabel: (o) => o.name, renderOption: (props, option) => (_createElement(AutocompleteOption, { ...props, key: option.id },
                                             _jsxs(ListItemContent, { sx: { fontSize: "sm" }, children: [_jsx("b", { children: option.description }), _jsxs(Typography, { level: "body-xs", children: ["(", option.name, ")"] })] }))) })] }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("components:lepShipcons.message") }), _jsx(Textarea, { value: message, onChange: (e) => setMessage(e.target.value), minRows: 8 })] }) })] }), _jsxs(Box, { sx: {
                         display: "flex",
                         gap: 1,
@@ -625,7 +644,10 @@ const ScheduleEmail = ({ shipcon, shipcons, close, }) => {
                     }, children: [_jsx(Button, { onClick: close, color: "neutral", variant: "soft", children: t("global.Cancel") }), _jsx(Button, { loading: isLoading, disabled: !email || !fromEmail, onClick: () => {
                                 if (email && fromEmail)
                                     sendEmail({
-                                        cc: `${fromEmail}${currentUser?.email ? `, ${currentUser.email}` : ""}`,
+                                        cc: `${fromEmail}${currentUser?.email &&
+                                            fromEmail == "scheduling@whitearrow.com"
+                                            ? `, ${currentUser.email}`
+                                            : ""}`,
                                         email,
                                         file_ids: selectedFiles.map((f) => f.id).toString(),
                                         from: fromEmail,
@@ -648,7 +670,7 @@ const ScheduleEmail = ({ shipcon, shipcons, close, }) => {
                                         .catch(() => {
                                         return;
                                     });
-                            }, startDecorator: _jsx("i", { className: "fa-solid fa-paper-plane-top" }), children: t("send") })] })] }) }));
+                            }, startDecorator: _jsx("i", { className: "fa-solid fa-paper-plane-top" }), children: t("global.send") })] })] }) }));
 };
 const AppointmentIssues = ({ shipconID, close, }) => {
     const { t } = useTranslation("common", { i18n: salesKitI18n });
@@ -717,19 +739,22 @@ const AppointmentIssues = ({ shipconID, close, }) => {
                         }, children: _jsx(Button, { onClick: close, color: "neutral", variant: "soft", children: t("global.Cancel") }) })] })) }) }));
 };
 const AddStop = ({ open, close }) => {
-    const { id } = useParams();
+    const _id = useContext(LoadIDContext);
+    const id = useMemo(() => Number(_id), []);
     const params = {
         filters: JSON.stringify([
             { name: "ship_cons.load_id", comparison: "eq", value: id },
         ]),
         sorter: JSON.stringify([{ name: "ship_cons.stop_number", asc: true }]),
     };
+    const recalculateBody = useSelector(quoteRecalculateBodySelector(Number(id)));
     const { data: load } = useGetLoadQuery(Number(id), { skip: !id || !open });
     const { t } = useTranslation("common", { i18n: salesKitI18n });
     const [zip, setZip] = useState("");
     const [locationID, setLocationID] = useState();
     const [type, setType] = useState("shipper");
     const [dropStop, setDropStop] = useState(false);
+    const [otr, setOTR] = useState(recalculateBody.otr_pickup);
     const [createShipcon, { isLoading }] = useCreateShipconV1Mutation();
     useGetShipconsQuery(params);
     const selectAllShipcons = useMemo(() => getShipconsSelectors(params).selectAll, [params]);
@@ -740,7 +765,11 @@ const AddStop = ({ open, close }) => {
         setType("shipper");
         setZip("");
         setLocationID(undefined);
+        setOTR(recalculateBody.otr_pickup);
     };
+    useEffect(() => {
+        setOTR(recalculateBody.otr_pickup);
+    }, [recalculateBody.otr_pickup]);
     const handleCreate = () => {
         const stopNumber = shipcons?.reduce((prev, current) => {
             if (prev?.stopNumber && current?.stopNumber) {
@@ -764,6 +793,7 @@ const AddStop = ({ open, close }) => {
                 load_id: load?.id,
                 quote_id: load?.quoteID,
                 stop_number: stopNumber + 1,
+                otr_shipper: type == "shipper" ? otr : undefined,
             },
         })
             .unwrap()
@@ -788,7 +818,7 @@ const AddStop = ({ open, close }) => {
                         maxHeight: "initial",
                         width: "initial",
                     },
-                }), children: [_jsx(Typography, { id: "modal-dialog-title", level: "h2", children: t("components:lepShipcons.add_stop") }), _jsxs(Grid, { container: true, spacing: 1, overflow: "auto", height: "100%", children: [_jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("entities:load.attributes.type") }), _jsxs(Select, { value: type, onChange: (_e, v) => setType(v), children: [_jsx(Option, { value: "shipper", children: t("components:lepShipcons.shipper") }), _jsx(Option, { value: "consignee", children: t("components:lepShipcons.consignee") })] })] }) }), _jsx(Grid, { xs: 12, mt: 1, mb: 1, children: _jsx(FormControl, { children: _jsx(Checkbox, { label: t("components:lepShipcons.drop_stop"), checked: dropStop, onChange: (e) => setDropStop(e.target.checked) }) }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("entities:customer.attributes.zip") }), _jsx(Input, { type: "number", value: zip, onChange: (e) => setZip(e.target.value) })] }) }), _jsx(Grid, { xs: 12, children: _jsx(LocationInput, { zip: zip, locationID: locationID, onChange: (l) => {
+                }), children: [_jsx(Typography, { id: "modal-dialog-title", level: "h2", children: t("components:lepShipcons.add_stop") }), _jsxs(Grid, { container: true, spacing: 1, overflow: "auto", height: "100%", children: [_jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("entities:load.attributes.type") }), _jsxs(Select, { value: type, onChange: (_e, v) => setType(v), children: [_jsx(Option, { value: "shipper", children: t("components:lepShipcons.shipper") }), _jsx(Option, { value: "consignee", children: t("components:lepShipcons.consignee") })] })] }) }), _jsx(Grid, { xs: "auto", mt: 1, mb: 1, children: _jsx(FormControl, { children: _jsx(Checkbox, { label: t("components:lepShipcons.drop_stop"), checked: dropStop, onChange: (e) => setDropStop(e.target.checked) }) }) }), _jsx(Grid, { xs: "auto", mt: 1, mb: 1, children: _jsx(FormControl, { children: _jsx(Checkbox, { disabled: type == "consignee", label: t("entities:quote.others.otr_pickup"), checked: otr, onChange: (e) => setOTR(e.target.checked) }) }) }), _jsx(Grid, { xs: 12, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: t("entities:customer.attributes.zip") }), _jsx(Input, { type: "number", value: zip, onChange: (e) => setZip(e.target.value) })] }) }), _jsx(Grid, { xs: 12, children: _jsx(LocationInput, { zip: zip, locationID: locationID, onChange: (l) => {
                                         if (l) {
                                             setLocationID(l.id);
                                             if (locationEntityTypeGuard(l)) {
@@ -1199,9 +1229,9 @@ const renderComplexRow = (props) => {
 };
 const ActionBar = ({ quoteRoute }) => {
     const { t } = useTranslation("common", { i18n: salesKitI18n });
-    const { id } = useParams();
+    const id = useContext(LoadIDContext);
     const dispatch = useDispatch();
-    const recalculateBody = useSelector(quoteRecalculateBodySelector);
+    const recalculateBody = useSelector(quoteRecalculateBodySelector(Number(id)));
     const { data: load } = useGetLoadQuery(Number(id), {
         skip: Number.isNaN(Number(id)),
     });
@@ -1232,7 +1262,6 @@ const ActionBar = ({ quoteRoute }) => {
     const [_updateLoad, { isLoading }] = useUpdateLoadV1Mutation({
         fixedCacheKey: "shared-load-update",
     });
-    const [open, setOpen] = useState(false);
     const lastStopDate = useMemo(() => shipcons.find((s) => s.stopDate !== undefined)?.stopDate, [shipcons]);
     const updateLoad = useCallback((fieldV1, fieldV3, value) => {
         if (load?.id)
@@ -1247,112 +1276,132 @@ const ActionBar = ({ quoteRoute }) => {
                 .unwrap()
                 .catch(() => {
                 dispatch(setRecalculateBody({
-                    ...recalculateBody,
-                    [fieldV1]: load[fieldV3],
+                    id: load.id,
+                    body: {
+                        ...recalculateBody,
+                        [fieldV1]: load[fieldV3],
+                    },
                 }));
                 return;
             });
     }, [load, recalculateBody]);
     const checkContacts = useCallback(() => {
-        if (recalculateBody.person_ids && recalculateBody.person_ids.length > 0)
-            dispatch(addLoadInfoTask({
-                task: {
-                    order: 1,
-                    label: "Customer contacts selected",
-                    status: "success",
-                    uuid: nanoid(),
-                },
-                field: "contacts",
-            }));
-        else {
-            dispatch(addLoadInfoTask({
-                task: {
-                    order: 1,
-                    label: "Please select at least one customer contact",
-                    status: "danger",
-                    uuid: nanoid(),
-                    step: {
-                        content: "Please select at least one customer contact",
-                        selector: ".LoadInfoTaskItem-contacts",
+        if (load?.id)
+            if (recalculateBody.person_ids && recalculateBody.person_ids.length > 0)
+                dispatch(addLoadInfoTask({
+                    loadID: load.id,
+                    task: {
+                        order: 1,
+                        label: "Customer contacts selected",
+                        status: "success",
+                        uuid: nanoid(),
                     },
-                    tabIndex: 0,
-                },
-                field: "contacts",
-            }));
-        }
-    }, [recalculateBody]);
+                    field: "contacts",
+                }));
+            else {
+                dispatch(addLoadInfoTask({
+                    loadID: load.id,
+                    task: {
+                        order: 1,
+                        label: "Please select at least one customer contact",
+                        status: "danger",
+                        uuid: nanoid(),
+                        step: {
+                            content: "Please select at least one customer contact",
+                            selector: ".LoadInfoTaskItem-contacts",
+                        },
+                        tabIndex: 0,
+                    },
+                    field: "contacts",
+                }));
+            }
+    }, [recalculateBody, load]);
     const checkCSR = useCallback(() => {
-        if (recalculateBody.booked_by_id) {
-            dispatch(addLoadInfoTask({
-                task: {
-                    order: 0,
-                    label: "CSR selected",
-                    status: "success",
-                    uuid: nanoid(),
-                },
-                field: "bookedBy",
-            }));
-        }
-        else {
-            dispatch(addLoadInfoTask({
-                task: {
-                    order: 0,
-                    label: "Please select a CSR",
-                    status: "danger",
-                    uuid: nanoid(),
-                    step: {
-                        content: "Please select a CSR",
-                        selector: ".LoadInfoTaskItem-bookedBy",
+        if (load?.id)
+            if (recalculateBody.booked_by_id) {
+                dispatch(addLoadInfoTask({
+                    loadID: load.id,
+                    task: {
+                        order: 0,
+                        label: "CSR selected",
+                        status: "success",
+                        uuid: nanoid(),
                     },
-                    tabIndex: 0,
-                },
-                field: "bookedBy",
-            }));
-        }
-    }, [recalculateBody]);
+                    field: "bookedBy",
+                }));
+            }
+            else {
+                dispatch(addLoadInfoTask({
+                    loadID: load.id,
+                    task: {
+                        order: 0,
+                        label: "Please select a CSR",
+                        status: "danger",
+                        uuid: nanoid(),
+                        step: {
+                            content: "Please select a CSR",
+                            selector: ".LoadInfoTaskItem-bookedBy",
+                        },
+                        tabIndex: 0,
+                    },
+                    field: "bookedBy",
+                }));
+            }
+    }, [recalculateBody, load]);
     useEffect(() => {
         checkCSR();
         checkContacts();
     }, [recalculateBody.booked_by_id, recalculateBody.person_ids]);
-    return (_jsxs(_Fragment, { children: [_jsx(AddStop, { open: open, close: () => setOpen(false) }), _jsxs(Grid, { container: true, spacing: 1, width: "100%", sx: {
-                    alignItems: "start",
-                }, children: [_jsx(Grid, { children: _jsxs(Button, { size: "sm", variant: "soft", color: "neutral", onClick: () => setOpen(true), children: [_jsx("i", { className: "fa-solid fa-location-dot pright" }), t("components:lepShipcons.add_stop")] }) }), _jsxs(Grid, { xs: 12, md: "auto", ml: { xs: undefined, lg: "auto" }, container: true, alignItems: "center", children: [_jsx(Grid, { xs: 12, md: "auto", children: _jsx(FormLabel, { children: t("components:lepShipcons.booked_by") }) }), _jsx(Grid, { xs: 12, md: "auto", children: _jsx(Autocomplete, { className: "LoadInfoTaskItem-bookedBy", error: !recalculateBody.booked_by_id, sx: {
-                                        maxWidth: 300,
-                                    }, loading: isFetching, options: csrs || [], getOptionLabel: (p) => {
-                                        return p ? new Person(p).name() : "";
-                                    }, size: "sm", value: csrs.find((c) => c.id === recalculateBody.booked_by_id) || null, onChange: (_e, v) => {
+    return (_jsxs(Grid, { container: true, spacing: 1, width: "100%", alignItems: "start", justifyContent: "space-between", children: [_jsxs(Grid, { display: "flex", alignItems: "center", flexWrap: "wrap", gap: 0.5, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 0.5, children: [_jsx(FormLabel, { sx: {
+                                    display: "inline",
+                                }, children: t("components:lepShipcons.booked_by") }), _jsx(Autocomplete, { className: "LoadInfoTaskItem-bookedBy", error: !recalculateBody.booked_by_id, sx: {
+                                    maxWidth: 300,
+                                }, loading: isFetching, options: csrs || [], getOptionLabel: (p) => {
+                                    return p ? new Person(p).name() : "";
+                                }, size: "sm", value: csrs.find((c) => c.id === recalculateBody.booked_by_id) || null, onChange: (_e, v) => {
+                                    if (load?.id)
                                         dispatch(setRecalculateBody({
-                                            ...recalculateBody,
-                                            booked_by_id: v?.id || undefined,
+                                            id: load.id,
+                                            body: {
+                                                ...recalculateBody,
+                                                booked_by_id: v?.id || undefined,
+                                            },
                                         }));
-                                        updateLoad("booked_by_id", "bookedByID", v?.id || null);
-                                    } }) })] }), _jsxs(Grid, { xs: 12, md: "auto", container: true, alignItems: "center", children: [_jsx(Grid, { xs: 12, md: "auto", children: _jsx(FormLabel, { children: t("components:lepShipcons.contacts") }) }), _jsx(Grid, { xs: 12, md: "auto", children: _jsx(Autocomplete, { disableCloseOnSelect: true, className: "LoadInfoTaskItem-contacts", sx: {
-                                        "& .MuiChip-label": {
-                                            maxWidth: 160,
-                                        },
-                                    }, error: !recalculateBody.person_ids ||
-                                        recalculateBody.person_ids.length === 0, loading: isFetchingContacts, options: customerPeople?.map((c) => c.id) || [], getOptionLabel: (id) => customerPeople?.find((c) => c.id === id)?.name || "", getOptionDisabled: (option) => !customerPeople?.find((p) => p.id === option)?.active
-                                        ? true
-                                        : false, renderOption: (props, option) => {
-                                        const person = customerPeople?.find((c) => c.id === option);
-                                        return (_createElement(AutocompleteOption, { ...props, key: person?.id },
-                                            _jsxs(ListItemContent, { sx: { fontSize: "sm", fontWeight: "md" }, children: [person?.name, _jsx(Typography, { level: "body-xs", sx: {
-                                                            color: props["aria-disabled"] ? "inherit" : undefined,
-                                                        }, children: person?.email })] })));
-                                    }, size: "sm", limitTags: 1, value: recalculateBody.person_ids || [], multiple: true, onChange: (_e, v) => {
+                                    updateLoad("booked_by_id", "bookedByID", v?.id || null);
+                                } })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 0.5, children: [_jsx(FormLabel, { sx: {
+                                    display: "inline",
+                                }, children: t("components:lepShipcons.contacts") }), _jsx(Autocomplete, { disableCloseOnSelect: true, className: "LoadInfoTaskItem-contacts", sx: {
+                                    "& .MuiChip-label": {
+                                        maxWidth: 160,
+                                    },
+                                    maxWidth: 280,
+                                }, error: !recalculateBody.person_ids ||
+                                    recalculateBody.person_ids.length === 0, loading: isFetchingContacts, options: customerPeople?.map((c) => c.id) || [], getOptionLabel: (id) => customerPeople?.find((c) => c.id === id)?.name || "", getOptionDisabled: (option) => !customerPeople?.find((p) => p.id === option)?.active
+                                    ? true
+                                    : false, renderOption: (props, option) => {
+                                    const person = customerPeople?.find((c) => c.id === option);
+                                    return (_createElement(AutocompleteOption, { ...props, key: person?.id },
+                                        _jsxs(ListItemContent, { sx: { fontSize: "sm", fontWeight: "md" }, children: [person?.name, _jsx(Typography, { level: "body-xs", sx: {
+                                                        color: props["aria-disabled"] ? "inherit" : undefined,
+                                                    }, children: person?.email })] })));
+                                }, size: "sm", limitTags: 1, value: recalculateBody.person_ids || [], multiple: true, onChange: (_e, v) => {
+                                    if (load?.id)
                                         dispatch(setRecalculateBody({
-                                            ...recalculateBody,
-                                            person_ids: v,
+                                            id: load.id,
+                                            body: {
+                                                ...recalculateBody,
+                                                person_ids: v,
+                                            },
                                         }));
-                                    }, onBlur: () => {
-                                        if (load?.person_ids !== recalculateBody.person_ids)
-                                            updateLoad("person_ids", "person_ids", recalculateBody.person_ids);
-                                    } }) })] }), quoteRoute ? (_jsx(Grid, { xs: 12, md: "auto", children: _jsx(Button, { loading: isLoading, startDecorator: _jsx("i", { className: "fa-solid fa-arrow-up-right-from-square" }), size: "sm", component: "a", variant: "soft", href: `${quoteRoute}/${load?.quoteID}?date=${lastStopDate
-                                ? DateTime.fromISO(lastStopDate).toUTC().toMillis()
-                                : "null"}&serviceLevel=${load?.serviceLevel}`, target: "_blank", rel: "noopener noreferrer", sx: {
-                                "&:hover": {
-                                    textDecoration: "none",
-                                },
-                            }, children: t("components:lepShipcons.open_quote") }) })) : null] })] }));
+                                }, onBlur: () => {
+                                    if (load?.person_ids !== recalculateBody.person_ids)
+                                        updateLoad("person_ids", "person_ids", recalculateBody.person_ids);
+                                } })] })] }), quoteRoute ? (_jsx(Grid, { children: _jsx(Button, { loading: isLoading, startDecorator: _jsx("i", { className: "fa-solid fa-arrow-up-right-from-square" }), size: "sm", component: "a", variant: "soft", href: `${quoteRoute}/${load?.quoteID}?date=${lastStopDate
+                        ? DateTime.fromISO(lastStopDate).toUTC().toMillis()
+                        : "null"}&serviceLevel=${load?.serviceLevel}`, target: "_blank", rel: "noopener noreferrer", sx: {
+                        "&:hover": {
+                            textDecoration: "none",
+                        },
+                    }, children: t("components:lepShipcons.open_quote") }) })) : null] }));
 };
 //# sourceMappingURL=lepShipcons.js.map