@djb25/digit-ui-module-ws 1.0.62 → 1.0.63

package/dist/index.modern.js

@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useEffect, useRef, Fragment as Fragment$1, useReducer, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useHistory, useLocation, Switch, Route, useRouteMatch, Redirect, useParams } from 'react-router-dom';
-import { Loader, Card, KeyNote, SubmitBar, InfoBannerIcon, SearchForm, SearchField, Dropdown, TextInput, Table, Banner, CardText, ActionBar, HomeIcon, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, VerticalTimeline, CollapsibleCardPage, LabelFieldPair, CardLabel, CardLabelError, CheckBox, LayoutWrapper, PrintBtnCommon, MultiLink, LinkButton, Toast, TickMark, FormStep, RadioOrSelect, CardHeader, CitizenInfoLabel, CardSubHeader, DatePicker, RadioButtons, UploadFile, ViewsIcon, Modal, DeleteIcon, WrapUnMaskComponent, MobileNumber, StatusTable, Row, Header, CardSectionHeader, InfoIcon, TextArea, FilterFormField, RemoveableTag, MultiSelectDropdown, InboxComposer, DropIcon, WSICon, EmployeeModuleCard, SearchAction, PopUp, DetailsCard, CloseSvg, Localities, DownloadBtnCommon, CollectionIcon, ResponseComposer, TelePhone, DisplayPhotos, PDFSvg, GenericFileIcon, EditIcon, Label, CardSectionSubText, DownloadIcon, CardLabelDesc, FormComposer, MultiUploadWrapper, Close as Close$e, BreakLine, AddIcon, CheckPoint, ConnectingCheckPoints, Menu, ButtonSelector, CitizenHomeCard } from '@djb25/digit-ui-react-components';
+import { Loader, Card, KeyNote, SubmitBar, InfoBannerIcon, SearchForm, SearchField, Dropdown, TextInput, Table, Banner, CardText, ActionBar, HomeIcon, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, VerticalTimeline, CollapsibleCardPage, LabelFieldPair, CardLabel, CardLabelError, CheckBox, LayoutWrapper, PrintBtnCommon, MultiLink, LinkButton, Toast, TickMark, FormStep, RadioOrSelect, CardHeader, CitizenInfoLabel, CardSubHeader, DatePicker, RadioButtons, UploadFile, ViewsIcon, Modal, DeleteIcon, WrapUnMaskComponent, MobileNumber, StatusTable, Row, CardSectionHeader, InfoIcon, TextArea, Header, FilterFormField, RemoveableTag, MultiSelectDropdown, InboxComposer, DropIcon, WSICon, EmployeeModuleCard, SearchAction, PopUp, DetailsCard, CloseSvg, Localities, DownloadBtnCommon, CollectionIcon, ResponseComposer, TelePhone, DisplayPhotos, PDFSvg, GenericFileIcon, EditIcon, Label, CardSectionSubText, DownloadIcon, CardLabelDesc, FormComposer, MultiUploadWrapper, Close as Close$e, BreakLine, AddIcon, CheckPoint, ConnectingCheckPoints, Menu, ButtonSelector, CitizenHomeCard } from '@djb25/digit-ui-react-components';
 import { useForm, Controller, useWatch, useFormContext } from 'react-hook-form';
 import { read, utils as utils$1 } from 'xlsx';
 import { useQueryClient } from 'react-query';
@@ -17387,16 +17387,7 @@ const WSDisconnectionDocsRequired = _ref => {
       }
     })));
   }
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      margin: "16px"
-    }
-  }, /*#__PURE__*/React.createElement(Header, {
-    styles: {
-      fontSize: "32px",
-      marginLeft: "18px"
-    }
-  }, t("WS_WATER_AND_SEWERAGE_DISCONNECTION")), /*#__PURE__*/React.createElement(Card, null, wsDocsLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Card, null, wsDocsLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement("div", {
     id: "documents-div"
   }, wsDocs === null || wsDocs === void 0 ? void 0 : (_wsDocs$Disconnection2 = wsDocs.DisconnectionDocuments) === null || _wsDocs$Disconnection2 === void 0 ? void 0 : _wsDocs$Disconnection2.map((doc, index) => {
     var _doc$dropdownData3;
@@ -19009,17 +19000,20 @@ const WSDisconnectionForm = _ref => {
   const _useState3 = useState(null),
     error = _useState3[0],
     setError = _useState3[1];
-  const _useState4 = useState([]),
-    disconnectionTypeList = _useState4[0],
-    setDisconnectionTypeList = _useState4[1];
+  const _useState4 = useState(null),
+    docError = _useState4[0],
+    setDocError = _useState4[1];
   const _useState5 = useState([]),
-    disconnectionReasonList = _useState5[0],
-    setDisconnectionReasonList = _useState5[1];
-  const _useState6 = useState(false),
-    setCheckRequiredFields = _useState6[1];
+    disconnectionTypeList = _useState5[0],
+    setDisconnectionTypeList = _useState5[1];
+  const _useState6 = useState([]),
+    disconnectionReasonList = _useState6[0],
+    setDisconnectionReasonList = _useState6[1];
   const _useState7 = useState(false),
-    isEnableLoader = _useState7[0],
-    setIsEnableLoader = _useState7[1];
+    setCheckRequiredFields = _useState7[1];
+  const _useState8 = useState(false),
+    isEnableLoader = _useState8[0],
+    setIsEnableLoader = _useState8[1];
   const _Digit$Hooks$ws$useMD = Digit.Hooks.ws.useMDMS(stateCode, "ws-services-masters", ["disconnectionType"]),
     isMdmsLoading = _Digit$Hooks$ws$useMD.isMdmsLoading,
     mdmsData = _Digit$Hooks$ws$useMD.data;
@@ -19047,7 +19041,7 @@ const WSDisconnectionForm = _ref => {
   };
   useEffect(() => {
     const oldData = _extends({}, disconnectionData);
-    oldData['documents'] = documents;
+    oldData["documents"] = documents;
     setDisconnectionData(oldData);
   }, [documents]);
   useEffect(() => {
@@ -19092,25 +19086,29 @@ const WSDisconnectionForm = _ref => {
   const onSubmit = function (data) {
     try {
       const appDate = new Date();
-      const proposedDate = format(addDays(appDate, slaData === null || slaData === void 0 ? void 0 : slaData.slaDays), 'yyyy-MM-dd').toString();
+      const slaDays = (slaData === null || slaData === void 0 ? void 0 : slaData.slaDays) || 0;
+      const proposedDate = format(addDays(appDate, slaDays), "yyyy-MM-dd").toString();
+      const selectedDateEpoch = data !== null && data !== void 0 && data.date ? convertDateToEpoch(data.date) : null;
+      const proposedDateEpoch = convertDateToEpoch(proposedDate);
+      const selectedDateIsInvalid = !(data !== null && data !== void 0 && data.date) || typeof selectedDateEpoch !== "number" || selectedDateEpoch < proposedDateEpoch;
       const _temp7 = function () {
-        if (convertDateToEpoch(data === null || data === void 0 ? void 0 : data.date) <= convertDateToEpoch(proposedDate)) {
+        if (selectedDateIsInvalid) {
           setError({
             key: "error",
             message: "PROPOSED_DISCONNECTION_INVALID_DATE"
           });
           setTimeout(() => {
-            setError(false);
+            setError(null);
           }, 3000);
         } else {
           const _temp6 = function (_data$type, _data$type$value) {
-            if ((data === null || data === void 0 ? void 0 : (_data$type = data.type) === null || _data$type === void 0 ? void 0 : (_data$type$value = _data$type.value) === null || _data$type$value === void 0 ? void 0 : _data$type$value.name) == "Temporary" && convertDateToEpoch(data === null || data === void 0 ? void 0 : data.endDate) <= convertDateToEpoch(data === null || data === void 0 ? void 0 : data.date)) {
+            if ((data === null || data === void 0 ? void 0 : (_data$type = data.type) === null || _data$type === void 0 ? void 0 : (_data$type$value = _data$type.value) === null || _data$type$value === void 0 ? void 0 : _data$type$value.code) === "Temporary" && convertDateToEpoch(data === null || data === void 0 ? void 0 : data.endDate) <= convertDateToEpoch(data === null || data === void 0 ? void 0 : data.date)) {
               setError({
                 key: "error",
                 message: "PROPOSED_DISCONNECTION_INVALID_END_DATE"
               });
               setTimeout(() => {
-                setError(false);
+                setError(null);
               }, 3000);
             } else {
               const _temp5 = function (_disconnectionData$re) {
@@ -19120,7 +19118,7 @@ const WSDisconnectionForm = _ref => {
                     message: "PLEASE_FILL_MANDATORY_DETAILS"
                   });
                   setTimeout(() => {
-                    setError(false);
+                    setError(null);
                   }, 3000);
                 } else {
                   var _applicationData$appl;
@@ -19251,7 +19249,7 @@ const WSDisconnectionForm = _ref => {
     }
   };
   if (isMdmsLoading || wsDocsLoading || isEnableLoader || slaLoading) return /*#__PURE__*/React.createElement(Loader, null);
-  if (userType === 'citizen') {
+  if (userType === "citizen") {
     var _disconnectionData$ty, _disconnectionData$ty2, _disconnectionData$ty3, _disconnectionData$ty4, _disconnectionData$ty5, _disconnectionData$re2, _disconnectionData$re3, _disconnectionData$re4, _disconnectionData$re5;
     return /*#__PURE__*/React.createElement("div", null, userType === "citizen" && /*#__PURE__*/React.createElement(DisconnectTimeline, {
       currentStep: 1
@@ -19364,8 +19362,8 @@ const WSDisconnectionForm = _ref => {
       onSubmit: () => {
         var _disconnectionData$ty6, _disconnectionData$ty7;
         const appDate = new Date();
-        const proposedDate = format(addDays(appDate, slaData === null || slaData === void 0 ? void 0 : slaData.slaDays), 'yyyy-MM-dd').toString();
-        if (convertDateToEpoch(disconnectionData === null || disconnectionData === void 0 ? void 0 : disconnectionData.date) <= convertDateToEpoch(proposedDate)) {
+        const proposedDate = format(addDays(appDate, slaData === null || slaData === void 0 ? void 0 : slaData.slaDays), "yyyy-MM-dd").toString();
+        if (convertDateToEpoch(disconnectionData === null || disconnectionData === void 0 ? void 0 : disconnectionData.date) < convertDateToEpoch(proposedDate)) {
           setError({
             key: "error",
             message: "PROPOSED_DISCONNECTION_INVALID_DATE"
@@ -19402,26 +19400,11 @@ const WSDisconnectionForm = _ref => {
       info: t("CS_COMMON_INFO")
     }));
   }
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      margin: "16px"
-    }
-  }, /*#__PURE__*/React.createElement(Header, {
-    styles: {
-      fontSize: "32px",
-      marginLeft: "18px"
-    }
-  }, t("WS_WATER_AND_SEWERAGE_DISCONNECTION")), /*#__PURE__*/React.createElement(FormStep, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormStep, {
     config: config,
     onSelect: handleEmployeeSubmit,
     onSkip: onSkip,
     t: t
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: "10px",
-      paddingTop: "20px",
-      marginTop: "10px"
-    }
   }, /*#__PURE__*/React.createElement(CardSectionHeader, null, t("CS_TITLE_APPLICATION_DETAILS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
     key: t("PDF_STATIC_LABEL_CONSUMER_NUMBER_LABEL"),
     label: "" + t("PDF_STATIC_LABEL_CONSUMER_NUMBER_LABEL"),
@@ -19545,18 +19528,23 @@ const WSDisconnectionForm = _ref => {
       key: index,
       document: document,
       t: t,
-      error: error,
-      setError: setError,
+      error: docError,
+      setError: setDocError,
       setDocuments: setDocuments,
       documents: documents,
       setCheckRequiredFields: setCheckRequiredFields
     });
+  }), docError && /*#__PURE__*/React.createElement(Toast, {
+    error: (docError === null || docError === void 0 ? void 0 : docError.key) === "error" ? true : false,
+    label: t(docError === null || docError === void 0 ? void 0 : docError.message),
+    warning: docError === null || docError === void 0 ? void 0 : docError.warning,
+    onClose: () => setDocError(null)
   }), error && /*#__PURE__*/React.createElement(Toast, {
     error: (error === null || error === void 0 ? void 0 : error.key) === "error" ? true : false,
     label: t(error === null || error === void 0 ? void 0 : error.message),
     warning: error === null || error === void 0 ? void 0 : error.warning,
     onClose: () => setError(null)
-  }))), /*#__PURE__*/React.createElement(ActionBar, {
+  })), /*#__PURE__*/React.createElement(ActionBar, {
     style: {
       display: "flex",
       justifyContent: "flex-end",
@@ -19576,7 +19564,6 @@ function SelectDocument$1(_ref2) {
     key = _ref2.key,
     doc = _ref2.document,
     setDocuments = _ref2.setDocuments,
-    error = _ref2.error,
     setError = _ref2.setError,
     documents = _ref2.documents,
     setCheckRequiredFields = _ref2.setCheckRequiredFields;
@@ -19585,19 +19572,19 @@ function SelectDocument$1(_ref2) {
     return item === null || item === void 0 ? void 0 : (_item$documentType = item.documentType) === null || _item$documentType === void 0 ? void 0 : _item$documentType.includes(doc === null || doc === void 0 ? void 0 : doc.code);
   })[0];
   const tenantId = Digit.ULBService.getCurrentTenantId();
-  const _useState8 = useState(filteredDocument ? _extends({}, filteredDocument, {
+  const _useState9 = useState(filteredDocument ? _extends({}, filteredDocument, {
       active: true,
       code: filteredDocument === null || filteredDocument === void 0 ? void 0 : filteredDocument.documentType,
       i18nKey: filteredDocument === null || filteredDocument === void 0 ? void 0 : filteredDocument.documentType
     }) : (doc === null || doc === void 0 ? void 0 : (_doc$dropdownData = doc.dropdownData) === null || _doc$dropdownData === void 0 ? void 0 : _doc$dropdownData.length) === 1 ? doc === null || doc === void 0 ? void 0 : doc.dropdownData[0] : {}),
-    selectedDocument = _useState8[0],
-    setSelectedDocument = _useState8[1];
-  const _useState9 = useState(null),
-    file = _useState9[0],
-    setFile = _useState9[1];
-  const _useState0 = useState(() => (filteredDocument === null || filteredDocument === void 0 ? void 0 : filteredDocument.fileStoreId) || null),
-    uploadedFile = _useState0[0],
-    setUploadedFile = _useState0[1];
+    selectedDocument = _useState9[0],
+    setSelectedDocument = _useState9[1];
+  const _useState0 = useState(null),
+    file = _useState0[0],
+    setFile = _useState0[1];
+  const _useState1 = useState(() => (filteredDocument === null || filteredDocument === void 0 ? void 0 : filteredDocument.fileStoreId) || null),
+    uploadedFile = _useState1[0],
+    setUploadedFile = _useState1[1];
   const handleSelectDocument = value => setSelectedDocument(value);
   function selectfile(e) {
     setFile(e.target.files[0]);
@@ -19620,9 +19607,9 @@ function SelectDocument$1(_ref2) {
   useEffect(() => {
     (function () {
       try {
-        setError(null);
         const _temp0 = function () {
           if (file) {
+            setError(null);
             const _temp9 = function () {
               if (file.size >= 5242880) {
                 setError({
@@ -19691,8 +19678,7 @@ function SelectDocument$1(_ref2) {
       setUploadedFile(null);
       setCheckRequiredFields(true);
     },
-    message: uploadedFile ? "1 " + t("CS_ACTION_FILEUPLOADED") : t("ES_NO_FILE_SELECTED_LABEL"),
-    error: error
+    message: uploadedFile ? "1 " + t("CS_ACTION_FILEUPLOADED") : t("ES_NO_FILE_SELECTED_LABEL")
   }))));
 }
 
@@ -43176,9 +43162,9 @@ function PropertyDocuments(_ref) {
       var _document$values;
       document === null || document === void 0 ? void 0 : (_document$values = document.values) === null || _document$values === void 0 ? void 0 : _document$values.forEach(value => {
         if (!value.isPhoto) {
-          var _ref2, _checkedMap$value$ori, _value$originalDoc, _value$originalDoc2;
+          var _ref2, _checkedMap$value$fil, _value$originalDoc;
           requiredDocsCount++;
-          const isChecked = (_ref2 = (_checkedMap$value$ori = checkedMap[value === null || value === void 0 ? void 0 : (_value$originalDoc = value.originalDoc) === null || _value$originalDoc === void 0 ? void 0 : _value$originalDoc.id]) != null ? _checkedMap$value$ori : value === null || value === void 0 ? void 0 : (_value$originalDoc2 = value.originalDoc) === null || _value$originalDoc2 === void 0 ? void 0 : _value$originalDoc2.isVerified) != null ? _ref2 : false;
+          const isChecked = (_ref2 = (_checkedMap$value$fil = checkedMap[value === null || value === void 0 ? void 0 : value.fileStoreId]) != null ? _checkedMap$value$fil : value === null || value === void 0 ? void 0 : (_value$originalDoc = value.originalDoc) === null || _value$originalDoc === void 0 ? void 0 : _value$originalDoc.isVerified) != null ? _ref2 : false;
           if (isChecked) {
             checkedCount++;
           }
@@ -43422,7 +43408,7 @@ function PropertyDocuments(_ref) {
         style: {
           cursor: "pointer"
         }
-      }, /*#__PURE__*/React.createElement(ViewsIcon, null)), !isPhoto && ((_ref3, _checkedMap$value$ori2, _value$originalDoc3, _value$originalDoc4, _value$originalDoc5, _value$originalDoc6, _value$originalDoc7) => {
+      }, /*#__PURE__*/React.createElement(ViewsIcon, null)), !isPhoto && ((_ref3, _checkedMap$value$ori, _value$originalDoc2, _value$originalDoc3, _value$originalDoc4, _value$originalDoc5) => {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
           onClick: () => {
             if (fileUrl) {
@@ -43464,7 +43450,7 @@ function PropertyDocuments(_ref) {
             margin: 0
           }
         }, /*#__PURE__*/React.createElement("input", {
-          key: "chk-" + (value === null || value === void 0 ? void 0 : (_value$originalDoc5 = value.originalDoc) === null || _value$originalDoc5 === void 0 ? void 0 : _value$originalDoc5.id) + "-" + (value === null || value === void 0 ? void 0 : (_value$originalDoc6 = value.originalDoc) === null || _value$originalDoc6 === void 0 ? void 0 : _value$originalDoc6.isVerified),
+          key: "chk-" + (value === null || value === void 0 ? void 0 : value.fileStoreId) + "-" + (value === null || value === void 0 ? void 0 : (_value$originalDoc4 = value.originalDoc) === null || _value$originalDoc4 === void 0 ? void 0 : _value$originalDoc4.isVerified),
           type: "checkbox",
           className: "verify-doc-checkbox",
           style: {
@@ -43474,16 +43460,15 @@ function PropertyDocuments(_ref) {
             cursor: applicationStatus && applicationStatus !== "PENDING_FOR_DOCUMENT_VERIFICATION" ? "not-allowed" : "pointer"
           },
           disabled: applicationStatus && applicationStatus !== "PENDING_FOR_DOCUMENT_VERIFICATION",
-          defaultChecked: value === null || value === void 0 ? void 0 : (_value$originalDoc7 = value.originalDoc) === null || _value$originalDoc7 === void 0 ? void 0 : _value$originalDoc7.isVerified,
+          defaultChecked: value === null || value === void 0 ? void 0 : (_value$originalDoc5 = value.originalDoc) === null || _value$originalDoc5 === void 0 ? void 0 : _value$originalDoc5.isVerified,
           onChange: e => {
-            var _value$originalDoc8;
             const checked = e.target.checked;
             if (value !== null && value !== void 0 && value.originalDoc) {
               value.originalDoc.isVerified = checked;
             }
-            if (value !== null && value !== void 0 && (_value$originalDoc8 = value.originalDoc) !== null && _value$originalDoc8 !== void 0 && _value$originalDoc8.id) {
+            if (value !== null && value !== void 0 && value.fileStoreId) {
               setCheckedMap(prev => _extends({}, prev, {
-                [value.originalDoc.id]: checked
+                [value.fileStoreId]: checked
               }));
             }
           }
@@ -45534,7 +45519,7 @@ function ApplicationDetailsActionBar(_ref) {
       if (typeof window !== "undefined" && typeof window.isDocumentsVerified !== "undefined") {
         return !window.isDocumentsVerified;
       }
-      return false;
+      return true;
     }),
     isSubmitDisabled = _React$useState[0],
     setIsSubmitDisabled = _React$useState[1];
@@ -45547,7 +45532,10 @@ function ApplicationDetailsActionBar(_ref) {
     };
     if (typeof window !== "undefined") {
       window.addEventListener("DOCUMENTS_VERIFIED", handleDocVerification);
-      return () => window.removeEventListener("DOCUMENTS_VERIFIED", handleDocVerification);
+      return () => {
+        window.removeEventListener("DOCUMENTS_VERIFIED", handleDocVerification);
+        delete window.isDocumentsVerified;
+      };
     }
   }, []);
   if (window.location.href.includes("/obps") || window.location.href.includes("/noc")) {
@@ -46788,19 +46776,15 @@ const GetConnectionDetails = () => {
       onClick: props.onClick
     }, /*#__PURE__*/React.createElement(Close, null));
   };
-  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "employee-application-details",
-    style: {
-      marginBottom: "15px"
-    }
-  }, /*#__PURE__*/React.createElement("style", null, ".multilinkWrapper employee-mulitlink-main-divNew { max-width:100%; maegin-top:-20px}"), /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
     style: {
-      display: "flex"
+      position: "relative"
     }
   }, dowloadOptions && dowloadOptions.length > 0 && /*#__PURE__*/React.createElement("div", {
     style: {
-      maxWidth: "100% !imnportant",
-      zIndex: "10"
+      position: "absolute",
+      right: "24px",
+      zIndex: 11
     }
   }, /*#__PURE__*/React.createElement(MultiLink, {
     className: "multilinkWrapper employee-mulitlink-main-divNew",
@@ -46809,11 +46793,8 @@ const GetConnectionDetails = () => {
     options: dowloadOptions,
     downloadBtnClassName: "employee-download-btn-className",
     optionsClassName: "employee-options-btn-className",
-    ref: menuRef,
-    style: {
-      maxWidth: "100%"
-    }
-  })))), /*#__PURE__*/React.createElement(ApplicationDetails, {
+    ref: menuRef
+  })), /*#__PURE__*/React.createElement(ApplicationDetails, {
     applicationDetails: applicationDetails,
     isLoading: isLoading,
     isDataLoading: isLoading,
@@ -46828,7 +46809,7 @@ const GetConnectionDetails = () => {
     labelComponent: /*#__PURE__*/React.createElement(WSInfoLabel, {
       t: t
     })
-  }), ifUserRoleExists("WS_CEMP") && checkApplicationStatus && !(applicationDetails !== null && applicationDetails !== void 0 && applicationDetails.isDisconnectionDone) ? /*#__PURE__*/React.createElement(ActionBar, null, displayMenu ? /*#__PURE__*/React.createElement(Menu, {
+  })), ifUserRoleExists("WS_CEMP") && checkApplicationStatus && !(applicationDetails !== null && applicationDetails !== void 0 && applicationDetails.isDisconnectionDone) ? /*#__PURE__*/React.createElement(ActionBar, null, displayMenu ? /*#__PURE__*/React.createElement(Menu, {
     options: showAction,
     localeKeyPrefix: "WS",
     t: t,
@@ -46897,7 +46878,7 @@ const GetConnectionDetails = () => {
     error: showActionToast.key,
     label: t("" + showActionToast.label),
     onClose: closeBillToast
-  })));
+  }));
 };
 
 const ActivateConnection = () => {
@@ -49783,6 +49764,9 @@ const GetDisconnectionDetails = () => {
   const _useState2 = useState(null),
     showToast = _useState2[0],
     setShowToast = _useState2[1];
+  const _React$useState = React.useState(typeof window !== "undefined" ? window.innerWidth < 768 : false),
+    hideTimeline = _React$useState[0],
+    setHideTimeline = _React$useState[1];
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const applicationNumber = filters === null || filters === void 0 ? void 0 : filters.applicationNumber;
   const serviceType = filters === null || filters === void 0 ? void 0 : filters.service;
@@ -49919,23 +49903,34 @@ const GetDisconnectionDetails = () => {
   dowloadOptions.sort(function (a, b) {
     return a.order - b.order;
   });
-  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "employee-application-details",
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
+    className: "employee-main-application-details",
     style: {
-      marginBottom: "15px"
+      display: "flex",
+      gap: "20px"
     }
   }, /*#__PURE__*/React.createElement("div", {
+    className: "workflow-timeline-wrapper no-scrollbar " + (hideTimeline ? "hide-workflow" : ""),
     style: {
-      display: "flex"
+      flex: "1 1 300px",
+      maxWidth: hideTimeline ? "fit-content" : "400px",
+      transition: "max-width 0.3s"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(WorkflowTimeline, {
+    workflowDetails: workflowDetails,
+    hideTimeline: hideTimeline,
+    setHideTimeline: setHideTimeline
+  })), /*#__PURE__*/React.createElement("div", {
     style: {
-      width: "70%"
+      flex: "2 1 500px",
+      minWidth: "300px",
+      position: "relative"
     }
-  }, /*#__PURE__*/React.createElement(Header, null, t("WS_APPLICATION_DETAILS"), " ")), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      width: "30%",
-      zIndex: "10"
+      position: "absolute",
+      right: "24px",
+      zIndex: 11
     }
   }, /*#__PURE__*/React.createElement(MultiLink, {
     className: "multilinkWrapper employee-mulitlink-main-divNew",
@@ -49945,7 +49940,7 @@ const GetDisconnectionDetails = () => {
     downloadBtnClassName: "employee-download-btn-className",
     optionsClassName: "employee-options-btn-className",
     ref: menuRef
-  })))), /*#__PURE__*/React.createElement(ApplicationDetails, {
+  })), /*#__PURE__*/React.createElement(ApplicationDetails, {
     applicationDetails: applicationDetails,
     isLoading: isLoading || isServicesMasterLoading,
     isDataLoading: isLoading || isServicesMasterLoading,
@@ -49958,8 +49953,9 @@ const GetDisconnectionDetails = () => {
     setShowToast: setShowToast,
     closeToast: closeToast,
     timelineStatusPrefix: "WF_" + (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$p8 = applicationDetails.processInstancesDetails) === null || _applicationDetails$p8 === void 0 ? void 0 : (_applicationDetails$p9 = _applicationDetails$p8[0]) === null || _applicationDetails$p9 === void 0 ? void 0 : (_applicationDetails$p0 = _applicationDetails$p9.businessService) === null || _applicationDetails$p0 === void 0 ? void 0 : _applicationDetails$p0.toUpperCase()) + "_",
-    isInfoLabel: sessionStorage.getItem("isPrivacyEnabled") === "true" ? true : false
-  })));
+    isInfoLabel: sessionStorage.getItem("isPrivacyEnabled") === "true" ? true : false,
+    showTimeLine: false
+  }))));
 };
 
 const ModifyApplicationDetails = () => {