@djb25/digit-ui-module-wt 1.0.32 → 1.0.34

package/dist/index.modern.js

@@ -1,5 +1,5 @@
-import { TickMark, ArrowDown, MobileNumber, CardLabelError, TextInput, Dropdown, DatePicker, SubmitBar, Card, Table, Loader, Toast, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, HomeIcon, KeyNote, Modal, CardHeader, FormStep, CardLabel, RadioButtons, UploadFile, TextArea, CheckBox, CardSubHeader, StatusTable, Row, GenericFileIcon, LinkButton, EditIcon, Banner, CHBIcon, EmployeeModuleCard, CloseSvg, Label, LinkLabel, ActionBar, DetailsCard, SearchAction, FilterAction, PopUp, ShippingTruck, CustomNameDropdown, MultiSelectDropdown, CollapsibleCardPage as CollapsibleCardPage$1, LabelFieldPair, AddIcon, Menu, LayoutWrapper, Header, TelePhone, DisplayPhotos, CardSectionHeader, CheckPoint, ConnectingCheckPoints, MultiLink, Localities, RemoveableTag, FormComposer, PDFSvg, MultiUploadWrapper, Close as Close$g, BreakLine, InfoBannerIcon, ViewsIcon, ButtonSelector, LocationIcon, CitizenHomeCard, PTIcon, ApplicantDetails, AddressDetails } from '@djb25/digit-ui-react-components';
-import React, { useRef, useEffect, useState, useMemo, useCallback, Fragment } from 'react';
+import { TickMark, ArrowDown, MobileNumber, CardLabelError, TextInput, Dropdown, DatePicker, SubmitBar, Card, Table, Loader, Toast, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, CitizenHomeCard, CHBIcon, PropertyHouse, HomeIcon, KeyNote, Modal, CardHeader, FormStep, CardLabel, RadioButtons, UploadFile, TextArea, CheckBox, CardSubHeader, StatusTable, Row, GenericFileIcon, LinkButton, EditIcon, Banner, EmployeeModuleCard, CloseSvg, Label, LinkLabel, ActionBar, DetailsCard, SearchAction, FilterAction, PopUp, ShippingTruck, CustomNameDropdown, MultiSelectDropdown, CollapsibleCardPage as CollapsibleCardPage$1, LabelFieldPair, AddIcon, Menu, CheckSvg, LayoutWrapper, Header, TelePhone, DisplayPhotos, CardSectionHeader, CheckPoint, ConnectingCheckPoints, MultiLink, Localities, RemoveableTag, FormComposer, PDFSvg, MultiUploadWrapper, Close as Close$g, BreakLine, InfoBannerIcon, ViewsIcon, ButtonSelector, LocationIcon, PTIcon, ApplicantDetails, AddressDetails } from '@djb25/digit-ui-react-components';
+import React, { useRef, useEffect, useState, useMemo, useCallback, Fragment, useReducer } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useRouteMatch, useHistory, Switch, Route, Redirect, Link, useParams } from 'react-router-dom';
 import { useQueryClient } from 'react-query';
@@ -1219,6 +1219,7 @@ const App = () => {
     t
   } = useTranslation();
   const location = useLocation();
+  const history = useHistory();
   const {
     path,
     url,
@@ -1230,8 +1231,6 @@ const App = () => {
   const TPApplicationDetails = (_Digit4 = Digit) === null || _Digit4 === void 0 ? void 0 : (_Digit4$ComponentRegi = _Digit4.ComponentRegistryService) === null || _Digit4$ComponentRegi === void 0 ? void 0 : _Digit4$ComponentRegi.getComponent("TPApplicationDetails");
   const WTMyApplications = (_Digit5 = Digit) === null || _Digit5 === void 0 ? void 0 : (_Digit5$ComponentRegi = _Digit5.ComponentRegistryService) === null || _Digit5$ComponentRegi === void 0 ? void 0 : _Digit5$ComponentRegi.getComponent("WTMyApplications");
   const Inbox = Digit.ComponentRegistryService.getComponent("WTEmpInbox");
-  const WTCard = Digit.ComponentRegistryService.getComponent("WTCitizenCard");
-  const MTCard = Digit.ComponentRegistryService.getComponent("MTCitizenCard");
   const ApplicationDetails = (_Digit6 = Digit) === null || _Digit6 === void 0 ? void 0 : (_Digit6$ComponentRegi = _Digit6.ComponentRegistryService) === null || _Digit6$ComponentRegi === void 0 ? void 0 : _Digit6$ComponentRegi.getComponent("ApplicationDetails");
   const getDynamicBreadcrumbs = () => {
     const pathname = location.pathname;
@@ -1355,9 +1354,39 @@ const App = () => {
     })
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/wt-Vendor`,
-    component: () => Digit.UserService.hasAccess(["WT_VENDOR"]) ? /*#__PURE__*/React.createElement(WTCard, {
-      parentRoute: path
-    }) : /*#__PURE__*/React.createElement(Redirect, {
+    component: () => Digit.UserService.hasAccess(["WT_VENDOR"]) ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        gap: "24px",
+        flexWrap: "wrap",
+        width: "100%",
+        padding: "8px 0"
+      }
+    }, /*#__PURE__*/React.createElement(CitizenHomeCard, {
+      header: t("WT_MODULE_NAME"),
+      links: [{
+        i18nKey: t("ES_COMMON_INBOX"),
+        link: `${APPLICATION_PATH}/citizen/wt/inbox`
+      }, {
+        i18nKey: t("ES_COMMON_APPLICATION_SEARCH"),
+        link: `${APPLICATION_PATH}/citizen/wt/my-bookings`
+      }, {
+        i18nKey: t("WT_REQUEST_TANKER"),
+        link: `${APPLICATION_PATH}/citizen/wt/request-service`
+      }],
+      Icon: () => /*#__PURE__*/React.createElement(CHBIcon, {
+        className: "fill-path-primary-main"
+      })
+    }), /*#__PURE__*/React.createElement(CitizenHomeCard, {
+      header: t("TITLE_VENDOR_MANAGEMENT"),
+      links: [{
+        i18nKey: t("SEARCH_VENDOR"),
+        link: `${APPLICATION_PATH}/citizen/vendor/search-vendor`
+      }],
+      Icon: () => /*#__PURE__*/React.createElement(PropertyHouse, {
+        className: "fill-path-primary-main"
+      })
+    })) : /*#__PURE__*/React.createElement(Redirect, {
       to: {
         pathname: `${APPLICATION_PATH}/citizen/login`,
         state: {
@@ -1368,9 +1397,39 @@ const App = () => {
     })
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/mt-Vendor`,
-    component: () => Digit.UserService.hasAccess(["MT_VENDOR"]) ? /*#__PURE__*/React.createElement(MTCard, {
-      parentRoute: path
-    }) : /*#__PURE__*/React.createElement(Redirect, {
+    component: () => Digit.UserService.hasAccess(["MT_VENDOR"]) ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        gap: "24px",
+        flexWrap: "wrap",
+        width: "100%",
+        padding: "8px 0"
+      }
+    }, /*#__PURE__*/React.createElement(CitizenHomeCard, {
+      header: t("ACTION_TEST_MT"),
+      links: [{
+        i18nKey: t("ES_COMMON_INBOX"),
+        link: `${APPLICATION_PATH}/citizen/wt/mt/inbox`
+      }, {
+        i18nKey: t("ES_COMMON_APPLICATION_SEARCH"),
+        link: `${APPLICATION_PATH}/citizen/wt/mt/my-bookings`
+      }, {
+        i18nKey: t("MT_REQUEST_TANKER"),
+        link: `${APPLICATION_PATH}/citizen/wt/request-service`
+      }],
+      Icon: () => /*#__PURE__*/React.createElement(CHBIcon, {
+        className: "fill-path-primary-main"
+      })
+    }), /*#__PURE__*/React.createElement(CitizenHomeCard, {
+      header: t("TITLE_VENDOR_MANAGEMENT"),
+      links: [{
+        i18nKey: t("SEARCH_VENDOR"),
+        link: `${APPLICATION_PATH}/citizen/vendor/search-vendor`
+      }],
+      Icon: () => /*#__PURE__*/React.createElement(PropertyHouse, {
+        className: "fill-path-primary-main"
+      })
+    })) : /*#__PURE__*/React.createElement(Redirect, {
       to: {
         pathname: `${APPLICATION_PATH}/citizen/login`,
         state: {
@@ -7578,69 +7637,238 @@ const SearchFillingPointAddress = () => {
   }));
 };
 
-const SelectServiceType = ({
-  config,
+const VendorMultiSelectDropdown = ({
+  options,
+  optionsKey,
+  selected: _selected = [],
   onSelect,
-  t,
-  userType,
-  formData
+  defaultLabel: _defaultLabel = "",
+  defaultUnit: _defaultUnit = "",
+  BlockNumber: _BlockNumber = 1,
+  isOBPSMultiple: _isOBPSMultiple = false,
+  props: _props = {},
+  isPropsNeeded: _isPropsNeeded = false,
+  ServerStyle: _ServerStyle = {},
+  isSurvey: _isSurvey = false,
+  disable: _disable = false
 }) => {
-  const tenantId = Digit.ULBService.getCurrentTenantId();
-  const stateId = Digit.ULBService.getStateId();
-  const [serviceTypes, setserviceTypes] = useState(formData === null || formData === void 0 ? void 0 : formData.serviceType);
-  const [formattedServiceTypes, setFormattedServiceTypes] = useState([]);
+  const [active, setActive] = useState(false);
+  const [searchQuery, setSearchQuery] = useState();
+  const [optionIndex, setOptionIndex] = useState(-1);
+  const dropdownRef = useRef();
   const {
-    data: ServiceType,
-    isLoading
-  } = Digit.Hooks.useCustomMDMS(tenantId, "tenant", [{
-    name: "citymodule"
-  }], {
-    select: data => {
-      var _data$tenant;
-      return data === null || data === void 0 ? void 0 : (_data$tenant = data.tenant) === null || _data$tenant === void 0 ? void 0 : _data$tenant.citymodule;
+    t
+  } = useTranslation();
+  function reducer(state, action) {
+    var _action$payload, _action$payload$;
+    switch (action.type) {
+      case "ADD_TO_SELECTED_EVENT_QUEUE":
+        return [...state, {
+          [optionsKey]: (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : (_action$payload$ = _action$payload[1]) === null || _action$payload$ === void 0 ? void 0 : _action$payload$[optionsKey],
+          propsData: action.payload
+        }];
+      case "REMOVE_FROM_SELECTED_EVENT_QUEUE":
+        return state.filter(e => {
+          var _action$payload2, _action$payload2$;
+          return (e === null || e === void 0 ? void 0 : e[optionsKey]) !== ((_action$payload2 = action.payload) === null || _action$payload2 === void 0 ? void 0 : (_action$payload2$ = _action$payload2[1]) === null || _action$payload2$ === void 0 ? void 0 : _action$payload2$[optionsKey]);
+        });
+      case "REPLACE_COMPLETE_STATE":
+        return action.payload;
+      default:
+        return state;
     }
-  });
+  }
   useEffect(() => {
-    if (ServiceType) {
-      const transformedData = ServiceType.map(services => ({
-        i18nKey: `${services.code}`,
-        code: `${services.code}`,
-        value: `${services.name}`
-      }));
-      setFormattedServiceTypes(transformedData);
-      if (!serviceTypes || serviceTypes.code === "WT") {
-        const defaultWT = transformedData.find(item => item.code === "WT");
-        if (defaultWT) {
-          setserviceTypes(defaultWT);
-          if ((userType === null || userType === void 0 ? void 0 : userType.toLowerCase()) === "employee") {
-            onSelect(config.key, defaultWT);
-          }
-        }
+    dispatch({
+      type: "REPLACE_COMPLETE_STATE",
+      payload: fnToSelectOptionThroughProvidedSelection(_selected)
+    });
+  }, [_selected === null || _selected === void 0 ? void 0 : _selected.map(e => e === null || e === void 0 ? void 0 : e[optionsKey]).join(",")]);
+  function fnToSelectOptionThroughProvidedSelection(selected) {
+    return selected === null || selected === void 0 ? void 0 : selected.map(e => ({
+      [optionsKey]: e === null || e === void 0 ? void 0 : e[optionsKey],
+      propsData: [null, e]
+    }));
+  }
+  const [alreadyQueuedSelectedState, dispatch] = useReducer(reducer, _selected, fnToSelectOptionThroughProvidedSelection);
+  function handleOutsideClickAndSubmitSimultaneously() {
+    setActive(false);
+  }
+  Digit.Hooks.useClickOutside(dropdownRef, handleOutsideClickAndSubmitSimultaneously, active, {
+    capture: true
+  });
+  const filtOptns = (searchQuery === null || searchQuery === void 0 ? void 0 : searchQuery.length) > 0 ? options.filter(option => t(option[optionsKey] && typeof option[optionsKey] == "string" && option[optionsKey].toUpperCase()).toLowerCase().indexOf(searchQuery.toLowerCase()) >= 0) : options;
+  function onSearch(e) {
+    setSearchQuery(e.target.value);
+  }
+  function onSelectToAddToQueue(...args) {
+    const isChecked = args[0].target.checked;
+    const option = args[1];
+    if (isChecked) {
+      dispatch({
+        type: "ADD_TO_SELECTED_EVENT_QUEUE",
+        payload: [...args]
+      });
+      const newSelected = [...alreadyQueuedSelectedState, {
+        [optionsKey]: option[optionsKey],
+        propsData: args
+      }];
+      onSelect(newSelected.map(e => e.propsData), _props);
+    } else {
+      dispatch({
+        type: "REMOVE_FROM_SELECTED_EVENT_QUEUE",
+        payload: [...args]
+      });
+      const newSelected = alreadyQueuedSelectedState.filter(e => (e === null || e === void 0 ? void 0 : e[optionsKey]) !== option[optionsKey]);
+      onSelect(newSelected.map(e => e.propsData), _props);
+    }
+  }
+  const keyChange = e => {
+    if (e.key == "ArrowDown") {
+      setOptionIndex(state => state + 1 == filtOptns.length ? 0 : state + 1);
+      if (optionIndex + 1 == filtOptns.length) {
+        var _e$target, _e$target$parentEleme, _e$target$parentEleme2, _e$target$parentEleme3, _e$target$parentEleme4, _e$target$parentEleme5;
+        e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : (_e$target$parentEleme = _e$target.parentElement) === null || _e$target$parentEleme === void 0 ? void 0 : (_e$target$parentEleme2 = _e$target$parentEleme.parentElement) === null || _e$target$parentEleme2 === void 0 ? void 0 : (_e$target$parentEleme3 = _e$target$parentEleme2.children) === null || _e$target$parentEleme3 === void 0 ? void 0 : (_e$target$parentEleme4 = _e$target$parentEleme3.namedItem("jk-dropdown-unique")) === null || _e$target$parentEleme4 === void 0 ? void 0 : (_e$target$parentEleme5 = _e$target$parentEleme4.scrollTo) === null || _e$target$parentEleme5 === void 0 ? void 0 : _e$target$parentEleme5.call(_e$target$parentEleme4, 0, 0);
+      } else {
+        var _e$target2, _e$target2$parentElem, _e$target2$parentElem2, _e$target2$parentElem3, _e$target2$parentElem4, _e$target2$parentElem5;
+        optionIndex > 2 && (e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : (_e$target2$parentElem = _e$target2.parentElement) === null || _e$target2$parentElem === void 0 ? void 0 : (_e$target2$parentElem2 = _e$target2$parentElem.parentElement) === null || _e$target2$parentElem2 === void 0 ? void 0 : (_e$target2$parentElem3 = _e$target2$parentElem2.children) === null || _e$target2$parentElem3 === void 0 ? void 0 : (_e$target2$parentElem4 = _e$target2$parentElem3.namedItem("jk-dropdown-unique")) === null || _e$target2$parentElem4 === void 0 ? void 0 : (_e$target2$parentElem5 = _e$target2$parentElem4.scrollBy) === null || _e$target2$parentElem5 === void 0 ? void 0 : _e$target2$parentElem5.call(_e$target2$parentElem4, 0, 45));
+      }
+      e.preventDefault();
+    } else if (e.key == "ArrowUp") {
+      setOptionIndex(state => state !== 0 ? state - 1 : filtOptns.length - 1);
+      if (optionIndex === 0) {
+        var _e$target3, _e$target3$parentElem, _e$target3$parentElem2, _e$target3$parentElem3, _e$target3$parentElem4, _e$target3$parentElem5;
+        e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : (_e$target3$parentElem = _e$target3.parentElement) === null || _e$target3$parentElem === void 0 ? void 0 : (_e$target3$parentElem2 = _e$target3$parentElem.parentElement) === null || _e$target3$parentElem2 === void 0 ? void 0 : (_e$target3$parentElem3 = _e$target3$parentElem2.children) === null || _e$target3$parentElem3 === void 0 ? void 0 : (_e$target3$parentElem4 = _e$target3$parentElem3.namedItem("jk-dropdown-unique")) === null || _e$target3$parentElem4 === void 0 ? void 0 : (_e$target3$parentElem5 = _e$target3$parentElem4.scrollTo) === null || _e$target3$parentElem5 === void 0 ? void 0 : _e$target3$parentElem5.call(_e$target3$parentElem4, 100000, 100000);
+      } else {
+        var _e$target4, _e$target4$parentElem, _e$target4$parentElem2, _e$target4$parentElem3, _e$target4$parentElem4, _e$target4$parentElem5;
+        optionIndex > 2 && (e === null || e === void 0 ? void 0 : (_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : (_e$target4$parentElem = _e$target4.parentElement) === null || _e$target4$parentElem === void 0 ? void 0 : (_e$target4$parentElem2 = _e$target4$parentElem.parentElement) === null || _e$target4$parentElem2 === void 0 ? void 0 : (_e$target4$parentElem3 = _e$target4$parentElem2.children) === null || _e$target4$parentElem3 === void 0 ? void 0 : (_e$target4$parentElem4 = _e$target4$parentElem3.namedItem("jk-dropdown-unique")) === null || _e$target4$parentElem4 === void 0 ? void 0 : (_e$target4$parentElem5 = _e$target4$parentElem4.scrollBy) === null || _e$target4$parentElem5 === void 0 ? void 0 : _e$target4$parentElem5.call(_e$target4$parentElem4, 0, -45));
       }
+      e.preventDefault();
+    } else if (e.key == "Enter") {
+      onSelectToAddToQueue(e, filtOptns[optionIndex]);
+    }
+  };
+  const MenuItem = ({
+    option,
+    index
+  }) => /*#__PURE__*/React.createElement("div", {
+    key: index,
+    style: _isOBPSMultiple ? index % 2 !== 0 ? {
+      background: "#EEEEEE"
+    } : {} : {}
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    value: option[optionsKey],
+    checked: alreadyQueuedSelectedState.find(selectedOption => selectedOption[optionsKey] === option[optionsKey]) ? true : false,
+    onChange: e => _isPropsNeeded ? onSelectToAddToQueue(e, option, _props) : _isOBPSMultiple ? onSelectToAddToQueue(e, option, _BlockNumber) : onSelectToAddToQueue(e, option),
+    style: {
+      minWidth: "24px",
+      width: "100%"
     }
-  }, [ServiceType]);
-  const selectServiceType = value => {
-    setserviceTypes(value);
-    if ((userType === null || userType === void 0 ? void 0 : userType.toLowerCase()) === "employee") {
-      onSelect(config.key, value);
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "custom-checkbox"
+  }, /*#__PURE__*/React.createElement(CheckSvg, {
+    style: {
+      innerWidth: "24px",
+      width: "24px"
     }
+  })), /*#__PURE__*/React.createElement("p", {
+    className: "label",
+    style: index === optionIndex ? {
+      opacity: 1,
+      backgroundColor: "rgba(238, 238, 238, var(--bg-opacity))"
+    } : {}
+  }, t(option[optionsKey] && typeof option[optionsKey] == "string" && option[optionsKey])));
+  const Menu = () => {
+    const filteredOptions = (searchQuery === null || searchQuery === void 0 ? void 0 : searchQuery.length) > 0 ? options.filter(option => t(option[optionsKey] && typeof option[optionsKey] == "string" && option[optionsKey].toUpperCase()).toLowerCase().indexOf(searchQuery.toLowerCase()) >= 0) : options;
+    const isAllSelected = (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0 && (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.every(option => alreadyQueuedSelectedState.find(selectedOption => selectedOption[optionsKey] === option[optionsKey])));
+    const onSelectAll = e => {
+      const isChecked = e.target.checked;
+      if (isChecked) {
+        const allOptions = filteredOptions.map(option => ({
+          [optionsKey]: option[optionsKey],
+          propsData: [null, option]
+        }));
+        dispatch({
+          type: "REPLACE_COMPLETE_STATE",
+          payload: allOptions
+        });
+        onSelect(allOptions.map(e => e.propsData));
+      } else {
+        dispatch({
+          type: "REPLACE_COMPLETE_STATE",
+          payload: []
+        });
+        onSelect([]);
+      }
+    };
+    return /*#__PURE__*/React.createElement(React.Fragment, null, (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0 && /*#__PURE__*/React.createElement("div", {
+      key: "select-all",
+      style: {
+        borderBottom: "1px solid #eee",
+        display: "flex",
+        alignItems: "center"
+      }
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "checkbox",
+      checked: isAllSelected,
+      onChange: onSelectAll,
+      style: {
+        minWidth: "24px"
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "custom-checkbox"
+    }, /*#__PURE__*/React.createElement(CheckSvg, {
+      style: {
+        innerWidth: "24px",
+        width: "24px"
+      }
+    })), /*#__PURE__*/React.createElement("p", {
+      className: "label",
+      style: {
+        fontWeight: "bold",
+        marginLeft: "8px"
+      }
+    }, t("WT_SELECT_ALL"))), filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map((option, index) => /*#__PURE__*/React.createElement(MenuItem, {
+      option: option,
+      key: index,
+      index: index
+    })));
   };
-  if (isLoading) {
-    return /*#__PURE__*/React.createElement(Loader, null);
-  }
-  if ((userType === null || userType === void 0 ? void 0 : userType.toLowerCase()) === "employee") {
-    return /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, config.label), /*#__PURE__*/React.createElement(Dropdown, {
-      className: "payment-form-text-input-correction",
-      isMandatory: config.isMandatory,
-      selected: serviceTypes,
-      option: formattedServiceTypes,
-      select: selectServiceType,
-      optionKey: "i18nKey",
-      disable: config.disable,
-      t: t
-    }));
-  }
-  return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `multi-select-dropdown-wrap ${_disable ? "disabled" : ""}`,
+    ref: dropdownRef,
+    style: _disable ? {
+      pointerEvents: "none",
+      opacity: 0.5
+    } : {}
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `master${active ? `-active` : ``}`
+  }, /*#__PURE__*/React.createElement("input", {
+    className: "cursorPointer",
+    type: "text",
+    onKeyDown: keyChange,
+    onFocus: () => !_disable && setActive(true),
+    value: searchQuery,
+    onChange: onSearch,
+    disabled: _disable
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "label"
+  }, /*#__PURE__*/React.createElement("p", {
+    title: (_selected === null || _selected === void 0 ? void 0 : _selected.length) > 0 ? _selected.map(ob => t(ob[optionsKey])).join(', ') : _defaultLabel,
+    style: {
+      whiteSpace: "normal",
+      wordBreak: "break-word"
+    }
+  }, (_selected === null || _selected === void 0 ? void 0 : _selected.length) > 0 ? `${_isSurvey ? _selected === null || _selected === void 0 ? void 0 : _selected.filter(ob => (ob === null || ob === void 0 ? void 0 : ob.i18nKey) !== undefined).length : _selected.length} ${_defaultUnit}` : _defaultLabel), /*#__PURE__*/React.createElement(ArrowDown, null))), active ? /*#__PURE__*/React.createElement("div", {
+    className: "server",
+    id: "jk-dropdown-unique",
+    style: {
+      ..._ServerStyle,
+      maxHeight: "300px",
+      overflowY: "auto"
+    }
+  }, /*#__PURE__*/React.createElement(Menu, null)) : null);
 };
 
 const VendorAssign = ({
@@ -7672,9 +7900,22 @@ const VendorAssign = ({
       select: data => (data === null || data === void 0 ? void 0 : data.vendor) || []
     }
   });
+  const [selectedFillingPoints, setSelectedFillingPoints] = useState([]);
+  const {
+    data: allFillingPointsData
+  } = Digit.Hooks.wt.useFillPointSearch({
+    tenantId,
+    filters: {
+      status: "ACTIVE"
+    }
+  });
+  const allFillingPoints = (allFillingPointsData === null || allFillingPointsData === void 0 ? void 0 : allFillingPointsData.fillingPoints) || [];
   const {
     mutate: createWorkOrder
   } = Digit.Hooks.wt.useVendorWorkOrderCreate(tenantId);
+  const {
+    mutate: mapFixedFilling
+  } = Digit.Hooks.wt.useVendorFillingMap(tenantId);
   useEffect(() => {
     (async () => {
       setError(null);
@@ -7698,9 +7939,6 @@ const VendorAssign = ({
       }
     })();
   }, [file]);
-  const onServiceTypeSelect = (key, value) => {
-    setSelectedServiceType(value);
-  };
   const handleSubmit = () => {
     const payload = {
       vendorWorkOrder: {
@@ -7712,24 +7950,49 @@ const VendorAssign = ({
         fileStoreId: uploadedFile
       }
     };
-    createWorkOrder(payload, {
-      onSuccess: result => {
-        setShowToast({
-          isError: false,
-          label: t("ES_COMMON_SAVE_SUCCESS")
-        });
-        setTimeout(() => {
-          history.push("/digit-ui/employee/vendor/search-vendor");
-        }, 3000);
-      },
-      onError: err => {
-        var _err$response, _err$response$data, _err$response$data$Er, _err$response$data$Er2;
-        setShowToast({
-          isError: true,
-          label: (err === null || err === void 0 ? void 0 : (_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : (_err$response$data$Er = _err$response$data.Errors) === null || _err$response$data$Er === void 0 ? void 0 : (_err$response$data$Er2 = _err$response$data$Er[0]) === null || _err$response$data$Er2 === void 0 ? void 0 : _err$response$data$Er2.message) || t("ES_COMMON_ERROR_SAVING")
-        });
-      }
-    });
+    const doCreateWorkOrder = () => {
+      createWorkOrder(payload, {
+        onSuccess: result => {
+          setShowToast({
+            isError: false,
+            label: t("ES_COMMON_SAVE_SUCCESS")
+          });
+          setTimeout(() => {
+            history.push("/digit-ui/employee/vendor/search-vendor");
+          }, 3000);
+        },
+        onError: err => {
+          var _err$response, _err$response$data, _err$response$data$Er, _err$response$data$Er2;
+          setShowToast({
+            isError: true,
+            label: (err === null || err === void 0 ? void 0 : (_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : (_err$response$data$Er = _err$response$data.Errors) === null || _err$response$data$Er === void 0 ? void 0 : (_err$response$data$Er2 = _err$response$data$Er[0]) === null || _err$response$data$Er2 === void 0 ? void 0 : _err$response$data$Er2.message) || t("ES_COMMON_ERROR_SAVING")
+          });
+        }
+      });
+    };
+    if (selectedFillingPoints && selectedFillingPoints.length > 0) {
+      const mapPayload = {
+        mappings: selectedFillingPoints.map(val => ({
+          tenantId: tenantId,
+          fillingPointId: (val === null || val === void 0 ? void 0 : val.id) || (val === null || val === void 0 ? void 0 : val.bookingId) || (val === null || val === void 0 ? void 0 : val.fillingPointId),
+          vendorId: (vendor === null || vendor === void 0 ? void 0 : vendor.code) || (vendor === null || vendor === void 0 ? void 0 : vendor.id)
+        }))
+      };
+      mapFixedFilling(mapPayload, {
+        onSuccess: () => {
+          doCreateWorkOrder();
+        },
+        onError: err => {
+          var _err$response2, _err$response2$data, _err$response2$data$E, _err$response2$data$E2;
+          setShowToast({
+            isError: true,
+            label: (err === null || err === void 0 ? void 0 : (_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : (_err$response2$data$E = _err$response2$data.Errors) === null || _err$response2$data$E === void 0 ? void 0 : (_err$response2$data$E2 = _err$response2$data$E[0]) === null || _err$response2$data$E2 === void 0 ? void 0 : _err$response2$data$E2.message) || t("WT_FIXED_FILLING_MAPPING_FAIL")
+          });
+        }
+      });
+    } else {
+      doCreateWorkOrder();
+    }
   };
   const isMobile = window.Digit.Utils.browser.isMobile();
   const userType = Digit.UserService.getUser().info.type;
@@ -7737,7 +8000,7 @@ const VendorAssign = ({
     setUploadedFile(null);
     setFile(e.target.files[0]);
   }
-  const isFormDisabled = !vendor || !validFrom || !validTo || !selectedServiceType;
+  const isFormDisabled = !vendor || !validFrom || !validTo;
   return /*#__PURE__*/React.createElement("div", {
     className: "employee-form-section-wrapper"
   }, /*#__PURE__*/React.createElement(VerticalTimeline, {
@@ -7813,18 +8076,80 @@ const VendorAssign = ({
     },
     message: uploadedFile ? `1 ${t(`WT_ACTION_FILEUPLOADED`)}` : t(`WT_ACTION_NO_FILEUPLOADED`),
     error: error
-  })), /*#__PURE__*/React.createElement(SelectServiceType, {
-    t: t,
-    config: {
-      key: "serviceType",
-      label: t("WT_SELECT_SERVICE_TYPE")
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement(Label, null, `${t("WT_FILLING_POINT")}`), /*#__PURE__*/React.createElement(VendorMultiSelectDropdown, {
+    options: allFillingPoints,
+    optionsKey: "fillingPointName",
+    selected: selectedFillingPoints,
+    onSelect: values => {
+      const extractedValues = (values === null || values === void 0 ? void 0 : values.map(v => Array.isArray(v) ? v[1] : v)) || [];
+      setSelectedFillingPoints(extractedValues);
+    },
+    defaultLabel: t("SELECT_FILLING_POINT"),
+    defaultUnit: t("SELECTED"),
+    ServerStyle: {
+      textAlign: "left",
+      width: "100%",
+      minWidth: "250px",
+      backgroundColor: "#fff"
     },
-    onSelect: onServiceTypeSelect,
-    userType: userType,
-    formData: {
-      serviceType: selectedServiceType
+    isPropsNeeded: false
+  }), selectedFillingPoints && selectedFillingPoints.length > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "8px",
+      marginTop: "12px",
+      maxHeight: "120px",
+      overflowY: "auto",
+      padding: "4px"
     }
-  }))), /*#__PURE__*/React.createElement("div", {
+  }, selectedFillingPoints.map((fp, index) => /*#__PURE__*/React.createElement("div", {
+    key: index,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      backgroundColor: "#f4f4f4",
+      border: "1px solid #ddd",
+      borderRadius: "16px",
+      padding: "4px 12px",
+      fontSize: "14px",
+      fontWeight: "500"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginRight: "8px",
+      color: "#333",
+      maxWidth: "200px",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    }
+  }, t((fp === null || fp === void 0 ? void 0 : fp.fillingPointName) || (fp === null || fp === void 0 ? void 0 : fp.id))), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      const fpId = fp.id || fp.fillingPointId;
+      setSelectedFillingPoints(prev => prev.filter(p => (p.id || p.fillingPointId) !== fpId));
+    },
+    style: {
+      background: "transparent",
+      border: "none",
+      color: "#888",
+      cursor: "pointer",
+      fontSize: "16px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      marginLeft: "auto",
+      padding: "0"
+    }
+  }, "\xD7"))))))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       marginTop: "24px",