@djb25/digit-ui-module-vendor 1.0.20 → 1.0.22

package/dist/index.modern.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams, useLocation, Switch, Link, useHistory, useRouteMatch, Route, Redirect } from 'react-router-dom';
+import { useParams, useLocation, Switch, useHistory, Link, useRouteMatch, Route, Redirect } from 'react-router-dom';
 import { Header, SearchForm, SearchField, Dropdown as Dropdown$2, MobileNumber, CardLabelError, DatePicker as DatePicker$3, SubmitBar, Card, Table, Loader, Toast, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, LayoutWrapper, HomeIcon, PropertyHouse, EmployeeModuleCard, VerticalTimeline, FormComposer, FormStep, LabelFieldPair, CardLabel, Tooltip, TextInput, UploadFile, CardSubHeader, CardText, RadioOrSelect, ShippingTruck, CheckBox, RadioButtons, CloseSvg, Localities, RemoveableTag, ActionBar, ApplyFilterBar, AddIcon, Menu, LinkLabel, ToggleSwitch, CardSectionHeader, Row, EditIcon, DeleteIcon, Modal, InfoIcon, CardHeader, StatusTable, LinkButton, Banner } from '@djb25/digit-ui-react-components';
 import { useForm, Controller } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
@@ -606,7 +606,7 @@ const VendorConfig = (t, disabled = false) => {
   }, {
     head: "ES_FSM_REGISTRY_NEW_ADDRESS_DETAILS",
     body: [{
-      label: "ES_FSM_REGISTRY_NEW_DOOR",
+      label: "HOUSE_NO",
       isMandatory: false,
       type: "text",
       key: "doorNo",
@@ -696,6 +696,7 @@ const AddVendor = ({
   const {
     t
   } = useTranslation();
+  const history = useHistory();
   const [currentStep, setCurrentStep] = useState(1);
   const [showToast, setShowToast] = useState(null);
   const [canSubmit, setCanSubmit] = useState(false);
@@ -728,12 +729,43 @@ const AddVendor = ({
     }
   };
   const onFormValueChange = (setValue, formData) => {
-    var _formData$serviceType;
-    if (formData !== null && formData !== void 0 && formData.vendorName && formData !== null && formData !== void 0 && formData.phone && formData !== null && formData !== void 0 && (_formData$serviceType = formData.serviceType) !== null && _formData$serviceType !== void 0 && _formData$serviceType.code) {
+    var _formData$serviceType, _formData$address, _formData$address2;
+    const isVendorDetailsFilled = (formData === null || formData === void 0 ? void 0 : formData.vendorName) && (formData === null || formData === void 0 ? void 0 : formData.phone) && (formData === null || formData === void 0 ? void 0 : (_formData$serviceType = formData.serviceType) === null || _formData$serviceType === void 0 ? void 0 : _formData$serviceType.code);
+    const isAddressFilled = (formData === null || formData === void 0 ? void 0 : (_formData$address = formData.address) === null || _formData$address === void 0 ? void 0 : _formData$address.city) && (formData === null || formData === void 0 ? void 0 : (_formData$address2 = formData.address) === null || _formData$address2 === void 0 ? void 0 : _formData$address2.locality);
+    if (isVendorDetailsFilled && isAddressFilled) {
       setCanSubmit(true);
     } else {
       setCanSubmit(false);
     }
+    if (isVendorDetailsFilled) {
+      if (currentStep === 1) {
+        setCurrentStep(2);
+        setTimeout(() => {
+          const headers = Array.from(document.querySelectorAll(".collapsible-card-title"));
+          const addressHeader = headers.find(h => h.textContent.includes(t("ES_FSM_REGISTRY_NEW_ADDRESS_DETAILS")));
+          if (addressHeader) {
+            addressHeader.scrollIntoView({
+              behavior: "smooth",
+              block: "start"
+            });
+          }
+        }, 100);
+      }
+    } else {
+      if (currentStep === 2) {
+        setCurrentStep(1);
+        setTimeout(() => {
+          const headers = Array.from(document.querySelectorAll(".collapsible-card-title"));
+          const vendorHeader = headers.find(h => h.textContent.includes(t("ES_VRNDOR_NEW_VENDOR_DETAILS")));
+          if (vendorHeader) {
+            vendorHeader.scrollIntoView({
+              behavior: "smooth",
+              block: "start"
+            });
+          }
+        }, 100);
+      }
+    }
   };
   const closeToast = () => {
     setShowToast(null);
@@ -821,7 +853,10 @@ const AddVendor = ({
           key: "success",
           action: "ADD_VENDOR"
         });
-        setTimeout(closeToast, 5000);
+        setTimeout(() => {
+          closeToast();
+          history.push("/digit-ui/employee/vendor/search-vendor");
+        }, 2000);
       }
     });
   };
@@ -858,7 +893,8 @@ const AddVendor = ({
     defaultValues: defaultValues,
     onFormValueChange: onFormValueChange,
     noBreakLine: true,
-    noCard: true
+    noCard: true,
+    isDisabled: !canSubmit
   }), showToast && /*#__PURE__*/React.createElement(Toast, {
     error: showToast.key === "error",
     label: t(showToast.key === "success" ? `ES_FSM_REGISTRY_${showToast.action}_SUCCESS` : showToast.action),
@@ -8156,6 +8192,43 @@ const getFillingPointDisplayValue = (row = {}) => {
   var _row$fillingPoint, _row$dsoDetails3, _row$dsoDetails3$fill, _row$dsoDetails4, _row$dsoDetails5, _row$dsoDetails6, _row$dsoDetails7, _row$fillingpointmeta2;
   return (row === null || row === void 0 ? void 0 : (_row$fillingPoint = row.fillingPoint) === null || _row$fillingPoint === void 0 ? void 0 : _row$fillingPoint.fillingPointName) || (row === null || row === void 0 ? void 0 : (_row$dsoDetails3 = row.dsoDetails) === null || _row$dsoDetails3 === void 0 ? void 0 : (_row$dsoDetails3$fill = _row$dsoDetails3.fillingPoint) === null || _row$dsoDetails3$fill === void 0 ? void 0 : _row$dsoDetails3$fill.fillingPointName) || (row === null || row === void 0 ? void 0 : row.fillingPointName) || (row === null || row === void 0 ? void 0 : (_row$dsoDetails4 = row.dsoDetails) === null || _row$dsoDetails4 === void 0 ? void 0 : _row$dsoDetails4.fillingPointName) || (row === null || row === void 0 ? void 0 : row.fillingPointId) || (row === null || row === void 0 ? void 0 : (_row$dsoDetails5 = row.dsoDetails) === null || _row$dsoDetails5 === void 0 ? void 0 : _row$dsoDetails5.fillingPointId) || (typeof (row === null || row === void 0 ? void 0 : row.fillingPoint) === "string" ? row === null || row === void 0 ? void 0 : row.fillingPoint : null) || (typeof (row === null || row === void 0 ? void 0 : (_row$dsoDetails6 = row.dsoDetails) === null || _row$dsoDetails6 === void 0 ? void 0 : _row$dsoDetails6.fillingPoint) === "string" ? row === null || row === void 0 ? void 0 : (_row$dsoDetails7 = row.dsoDetails) === null || _row$dsoDetails7 === void 0 ? void 0 : _row$dsoDetails7.fillingPoint : null) || (row === null || row === void 0 ? void 0 : (_row$fillingpointmeta2 = row.fillingpointmetadata) === null || _row$fillingpointmeta2 === void 0 ? void 0 : _row$fillingpointmeta2.fillingPointId) || (row === null || row === void 0 ? void 0 : row.filling_pt_name) || (row === null || row === void 0 ? void 0 : row.fillingPtName) || "NA";
 };
+const getSelectedVendorOption = (row = {}, vendors = []) => {
+  var _row$vendor, _row$vendorData;
+  const selectedVendorId = (row === null || row === void 0 ? void 0 : (_row$vendor = row.vendor) === null || _row$vendor === void 0 ? void 0 : _row$vendor.id) || (row === null || row === void 0 ? void 0 : (_row$vendorData = row.vendorData) === null || _row$vendorData === void 0 ? void 0 : _row$vendorData.id) || (row === null || row === void 0 ? void 0 : row.vendorId);
+  if (!selectedVendorId) return null;
+  return vendors.find(vendor => (vendor === null || vendor === void 0 ? void 0 : vendor.id) === selectedVendorId) || (row === null || row === void 0 ? void 0 : row.vendor) || (row === null || row === void 0 ? void 0 : row.vendorData) || null;
+};
+const getVendorFillingPoints = (vendor = {}) => {
+  const fillingPointOptions = [vendor === null || vendor === void 0 ? void 0 : vendor.fillingPoint, ...(Array.isArray(vendor === null || vendor === void 0 ? void 0 : vendor.fillingPoints) ? vendor.fillingPoints : [])].filter(Boolean);
+  const uniqueFillingPoints = new Map();
+  fillingPointOptions.forEach(fillingPoint => {
+    const identifier = getFillingPointIdentifiers(fillingPoint)[0] || (fillingPoint === null || fillingPoint === void 0 ? void 0 : fillingPoint.fillingPointName) || (fillingPoint === null || fillingPoint === void 0 ? void 0 : fillingPoint.id);
+    if (identifier && !uniqueFillingPoints.has(identifier)) {
+      uniqueFillingPoints.set(identifier, fillingPoint);
+    }
+  });
+  return Array.from(uniqueFillingPoints.values());
+};
+const getDriverFillingPointIdentifiers = (driver = {}) => {
+  var _driver$additionalDet, _driver$additionalDet2, _driver$fillingpointm;
+  return Array.from(new Set([driver === null || driver === void 0 ? void 0 : driver.fillingPointId, driver === null || driver === void 0 ? void 0 : driver.fillingStationId, driver === null || driver === void 0 ? void 0 : (_driver$additionalDet = driver.additionalDetails) === null || _driver$additionalDet === void 0 ? void 0 : _driver$additionalDet.fillingPointId, driver === null || driver === void 0 ? void 0 : (_driver$additionalDet2 = driver.additionalDetails) === null || _driver$additionalDet2 === void 0 ? void 0 : _driver$additionalDet2.fillingStationId, driver === null || driver === void 0 ? void 0 : (_driver$fillingpointm = driver.fillingpointmetadata) === null || _driver$fillingpointm === void 0 ? void 0 : _driver$fillingpointm.fillingPointId].filter(value => value !== undefined && value !== null && value !== "").map(String).concat(getFillingPointIdentifiers(driver === null || driver === void 0 ? void 0 : driver.fillingPoint), getFillingPointIdentifiers(driver === null || driver === void 0 ? void 0 : driver.fillingPointDetail), getFillingPointIdentifiers(driver === null || driver === void 0 ? void 0 : driver.fillingPointDetails))));
+};
+const getVendorDriversForFillingPoint = (vendor, fillingPoint) => {
+  const vendorDrivers = Array.isArray(vendor === null || vendor === void 0 ? void 0 : vendor.drivers) ? vendor.drivers.filter(Boolean) : [];
+  if (!fillingPoint) return [];
+  const selectedFillingPointIdentifiers = getFillingPointIdentifiers(fillingPoint);
+  if (!selectedFillingPointIdentifiers.length) return vendorDrivers;
+  return vendorDrivers.filter(driver => {
+    const driverFillingPointIdentifiers = getDriverFillingPointIdentifiers(driver);
+    return !driverFillingPointIdentifiers.length || driverFillingPointIdentifiers.some(identifier => selectedFillingPointIdentifiers.includes(identifier));
+  });
+};
+const getSelectedDriverOption = (row = {}, drivers = []) => {
+  var _row$driverData, _row$driver;
+  const selectedDriverId = (row === null || row === void 0 ? void 0 : (_row$driverData = row.driverData) === null || _row$driverData === void 0 ? void 0 : _row$driverData.id) || (row === null || row === void 0 ? void 0 : (_row$driver = row.driver) === null || _row$driver === void 0 ? void 0 : _row$driver.id);
+  if (!selectedDriverId) return null;
+  return drivers.find(driver => (driver === null || driver === void 0 ? void 0 : driver.id) === selectedDriverId) || null;
+};
 const normalizeFillingPointForVehicleUpdate = fillingPoint => {
   if (!fillingPoint || typeof fillingPoint !== "object") return fillingPoint;
   const {
@@ -8252,6 +8325,12 @@ const VendorInbox = props => {
   const closeToast = () => {
     setShowToast(null);
   };
+  const updateVehicleRowState = (vehicleId, updates) => {
+    setTableData(currentTableData => currentTableData.map(vehicle => (vehicle === null || vehicle === void 0 ? void 0 : vehicle.id) === vehicleId ? {
+      ...vehicle,
+      ...updates
+    } : vehicle));
+  };
   const getVehicleUpdatePayload = (vehicle, overrides = {}) => {
     const normalizedVehicle = {
       ...vehicle,
@@ -8266,6 +8345,19 @@ const VendorInbox = props => {
       vehicle: normalizedVehicle
     };
   };
+  const getVendorPayloadForVehicle = (vendor, vehicles) => {
+    var _vendor$owner;
+    return {
+      vendor: {
+        ...vendor,
+        owner: {
+          ...(vendor === null || vendor === void 0 ? void 0 : vendor.owner),
+          gender: (vendor === null || vendor === void 0 ? void 0 : (_vendor$owner = vendor.owner) === null || _vendor$owner === void 0 ? void 0 : _vendor$owner.gender) || "OTHERS"
+        },
+        vehicles
+      }
+    };
+  };
   const onVendorUpdate = row => {
     var _formDetails$owner, _formDetails$owner2, _formDetails$owner3, _formDetails$owner4;
     let formDetails = row.original.dsoDetails;
@@ -8398,6 +8490,84 @@ const VendorInbox = props => {
       }
     });
   };
+  const onVehicleVendorSelect = (row, selectedVendor) => {
+    const currentVehicle = row.original;
+    const existingVendor = currentVehicle === null || currentVehicle === void 0 ? void 0 : currentVehicle.vendor;
+    if (!(selectedVendor !== null && selectedVendor !== void 0 && selectedVendor.id) || (existingVendor === null || existingVendor === void 0 ? void 0 : existingVendor.id) === (selectedVendor === null || selectedVendor === void 0 ? void 0 : selectedVendor.id)) {
+      return;
+    }
+    const vehicleForVendorMapping = {
+      ...currentVehicle,
+      vendorVehicleStatus: "ACTIVE",
+      fillingPoint: null,
+      driverData: null,
+      driver: null
+    };
+    delete vehicleForVendorMapping.vendor;
+    delete vehicleForVendorMapping.popup;
+    delete vehicleForVendorMapping.driver;
+    const addVehicleToSelectedVendor = () => {
+      const selectedVendorVehicles = Array.isArray(selectedVendor === null || selectedVendor === void 0 ? void 0 : selectedVendor.vehicles) ? [...selectedVendor.vehicles] : [];
+      const existingVehicleIndex = selectedVendorVehicles.findIndex(vehicle => (vehicle === null || vehicle === void 0 ? void 0 : vehicle.id) === (currentVehicle === null || currentVehicle === void 0 ? void 0 : currentVehicle.id));
+      if (existingVehicleIndex > -1) {
+        selectedVendorVehicles[existingVehicleIndex] = {
+          ...selectedVendorVehicles[existingVehicleIndex],
+          ...vehicleForVendorMapping,
+          vendorVehicleStatus: "ACTIVE"
+        };
+      } else {
+        selectedVendorVehicles.push(vehicleForVendorMapping);
+      }
+      const updatedSelectedVendor = {
+        ...selectedVendor,
+        vehicles: selectedVendorVehicles
+      };
+      mutateVendor(getVendorPayloadForVehicle(selectedVendor, selectedVendorVehicles), {
+        onError: error => {
+          setShowToast({
+            key: "error",
+            action: error
+          });
+          setTimeout(closeToast, 5000);
+        },
+        onSuccess: () => {
+          updateVehicleRowState(currentVehicle === null || currentVehicle === void 0 ? void 0 : currentVehicle.id, {
+            vendor: updatedSelectedVendor,
+            fillingPoint: null,
+            driverData: null,
+            driver: null
+          });
+          setShowToast({
+            key: "success",
+            action: "VEHICLE"
+          });
+          queryClient.invalidateQueries("DSO_SEARCH");
+          queryClient.invalidateQueries("FSM_VEICLES_SEARCH");
+          props.refetchData();
+          props.refetchVendor && props.refetchVendor();
+          setTimeout(closeToast, 3000);
+        }
+      });
+    };
+    if (existingVendor !== null && existingVendor !== void 0 && existingVendor.id) {
+      const existingVendorVehicles = Array.isArray(existingVendor === null || existingVendor === void 0 ? void 0 : existingVendor.vehicles) ? existingVendor.vehicles.map(vehicle => (vehicle === null || vehicle === void 0 ? void 0 : vehicle.id) === (currentVehicle === null || currentVehicle === void 0 ? void 0 : currentVehicle.id) ? {
+        ...vehicle,
+        vendorVehicleStatus: "INACTIVE"
+      } : vehicle) : [];
+      mutateVendor(getVendorPayloadForVehicle(existingVendor, existingVendorVehicles), {
+        onError: error => {
+          setShowToast({
+            key: "error",
+            action: error
+          });
+          setTimeout(closeToast, 5000);
+        },
+        onSuccess: addVehicleToSelectedVendor
+      });
+      return;
+    }
+    addVehicleToSelectedVendor();
+  };
   const onDriverSelect = (row, selectedOption) => {
     const formData = getVehicleUpdatePayload(row.original, {
       driverData: selectedOption
@@ -8411,6 +8581,10 @@ const VendorInbox = props => {
         setTimeout(closeToast, 5000);
       },
       onSuccess: (data, variables) => {
+        var _row$original2;
+        updateVehicleRowState((_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.id, {
+          driverData: selectedOption
+        });
         setShowToast({
           key: "success",
           action: "VEHICLE"
@@ -8437,16 +8611,20 @@ const VendorInbox = props => {
         setTimeout(closeToast, 5000);
       },
       onSuccess: () => {
-        setTableData(currentTableData => currentTableData.map(vehicle => {
-          var _row$original2;
-          return (vehicle === null || vehicle === void 0 ? void 0 : vehicle.id) === ((_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.id) ? {
-            ...vehicle,
-            fillingPoint: {
-              ...selectedOption,
-              fillingStationId: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.fillingStationId) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.bookingId) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.uuid) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.fillingPointId)
-            }
-          } : vehicle;
-        }));
+        var _row$original3;
+        const mappedVendor = getSelectedVendorOption(row.original, vendors);
+        const vendorDrivers = getVendorDriversForFillingPoint(mappedVendor, selectedOption);
+        const selectedDriver = getSelectedDriverOption(row.original, vendorDrivers);
+        updateVehicleRowState((_row$original3 = row.original) === null || _row$original3 === void 0 ? void 0 : _row$original3.id, {
+          fillingPoint: {
+            ...selectedOption,
+            fillingStationId: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.fillingStationId) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.bookingId) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.uuid) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.fillingPointId)
+          },
+          ...(selectedDriver ? {} : {
+            driverData: null,
+            driver: null
+          })
+        });
         setShowToast({
           key: "success",
           label: "Filling point mapped successfully"
@@ -8553,13 +8731,14 @@ const VendorInbox = props => {
           Cell: ({
             row
           }) => {
-            var _row$original3, _row$original3$auditD, _row$original4, _row$original4$auditD;
-            return GetCell((_row$original3 = row.original) !== null && _row$original3 !== void 0 && (_row$original3$auditD = _row$original3.auditDetails) !== null && _row$original3$auditD !== void 0 && _row$original3$auditD.createdTime ? Digit.DateUtils.ConvertEpochToDate((_row$original4 = row.original) === null || _row$original4 === void 0 ? void 0 : (_row$original4$auditD = _row$original4.auditDetails) === null || _row$original4$auditD === void 0 ? void 0 : _row$original4$auditD.createdTime) : "");
+            var _row$original4, _row$original4$auditD, _row$original5, _row$original5$auditD;
+            return GetCell((_row$original4 = row.original) !== null && _row$original4 !== void 0 && (_row$original4$auditD = _row$original4.auditDetails) !== null && _row$original4$auditD !== void 0 && _row$original4$auditD.createdTime ? Digit.DateUtils.ConvertEpochToDate((_row$original5 = row.original) === null || _row$original5 === void 0 ? void 0 : (_row$original5$auditD = _row$original5.auditDetails) === null || _row$original5$auditD === void 0 ? void 0 : _row$original5$auditD.createdTime) : "");
           }
         }, {
           Header: t("WT_FILLING_POINT"),
           accessor: row => getFillingPointDisplayValue(row),
           id: "fillingPoint",
+          minWidth: 250,
           Cell: ({
             row
           }) => {
@@ -8569,7 +8748,9 @@ const VendorInbox = props => {
               option: allFillingPoints,
               select: value => onFillingPointSelect(row, value),
               style: {
-                textAlign: "left"
+                textAlign: "left",
+                width: "100%",
+                minWidth: "250px"
               },
               optionKey: "fillingPointName",
               t: t
@@ -8616,13 +8797,13 @@ const VendorInbox = props => {
           Cell: ({
             row
           }) => {
-            var _row$original5, _row$original5$dsoDet;
+            var _row$original6, _row$original6$dsoDet;
             return /*#__PURE__*/React.createElement(ToggleSwitch, {
               style: {
                 display: "flex",
                 justifyContent: "left"
               },
-              value: ((_row$original5 = row.original) === null || _row$original5 === void 0 ? void 0 : (_row$original5$dsoDet = _row$original5.dsoDetails) === null || _row$original5$dsoDet === void 0 ? void 0 : _row$original5$dsoDet.status) === "DISABLED" ? false : true,
+              value: ((_row$original6 = row.original) === null || _row$original6 === void 0 ? void 0 : (_row$original6$dsoDet = _row$original6.dsoDetails) === null || _row$original6$dsoDet === void 0 ? void 0 : _row$original6$dsoDet.status) === "DISABLED" ? false : true,
               onChange: () => onVendorUpdate(row),
               name: `switch-${row.id}`
             });
@@ -8633,8 +8814,8 @@ const VendorInbox = props => {
           Cell: ({
             row
           }) => {
-            var _row$original6, _additionalVendorData;
-            const vendorId = (_row$original6 = row.original) === null || _row$original6 === void 0 ? void 0 : _row$original6.id;
+            var _row$original7, _additionalVendorData;
+            const vendorId = (_row$original7 = row.original) === null || _row$original7 === void 0 ? void 0 : _row$original7.id;
             if (!additionalVendorData) {
               return /*#__PURE__*/React.createElement("span", null, "Loading...");
             }
@@ -8672,21 +8853,30 @@ const VendorInbox = props => {
           Cell: ({
             row
           }) => {
-            var _row$original7, _row$original7$auditD, _row$original8, _row$original8$auditD;
-            return GetCell((_row$original7 = row.original) !== null && _row$original7 !== void 0 && (_row$original7$auditD = _row$original7.auditDetails) !== null && _row$original7$auditD !== void 0 && _row$original7$auditD.createdTime ? Digit.DateUtils.ConvertEpochToDate((_row$original8 = row.original) === null || _row$original8 === void 0 ? void 0 : (_row$original8$auditD = _row$original8.auditDetails) === null || _row$original8$auditD === void 0 ? void 0 : _row$original8$auditD.createdTime) : "");
+            var _row$original8, _row$original8$auditD, _row$original9, _row$original9$auditD;
+            return GetCell((_row$original8 = row.original) !== null && _row$original8 !== void 0 && (_row$original8$auditD = _row$original8.auditDetails) !== null && _row$original8$auditD !== void 0 && _row$original8$auditD.createdTime ? Digit.DateUtils.ConvertEpochToDate((_row$original9 = row.original) === null || _row$original9 === void 0 ? void 0 : (_row$original9$auditD = _row$original9.auditDetails) === null || _row$original9$auditD === void 0 ? void 0 : _row$original9$auditD.createdTime) : "");
           }
         }, {
-          Header: t("ES_FSM_REGISTRY_INBOX_VENDOR_NAME"),
-          id: "vendorName",
+          Header: "Map Vendor",
+          id: "mapVendor",
           accessor: row => {
-            var _row$vendor;
-            return ((_row$vendor = row.vendor) === null || _row$vendor === void 0 ? void 0 : _row$vendor.name) || "NA";
+            var _row$vendor2, _row$vendorData2;
+            return ((_row$vendor2 = row.vendor) === null || _row$vendor2 === void 0 ? void 0 : _row$vendor2.name) || ((_row$vendorData2 = row.vendorData) === null || _row$vendorData2 === void 0 ? void 0 : _row$vendorData2.name) || "NA";
           },
           Cell: ({
             row
           }) => {
-            var _row$original9, _row$original9$vendor;
-            return GetCell(((_row$original9 = row.original) === null || _row$original9 === void 0 ? void 0 : (_row$original9$vendor = _row$original9.vendor) === null || _row$original9$vendor === void 0 ? void 0 : _row$original9$vendor.name) || "NA");
+            return /*#__PURE__*/React.createElement(Dropdown$2, {
+              className: "fsm-registry-dropdown",
+              selected: getSelectedVendorOption(row.original, vendors),
+              option: vendors,
+              select: value => onVehicleVendorSelect(row, value),
+              style: {
+                textAlign: "left"
+              },
+              optionKey: "name",
+              t: t
+            });
           }
         }, {
           Header: t("ES_VENDOR_INBOX_SERVICE_TYPE"),
@@ -8723,44 +8913,54 @@ const VendorInbox = props => {
           Header: t("WT_FILLING_POINT"),
           accessor: row => getFillingPointDisplayValue(row),
           id: "fillingPoint",
+          minWidth: 250,
           Cell: ({
             row
           }) => {
+            const selectedVendor = getSelectedVendorOption(row.original, vendors);
+            const vendorFillingPoints = getVendorFillingPoints(selectedVendor);
             return /*#__PURE__*/React.createElement(Dropdown$2, {
               className: "fsm-registry-dropdown",
-              selected: getSelectedFillingPointOption(row.original, allFillingPoints),
-              option: allFillingPoints,
+              selected: getSelectedFillingPointOption(row.original, vendorFillingPoints),
+              option: vendorFillingPoints,
               select: value => onVehicleFillingPointSelect(row, value),
               style: {
-                textAlign: "left"
+                textAlign: "left",
+                width: "100%",
+                minWidth: "250px"
               },
               optionKey: "fillingPointName",
-              t: t
+              t: t,
+              disable: !selectedVendor || !vendorFillingPoints.length
             });
           }
         }, {
           Header: t("ES_FSM_REGISTRY_SELECT_DRIVER"),
           id: "driver",
           accessor: row => {
-            var _row$driverData, _row$driver;
-            return ((_row$driverData = row.driverData) === null || _row$driverData === void 0 ? void 0 : _row$driverData.name) || ((_row$driver = row.driver) === null || _row$driver === void 0 ? void 0 : _row$driver.name) || "NA";
+            var _row$driverData2, _row$driver2;
+            return ((_row$driverData2 = row.driverData) === null || _row$driverData2 === void 0 ? void 0 : _row$driverData2.name) || ((_row$driver2 = row.driver) === null || _row$driver2 === void 0 ? void 0 : _row$driver2.name) || "NA";
           },
+          minWidth: 250,
           Cell: ({
             row
           }) => {
+            const selectedVendor = getSelectedVendorOption(row.original, vendors);
+            const selectedFillingPoint = getSelectedFillingPointOption(row.original, getVendorFillingPoints(selectedVendor));
+            const availableDrivers = getVendorDriversForFillingPoint(selectedVendor, selectedFillingPoint);
             return /*#__PURE__*/React.createElement(Dropdown$2, {
               className: "fsm-registry-dropdown",
-              selected: (drivers === null || drivers === void 0 ? void 0 : drivers.find(driver => {
-                var _row$original$driverD, _row$original$driver;
-                return (((_row$original$driverD = row.original.driverData) === null || _row$original$driverD === void 0 ? void 0 : _row$original$driverD.id) || ((_row$original$driver = row.original.driver) === null || _row$original$driver === void 0 ? void 0 : _row$original$driver.id)) === driver.id;
-              })) || row.original.driverData || row.original.driver,
-              option: drivers,
+              selected: getSelectedDriverOption(row.original, availableDrivers),
+              option: availableDrivers,
               select: value => onDriverSelect(row, value),
               optionKey: "name",
               t: t,
               style: {
-                textAlign: "left"
-              }
+                textAlign: "left",
+                width: "100%",
+                minWidth: "250px"
+              },
+              disable: !selectedFillingPoint || !availableDrivers.length
             });
           }
         }, {
@@ -8825,9 +9025,10 @@ const VendorInbox = props => {
           Header: t("ES_FSM_REGISTRY_INBOX_VENDOR_NAME"),
           id: "vendorName",
           accessor: row => {
-            var _row$vendorData, _row$vendor2;
-            return ((_row$vendorData = row.vendorData) === null || _row$vendorData === void 0 ? void 0 : _row$vendorData.name) || ((_row$vendor2 = row.vendor) === null || _row$vendor2 === void 0 ? void 0 : _row$vendor2.name) || "NA";
+            var _row$vendorData3, _row$vendor3;
+            return ((_row$vendorData3 = row.vendorData) === null || _row$vendorData3 === void 0 ? void 0 : _row$vendorData3.name) || ((_row$vendor3 = row.vendor) === null || _row$vendor3 === void 0 ? void 0 : _row$vendor3.name) || "NA";
           },
+          minWidth: 250,
           Cell: ({
             row
           }) => {
@@ -8840,7 +9041,9 @@ const VendorInbox = props => {
               option: vendors,
               select: value => onVendorSelect(row, value),
               style: {
-                textAlign: "left"
+                textAlign: "left",
+                width: "100%",
+                minWidth: "250px"
               },
               optionKey: "name",
               t: t
@@ -8911,10 +9114,10 @@ const VendorInbox = props => {
             return row !== null && row !== void 0 && (_row$auditDetails3 = row.auditDetails) !== null && _row$auditDetails3 !== void 0 && _row$auditDetails3.createdTime ? Digit.DateUtils.ConvertEpochToDate(row === null || row === void 0 ? void 0 : (_row$auditDetails4 = row.auditDetails) === null || _row$auditDetails4 === void 0 ? void 0 : _row$auditDetails4.createdTime) : "";
           }
         }, {
-          Header: t("ES_FSM_REGISTRY_INBOX_VENDOR_NAME"),
+          Header: "Map Vendor",
           exportAccessor: row => {
-            var _row$vendor3;
-            return (row === null || row === void 0 ? void 0 : (_row$vendor3 = row.vendor) === null || _row$vendor3 === void 0 ? void 0 : _row$vendor3.name) || "NA";
+            var _row$vendor4, _row$vendorData4;
+            return (row === null || row === void 0 ? void 0 : (_row$vendor4 = row.vendor) === null || _row$vendor4 === void 0 ? void 0 : _row$vendor4.name) || (row === null || row === void 0 ? void 0 : (_row$vendorData4 = row.vendorData) === null || _row$vendorData4 === void 0 ? void 0 : _row$vendorData4.name) || "NA";
           }
         }, {
           Header: t("ES_VENDOR_INBOX_SERVICE_TYPE"),
@@ -8928,8 +9131,8 @@ const VendorInbox = props => {
         }, {
           Header: t("ES_FSM_REGISTRY_SELECT_DRIVER"),
           exportAccessor: row => {
-            var _row$driverData2, _row$driver2;
-            return (row === null || row === void 0 ? void 0 : (_row$driverData2 = row.driverData) === null || _row$driverData2 === void 0 ? void 0 : _row$driverData2.name) || (row === null || row === void 0 ? void 0 : (_row$driver2 = row.driver) === null || _row$driver2 === void 0 ? void 0 : _row$driver2.name) || "NA";
+            var _row$driverData3, _row$driver3;
+            return (row === null || row === void 0 ? void 0 : (_row$driverData3 = row.driverData) === null || _row$driverData3 === void 0 ? void 0 : _row$driverData3.name) || (row === null || row === void 0 ? void 0 : (_row$driver3 = row.driver) === null || _row$driver3 === void 0 ? void 0 : _row$driver3.name) || "NA";
           }
         }, {
           Header: t("ES_FSM_REGISTRY_INBOX_ENABLED"),
@@ -8954,8 +9157,8 @@ const VendorInbox = props => {
         }, {
           Header: t("ES_FSM_REGISTRY_INBOX_VENDOR_NAME"),
           exportAccessor: row => {
-            var _row$vendorData2, _row$vendor4;
-            return (row === null || row === void 0 ? void 0 : (_row$vendorData2 = row.vendorData) === null || _row$vendorData2 === void 0 ? void 0 : _row$vendorData2.name) || (row === null || row === void 0 ? void 0 : (_row$vendor4 = row.vendor) === null || _row$vendor4 === void 0 ? void 0 : _row$vendor4.name) || "NA";
+            var _row$vendorData5, _row$vendor5;
+            return (row === null || row === void 0 ? void 0 : (_row$vendorData5 = row.vendorData) === null || _row$vendorData5 === void 0 ? void 0 : _row$vendorData5.name) || (row === null || row === void 0 ? void 0 : (_row$vendor5 = row.vendor) === null || _row$vendor5 === void 0 ? void 0 : _row$vendor5.name) || "NA";
           }
         }, {
           Header: t("ES_FSM_REGISTRY_INBOX_ENABLED"),