@djb25/digit-ui-module-vendor 1.0.1 → 1.0.3

package/dist/index.modern.js

@@ -1,5 +1,5 @@
-import { Header, SearchForm, SearchField, Dropdown as Dropdown$2, MobileNumber, CardLabelError, DatePicker as DatePicker$3, SubmitBar, Card, Table, Loader, Toast, AppContainer, PrivateRoute, EmployeeModuleCard, FormComposer, TickMark, FormStep, CardLabel, TextInput, LabelFieldPair, UploadFile, CardSubHeader, CardText, RadioOrSelect, ShippingTruck, CheckBox, RadioButtons, CloseSvg, Localities, RemoveableTag, ActionBar, ApplyFilterBar, AddIcon, Menu, Label, LinkLabel, ToggleSwitch, CardSectionHeader, StatusTable, Row, EditIcon, DeleteIcon, Modal, InfoIcon, CardHeader, LinkButton, Banner } from '@djb25/digit-ui-react-components';
-import React, { useEffect, useMemo, useCallback, useState, Fragment } from 'react';
+import { Header, SearchForm, SearchField, Dropdown as Dropdown$2, MobileNumber, CardLabelError, DatePicker as DatePicker$3, SubmitBar, Card, Table, Loader, Toast, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, HomeIcon, PropertyHouse, EmployeeModuleCard, TickMark, FormComposer, FormStep, CardLabel, TextInput, LabelFieldPair, UploadFile, CardSubHeader, CardText, RadioOrSelect, ShippingTruck, CheckBox, RadioButtons, CloseSvg, Localities, RemoveableTag, ActionBar, ApplyFilterBar, AddIcon, Menu, Label, LinkLabel, ToggleSwitch, CardSectionHeader, StatusTable, Row, EditIcon, DeleteIcon, Modal, InfoIcon, CardHeader, LinkButton, Banner } from '@djb25/digit-ui-react-components';
+import React, { useEffect, useMemo, useCallback, useState, useRef, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams, useLocation, Switch, useHistory, Link, useRouteMatch, Route, Redirect } from 'react-router-dom';
 import { useForm, Controller } from 'react-hook-form';
@@ -323,7 +323,6 @@ const EmployeeApp = ({
   const location = useLocation();
   sessionStorage.removeItem("revalidateddone");
   const isMobile = window.Digit.Utils.browser.isMobile();
-  console.log("index page in employee");
   const AddVendor = Digit.ComponentRegistryService.getComponent("AddVendor");
   const SearchVendor = Digit.ComponentRegistryService.getComponent("SearchVendor");
   const AddDriver = Digit.ComponentRegistryService.getComponent("AddDriver");
@@ -332,9 +331,61 @@ const EmployeeApp = ({
   const VendorCreate = Digit.ComponentRegistryService.getComponent("VENDORCreate");
   const DriverDetails = Digit.ComponentRegistryService.getComponent("DriverDetails");
   const VehicleDetails = Digit.ComponentRegistryService.getComponent("VehicleDetails");
+  const getDynamicBreadcrumbs = () => {
+    const pathname = location.pathname;
+    let crumbs = [{
+      icon: HomeIcon,
+      path: "/digit-ui/employee"
+    }, {
+      label: t("TITLE_VENDOR_MANAGEMENT"),
+      path: `/digit-ui/employee/vendor/search-vendor`
+    }];
+    if (pathname.includes("/registry/new-vendor")) {
+      crumbs.push({
+        label: t("ES_FSM_REGISTRY_TITLE_NEW_VENDOR")
+      });
+    } else if (pathname.includes("/search-vendor")) {
+      crumbs.push({
+        label: t("SEARCH_VENDOR")
+      });
+    } else if (pathname.includes("/registry/new-driver")) {
+      crumbs.push({
+        label: t("ES_FSM_REGISTRY_TITLE_NEW_DRIVER")
+      });
+    } else if (pathname.includes("/registry/vendor-details") || pathname.includes("/registry/modify-vendor/")) {
+      crumbs.push({
+        label: t("VENDOR_VENDOR_DETAILS")
+      });
+    } else if (pathname.includes("/registry/vehicle-details") || pathname.includes("/registry/modify-vehicle/")) {
+      crumbs.push({
+        label: t("VENDOR_VEHICLE_DETAILS")
+      });
+    } else if (pathname.includes("/registry/new-vehicle")) {
+      crumbs.push({
+        label: t("ES_FSM_REGISTRY_TITLE_NEW_VEHICLE")
+      });
+    } else if (pathname.includes("/registry/driver-details") || pathname.includes("/registry/modify-driver/")) {
+      crumbs.push({
+        label: t("VENDOR_DRIVER_DETAILS")
+      });
+    } else if (pathname.includes("/registry/additionaldetails")) {
+      crumbs.push({
+        label: t("VENDOR_ADDITIONAL_DETAILS")
+      });
+    }
+    return crumbs;
+  };
   return /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "ground-container"
-  }, /*#__PURE__*/React.createElement(PrivateRoute, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "form-container"
+  }, /*#__PURE__*/React.createElement(ModuleHeader, {
+    leftContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowLeft, {
+      className: "icon"
+    }), "Back"),
+    onLeftClick: () => window.history.back(),
+    breadcrumbs: getDynamicBreadcrumbs()
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/registry/new-vendor`,
     component: () => /*#__PURE__*/React.createElement(AddVendor, {
       parentRoute: path
@@ -379,7 +430,7 @@ const EmployeeApp = ({
     component: props => /*#__PURE__*/React.createElement(SearchApp, Object.assign({}, props, {
       parentRoute: path
     }))
-  })))));
+  }))))));
 };
 
 const VENDORCard = () => {
@@ -391,9 +442,6 @@ const VENDORCard = () => {
     return null;
   }
   const links = [{
-    label: t("ADDITIONAL_VENDOR_DETAILS"),
-    link: `/digit-ui/employee/vendor/registry/additionaldetails`
-  }, {
     label: t("VENDOR_NEW_REGISTERATION"),
     link: `/digit-ui/employee/vendor/registry/new-vendor`
   }, {
@@ -402,6 +450,7 @@ const VENDORCard = () => {
   }];
   const VENDORRole = Digit.UserService.hasAccess(["VENDOR"]) || false;
   const propsForModuleCard = {
+    Icon: /*#__PURE__*/React.createElement(PropertyHouse, null),
     moduleName: t("TITLE_VENDOR_MANAGEMENT"),
     kpis: [{
       count: total === null || total === void 0 ? void 0 : total.totalCount,
@@ -433,7 +482,7 @@ const convertEpochToDate = (dateEpoch, businessService) => {
   }
 };
 const VendorData = data => {
-  var _data$vendordet, _data$vendordet2, _data$vendordet3, _data$vendordet4, _data$vendordet5, _data$vendordet6, _data$vendordet7, _data$vendordet8, _data$vendordet9, _data$vendordet0, _data$vendordet1, _data$vendordet10, _data$vendordet11, _data$vendordet12, _data$vendordet12$Sta, _data$vendordet13, _data$vendordet13$Ven, _data$vendordet14, _data$vendordet15, _data$vendordet16, _data$vendordet16$Ven, _data$documents;
+  var _data$vendordet, _data$vendordet2, _data$vendordet3, _data$vendordet4, _data$vendordet5, _data$vendordet6, _data$vendordet7, _data$vendordet8, _data$vendordet9, _data$vendordet0, _data$vendordet1, _data$vendordet10, _data$vendordet11, _data$vendordet12, _data$vendordet12$Sta, _data$vendordet13, _data$vendordet13$Ven, _data$vendordet14, _data$vendordet15, _data$vendordet16, _data$vendordet16$Ven, _data$documents, _data$vendordet17, _data$vendordet18;
   const formdata = {
     VendorAdditionalDetails: {
       tenantId: Digit.ULBService.getCurrentTenantId(),
@@ -461,7 +510,9 @@ const VendorData = data => {
       serviceType: data === null || data === void 0 ? void 0 : (_data$vendordet16 = data.vendordet) === null || _data$vendordet16 === void 0 ? void 0 : (_data$vendordet16$Ven = _data$vendordet16.VendorType) === null || _data$vendordet16$Ven === void 0 ? void 0 : _data$vendordet16$Ven.code,
       documents: data === null || data === void 0 ? void 0 : (_data$documents = data.documents) === null || _data$documents === void 0 ? void 0 : _data$documents.documents,
       active: null,
-      vendorAdditionalDetailsId: null
+      vendorAdditionalDetailsId: null,
+      vendorGroup: (data === null || data === void 0 ? void 0 : (_data$vendordet17 = data.vendordet) === null || _data$vendordet17 === void 0 ? void 0 : _data$vendordet17.vendorGroup) || "N/A",
+      vendorType: (data === null || data === void 0 ? void 0 : (_data$vendordet18 = data.vendordet) === null || _data$vendordet18 === void 0 ? void 0 : _data$vendordet18.vendorType) || "N/A"
     }
   };
   return formdata;
@@ -496,10 +547,7 @@ const VendorConfig = (t, disabled = false) => {
         defaultValue: "",
         className: "payment-form-text-input-correction"
       }
-    }]
-  }, {
-    head: "ES_FSM_REGISTRY_PERSONAL_DETAILS",
-    body: [{
+    }, {
       label: "ES_FSM_REGISTRY_NEW_GENDER",
       isMandatory: true,
       type: "component",
@@ -649,37 +697,54 @@ const VendorConfig = (t, disabled = false) => {
         className: "payment-form-text-input-correction"
       }
     }]
-  }, {
-    head: "",
-    body: [{
-      label: "ES_VENDOR_REGISTRY_SERVICE_TYPE",
-      isMandatory: true,
-      type: "component",
-      route: "select-gender",
-      hideInEmployee: false,
-      key: "serviceType",
-      component: "SelectServiceType",
-      disable: disabled,
-      texts: {
-        headerCaption: "",
-        header: "CS_COMMON_CHOOSE_GENDER",
-        cardText: "CS_COMMON_SELECT_GENDER",
-        submitBarLabel: "CS_COMMON_NEXT",
-        skipText: "CORE_COMMON_SKIP_CONTINUE"
-      }
-    }]
   }];
 };
 
+const Timeline = ({
+  steps: _steps = [],
+  currentStep: _currentStep = 1
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "custom-stepper-card"
+  }, _steps.map((label, index) => {
+    const stepNumber = index + 1;
+    const isActive = stepNumber === _currentStep;
+    const isCompleted = stepNumber < _currentStep;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "stepper-row",
+      key: index
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "stepper-left"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `step-circle ${isActive ? "active" : ""} ${isCompleted ? "completed" : ""}`
+    }, isCompleted ? /*#__PURE__*/React.createElement(TickMark, {
+      fillColor: "red"
+    }) : stepNumber), index !== _steps.length - 1 && /*#__PURE__*/React.createElement("div", {
+      className: `step-line ${isCompleted ? "completed-line" : ""}`
+    })), /*#__PURE__*/React.createElement("div", {
+      className: `step-label ${isActive ? "active-text" : ""} ${isCompleted ? "completed-text" : ""}`
+    }, t(label)));
+  }));
+};
+
 const AddVendor = ({
   parentUrl,
   heading
 }) => {
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const stateId = Digit.ULBService.getStateId();
-  const [showToast, setShowToast] = useState(null);
+  const {
+    t
+  } = useTranslation();
   const history = useHistory();
   const queryClient = useQueryClient();
+  const [currentStep, setCurrentStep] = useState(1);
+  const [showToast, setShowToast] = useState(null);
+  const [canSubmit, setCanSubmit] = useState(false);
+  const step1DataRef = useRef({});
   const [mutationHappened, setMutationHappened, clear] = Digit.Hooks.useSessionStorage("FSM_MUTATION_HAPPENED", false);
   const [errorInfo, setErrorInfo, clearError] = Digit.Hooks.useSessionStorage("FSM_ERROR_DATA", false);
   const [successData, setsuccessData, clearSuccessData] = Digit.Hooks.useSessionStorage("FSM_MUTATION_SUCCESS_DATA", false);
@@ -695,11 +760,7 @@ const AddVendor = ({
     clearSuccessData();
     clearError();
   }, []);
-  const {
-    t
-  } = useTranslation();
   const Config = VendorConfig(t);
-  const [canSubmit, setSubmitValve] = useState(false);
   const defaultValues = {
     tripData: {
       noOfTrips: 1,
@@ -707,39 +768,50 @@ const AddVendor = ({
       amount: null
     }
   };
+  const vendorStepConfig = Config.filter(config => config.head === "ES_VRNDOR_NEW_VENDOR_DETAILS");
+  const addressStepConfig = Config.filter(config => config.head === "ES_FSM_REGISTRY_NEW_ADDRESS_DETAILS");
+  const steps = [t("ES_VRNDOR_NEW_VENDOR_DETAILS"), t("ES_FSM_REGISTRY_NEW_ADDRESS_DETAILS")];
   const onFormValueChange = (setValue, formData) => {
-    var _formData$address;
-    if (formData !== null && formData !== void 0 && formData.vendorName && formData !== null && formData !== void 0 && formData.phone && formData !== null && formData !== void 0 && (_formData$address = formData.address) !== null && _formData$address !== void 0 && _formData$address.locality && formData !== null && formData !== void 0 && formData.selectGender) {
-      setSubmitValve(true);
+    var _formData$selectGende;
+    if (formData !== null && formData !== void 0 && formData.vendorName && formData !== null && formData !== void 0 && formData.phone && formData !== null && formData !== void 0 && (_formData$selectGende = formData.selectGender) !== null && _formData$selectGende !== void 0 && _formData$selectGende.code) {
+      setCanSubmit(true);
     } else {
-      setSubmitValve(false);
+      setCanSubmit(false);
     }
   };
   const closeToast = () => {
     setShowToast(null);
   };
   const onSubmit = data => {
-    var _data$street, _data$doorNo, _data$plotNo, _data$landmark, _data$address, _data$address$city, _data$address2, _data$address2$city, _data$address3, _data$address3$city, _data$address4, _data$address4$city, _data$buildingName, _data$address5, _data$address5$locali, _data$address6, _data$address6$locali, _data$address7, _data$address7$locali, _data$selectGender, _data$serviceType, _data$address8, _data$address9;
-    console.log("dataaaaaaaa", data);
-    const name = data === null || data === void 0 ? void 0 : data.vendorName;
-    const pincode = data === null || data === void 0 ? void 0 : data.pincode;
-    const street = data === null || data === void 0 ? void 0 : (_data$street = data.street) === null || _data$street === void 0 ? void 0 : _data$street.trim();
-    const doorNo = data === null || data === void 0 ? void 0 : (_data$doorNo = data.doorNo) === null || _data$doorNo === void 0 ? void 0 : _data$doorNo.trim();
-    const plotNo = data === null || data === void 0 ? void 0 : (_data$plotNo = data.plotNo) === null || _data$plotNo === void 0 ? void 0 : _data$plotNo.trim();
-    const landmark = data === null || data === void 0 ? void 0 : (_data$landmark = data.landmark) === null || _data$landmark === void 0 ? void 0 : _data$landmark.trim();
-    const city = data === null || data === void 0 ? void 0 : (_data$address = data.address) === null || _data$address === void 0 ? void 0 : (_data$address$city = _data$address.city) === null || _data$address$city === void 0 ? void 0 : _data$address$city.name;
-    const state = data === null || data === void 0 ? void 0 : (_data$address2 = data.address) === null || _data$address2 === void 0 ? void 0 : (_data$address2$city = _data$address2.city) === null || _data$address2$city === void 0 ? void 0 : _data$address2$city.state;
-    const district = data === null || data === void 0 ? void 0 : (_data$address3 = data.address) === null || _data$address3 === void 0 ? void 0 : (_data$address3$city = _data$address3.city) === null || _data$address3$city === void 0 ? void 0 : _data$address3$city.name;
-    const region = data === null || data === void 0 ? void 0 : (_data$address4 = data.address) === null || _data$address4 === void 0 ? void 0 : (_data$address4$city = _data$address4.city) === null || _data$address4$city === void 0 ? void 0 : _data$address4$city.name;
-    const buildingName = data === null || data === void 0 ? void 0 : (_data$buildingName = data.buildingName) === null || _data$buildingName === void 0 ? void 0 : _data$buildingName.trim();
-    const localityCode = data === null || data === void 0 ? void 0 : (_data$address5 = data.address) === null || _data$address5 === void 0 ? void 0 : (_data$address5$locali = _data$address5.locality) === null || _data$address5$locali === void 0 ? void 0 : _data$address5$locali.code;
-    const localityName = data === null || data === void 0 ? void 0 : (_data$address6 = data.address) === null || _data$address6 === void 0 ? void 0 : (_data$address6$locali = _data$address6.locality) === null || _data$address6$locali === void 0 ? void 0 : _data$address6$locali.name;
-    const localityArea = data === null || data === void 0 ? void 0 : (_data$address7 = data.address) === null || _data$address7 === void 0 ? void 0 : (_data$address7$locali = _data$address7.locality) === null || _data$address7$locali === void 0 ? void 0 : _data$address7$locali.area;
-    const gender = data === null || data === void 0 ? void 0 : (_data$selectGender = data.selectGender) === null || _data$selectGender === void 0 ? void 0 : _data$selectGender.code;
-    const emailId = data === null || data === void 0 ? void 0 : data.emailId;
-    const phone = data === null || data === void 0 ? void 0 : data.phone;
-    const dob = new Date(`${data.dob}`).getTime() || new Date(`1/1/1970`).getTime();
-    const additionalDetails = data === null || data === void 0 ? void 0 : (_data$serviceType = data.serviceType) === null || _data$serviceType === void 0 ? void 0 : _data$serviceType.code;
+    var _mergedData$street, _mergedData$doorNo, _mergedData$plotNo, _mergedData$landmark, _mergedData$address, _mergedData$address$c, _mergedData$address2, _mergedData$address2$, _mergedData$address3, _mergedData$address3$, _mergedData$address4, _mergedData$address4$, _mergedData$buildingN, _mergedData$address5, _mergedData$address5$, _mergedData$address6, _mergedData$address6$, _mergedData$address7, _mergedData$address7$, _mergedData$selectGen, _mergedData$serviceTy, _mergedData$address8, _mergedData$address9;
+    if (currentStep === 1) {
+      step1DataRef.current = data;
+      setCurrentStep(2);
+      return;
+    }
+    const mergedData = {
+      ...step1DataRef.current,
+      ...data
+    };
+    const name = mergedData === null || mergedData === void 0 ? void 0 : mergedData.vendorName;
+    const pincode = mergedData === null || mergedData === void 0 ? void 0 : mergedData.pincode;
+    const street = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$street = mergedData.street) === null || _mergedData$street === void 0 ? void 0 : _mergedData$street.trim();
+    const doorNo = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$doorNo = mergedData.doorNo) === null || _mergedData$doorNo === void 0 ? void 0 : _mergedData$doorNo.trim();
+    const plotNo = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$plotNo = mergedData.plotNo) === null || _mergedData$plotNo === void 0 ? void 0 : _mergedData$plotNo.trim();
+    const landmark = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$landmark = mergedData.landmark) === null || _mergedData$landmark === void 0 ? void 0 : _mergedData$landmark.trim();
+    const city = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address = mergedData.address) === null || _mergedData$address === void 0 ? void 0 : (_mergedData$address$c = _mergedData$address.city) === null || _mergedData$address$c === void 0 ? void 0 : _mergedData$address$c.name;
+    const state = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address2 = mergedData.address) === null || _mergedData$address2 === void 0 ? void 0 : (_mergedData$address2$ = _mergedData$address2.city) === null || _mergedData$address2$ === void 0 ? void 0 : _mergedData$address2$.state;
+    const district = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address3 = mergedData.address) === null || _mergedData$address3 === void 0 ? void 0 : (_mergedData$address3$ = _mergedData$address3.city) === null || _mergedData$address3$ === void 0 ? void 0 : _mergedData$address3$.name;
+    const region = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address4 = mergedData.address) === null || _mergedData$address4 === void 0 ? void 0 : (_mergedData$address4$ = _mergedData$address4.city) === null || _mergedData$address4$ === void 0 ? void 0 : _mergedData$address4$.name;
+    const buildingName = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$buildingN = mergedData.buildingName) === null || _mergedData$buildingN === void 0 ? void 0 : _mergedData$buildingN.trim();
+    const localityCode = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address5 = mergedData.address) === null || _mergedData$address5 === void 0 ? void 0 : (_mergedData$address5$ = _mergedData$address5.locality) === null || _mergedData$address5$ === void 0 ? void 0 : _mergedData$address5$.code;
+    const localityName = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address6 = mergedData.address) === null || _mergedData$address6 === void 0 ? void 0 : (_mergedData$address6$ = _mergedData$address6.locality) === null || _mergedData$address6$ === void 0 ? void 0 : _mergedData$address6$.name;
+    const localityArea = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address7 = mergedData.address) === null || _mergedData$address7 === void 0 ? void 0 : (_mergedData$address7$ = _mergedData$address7.locality) === null || _mergedData$address7$ === void 0 ? void 0 : _mergedData$address7$.area;
+    const gender = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$selectGen = mergedData.selectGender) === null || _mergedData$selectGen === void 0 ? void 0 : _mergedData$selectGen.code;
+    const emailId = mergedData === null || mergedData === void 0 ? void 0 : mergedData.emailId;
+    const phone = mergedData === null || mergedData === void 0 ? void 0 : mergedData.phone;
+    const dob = new Date(`${mergedData.dob}`).getTime() || new Date(`1/1/1970`).getTime();
+    const additionalDetails = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$serviceTy = mergedData.serviceType) === null || _mergedData$serviceTy === void 0 ? void 0 : _mergedData$serviceTy.code;
     const formData = {
       vendor: {
         tenantId: tenantId,
@@ -766,8 +838,8 @@ const AddVendor = ({
             area: localityArea || ""
           },
           geoLocation: {
-            latitude: (data === null || data === void 0 ? void 0 : (_data$address8 = data.address) === null || _data$address8 === void 0 ? void 0 : _data$address8.latitude) || 0,
-            longitude: (data === null || data === void 0 ? void 0 : (_data$address9 = data.address) === null || _data$address9 === void 0 ? void 0 : _data$address9.longitude) || 0
+            latitude: (mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address8 = mergedData.address) === null || _mergedData$address8 === void 0 ? void 0 : _mergedData$address8.latitude) || 0,
+            longitude: (mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address9 = mergedData.address) === null || _mergedData$address9 === void 0 ? void 0 : _mergedData$address9.longitude) || 0
           }
         },
         owner: {
@@ -804,73 +876,49 @@ const AddVendor = ({
         setTimeout(closeToast, 5000);
       }
     });
-    console.log("formdaaatataaaa", formData);
   };
-  const isMobile = window.Digit.Utils.browser.isMobile();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Header, null, t("ES_FSM_REGISTRY_TITLE_NEW_VENDOR"))), /*#__PURE__*/React.createElement("div", {
-    style: !isMobile ? {
-      marginLeft: "-15px"
-    } : {}
-  }, /*#__PURE__*/React.createElement(FormComposer, {
-    isDisabled: !canSubmit,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      width: "100%",
+      gap: "24px"
+    }
+  }, /*#__PURE__*/React.createElement(Timeline, {
+    steps: steps,
+    currentStep: currentStep
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "1",
+      overflowY: "auto"
+    }
+  }, currentStep === 1 &&
+  /*#__PURE__*/
+  React.createElement(FormComposer, {
+    label: t("CS_COMMON_NEXT"),
+    config: vendorStepConfig.filter(i => !i.hideInEmployee).map(config => ({
+      ...config,
+      body: config.body.filter(a => !a.hideInEmployee)
+    })),
+    onSubmit: onSubmit,
+    defaultValues: defaultValues,
+    onFormValueChange: onFormValueChange,
+    noBreakLine: true
+  }), currentStep === 2 &&
+  /*#__PURE__*/
+  React.createElement(FormComposer, {
     label: t("ES_COMMON_APPLICATION_SUBMIT"),
-    config: Config.filter(i => !i.hideInEmployee).map(config => {
-      return {
-        ...config,
-        body: config.body.filter(a => !a.hideInEmployee)
-      };
-    }),
-    fieldStyle: {
-      marginRight: 0
-    },
+    config: addressStepConfig.filter(i => !i.hideInEmployee).map(config => ({
+      ...config,
+      body: config.body.filter(a => !a.hideInEmployee)
+    })),
     onSubmit: onSubmit,
     defaultValues: defaultValues,
     onFormValueChange: onFormValueChange,
     noBreakLine: true
   }), showToast && /*#__PURE__*/React.createElement(Toast, {
-    error: showToast.key === "error" ? true : false,
+    error: showToast.key === "error",
     label: t(showToast.key === "success" ? `ES_FSM_REGISTRY_${showToast.action}_SUCCESS` : showToast.action),
     onClose: closeToast
-  })));
-};
-
-let actions = [];
-const getAction = flow => {
-  switch (flow) {
-    case "STAKEHOLDER":
-      actions = [];
-      break;
-    default:
-      actions = ["VENDOR_ADDITIONAL_DETAILS", "VENDOR_DOCUMENT_DETAILS", "VENDOR_SUMMARY"];
-  }
-};
-const Timeline = ({
-  currentStep: _currentStep = 1,
-  flow: _flow = ""
-}) => {
-  const {
-    t
-  } = useTranslation();
-  const isMobile = window.Digit.Utils.browser.isMobile();
-  getAction(_flow);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "timeline-container",
-    style: isMobile ? {} : {
-      maxWidth: "960px",
-      minWidth: "640px",
-      marginRight: "auto"
-    }
-  }, actions.map((action, index, arr) => /*#__PURE__*/React.createElement("div", {
-    className: "timeline-checkpoint",
-    key: index
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "timeline-content"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: `circle ${index <= _currentStep - 1 && "active"}`
-  }, index < _currentStep - 1 ? /*#__PURE__*/React.createElement(TickMark, null) : index + 1), /*#__PURE__*/React.createElement("span", {
-    className: "secondary-color"
-  }, t(action))), index < arr.length - 1 && /*#__PURE__*/React.createElement("span", {
-    className: `line ${index < _currentStep - 1 && "active"}`
   }))));
 };
 
@@ -887,6 +935,7 @@ const VendorDetails = ({
   } = useLocation();
   let index = 0;
   let validation = {};
+  const steps = ["VENDOR_ADDITIONAL_DETAILS", "VENDOR_DOCUMENT_DETAILS", "VENDOR_SUMMARY"];
   const [VendorCompany, setVendorCompany] = useState("");
   const [VendorPhone, setVendorPhone] = useState("");
   const [VendorAddress, setVendorAddress] = useState("");
@@ -1044,13 +1093,29 @@ const VendorDetails = ({
       goNext();
     }
   }, [VendorCompany, VendorPhone, VendorAddress, VendorCategory, VendorEmail, VendorId, Bank, BankbranchName, IFSC, AccountNo, PanNo, GstNo, GstState, RegistrationNo, EpfNo, EsiNo, VendorType, Status, micrNo, PhoneNo, ContactPerson, Company]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Timeline, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      width: "100%",
+      gap: "24px"
+    }
+  }, /*#__PURE__*/React.createElement(Timeline, {
+    steps: steps,
     currentStep: 1
-  }), console.log("kunal in vendor details"), /*#__PURE__*/React.createElement(FormStep, {
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "1",
+      overflowY: "auto"
+    }
+  }, /*#__PURE__*/React.createElement(FormStep, {
     config: config,
     onSelect: goNext,
     t: t
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("VENDOR_ID")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("VENDOR_ID")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1059,7 +1124,7 @@ const VendorDetails = ({
     value: VendorId,
     onChange: setvendorid,
     style: {
-      width: "50%"
+      width: "100%"
     },
     maxLength: 11,
     ValidationRequired: false
@@ -1068,7 +1133,9 @@ const VendorDetails = ({
     pattern: "^[a-zA-Z0-9/-]{1,20}$",
     type: "text",
     title: t("INVALID_VENDOR_ID")
-  })), /*#__PURE__*/React.createElement(CardLabel, null, `${t("IFSC_CODE")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("IFSC_CODE")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1078,7 +1145,7 @@ const VendorDetails = ({
     placeholder: "Enter IFSC Code",
     onChange: setvendorifsc,
     style: {
-      width: "50%"
+      width: "100%"
     },
     maxLength: 11,
     ValidationRequired: true
@@ -1087,7 +1154,11 @@ const VendorDetails = ({
     pattern: "^[A-Z]{4}0[A-Z0-9]{6}$",
     type: "text",
     title: t("INVALID_IFSC_CODE_ERROR_MESSAGE")
-  })), /*#__PURE__*/React.createElement(CardLabel, null, `${t("VENDOR_BANK_NAME")}`, " ", /*#__PURE__*/React.createElement("span", {
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("VENDOR_BANK_NAME")}`, " ", /*#__PURE__*/React.createElement("span", {
     className: "check-page-link-button"
   }, "*")), /*#__PURE__*/React.createElement(TextInput, {
     t: t,
@@ -1097,12 +1168,14 @@ const VendorDetails = ({
     name: "bankName",
     placeholder: "Bank Name Auto Select",
     style: {
-      width: "50%"
+      width: "100%"
     },
     value: Bank,
     onChange: setvendorbank,
     disabled: true
-  }), /*#__PURE__*/React.createElement(CardLabel, null, `${t("VENDOR_BANK_BRANCH_NAME")}`, " ", /*#__PURE__*/React.createElement("span", {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("VENDOR_BANK_BRANCH_NAME")}`, " ", /*#__PURE__*/React.createElement("span", {
     className: "check-page-link-button"
   }, "*")), /*#__PURE__*/React.createElement(TextInput, {
     t: t,
@@ -1112,12 +1185,16 @@ const VendorDetails = ({
     name: "BankbranchName",
     value: BankbranchName,
     style: {
-      width: "50%"
+      width: "100%"
     },
     placeholder: "Bank Branch Name Auto Select",
     onChange: setBankbranch,
     disabled: false
-  }), /*#__PURE__*/React.createElement(CardLabel, null, `${t("VENDOR_MICR_NO")}`, " ", /*#__PURE__*/React.createElement("span", {
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("VENDOR_MICR_NO")}`, " ", /*#__PURE__*/React.createElement("span", {
     className: "check-page-link-button"
   }, "*")), /*#__PURE__*/React.createElement(TextInput, {
     t: t,
@@ -1127,12 +1204,14 @@ const VendorDetails = ({
     name: "MicrNo",
     value: micrNo,
     style: {
-      width: "50%"
+      width: "100%"
     },
     placeholder: "MICR No",
     onChange: setmicrNo,
     disabled: false
-  }), /*#__PURE__*/React.createElement(CardLabel, null, `${t("ACCOUNT_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("ACCOUNT_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1141,7 +1220,7 @@ const VendorDetails = ({
     value: AccountNo,
     onChange: setvendoraccountno,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1149,7 +1228,11 @@ const VendorDetails = ({
     pattern: "[0-9]{9,18}",
     type: "text",
     title: t("INVALID_ACCOUNT_NO_ERROR_MESSAGE")
-  })), /*#__PURE__*/React.createElement(CardLabel, null, `${t("PHONE_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("PHONE_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1158,15 +1241,18 @@ const VendorDetails = ({
     value: PhoneNo,
     onChange: setphoneno,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
     isRequired: true,
     pattern: "[0-9]{9,18}",
     type: "text",
-    title: t("INVALID_ACCOUNT_NO_ERROR_MESSAGE")
-  })), /*#__PURE__*/React.createElement(CardLabel, null, `${t("CONTACT_PERSON")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+    title: t("INVALID_ACCOUNT_NO_ERROR_MESSAGE"),
+    length: 10
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("CONTACT_PERSON")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1175,7 +1261,7 @@ const VendorDetails = ({
     value: ContactPerson,
     onChange: setcontactperson,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1183,7 +1269,11 @@ const VendorDetails = ({
     pattern: "^[a-zA-Z0-9/-]{1,20}$",
     type: "text",
     title: t("INVALID_ACCOUNT_NO_ERROR_MESSAGE")
-  })), /*#__PURE__*/React.createElement(CardLabel, null, `${t("COMPANY_NAME")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("COMPANY_NAME")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1192,7 +1282,7 @@ const VendorDetails = ({
     value: Company,
     onChange: setcompanyname,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1200,7 +1290,9 @@ const VendorDetails = ({
     pattern: "^[a-zA-Z0-9/-]{1,20}$",
     type: "text",
     title: t("INVALID_ACCOUNT_NO_ERROR_MESSAGE")
-  })), /*#__PURE__*/React.createElement(CardLabel, null, `${t("PAN_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("PAN_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1209,7 +1301,7 @@ const VendorDetails = ({
     value: PanNo,
     onChange: setpanno,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1217,7 +1309,11 @@ const VendorDetails = ({
     pattern: "[A-Z]{5}[0-9]{4}[A-Z]{1}",
     type: "text",
     title: t("INVALID_PAN_NO_ERROR_MESSAGE")
-  })), /*#__PURE__*/React.createElement(CardLabel, null, `${t("GST_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("GST_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1226,7 +1322,7 @@ const VendorDetails = ({
     value: GstNo,
     onChange: setgstno,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1234,7 +1330,9 @@ const VendorDetails = ({
     pattern: "^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[A-Z0-9]{1}[Z]{1}[A-Z0-9]{1}$",
     type: "text",
     title: t("INVALID_GST_NO_ERROR_MESSAGE")
-  })), /*#__PURE__*/React.createElement(CardLabel, null, `${t("GST_REGISTERED_STATE/UT")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("GST_REGISTERED_STATE/UT")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1243,7 +1341,7 @@ const VendorDetails = ({
     value: GstState,
     onChange: setgststate,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1251,7 +1349,11 @@ const VendorDetails = ({
     pattern: "^[a-zA-Z0-9/-]{1,20}$",
     type: "text",
     title: t("PT_NAME_ERROR_MESSAGE")
-  })), /*#__PURE__*/React.createElement(CardLabel, null, `${t("REGISTRATION_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("REGISTRATION_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1260,7 +1362,7 @@ const VendorDetails = ({
     value: RegistrationNo,
     onChange: setregistrationno,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1268,7 +1370,9 @@ const VendorDetails = ({
     pattern: "^[a-zA-Z0-9/-]{1,20}$",
     type: "text",
     title: t("INVALID_REGISTRATION_NO_ERROR_MESSAGE")
-  })), /*#__PURE__*/React.createElement(CardLabel, null, `${t("EPF_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("EPF_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1277,7 +1381,7 @@ const VendorDetails = ({
     value: EpfNo,
     onChange: setepfno,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1285,7 +1389,11 @@ const VendorDetails = ({
     pattern: "^[a-zA-Z0-9/-]{1,15}$",
     type: "text",
     title: t("INVALID_EPF_NO_ERROR_MESSAGE")
-  })), /*#__PURE__*/React.createElement(CardLabel, null, `${t("ESI_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("ESI_NO")}`), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     t: t,
     type: "text",
     isMandatory: false,
@@ -1294,7 +1402,7 @@ const VendorDetails = ({
     value: EsiNo,
     onChange: setesino,
     style: {
-      width: "50%"
+      width: "100%"
     },
     ValidationRequired: true
   }, validation = {
@@ -1302,7 +1410,9 @@ const VendorDetails = ({
     pattern: "^[a-zA-Z0-9/-]{1,20}$",
     type: "text",
     title: t("INVALID_ESI_NO_ERROR_MESSAGE")
-  })), /*#__PURE__*/React.createElement("div", null, t("VENDOR_TYPE"), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement("div", null, t("VENDOR_TYPE"), /*#__PURE__*/React.createElement("div", {
     className: "tooltip",
     style: {
       width: "12px",
@@ -1329,7 +1439,6 @@ const VendorDetails = ({
       required: t("CORE_COMMON_REQUIRED_ERRMSG")
     },
     render: props => /*#__PURE__*/React.createElement(Dropdown$2, {
-      className: "form-field",
       selected: VendorType,
       select: setVendorType,
       option: [{
@@ -1343,7 +1452,11 @@ const VendorDetails = ({
       placeholder: "Select",
       t: t
     })
-  }), /*#__PURE__*/React.createElement("div", null, t("VENOR_CATEGORY"), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement("div", null, t("VENOR_CATEGORY"), /*#__PURE__*/React.createElement("div", {
     className: "tooltip",
     style: {
       width: "12px",
@@ -1370,7 +1483,6 @@ const VendorDetails = ({
       required: t("CORE_COMMON_REQUIRED_ERRMSG")
     },
     render: props => /*#__PURE__*/React.createElement(Dropdown$2, {
-      className: "form-field",
       selected: VendorCategory,
       select: setVendorCategory,
       option: [{
@@ -1384,7 +1496,9 @@ const VendorDetails = ({
       placeholder: "Select",
       t: t
     })
-  }), /*#__PURE__*/React.createElement("div", null, t("STATUS"), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col3"
+  }, /*#__PURE__*/React.createElement("div", null, t("STATUS"), /*#__PURE__*/React.createElement("div", {
     className: "tooltip",
     style: {
       width: "12px",
@@ -1411,7 +1525,6 @@ const VendorDetails = ({
       required: t("CORE_COMMON_REQUIRED_ERRMSG")
     },
     render: props => /*#__PURE__*/React.createElement(Dropdown$2, {
-      className: "form-field",
       selected: Status,
       select: setStatus,
       option: [{
@@ -1425,7 +1538,7 @@ const VendorDetails = ({
       placeholder: "Select",
       t: t
     })
-  }))));
+  })))))));
 };
 
 const VendorDocuments = ({
@@ -1439,6 +1552,7 @@ const VendorDocuments = ({
   const [uploadedFiles, setUploadedFiles] = useState([null]);
   const [error, setError] = useState(null);
   const [ind, setInd] = useState(1);
+  const steps = ["VENDOR_ADDITIONAL_DETAILS", "VENDOR_DOCUMENT_DETAILS", "VENDOR_SUMMARY"];
   const tenantId = Digit.ULBService.getStateId();
   const stateId = Digit.ULBService.getStateId();
   const [documents, setDocuments] = useState((formData === null || formData === void 0 ? void 0 : (_formData$documents = formData.documents) === null || _formData$documents === void 0 ? void 0 : _formData$documents.documents) || []);
@@ -1495,19 +1609,28 @@ const VendorDocuments = ({
     });
     handleFileUpload(file, index);
   };
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Timeline, {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      width: "100%",
+      gap: "24px"
+    }
+  }, /*#__PURE__*/React.createElement(Timeline, {
+    steps: steps,
     currentStep: 2
-  }), /*#__PURE__*/React.createElement(FormStep, {
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "1",
+      overflowY: "auto"
+    }
+  }, /*#__PURE__*/React.createElement(FormStep, {
     t: t,
     config: config,
     onSelect: handleSubmit,
     onSkip: onSkip,
     isDisabled: uploadedFiles.some(file => file === null) && files.some(file => file === null)
   }, files.map((file, index) => /*#__PURE__*/React.createElement(LabelFieldPair, {
-    key: index,
-    style: {
-      marginBottom: "24px"
-    }
+    key: index
   }, /*#__PURE__*/React.createElement(CardLabel, {
     className: "card-label-smaller"
   }, t("VENDOR_ID") + (index !== 0 ? index : "")), /*#__PURE__*/React.createElement("div", {
@@ -1538,48 +1661,48 @@ const VendorDocuments = ({
     label: error,
     onClose: () => setError(null),
     error: true
-  })));
+  }))));
 };
 
 const ServiceDoc = ({
   t,
   config,
-  onSelect,
-  userType,
-  formData
+  onSelect
 }) => {
   var _Documentsob$ASSET;
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const stateId = Digit.ULBService.getStateId();
-  sessionStorage.removeItem("docReqScreenByBack");
   const docType = config !== null && config !== void 0 && config.isMutation ? ["MutationDocuments"] : "Documents";
   const {
     isLoading,
     data: Documentsob = {}
   } = Digit.Hooks.asset.useAssetDocumentsMDMS(stateId, "ASSET", docType);
   let docs = Documentsob === null || Documentsob === void 0 ? void 0 : (_Documentsob$ASSET = Documentsob.ASSET) === null || _Documentsob$ASSET === void 0 ? void 0 : _Documentsob$ASSET.Documents;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardSubHeader, null, t("AST_REQ_SCREEN_LABEL")), /*#__PURE__*/React.createElement(CardText, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardSubHeader, null, t("AST_REQ_SCREEN_LABEL")), /*#__PURE__*/React.createElement(CardText, {
     style: {
-      color: "red"
+      color: "red",
+      marginBottom: "20px"
     }
-  }, t("AST_DOCUMENT_ACCEPTED_PDF_JPG_PNG")), /*#__PURE__*/React.createElement("div", null, isLoading && /*#__PURE__*/React.createElement(Loader, null), Array.isArray(docs) ? config !== null && config !== void 0 && config.isMutation ? docs.map(({
+  }, t("AST_DOCUMENT_ACCEPTED_PDF_JPG_PNG"))), isLoading && /*#__PURE__*/React.createElement(Loader, null), Array.isArray(docs) && docs.map(({
     code,
     dropdownData
-  }, index) => /*#__PURE__*/React.createElement("div", {
+  }, index) => /*#__PURE__*/React.createElement(Card, {
     key: index
-  }, /*#__PURE__*/React.createElement(CardSubHeader, null, index + 1, ". ", t(code)), /*#__PURE__*/React.createElement(CardText, {
-    className: "primaryColor"
-  }, dropdownData.map(dropdownData => t(dropdownData === null || dropdownData === void 0 ? void 0 : dropdownData.code)).join(", ")))) : docs.map(({
-    code,
-    dropdownData
-  }, index) => /*#__PURE__*/React.createElement("div", {
-    key: index
-  }, /*#__PURE__*/React.createElement(CardSubHeader, null, index + 1, ". ", t(stringReplaceAll(code, ".", "_"))), dropdownData.map((dropdownData, dropdownIndex) => /*#__PURE__*/React.createElement(CardText, {
-    className: "primaryColor"
-  }, `${dropdownIndex + 1}`, ". ", t(stringReplaceAll(dropdownData === null || dropdownData === void 0 ? void 0 : dropdownData.code, ".", "_")))))) : null)), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(SubmitBar, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      margin: 0
+    }
+  }, index + 1, ". ", t(stringReplaceAll(code, ".", "_")))), dropdownData.map((dropdownData, dropdownIndex) => /*#__PURE__*/React.createElement("div", {
+    key: dropdownIndex,
+    style: {
+      paddingLeft: "10px",
+      marginBottom: "6px",
+      fontSize: "14px"
+    }
+  }, dropdownIndex + 1, ". ", t(stringReplaceAll(dropdownData === null || dropdownData === void 0 ? void 0 : dropdownData.code, ".", "_")))))), /*#__PURE__*/React.createElement(SubmitBar, {
     label: t("COMMON_NEXT"),
     onSubmit: onSelect
-  }))));
+  }));
 };
 
 const VendorSelectAddress = ({
@@ -1696,10 +1819,12 @@ const VendorSelectAddress = ({
     });
   }
   if (userType === "employee") {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
+    return /*#__PURE__*/React.createElement("div", {
+      className: ""
+    }, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
       className: "card-label-smaller"
     }, t("MYCITY_CODE_LABEL"), config.isMandatory ? " * " : null), /*#__PURE__*/React.createElement(Dropdown$2, {
-      className: "form-field",
+      className: "",
       isMandatory: true,
       selected: (cities === null || cities === void 0 ? void 0 : cities.length) === 1 ? cities[0] : selectedCity,
       disable: (cities === null || cities === void 0 ? void 0 : cities.length) === 1,
@@ -1710,7 +1835,7 @@ const VendorSelectAddress = ({
     })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
       className: "card-label-smaller"
     }, t("ES_NEW_APPLICATION_LOCATION_MOHALLA"), config.isMandatory ? " * " : null), /*#__PURE__*/React.createElement(Dropdown$2, {
-      className: "form-field",
+      className: "",
       isMandatory: true,
       selected: selectedLocality,
       option: localities,
@@ -8356,7 +8481,7 @@ const VendorInbox = props => {
           }
         }, {
           Header: t("ES_VENDOR_INBOX_DATE_VENDOR_CREATION"),
-          accessor: "createdTime",
+          accessor: "VendorInboxcreatedTime",
           Cell: ({
             row
           }) => {
@@ -8399,6 +8524,18 @@ const VendorInbox = props => {
               name: `switch-${row.id}`
             });
           }
+        }, {
+          Header: t("ES_VENDOR_ADDITIONAL_DETAILS"),
+          disableSortBy: true,
+          Cell: ({
+            row
+          }) => {
+            return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+              className: "link"
+            }, /*#__PURE__*/React.createElement(Link, {
+              to: "/digit-ui/employee/vendor/registry/additionaldetails/" + row.original["id"]
+            }, /*#__PURE__*/React.createElement("div", null, t("ES_VENDOR_ADDITIONAL_DETAILS"), /*#__PURE__*/React.createElement("br", null)))));
+          }
         }];
       case "VEHICLE":
         return [{
@@ -8851,7 +8988,7 @@ const SearchVendor = () => {
     refetch();
     refetchVendor();
   }, []);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Header, null, t("VENDOR_SEARCH")), /*#__PURE__*/React.createElement(VendorInbox, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(VendorInbox, {
     data: {
       table: tableData
     },
@@ -9043,10 +9180,15 @@ const AddDriver = ({
   heading
 }) => {
   const tenantId = Digit.ULBService.getCurrentTenantId();
+  const {
+    t
+  } = useTranslation();
   const stateId = Digit.ULBService.getStateId();
   const [showToast, setShowToast] = useState(null);
   const history = useHistory();
+  const [currentStep, setCurrentStep] = useState(1);
   const queryClient = useQueryClient();
+  const steps = [t("ES_FSM_REGISTRY_TITLE_NEW_DRIVER")];
   const [mutationHappened, setMutationHappened, clear] = Digit.Hooks.useSessionStorage("FSM_MUTATION_HAPPENED", false);
   const [errorInfo, setErrorInfo, clearError] = Digit.Hooks.useSessionStorage("FSM_ERROR_DATA", false);
   const [successData, setsuccessData, clearSuccessData] = Digit.Hooks.useSessionStorage("FSM_MUTATION_SUCCESS_DATA", false);
@@ -9062,9 +9204,6 @@ const AddDriver = ({
     clearSuccessData();
     clearError();
   }, []);
-  const {
-    t
-  } = useTranslation();
   const Config = DriverConfig(t);
   const [canSubmit, setSubmitValve] = useState(false);
   const defaultValues = {
@@ -9132,10 +9271,20 @@ const AddDriver = ({
     });
   };
   const isMobile = window.Digit.Utils.browser.isMobile();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Header, null, t("ES_FSM_REGISTRY_TITLE_NEW_DRIVER"))), /*#__PURE__*/React.createElement("div", {
-    style: !isMobile ? {
-      marginLeft: "-15px"
-    } : {}
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      width: "100%",
+      gap: "24px"
+    }
+  }, /*#__PURE__*/React.createElement(Timeline, {
+    steps: steps,
+    currentStep: currentStep
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "1",
+      overflowY: "auto"
+    }
   }, /*#__PURE__*/React.createElement(FormComposer, {
     isDisabled: !canSubmit,
     label: t("ES_COMMON_APPLICATION_SUBMIT"),
@@ -9156,7 +9305,7 @@ const AddDriver = ({
     error: showToast.key === "error" ? true : false,
     label: t(showToast.key === "success" ? `ES_FSM_${showToast.action}_SUCCESS` : showToast.action),
     onClose: closeToast
-  })));
+  }))));
 };
 
 const ConfirmationBox = ({
@@ -9189,6 +9338,10 @@ const CloseBtn = props => {
     onClick: props.onClick
   }, /*#__PURE__*/React.createElement(Close, null));
 };
+const formatLabel = key => {
+  const result = key.replace(/([A-Z])/g, " $1");
+  return result.charAt(0).toUpperCase() + result.slice(1);
+};
 const EditVendorDetails = props => {
   var _dsoData$4, _dsoData$4$employeeRe;
   const tenantId = Digit.ULBService.getCurrentTenantId();
@@ -9203,7 +9356,6 @@ const EditVendorDetails = props => {
   } = useParams();
   const [displayMenu, setDisplayMenu] = useState(false);
   const [selectedAction, setSelectedAction] = useState(null);
-  const [config, setCurrentConfig] = useState({});
   const [showModal, setShowModal] = useState(false);
   const [showToast, setShowToast] = useState(null);
   const [vehicles, setVehicles] = useState([]);
@@ -9212,21 +9364,14 @@ const EditVendorDetails = props => {
   const {
     data: dsoData,
     isLoading: isLoading,
-    isSuccess: isDsoSuccess,
-    error: dsoError,
     refetch: refetchDso
   } = Digit.Hooks.fsm.useDsoSearch(tenantId, {
     ids: dsoId
   }, {
     staleTime: Infinity
   });
-  console.log("id in dso :: ", dsoId);
-  console.log("dsoData", dsoData);
   const {
     data: vehicleData,
-    isLoading: isVehicleDataLoading,
-    isSuccess: isVehicleSuccess,
-    error: vehicleError,
     refetch: refetchVehicle
   } = Digit.Hooks.fsm.useVehiclesSearch({
     tenantId,
@@ -9239,9 +9384,6 @@ const EditVendorDetails = props => {
   });
   const {
     data: driverData,
-    isLoading: isDriverDataLoading,
-    isSuccess: isDriverSuccess,
-    error: driverError,
     refetch: refetchDriver
   } = Digit.Hooks.fsm.useDriverSearch({
     tenantId,
@@ -9253,10 +9395,17 @@ const EditVendorDetails = props => {
     }
   });
   const {
-    isLoading: isUpdateLoading,
-    isError: vendorCreateError,
-    data: updateResponse,
-    error: updateError,
+    data: vendorAdditionalData,
+    isLoading: isVendorAdditionalLoading
+  } = Digit.Hooks.vendor.useEmpvendorCommonSearch({
+    tenantId,
+    filters: {
+      vendorId: dsoId
+    }
+  }, {
+    enabled: !!dsoId
+  });
+  const {
     mutate
   } = Digit.Hooks.fsm.useVendorUpdate(tenantId);
   function onActionSelect(action) {
@@ -9447,6 +9596,7 @@ const EditVendorDetails = props => {
   if (isLoading) {
     return /*#__PURE__*/React.createElement(Loader, null);
   }
+  const excludedKeys = ["vendorAdditionalDetailsId", "vendorId", "tenantId", "code", "lastModifiedTime", "createdTime", "lastModifiedBy", "createdBy", "active", "status", "vendorType", "vendorGroup", "narration", "documents"];
   return /*#__PURE__*/React.createElement(React.Fragment, null, !isLoading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
     style: {
       marginBottom: "16px"
@@ -9473,19 +9623,76 @@ const EditVendorDetails = props => {
         marginLeft: "-15px"
       } : {}
     }, /*#__PURE__*/React.createElement(StatusTable, null, detail === null || detail === void 0 ? void 0 : (_detail$values = detail.values) === null || _detail$values === void 0 ? void 0 : _detail$values.map((value, index) => {
-      var _detail$values2;
+      var _detail$values3;
+      if (value.title === "ES_FSM_REGISTRY_DETAILS_ADDITIONAL_DETAILS") {
+        var _vendorAdditionalData, _vendorAdditionalData2, _detail$values2;
+        const additionalDetails = vendorAdditionalData === null || vendorAdditionalData === void 0 ? void 0 : (_vendorAdditionalData = vendorAdditionalData.VendorDetails) === null || _vendorAdditionalData === void 0 ? void 0 : (_vendorAdditionalData2 = _vendorAdditionalData[0]) === null || _vendorAdditionalData2 === void 0 ? void 0 : _vendorAdditionalData2.vendorAdditionalDetails;
+        return /*#__PURE__*/React.createElement(Row, {
+          key: t(value.title),
+          label: t(value.title),
+          text: isVendorAdditionalLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement("div", null, additionalDetails ? /*#__PURE__*/React.createElement("div", {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              width: "100%"
+            }
+          }, /*#__PURE__*/React.createElement("div", {
+            style: {
+              marginBottom: "8px"
+            }
+          }, typeof additionalDetails === "object" ? Object.entries(additionalDetails).filter(([key]) => !excludedKeys.includes(key)).map(([key, val]) => {
+            if (typeof val === "object" && val !== null) return null;
+            const safeKey = String(key);
+            const safeVal = val !== null && val !== undefined ? String(val) : "";
+            return /*#__PURE__*/React.createElement("div", {
+              key: safeKey,
+              style: {
+                marginBottom: "6px"
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                fontWeight: "bold",
+                marginRight: "6px",
+                color: "#000000ff"
+              }
+            }, t(formatLabel(safeKey)), ":"), /*#__PURE__*/React.createElement("span", null, safeVal ? t(safeVal) : "N/A"));
+          }) : /*#__PURE__*/React.createElement("span", null, t(String(additionalDetails)))), /*#__PURE__*/React.createElement("span", {
+            className: "link",
+            style: {
+              color: "#a82227",
+              cursor: "pointer",
+              textDecoration: "underline",
+              marginTop: "8px",
+              display: "inline-block"
+            },
+            onClick: () => history.push(`/digit-ui/employee/vendor/registry/additionaldetails/info?vendorId=${dsoId}`)
+          }, t("Edit Details"))) : /*#__PURE__*/React.createElement("span", {
+            className: "link",
+            style: {
+              color: "#a82227",
+              cursor: "pointer",
+              textDecoration: "underline"
+            },
+            onClick: () => history.push(`/digit-ui/employee/vendor/registry/additionaldetails/info?vendorId=${dsoId}`)
+          }, t("Add Additional Details"))),
+          last: index === (detail === null || detail === void 0 ? void 0 : (_detail$values2 = detail.values) === null || _detail$values2 === void 0 ? void 0 : _detail$values2.length) - 1,
+          caption: value.caption,
+          className: `border-none ${!isMobile ? "vendor-details-row" : ""}`
+        });
+      }
       return /*#__PURE__*/React.createElement(Row, {
-        key: t(value.title),
-        label: t(value.title),
-        text: t(value.value) || "N/A",
-        last: index === (detail === null || detail === void 0 ? void 0 : (_detail$values2 = detail.values) === null || _detail$values2 === void 0 ? void 0 : _detail$values2.length) - 1,
+        key: t(String(value.title)),
+        label: t(String(value.title)),
+        text: value.value ? t(String(value.value)) : "N/A",
+        last: index === (detail === null || detail === void 0 ? void 0 : (_detail$values3 = detail.values) === null || _detail$values3 === void 0 ? void 0 : _detail$values3.length) - 1,
         caption: value.caption,
         className: `border-none ${!isMobile ? "vendor-details-row" : ""}`
       });
     }), detail === null || detail === void 0 ? void 0 : (_detail$child = detail.child) === null || _detail$child === void 0 ? void 0 : _detail$child.map((data, index) => {
       var _data$values;
       return /*#__PURE__*/React.createElement(Card, {
-        className: "card-with-background"
+        className: "card-with-background",
+        key: data.id || index
       }, /*#__PURE__*/React.createElement("div", {
         className: "card-head"
       }, /*#__PURE__*/React.createElement("h2", null, t(detail.type), " ", index + 1), /*#__PURE__*/React.createElement("div", {
@@ -9510,12 +9717,12 @@ const EditVendorDetails = props => {
         className: "delete",
         fill: "#a82227"
       })))), data === null || data === void 0 ? void 0 : (_data$values = data.values) === null || _data$values === void 0 ? void 0 : _data$values.map((value, index) => {
-        var _detail$values3;
+        var _detail$values4;
         return /*#__PURE__*/React.createElement(Row, {
-          key: t(value.title),
-          label: t(value.title),
-          text: t(value.value) || "N/A",
-          last: index === (detail === null || detail === void 0 ? void 0 : (_detail$values3 = detail.values) === null || _detail$values3 === void 0 ? void 0 : _detail$values3.length) - 1,
+          key: t(String(value.title)),
+          label: t(String(value.title)),
+          text: value.value ? t(String(value.value)) : "N/A",
+          last: index === (detail === null || detail === void 0 ? void 0 : (_detail$values4 = detail.values) === null || _detail$values4 === void 0 ? void 0 : _detail$values4.length) - 1,
           caption: value.caption,
           className: "border-none",
           textStyle: value.value === "ACTIVE" ? {
@@ -9758,7 +9965,12 @@ const AddVehicle = ({
   const stateId = Digit.ULBService.getStateId();
   const [showToast, setShowToast] = useState(null);
   const history = useHistory();
+  const {
+    t
+  } = useTranslation();
   const queryClient = useQueryClient();
+  const [currentStep, setCurrentStep] = useState(1);
+  const steps = [t("ES_FSM_REGISTRY_TITLE_NEW_VEHICLE")];
   const [mutationHappened, setMutationHappened, clear] = Digit.Hooks.useSessionStorage("FSM_MUTATION_HAPPENED", false);
   const [errorInfo, setErrorInfo, clearError] = Digit.Hooks.useSessionStorage("FSM_ERROR_DATA", false);
   const [successData, setsuccessData, clearSuccessData] = Digit.Hooks.useSessionStorage("FSM_MUTATION_SUCCESS_DATA", false);
@@ -9774,9 +9986,6 @@ const AddVehicle = ({
     clearSuccessData();
     clearError();
   }, []);
-  const {
-    t
-  } = useTranslation();
   const Config = VehicleConfig(t);
   Config[0].body.forEach(item => {
     if (item.label === "ES_FSM_REGISTRY_VEHICLE_NUMBER") {
@@ -9883,10 +10092,20 @@ const AddVehicle = ({
     });
   };
   const isMobile = window.Digit.Utils.browser.isMobile();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Header, null, t("ES_FSM_REGISTRY_TITLE_NEW_VEHICLE"))), /*#__PURE__*/React.createElement("div", {
-    style: !isMobile ? {
-      marginLeft: "-15px"
-    } : {}
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      width: "100%",
+      gap: "24px"
+    }
+  }, /*#__PURE__*/React.createElement(Timeline, {
+    steps: steps,
+    currentStep: currentStep
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "1",
+      overflowY: "auto"
+    }
   }, /*#__PURE__*/React.createElement(FormComposer, {
     isDisabled: !canSubmit,
     label: t("ES_COMMON_APPLICATION_SUBMIT"),
@@ -9907,7 +10126,7 @@ const AddVehicle = ({
     error: showToast.key === "error" ? true : false,
     label: t(showToast.key === "success" ? `ES_FSM_REGISTRY_${showToast.action}_SUCCESS` : showToast.action),
     onClose: closeToast
-  })));
+  }))));
 };
 
 const createConfig = [{
@@ -9986,7 +10205,7 @@ const VENDORCreate = ({
     }
     let {
       nextStep = {}
-    } = config.find(routeObj => routeObj.route === (currentPath || '0'));
+    } = config.find(routeObj => routeObj.route === (currentPath || "0"));
     let redirectWithHistory = history.push;
     if (skipStep) {
       redirectWithHistory = history.replace;
@@ -10053,9 +10272,22 @@ const VENDORCreate = ({
     config = config.concat(obj.body.filter(a => !a.hideInCitizen));
   });
   config.indexRoute = "info";
+  console.log(commonFields, "commanFields");
+  console.log(config, "config");
   const CheckPage = (_Digit = Digit) === null || _Digit === void 0 ? void 0 : (_Digit$ComponentRegis = _Digit.ComponentRegistryService) === null || _Digit$ComponentRegis === void 0 ? void 0 : _Digit$ComponentRegis.getComponent("VENDORCheckPage");
   const NewResponse = (_Digit2 = Digit) === null || _Digit2 === void 0 ? void 0 : (_Digit2$ComponentRegi = _Digit2.ComponentRegistryService) === null || _Digit2$ComponentRegi === void 0 ? void 0 : _Digit2$ComponentRegi.getComponent("NewResponse");
-  return /*#__PURE__*/React.createElement(Switch, null, config.map((routeObj, index) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      width: "100%",
+      gap: "24px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "1",
+      overflowY: "auto"
+    }
+  }, /*#__PURE__*/React.createElement(Switch, null, config.map((routeObj, index) => {
     const {
       component,
       texts,
@@ -10090,7 +10322,7 @@ const VENDORCreate = ({
     onSuccess: onSuccess
   })), /*#__PURE__*/React.createElement(Route, null, /*#__PURE__*/React.createElement(Redirect, {
     to: `${match.path}/${config.indexRoute}`
-  })));
+  }))))));
 };
 
 const ActionButton = ({
@@ -10119,6 +10351,7 @@ const CheckPage = ({
   } = useTranslation();
   const history = useHistory();
   const [categoriesWiseData, setCategoriesWiseData] = useState();
+  const steps = ["VENDOR_ADDITIONAL_DETAILS", "VENDOR_DOCUMENT_DETAILS", "VENDOR_SUMMARY"];
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const stateTenantId = Digit.ULBService.getStateId();
   const {
@@ -10131,9 +10364,21 @@ const CheckPage = ({
   const setdeclarationhandler = () => {
     setAgree(!agree);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, window.location.href.includes("/employee") ? /*#__PURE__*/React.createElement(Timeline, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      width: "100%",
+      gap: "24px"
+    }
+  }, window.location.href.includes("/employee") ? /*#__PURE__*/React.createElement(Timeline, {
+    steps: steps,
     currentStep: 5
-  }) : null, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeader, null, t("VENDOR_CHECK_DETAILS")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(CardSubHeader, null, t("VENDOR_ADDITIONAL_DETAILS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, {
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "1",
+      overflowY: "auto"
+    }
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeader, null, t("VENDOR_CHECK_DETAILS")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(CardSubHeader, null, t("VENDOR_ADDITIONAL_DETAILS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, {
     label: t("VENDOR_ID"),
     text: `${t(checkForNA(vendordet === null || vendordet === void 0 ? void 0 : vendordet.VendorId))}`,
     actionButton: /*#__PURE__*/React.createElement(ActionButton, {
@@ -10237,12 +10482,13 @@ const CheckPage = ({
     onChange: setdeclarationhandler,
     styles: {
       height: "auto"
-    }
+    },
+    checked: agree
   })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(SubmitBar, {
     label: t("COMMON_BUTTON_SUBMIT"),
     onSubmit: onSubmit,
     disabled: !agree
-  })));
+  })))));
 };
 
 const GetActionMessage = props => {
@@ -11240,6 +11486,113 @@ const SelectVehicleType = ({
   })));
 };
 
+const BankDetailsComponent = ({
+  t,
+  config,
+  onSelect,
+  userType,
+  formData,
+  ...props
+}) => {
+  const [ifsc, setIfsc] = useState((formData === null || formData === void 0 ? void 0 : formData.ifscCode) || "");
+  const [bankName, setBankName] = useState((formData === null || formData === void 0 ? void 0 : formData.bankName) || "");
+  const [branchName, setBranchName] = useState((formData === null || formData === void 0 ? void 0 : formData.branchName) || "");
+  const [accountNumber, setAccountNumber] = useState((formData === null || formData === void 0 ? void 0 : formData.accountNumber) || "");
+  const [showToast, setShowToast] = useState(null);
+  useEffect(() => {
+    if (ifsc.length === 11) {
+      fetch(`https://ifsc.razorpay.com/${ifsc}`).then(response => response.json()).then(data => {
+        if (data && data.BANK && data.BRANCH) {
+          setBankName(data.BANK);
+          setBranchName(data.BRANCH);
+          if (typeof onSelect === 'function') {
+            onSelect(config.key, {
+              bankName: data.BANK,
+              branchName: data.BRANCH,
+              ifscCode: ifsc,
+              accountNumber: accountNumber
+            });
+          }
+          setShowToast({
+            error: false,
+            label: t("VALID_IFSC_CODE")
+          });
+        } else {
+          setShowToast({
+            error: true,
+            label: t("INVALID_IFSC_CODE")
+          });
+        }
+      }).catch(() => {
+        setShowToast({
+          error: true,
+          label: t("INVALID_IFSC_CODE")
+        });
+      });
+    }
+  }, [ifsc]);
+  useEffect(() => {
+    if (typeof onSelect === 'function') {
+      onSelect(config.key, {
+        bankName,
+        branchName,
+        ifscCode: ifsc,
+        accountNumber
+      });
+    }
+  }, [accountNumber, bankName, branchName, ifsc]);
+  const handleIfscChange = e => {
+    const input = e.target.value.replace(/[^a-zA-Z0-9]/g, "");
+    if (input.length <= 11) {
+      setIfsc(input);
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_IFSC_CODE")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    name: "ifscCode",
+    value: ifsc,
+    onChange: handleIfscChange,
+    style: {
+      width: "100%"
+    },
+    maxLength: 11
+  }), /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_ACCOUNT_NUMBER")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    name: "accountNumber",
+    value: accountNumber,
+    onChange: e => setAccountNumber(e.target.value),
+    style: {
+      width: "100%"
+    }
+  }), /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_BANK_NAME")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    name: "bankName",
+    value: bankName,
+    onChange: e => setBankName(e.target.value),
+    disabled: ifsc.length === 11 && bankName,
+    style: {
+      width: "100%"
+    }
+  }), /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_BRANCH_NAME")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    name: "branchName",
+    value: branchName,
+    onChange: e => setBranchName(e.target.value),
+    disabled: ifsc.length === 11 && branchName,
+    style: {
+      width: "100%"
+    }
+  }));
+};
+
 const componentsToRegister = {
   VendorDetails,
   VendorDocuments,
@@ -11250,6 +11603,7 @@ const componentsToRegister = {
   SearchVendor,
   SelectServiceType,
   SelectVehicleType,
+  BankDetailsComponent,
   AddDriver,
   EditVendorDetails,
   AddVehicle,