@nerdjs/sales-kit 1.0.9 → 2.0.0

package/dist/hooks/tender/form.js

@@ -0,0 +1,669 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Chip, Grid, Typography } from "@mui/joy";
+import { Box, useTheme, alpha, Paper, TextField, Alert, Divider, Dialog, DialogTitle, DialogContent, DialogContentText, Select, MenuItem, FormControl, InputLabel, DialogActions, } from "@mui/material";
+import { DataGridPro, useGridApiRef, } from "@mui/x-data-grid-pro";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState, } from "react";
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import { useParams, useSearchParams } from "react-router-dom";
+import { useQuote } from "../../redux/quote/quoteHooks";
+import { selectDropoffs, selectPickups, selectRemainingPallets, selectTenderBody, selectTenderErrors, selectTenderPaths, } from "../../redux/tender/tenderSelector";
+import { setTenderErrors, updateBody, updateStop, } from "../../redux/tender/tenderSlice";
+import { CustomerAutocomplete } from "../customer/customerAutocomplete";
+import { serviceLevelIcons } from "../quote";
+import { getTenderStopsColumns, ManagePallets } from "./helpers";
+import { useLazyGetCustomerQuery } from "../../redux";
+import { Description } from "@mui/icons-material";
+import { documentDescriptions, tenderBodyStep1, tenderBodyStep2, tenderBodyStep3, } from "./constants";
+import { ValidationError } from "yup";
+import { useConfirmTenderMutation, useDeleteTenderMutation, useGetCommoditiesMutation, useGetFilesQuery, useUploadFileMutation, } from "../../redux/tender/tenderEndpoints";
+import { NerdFileUpload, showNotification, useNerdConfirm, } from "@nerdjs/nerd-ui";
+import { nanoid } from "@reduxjs/toolkit";
+/**
+ *
+ * @param {object} props Props
+ * @param {Function} props.newQuote New quote callback
+ * @returns {ReactElement} TenderForm
+ */
+export function TenderForm(props) {
+    const { id: quoteID } = useParams();
+    const { quote } = useQuote(quoteID);
+    const [params] = useSearchParams();
+    const selectedPlan = params.get("selected");
+    const selectedServiceLevel = quote?.serviceLevels.find((sl) => sl.id === selectedPlan);
+    const dispatch = useDispatch();
+    const [step, setStep] = useState(0);
+    const body = useSelector(selectTenderBody);
+    const errors = useSelector(selectTenderErrors);
+    const remainingPallets = quote
+        ? useSelector(selectRemainingPallets(quote))
+        : [];
+    const [confirmTender, { data: tenderResponse, isLoading, isSuccess, reset }] = useConfirmTenderMutation();
+    const [getCommodities, { data: verifiedPalletCommodities }] = useGetCommoditiesMutation();
+    const [deleteTender] = useDeleteTenderMutation();
+    const confirm = useNerdConfirm();
+    const { t } = useTranslation("salesKit");
+    useEffect(() => {
+        return () => {
+            restartTender();
+        };
+    }, []);
+    useEffect(() => {
+        if (quote) {
+            const body = {
+                customerId: quote.customerId,
+                notes: "",
+                quoteNumber: selectedPlan || "",
+                referenceNumber: "",
+                tenderCommodities: [],
+                tenderStops: [],
+                paths: [],
+            };
+            quote.stops.forEach((stop) => {
+                if (stop.type == "shipper")
+                    body.tenderStops.push({
+                        zip: stop.zip,
+                        city: "",
+                        confimationNumber: "",
+                        contactName: "",
+                        line1: stop.address.line1 || "",
+                        locationId: stop.address.locationId || NaN,
+                        name: stop.name,
+                        notes: "",
+                        phone: "",
+                        referenceNumber: "",
+                        shipConId: stop.id,
+                        state: stop.state,
+                        timeFrom: "",
+                        timeTo: "",
+                        type: stop.type,
+                        date: stop.date || "",
+                    });
+                else
+                    body.tenderStops.push({
+                        zip: stop.zip,
+                        city: "",
+                        confimationNumber: "",
+                        contactName: "",
+                        line1: stop.address.line1 || "",
+                        locationId: stop.address.locationId || NaN,
+                        name: stop.name,
+                        notes: "",
+                        phone: "",
+                        referenceNumber: "",
+                        shipConId: stop.id,
+                        state: stop.state,
+                        timeFrom: "",
+                        timeTo: "",
+                        type: stop.type,
+                        ...(!selectedServiceLevel?.flexible
+                            ? {
+                                date: selectedServiceLevel?.from || "",
+                            }
+                            : {
+                                dateFrom: selectedServiceLevel.from,
+                                dateTo: selectedServiceLevel.to,
+                            }),
+                    });
+            });
+            const palletDimensions = Array.from(quote.units.palletDimensions);
+            const pickups = body.tenderStops.filter((s) => s.type === "shipper");
+            const dropoffs = body.tenderStops.filter((s) => s.type === "consignee");
+            pickups.forEach((from) => {
+                dropoffs.forEach((to) => {
+                    body.paths.push({
+                        from,
+                        to,
+                        notes: "",
+                        pieces: "",
+                        pallets: body.tenderStops.length === 2
+                            ? palletDimensions.map((pallet, i) => ({
+                                ...pallet,
+                                id: i,
+                                pieces: "",
+                            }))
+                            : palletDimensions.map((pallet, i) => ({
+                                ...pallet,
+                                count: 0,
+                                id: i,
+                                pieces: "",
+                            })),
+                    });
+                });
+            });
+            dispatch(updateBody(body));
+        }
+    }, [quote]);
+    useLayoutEffect(() => {
+        setTimeout(() => {
+            window.scrollTo({
+                left: 0,
+                top: document.body.scrollHeight,
+                behavior: "smooth",
+            });
+        }, 60);
+    }, [step]);
+    const handleNextStep = useCallback(async () => {
+        let missingFields = false;
+        switch (step) {
+            case 0: {
+                try {
+                    await tenderBodyStep1.validate(body, {
+                        abortEarly: false,
+                    });
+                    dispatch(setTenderErrors(undefined));
+                }
+                catch (error) {
+                    if (error instanceof ValidationError)
+                        dispatch(setTenderErrors(error.errors));
+                    else
+                        throw error;
+                    missingFields = true;
+                }
+                break;
+            }
+            case 1: {
+                try {
+                    await tenderBodyStep2.validate(body, {
+                        abortEarly: false,
+                    });
+                    dispatch(setTenderErrors(undefined));
+                }
+                catch (error) {
+                    if (error instanceof ValidationError)
+                        dispatch(setTenderErrors(error.errors));
+                    else
+                        throw error;
+                    missingFields = true;
+                }
+                break;
+            }
+            case 2: {
+                try {
+                    await tenderBodyStep3.validate(body, {
+                        abortEarly: false,
+                    });
+                    dispatch(setTenderErrors(undefined));
+                }
+                catch (error) {
+                    if (error instanceof ValidationError)
+                        dispatch(setTenderErrors(error.errors));
+                    else
+                        throw error;
+                    missingFields = true;
+                }
+                break;
+            }
+            case 3: {
+                const errors = [];
+                try {
+                    await tenderBodyStep3.validate(body, {
+                        abortEarly: false,
+                    });
+                    dispatch(setTenderErrors(undefined));
+                }
+                catch (error) {
+                    if (error instanceof ValidationError)
+                        errors.concat(error.errors);
+                    else
+                        throw error;
+                    missingFields = true;
+                }
+                let remainingPalletCount = 0;
+                remainingPallets.forEach((p) => (remainingPalletCount += p.count));
+                if (remainingPalletCount > 0) {
+                    errors.push("All pallets should be dispatched");
+                    missingFields = true;
+                }
+                dispatch(setTenderErrors(errors));
+                break;
+            }
+            default:
+                break;
+        }
+        if (step == 3 && !errors?.length) {
+            const commoditiesCheckerBody = {
+                commoditySet: [],
+                total: {
+                    feet: quote?.feet,
+                    weight: Number(quote?.units.totalDimensions.totalWeight),
+                },
+            };
+            body.paths?.forEach((path) => {
+                commoditiesCheckerBody.commoditySet.push(path.pallets.filter((p) => p.count > 0));
+            });
+            getCommodities(commoditiesCheckerBody);
+        }
+        if (step < 3 && !missingFields) {
+            setStep(step + 1);
+        }
+    }, [step, body]);
+    useEffect(() => {
+        if (verifiedPalletCommodities) {
+            const tenderCommodities = [];
+            body.paths?.forEach((path, i) => {
+                const verifiedPallet = verifiedPalletCommodities[i];
+                tenderCommodities.push({
+                    shipperID: path.from.shipConId,
+                    consigneeID: path.to.shipConId,
+                    pallets: verifiedPallet.pallets,
+                    feet: verifiedPallet.feet,
+                    weight: verifiedPallet.weight && verifiedPallet.weight > 0
+                        ? verifiedPallet.weight
+                        : undefined,
+                    pieces: path.pieces,
+                    notes: path.notes,
+                });
+            });
+            confirmTender({ ...body, tenderCommodities });
+        }
+    }, [verifiedPalletCommodities]);
+    useEffect(() => {
+        if (isSuccess) {
+            setStep(step + 1);
+        }
+    }, [isSuccess]);
+    /**
+     *
+     */
+    function restartTender() {
+        reset();
+        dispatch(updateBody({}));
+        dispatch(setTenderErrors(undefined));
+    }
+    return (_jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Toolbar, {}), errors && errors.length > 0 ? (_jsx(Box, { sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    marginTop: 1,
+                }, children: _jsx(Alert, { severity: "error", sx: { maxWidth: 900, width: "100%" }, children: _jsx("ul", { style: { margin: 0 }, children: [...errors].reverse().map((e, i) => (_jsx("li", { children: e }, i))) }) }) })) : null, _jsx(Box, { sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    marginTop: 1,
+                    p: 1,
+                }, children: _jsx(AboutTheLoad, {}) }), _jsx(Box, { sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    marginTop: 1,
+                    overflow: "hidden",
+                    maxHeight: step > 0 ? "100%" : "0px",
+                    visibility: step > 0 ? "visible" : "hidden",
+                    p: step > 0 ? 1 : 0,
+                    transition: "max-height 0.5s linear",
+                }, children: _jsx(PickUp, { step: step }) }), _jsx(Box, { sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    marginTop: 1,
+                    overflow: "hidden",
+                    maxHeight: step > 1 ? "100%" : "0px",
+                    visibility: step > 1 ? "visible" : "hidden",
+                    p: step > 1 ? 1 : 0,
+                    transition: "max-height 0.5s linear",
+                }, children: _jsx(Dropoff, { step: step }) }), _jsx(Box, { sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    marginTop: 1,
+                    overflow: "hidden",
+                    maxHeight: step > 2 ? "100%" : "0px",
+                    visibility: step > 2 ? "visible" : "hidden",
+                    p: step > 2 ? 1 : 0,
+                    transition: "max-height 0.5s linear",
+                }, children: _jsx(Commodities, { step: step }) }), _jsx(Box, { sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    lineHeight: 0.6,
+                    mt: 2,
+                }, children: _jsxs(Box, { sx: {
+                        maxWidth: 650,
+                        textAlign: "center",
+                    }, children: [_jsx(Typography, { display: "inline", children: _jsx(Box, { className: "fa-duotone fa-circle-info pright", component: "i", sx: {
+                                    color: (theme) => theme.palette.warning.main,
+                                } }) }), _jsx(Typography, { level: "body2", display: "inline", sx: { opacity: 0.5 }, children: t("inacurateTenderWarning") })] }) }), tenderResponse ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
+                            display: "flex",
+                            justifyContent: "center",
+                            marginTop: 2,
+                            marginBottom: 2,
+                        }, children: _jsx(Result, { ...tenderResponse }) }), _jsxs(Box, { sx: {
+                            display: "flex",
+                            justifyContent: "center",
+                            marginTop: 2,
+                            marginBottom: 2,
+                        }, children: [_jsx(Button, { variant: "plain", color: "danger", onClick: () => confirm.setOpen({
+                                    content: "Your load will be canceled. You won't be able to recover it.",
+                                    onConfirm() {
+                                        deleteTender(tenderResponse.id)
+                                            .unwrap()
+                                            .then(() => {
+                                            dispatch(showNotification({
+                                                notification: {
+                                                    uuid: nanoid(),
+                                                    title: `Load #${tenderResponse.loadId} (${tenderResponse.referenceNumber}) has been canceled.`,
+                                                    severity: "success",
+                                                    variant: "non-intrusive",
+                                                    autohide: true,
+                                                    autoHideDuration: 2000,
+                                                },
+                                            }));
+                                        });
+                                        props.newQuote();
+                                    },
+                                }), children: t("Cancel Load") }), _jsx(Button, { variant: "soft", sx: {
+                                    ml: 1,
+                                }, onClick: () => {
+                                    props.newQuote();
+                                }, children: t("New Quote") })] })] })) : (_jsx(Box, { sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    marginTop: 2,
+                    marginBottom: 2,
+                }, children: _jsx(Button, { variant: "soft", onClick: handleNextStep, loading: isLoading, children: step > 2 ? t("Tender") : t("Next") }) }))] }));
+}
+/**
+ *
+ * @param {object} props props
+ * @param {number} props.step step
+ * @returns {ReactElement} PickUp
+ */
+function PickUp(props) {
+    const { t } = useTranslation("salesKit");
+    const dispatch = useDispatch();
+    const apiRef = useGridApiRef();
+    const { id: quoteID } = useParams();
+    const [params] = useSearchParams();
+    const selectedPlan = params.get("selected");
+    const { quote } = useQuote(quoteID);
+    const errors = useSelector(selectTenderErrors);
+    const selectedServiceLevel = quote?.serviceLevels.find((sl) => sl.id === selectedPlan);
+    const rows = useSelector(selectPickups);
+    const columns = getTenderStopsColumns(errors, selectedServiceLevel);
+    useEffect(() => {
+        if (props.step == 1 && rows)
+            setTimeout(() => {
+                apiRef.current.setCellFocus(rows[0].shipConId, "zip");
+            }, 80);
+    }, [props.step]);
+    return (_jsx(Paper, { sx: { maxWidth: { xs: undefined, md: 900 }, p: 2, width: "100%" }, children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { xs: 12, children: _jsxs(Typography, { level: "h6", children: [_jsx("i", { className: "fa-sharp fa-solid fa-arrow-up pright" }), " ", t("Pick-ups")] }) }), _jsx(Grid, { xs: 12, children: _jsx(DataGridPro, { processRowUpdate: (newRow) => {
+                            dispatch(updateStop({ id: newRow.shipConId, stop: newRow }));
+                            return newRow;
+                        }, onProcessRowUpdateError: (error) => {
+                            throw error;
+                        }, getRowId: (row) => row.shipConId, disableSelectionOnClick: true, density: "compact", apiRef: apiRef, onCellClick: (e) => {
+                            if (apiRef.current?.getCellMode(e.id, e.field) == "view" &&
+                                apiRef.current?.getCellParams(e.id, e.field).isEditable)
+                                apiRef.current?.startCellEditMode({ id: e.id, field: e.field });
+                        }, autoHeight: true, hideFooter: true, componentsProps: {
+                            cell: { tabIndex: 0 },
+                        }, experimentalFeatures: { newEditingApi: true }, rows: rows || [], columns: columns }) }), _jsx(Grid, { xs: 12, mt: 2, children: rows?.filter((row) => row.notes != "").length ? (_jsx(Alert, { severity: "warning", icon: _jsx(Description, {}), children: rows?.map((row) => {
+                            const notes = row.notes;
+                            if (notes != "") {
+                                return (_jsxs(Box, { sx: { mb: 1 }, children: [_jsx(Typography, { display: "inline", level: "body2", children: `${row.zip}: ` }), _jsx(Typography, { display: "inline", level: "body3", children: notes })] }, row.shipConId));
+                            }
+                            else
+                                return null;
+                        }) })) : null })] }) }));
+}
+/**
+ *
+ * @param {object} props props
+ * @param {number} props.step step
+ * @returns {ReactElement} Dropoff
+ */
+function Dropoff(props) {
+    const { t } = useTranslation("salesKit");
+    const dispatch = useDispatch();
+    const apiRef = useGridApiRef();
+    const { id: quoteID } = useParams();
+    const [params] = useSearchParams();
+    const selectedPlan = params.get("selected");
+    const { quote } = useQuote(quoteID);
+    const selectedServiceLevel = quote?.serviceLevels.find((sl) => sl.id === selectedPlan);
+    const errors = useSelector(selectTenderErrors);
+    const columns = getTenderStopsColumns(errors, selectedServiceLevel);
+    const rows = useSelector(selectDropoffs);
+    useEffect(() => {
+        if (props.step == 2 && rows)
+            setTimeout(() => {
+                apiRef.current.setCellFocus(rows[0].shipConId, "zip");
+            }, 80);
+    }, [props.step]);
+    return (_jsx(Paper, { sx: { maxWidth: { xs: undefined, md: 900 }, p: 2, width: "100%" }, children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { xs: 12, children: _jsxs(Typography, { level: "h6", children: [_jsx("i", { className: "fa-sharp fa-solid fa-arrow-down pright" }), " ", t("Drop-offs")] }) }), _jsx(Grid, { xs: 12, children: _jsx(DataGridPro, { processRowUpdate: (newRow) => {
+                            dispatch(updateStop({ id: newRow.shipConId, stop: newRow }));
+                            return newRow;
+                        }, onProcessRowUpdateError: (error) => {
+                            throw error;
+                        }, getRowId: (row) => row.shipConId, disableSelectionOnClick: true, density: "compact", apiRef: apiRef, onCellClick: (e) => {
+                            if (apiRef.current?.getCellMode(e.id, e.field) == "view" &&
+                                apiRef.current?.getCellParams(e.id, e.field).isEditable)
+                                apiRef.current?.startCellEditMode({ id: e.id, field: e.field });
+                        }, autoHeight: true, hideFooter: true, componentsProps: {
+                            cell: { tabIndex: 0 },
+                        }, experimentalFeatures: { newEditingApi: true }, rows: rows || [], columns: columns }) }), _jsx(Grid, { xs: 12, mt: 2, children: rows?.filter((row) => row.notes != "").length ? (_jsx(Alert, { severity: "warning", icon: _jsx(Description, {}), children: _jsx(Grid, { container: true, spacing: 1, children: rows?.map((row) => {
+                                const notes = row.notes;
+                                if (notes != "") {
+                                    return (_jsxs(Grid, { xs: 12, children: [_jsx(Typography, { display: "inline", level: "body2", children: `${row.zip}: ` }), _jsx(Typography, { display: "inline", level: "body3", children: notes })] }, row.shipConId));
+                                }
+                                else
+                                    return null;
+                            }) }) })) : null })] }) }));
+}
+/**
+ *
+ * @returns {ReactElement} AboutTheLoad
+ */
+function AboutTheLoad() {
+    const { t } = useTranslation("salesKit");
+    const dispatch = useDispatch();
+    const body = useSelector(selectTenderBody);
+    const [getCustomer, { data: _customer, isFetching }] = useLazyGetCustomerQuery();
+    const [customer, setCustomer] = useState(_customer || null);
+    const errors = useSelector(selectTenderErrors);
+    useEffect(() => {
+        if (body.customerId) {
+            if (body.customerId != customer?.id)
+                getCustomer(body.customerId, true)
+                    .unwrap()
+                    .then((result) => setCustomer(result));
+        }
+        else {
+            setCustomer(null);
+        }
+    }, [body.customerId]);
+    return (_jsx(Paper, { sx: { maxWidth: { xs: undefined, md: 900 }, p: 2, width: "100%" }, children: _jsxs(Grid, { container: true, spacing: 1, children: [_jsx(Grid, { xs: 12, children: _jsxs(Typography, { level: "h6", children: [_jsx("i", { className: "fa-duotone fa-truck-ramp-box pright" }), " ", t("aboutTheLoad")] }) }), _jsx(Grid, { xs: 8, children: _jsx(CustomerAutocomplete, { value: customer, isLoading: isFetching, onChange: (v) => {
+                            setCustomer(v);
+                            dispatch(updateBody({
+                                ...body,
+                                customerId: v?.id,
+                            }));
+                        }, textfieldProps: {
+                            variant: "outlined",
+                            size: "small",
+                            required: true,
+                            error: errors && !customer,
+                        } }) }), _jsx(Grid, { xs: 4, children: _jsx(TextField, { fullWidth: true, required: true, size: "small", label: t("Prop Number"), value: body.referenceNumber || "", onChange: (e) => dispatch(updateBody({ ...body, referenceNumber: e.target.value })), error: errors && !body.referenceNumber }) }), _jsx(Grid, { xs: 12, mt: 2, children: _jsx(TextField, { fullWidth: true, multiline: true, InputLabelProps: { shrink: true }, variant: "filled", label: t("Notes"), placeholder: t("Enter Somes Relevant Notes"), value: body.notes || "", onChange: (e) => dispatch(updateBody({ ...body, notes: e.target.value })), color: "warning" }) })] }) }));
+}
+/**
+ * Tender toolbar.
+ *
+ * @returns {ReactElement} Quote toolbar
+ */
+function Toolbar() {
+    const [offsetTop, setOffsetTop] = useState(0);
+    const theme = useTheme();
+    const { id: quoteID } = useParams();
+    const [params] = useSearchParams();
+    const selectedPlan = params.get("selected");
+    const { quote } = useQuote(quoteID);
+    const selectedServiceLevel = quote?.serviceLevels.find((sl) => sl.id === selectedPlan);
+    const { t } = useTranslation("salesKit");
+    useLayoutEffect(() => {
+        const updatePosition = () => {
+            setOffsetTop(window.pageYOffset);
+        };
+        window.addEventListener("scroll", updatePosition);
+        updatePosition();
+        return () => window.removeEventListener("scroll", updatePosition);
+    }, []);
+    const shrink = offsetTop > 0;
+    return (_jsx(Box, { sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            position: "sticky",
+            backdropFilter: shrink ? "blur(10px)" : "none",
+            borderBottom: shrink ? "solid 1px rgba(155,155,155,0.3)" : "none",
+            background: shrink
+                ? alpha(theme.palette.background.paper, 0.6)
+                : "none",
+            zIndex: 1000,
+            top: 48,
+            p: { xs: 1, md: 2 },
+            pt: shrink ? 1 : 2,
+            pb: shrink ? 1 : 2,
+        }, children: _jsxs(Grid, { container: true, sx: {
+                width: { xs: "100%", md: 900 },
+            }, children: [_jsxs(Grid, { children: [_jsx(Typography, { level: "h5", children: t("Tender Load") }), _jsx(Typography, { level: "body2", children: t("From Quote", { id: quote?.id }) })] }), selectedServiceLevel && (_jsx(Grid, { ml: "auto", children: _jsxs(Grid, { container: true, spacing: 1, children: [_jsx(Grid, { children: _jsx("img", { src: serviceLevelIcons[selectedServiceLevel?.serviceLevel], alt: t("Service Level"), height: 40 }) }), _jsxs(Grid, { children: [_jsx(Typography, { level: "h5", children: selectedServiceLevel.serviceLevel.charAt(0).toUpperCase() +
+                                            selectedServiceLevel.serviceLevel.substring(1) }), _jsx(Typography, { level: "body2", children: selectedServiceLevel.description })] })] }) }))] }) }));
+}
+/**
+ *
+ * @param {object} props props
+ * @param {number} props.step step
+ * @returns {ReactElement} Commodities
+ */
+function Commodities(props) {
+    const { t } = useTranslation("salesKit");
+    const apiRef = useGridApiRef();
+    const { id: quoteID } = useParams();
+    const { quote } = useQuote(quoteID);
+    const rows = useSelector(selectTenderPaths);
+    const remainingPallets = quote
+        ? useSelector(selectRemainingPallets(quote))
+        : [];
+    const remainingPalletsCount = useMemo(() => {
+        let remainingPalletCount = 0;
+        remainingPallets.forEach((p) => (remainingPalletCount += p.count));
+        return remainingPalletCount;
+    }, [remainingPallets]);
+    const columns = [
+        {
+            field: "from",
+            headerName: "From",
+            flex: 1,
+            minWidth: 180,
+            renderCell(params) {
+                return (_jsxs(Box, { p: 1, children: [_jsx(Typography, { level: "body2", children: params.value?.name }), params.value?.name != params.value?.zip ? (_jsx(Typography, { level: "body3", children: `${params.value?.zip} ${params.value?.city}` })) : null] }));
+            },
+        },
+        {
+            field: "to",
+            headerName: "To",
+            flex: 1,
+            minWidth: 180,
+            renderCell(params) {
+                return (_jsxs(Box, { p: 1, children: [_jsx(Typography, { level: "body2", children: params.value?.name }), params.value?.name != params.value?.zip ? (_jsx(Typography, { level: "body3", children: `${params.value?.zip} ${params.value?.city}` })) : null] }));
+            },
+        },
+        {
+            field: "pallets",
+            headerName: "Pallets",
+            flex: 2,
+            minWidth: 180,
+            renderCell(params) {
+                return (_jsx(Box, { sx: {
+                        overflow: "scroll",
+                    }, children: _jsx(Grid, { container: true, spacing: 1, children: params.value?.map((pallet, i) => {
+                            const unitsSymbol = pallet.units == "inches" ? '"' : "'";
+                            if (pallet.count > 0)
+                                return (_jsx(Grid, { children: _jsx(Chip, { size: "sm", variant: "soft", startDecorator: _jsx(Box, { sx: {
+                                                borderRadius: 15,
+                                                width: 18,
+                                                height: 18,
+                                                backgroundColor: (theme) => theme.palette.primary.main,
+                                                color: "white",
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                                margin: "var(--Chip-deleteMargin)",
+                                            }, children: pallet.count }), children: `${pallet.length}${unitsSymbol}x${pallet.width}${unitsSymbol}x${pallet.height}${unitsSymbol}` }) }, i));
+                            else
+                                return null;
+                        }) }) }));
+            },
+        },
+        {
+            field: "actions",
+            type: "actions",
+            align: "center",
+            maxWidth: 50,
+            getActions: (params) => [
+                _createElement(ManagePallets, { ...params, key: "manage pallets", remainingPallets: remainingPallets }),
+            ],
+        },
+    ];
+    useEffect(() => {
+        if (props.step && rows) {
+            setTimeout(() => {
+                const row = rows[0];
+                apiRef.current.setCellFocus(`${row.from.shipConId} ${row.to.shipConId}`, "from");
+            }, 80);
+        }
+    }, [props.step]);
+    return (_jsx(Paper, { sx: { maxWidth: { xs: undefined, md: 900 }, p: 2, width: "100%" }, children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { xs: 12, children: _jsxs(Typography, { level: "h6", children: [_jsx("i", { className: "fa-sharp fa-solid fa-pallet-boxes pright" }), " ", t("Commodities")] }) }), _jsx(Grid, { xs: 12, children: _jsx(DataGridPro, { getRowId: (row) => `${row.from.shipConId} ${row.to.shipConId}`, disableSelectionOnClick: true, apiRef: apiRef, autoHeight: true, getRowHeight: () => "auto", hideFooter: true, componentsProps: {
+                            cell: { tabIndex: 0 },
+                        }, rows: rows || [], columns: columns }) }), remainingPalletsCount > 0 ? (_jsx(Grid, { xs: 12, children: _jsxs(Alert, { severity: "warning", children: [_jsx(Typography, { level: "body2", color: "warning", children: t("You need to dispatch these remaning pallets in a lane:") }), _jsx(Grid, { container: true, spacing: 1, children: remainingPallets.map((pallet, i) => {
+                                    const unitsSymbol = pallet.units == "inches" ? '"' : "'";
+                                    if (pallet.count > 0)
+                                        return (_jsx(Grid, { children: _jsx(Chip, { size: "sm", variant: "soft", startDecorator: _jsx(Box, { sx: {
+                                                        borderRadius: 15,
+                                                        width: 18,
+                                                        height: 18,
+                                                        backgroundColor: (theme) => theme.palette.primary.main,
+                                                        color: "white",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        justifyContent: "center",
+                                                        margin: "var(--Chip-deleteMargin)",
+                                                    }, children: pallet.count }), children: `${pallet.length}${unitsSymbol}x${pallet.width}${unitsSymbol}x${pallet.height}${unitsSymbol}` }) }, i));
+                                    else
+                                        return null;
+                                }) })] }) })) : null] }) }));
+}
+/**
+ *
+ * @param {TenderResponse_Entity} response response
+ * @returns {ReactElement} Result
+ */
+function Result(response) {
+    const { t } = useTranslation("salesKit");
+    const { id: quoteID } = useParams();
+    const { quote } = useQuote(quoteID);
+    const [params] = useSearchParams();
+    const selectedPlan = params.get("selected");
+    const selectedServiceLevel = quote?.serviceLevels.find((sl) => sl.id === selectedPlan);
+    const [files, setFiles] = useState([]);
+    const [types, setTypes] = useState({});
+    const [uploadFile] = useUploadFileMutation();
+    const { data: uploadedFiles } = useGetFilesQuery(response.loadId);
+    /**
+     *
+     */
+    function handleClose() {
+        setFiles([]);
+        setTypes({});
+    }
+    const handleUpload = useCallback(() => {
+        files.forEach((file) => {
+            const description = types[file.name];
+            uploadFile({ id: response.loadId, description, file });
+        });
+        setFiles([]);
+        setTypes({});
+    }, [files, types]);
+    return (_jsxs(Box, { sx: { maxWidth: { xs: undefined, md: 900 }, p: 2, width: "100%" }, children: [_jsxs(Grid, { container: true, spacing: 2, children: [_jsxs(Grid, { xs: 12, children: [_jsx(Typography, { level: "h4", children: t("You are all set !") }), _jsx(Typography, { level: "body2", children: `Load #${response.loadId} (${response.referenceNumber}) has been created.` })] }), _jsx(Grid, { xs: 6, children: _jsxs(Paper, { sx: { p: 1 }, children: [_jsxs(Typography, { level: "h6", children: [_jsx("i", { className: "fa-sharp fa-solid fa-dollar-sign" }), "\u00A0\u00A0", t("Initial Quote")] }), _jsxs(Grid, { container: true, children: [_jsx(Grid, { xs: 6, children: _jsx(Typography, { children: t("Base Rate") }) }), _jsx(Grid, { xs: 6, textAlign: "right", children: _jsxs(Typography, { children: ["$", selectedServiceLevel?.baseRate] }) }), _jsx(Grid, { xs: 6, children: _jsx(Typography, { children: t("Fuel Rate") }) }), _jsx(Grid, { xs: 6, textAlign: "right", children: _jsxs(Typography, { children: ["$", selectedServiceLevel?.fuelRate] }) }), _jsx(Grid, { xs: 12, children: _jsx(Divider, {}) }), _jsx(Grid, { xs: 6, children: _jsx(Typography, { children: t("Total Rate") }) }), _jsx(Grid, { xs: 6, textAlign: "right", children: _jsxs(Typography, { children: ["$", selectedServiceLevel?.totalRate] }) })] })] }) }), _jsx(Grid, { xs: 6, children: _jsxs(Paper, { sx: { p: 1 }, children: [_jsxs(Typography, { level: "h6", children: [_jsx("i", { className: "fa-sharp fa-solid fa-receipt" }), "\u00A0\u00A0", t("Tender")] }), _jsxs(Grid, { container: true, children: [_jsx(Grid, { xs: 6, children: _jsx(Typography, { children: t("Base Rate") }) }), _jsx(Grid, { xs: 6, textAlign: "right", children: _jsxs(Typography, { children: ["$", response.baseRate] }) }), _jsx(Grid, { xs: 6, children: _jsx(Typography, { children: t("Fuel Rate") }) }), _jsx(Grid, { xs: 6, textAlign: "right", children: _jsxs(Typography, { children: ["$", response.fuelRate] }) }), _jsx(Grid, { xs: 12, children: _jsx(Divider, {}) }), _jsx(Grid, { xs: 6, children: _jsx(Typography, { children: t("Total Rate") }) }), _jsx(Grid, { xs: 6, textAlign: "right", children: _jsxs(Typography, { children: ["$", response.totalRate] }) })] })] }) }), uploadedFiles && uploadedFiles.length > 0 ? (_jsx(Grid, { xs: 12, children: _jsx(Paper, { sx: { p: 1 }, children: _jsxs(Grid, { container: true, children: [_jsxs(Typography, { level: "h6", children: [_jsx("i", { className: "fa-solid fa-paperclip-vertical" }), "\u00A0\u00A0", t("Uploaded Files")] }), _jsx(Grid, { xs: 12, children: _jsxs(Grid, { container: true, children: [_jsx(Grid, { xs: 6, children: _jsx(Typography, { children: t("Name") }) }), _jsx(Grid, { xs: 6, textAlign: "right", children: _jsx(Typography, { children: t("Description") }) })] }) }), uploadedFiles?.map((file) => (_jsx(Grid, { xs: 12, children: _jsxs(Grid, { container: true, children: [_jsx(Grid, { xs: 6, children: _jsx(Typography, { level: "body2", children: file.name }) }), _jsx(Grid, { xs: 6, textAlign: "right", children: _jsx(Typography, { level: "body2", children: file.description }) }), _jsx(Grid, { xs: 12, children: _jsx(Divider, {}) })] }) }, file.id)))] }) }) })) : null, _jsx(Grid, { ml: "auto", mr: "auto", children: _jsxs(Grid, { container: true, justifyContent: "center", alignItems: "center", p: 5, textAlign: "center", children: [_jsxs(Grid, { xs: 12, children: [_jsx(Typography, { level: "h5", children: t("Having files to send ?") }), _jsx(Typography, { level: "body2", children: t("Drag and drop them on the page.") })] }), _jsx(Grid, { children: _jsx(NerdFileUpload, { uploadFile: (files) => setFiles(files), multiple: true, hideFilesList: true }) })] }) })] }), _jsxs(Dialog, { open: files.length > 0, onClose: handleClose, children: [_jsx(DialogTitle, { children: t("uploading_file", {
+                            count: files.length,
+                        }) }), _jsxs(DialogContent, { children: [_jsx(DialogContentText, { mb: 1, children: t("For each file, please specify the document type:") }), files.map((file, i) => (_jsxs(Paper, { sx: { p: 2, mb: 1 }, variant: "outlined", children: [_jsx(Typography, { children: file.name }), _jsxs(FormControl, { variant: "standard", fullWidth: true, sx: {
+                                            mt: 2,
+                                        }, children: [_jsx(InputLabel, { id: "select-label", children: t("Document Type") }), _jsx(Select, { value: types[file.name] || "", onChange: (e) => setTypes({ ...types, [file.name]: e.target.value }), labelId: "select-label", label: t("Document Type"), placeholder: t("Choose one..."), children: documentDescriptions.map((d, i) => (_jsx(MenuItem, { value: d, children: d }, i))) })] })] }, i)))] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: handleClose, color: "neutral", variant: "plain", children: t("Cancel") }), _jsx(Button, { variant: "soft", disabled: Object.entries(types).length != files.length ? true : false, onClick: handleUpload, children: t("Upload") })] })] })] }));
+}
+//# sourceMappingURL=form.js.map