@djb25/digit-ui-module-ws 1.0.14 → 1.0.16

package/dist/index.modern.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect, useRef, useMemo, Fragment as Fragment$2, useReducer, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useMemo, Fragment as Fragment$1, useReducer, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation, Switch, Route, useHistory, useRouteMatch, Redirect, useParams } from 'react-router-dom';
-import { Loader as Loader$1, Card, KeyNote, SubmitBar, InfoBannerIcon, Header, BackButton, PrivateRoute, Banner, CardText, ActionBar, HomeIcon, PrintBtnCommon, MultiLink, LinkButton, Toast, BreadcrumbHeader, ArrowLeft, TickMark, FormStep, CardLabel, RadioOrSelect, TextInput, CardHeader, CitizenInfoLabel, CardSubHeader, Dropdown, UploadFile, CheckBox, RadioButtons, MobileNumber, LabelFieldPair, DatePicker, CardLabelError, DeleteIcon, WrapUnMaskComponent, StatusTable, Row, CardSectionHeader, InfoIcon, TextArea, SearchField, FilterFormField, RemoveableTag, MultiSelectDropdown, InboxComposer, DropIcon, WSICon, EmployeeModuleCard, SearchAction, PopUp, DetailsCard, SearchForm, CloseSvg, CollapsibleCardPage, Table, Localities, Modal, DownloadBtnCommon, CollectionIcon, ResponseComposer, TelePhone, DisplayPhotos, CheckPoint, ConnectingCheckPoints, ActionLinks, PDFSvg, EditIcon, CardSectionSubText, DownloadIcon, CardLabelDesc, FormComposer, MultiUploadWrapper, Close as Close$e, BreakLine, ViewsIcon, Menu, ButtonSelector, CitizenHomeCard } from '@djb25/digit-ui-react-components';
+import { Loader, Card, KeyNote, SubmitBar, InfoBannerIcon, Header, BackButton, PrivateRoute, Banner, CardText, ActionBar, HomeIcon, PrintBtnCommon, MultiLink, LinkButton, Toast, BreadcrumbHeader, ArrowLeft, TickMark, FormStep, CardLabel, RadioOrSelect, TextInput, CardHeader, CitizenInfoLabel, CardSubHeader, LabelFieldPair, Dropdown, CardLabelError, UploadFile, CheckBox, RadioButtons, MobileNumber, DatePicker, DeleteIcon, WrapUnMaskComponent, StatusTable, Row, CardSectionHeader, InfoIcon, TextArea, SearchField, FilterFormField, RemoveableTag, MultiSelectDropdown, InboxComposer, DropIcon, WSICon, EmployeeModuleCard, SearchAction, PopUp, DetailsCard, SearchForm, CloseSvg, CollapsibleCardPage, Table, Localities, Modal, DownloadBtnCommon, CollectionIcon, ResponseComposer, TelePhone, DisplayPhotos, CheckPoint, ConnectingCheckPoints, ActionLinks, PDFSvg, EditIcon, CardSectionSubText, DownloadIcon, CardLabelDesc, FormComposer, MultiUploadWrapper, Close as Close$e, BreakLine, ViewsIcon, 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';
@@ -7510,7 +7510,7 @@ const WSApplication = ({
     consumerCode: application !== null && application !== void 0 && (_application$applicat5 = application.applicationNo) !== null && _application$applicat5 !== void 0 && _application$applicat5.includes("DC") ? application === null || application === void 0 ? void 0 : application.connectionNo : application === null || application === void 0 ? void 0 : application.connectionNo
   };
   if (isLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(KeyNote, {
     keyValue: t("WS_MYCONNECTIONS_APPLICATION_NO"),
@@ -7694,7 +7694,7 @@ const WSMyApplications = () => {
     enabled: propertyNos ? true : false
   });
   if (isLoading || isSWLoading || PTisLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   let {
     WaterConnection: WSapplicationsList
@@ -8498,7 +8498,7 @@ const Response = () => {
   const handleDownloadPdf = () => {
     getAckPdf(applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.amendment, tenantId, t, applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.applicationDetails);
   };
-  return /*#__PURE__*/React.createElement("div", null, isLoading || isLoadingAppDetails ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Banner, {
+  return /*#__PURE__*/React.createElement("div", null, isLoading || isLoadingAppDetails ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Banner, {
     message: isSuccess ? t("WS_APPLICATION_SUBMITTED_SUCCESSFULLY_LABEL") : t("CS_WATER_UPDATE_APPLICATION_FAILED"),
     applicationNumber: data === null || data === void 0 ? void 0 : (_data$Amendments2 = data.Amendments) === null || _data$Amendments2 === void 0 ? void 0 : (_data$Amendments2$ = _data$Amendments2[0]) === null || _data$Amendments2$ === void 0 ? void 0 : _data$Amendments2$.amendmentId,
     info: isSuccess ? t("WS_MYCONNECTIONS_APPLICATION_NO") : "",
@@ -9166,17 +9166,14 @@ const BILLSBreadCrumbs = ({
     content: t("ES_COMMON_WS_DOCUMENTS_REQUIRED"),
     show: location.pathname.includes("/create-application") || location.pathname.includes("/new-application"),
     rightContent: location.pathname.includes("/create-application") && /*#__PURE__*/React.createElement("div", {
-      onClick: printDiv,
-      style: {
-        cursor: "pointer",
-        display: "flex"
-      }
-    }, /*#__PURE__*/React.createElement(PrintBtnCommon, null), /*#__PURE__*/React.createElement("div", {
-      style: {
-        fontSize: "24px",
-        fontWeight: "400",
-        color: "#0B0C0C"
-      }
+      className: "flex-center flex-gap-1 .cursorPointer",
+      onClick: printDiv
+    }, /*#__PURE__*/React.createElement(PrintBtnCommon, {
+      width: 24,
+      heigth: 24,
+      fill: "#fff"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "bread-crumb-item"
     }, "Print"))
   }, {
     path: "/digit-ui/employee/water/inbox",
@@ -9836,7 +9833,7 @@ const WSWaterConnectionDetails = ({
     optionKey: "i18nKey",
     onSelect: setProposedPipeSizeSelect,
     t: t
-  })) : /*#__PURE__*/React.createElement(Loader$1, null), showToast && /*#__PURE__*/React.createElement(Toast, {
+  })) : /*#__PURE__*/React.createElement(Loader, null), showToast && /*#__PURE__*/React.createElement(Toast, {
     error: (showToast === null || showToast === void 0 ? void 0 : showToast.key) === "error" ? true : false,
     label: error,
     isDleteBtn: true,
@@ -9863,6 +9860,15 @@ const WSDocsRequired = ({
   const goNext = () => {
     onSelect("DocsReq", "");
   };
+  const {
+    control,
+    formState: localFormState,
+    getValues
+  } = useForm();
+  const [zro, setZro] = useState({
+    value: "",
+    error: ""
+  });
   sessionStorage.removeItem("Digit.PT_CREATE_EMP_WS_NEW_FORM");
   sessionStorage.removeItem("IsDetailsExists");
   sessionStorage.removeItem("FORMSTATE_ERRORS");
@@ -9897,7 +9903,7 @@ const WSDocsRequired = ({
         color: "#0B0C0C",
         marginTop: "12px"
       }
-    }, t(`WS_NEW_CONNECTION_TEST_3`)), wsDocsLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(React.Fragment, null, wsDocs === null || wsDocs === void 0 ? void 0 : (_wsDocs$Documents = wsDocs.Documents) === null || _wsDocs$Documents === void 0 ? void 0 : _wsDocs$Documents.map((doc, index) => {
+    }, t(`WS_NEW_CONNECTION_TEST_3`)), wsDocsLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(React.Fragment, null, wsDocs === null || wsDocs === void 0 ? void 0 : (_wsDocs$Documents = wsDocs.Documents) === null || _wsDocs$Documents === void 0 ? void 0 : _wsDocs$Documents.map((doc, index) => {
       var _doc$dropdownData;
       return /*#__PURE__*/React.createElement("div", {
         key: index
@@ -9929,16 +9935,33 @@ const WSDocsRequired = ({
       onSubmit: goNext
     })));
   }
+  const menu = [{
+    i18nKey: "ASHOK VIHAR",
+    code: "ASHOK VIHAR",
+    value: "ASHOK VIHAR"
+  }, {
+    i18nKey: "BURARI",
+    code: "BURARI",
+    value: "BURARI"
+  }, {
+    i18nKey: "DWARKA",
+    code: "DWARKA",
+    value: "DWARKA"
+  }, {
+    i18nKey: "OKHLA",
+    code: "OKHLA",
+    value: "OKHLA"
+  }];
   return /*#__PURE__*/React.createElement("div", {
     className: "employee-form-content-with-action-bar"
-  }, /*#__PURE__*/React.createElement(Card, {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "overflow-y-scroll"
-  }, wsDocsLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement("div", {
+  }, wsDocsLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement("div", {
     id: "documents-div",
     className: "ws-docs-container"
   }, wsDocs === null || wsDocs === void 0 ? void 0 : (_wsDocs$Documents2 = wsDocs.Documents) === null || _wsDocs$Documents2 === void 0 ? void 0 : _wsDocs$Documents2.map((doc, index) => {
     var _doc$dropdownData3;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(Card, {
       key: index,
       className: "ws-doc-card"
     }, /*#__PURE__*/React.createElement("div", {
@@ -9957,7 +9980,37 @@ const WSDocsRequired = ({
     }, /*#__PURE__*/React.createElement("span", {
       className: "ws-doc-bullet"
     }, idx + 1, "."), /*#__PURE__*/React.createElement("span", null, t(value === null || value === void 0 ? void 0 : value.i18nKey))))));
-  })), /*#__PURE__*/React.createElement(ActionBar, {
+  }), /*#__PURE__*/React.createElement(Card, {
+    className: "ws-doc-card"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
+    className: "card-label-smaller"
+  }, "ZRO Location"), /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "zro",
+    defaultValue: zro,
+    rules: {
+      required: t("REQUIRED_FIELD")
+    },
+    isMandatory: true,
+    render: props => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown, {
+      className: "form-field",
+      selected: getValues("gender"),
+      disable: false,
+      option: menu,
+      errorStyle: localFormState.touched.gender && zro.error ? true : false,
+      select: e => {
+        setZro(prev => ({
+          ...prev,
+          value: e
+        }));
+      },
+      optionKey: "i18nKey",
+      onBlur: props.onBlur,
+      t: t
+    }))
+  }))), localFormState && zro.error && /*#__PURE__*/React.createElement(CardLabelError, null, zro.error)))), /*#__PURE__*/React.createElement(ActionBar, {
     style: {
       display: "flex",
       justifyContent: "flex-end",
@@ -9968,7 +10021,7 @@ const WSDocsRequired = ({
     onSubmit: () => {
       history.push(match.path.replace("create-application", "new-application"));
     },
-    disabled: wsDocsLoading ? true : false
+    disabled: wsDocsLoading || !zro.value ? true : false
   }))));
 };
 
@@ -10038,7 +10091,7 @@ const WSDocumentDetails = ({
     label: error,
     onClose: () => setError(null),
     error: true
-  })) : /*#__PURE__*/React.createElement(Loader$1, null));
+  })) : /*#__PURE__*/React.createElement(Loader, null));
 };
 function SelectDocument({
   t,
@@ -10812,7 +10865,7 @@ const WSConnectionHolder = ({
     style: {
       color: "red"
     }
-  }, error)))) : /*#__PURE__*/React.createElement(Loader$1, null));
+  }, error)))) : /*#__PURE__*/React.createElement(Loader, null));
 };
 
 const WSActivationDetails = ({
@@ -10971,7 +11024,7 @@ const WSConnectionDetails = ({
       setConnectionDetails([createConnectionDetails()]);
     }
   }, [formData === null || formData === void 0 ? void 0 : formData.ConnectionDetails]);
-  if (isWSServicesCalculationLoading) return /*#__PURE__*/React.createElement(Loader$1, null);
+  if (isWSServicesCalculationLoading) return /*#__PURE__*/React.createElement(Loader, null);
   const commonProps = {
     focusIndex,
     connectionDetails,
@@ -11455,7 +11508,7 @@ const WSRoadCuttingDetails = ({
   });
   const addroadCutt = () => {
     const newRoadCutting = createRoadCuttingDetails();
-    setRoadCuttingDetails(prev => [...prev, newRoadCutting]);
+    setRoadCuttingDetails(prev => [...(Array.isArray(prev) ? prev : []), newRoadCutting]);
   };
   const removeroadCutt = roadCutt => {
     (roadCutt === null || roadCutt === void 0 ? void 0 : roadCutt.id) !== null ? setRoadCuttingDetails(prev => prev.map(e => e.key == roadCutt.key && e.id !== null ? {
@@ -11485,7 +11538,7 @@ const WSRoadCuttingDetails = ({
     isEditScreen
   };
   if (isMdmsLoading) return /*#__PURE__*/React.createElement(Loader, null);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, roadCuttingDetails.filter(o => o.status !== "INACTIVE").map((roadCutt, index) => /*#__PURE__*/React.createElement(RoadCuttForm, Object.assign({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (roadCuttingDetails === null || roadCuttingDetails === void 0 ? void 0 : roadCuttingDetails.length) && roadCuttingDetails.filter(o => o.status !== "INACTIVE").map((roadCutt, index) => /*#__PURE__*/React.createElement(RoadCuttForm, Object.assign({
     key: roadCutt.key,
     index: index,
     roadCutt: roadCutt
@@ -11718,7 +11771,7 @@ const WSPropertyDetails = ({
       ${pinCode ? ", " + pinCode : ""}`;
   };
   if (loading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
     className: "card-label-smaller"
@@ -13735,7 +13788,7 @@ const WSActivationConnectionDetails = ({
     data: wsServicesCalculationData
   } = Digit.Hooks.ws.useMDMS(stateCode, "ws-services-calculation", ["PipeSize"]);
   useEffect(() => {
-    const data = connectionDetails.map(e => {
+    const data = (connectionDetails === null || connectionDetails === void 0 ? void 0 : connectionDetails.length) && connectionDetails.map(e => {
       return e;
     });
     onSelect(config === null || config === void 0 ? void 0 : config.key, data);
@@ -13792,7 +13845,7 @@ const WSActivationConnectionDetails = ({
       });
     }
   }, [connectionDetails]);
-  if (isMdmsLoading || isWSServicesCalculationLoading) return /*#__PURE__*/React.createElement(Loader$1, null);
+  if (isMdmsLoading || isWSServicesCalculationLoading) return /*#__PURE__*/React.createElement(Loader, null);
   const commonProps = {
     focusIndex,
     allOwners: connectionDetails,
@@ -13815,11 +13868,11 @@ const WSActivationConnectionDetails = ({
     setWaterSubSourceList,
     mdmsData
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, connectionDetails.map((connectionDetail, index) => /*#__PURE__*/React.createElement(ConnectionDetails$2, Object.assign({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (connectionDetails === null || connectionDetails === void 0 ? void 0 : connectionDetails.length) && (connectionDetails === null || connectionDetails === void 0 ? void 0 : connectionDetails.map((connectionDetail, index) => /*#__PURE__*/React.createElement(ConnectionDetails$2, Object.assign({
     key: connectionDetail.key || index,
     index: index,
     connectionDetail: connectionDetail
-  }, commonProps))));
+  }, commonProps)))));
 };
 const ConnectionDetails$2 = _props => {
   var _errors$connectionTyp2, _errors$waterSource2, _errors$sourceSubData2, _errors$pipeSize2, _errors$noOfTaps2, _errors$noOfWaterClos2, _errors$noOfToilets2;
@@ -14239,7 +14292,7 @@ const WSActivationPlumberDetails = ({
     code: "Self"
   }];
   useEffect(() => {
-    const data = plumberDetails.map(e => {
+    const data = plumberDetails.length && plumberDetails.map(e => {
       return e;
     });
     onSelect(config === null || config === void 0 ? void 0 : config.key, data);
@@ -14262,7 +14315,7 @@ const WSActivationPlumberDetails = ({
     options,
     setPlumberDetails
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, plumberDetails.map((plumberDetail, index) => /*#__PURE__*/React.createElement(PlumberDetails, Object.assign({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (plumberDetails === null || plumberDetails === void 0 ? void 0 : plumberDetails.length) && plumberDetails.map((plumberDetail, index) => /*#__PURE__*/React.createElement(PlumberDetails, Object.assign({
     key: plumberDetail.key || index,
     index: index,
     plumberDetail: plumberDetail
@@ -15069,7 +15122,7 @@ const WSDocumentsEmployee = ({
     goNext();
   }, [documents]);
   if (isLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   const applicationDetailsData = JSON.parse(sessionStorage.getItem("WS_EDIT_APPLICATION_DETAILS"));
   if (window.location.href.includes("edit") && (applicationDetailsData === null || applicationDetailsData === void 0 ? void 0 : (_applicationDetailsDa = applicationDetailsData.applicationData) === null || _applicationDetailsDa === void 0 ? void 0 : (_applicationDetailsDa2 = _applicationDetailsDa.documents) === null || _applicationDetailsDa2 === void 0 ? void 0 : _applicationDetailsDa2.length) > 0) {
@@ -15360,7 +15413,7 @@ const WSEditConnectionDetails = ({
       setConnectionDetails([createConnectionDetails$2()]);
     }
   }, [formData === null || formData === void 0 ? void 0 : formData.ConnectionDetails]);
-  if (isWSServicesCalculationLoading) return /*#__PURE__*/React.createElement(Loader$1, null);
+  if (isWSServicesCalculationLoading) return /*#__PURE__*/React.createElement(Loader, null);
   const commonProps = {
     focusIndex,
     connectionDetails,
@@ -15756,7 +15809,7 @@ const WSDisconnectionDocsRequired = ({
   } = Digit.Hooks.ws.WSSearchMdmsTypes.useWSServicesMasters(tenantId, "DisconnectionDocuments");
   if (userType === "citizen") {
     var _wsDocs$Disconnection;
-    return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeader, null, t(`WS_COMMON_APPLICATION_DISCONNECTION`)), /*#__PURE__*/React.createElement(CitizenInfoLabel, {
+    return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeader, null, t(`WS_COMMON_APPLICATION_DISCONNECTION`)), /*#__PURE__*/React.createElement(CitizenInfoLabel, {
       style: {
         margin: "0px"
       },
@@ -15782,7 +15835,7 @@ const WSDisconnectionDocsRequired = ({
         color: "#0B0C0C",
         marginTop: "12px"
       }
-    }, t(`WS_NEW_CONNECTION_TEST_3`)), wsDocsLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(Fragment$2, null, wsDocs === null || wsDocs === void 0 ? void 0 : (_wsDocs$Disconnection = wsDocs.DisconnectionDocuments) === null || _wsDocs$Disconnection === void 0 ? void 0 : _wsDocs$Disconnection.map((doc, index) => {
+    }, t(`WS_NEW_CONNECTION_TEST_3`)), wsDocsLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(Fragment$1, null, wsDocs === null || wsDocs === void 0 ? void 0 : (_wsDocs$Disconnection = wsDocs.DisconnectionDocuments) === null || _wsDocs$Disconnection === void 0 ? void 0 : _wsDocs$Disconnection.map((doc, index) => {
       var _doc$dropdownData;
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         style: {
@@ -15828,7 +15881,7 @@ const WSDisconnectionDocsRequired = ({
       fontSize: "32px",
       marginLeft: "18px"
     }
-  }, t("WS_WATER_AND_SEWERAGE_DISCONNECTION")), /*#__PURE__*/React.createElement(Card, null, wsDocsLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement("div", {
+  }, t("WS_WATER_AND_SEWERAGE_DISCONNECTION")), /*#__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;
@@ -17664,7 +17717,7 @@ const WSDisconnectionForm = ({
       }
     }
   };
-  if (isMdmsLoading || wsDocsLoading || isEnableLoader || slaLoading) return /*#__PURE__*/React.createElement(Loader$1, null);
+  if (isMdmsLoading || wsDocsLoading || isEnableLoader || slaLoading) return /*#__PURE__*/React.createElement(Loader, null);
   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, {
@@ -18341,7 +18394,7 @@ const WSRestorationForm = ({
       }
     }
   };
-  if (isMdmsLoading || wsDocsLoading || isEnableLoader || slaLoading) return /*#__PURE__*/React.createElement(Loader$1, null);
+  if (isMdmsLoading || wsDocsLoading || isEnableLoader || slaLoading) return /*#__PURE__*/React.createElement(Loader, null);
   if (userType === 'citizen') {
     var _disconnectionData$re2, _disconnectionData$re3;
     return /*#__PURE__*/React.createElement("div", null, userType === "citizen" && /*#__PURE__*/React.createElement(DisconnectTimeline, {
@@ -18551,7 +18604,7 @@ function WSDisconnectionDocumentsForm({
     data: wsDocs
   } = Digit.Hooks.ws.WSSearchMdmsTypes.useWSServicesMasters(tenantId, 'DisconnectionDocuments');
   if (wsDocsLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -19216,7 +19269,7 @@ const FilterFormFieldsComponent = ({
     });
     return props.onChange(res);
   };
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(FilterFormField, null, /*#__PURE__*/React.createElement(Controller, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(FilterFormField, null, /*#__PURE__*/React.createElement(Controller, {
     name: "assignee",
     control: controlFilterForm,
     render: props => {
@@ -19247,7 +19300,7 @@ const FilterFormFieldsComponent = ({
           });
         });
       }, [props === null || props === void 0 ? void 0 : props.value]);
-      return loadingLocalitiesForEmployeesCurrentTenant ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement("div", {
+      return loadingLocalitiesForEmployeesCurrentTenant ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
         className: "filter-label sub-filter-label"
       }, t("ES_INBOX_LOCALITY")), /*#__PURE__*/React.createElement(MultiSelectDropdown, {
         options: localitiesForEmployeesCurrentTenant ? localitiesForEmployeesCurrentTenant : [],
@@ -19282,9 +19335,9 @@ const FilterFormFieldsComponent = ({
           key: index + 1
         });
       }), [props.value, statuses]);
-      return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
         className: "filter-label sub-filter-label"
-      }, t("WS_COMMON_TABLE_COL_APP_TYPE_LABEL")), isInboxLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(Fragment$2, null, " ", renderStatusCheckBoxess));
+      }, t("WS_COMMON_TABLE_COL_APP_TYPE_LABEL")), isInboxLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(Fragment$1, null, " ", renderStatusCheckBoxess));
     }
   })), (selectedApplicationType === null || selectedApplicationType === void 0 ? void 0 : selectedApplicationType.length) > 0 ? /*#__PURE__*/React.createElement(FilterFormField, null, /*#__PURE__*/React.createElement(Controller, {
     name: "applicationStatus",
@@ -19311,9 +19364,9 @@ const FilterFormFieldsComponent = ({
           });
         });
       }, [props.value, statuses, selectedApplicationType]);
-      return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
         className: "filter-label sub-filter-label"
-      }, t("WS_MYCONNECTIONS_STATUS")), isInboxLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(Fragment$2, null, renderStatusCheckBoxes));
+      }, t("WS_MYCONNECTIONS_STATUS")), isInboxLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(Fragment$1, null, renderStatusCheckBoxes));
     }
   })) : null);
 };
@@ -20021,7 +20074,7 @@ const SearchFields = ({
     name: "mobileNumber",
     type: "number",
     inputRef: register({})
-  }, propsForMobileNumber))), applicationTypesLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement("label", null, t("WS_APPLICATION_TYPE_LABEL")), /*#__PURE__*/React.createElement(Controller, {
+  }, propsForMobileNumber))), applicationTypesLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement("label", null, t("WS_APPLICATION_TYPE_LABEL")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "applicationType",
     render: props => /*#__PURE__*/React.createElement(Dropdown, {
@@ -20032,7 +20085,7 @@ const SearchFields = ({
       optionKey: "i18nKey",
       t: t
     })
-  })), isLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement("label", null, t("WS_COMMON_TABLE_COL_APPLICATION_STATUS_LABEL")), /*#__PURE__*/React.createElement(Controller, {
+  })), isLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement("label", null, t("WS_COMMON_TABLE_COL_APPLICATION_STATUS_LABEL")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "applicationStatus",
     render: props => /*#__PURE__*/React.createElement(Dropdown, {
@@ -20474,7 +20527,7 @@ const SearchApplication = ({
         sortOrder: "DESC"
       });
     }
-  }, t(`CS_COMMON_CLEAR_SEARCH`))))), isLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : null, data !== null && data !== void 0 && data.display && !resultOk ? /*#__PURE__*/React.createElement(Card, {
+  }, t(`CS_COMMON_CLEAR_SEARCH`))))), isLoading ? /*#__PURE__*/React.createElement(Loader, null) : null, data !== null && data !== void 0 && data.display && !resultOk ? /*#__PURE__*/React.createElement(Card, {
     style: {
       marginTop: 20
     }
@@ -20530,7 +20583,7 @@ const SearchFields$1 = ({
     title: t("ERR_DEFAULT_INPUT_FIELD_MSG")
   };
   let validation = {};
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement("label", null, t("WS_MYCONNECTIONS_CONSUMER_NO")), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement("label", null, t("WS_MYCONNECTIONS_CONSUMER_NO")), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     name: "connectionNumber",
     inputRef: register({})
   }, validation = {
@@ -21073,7 +21126,7 @@ const SearchWaterConnection = ({
         oldConnectionNumber: ""
       });
     }
-  }, t("WS_SEARCH_CONNECTION_RESET_BUTTON"))))), isLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : null, data !== null && data !== void 0 && data.display && !resultOk ? /*#__PURE__*/React.createElement(Card, {
+  }, t("WS_SEARCH_CONNECTION_RESET_BUTTON"))))), isLoading ? /*#__PURE__*/React.createElement(Loader, null) : null, data !== null && data !== void 0 && data.display && !resultOk ? /*#__PURE__*/React.createElement(Card, {
     style: {
       marginTop: 20
     }
@@ -21164,7 +21217,7 @@ const BulkBillSearchFields = ({
     setValue('tenantId', tenant);
     setLocality(value);
   }
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement("label", null, t("WS_SEARCH_CONNNECTION_CITY")), /*#__PURE__*/React.createElement(TextInput, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement("label", null, t("WS_SEARCH_CONNNECTION_CITY")), /*#__PURE__*/React.createElement(TextInput, {
     name: "city",
     disable: true,
     value: t(tenant),
@@ -21569,7 +21622,7 @@ const BulkBillSearch = ({
       return GetCell((_row$original11 = row.original) === null || _row$original11 === void 0 ? void 0 : _row$original11["status"]);
     }
   }]);
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     styles: {
       fontSize: "32px"
     }
@@ -21584,7 +21637,7 @@ const BulkBillSearch = ({
     tenantId,
     t,
     setValue
-  })), isLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : null, isLoadingBulkMeterReading && /*#__PURE__*/React.createElement(Loader$1, null), data !== null && data !== void 0 && data.display && !resultOk ? /*#__PURE__*/React.createElement(Card, {
+  })), isLoading ? /*#__PURE__*/React.createElement(Loader, null) : null, isLoadingBulkMeterReading && /*#__PURE__*/React.createElement(Loader, null), data !== null && data !== void 0 && data.display && !resultOk ? /*#__PURE__*/React.createElement(Card, {
     style: {
       marginTop: 20
     }
@@ -21937,7 +21990,7 @@ const SearchFormFieldsComponents$1 = ({
     componentInFront: "+91"
   };
   let validation = {};
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(SearchField, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(SearchField, {
     className: "wns-search-field"
   }, /*#__PURE__*/React.createElement("label", null, t("BILLAMEND_APPLICATIONNO")), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     name: "applicationNumber",
@@ -22004,7 +22057,7 @@ const FilterFormFieldsComponent$1 = ({
     });
     return props.onChange(res);
   };
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(FilterFormField, null, /*#__PURE__*/React.createElement(Controller, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(FilterFormField, null, /*#__PURE__*/React.createElement(Controller, {
     name: "assignee",
     control: controlFilterForm,
     render: props => /*#__PURE__*/React.createElement(RadioButtons, {
@@ -22033,7 +22086,7 @@ const FilterFormFieldsComponent$1 = ({
           });
         });
       }, [props === null || props === void 0 ? void 0 : props.value]);
-      return loadingLocalitiesForEmployeesCurrentTenant ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement("div", {
+      return loadingLocalitiesForEmployeesCurrentTenant ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
         className: "filter-label sub-filter-label"
       }, t("ES_INBOX_LOCALITY")), /*#__PURE__*/React.createElement(MultiSelectDropdown, {
         options: localitiesForEmployeesCurrentTenant ? localitiesForEmployeesCurrentTenant : [],
@@ -22072,9 +22125,9 @@ const FilterFormFieldsComponent$1 = ({
           key: index + 1
         });
       }), [props.value, statuses]);
-      return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
         className: "filter-label sub-filter-label"
-      }, t("CS_INBOX_STATUS_FILTER")), isInboxLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(Fragment$2, null, " ", renderStatusCheckBoxess));
+      }, t("CS_INBOX_STATUS_FILTER")), isInboxLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(Fragment$1, null, " ", renderStatusCheckBoxess));
     }
   })));
 };
@@ -22102,7 +22155,7 @@ const useInboxTableConfig$1 = ({
     if (value === "Approved") {
       return /*#__PURE__*/React.createElement("span", {
         style: {
-          color: "#00703C"
+          color: "#2E9E8F"
         }
       }, value);
     }
@@ -22582,7 +22635,7 @@ const Inbox = ({
     sortFormDefaultValues: formState === null || formState === void 0 ? void 0 : formState.tableForm,
     onSortFormReset
   };
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(Header, null, t("ES_COMMON_INBOX"), totalCount ? /*#__PURE__*/React.createElement("p", {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, null, t("ES_COMMON_INBOX"), totalCount ? /*#__PURE__*/React.createElement("p", {
     className: "inbox-count"
   }, totalCount) : null), /*#__PURE__*/React.createElement(InboxComposer, _extends({
     isInboxLoading,
@@ -23696,7 +23749,7 @@ var ContextConsumer = k;
 var ContextProvider = h;
 var Element = c;
 var ForwardRef = n;
-var Fragment$1 = e;
+var Fragment = e;
 var Lazy = t;
 var Memo = r;
 var Portal = d;
@@ -23751,7 +23804,7 @@ var reactIs_production_min = {
   ContextProvider: ContextProvider,
   Element: Element,
   ForwardRef: ForwardRef,
-  Fragment: Fragment$1,
+  Fragment: Fragment,
   Lazy: Lazy,
   Memo: Memo,
   Portal: Portal,
@@ -24567,7 +24620,7 @@ const SearchConnection = ({
     }
   });
   if (isLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   const onConnectionSearch = async data => {
     if (searchType.code === "CONSUMER_NUMBER") {
@@ -25828,7 +25881,7 @@ const ChallanSearchResults = ({
     privacy: Digit.Utils.getPrivacyObject()
   });
   if (isWSLoading || isSWLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   const onSubmit = data => {
     history.push(`/digit-ui/citizen/payment/my-bills/${data === null || data === void 0 ? void 0 : data.ConsumerNumber.split("/")[0]}/${stringReplaceAll(data === null || data === void 0 ? void 0 : data.ConsumerNumber, "/", "+")}?workflow=WNS&tenantId=${tenantId}&ConsumerName=${data === null || data === void 0 ? void 0 : data.ConsumerName}`);
@@ -26056,12 +26109,12 @@ const WSWFApplicationTimeline = props => {
     }
   };
   if (isLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   const toggleTimeline = () => {
     setShowAllTimeline(prev => !prev);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !isLoading && /*#__PURE__*/React.createElement(Fragment$2, null, (data === null || data === void 0 ? void 0 : (_data$timeline = data.timeline) === null || _data$timeline === void 0 ? void 0 : _data$timeline.length) > 0 && /*#__PURE__*/React.createElement(CardSectionHeader, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isLoading && /*#__PURE__*/React.createElement(Fragment$1, null, (data === null || data === void 0 ? void 0 : (_data$timeline = data.timeline) === null || _data$timeline === void 0 ? void 0 : _data$timeline.length) > 0 && /*#__PURE__*/React.createElement(CardSectionHeader, {
     style: {
       marginBottom: "16px"
     }
@@ -26111,7 +26164,7 @@ function WSDocument({
     documents.push(ob);
   });
   if (isLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -26339,7 +26392,7 @@ const WSApplicationDetails = () => {
   }) || false;
   const isPaid = (data === null || data === void 0 ? void 0 : (_data$WaterConnection13 = data.WaterConnection) === null || _data$WaterConnection13 === void 0 ? void 0 : (_data$WaterConnection14 = _data$WaterConnection13[0]) === null || _data$WaterConnection14 === void 0 ? void 0 : _data$WaterConnection14.applicationStatus) === "CONNECTION_ACTIVATED" || (data === null || data === void 0 ? void 0 : (_data$WaterConnection15 = data.WaterConnection) === null || _data$WaterConnection15 === void 0 ? void 0 : (_data$WaterConnection16 = _data$WaterConnection15[0]) === null || _data$WaterConnection16 === void 0 ? void 0 : _data$WaterConnection16.applicationStatus) === "PENDING_FOR_CONNECTION_ACTIVATION" || (data === null || data === void 0 ? void 0 : (_data$SewerageConnect1 = data.SewerageConnections) === null || _data$SewerageConnect1 === void 0 ? void 0 : (_data$SewerageConnect10 = _data$SewerageConnect1[0]) === null || _data$SewerageConnect10 === void 0 ? void 0 : _data$SewerageConnect10.applicationStatus) === "CONNECTION_ACTIVATED" || (data === null || data === void 0 ? void 0 : (_data$SewerageConnect11 = data.SewerageConnections) === null || _data$SewerageConnect11 === void 0 ? void 0 : (_data$SewerageConnect12 = _data$SewerageConnect11[0]) === null || _data$SewerageConnect12 === void 0 ? void 0 : _data$SewerageConnect12.applicationStatus) === "PENDING_FOR_CONNECTION_ACTIVATION" ? true : false;
   if (isLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   const handleDownloadPdf = async () => {
     var _data$WaterConnection17, _data$WaterConnection18, _data$SewerageConnect13, _data$SewerageConnect14, _data$WaterConnection19, _data$SewerageConnect15, _PTData$Properties;
@@ -27040,7 +27093,7 @@ const WSAdditionalDetails = () => {
     filters: filter1
   });
   if (isLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null, t("WS_COMMON_ADDN_DETAILS")), /*#__PURE__*/React.createElement("div", {
     className: "hide-seperator"
@@ -27604,7 +27657,7 @@ const ConnectionDetails$5 = () => {
     }, /*#__PURE__*/React.createElement(Close, null));
   };
   if (isLoading || isPTLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   sessionStorage.setItem("ApplicationNoState", (_state3 = state) === null || _state3 === void 0 ? void 0 : _state3.applicationNo);
   let serviceType = (_state4 = state) !== null && _state4 !== void 0 && (_state4$applicationTy = _state4.applicationType) !== null && _state4$applicationTy !== void 0 && _state4$applicationTy.includes("WATER") ? "WATER" : "SEWERAGE";
@@ -28089,7 +28142,7 @@ const consumptionDetails = ({
     } else return t("NA");
   };
   if (isLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   let {
     meterReadings
@@ -28279,7 +28332,7 @@ const WSMyPayments = () => {
     enabled: connectionNoSW !== null ? true : false
   });
   if (isLoading || iswsLoading || isswLoading || isSWLoading || isPropertyLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   const wspayment = wspayments && (wspayments === null || wspayments === void 0 ? void 0 : wspayments.Payments) || [];
   const swpayment = swpayments && (swpayments === null || swpayments === void 0 ? void 0 : swpayments.Payments) || [];
@@ -28642,7 +28695,7 @@ const EditApplication = ({
   });
   config.indexRoute = "property-details";
   if ((Waterresult && Object.keys(Waterresult).length > 0 || !Sewarageresult) && Waterresult !== null && Waterresult !== void 0 && Waterresult.isLoading || Sewarageresult !== null && Sewarageresult !== void 0 && Sewarageresult.isLoading || configLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   const CheckPage = (_Digit = Digit) === null || _Digit === void 0 ? void 0 : (_Digit$ComponentRegis = _Digit.ComponentRegistryService) === null || _Digit$ComponentRegis === void 0 ? void 0 : _Digit$ComponentRegis.getComponent('WSCheckPage');
   const Acknowledgement = (_Digit2 = Digit) === null || _Digit2 === void 0 ? void 0 : (_Digit2$ComponentRegi = _Digit2.ComponentRegistryService) === null || _Digit2$ComponentRegi === void 0 ? void 0 : _Digit2$ComponentRegi.getComponent('WSAcknowledgement');
@@ -29122,7 +29175,7 @@ const MyConnections = ({
     };
   });
   if (isLoading || PTisLoading || isSWLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null, `${t("WS_MYCONNECTIONS_HEADER")} ${connectionList ? `(${connectionList.length})` : ""}`), /*#__PURE__*/React.createElement(WSInfoLabel, {
     t: t
@@ -29246,7 +29299,7 @@ const WSAcknowledgement = ({
     }, tenantInfo === null || tenantInfo === void 0 ? void 0 : tenantInfo.code, t);
     data2.then(ress => Digit.Utils.pdf.generatev1(ress));
   };
-  return ((data === null || data === void 0 ? void 0 : (_data$serviceName7 = data.serviceName) === null || _data$serviceName7 === void 0 ? void 0 : _data$serviceName7.code) === "WATER" ? WSmutation.isLoading || WSmutation.isIdle : (data === null || data === void 0 ? void 0 : (_data$serviceName8 = data.serviceName) === null || _data$serviceName8 === void 0 ? void 0 : _data$serviceName8.code) === "SEWERAGE" ? SWmutation.isLoading || SWmutation.isIdle : WSmutation.isLoading || WSmutation.isIdle || SWmutation.isLoading || SWmutation.isIdle) ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(BannerPicker$2, {
+  return ((data === null || data === void 0 ? void 0 : (_data$serviceName7 = data.serviceName) === null || _data$serviceName7 === void 0 ? void 0 : _data$serviceName7.code) === "WATER" ? WSmutation.isLoading || WSmutation.isIdle : (data === null || data === void 0 ? void 0 : (_data$serviceName8 = data.serviceName) === null || _data$serviceName8 === void 0 ? void 0 : _data$serviceName8.code) === "SEWERAGE" ? SWmutation.isLoading || SWmutation.isIdle : WSmutation.isLoading || WSmutation.isIdle || SWmutation.isLoading || SWmutation.isIdle) ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(BannerPicker$2, {
     t: t,
     clearParams: clearParams,
     Waterdata: WSmutation.data,
@@ -29438,7 +29491,7 @@ const CheckPage$1 = () => {
     }
   };
   if (isEnableLoader) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
     styles: {
@@ -29701,7 +29754,7 @@ const CheckPage$2 = () => {
     }
   };
   if (isEnableLoader) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
     styles: {
@@ -29847,7 +29900,7 @@ const CheckPage$3 = () => {
     }
   };
   if (isEnableLoader) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
     styles: {
@@ -30041,7 +30094,7 @@ const WNSMyBills = ({
     privacy: Digit.Utils.getPrivacyObject()
   });
   if (Waterresult !== null && Waterresult !== void 0 && Waterresult.isLoading || Sewarageresult !== null && Sewarageresult !== void 0 && Sewarageresult.isLoading || Waterresult == undefined || Sewarageresult == undefined) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   const onSubmit = data => {
     history.push(`/digit-ui/citizen/payment/my-bills/${data === null || data === void 0 ? void 0 : data.ConsumerNumber.split("/")[0]}/${stringReplaceAll(data === null || data === void 0 ? void 0 : data.ConsumerNumber, "/", "+")}?workflow=WNS&tenantId=${tenantId}&ConsumerName=${data === null || data === void 0 ? void 0 : data.ConsumerName}`);
@@ -30481,7 +30534,7 @@ const ApplicationBillAmendment = () => {
     style: {
       paddingLeft: "150px"
     }
-  }, /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(Controller, {
+  }, /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Controller, {
     name: `${servicev1}_REDUCED_AMOUNT.VALUE`,
     key: `${servicev1}_REDUCED_AMOUNT.VALUE`,
     control: control,
@@ -30516,7 +30569,7 @@ const ApplicationBillAmendment = () => {
         checked: props === null || props === void 0 ? void 0 : props.value
       }));
     }
-  }), errors !== null && errors !== void 0 && (_errors$WS_REDUCED_AM = errors.WS_REDUCED_AMOUNT) !== null && _errors$WS_REDUCED_AM !== void 0 && _errors$WS_REDUCED_AM.VALUE && ischeckedReduce == true ? /*#__PURE__*/React.createElement(CardLabelError, null, t("WS_REQUIRED_FIELD")) : null)), /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(Controller, {
+  }), errors !== null && errors !== void 0 && (_errors$WS_REDUCED_AM = errors.WS_REDUCED_AMOUNT) !== null && _errors$WS_REDUCED_AM !== void 0 && _errors$WS_REDUCED_AM.VALUE && ischeckedReduce == true ? /*#__PURE__*/React.createElement(CardLabelError, null, t("WS_REQUIRED_FIELD")) : null)), /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Controller, {
     name: `${servicev1}_ADDITIONAL_AMOUNT.VALUE`,
     key: `${servicev1}_ADDITIONAL_AMOUNT.VALUE`,
     control: control,
@@ -30567,7 +30620,7 @@ const ApplicationBillAmendment = () => {
         paddingRight: "60px",
         paddingLeft: "150px"
       }
-    }, /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(TextInput, {
+    }, /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(TextInput, {
       disabled: servicev1 === "WS" ? !(WS_REDUCED_AMOUNT !== null && WS_REDUCED_AMOUNT !== void 0 && WS_REDUCED_AMOUNT.VALUE) : !(SW_REDUCED_AMOUNT !== null && SW_REDUCED_AMOUNT !== void 0 && SW_REDUCED_AMOUNT.VALUE),
       type: "number",
       name: `${servicev1}_REDUCED_AMOUNT.${node.taxHeadCode}`,
@@ -30597,7 +30650,7 @@ const ApplicationBillAmendment = () => {
       style: {
         paddingRight: "60px"
       }
-    }, /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(TextInput, {
+    }, /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(TextInput, {
       disabled: servicev1 === "WS" ? !(WS_ADDITIONAL_AMOUNT !== null && WS_ADDITIONAL_AMOUNT !== void 0 && WS_ADDITIONAL_AMOUNT.VALUE) : !(SW_ADDITIONAL_AMOUNT !== null && SW_ADDITIONAL_AMOUNT !== void 0 && SW_ADDITIONAL_AMOUNT.VALUE),
       type: "number",
       name: `${servicev1}_ADDITIONAL_AMOUNT.${node.taxHeadCode}`,
@@ -30645,7 +30698,7 @@ const ApplicationBillAmendment = () => {
       paddingRight: "60px",
       paddingLeft: "150px"
     }
-  }, /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(TextInput, {
+  }, /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(TextInput, {
     disabled: servicev1 === "WS" ? !(WS_REDUCED_AMOUNT !== null && WS_REDUCED_AMOUNT !== void 0 && WS_REDUCED_AMOUNT.VALUE) : !(SW_REDUCED_AMOUNT !== null && SW_REDUCED_AMOUNT !== void 0 && SW_REDUCED_AMOUNT.VALUE),
     name: `${servicev1}_REBATE`,
     inputRef: register()
@@ -30653,11 +30706,11 @@ const ApplicationBillAmendment = () => {
     style: {
       paddingRight: "60px"
     }
-  }, /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(TextInput, {
+  }, /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(TextInput, {
     disabled: servicev1 === "WS" ? !(WS_ADDITIONAL_AMOUNT !== null && WS_ADDITIONAL_AMOUNT !== void 0 && WS_ADDITIONAL_AMOUNT.VALUE) : !(SW_ADDITIONAL_AMOUNT !== null && SW_ADDITIONAL_AMOUNT !== void 0 && SW_ADDITIONAL_AMOUNT.VALUE),
     name: `${servicev1}_PENALTY`,
     inputRef: register()
-  }))))))) : /*#__PURE__*/React.createElement(Loader$1, null), BillAmendmentMDMSLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(CardSectionHeader, {
+  }))))))) : /*#__PURE__*/React.createElement(Loader, null), BillAmendmentMDMSLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(CardSectionHeader, {
     style: {
       marginBottom: "16px"
     }
@@ -30867,7 +30920,7 @@ const RequiredDocuments = ({
     }));
   };
   const handlePrint = () => Digit.Download.PDF(fullPageRef, t("ES_COMMON_WS_DOCUMENTS_REQUIRED"));
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     ref: fullPageRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "options"
@@ -30884,40 +30937,397 @@ const RequiredDocuments = ({
       position: "relative"
     },
     className: "employeeCard-override"
-  }, BillAmendmentMDMSLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : BillAmendmentMDMS === null || BillAmendmentMDMS === void 0 ? void 0 : BillAmendmentMDMS.map(e => {
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CardHeader, null, t(e.code).replaceAll("_", " ")), /*#__PURE__*/React.createElement(CardLabel, null, t(`WS_DOCS_REQ_INFO`)), e.allowedDocuments.allowedDocs.map((e, i) => /*#__PURE__*/React.createElement(CardLabelDesc, null, i + 1, ". ", t(`${e.documentType}`))));
+  }, BillAmendmentMDMSLoading ? /*#__PURE__*/React.createElement(Loader, null) : BillAmendmentMDMS === null || BillAmendmentMDMS === void 0 ? void 0 : BillAmendmentMDMS.map(e => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardHeader, null, t(e.code).replaceAll("_", " ")), /*#__PURE__*/React.createElement(CardLabel, null, t(`WS_DOCS_REQ_INFO`)), e.allowedDocuments.allowedDocs.map((e, i) => /*#__PURE__*/React.createElement(CardLabelDesc, null, i + 1, ". ", t(`${e.documentType}`))));
   }))), /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
     label: t("WS_COMMON_BUTTON_APPLY"),
     onSubmit: () => redirectToBillAmdmentPage()
   })));
 };
 
+const FORM_STORAGE_KEY = "WS_EMPLOYEE_NEW_APPLICATION_FORM";
+const MAX_FILE_SIZE = 5242880;
+const SUPPORTED_FILE_TYPES = /(\.pdf|\.png|\.jpe?g)$/i;
+const NAME_PATTERN = /^[a-zA-Z\s.'-]{1,50}$/;
+const EMAIL_PATTERN = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
+const MOBILE_PATTERN = /^[6-9][0-9]{9}$/;
+const OFFICE_PATTERN = /^[0-9]{6,12}$/;
+const PINCODE_PATTERN = /^[1-9][0-9]{5}$/;
+const NUMBER_PATTERN = /^\d+$/;
+const DECIMAL_PATTERN = /^\d+(\.\d{1,2})?$/;
+const IFSC_PATTERN = /^[A-Z]{4}0[A-Z0-9]{6}$/;
+const ACCOUNT_PATTERN = /^[0-9]{9,18}$/;
+const COLLAPSIBLE_CONTENT_TAB = "__WS_SECTION_CONTENT__";
+const createOption = (code, name) => ({
+  code,
+  name
+});
+const TYPE_OF_REQUEST_OPTIONS = [createOption("NEW_CONNECTION", "New Connection"), createOption("TEMPORARY_CONNECTION", "Temporary Connection"), createOption("CHANGE_REQUEST", "Change Request")];
+const CONNECTION_TYPE_OPTIONS = [createOption("METERED", "Metered"), createOption("NON_METERED", "Non Metered")];
+const LOCALITY_OPTIONS = [createOption("DWARKA", "Dwarka"), createOption("ROHINI", "Rohini"), createOption("KAROL_BAGH", "Karol Bagh")];
+const SUB_LOCALITY_OPTIONS = {
+  DWARKA: [createOption("SECTOR_6", "Sector 6"), createOption("SECTOR_10", "Sector 10"), createOption("SECTOR_12", "Sector 12")],
+  ROHINI: [createOption("SECTOR_3", "Sector 3"), createOption("SECTOR_8", "Sector 8"), createOption("SECTOR_16", "Sector 16")],
+  KAROL_BAGH: [createOption("DEV_NAGAR", "Dev Nagar"), createOption("PAHAR_GANJ", "Pahar Ganj"), createOption("PATEL_NAGAR", "Patel Nagar")]
+};
+const ASSEMBLY_OPTIONS = [createOption("DWARKA_ASSEMBLY", "Dwarka Assembly"), createOption("ROHINI_ASSEMBLY", "Rohini Assembly"), createOption("KAROL_BAGH_ASSEMBLY", "Karol Bagh Assembly")];
+const WARD_OPTIONS = [createOption("WARD_101", "Ward 101"), createOption("WARD_102", "Ward 102"), createOption("WARD_103", "Ward 103")];
+const PROPERTY_TYPE_OPTIONS = [createOption("RESIDENTIAL", "Residential"), createOption("COMMERCIAL", "Commercial"), createOption("INDUSTRIAL", "Industrial"), createOption("INSTITUTIONAL", "Institutional"), createOption("HOSPITAL_NURSING_HOME", "Hospital / Nursing Home")];
+const WATER_CONNECTION_CATEGORY_OPTIONS = [createOption("DOMESTIC", "Domestic"), createOption("NON_DOMESTIC", "Non-Domestic"), createOption("MIXED_USE", "Mixed Use")];
+const WATER_CONNECTION_USED_BY_OPTIONS = [createOption("OWNER", "Owner"), createOption("TENANT", "Tenant"), createOption("AUTHORIZED_OCCUPIER", "Authorized Occupier")];
+const PROOF_OF_IDENTITY_OPTIONS = [createOption("AADHAAR", "Aadhaar"), createOption("PAN", "PAN"), createOption("VOTER_ID", "Voter ID"), createOption("PASSPORT", "Passport"), createOption("DRIVING_LICENSE", "Driving License")];
+const OWNERSHIP_STATUS_OPTIONS = [createOption("SELF_OWNED", "Self Owned"), createOption("LEASED", "Leased"), createOption("RENTED", "Rented"), createOption("GOVERNMENT_ALLOTTED", "Government Allotted")];
+const SUBMITTED_BY_OPTIONS = [createOption("APPLICANT", "Applicant"), createOption("AUTHORIZED_SIGNATORY", "Authorized Signatory"), createOption("DJB_COUNTER", "DJB Counter")];
+const DEFAULT_SECTION_STATE = {
+  application: true,
+  applicant: true,
+  contact: true,
+  employee: true,
+  address: true,
+  usage: true,
+  bank: true,
+  rainWaterHarvesting: true,
+  documents: true,
+  declaration: true
+};
+const DEFAULT_FORM_VALUES = {
+  typeOfRequest: null,
+  connectionType: null,
+  applicant: {
+    firstName: "",
+    middleName: "",
+    lastName: "",
+    fatherOrHusbandName: "",
+    isGovernmentOrganization: false,
+    applicantIdProofFile: null,
+    governmentOrganizationName: ""
+  },
+  contact: {
+    emailId: "",
+    mobileNumber: "",
+    officeNumber: ""
+  },
+  djbEmployee: {
+    isDjbEmployee: false,
+    employeeId: "",
+    retirementDate: "",
+    officeNameAndAddress: ""
+  },
+  propertyAddress: {
+    address: "",
+    landmark: "",
+    pinCode: "",
+    locality: null,
+    subLocality: null,
+    assembly: null,
+    ward: null
+  },
+  useDetails: {
+    propertyType: null,
+    noOfFloors: "",
+    hospitalBeds: "",
+    plotArea: "",
+    builtUpArea: "",
+    waterConnectionCategory: null,
+    waterConnectionUsedBy: null
+  },
+  bankDetails: {
+    bankName: "",
+    branchName: "",
+    ifscCode: "",
+    bankAccountNumber: ""
+  },
+  rainWaterHarvesting: {
+    applyForAdequacyCertificate: false
+  },
+  documents: {
+    proofOfIdentity: null,
+    identityProofFile: null,
+    ownershipStatus: null,
+    ownershipDocumentFile: null,
+    otherDocumentFile: null
+  },
+  declaration: {
+    submittedBy: null,
+    signatureFile: null,
+    captcha: "",
+    agree: false
+  },
+  cpt: {
+    id: "",
+    details: null
+  }
+};
+const fieldWrapperStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "8px",
+  minWidth: 0
+};
+const secondaryButtonStyle = {
+  background: "#FFFFFF",
+  border: "1px solid #0B4B66",
+  boxShadow: "none",
+  color: "#0B4B66"
+};
+const actionBarStyle = {
+  display: "flex",
+  justifyContent: "flex-end",
+  alignItems: "center",
+  gap: "16px",
+  flexWrap: "wrap"
+};
+const captchaBoxStyle = {
+  background: "#F3F7F9",
+  border: "1px dashed #0B4B66",
+  borderRadius: "4px",
+  fontFamily: "monospace",
+  fontSize: "20px",
+  fontWeight: "700",
+  letterSpacing: "4px",
+  padding: "12px 16px"
+};
+const linkButtonStyle = {
+  background: "transparent",
+  border: "none",
+  color: "#0B4B66",
+  cursor: "pointer",
+  fontSize: "14px",
+  fontWeight: "600",
+  padding: 0,
+  textDecoration: "underline"
+};
+const getStoredFormData = () => {
+  if (typeof window === "undefined") return {};
+  try {
+    const savedData = window.sessionStorage.getItem(FORM_STORAGE_KEY);
+    return savedData ? JSON.parse(savedData) : {};
+  } catch (error) {
+    return {};
+  }
+};
+const buildDefaultValues = (savedFormData = {}) => ({
+  typeOfRequest: (savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.typeOfRequest) || DEFAULT_FORM_VALUES.typeOfRequest,
+  connectionType: (savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.connectionType) || DEFAULT_FORM_VALUES.connectionType,
+  applicant: {
+    ...DEFAULT_FORM_VALUES.applicant,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.applicant) || {})
+  },
+  contact: {
+    ...DEFAULT_FORM_VALUES.contact,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.contact) || {})
+  },
+  djbEmployee: {
+    ...DEFAULT_FORM_VALUES.djbEmployee,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.djbEmployee) || {})
+  },
+  propertyAddress: {
+    ...DEFAULT_FORM_VALUES.propertyAddress,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.propertyAddress) || {})
+  },
+  useDetails: {
+    ...DEFAULT_FORM_VALUES.useDetails,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.useDetails) || {})
+  },
+  bankDetails: {
+    ...DEFAULT_FORM_VALUES.bankDetails,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.bankDetails) || {})
+  },
+  rainWaterHarvesting: {
+    ...DEFAULT_FORM_VALUES.rainWaterHarvesting,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.rainWaterHarvesting) || {})
+  },
+  documents: {
+    ...DEFAULT_FORM_VALUES.documents,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.documents) || {})
+  },
+  declaration: {
+    ...DEFAULT_FORM_VALUES.declaration,
+    ...((savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.declaration) || {})
+  },
+  cpt: (savedFormData === null || savedFormData === void 0 ? void 0 : savedFormData.cpt) || {
+    id: "",
+    details: null
+  }
+});
+const resolveNestedValue = (value, path) => path.split(".").reduce((accumulator, currentKey) => {
+  if (accumulator === null || accumulator === undefined) return undefined;
+  return accumulator[currentKey];
+}, value);
+const getDisplayValue = value => {
+  if (value === null || value === undefined || value === "") return "Not provided";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "object") {
+    if (value !== null && value !== void 0 && value.fileName) return value.fileName;
+    if (value !== null && value !== void 0 && value.name) return value.name;
+    if (value !== null && value !== void 0 && value.code) return value.code;
+  }
+  return String(value);
+};
+const generateCaptcha = () => {
+  const characters = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
+  let captcha = "";
+  for (let index = 0; index < 6; index += 1) {
+    captcha += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return captcha;
+};
+const FieldBlock = ({
+  label,
+  required,
+  error,
+  children,
+  hint,
+  isFullWidth
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      ...fieldWrapperStyle,
+      ...(isFullWidth ? {
+        gridColumn: "1 / -1"
+      } : {})
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      fontWeight: "600",
+      marginBottom: "0px"
+    }
+  }, required ? `${label} *` : label), children, hint ? /*#__PURE__*/React.createElement(CardText, {
+    style: {
+      color: "#505A5F",
+      fontSize: "14px",
+      marginBottom: "0px",
+      marginTop: "0px"
+    }
+  }, hint) : null, error ? /*#__PURE__*/React.createElement(CardLabelError, null, (error === null || error === void 0 ? void 0 : error.message) || error) : null);
+};
+const SectionCard = ({
+  title,
+  description,
+  isOpen: _isOpen = true,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ws-new-application-collapsible",
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(CollapsibleCardPage, {
+    defaultOpen: _isOpen,
+    defaultTab: COLLAPSIBLE_CONTENT_TAB,
+    tabs: [COLLAPSIBLE_CONTENT_TAB],
+    title: title
+  }, () => /*#__PURE__*/React.createElement(React.Fragment, null, description ? /*#__PURE__*/React.createElement(CardSectionSubText, {
+    style: {
+      marginBottom: "16px"
+    }
+  }, description) : null, /*#__PURE__*/React.createElement("div", {
+    className: "formcomposer-section-grid"
+  }, children))));
+};
+const PreviewItem = ({
+  label,
+  value,
+  isFullWidth
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      ...fieldWrapperStyle,
+      ...(isFullWidth ? {
+        gridColumn: "1 / -1"
+      } : {})
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      fontWeight: "600",
+      marginBottom: "0px"
+    }
+  }, label), /*#__PURE__*/React.createElement(CardText, {
+    style: {
+      marginBottom: "0px",
+      marginTop: "0px"
+    }
+  }, getDisplayValue(value)));
+};
+const FileUploadField = ({
+  id,
+  label,
+  value,
+  onUpload,
+  onDelete,
+  error,
+  isUploading,
+  helperText,
+  required
+}) => {
+  return /*#__PURE__*/React.createElement(FieldBlock, {
+    label: label,
+    required: required,
+    error: error,
+    hint: helperText
+  }, /*#__PURE__*/React.createElement(UploadFile, {
+    accept: "image/*,.pdf,.png,.jpeg,.jpg",
+    buttonType: "button",
+    error: !!error,
+    id: id,
+    message: value !== null && value !== void 0 && value.fileStoreId ? "1 file uploaded" : "No file uploaded",
+    onDelete: onDelete,
+    onUpload: onUpload
+  }), /*#__PURE__*/React.createElement(CardText, {
+    style: {
+      marginBottom: "0px",
+      marginTop: "0px"
+    }
+  }, isUploading ? "Uploading file..." : (value === null || value === void 0 ? void 0 : value.fileName) || "No file selected"));
+};
 const NewApplication = () => {
-  var _Digit$SessionStorage;
+  var _Digit$SessionStorage, _formValues$applicant, _formValues$applicant2, _formValues$applicant3, _formValues$applicant4, _formValues$applicant5, _formValues$applicant6, _formValues$applicant7, _formValues$applicant8, _formValues$contact, _formValues$contact2, _formValues$contact3, _formValues$djbEmploy, _formValues$djbEmploy2, _formValues$djbEmploy3, _formValues$djbEmploy4, _formValues$djbEmploy5, _formValues$propertyA, _formValues$propertyA2, _formValues$propertyA3, _formValues$propertyA4, _formValues$propertyA5, _formValues$propertyA6, _formValues$propertyA7, _formValues$useDetail, _formValues$useDetail2, _formValues$useDetail3, _formValues$useDetail4, _formValues$useDetail5, _formValues$useDetail6, _formValues$useDetail7, _formValues$useDetail8, _formValues$useDetail9, _formValues$bankDetai, _formValues$bankDetai2, _formValues$bankDetai3, _formValues$bankDetai4, _formValues$rainWater, _formValues$documents, _formValues$documents2, _formValues$documents3, _formValues$documents4, _formValues$documents5, _formValues$declarati, _formValues$declarati2, _formValues$declarati3, _formValues$declarati4;
   const {
     t
   } = useTranslation();
   const history = useHistory();
-  const [canSubmit, setSubmitValve] = useState(false);
-  const [isEnableLoader, setIsEnableLoader] = useState(false);
+  const location = useLocation();
+  const stateId = Digit.ULBService.getStateId();
+  const tenantId = Digit.ULBService.getCurrentTenantId() || ((_Digit$SessionStorage = Digit.SessionStorage.get("CITIZEN.COMMON.HOME.CITY")) === null || _Digit$SessionStorage === void 0 ? void 0 : _Digit$SessionStorage.code);
+  const [previewMode, setPreviewMode] = useState(false);
+  const [collapsedSections, setCollapsedSections] = useState(DEFAULT_SECTION_STATE);
   const [showToast, setShowToast] = useState(null);
+  const [generatedCaptcha, setGeneratedCaptcha] = useState(generateCaptcha());
+  const [uploadingFields, setUploadingFields] = useState({});
+  const [isEnableLoader, setIsEnableLoader] = useState(false);
   const [appDetails, setAppDetails] = useState({});
   const [waterAndSewerageBoth, setWaterAndSewerageBoth] = useState(null);
-  const [config, setConfig] = useState({
-    head: "",
-    body: []
-  });
-  let tenantId = Digit.ULBService.getCurrentTenantId();
-  tenantId ? tenantId : (_Digit$SessionStorage = Digit.SessionStorage.get("CITIZEN.COMMON.HOME.CITY")) === null || _Digit$SessionStorage === void 0 ? void 0 : _Digit$SessionStorage.code;
-  const stateId = Digit.ULBService.getStateId();
-  let {
-    data: newConfig,
-    isLoading
-  } = Digit.Hooks.ws.useWSConfigMDMS.WSCreateConfig(stateId, {});
-  const [propertyId, setPropertyId] = useState(new URLSearchParams(useLocation().search).get("propertyId"));
-  const [sessionFormData, setSessionFormData, clearSessionFormData] = Digit.Hooks.useSessionStorage("PT_CREATE_EMP_WS_NEW_FORM", {});
+  const [propertyId, setPropertyId] = useState(new URLSearchParams(location.search).get("propertyId"));
+  console.log(propertyId, 'property idddddd');
+  const initialFormValues = buildDefaultValues(getStoredFormData());
   const {
-    data: propertyDetails
+    register,
+    control,
+    handleSubmit,
+    watch,
+    setValue,
+    setError,
+    clearErrors,
+    reset,
+    formState: {
+      errors
+    }
+  } = useForm({
+    defaultValues: initialFormValues,
+    shouldUnregister: false
+  });
+  const formValues = watch();
+  const isGovernmentOrganization = watch("applicant.isGovernmentOrganization");
+  const isDjbEmployee = watch("djbEmployee.isDjbEmployee");
+  const selectedPropertyType = watch("useDetails.propertyType");
+  const selectedLocality = watch("propertyAddress.locality");
+  const selectedSubLocality = watch("propertyAddress.subLocality");
+  const subLocalityOptions = selectedLocality ? SUB_LOCALITY_OPTIONS[selectedLocality.code] || [] : [];
+  const hasPendingUpload = Object.values(uploadingFields).some(Boolean);
+  const isHospitalProperty = (selectedPropertyType === null || selectedPropertyType === void 0 ? void 0 : selectedPropertyType.code) === "HOSPITAL_NURSING_HOME";
+  const {
+    data: propertyDetails,
+    isLoading: isPropertyLoading
   } = Digit.Hooks.pt.usePropertySearch({
     filters: {
       propertyIds: propertyId
@@ -30928,114 +31338,189 @@ const NewApplication = () => {
       propertyIds: propertyId
     },
     tenantId: tenantId,
-    enabled: propertyId && propertyId != "" ? true : false
+    enabled: !!propertyId
   });
-  useEffect(() => {
-    if (!isLoading) {
-      var _config$body;
-      const config = newConfig.find(conf => conf.hideInCitizen && conf.isCreate);
-      config.head = "WS_APP_FOR_WATER_AND_SEWERAGE_LABEL";
-      let bodyDetails = [];
-      config === null || config === void 0 ? void 0 : (_config$body = config.body) === null || _config$body === void 0 ? void 0 : _config$body.forEach(data => {
-        if (data !== null && data !== void 0 && data.isCreateConnection) bodyDetails.push(data);
-      });
-      config.body = bodyDetails;
-      setConfig(config);
-    }
-  }, [newConfig]);
-  useEffect(() => {
-    var _sessionFormData$cpt, _sessionFormData$cpt$, _sessionFormData$cpt2, _sessionFormData$cpt3;
-    !propertyId && (sessionFormData === null || sessionFormData === void 0 ? void 0 : (_sessionFormData$cpt = sessionFormData.cpt) === null || _sessionFormData$cpt === void 0 ? void 0 : (_sessionFormData$cpt$ = _sessionFormData$cpt.details) === null || _sessionFormData$cpt$ === void 0 ? void 0 : _sessionFormData$cpt$.propertyId) && setPropertyId(sessionFormData === null || sessionFormData === void 0 ? void 0 : (_sessionFormData$cpt2 = sessionFormData.cpt) === null || _sessionFormData$cpt2 === void 0 ? void 0 : (_sessionFormData$cpt3 = _sessionFormData$cpt2.details) === null || _sessionFormData$cpt3 === void 0 ? void 0 : _sessionFormData$cpt3.propertyId);
-  }, [sessionFormData === null || sessionFormData === void 0 ? void 0 : sessionFormData.cpt]);
-  useEffect(() => {
-    var _propertyDetails$Prop;
-    setSessionFormData({
-      ...sessionFormData,
-      cpt: {
-        details: propertyDetails === null || propertyDetails === void 0 ? void 0 : (_propertyDetails$Prop = propertyDetails.Properties) === null || _propertyDetails$Prop === void 0 ? void 0 : _propertyDetails$Prop[0]
-      }
-    });
-  }, [propertyDetails]);
   const {
-    isLoading: creatingWaterApplicationLoading,
-    isError: createWaterApplicationError,
-    data: createWaterResponse,
-    error: createWaterError,
     mutate: waterMutation
   } = Digit.Hooks.ws.useWaterCreateAPI("WATER");
   const {
-    isLoading: updatingWaterApplicationLoading,
-    isError: updateWaterApplicationError,
-    data: updateWaterResponse,
-    error: updateWaterError,
     mutate: waterUpdateMutation
   } = Digit.Hooks.ws.useWSApplicationActions("WATER");
   const {
-    isLoading: creatingSewerageApplicationLoading,
-    isError: createSewerageApplicationError,
-    data: createSewerageResponse,
-    error: createSewerageError,
     mutate: sewerageMutation
   } = Digit.Hooks.ws.useWaterCreateAPI("SEWERAGE");
   const {
-    isLoading: updatingSewerageApplicationLoading,
-    isError: updateSewerageApplicationError,
-    data: updateSewerageResponse,
-    error: updateSewerageError,
     mutate: sewerageUpdateMutation
   } = Digit.Hooks.ws.useWSApplicationActions("SEWERAGE");
-  const onFormValueChange = (setValue, formData, formState) => {
-    var _formState$errors, _formState$errors$Con, _Object$keys, _formState$errors2, _formState$errors2$Co;
-    if (!lodash.isEqual(sessionFormData, formData)) {
-      setSessionFormData({
-        ...sessionFormData,
-        ...formData
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.sessionStorage.setItem(FORM_STORAGE_KEY, JSON.stringify(formValues));
+  }, [formValues]);
+  useEffect(() => {
+    if (!isGovernmentOrganization) {
+      setValue("applicant.governmentOrganizationName", "");
+      clearErrors("applicant.governmentOrganizationName");
+    }
+  }, [isGovernmentOrganization, setValue, clearErrors]);
+  useEffect(() => {
+    if (!isDjbEmployee) {
+      setValue("djbEmployee.employeeId", "");
+      setValue("djbEmployee.retirementDate", "");
+      setValue("djbEmployee.officeNameAndAddress", "");
+      clearErrors("djbEmployee.employeeId");
+      clearErrors("djbEmployee.retirementDate");
+      clearErrors("djbEmployee.officeNameAndAddress");
+    }
+  }, [isDjbEmployee, setValue, clearErrors]);
+  useEffect(() => {
+    if (!isHospitalProperty) {
+      setValue("useDetails.hospitalBeds", "");
+      clearErrors("useDetails.hospitalBeds");
+    }
+  }, [isHospitalProperty, setValue, clearErrors]);
+  useEffect(() => {
+    const isValidSubLocality = selectedSubLocality ? subLocalityOptions.some(option => option.code === selectedSubLocality.code) : true;
+    if (!isValidSubLocality) {
+      setValue("propertyAddress.subLocality", null);
+    }
+  }, [selectedLocality === null || selectedLocality === void 0 ? void 0 : selectedLocality.code, selectedSubLocality === null || selectedSubLocality === void 0 ? void 0 : selectedSubLocality.code, setValue]);
+  const closeToast = () => setShowToast(null);
+  const closeToastOfError = () => setShowToast(null);
+  const toggleSection = sectionKey => {
+    setCollapsedSections(previousState => ({
+      ...previousState,
+      [sectionKey]: !previousState[sectionKey]
+    }));
+  };
+  const getFieldError = fieldName => resolveNestedValue(errors, fieldName);
+  const refreshCaptcha = () => {
+    setGeneratedCaptcha(generateCaptcha());
+    setValue("declaration.captcha", "");
+    clearErrors("declaration.captcha");
+  };
+  const uploadFile = async (event, fieldName, onChange) => {
+    var _event$target, _event$target$files;
+    const file = event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : (_event$target$files = _event$target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files[0];
+    if (!file) {
+      onChange(null);
+      return;
+    }
+    setUploadingFields(previousState => ({
+      ...previousState,
+      [fieldName]: true
+    }));
+    clearErrors(fieldName);
+    try {
+      var _response$data, _response$data$files, _response$data$files$;
+      if (file.size > MAX_FILE_SIZE) {
+        throw new Error("File size should be 5 MB or less.");
+      }
+      if (!SUPPORTED_FILE_TYPES.test(file.name)) {
+        throw new Error("Only PDF, PNG, JPG and JPEG files are supported.");
+      }
+      const response = await Digit.UploadServices.Filestorage("WS", file, stateId);
+      const fileStoreId = response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : (_response$data$files = _response$data.files) === null || _response$data$files === void 0 ? void 0 : (_response$data$files$ = _response$data$files[0]) === null || _response$data$files$ === void 0 ? void 0 : _response$data$files$.fileStoreId;
+      if (!fileStoreId) {
+        throw new Error("File upload failed. Please try again.");
+      }
+      onChange({
+        fileName: file.name,
+        fileSize: file.size,
+        fileStoreId,
+        fileType: file.type
+      });
+      clearErrors(fieldName);
+    } catch (error) {
+      onChange(null);
+      setError(fieldName, {
+        type: "manual",
+        message: (error === null || error === void 0 ? void 0 : error.message) || "File upload failed. Please try again."
+      });
+      setShowToast({
+        key: "error",
+        message: (error === null || error === void 0 ? void 0 : error.message) || "File upload failed. Please try again."
+      });
+    } finally {
+      setUploadingFields(previousState => ({
+        ...previousState,
+        [fieldName]: false
+      }));
+    }
+  };
+  const clearUploadedFile = (fieldName, onChange) => {
+    onChange(null);
+    clearErrors(fieldName);
+  };
+  const scrollToTop = () => {
+    if (typeof window !== "undefined") {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth"
       });
-      sessionStorage.setItem("FORMSTATE_ERRORS", JSON.stringify(formState === null || formState === void 0 ? void 0 : formState.errors));
     }
-    if (Object.keys(formState.errors).length > 0 && Object.keys(formState.errors).length == 1 && formState !== null && formState !== void 0 && (_formState$errors = formState.errors) !== null && _formState$errors !== void 0 && (_formState$errors$Con = _formState$errors["ConnectionHolderDetails"]) !== null && _formState$errors$Con !== void 0 && _formState$errors$Con.type && ((_Object$keys = Object.keys(formState === null || formState === void 0 ? void 0 : (_formState$errors2 = formState.errors) === null || _formState$errors2 === void 0 ? void 0 : (_formState$errors2$Co = _formState$errors2["ConnectionHolderDetails"]) === null || _formState$errors2$Co === void 0 ? void 0 : _formState$errors2$Co.type)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) == 1 && formState.errors["ConnectionHolderDetails"] && Object.values(formState.errors["ConnectionHolderDetails"].type).filter(ob => {
-      var _ob$ref;
-      return ob.type === "required" && (ob === null || ob === void 0 ? void 0 : (_ob$ref = ob.ref) === null || _ob$ref === void 0 ? void 0 : _ob$ref.value) !== "";
-    }).length > 0) setSubmitValve(true);else setSubmitValve(!Object.keys(formState.errors).length);
   };
-  const closeToastOfError = () => {
-    setShowToast(null);
+  const validateCaptcha = data => {
+    var _data$declaration, _data$declaration$cap, _data$declaration$cap2;
+    if ((data === null || data === void 0 ? void 0 : (_data$declaration = data.declaration) === null || _data$declaration === void 0 ? void 0 : (_data$declaration$cap = _data$declaration.captcha) === null || _data$declaration$cap === void 0 ? void 0 : (_data$declaration$cap2 = _data$declaration$cap.trim()) === null || _data$declaration$cap2 === void 0 ? void 0 : _data$declaration$cap2.toUpperCase()) !== generatedCaptcha) {
+      setError("declaration.captcha", {
+        type: "manual",
+        message: "Captcha does not match."
+      });
+      setShowToast({
+        warning: true,
+        message: "Captcha does not match."
+      });
+      return false;
+    }
+    clearErrors("declaration.captcha");
+    return true;
   };
-  const onSubmit = async data => {
-    var _data$cpt, _propertyDetails$Prop2, _formStateErros$Conne, _Object$keys2, _formStateErros$Conne2;
-    if (!(data !== null && data !== void 0 && (_data$cpt = data.cpt) !== null && _data$cpt !== void 0 && _data$cpt.id) && !(propertyDetails !== null && propertyDetails !== void 0 && (_propertyDetails$Prop2 = propertyDetails.Properties) !== null && _propertyDetails$Prop2 !== void 0 && _propertyDetails$Prop2[0])) {
-      var _data$cpt2;
-      if (!(data !== null && data !== void 0 && (_data$cpt2 = data.cpt) !== null && _data$cpt2 !== void 0 && _data$cpt2.details) || !propertyDetails) {
-        setShowToast({
-          key: "error",
-          message: "ERR_INVALID_PROPERTY_ID"
-        });
-        return;
-      }
+  const onPreview = data => {
+    if (hasPendingUpload) {
+      setShowToast({
+        warning: true,
+        message: "Please wait for all file uploads to complete."
+      });
+      return;
     }
-    const errors = sessionStorage.getItem("FORMSTATE_ERRORS");
-    const formStateErros = typeof errors == "string" ? JSON.parse(errors) : {};
-    if (Object.keys(formStateErros).length > 0 && !(Object.keys(formStateErros).length == 1 && formStateErros !== null && formStateErros !== void 0 && (_formStateErros$Conne = formStateErros["ConnectionHolderDetails"]) !== null && _formStateErros$Conne !== void 0 && _formStateErros$Conne.type && ((_Object$keys2 = Object.keys(formStateErros === null || formStateErros === void 0 ? void 0 : (_formStateErros$Conne2 = formStateErros["ConnectionHolderDetails"]) === null || _formStateErros$Conne2 === void 0 ? void 0 : _formStateErros$Conne2.type)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.length) == 1 && formStateErros["ConnectionHolderDetails"] && Object.values(formStateErros["ConnectionHolderDetails"].type).filter(ob => {
-      var _ob$ref2;
-      return ob.type === "required" && (ob === null || ob === void 0 ? void 0 : (_ob$ref2 = ob.ref) === null || _ob$ref2 === void 0 ? void 0 : _ob$ref2.value) !== "";
-    }).length > 0)) {
+    if (!validateCaptcha(data)) return;
+    setPreviewMode(true);
+    scrollToTop();
+  };
+  const onSubmit = async data => {
+    var _propertyDetails$Prop;
+    if (hasPendingUpload) {
       setShowToast({
         warning: true,
-        message: "PLEASE_FILL_MANDATORY_DETAILS"
+        message: "Please wait for all file uploads to complete."
       });
       return;
-    } else {
-      var _data$cpt3;
-      if (!(data !== null && data !== void 0 && (_data$cpt3 = data.cpt) !== null && _data$cpt3 !== void 0 && _data$cpt3.details)) {
-        var _propertyDetails$Prop3;
-        data.cpt = {
-          details: propertyDetails === null || propertyDetails === void 0 ? void 0 : (_propertyDetails$Prop3 = propertyDetails.Properties) === null || _propertyDetails$Prop3 === void 0 ? void 0 : _propertyDetails$Prop3[0]
-        };
-      }
-      const allDetails = cloneDeep_1(data);
-      const payload = await createPayloadOfWS(data);
+    }
+    if (!validateCaptcha(data)) return;
+    if (!(propertyDetails !== null && propertyDetails !== void 0 && (_propertyDetails$Prop = propertyDetails.Properties) !== null && _propertyDetails$Prop !== void 0 && _propertyDetails$Prop[0])) {
+      setShowToast({
+        key: "error",
+        message: "ERR_INVALID_PROPERTY_ID"
+      });
+      return;
+    }
+    try {
+      var _propertyDetails$Prop2;
+      const formDataWithProperty = {
+        ...data,
+        cpt: {
+          details: propertyDetails === null || propertyDetails === void 0 ? void 0 : (_propertyDetails$Prop2 = propertyDetails.Properties) === null || _propertyDetails$Prop2 === void 0 ? void 0 : _propertyDetails$Prop2[0]
+        }
+      };
+      const payload = await createPayloadOfWS(formDataWithProperty);
       let waterAndSewerageLoader = false;
       if (payload !== null && payload !== void 0 && payload.water && payload !== null && payload !== void 0 && payload.sewerage) waterAndSewerageLoader = true;
+      if (waterAndSewerageLoader) {
+        setWaterAndSewerageBoth(true);
+        sessionStorage.setItem("setWaterAndSewerageBoth", JSON.stringify(true));
+      } else {
+        sessionStorage.setItem("setWaterAndSewerageBoth", JSON.stringify(false));
+      }
       let waterConnection = {
         WaterConnection: payload,
         disconnectRequest: false,
@@ -31046,26 +31531,20 @@ const NewApplication = () => {
         disconnectRequest: false,
         reconnectRequest: false
       };
-      if (waterAndSewerageLoader) {
-        setWaterAndSewerageBoth(true);
-        sessionStorage.setItem("setWaterAndSewerageBoth", JSON.stringify(true));
-      } else {
-        sessionStorage.setItem("setWaterAndSewerageBoth", JSON.stringify(false));
-      }
       if (payload !== null && payload !== void 0 && payload.water && payload !== null && payload !== void 0 && payload.sewerage) {
         if (waterMutation && sewerageMutation) {
           setIsEnableLoader(true);
           await waterMutation(waterConnection, {
-            onError: (error, variables) => {
-              var _error$response, _error$response$data, _error$response$data$, _error$response2, _error$response2$data, _error$response2$data2;
+            onError: error => {
+              var _error$response, _error$response$data, _error$response$data$;
               setIsEnableLoader(false);
               setShowToast({
                 key: "error",
-                message: error !== null && error !== void 0 && (_error$response = error.response) !== null && _error$response !== void 0 && (_error$response$data = _error$response.data) !== null && _error$response$data !== void 0 && (_error$response$data$ = _error$response$data.Errors) !== null && _error$response$data$ !== void 0 && _error$response$data$[0].message ? error === null || error === void 0 ? void 0 : (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : (_error$response2$data = _error$response2.data) === null || _error$response2$data === void 0 ? void 0 : (_error$response2$data2 = _error$response2$data.Errors) === null || _error$response2$data2 === void 0 ? void 0 : _error$response2$data2[0].message : error
+                message: (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : (_error$response$data$ = _error$response$data.Errors) === null || _error$response$data$ === void 0 ? void 0 : _error$response$data$[0].message) || error
               });
               setTimeout(closeToastOfError, 5000);
             },
-            onSuccess: async (waterData, variables) => {
+            onSuccess: async waterData => {
               var _waterData$WaterConne;
               let response = await updatePayloadOfWS(waterData === null || waterData === void 0 ? void 0 : (_waterData$WaterConne = waterData.WaterConnection) === null || _waterData$WaterConne === void 0 ? void 0 : _waterData$WaterConne[0], "WATER");
               let waterConnectionUpdate = {
@@ -31074,32 +31553,34 @@ const NewApplication = () => {
                 reconnectRequest: false
               };
               waterUpdateMutation(waterConnectionUpdate, {
-                onError: (error, variables) => {
-                  var _error$response3, _error$response3$data, _error$response3$data2, _error$response4, _error$response4$data, _error$response4$data2;
+                onError: error => {
+                  var _error$response2, _error$response2$data, _error$response2$data2;
                   setIsEnableLoader(false);
                   setShowToast({
                     key: "error",
-                    message: error !== null && error !== void 0 && (_error$response3 = error.response) !== null && _error$response3 !== void 0 && (_error$response3$data = _error$response3.data) !== null && _error$response3$data !== void 0 && (_error$response3$data2 = _error$response3$data.Errors) !== null && _error$response3$data2 !== void 0 && _error$response3$data2[0].message ? error === null || error === void 0 ? void 0 : (_error$response4 = error.response) === null || _error$response4 === void 0 ? void 0 : (_error$response4$data = _error$response4.data) === null || _error$response4$data === void 0 ? void 0 : (_error$response4$data2 = _error$response4$data.Errors) === null || _error$response4$data2 === void 0 ? void 0 : _error$response4$data2[0].message : error
+                    message: (error === null || error === void 0 ? void 0 : (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : (_error$response2$data = _error$response2.data) === null || _error$response2$data === void 0 ? void 0 : (_error$response2$data2 = _error$response2$data.Errors) === null || _error$response2$data2 === void 0 ? void 0 : _error$response2$data2[0].message) || error
                   });
                   setTimeout(closeToastOfError, 5000);
                 },
-                onSuccess: async (waterUpdateData, variables) => {
-                  var _waterUpdateData$Wate;
-                  setAppDetails({
-                    ...appDetails,
-                    waterConnection: waterUpdateData === null || waterUpdateData === void 0 ? void 0 : (_waterUpdateData$Wate = waterUpdateData.WaterConnection) === null || _waterUpdateData$Wate === void 0 ? void 0 : _waterUpdateData$Wate[0]
+                onSuccess: async waterUpdateData => {
+                  setAppDetails(prev => {
+                    var _waterUpdateData$Wate;
+                    return {
+                      ...prev,
+                      waterConnection: waterUpdateData === null || waterUpdateData === void 0 ? void 0 : (_waterUpdateData$Wate = waterUpdateData.WaterConnection) === null || _waterUpdateData$Wate === void 0 ? void 0 : _waterUpdateData$Wate[0]
+                    };
                   });
                   await sewerageMutation(sewerageConnection, {
-                    onError: (error, variables) => {
-                      var _error$response5, _error$response5$data, _error$response5$data2, _error$response6, _error$response6$data, _error$response6$data2;
+                    onError: error => {
+                      var _error$response3, _error$response3$data, _error$response3$data2;
                       setIsEnableLoader(false);
                       setShowToast({
                         key: "error",
-                        message: error !== null && error !== void 0 && (_error$response5 = error.response) !== null && _error$response5 !== void 0 && (_error$response5$data = _error$response5.data) !== null && _error$response5$data !== void 0 && (_error$response5$data2 = _error$response5$data.Errors) !== null && _error$response5$data2 !== void 0 && _error$response5$data2[0].message ? error === null || error === void 0 ? void 0 : (_error$response6 = error.response) === null || _error$response6 === void 0 ? void 0 : (_error$response6$data = _error$response6.data) === null || _error$response6$data === void 0 ? void 0 : (_error$response6$data2 = _error$response6$data.Errors) === null || _error$response6$data2 === void 0 ? void 0 : _error$response6$data2[0].message : error
+                        message: (error === null || error === void 0 ? void 0 : (_error$response3 = error.response) === null || _error$response3 === void 0 ? void 0 : (_error$response3$data = _error$response3.data) === null || _error$response3$data === void 0 ? void 0 : (_error$response3$data2 = _error$response3$data.Errors) === null || _error$response3$data2 === void 0 ? void 0 : _error$response3$data2[0].message) || error
                       });
                       setTimeout(closeToastOfError, 5000);
                     },
-                    onSuccess: async (sewerageData, variables) => {
+                    onSuccess: async sewerageData => {
                       var _sewerageData$Sewerag;
                       let response = await updatePayloadOfWS(sewerageData === null || sewerageData === void 0 ? void 0 : (_sewerageData$Sewerag = sewerageData.SewerageConnections) === null || _sewerageData$Sewerag === void 0 ? void 0 : _sewerageData$Sewerag[0], "SEWERAGE");
                       let sewerageConnectionUpdate = {
@@ -31108,22 +31589,25 @@ const NewApplication = () => {
                         reconnectRequest: false
                       };
                       await sewerageUpdateMutation(sewerageConnectionUpdate, {
-                        onError: (error, variables) => {
-                          var _error$response7, _error$response7$data, _error$response7$data2, _error$response8, _error$response8$data, _error$response8$data2;
+                        onError: error => {
+                          var _error$response4, _error$response4$data, _error$response4$data2;
                           setIsEnableLoader(false);
                           setShowToast({
                             key: "error",
-                            message: error !== null && error !== void 0 && (_error$response7 = error.response) !== null && _error$response7 !== void 0 && (_error$response7$data = _error$response7.data) !== null && _error$response7$data !== void 0 && (_error$response7$data2 = _error$response7$data.Errors) !== null && _error$response7$data2 !== void 0 && _error$response7$data2[0].message ? error === null || error === void 0 ? void 0 : (_error$response8 = error.response) === null || _error$response8 === void 0 ? void 0 : (_error$response8$data = _error$response8.data) === null || _error$response8$data === void 0 ? void 0 : (_error$response8$data2 = _error$response8$data.Errors) === null || _error$response8$data2 === void 0 ? void 0 : _error$response8$data2[0].message : error
+                            message: (error === null || error === void 0 ? void 0 : (_error$response4 = error.response) === null || _error$response4 === void 0 ? void 0 : (_error$response4$data = _error$response4.data) === null || _error$response4$data === void 0 ? void 0 : (_error$response4$data2 = _error$response4$data.Errors) === null || _error$response4$data2 === void 0 ? void 0 : _error$response4$data2[0].message) || error
                           });
                           setTimeout(closeToastOfError, 5000);
                         },
-                        onSuccess: async (sewerageUpdateData, variables) => {
-                          var _sewerageUpdateData$S, _waterUpdateData$Wate2, _waterUpdateData$Wate3, _sewerageUpdateData$S2, _sewerageUpdateData$S3;
-                          setAppDetails({
-                            ...appDetails,
-                            sewerageConnection: sewerageUpdateData === null || sewerageUpdateData === void 0 ? void 0 : (_sewerageUpdateData$S = sewerageUpdateData.SewerageConnections) === null || _sewerageUpdateData$S === void 0 ? void 0 : _sewerageUpdateData$S[0]
+                        onSuccess: async sewerageUpdateData => {
+                          var _waterUpdateData$Wate2, _waterUpdateData$Wate3, _sewerageUpdateData$S2, _sewerageUpdateData$S3;
+                          setAppDetails(prev => {
+                            var _sewerageUpdateData$S;
+                            return {
+                              ...prev,
+                              sewerageConnection: sewerageUpdateData === null || sewerageUpdateData === void 0 ? void 0 : (_sewerageUpdateData$S = sewerageUpdateData.SewerageConnections) === null || _sewerageUpdateData$S === void 0 ? void 0 : _sewerageUpdateData$S[0]
+                            };
                           });
-                          clearSessionFormData();
+                          window.sessionStorage.removeItem(FORM_STORAGE_KEY);
                           history.push(`/digit-ui/employee/ws/ws-response?applicationNumber=${waterUpdateData === null || waterUpdateData === void 0 ? void 0 : (_waterUpdateData$Wate2 = waterUpdateData.WaterConnection) === null || _waterUpdateData$Wate2 === void 0 ? void 0 : (_waterUpdateData$Wate3 = _waterUpdateData$Wate2[0]) === null || _waterUpdateData$Wate3 === void 0 ? void 0 : _waterUpdateData$Wate3.applicationNo}&applicationNumber1=${sewerageUpdateData === null || sewerageUpdateData === void 0 ? void 0 : (_sewerageUpdateData$S2 = sewerageUpdateData.SewerageConnections) === null || _sewerageUpdateData$S2 === void 0 ? void 0 : (_sewerageUpdateData$S3 = _sewerageUpdateData$S2[0]) === null || _sewerageUpdateData$S3 === void 0 ? void 0 : _sewerageUpdateData$S3.applicationNo}`);
                         }
                       });
@@ -31138,38 +31622,41 @@ const NewApplication = () => {
         if (waterMutation) {
           setIsEnableLoader(true);
           await waterMutation(waterConnection, {
-            onError: (error, variables) => {
-              var _error$response9, _error$response9$data, _error$response9$data2, _error$response0, _error$response0$data, _error$response0$data2;
+            onError: error => {
+              var _error$response5, _error$response5$data, _error$response5$data2;
               setIsEnableLoader(false);
               setShowToast({
                 key: "error",
-                message: error !== null && error !== void 0 && (_error$response9 = error.response) !== null && _error$response9 !== void 0 && (_error$response9$data = _error$response9.data) !== null && _error$response9$data !== void 0 && (_error$response9$data2 = _error$response9$data.Errors) !== null && _error$response9$data2 !== void 0 && _error$response9$data2[0].message ? error === null || error === void 0 ? void 0 : (_error$response0 = error.response) === null || _error$response0 === void 0 ? void 0 : (_error$response0$data = _error$response0.data) === null || _error$response0$data === void 0 ? void 0 : (_error$response0$data2 = _error$response0$data.Errors) === null || _error$response0$data2 === void 0 ? void 0 : _error$response0$data2[0].message : error
+                message: (error === null || error === void 0 ? void 0 : (_error$response5 = error.response) === null || _error$response5 === void 0 ? void 0 : (_error$response5$data = _error$response5.data) === null || _error$response5$data === void 0 ? void 0 : (_error$response5$data2 = _error$response5$data.Errors) === null || _error$response5$data2 === void 0 ? void 0 : _error$response5$data2[0].message) || error
               });
               setTimeout(closeToastOfError, 5000);
             },
-            onSuccess: async (data, variables) => {
+            onSuccess: async data => {
               var _data$WaterConnection;
               let response = await updatePayloadOfWS(data === null || data === void 0 ? void 0 : (_data$WaterConnection = data.WaterConnection) === null || _data$WaterConnection === void 0 ? void 0 : _data$WaterConnection[0], "WATER");
               let waterConnectionUpdate = {
                 WaterConnection: response
               };
               waterUpdateMutation(waterConnectionUpdate, {
-                onError: (error, variables) => {
-                  var _error$response1, _error$response1$data, _error$response1$data2, _error$response10, _error$response10$dat, _error$response10$dat2;
+                onError: error => {
+                  var _error$response6, _error$response6$data, _error$response6$data2;
                   setIsEnableLoader(false);
                   setShowToast({
                     key: "error",
-                    message: error !== null && error !== void 0 && (_error$response1 = error.response) !== null && _error$response1 !== void 0 && (_error$response1$data = _error$response1.data) !== null && _error$response1$data !== void 0 && (_error$response1$data2 = _error$response1$data.Errors) !== null && _error$response1$data2 !== void 0 && _error$response1$data2[0].message ? error === null || error === void 0 ? void 0 : (_error$response10 = error.response) === null || _error$response10 === void 0 ? void 0 : (_error$response10$dat = _error$response10.data) === null || _error$response10$dat === void 0 ? void 0 : (_error$response10$dat2 = _error$response10$dat.Errors) === null || _error$response10$dat2 === void 0 ? void 0 : _error$response10$dat2[0].message : error
+                    message: (error === null || error === void 0 ? void 0 : (_error$response6 = error.response) === null || _error$response6 === void 0 ? void 0 : (_error$response6$data = _error$response6.data) === null || _error$response6$data === void 0 ? void 0 : (_error$response6$data2 = _error$response6$data.Errors) === null || _error$response6$data2 === void 0 ? void 0 : _error$response6$data2[0].message) || error
                   });
                   setTimeout(closeToastOfError, 5000);
                 },
-                onSuccess: (data, variables) => {
-                  var _data$WaterConnection2, _data$WaterConnection3, _data$WaterConnection4;
-                  setAppDetails({
-                    ...appDetails,
-                    waterConnection: data === null || data === void 0 ? void 0 : (_data$WaterConnection2 = data.WaterConnection) === null || _data$WaterConnection2 === void 0 ? void 0 : _data$WaterConnection2[0]
+                onSuccess: data => {
+                  var _data$WaterConnection3, _data$WaterConnection4;
+                  setAppDetails(prev => {
+                    var _data$WaterConnection2;
+                    return {
+                      ...prev,
+                      waterConnection: data === null || data === void 0 ? void 0 : (_data$WaterConnection2 = data.WaterConnection) === null || _data$WaterConnection2 === void 0 ? void 0 : _data$WaterConnection2[0]
+                    };
                   });
-                  clearSessionFormData();
+                  window.sessionStorage.removeItem(FORM_STORAGE_KEY);
                   history.push(`/digit-ui/employee/ws/ws-response?applicationNumber=${data === null || data === void 0 ? void 0 : (_data$WaterConnection3 = data.WaterConnection) === null || _data$WaterConnection3 === void 0 ? void 0 : (_data$WaterConnection4 = _data$WaterConnection3[0]) === null || _data$WaterConnection4 === void 0 ? void 0 : _data$WaterConnection4.applicationNo}`);
                 }
               });
@@ -31180,38 +31667,41 @@ const NewApplication = () => {
         if (sewerageMutation) {
           setIsEnableLoader(true);
           await sewerageMutation(sewerageConnection, {
-            onError: (error, variables) => {
-              var _error$response11, _error$response11$dat, _error$response11$dat2, _error$response12, _error$response12$dat, _error$response12$dat2;
+            onError: error => {
+              var _error$response7, _error$response7$data, _error$response7$data2;
               setIsEnableLoader(false);
               setShowToast({
                 key: "error",
-                message: error !== null && error !== void 0 && (_error$response11 = error.response) !== null && _error$response11 !== void 0 && (_error$response11$dat = _error$response11.data) !== null && _error$response11$dat !== void 0 && (_error$response11$dat2 = _error$response11$dat.Errors) !== null && _error$response11$dat2 !== void 0 && _error$response11$dat2[0].message ? error === null || error === void 0 ? void 0 : (_error$response12 = error.response) === null || _error$response12 === void 0 ? void 0 : (_error$response12$dat = _error$response12.data) === null || _error$response12$dat === void 0 ? void 0 : (_error$response12$dat2 = _error$response12$dat.Errors) === null || _error$response12$dat2 === void 0 ? void 0 : _error$response12$dat2[0].message : error
+                message: (error === null || error === void 0 ? void 0 : (_error$response7 = error.response) === null || _error$response7 === void 0 ? void 0 : (_error$response7$data = _error$response7.data) === null || _error$response7$data === void 0 ? void 0 : (_error$response7$data2 = _error$response7$data.Errors) === null || _error$response7$data2 === void 0 ? void 0 : _error$response7$data2[0].message) || error
               });
               setTimeout(closeToastOfError, 5000);
             },
-            onSuccess: async (data, variables) => {
+            onSuccess: async data => {
               var _data$SewerageConnect;
               let response = await updatePayloadOfWS(data === null || data === void 0 ? void 0 : (_data$SewerageConnect = data.SewerageConnections) === null || _data$SewerageConnect === void 0 ? void 0 : _data$SewerageConnect[0], "SEWERAGE");
               let sewerageConnectionUpdate = {
                 SewerageConnection: response
               };
               await sewerageUpdateMutation(sewerageConnectionUpdate, {
-                onError: (error, variables) => {
-                  var _error$response13, _error$response13$dat, _error$response13$dat2, _error$response14, _error$response14$dat, _error$response14$dat2;
+                onError: error => {
+                  var _error$response8, _error$response8$data, _error$response8$data2;
                   setIsEnableLoader(false);
                   setShowToast({
                     key: "error",
-                    message: error !== null && error !== void 0 && (_error$response13 = error.response) !== null && _error$response13 !== void 0 && (_error$response13$dat = _error$response13.data) !== null && _error$response13$dat !== void 0 && (_error$response13$dat2 = _error$response13$dat.Errors) !== null && _error$response13$dat2 !== void 0 && _error$response13$dat2[0].message ? error === null || error === void 0 ? void 0 : (_error$response14 = error.response) === null || _error$response14 === void 0 ? void 0 : (_error$response14$dat = _error$response14.data) === null || _error$response14$dat === void 0 ? void 0 : (_error$response14$dat2 = _error$response14$dat.Errors) === null || _error$response14$dat2 === void 0 ? void 0 : _error$response14$dat2[0].message : error
+                    message: (error === null || error === void 0 ? void 0 : (_error$response8 = error.response) === null || _error$response8 === void 0 ? void 0 : (_error$response8$data = _error$response8.data) === null || _error$response8$data === void 0 ? void 0 : (_error$response8$data2 = _error$response8$data.Errors) === null || _error$response8$data2 === void 0 ? void 0 : _error$response8$data2[0].message) || error
                   });
                   setTimeout(closeToastOfError, 5000);
                 },
-                onSuccess: (data, variables) => {
-                  var _data$SewerageConnect2, _data$SewerageConnect3, _data$SewerageConnect4;
-                  setAppDetails({
-                    ...appDetails,
-                    sewerageConnection: data === null || data === void 0 ? void 0 : (_data$SewerageConnect2 = data.SewerageConnections) === null || _data$SewerageConnect2 === void 0 ? void 0 : _data$SewerageConnect2[0]
+                onSuccess: data => {
+                  var _data$SewerageConnect3, _data$SewerageConnect4;
+                  setAppDetails(prev => {
+                    var _data$SewerageConnect2;
+                    return {
+                      ...prev,
+                      sewerageConnection: data === null || data === void 0 ? void 0 : (_data$SewerageConnect2 = data.SewerageConnections) === null || _data$SewerageConnect2 === void 0 ? void 0 : _data$SewerageConnect2[0]
+                    };
                   });
-                  clearSessionFormData();
+                  window.sessionStorage.removeItem(FORM_STORAGE_KEY);
                   history.push(`/digit-ui/employee/ws/ws-response?applicationNumber1=${data === null || data === void 0 ? void 0 : (_data$SewerageConnect3 = data.SewerageConnections) === null || _data$SewerageConnect3 === void 0 ? void 0 : (_data$SewerageConnect4 = _data$SewerageConnect3[0]) === null || _data$SewerageConnect4 === void 0 ? void 0 : _data$SewerageConnect4.applicationNo}`);
                 }
               });
@@ -31219,32 +31709,979 @@ const NewApplication = () => {
           });
         }
       }
+    } catch (error) {
+      setIsEnableLoader(false);
+      setShowToast({
+        key: "error",
+        message: "Failed to generate payload or submit application."
+      });
     }
   };
-  const closeToast = () => {
+  const onEdit = () => {
+    setPreviewMode(false);
+    scrollToTop();
+  };
+  const onReset = () => {
+    reset(DEFAULT_FORM_VALUES);
+    setPreviewMode(false);
+    setGeneratedCaptcha(generateCaptcha());
+    setCollapsedSections(DEFAULT_SECTION_STATE);
+    setUploadingFields({});
     setShowToast(null);
+    if (typeof window !== "undefined") {
+      window.sessionStorage.removeItem(FORM_STORAGE_KEY);
+    }
+    scrollToTop();
   };
-  if (isEnableLoader || isLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+  if (isEnableLoader || isPropertyLoading) {
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement("div", {
     className: "employee-form-content-with-action-bar"
-  }, /*#__PURE__*/React.createElement(FormComposer, {
-    config: config.body,
-    userType: "employee",
-    onFormValueChange: onFormValueChange,
-    label: t("CS_COMMON_SUBMIT"),
-    onSubmit: onSubmit,
-    defaultValues: sessionFormData,
-    cardFormWrapperClassName: "new-application-card"
-  }), showToast && /*#__PURE__*/React.createElement(Toast, {
-    isDleteBtn: true,
-    error: (showToast === null || showToast === void 0 ? void 0 : showToast.key) === "error" ? true : false,
-    warning: showToast === null || showToast === void 0 ? void 0 : showToast.warning,
-    label: t(showToast === null || showToast === void 0 ? void 0 : showToast.message),
+  }, /*#__PURE__*/React.createElement("style", null, `
+          .ws-new-application-collapsible .collapsible-card-tabs {
+            display: none;
+          }
+
+          .ws-new-application-collapsible .collapsible-card-tab-content {
+            padding: 0;
+          }
+        `), /*#__PURE__*/React.createElement(Header, null, t("New Water / Sewerage Application")), /*#__PURE__*/React.createElement(Card, {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(CardSubHeader, null, previewMode ? t("Preview Application") : t("Application Form"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: previewMode ? "none" : "block"
+    }
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Primary request selections",
+    isOpen: collapsedSections.application,
+    onToggle: toggleSection,
+    sectionKey: "application",
+    title: "Application Selection"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("typeOfRequest"),
+    label: "Type of Request",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "typeOfRequest",
+    rules: {
+      required: "Type of Request is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(RadioButtons, {
+      name: "typeOfRequest",
+      options: TYPE_OF_REQUEST_OPTIONS,
+      optionsKey: "name",
+      onSelect: props.onChange,
+      selectedOption: props.value
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("connectionType"),
+    label: "Connection Type",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "connectionType",
+    rules: {
+      required: "Connection Type is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(RadioButtons, {
+      name: "connectionType",
+      options: CONNECTION_TYPE_OPTIONS,
+      optionsKey: "name",
+      onSelect: props.onChange,
+      selectedOption: props.value
+    })
+  }))), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Applicant name, organization details, and supporting ID proof.",
+    isOpen: collapsedSections.applicant,
+    onToggle: toggleSection,
+    sectionKey: "applicant",
+    title: "Details of Applicant"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("applicant.firstName"),
+    label: "First Name",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("applicant.firstName"),
+    inputRef: register({
+      pattern: {
+        value: NAME_PATTERN,
+        message: "Use letters only."
+      },
+      required: "First Name is required."
+    }),
+    name: "applicant.firstName"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("applicant.middleName"),
+    label: "Middle Name"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("applicant.middleName"),
+    inputRef: register({
+      pattern: {
+        value: NAME_PATTERN,
+        message: "Use letters only."
+      }
+    }),
+    name: "applicant.middleName"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("applicant.lastName"),
+    label: "Last Name",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("applicant.lastName"),
+    inputRef: register({
+      pattern: {
+        value: NAME_PATTERN,
+        message: "Use letters only."
+      },
+      required: "Last Name is required."
+    }),
+    name: "applicant.lastName"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("applicant.fatherOrHusbandName"),
+    label: "Father / Husband Name",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("applicant.fatherOrHusbandName"),
+    inputRef: register({
+      pattern: {
+        value: NAME_PATTERN,
+        message: "Use letters only."
+      },
+      required: "Father / Husband Name is required."
+    }),
+    name: "applicant.fatherOrHusbandName"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    label: "Government Organization"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "applicant.isGovernmentOrganization",
+    render: props => /*#__PURE__*/React.createElement(CheckBox, {
+      checked: !!props.value,
+      label: "Applicant belongs to a Government Organization",
+      onChange: event => props.onChange(event.target.checked)
+    })
+  })), isGovernmentOrganization ? /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("applicant.governmentOrganizationName"),
+    isFullWidth: true,
+    label: "Name of Government Organization",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("applicant.governmentOrganizationName"),
+    inputRef: register({
+      required: isGovernmentOrganization ? "Government Organization Name is required." : false
+    }),
+    name: "applicant.governmentOrganizationName"
+  })) : null, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "applicant.applicantIdProofFile",
+    rules: {
+      validate: value => !!value || "Applicant ID Proof is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(FileUploadField, {
+      error: getFieldError("applicant.applicantIdProofFile"),
+      helperText: "Max size 5 MB. Allowed types: PDF, PNG, JPG, JPEG.",
+      id: "applicant-id-proof",
+      isUploading: !!uploadingFields["applicant.applicantIdProofFile"],
+      label: "Upload ID Proof",
+      onDelete: () => clearUploadedFile("applicant.applicantIdProofFile", props.onChange),
+      onUpload: event => uploadFile(event, "applicant.applicantIdProofFile", props.onChange),
+      required: true,
+      value: props.value
+    })
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Basic communication details for the application.",
+    isOpen: collapsedSections.contact,
+    onToggle: toggleSection,
+    sectionKey: "contact",
+    title: "Contact Details"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("contact.emailId"),
+    label: "Email ID",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("contact.emailId"),
+    inputRef: register({
+      pattern: {
+        value: EMAIL_PATTERN,
+        message: "Enter a valid email address."
+      },
+      required: "Email ID is required."
+    }),
+    name: "contact.emailId"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("contact.mobileNumber"),
+    label: "Mobile Number",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("contact.mobileNumber"),
+    inputRef: register({
+      pattern: {
+        value: MOBILE_PATTERN,
+        message: "Enter a valid 10-digit mobile number."
+      },
+      required: "Mobile Number is required."
+    }),
+    maxlength: 10,
+    name: "contact.mobileNumber"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("contact.officeNumber"),
+    label: "Office No."
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("contact.officeNumber"),
+    inputRef: register({
+      pattern: {
+        value: OFFICE_PATTERN,
+        message: "Enter a valid office number."
+      }
+    }),
+    name: "contact.officeNumber"
+  }))), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Enable this section only when the applicant is a DJB employee.",
+    isOpen: collapsedSections.employee,
+    onToggle: toggleSection,
+    sectionKey: "employee",
+    title: "For DJB Employee"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    label: "DJB Employee"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "djbEmployee.isDjbEmployee",
+    render: props => /*#__PURE__*/React.createElement(CheckBox, {
+      checked: !!props.value,
+      label: "Applicant is a DJB Employee",
+      onChange: event => props.onChange(event.target.checked)
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("djbEmployee.employeeId"),
+    label: "Employee ID",
+    required: isDjbEmployee
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("djbEmployee.employeeId"),
+    inputRef: register({
+      required: isDjbEmployee ? "Employee ID is required." : false
+    }),
+    name: "djbEmployee.employeeId"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("djbEmployee.retirementDate"),
+    label: "Date of Retirement",
+    required: isDjbEmployee
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "djbEmployee.retirementDate",
+    rules: {
+      required: isDjbEmployee ? "Date of Retirement is required." : false
+    },
+    render: props => /*#__PURE__*/React.createElement(DatePicker, {
+      date: props.value,
+      onChange: props.onChange
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("djbEmployee.officeNameAndAddress"),
+    isFullWidth: true,
+    label: "Office Name & Address",
+    required: isDjbEmployee
+  }, /*#__PURE__*/React.createElement(TextArea, {
+    className: getFieldError("djbEmployee.officeNameAndAddress") ? "employee-card-input-error" : "",
+    inputRef: register({
+      required: isDjbEmployee ? "Office Name & Address is required." : false
+    }),
+    name: "djbEmployee.officeNameAndAddress",
+    style: {
+      minHeight: "96px"
+    }
+  }))), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Property location and administrative boundary details.",
+    isOpen: collapsedSections.address,
+    onToggle: toggleSection,
+    sectionKey: "address",
+    title: "Property Address"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("propertyAddress.address"),
+    isFullWidth: true,
+    label: "Address",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextArea, {
+    className: getFieldError("propertyAddress.address") ? "employee-card-input-error" : "",
+    inputRef: register({
+      required: "Address is required."
+    }),
+    name: "propertyAddress.address",
+    style: {
+      minHeight: "96px"
+    }
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("propertyAddress.landmark"),
+    label: "Landmark"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("propertyAddress.landmark"),
+    inputRef: register(),
+    name: "propertyAddress.landmark"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("propertyAddress.pinCode"),
+    label: "Pin Code",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("propertyAddress.pinCode"),
+    inputRef: register({
+      pattern: {
+        value: PINCODE_PATTERN,
+        message: "Enter a valid 6-digit pin code."
+      },
+      required: "Pin Code is required."
+    }),
+    maxlength: 6,
+    name: "propertyAddress.pinCode"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("propertyAddress.locality"),
+    label: "Locality",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "propertyAddress.locality",
+    rules: {
+      required: "Locality is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: LOCALITY_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("propertyAddress.subLocality"),
+    label: "Sub Locality",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "propertyAddress.subLocality",
+    rules: {
+      required: "Sub Locality is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      disable: !selectedLocality,
+      option: subLocalityOptions,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("propertyAddress.assembly"),
+    label: "Assembly",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "propertyAddress.assembly",
+    rules: {
+      required: "Assembly is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: ASSEMBLY_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("propertyAddress.ward"),
+    label: "Ward",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "propertyAddress.ward",
+    rules: {
+      required: "Ward is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: WARD_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  }))), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Usage attributes for the property and the requested water connection.",
+    isOpen: collapsedSections.usage,
+    onToggle: toggleSection,
+    sectionKey: "usage",
+    title: "Property and Water Connection Use Details"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("useDetails.propertyType"),
+    label: "Property Type",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "useDetails.propertyType",
+    rules: {
+      required: "Property Type is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: PROPERTY_TYPE_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("useDetails.noOfFloors"),
+    label: "No. of Floors",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("useDetails.noOfFloors"),
+    inputRef: register({
+      pattern: {
+        value: NUMBER_PATTERN,
+        message: "Enter a valid whole number."
+      },
+      required: "No. of Floors is required."
+    }),
+    name: "useDetails.noOfFloors"
+  })), isHospitalProperty ? /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("useDetails.hospitalBeds"),
+    label: "No. of Beds for Hospitals & Nursing Home",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("useDetails.hospitalBeds"),
+    inputRef: register({
+      pattern: {
+        value: NUMBER_PATTERN,
+        message: "Enter a valid whole number."
+      },
+      required: isHospitalProperty ? "No. of Beds is required for Hospital / Nursing Home." : false
+    }),
+    name: "useDetails.hospitalBeds"
+  })) : null, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("useDetails.plotArea"),
+    label: "Plot Area in Sqm",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("useDetails.plotArea"),
+    inputRef: register({
+      pattern: {
+        value: DECIMAL_PATTERN,
+        message: "Enter a valid numeric value."
+      },
+      required: "Plot Area is required."
+    }),
+    name: "useDetails.plotArea"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("useDetails.builtUpArea"),
+    label: "Built Up Area",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("useDetails.builtUpArea"),
+    inputRef: register({
+      pattern: {
+        value: DECIMAL_PATTERN,
+        message: "Enter a valid numeric value."
+      },
+      required: "Built Up Area is required."
+    }),
+    name: "useDetails.builtUpArea"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("useDetails.waterConnectionCategory"),
+    label: "Water Connection Category",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "useDetails.waterConnectionCategory",
+    rules: {
+      required: "Water Connection Category is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: WATER_CONNECTION_CATEGORY_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("useDetails.waterConnectionUsedBy"),
+    label: "Water Connection Used By",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "useDetails.waterConnectionUsedBy",
+    rules: {
+      required: "Water Connection Used By is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: WATER_CONNECTION_USED_BY_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  }))), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Refund or payment-linked bank account details.",
+    isOpen: collapsedSections.bank,
+    onToggle: toggleSection,
+    sectionKey: "bank",
+    title: "Bank Details"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("bankDetails.bankName"),
+    label: "Name of the Bank",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("bankDetails.bankName"),
+    inputRef: register({
+      required: "Bank Name is required."
+    }),
+    name: "bankDetails.bankName"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("bankDetails.branchName"),
+    label: "Name of the Branch",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("bankDetails.branchName"),
+    inputRef: register({
+      required: "Branch Name is required."
+    }),
+    name: "bankDetails.branchName"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("bankDetails.ifscCode"),
+    label: "IFSC Code",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("bankDetails.ifscCode"),
+    inputRef: register({
+      pattern: {
+        value: IFSC_PATTERN,
+        message: "Enter a valid IFSC code."
+      },
+      required: "IFSC Code is required."
+    }),
+    name: "bankDetails.ifscCode",
+    onChange: event => {
+      event.target.value = event.target.value.toUpperCase();
+    }
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("bankDetails.bankAccountNumber"),
+    label: "Bank Account No.",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("bankDetails.bankAccountNumber"),
+    inputRef: register({
+      pattern: {
+        value: ACCOUNT_PATTERN,
+        message: "Enter a valid bank account number."
+      },
+      required: "Bank Account Number is required."
+    }),
+    name: "bankDetails.bankAccountNumber"
+  }))), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Optional rain water harvesting certificate request.",
+    isOpen: collapsedSections.rainWaterHarvesting,
+    onToggle: toggleSection,
+    sectionKey: "rainWaterHarvesting",
+    title: "Rain Water Harvesting"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    isFullWidth: true,
+    label: "Apply for RWH Adequacy Certificate"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "rainWaterHarvesting.applyForAdequacyCertificate",
+    render: props => /*#__PURE__*/React.createElement(CheckBox, {
+      checked: !!props.value,
+      label: "Apply for RWH Adequacy Certificate",
+      onChange: event => props.onChange(event.target.checked)
+    })
+  }))), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Documents to be attached. Maximum allowed file size is 5 MB.",
+    isOpen: collapsedSections.documents,
+    onToggle: toggleSection,
+    sectionKey: "documents",
+    title: "Documents to be Attached"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("documents.proofOfIdentity"),
+    label: "Proof of Identity",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "documents.proofOfIdentity",
+    rules: {
+      required: "Proof of Identity is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: PROOF_OF_IDENTITY_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "documents.identityProofFile",
+    rules: {
+      validate: value => !!value || "Upload Identity Proof is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(FileUploadField, {
+      error: getFieldError("documents.identityProofFile"),
+      helperText: "Max size 5 MB. Allowed types: PDF, PNG, JPG, JPEG.",
+      id: "identity-proof-file",
+      isUploading: !!uploadingFields["documents.identityProofFile"],
+      label: "Upload Identity Proof",
+      onDelete: () => clearUploadedFile("documents.identityProofFile", props.onChange),
+      onUpload: event => uploadFile(event, "documents.identityProofFile", props.onChange),
+      required: true,
+      value: props.value
+    })
+  }), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("documents.ownershipStatus"),
+    label: "Ownership Status",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "documents.ownershipStatus",
+    rules: {
+      required: "Ownership Status is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: OWNERSHIP_STATUS_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "documents.ownershipDocumentFile",
+    rules: {
+      validate: value => !!value || "Upload Ownership Document is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(FileUploadField, {
+      error: getFieldError("documents.ownershipDocumentFile"),
+      helperText: "Max size 5 MB. Allowed types: PDF, PNG, JPG, JPEG.",
+      id: "ownership-document-file",
+      isUploading: !!uploadingFields["documents.ownershipDocumentFile"],
+      label: "Upload Ownership Document",
+      onDelete: () => clearUploadedFile("documents.ownershipDocumentFile", props.onChange),
+      onUpload: event => uploadFile(event, "documents.ownershipDocumentFile", props.onChange),
+      required: true,
+      value: props.value
+    })
+  }), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "documents.otherDocumentFile",
+    render: props => /*#__PURE__*/React.createElement(FileUploadField, {
+      error: getFieldError("documents.otherDocumentFile"),
+      helperText: "Optional. Max size 5 MB. Allowed types: PDF, PNG, JPG, JPEG.",
+      id: "other-document-file",
+      isUploading: !!uploadingFields["documents.otherDocumentFile"],
+      label: "Other Document",
+      onDelete: () => clearUploadedFile("documents.otherDocumentFile", props.onChange),
+      onUpload: event => uploadFile(event, "documents.otherDocumentFile", props.onChange),
+      value: props.value
+    })
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Final undertaking details before preview and submit.",
+    isOpen: collapsedSections.declaration,
+    onToggle: toggleSection,
+    sectionKey: "declaration",
+    title: "Declaration / Undertaking"
+  }, /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("declaration.submittedBy"),
+    label: "Submitted By",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "declaration.submittedBy",
+    rules: {
+      required: "Submitted By is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: SUBMITTED_BY_OPTIONS,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "declaration.signatureFile",
+    rules: {
+      validate: value => !!value || "Upload Signature is required."
+    },
+    render: props => /*#__PURE__*/React.createElement(FileUploadField, {
+      error: getFieldError("declaration.signatureFile"),
+      helperText: "Max size 5 MB. Allowed types: PDF, PNG, JPG, JPEG.",
+      id: "signature-file",
+      isUploading: !!uploadingFields["declaration.signatureFile"],
+      label: "Upload Signature",
+      onDelete: () => clearUploadedFile("declaration.signatureFile", props.onChange),
+      onUpload: event => uploadFile(event, "declaration.signatureFile", props.onChange),
+      required: true,
+      value: props.value
+    })
+  }), /*#__PURE__*/React.createElement(FieldBlock, {
+    isFullWidth: true,
+    label: "Captcha",
+    required: true
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: "16px",
+      flexWrap: "wrap",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: captchaBoxStyle
+  }, generatedCaptcha), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: refreshCaptcha,
+    style: linkButtonStyle
+  }, "Refresh Captcha"))), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("declaration.captcha"),
+    label: "Enter Captcha",
+    required: true
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    errorStyle: !!getFieldError("declaration.captcha"),
+    inputRef: register({
+      required: "Captcha is required."
+    }),
+    name: "declaration.captcha"
+  })), /*#__PURE__*/React.createElement(FieldBlock, {
+    error: getFieldError("declaration.agree"),
+    isFullWidth: true,
+    label: "Declaration",
+    required: true
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "declaration.agree",
+    rules: {
+      validate: value => value || "Please accept the declaration to continue."
+    },
+    render: props => /*#__PURE__*/React.createElement(CheckBox, {
+      checked: !!props.value,
+      label: "I Agree",
+      onChange: event => props.onChange(event.target.checked)
+    })
+  }))))), previewMode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Selected request and connection type.",
+    isOpen: collapsedSections.application,
+    onToggle: toggleSection,
+    sectionKey: "application",
+    title: "Application Selection"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Type of Request",
+    value: formValues === null || formValues === void 0 ? void 0 : formValues.typeOfRequest
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Connection Type",
+    value: formValues === null || formValues === void 0 ? void 0 : formValues.connectionType
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Applicant identity and organization information.",
+    isOpen: collapsedSections.applicant,
+    onToggle: toggleSection,
+    sectionKey: "applicant",
+    title: "Details of Applicant"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "First Name",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$applicant = formValues.applicant) === null || _formValues$applicant === void 0 ? void 0 : _formValues$applicant.firstName
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Middle Name",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$applicant2 = formValues.applicant) === null || _formValues$applicant2 === void 0 ? void 0 : _formValues$applicant2.middleName
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Last Name",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$applicant3 = formValues.applicant) === null || _formValues$applicant3 === void 0 ? void 0 : _formValues$applicant3.lastName
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Father / Husband Name",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$applicant4 = formValues.applicant) === null || _formValues$applicant4 === void 0 ? void 0 : _formValues$applicant4.fatherOrHusbandName
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Government Organization",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$applicant5 = formValues.applicant) === null || _formValues$applicant5 === void 0 ? void 0 : _formValues$applicant5.isGovernmentOrganization
+  }), formValues !== null && formValues !== void 0 && (_formValues$applicant6 = formValues.applicant) !== null && _formValues$applicant6 !== void 0 && _formValues$applicant6.isGovernmentOrganization ? /*#__PURE__*/React.createElement(PreviewItem, {
+    isFullWidth: true,
+    label: "Name of Government Organization",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$applicant7 = formValues.applicant) === null || _formValues$applicant7 === void 0 ? void 0 : _formValues$applicant7.governmentOrganizationName
+  }) : null, /*#__PURE__*/React.createElement(PreviewItem, {
+    isFullWidth: true,
+    label: "Uploaded ID Proof",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$applicant8 = formValues.applicant) === null || _formValues$applicant8 === void 0 ? void 0 : _formValues$applicant8.applicantIdProofFile
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Communication details captured in the application.",
+    isOpen: collapsedSections.contact,
+    onToggle: toggleSection,
+    sectionKey: "contact",
+    title: "Contact Details"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Email ID",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$contact = formValues.contact) === null || _formValues$contact === void 0 ? void 0 : _formValues$contact.emailId
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Mobile Number",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$contact2 = formValues.contact) === null || _formValues$contact2 === void 0 ? void 0 : _formValues$contact2.mobileNumber
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Office No.",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$contact3 = formValues.contact) === null || _formValues$contact3 === void 0 ? void 0 : _formValues$contact3.officeNumber
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "DJB employee-specific information.",
+    isOpen: collapsedSections.employee,
+    onToggle: toggleSection,
+    sectionKey: "employee",
+    title: "For DJB Employee"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "DJB Employee",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$djbEmploy = formValues.djbEmployee) === null || _formValues$djbEmploy === void 0 ? void 0 : _formValues$djbEmploy.isDjbEmployee
+  }), formValues !== null && formValues !== void 0 && (_formValues$djbEmploy2 = formValues.djbEmployee) !== null && _formValues$djbEmploy2 !== void 0 && _formValues$djbEmploy2.isDjbEmployee ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Employee ID",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$djbEmploy3 = formValues.djbEmployee) === null || _formValues$djbEmploy3 === void 0 ? void 0 : _formValues$djbEmploy3.employeeId
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Date of Retirement",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$djbEmploy4 = formValues.djbEmployee) === null || _formValues$djbEmploy4 === void 0 ? void 0 : _formValues$djbEmploy4.retirementDate
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    isFullWidth: true,
+    label: "Office Name & Address",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$djbEmploy5 = formValues.djbEmployee) === null || _formValues$djbEmploy5 === void 0 ? void 0 : _formValues$djbEmploy5.officeNameAndAddress
+  })) : null), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Property address and administrative boundary values.",
+    isOpen: collapsedSections.address,
+    onToggle: toggleSection,
+    sectionKey: "address",
+    title: "Property Address"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    isFullWidth: true,
+    label: "Address",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$propertyA = formValues.propertyAddress) === null || _formValues$propertyA === void 0 ? void 0 : _formValues$propertyA.address
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Landmark",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$propertyA2 = formValues.propertyAddress) === null || _formValues$propertyA2 === void 0 ? void 0 : _formValues$propertyA2.landmark
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Pin Code",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$propertyA3 = formValues.propertyAddress) === null || _formValues$propertyA3 === void 0 ? void 0 : _formValues$propertyA3.pinCode
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Locality",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$propertyA4 = formValues.propertyAddress) === null || _formValues$propertyA4 === void 0 ? void 0 : _formValues$propertyA4.locality
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Sub Locality",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$propertyA5 = formValues.propertyAddress) === null || _formValues$propertyA5 === void 0 ? void 0 : _formValues$propertyA5.subLocality
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Assembly",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$propertyA6 = formValues.propertyAddress) === null || _formValues$propertyA6 === void 0 ? void 0 : _formValues$propertyA6.assembly
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Ward",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$propertyA7 = formValues.propertyAddress) === null || _formValues$propertyA7 === void 0 ? void 0 : _formValues$propertyA7.ward
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Property and connection usage values.",
+    isOpen: collapsedSections.usage,
+    onToggle: toggleSection,
+    sectionKey: "usage",
+    title: "Property and Water Connection Use Details"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Property Type",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail = formValues.useDetails) === null || _formValues$useDetail === void 0 ? void 0 : _formValues$useDetail.propertyType
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "No. of Floors",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail2 = formValues.useDetails) === null || _formValues$useDetail2 === void 0 ? void 0 : _formValues$useDetail2.noOfFloors
+  }), (formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail3 = formValues.useDetails) === null || _formValues$useDetail3 === void 0 ? void 0 : (_formValues$useDetail4 = _formValues$useDetail3.propertyType) === null || _formValues$useDetail4 === void 0 ? void 0 : _formValues$useDetail4.code) === "HOSPITAL_NURSING_HOME" ? /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "No. of Beds for Hospitals & Nursing Home",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail5 = formValues.useDetails) === null || _formValues$useDetail5 === void 0 ? void 0 : _formValues$useDetail5.hospitalBeds
+  }) : null, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Plot Area in Sqm",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail6 = formValues.useDetails) === null || _formValues$useDetail6 === void 0 ? void 0 : _formValues$useDetail6.plotArea
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Built Up Area",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail7 = formValues.useDetails) === null || _formValues$useDetail7 === void 0 ? void 0 : _formValues$useDetail7.builtUpArea
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Water Connection Category",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail8 = formValues.useDetails) === null || _formValues$useDetail8 === void 0 ? void 0 : _formValues$useDetail8.waterConnectionCategory
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Water Connection Used By",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$useDetail9 = formValues.useDetails) === null || _formValues$useDetail9 === void 0 ? void 0 : _formValues$useDetail9.waterConnectionUsedBy
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Banking information as entered in the form.",
+    isOpen: collapsedSections.bank,
+    onToggle: toggleSection,
+    sectionKey: "bank",
+    title: "Bank Details"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Name of the Bank",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$bankDetai = formValues.bankDetails) === null || _formValues$bankDetai === void 0 ? void 0 : _formValues$bankDetai.bankName
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Name of the Branch",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$bankDetai2 = formValues.bankDetails) === null || _formValues$bankDetai2 === void 0 ? void 0 : _formValues$bankDetai2.branchName
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "IFSC Code",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$bankDetai3 = formValues.bankDetails) === null || _formValues$bankDetai3 === void 0 ? void 0 : _formValues$bankDetai3.ifscCode
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Bank Account No.",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$bankDetai4 = formValues.bankDetails) === null || _formValues$bankDetai4 === void 0 ? void 0 : _formValues$bankDetai4.bankAccountNumber
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Rain water harvesting request status.",
+    isOpen: collapsedSections.rainWaterHarvesting,
+    onToggle: toggleSection,
+    sectionKey: "rainWaterHarvesting",
+    title: "Rain Water Harvesting"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    isFullWidth: true,
+    label: "Apply for RWH Adequacy Certificate",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$rainWater = formValues.rainWaterHarvesting) === null || _formValues$rainWater === void 0 ? void 0 : _formValues$rainWater.applyForAdequacyCertificate
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Uploaded supporting documents.",
+    isOpen: collapsedSections.documents,
+    onToggle: toggleSection,
+    sectionKey: "documents",
+    title: "Documents to be Attached"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Proof of Identity",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$documents = formValues.documents) === null || _formValues$documents === void 0 ? void 0 : _formValues$documents.proofOfIdentity
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Upload Identity Proof",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$documents2 = formValues.documents) === null || _formValues$documents2 === void 0 ? void 0 : _formValues$documents2.identityProofFile
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Ownership Status",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$documents3 = formValues.documents) === null || _formValues$documents3 === void 0 ? void 0 : _formValues$documents3.ownershipStatus
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Upload Ownership Document",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$documents4 = formValues.documents) === null || _formValues$documents4 === void 0 ? void 0 : _formValues$documents4.ownershipDocumentFile
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Other Document",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$documents5 = formValues.documents) === null || _formValues$documents5 === void 0 ? void 0 : _formValues$documents5.otherDocumentFile
+  })), /*#__PURE__*/React.createElement(SectionCard, {
+    description: "Declaration and undertaking details.",
+    isOpen: collapsedSections.declaration,
+    onToggle: toggleSection,
+    sectionKey: "declaration",
+    title: "Declaration / Undertaking"
+  }, /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Submitted By",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$declarati = formValues.declaration) === null || _formValues$declarati === void 0 ? void 0 : _formValues$declarati.submittedBy
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Upload Signature",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$declarati2 = formValues.declaration) === null || _formValues$declarati2 === void 0 ? void 0 : _formValues$declarati2.signatureFile
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "Entered Captcha",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$declarati3 = formValues.declaration) === null || _formValues$declarati3 === void 0 ? void 0 : _formValues$declarati3.captcha
+  }), /*#__PURE__*/React.createElement(PreviewItem, {
+    label: "I Agree",
+    value: formValues === null || formValues === void 0 ? void 0 : (_formValues$declarati4 = formValues.declaration) === null || _formValues$declarati4 === void 0 ? void 0 : _formValues$declarati4.agree
+  }))), /*#__PURE__*/React.createElement(ActionBar, {
+    style: actionBarStyle
+  }, !previewMode ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: "Reset",
+    onSubmit: onReset,
+    style: secondaryButtonStyle
+  }), /*#__PURE__*/React.createElement(SubmitBar, {
+    disabled: hasPendingUpload,
+    label: hasPendingUpload ? "Uploading..." : "Preview",
+    onSubmit: handleSubmit(onPreview)
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: "Edit Details",
+    onSubmit: onEdit,
+    style: secondaryButtonStyle
+  }), /*#__PURE__*/React.createElement(SubmitBar, {
+    disabled: hasPendingUpload,
+    label: hasPendingUpload ? "Uploading..." : "Submit",
+    onSubmit: handleSubmit(onSubmit)
+  }))), showToast ? /*#__PURE__*/React.createElement(Toast, {
+    error: (showToast === null || showToast === void 0 ? void 0 : showToast.key) === "error",
+    label: showToast === null || showToast === void 0 ? void 0 : showToast.message,
     onClose: closeToast,
-    isWarning: showToast === null || showToast === void 0 ? void 0 : showToast.isWarning
-  }));
+    warning: showToast === null || showToast === void 0 ? void 0 : showToast.warning
+  }) : null);
 };
 
 const configPTApproverApplication = ({
@@ -32145,7 +33582,7 @@ const ActionModal = ({
     actionSaveOnSubmit: () => {},
     isDisabled: !action.showFinancialYearsModal ? PTALoading || (action === null || action === void 0 ? void 0 : action.docUploadRequired) && !uploadedFile : !selectedFinancialYear,
     formId: "modal-action"
-  }, financialYearsLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(FormComposer, {
+  }, financialYearsLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(FormComposer, {
     config: config.form,
     noBoxShadow: true,
     inline: true,
@@ -32153,7 +33590,7 @@ const ActionModal = ({
     onSubmit: submit,
     defaultValues: defaultValues,
     formId: "modal-action"
-  })) : /*#__PURE__*/React.createElement(Loader$1, null);
+  })) : /*#__PURE__*/React.createElement(Loader, null);
 };
 
 const Heading$1 = props => {
@@ -32311,7 +33748,7 @@ const ActionModal$1 = ({
     actionSaveLabel: t(config.label.submit),
     actionSaveOnSubmit: () => {},
     formId: "modal-action"
-  }, financialYearsLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(FormComposer, {
+  }, financialYearsLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(FormComposer, {
     config: config.form,
     noBoxShadow: true,
     inline: true,
@@ -32319,7 +33756,7 @@ const ActionModal$1 = ({
     onSubmit: submit,
     defaultValues: defaultValues,
     formId: "modal-action"
-  })) : /*#__PURE__*/React.createElement(Loader$1, null);
+  })) : /*#__PURE__*/React.createElement(Loader, null);
 };
 
 const Heading$2 = props => {
@@ -32481,7 +33918,7 @@ const ActionModal$2 = ({
     popupModuleMianStyles: mobileView ? {
       paddingLeft: "5px"
     } : {}
-  }, PTALoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(FormComposer, {
+  }, PTALoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(FormComposer, {
     config: config.form,
     cardStyle: {
       marginLeft: "0px",
@@ -32495,7 +33932,7 @@ const ActionModal$2 = ({
     onSubmit: submit,
     defaultValues: defaultValues,
     formId: "modal-action"
-  })) : /*#__PURE__*/React.createElement(Loader$1, null);
+  })) : /*#__PURE__*/React.createElement(Loader, null);
 };
 
 const Heading$3 = props => {
@@ -32786,7 +34223,7 @@ const ActionModal$3 = ({
     popupModuleMianStyles: mobileView ? {
       paddingLeft: "5px"
     } : {}
-  }, PTALoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(FormComposer, {
+  }, PTALoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(FormComposer, {
     config: config.form,
     cardStyle: {
       marginLeft: "0px",
@@ -32800,7 +34237,7 @@ const ActionModal$3 = ({
     onSubmit: submit,
     defaultValues: defaultValues,
     formId: "modal-action"
-  })) : /*#__PURE__*/React.createElement(Loader$1, null);
+  })) : /*#__PURE__*/React.createElement(Loader, null);
 };
 
 const Heading$4 = props => {
@@ -32973,7 +34410,7 @@ const ActionModal$4 = ({
     popupModuleMianStyles: mobileView ? {
       paddingLeft: "5px"
     } : {}
-  }, PTALoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(FormComposer, {
+  }, PTALoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(FormComposer, {
     config: config.form,
     cardStyle: {
       marginLeft: "0px",
@@ -32987,7 +34424,7 @@ const ActionModal$4 = ({
     onSubmit: submit,
     defaultValues: defaultValues,
     formId: "modal-action"
-  })) : /*#__PURE__*/React.createElement(Loader$1, null);
+  })) : /*#__PURE__*/React.createElement(Loader, null);
 };
 
 const Heading$5 = props => {
@@ -33281,7 +34718,7 @@ const ActionModal$5 = ({
       width: "100%",
       height: "auto"
     } : {}
-  }, PTALoading ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(FormComposer, {
+  }, PTALoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(FormComposer, {
     config: config.form,
     noBoxShadow: true,
     inline: true,
@@ -33293,7 +34730,7 @@ const ActionModal$5 = ({
     cardFormWrapperClassName: cardFormWrapperClassName,
     cardClassName: cardClassName,
     formClassName: formClassName
-  })) : /*#__PURE__*/React.createElement(Loader$1, null);
+  })) : /*#__PURE__*/React.createElement(Loader, null);
 };
 
 const Heading$6 = props => {
@@ -33441,7 +34878,7 @@ const ActionModal$6 = ({
     onSubmit: submit,
     defaultValues: defaultValues,
     formId: "modal-action"
-  })) : /*#__PURE__*/React.createElement(Loader$1, null);
+  })) : /*#__PURE__*/React.createElement(Loader, null);
 };
 
 const Heading$7 = props => {
@@ -33565,7 +35002,7 @@ const ActionModal$7 = ({
     cardFormWrapperClassName: cardFormWrapperClassName,
     cardClassName: cardClassName,
     formClassName: formClassName
-  })) : /*#__PURE__*/React.createElement(Loader$1, null);
+  })) : /*#__PURE__*/React.createElement(Loader, null);
 };
 
 const Heading$8 = props => {
@@ -33712,7 +35149,7 @@ const ActionModal$8 = ({
     onSubmit: submit,
     defaultValues: defaultValues,
     formId: "modal-action"
-  })) : /*#__PURE__*/React.createElement(Loader$1, null);
+  })) : /*#__PURE__*/React.createElement(Loader, null);
 };
 
 const Heading$9 = props => {
@@ -33866,7 +35303,7 @@ const ActionModal$9 = ({
     onSubmit: submit,
     defaultValues: defaultValues,
     formId: "modal-action"
-  })) : /*#__PURE__*/React.createElement(Loader$1, null);
+  })) : /*#__PURE__*/React.createElement(Loader, null);
 };
 
 const Heading$a = props => {
@@ -34018,7 +35455,7 @@ const ActionModal$a = ({
     onSubmit: submit,
     defaultValues: defaultValues,
     formId: "modal-action"
-  })) : /*#__PURE__*/React.createElement(Loader$1, null);
+  })) : /*#__PURE__*/React.createElement(Loader, null);
 };
 
 const configWTApproverApplication = ({
@@ -34305,7 +35742,7 @@ const ActionModal$b = ({
     cardFormWrapperClassName: cardFormWrapperClassName,
     cardClassName: cardClassName,
     formClassName: formClassName
-  })) : /*#__PURE__*/React.createElement(Loader$1, null);
+  })) : /*#__PURE__*/React.createElement(Loader, null);
 };
 
 const ActionModal$c = props => {
@@ -35004,7 +36441,7 @@ const NOCDocuments = ({
     }
   }, [nocDocs, commonDocMaping]);
   useEffect(() => {
-    if (bpaApplicationStatus === 'NOC_VERIFICATION_INPROGRESS' && (actions === null || actions === void 0 ? void 0 : actions.length) > 0) setCheckEnablingDocs(true);else setCheckEnablingDocs(false);
+    if (bpaApplicationStatus === "NOC_VERIFICATION_INPROGRESS" && (actions === null || actions === void 0 ? void 0 : actions.length) > 0) setCheckEnablingDocs(true);else setCheckEnablingDocs(false);
   }, [applicationData, bpaActionsDetails]);
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -35029,9 +36466,9 @@ const NOCDocuments = ({
           label: isEmployee ? `${t(noc === null || noc === void 0 ? void 0 : noc.title)}` : t(noc === null || noc === void 0 ? void 0 : noc.title),
           text: noc !== null && noc !== void 0 && noc.value ? t(noc === null || noc === void 0 ? void 0 : noc.value) : t("CS_NA"),
           textStyle: (noc === null || noc === void 0 ? void 0 : noc.value) == "APPROVED" || (noc === null || noc === void 0 ? void 0 : noc.value) == "AUTO_APPROVED" ? {
-            color: "#00703C"
+            color: "#2E9E8F"
           } : {
-            color: "#D4351C"
+            color: "#D83A2F"
           }
         });
       } else {
@@ -35583,11 +37020,11 @@ const ScruntinyDetails = ({
   const getTextValues = data => {
     if (data !== null && data !== void 0 && data.value && data !== null && data !== void 0 && data.isTransLate) return /*#__PURE__*/React.createElement("span", {
       style: {
-        color: "#00703C"
+        color: "#2E9E8F"
       }
     }, t(data === null || data === void 0 ? void 0 : data.value));else if (data !== null && data !== void 0 && data.value && data !== null && data !== void 0 && data.isTransLate) return t(data === null || data === void 0 ? void 0 : data.value);else if (data !== null && data !== void 0 && data.value) return data === null || data === void 0 ? void 0 : data.value;else t("NA");
   };
-  return /*#__PURE__*/React.createElement(Fragment$2, null, !(scrutinyDetails !== null && scrutinyDetails !== void 0 && scrutinyDetails.isChecklist) && /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, !(scrutinyDetails !== null && scrutinyDetails !== void 0 && scrutinyDetails.isChecklist) && /*#__PURE__*/React.createElement("div", {
     style: {
       background: "#FAFAFA",
       border: "1px solid #D6D5D4",
@@ -35645,7 +37082,7 @@ const ScruntinyDetails = ({
       }
     }, value === null || value === void 0 ? void 0 : value.title);
   })), /*#__PURE__*/React.createElement("div", null, scrutinyDetails === null || scrutinyDetails === void 0 ? void 0 : (_scrutinyDetails$scru = scrutinyDetails.scruntinyDetails) === null || _scrutinyDetails$scru === void 0 ? void 0 : _scrutinyDetails$scru.map((report, index) => {
-    return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(Row, {
+    return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Row, {
       className: "border-none",
       label: `${t(report === null || report === void 0 ? void 0 : report.title)}`,
       labelStyle: {
@@ -35744,7 +37181,7 @@ const SubOccupancyTable = ({
     }
     return returnValue ? returnValue : "NA";
   }
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
     style: {
       background: "#FAFAFA",
       border: "1px solid #D6D5D4",
@@ -36255,7 +37692,7 @@ const WSFeeEstimation = ({
             var _result$Calculation2, _result$Calculation2$, _result$Calculation2$2;
             result === null || result === void 0 ? void 0 : (_result$Calculation2 = result.Calculation) === null || _result$Calculation2 === void 0 ? void 0 : (_result$Calculation2$ = _result$Calculation2[0]) === null || _result$Calculation2$ === void 0 ? void 0 : (_result$Calculation2$2 = _result$Calculation2$.taxHeadEstimates) === null || _result$Calculation2$2 === void 0 ? void 0 : _result$Calculation2$2.forEach(data => data.amount = data.estimateAmount);
           }
-          result.Calculation[0].billSlabData = _.groupBy(result === null || result === void 0 ? void 0 : (_result$Calculation3 = result.Calculation) === null || _result$Calculation3 === void 0 ? void 0 : (_result$Calculation3$ = _result$Calculation3[0]) === null || _result$Calculation3$ === void 0 ? void 0 : _result$Calculation3$.taxHeadEstimates, 'category');
+          result.Calculation[0].billSlabData = _.groupBy(result === null || result === void 0 ? void 0 : (_result$Calculation3 = result.Calculation) === null || _result$Calculation3 === void 0 ? void 0 : (_result$Calculation3$ = _result$Calculation3[0]) === null || _result$Calculation3$ === void 0 ? void 0 : _result$Calculation3$.taxHeadEstimates, "category");
           const values = [{
             title: "WS_APPLICATION_FEE_HEADER",
             value: (_result$Calculation4 = result.Calculation) === null || _result$Calculation4 === void 0 ? void 0 : (_result$Calculation4$ = _result$Calculation4[0]) === null || _result$Calculation4$ === void 0 ? void 0 : _result$Calculation4$.fee
@@ -36301,7 +37738,7 @@ const WSFeeEstimation = ({
       if (targetValueSign == 1) {
         values[value] = e.target.value;
       } else {
-        values[value] = '';
+        values[value] = "";
       }
     } else if (isDropDownValue) {
       values[`${value}_data`] = e;
@@ -36313,10 +37750,10 @@ const WSFeeEstimation = ({
     }
     setFields(values);
   };
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
     style: {
       lineHeight: "19px",
-      maxWidth: "950px",
+      maxWidth: "100%",
       minWidth: "280px"
     }
   }, values && /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement("div", null, values === null || values === void 0 ? void 0 : values.map((value, index) => {
@@ -36347,15 +37784,16 @@ const WSFeeEstimation = ({
     label: `${t(`CS_INBOX_STATUS_FILTER`)}`,
     text: isPaid ? t("WS_COMMON_PAID_LABEL") : t("WS_COMMON_NOT_PAID"),
     textStyle: !isPaid ? {
-      color: "#D4351C"
+      color: "#D83A2F"
     } : {
-      color: "#00703C"
+      color: "#2E9E8F"
     }
   }))), wsAdditionalDetails !== null && wsAdditionalDetails !== void 0 && (_wsAdditionalDetails$18 = wsAdditionalDetails.additionalDetails) !== null && _wsAdditionalDetails$18 !== void 0 && _wsAdditionalDetails$18.isAdhocRebate ? /*#__PURE__*/React.createElement("div", {
     onClick: e => {
       showPopUp(true);
     }
   }, /*#__PURE__*/React.createElement("span", {
+    className: "add-details-link hover-button",
     style: {
       cursor: "pointer",
       color: "#a82227"
@@ -36379,14 +37817,16 @@ const WSFeeEstimation = ({
     actionSaveOnSubmit: e => addAdhocRebatePenality(),
     hideSubmit: false,
     popupStyles: {
-      overflowY: "auto"
+      overflowY: "auto",
+      background: "#f0f3f7"
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Card, {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      padding: "10px 10px 1px 10px",
-      margin: "0px 0px 15px 0px"
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px"
     }
-  }, /*#__PURE__*/React.createElement(CardSectionHeader, {
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardSectionHeader, {
     style: {
       fontSize: "16px",
       fontWeight: "700",
@@ -36394,7 +37834,7 @@ const WSFeeEstimation = ({
       padding: "0px",
       margin: "0px 0px 10px 0px"
     }
-  }, t("PT_AD_PENALTY")), /*#__PURE__*/React.createElement(CardLabel, null, t("PT_TX_HEADS")), /*#__PURE__*/React.createElement("div", {
+  }, t("PT_AD_PENALTY")), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_TX_HEADS")), /*#__PURE__*/React.createElement("div", {
     className: "field"
   }, /*#__PURE__*/React.createElement(Dropdown, {
     isMandatory: true,
@@ -36405,9 +37845,7 @@ const WSFeeEstimation = ({
     isPropertyAssess: true,
     name: "adhocPenaltyReason_data",
     t: t
-  })), (fields === null || fields === void 0 ? void 0 : (_fields$adhocPenaltyR = fields.adhocPenaltyReason_data) === null || _fields$adhocPenaltyR === void 0 ? void 0 : _fields$adhocPenaltyR.title) === "PT_OTHERS" && /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_REASON")), /*#__PURE__*/React.createElement("div", {
+  }))), (fields === null || fields === void 0 ? void 0 : (_fields$adhocPenaltyR = fields.adhocPenaltyReason_data) === null || _fields$adhocPenaltyR === void 0 ? void 0 : _fields$adhocPenaltyR.title) === "PT_OTHERS" && /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_REASON")), /*#__PURE__*/React.createElement("div", {
     className: "field"
   }, /*#__PURE__*/React.createElement(TextInput, Object.assign({
     style: {
@@ -36424,7 +37862,7 @@ const WSFeeEstimation = ({
     pattern: "^[a-zA-Z ]*$",
     type: "text",
     title: t("TL_NAME_ERROR_MESSAGE")
-  })))), /*#__PURE__*/React.createElement(CardLabel, null, t("PT_HEAD_AMT")), /*#__PURE__*/React.createElement("div", {
+  })))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_HEAD_AMT")), /*#__PURE__*/React.createElement("div", {
     className: "field"
   }, /*#__PURE__*/React.createElement(TextInput, Object.assign({
     style: {
@@ -36440,12 +37878,7 @@ const WSFeeEstimation = ({
     isRequired: true,
     pattern: "^[1-9]+[0-9]*$",
     title: t("ERR_DEFAULT_INPUT_FIELD_MSG")
-  })))), /*#__PURE__*/React.createElement(Card, {
-    style: {
-      padding: "10px 10px 1px 10px",
-      margin: "0px 0px 15px 0px"
-    }
-  }, /*#__PURE__*/React.createElement(CardSectionHeader, {
+  }))))), /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardSectionHeader, {
     style: {
       fontSize: "16px",
       fontWeight: "700",
@@ -36453,7 +37886,7 @@ const WSFeeEstimation = ({
       padding: "0px",
       margin: "0px 0px 10px 0px"
     }
-  }, t("PT_AD_REBATE")), /*#__PURE__*/React.createElement(CardLabel, null, t("PT_TX_HEADS")), /*#__PURE__*/React.createElement("div", {
+  }, t("PT_AD_REBATE")), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_TX_HEADS")), /*#__PURE__*/React.createElement("div", {
     className: "field"
   }, /*#__PURE__*/React.createElement(Dropdown, {
     isMandatory: true,
@@ -36464,9 +37897,7 @@ const WSFeeEstimation = ({
     name: "adhocRebateReason_data",
     isPropertyAssess: true,
     t: t
-  })), (fields === null || fields === void 0 ? void 0 : (_fields$adhocRebateRe = fields.adhocRebateReason_data) === null || _fields$adhocRebateRe === void 0 ? void 0 : _fields$adhocRebateRe.title) === "PT_OTHERS" && /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_REASON")), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  }))), (fields === null || fields === void 0 ? void 0 : (_fields$adhocRebateRe = fields.adhocRebateReason_data) === null || _fields$adhocRebateRe === void 0 ? void 0 : _fields$adhocRebateRe.title) === "PT_OTHERS" && /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_REASON")), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     style: {
       background: "#FAFAFA"
     },
@@ -36481,7 +37912,7 @@ const WSFeeEstimation = ({
     pattern: "^[a-zA-Z ]*$",
     type: "text",
     title: t("TL_NAME_ERROR_MESSAGE")
-  }))), /*#__PURE__*/React.createElement(CardLabel, null, t("PT_HEAD_AMT")), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_HEAD_AMT")), /*#__PURE__*/React.createElement("div", {
     className: "field"
   }, /*#__PURE__*/React.createElement(TextInput, Object.assign({
     style: {
@@ -36497,7 +37928,7 @@ const WSFeeEstimation = ({
     isRequired: true,
     pattern: "^[1-9]+[0-9]*$",
     title: t("ERR_DEFAULT_INPUT_FIELD_MSG")
-  }))))), " "), showToast && /*#__PURE__*/React.createElement(Toast, {
+  }))))))), showToast && /*#__PURE__*/React.createElement(Toast, {
     style: {
       zIndex: "10000"
     },
@@ -36599,7 +38030,7 @@ const ViewBreakup = ({
     setBreakUpData(breakupData);
     showPopUp(true);
   };
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
     style: {
       lineHeight: "19px",
       maxWidth: "950px",
@@ -36611,10 +38042,7 @@ const ViewBreakup = ({
       marginTop: "12px"
     }
   }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      cursor: "pointer",
-      color: "#a82227"
-    }
+    className: "add-details-link hover-button"
   }, t("WS_PAYMENT_VIEW_BREAKUP"))) : null, popup && /*#__PURE__*/React.createElement(Modal, {
     headerBarMain: /*#__PURE__*/React.createElement(Heading, {
       label: t("WS_CALCULATION_BREAKUP")
@@ -37056,15 +38484,11 @@ function ApplicationDetailsContent({
   oldValue,
   isInfoLabel = false
 }) {
-  var _applicationDetails$a2, _workflowDetails$data3, _workflowDetails$data4, _workflowDetails$data5, _workflowDetails$data6, _workflowDetails$data7, _workflowDetails$data8, _workflowDetails$data9, _workflowDetails$data0, _workflowDetails$data1, _workflowDetails$data10, _workflowDetails$data11, _workflowDetails$data19, _workflowDetails$data20;
+  var _applicationDetails$a, _workflowDetails$data3, _workflowDetails$data4, _workflowDetails$data5, _workflowDetails$data6, _workflowDetails$data7, _workflowDetails$data8, _workflowDetails$data9, _workflowDetails$data0, _workflowDetails$data1, _workflowDetails$data10, _workflowDetails$data11, _workflowDetails$data19, _workflowDetails$data20;
   const {
     t
   } = useTranslation();
-  const history = useHistory();
-  const location = useLocation();
   const [showPopup, setShowPopup] = useState(false);
-  const [selectedData, setSelectedData] = useState(null);
-  const searchParams = new URLSearchParams(location.search);
   let {
     id: applicationNo
   } = useParams();
@@ -37100,7 +38524,7 @@ function ApplicationDetailsContent({
     loaded: false,
     canLoad: false
   });
-  if ((applicationData === null || applicationData === void 0 ? void 0 : applicationData.status) == "ACTIVE" && !billData.loading && !billData.loaded && !billData.canLoad) {
+  if ((applicationData === null || applicationData === void 0 ? void 0 : applicationData.status) === "ACTIVE" && !billData.loading && !billData.loaded && !billData.canLoad) {
     updateCanFetchBillData({
       loading: false,
       loaded: false,
@@ -37116,7 +38540,7 @@ function ApplicationDetailsContent({
     setBillData((applicationData === null || applicationData === void 0 ? void 0 : applicationData.tenantId) || tenantId, applicationData === null || applicationData === void 0 ? void 0 : applicationData.propertyId, updatefetchBillData, updateCanFetchBillData);
   }
   const convertEpochToDateDMY = dateEpoch => {
-    if (dateEpoch == null || dateEpoch == undefined || dateEpoch == "") {
+    if (dateEpoch == null || dateEpoch === undefined || dateEpoch === "") {
       return "NA";
     }
     const dateFromApi = new Date(dateEpoch);
@@ -37200,7 +38624,6 @@ function ApplicationDetailsContent({
   const checkLocation = window.location.href.includes("employee/tl") || window.location.href.includes("employee/obps") || window.location.href.includes("employee/noc");
   const isNocLocation = window.location.href.includes("employee/noc");
   const isBPALocation = window.location.href.includes("employee/obps");
-  const isWS = window.location.href.includes("employee/ws");
   const getRowStyles = () => {
     if (window.location.href.includes("employee/obps") || window.location.href.includes("employee/noc")) {
       return {
@@ -37239,13 +38662,13 @@ function ApplicationDetailsContent({
     if (window.location.href.includes("employee/obps") || window.location.href.includes("employee/noc") || window.location.href.includes("employee/ws")) {
       return {
         lineHeight: "19px",
-        maxWidth: "950px",
+        maxWidth: "100%",
         minWidth: "280px"
       };
     } else if (checkLocation) {
       return {
         lineHeight: "19px",
-        maxWidth: "600px",
+        maxWidth: "100%",
         minWidth: "280px"
       };
     } else {
@@ -37293,7 +38716,6 @@ function ApplicationDetailsContent({
     });
   };
   const handleViewClick = data => {
-    setSelectedData(data);
     setShowPopup(true);
   };
   return /*#__PURE__*/React.createElement(Card, {
@@ -37308,8 +38730,8 @@ function ApplicationDetailsContent({
     infoClickLable: "WS_CLICK_ON_LABEL",
     infoClickInfoLabel: getClickInfoDetails(),
     infoClickInfoLabel1: getClickInfoDetails1()
-  }) : null, applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a2 = applicationDetails.applicationDetails) === null || _applicationDetails$a2 === void 0 ? void 0 : _applicationDetails$a2.map((detail, index) => {
-    var _detail$title, _detail$values, _detail$additionalDet, _applicationDetails$a3, _applicationDetails$a4, _applicationDetails$a5, _detail$additionalDet2, _applicationDetails$a6, _applicationDetails$a7, _detail$additionalDet3, _detail$additionalDet4, _detail$additionalDet5, _detail$additionalDet6, _detail$additionalDet7, _detail$additionalDet8, _detail$additionalDet9, _detail$additionalDet0, _detail$additionalDet1, _workflowDetails$data, _workflowDetails$data2, _detail$additionalDet10, _detail$additionalDet11, _detail$additionalDet12, _detail$additionalDet13, _detail$additionalDet14, _detail$additionalDet15, _detail$additionalDet16, _detail$additionalDet17, _detail$additionalDet18, _detail$additionalDet19, _detail$additionalDet20, _detail$additionalDet21, _detail$additionalDet22, _detail$additionalDet23, _detail$additionalDet24, _detail$additionalDet25, _detail$additionalDet26, _detail$additionalDet27, _detail$additionalDet28, _detail$additionalDet29;
+  }) : null, applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a = applicationDetails.applicationDetails) === null || _applicationDetails$a === void 0 ? void 0 : _applicationDetails$a.map((detail, index) => {
+    var _detail$title, _detail$values, _detail$additionalDet, _applicationDetails$a2, _applicationDetails$a3, _applicationDetails$a4, _detail$additionalDet2, _applicationDetails$a5, _applicationDetails$a6, _detail$additionalDet3, _detail$additionalDet4, _detail$additionalDet5, _detail$additionalDet6, _detail$additionalDet7, _detail$additionalDet8, _detail$additionalDet9, _detail$additionalDet0, _detail$additionalDet1, _workflowDetails$data, _workflowDetails$data2, _detail$additionalDet10, _detail$additionalDet11, _detail$additionalDet12, _detail$additionalDet13, _detail$additionalDet14, _detail$additionalDet15, _detail$additionalDet16, _detail$additionalDet17, _detail$additionalDet18, _detail$additionalDet19, _detail$additionalDet20, _detail$additionalDet21, _detail$additionalDet22, _detail$additionalDet23, _detail$additionalDet24, _detail$additionalDet25, _detail$additionalDet26, _detail$additionalDet27, _detail$additionalDet28, _detail$additionalDet29;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: index
     }, /*#__PURE__*/React.createElement("div", {
@@ -37402,7 +38824,7 @@ function ApplicationDetailsContent({
         }
       }, /*#__PURE__*/React.createElement("button", null, " ", /*#__PURE__*/React.createElement(EditIcon, null), " ")), /*#__PURE__*/React.createElement("div", {
         key: index,
-        onClick: () => handleViewClick(element.data),
+        onClick: () => handleViewClick(),
         style: {
           cursor: "pointer"
         }
@@ -37503,8 +38925,8 @@ function ApplicationDetailsContent({
     })))), (detail === null || detail === void 0 ? void 0 : detail.belowComponent) && /*#__PURE__*/React.createElement(detail.belowComponent, null), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet = detail.additionalDetails) === null || _detail$additionalDet === void 0 ? void 0 : _detail$additionalDet.inspectionReport) && /*#__PURE__*/React.createElement(ScruntinyDetails, {
       scrutinyDetails: detail === null || detail === void 0 ? void 0 : detail.additionalDetails,
       paymentsList: paymentsList
-    }), (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a3 = applicationDetails.applicationData) === null || _applicationDetails$a3 === void 0 ? void 0 : (_applicationDetails$a4 = _applicationDetails$a3.additionalDetails) === null || _applicationDetails$a4 === void 0 ? void 0 : (_applicationDetails$a5 = _applicationDetails$a4.fieldinspection_pending) === null || _applicationDetails$a5 === void 0 ? void 0 : _applicationDetails$a5.length) > 0 && (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet2 = detail.additionalDetails) === null || _detail$additionalDet2 === void 0 ? void 0 : _detail$additionalDet2.fiReport) && /*#__PURE__*/React.createElement(InspectionReport, {
-      fiReport: applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a6 = applicationDetails.applicationData) === null || _applicationDetails$a6 === void 0 ? void 0 : (_applicationDetails$a7 = _applicationDetails$a6.additionalDetails) === null || _applicationDetails$a7 === void 0 ? void 0 : _applicationDetails$a7.fieldinspection_pending
+    }), (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a2 = applicationDetails.applicationData) === null || _applicationDetails$a2 === void 0 ? void 0 : (_applicationDetails$a3 = _applicationDetails$a2.additionalDetails) === null || _applicationDetails$a3 === void 0 ? void 0 : (_applicationDetails$a4 = _applicationDetails$a3.fieldinspection_pending) === null || _applicationDetails$a4 === void 0 ? void 0 : _applicationDetails$a4.length) > 0 && (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet2 = detail.additionalDetails) === null || _detail$additionalDet2 === void 0 ? void 0 : _detail$additionalDet2.fiReport) && /*#__PURE__*/React.createElement(InspectionReport, {
+      fiReport: applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a5 = applicationDetails.applicationData) === null || _applicationDetails$a5 === void 0 ? void 0 : (_applicationDetails$a6 = _applicationDetails$a5.additionalDetails) === null || _applicationDetails$a6 === void 0 ? void 0 : _applicationDetails$a6.fieldinspection_pending
     }), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet3 = detail.additionalDetails) === null || _detail$additionalDet3 === void 0 ? void 0 : _detail$additionalDet3.floors) && /*#__PURE__*/React.createElement(PropertyFloors, {
       floors: detail === null || detail === void 0 ? void 0 : (_detail$additionalDet4 = detail.additionalDetails) === null || _detail$additionalDet4 === void 0 ? void 0 : _detail$additionalDet4.floors
     }), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet5 = detail.additionalDetails) === null || _detail$additionalDet5 === void 0 ? void 0 : _detail$additionalDet5.owners) && /*#__PURE__*/React.createElement(PropertyOwners, {
@@ -37546,28 +38968,18 @@ function ApplicationDetailsContent({
     }), (detail === null || detail === void 0 ? void 0 : detail.isWaterConnectionDetails) && /*#__PURE__*/React.createElement(WSAdditonalDetails, {
       wsAdditionalDetails: detail,
       oldValue: oldValue
-    }), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet23 = detail.additionalDetails) === null || _detail$additionalDet23 === void 0 ? void 0 : _detail$additionalDet23.redirectUrl) && /*#__PURE__*/React.createElement("div", {
-      style: {
-        fontSize: "16px",
-        lineHeight: "24px",
-        fontWeight: "400",
-        padding: "10px 0px"
-      }
-    }, /*#__PURE__*/React.createElement(Link, {
+    }), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet23 = detail.additionalDetails) === null || _detail$additionalDet23 === void 0 ? void 0 : _detail$additionalDet23.redirectUrl) && /*#__PURE__*/React.createElement(Link, {
       to: detail === null || detail === void 0 ? void 0 : (_detail$additionalDet24 = detail.additionalDetails) === null || _detail$additionalDet24 === void 0 ? void 0 : (_detail$additionalDet25 = _detail$additionalDet24.redirectUrl) === null || _detail$additionalDet25 === void 0 ? void 0 : _detail$additionalDet25.url
     }, /*#__PURE__*/React.createElement("span", {
-      className: "link",
-      style: {
-        color: "#a82227"
-      }
-    }, detail === null || detail === void 0 ? void 0 : (_detail$additionalDet26 = detail.additionalDetails) === null || _detail$additionalDet26 === void 0 ? void 0 : (_detail$additionalDet27 = _detail$additionalDet26.redirectUrl) === null || _detail$additionalDet27 === void 0 ? void 0 : _detail$additionalDet27.title))), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet28 = detail.additionalDetails) === null || _detail$additionalDet28 === void 0 ? void 0 : _detail$additionalDet28.estimationDetails) && /*#__PURE__*/React.createElement(WSFeeEstimation, {
+      className: "add-details-link hover-button"
+    }, detail === null || detail === void 0 ? void 0 : (_detail$additionalDet26 = detail.additionalDetails) === null || _detail$additionalDet26 === void 0 ? void 0 : (_detail$additionalDet27 = _detail$additionalDet26.redirectUrl) === null || _detail$additionalDet27 === void 0 ? void 0 : _detail$additionalDet27.title)), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet28 = detail.additionalDetails) === null || _detail$additionalDet28 === void 0 ? void 0 : _detail$additionalDet28.estimationDetails) && /*#__PURE__*/React.createElement(WSFeeEstimation, {
       wsAdditionalDetails: detail,
       workflowDetails: workflowDetails
     }), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet29 = detail.additionalDetails) === null || _detail$additionalDet29 === void 0 ? void 0 : _detail$additionalDet29.estimationDetails) && /*#__PURE__*/React.createElement(ViewBreakup, {
       wsAdditionalDetails: detail,
       workflowDetails: workflowDetails
     }));
-  }), showTimeLine && (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data3 = workflowDetails.data) === null || _workflowDetails$data3 === void 0 ? void 0 : (_workflowDetails$data4 = _workflowDetails$data3.timeline) === null || _workflowDetails$data4 === void 0 ? void 0 : _workflowDetails$data4.length) > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BreakLine, null), ((workflowDetails === null || workflowDetails === void 0 ? void 0 : workflowDetails.isLoading) || isDataLoading) && /*#__PURE__*/React.createElement(Loader$1, null), !(workflowDetails !== null && workflowDetails !== void 0 && workflowDetails.isLoading) && !isDataLoading && /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement("div", {
+  }), showTimeLine && (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data3 = workflowDetails.data) === null || _workflowDetails$data3 === void 0 ? void 0 : (_workflowDetails$data4 = _workflowDetails$data3.timeline) === null || _workflowDetails$data4 === void 0 ? void 0 : _workflowDetails$data4.length) > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BreakLine, null), ((workflowDetails === null || workflowDetails === void 0 ? void 0 : workflowDetails.isLoading) || isDataLoading) && /*#__PURE__*/React.createElement(Loader, null), !(workflowDetails !== null && workflowDetails !== void 0 && workflowDetails.isLoading) && !isDataLoading && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
     id: "timeline"
   }, /*#__PURE__*/React.createElement(CardSectionHeader, {
     style: {
@@ -38085,7 +39497,7 @@ const ApplicationDetails = props => {
     }
   };
   if (isLoading || isEnableLoader) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, !isLoading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ApplicationDetailsContent, {
     applicationDetails: applicationDetails,
@@ -38137,7 +39549,7 @@ const ApplicationDetails = props => {
     ActionBarStyle: ActionBarStyle,
     MenuStyle: MenuStyle,
     applicationDetails: applicationDetails
-  })) : /*#__PURE__*/React.createElement(Loader$1, null));
+  })) : /*#__PURE__*/React.createElement(Loader, null));
 };
 
 const ApplicationDetails$1 = () => {
@@ -38172,7 +39584,7 @@ const ApplicationDetails$1 = () => {
   } = Digit.Hooks.ws.useMDMS(stateCode, "ws-services-masters", ["WSEditApplicationByConfigUser"]);
   const commonPayDetails = (mdmsCommonmastersData === null || mdmsCommonmastersData === void 0 ? void 0 : (_mdmsCommonmastersDat = mdmsCommonmastersData["common-masters"]) === null || _mdmsCommonmastersDat === void 0 ? void 0 : _mdmsCommonmastersDat.uiCommonPay) || [];
   const index = commonPayDetails && commonPayDetails.findIndex(item => {
-    return item.code == "WS.ONE_TIME_FEE";
+    return item.code === "WS.ONE_TIME_FEE";
   });
   let commonPayInfo = "";
   if (index > -1) commonPayInfo = commonPayDetails[index];else commonPayInfo = commonPayDetails && commonPayDetails.filter(item => item.code === "DEFAULT");
@@ -38185,7 +39597,7 @@ const ApplicationDetails$1 = () => {
   }], {
     select: data => {
       var _data$DataSecurity, _data$DataSecurity$Se;
-      return (data === null || data === void 0 ? void 0 : (_data$DataSecurity = data.DataSecurity) === null || _data$DataSecurity === void 0 ? void 0 : (_data$DataSecurity$Se = _data$DataSecurity.SecurityPolicy) === null || _data$DataSecurity$Se === void 0 ? void 0 : _data$DataSecurity$Se.find(elem => (elem === null || elem === void 0 ? void 0 : elem.model) == "User")) || {};
+      return (data === null || data === void 0 ? void 0 : (_data$DataSecurity = data.DataSecurity) === null || _data$DataSecurity === void 0 ? void 0 : (_data$DataSecurity$Se = _data$DataSecurity.SecurityPolicy) === null || _data$DataSecurity$Se === void 0 ? void 0 : _data$DataSecurity$Se.find(elem => (elem === null || elem === void 0 ? void 0 : elem.model) === "User")) || {};
     }
   });
   let {
@@ -38250,7 +39662,7 @@ const ApplicationDetails$1 = () => {
   };
   const checkWSAdditionalDetails = () => {
     var _applicationDetails$p8, _applicationDetails$p9, _applicationDetails$p0, _applicationDetails$p1;
-    if ((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$p9.businessService) == "WSReconnection" || (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$p0 = applicationDetails.processInstancesDetails) === null || _applicationDetails$p0 === void 0 ? void 0 : (_applicationDetails$p1 = _applicationDetails$p0[0]) === null || _applicationDetails$p1 === void 0 ? void 0 : _applicationDetails$p1.businessService) == "SWReconnection") {
+    if ((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$p9.businessService) === "WSReconnection" || (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$p0 = applicationDetails.processInstancesDetails) === null || _applicationDetails$p0 === void 0 ? void 0 : (_applicationDetails$p1 = _applicationDetails$p0[0]) === null || _applicationDetails$p1 === void 0 ? void 0 : _applicationDetails$p1.businessService) === "SWReconnection") {
       return true;
     } else {
       var _applicationDetails$a6, _applicationDetails$a7, _applicationDetails$a8, _applicationDetails$a9, _applicationDetails$a0, _applicationDetails$a1, _applicationDetails$a10, _applicationDetails$a11, _applicationDetails$a12, _applicationDetails$a13, _applicationDetails$a14, _applicationDetails$a15, _applicationDetails$a16;
@@ -38314,7 +39726,7 @@ const ApplicationDetails$1 = () => {
   if ((workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data4 = workflowDetails.data) === null || _workflowDetails$data4 === void 0 ? void 0 : (_workflowDetails$data5 = _workflowDetails$data4.nextActions) === null || _workflowDetails$data5 === void 0 ? void 0 : _workflowDetails$data5.length) > 0 && (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data6 = workflowDetails.data) === null || _workflowDetails$data6 === void 0 ? void 0 : (_workflowDetails$data7 = _workflowDetails$data6.actionState) === null || _workflowDetails$data7 === void 0 ? void 0 : (_workflowDetails$data8 = _workflowDetails$data7.nextActions) === null || _workflowDetails$data8 === void 0 ? void 0 : _workflowDetails$data8.length) > 0 && !(workflowDetails !== null && workflowDetails !== void 0 && (_workflowDetails$data9 = workflowDetails.data) !== null && _workflowDetails$data9 !== void 0 && (_workflowDetails$data0 = _workflowDetails$data9.actionState) !== null && _workflowDetails$data0 !== void 0 && (_workflowDetails$data1 = _workflowDetails$data0.nextActions) !== null && _workflowDetails$data1 !== void 0 && _workflowDetails$data1.find(e => e.action === "EDIT")) && !(workflowDetails !== null && workflowDetails !== void 0 && (_workflowDetails$data10 = workflowDetails.data) !== null && _workflowDetails$data10 !== void 0 && (_workflowDetails$data11 = _workflowDetails$data10.actionState) !== null && _workflowDetails$data11 !== void 0 && (_workflowDetails$data12 = _workflowDetails$data11.nextActions) !== null && _workflowDetails$data12 !== void 0 && _workflowDetails$data12.find(e => e.action === "RESUBMIT_APPLICATION")) && !(workflowDetails !== null && workflowDetails !== void 0 && (_workflowDetails$data13 = workflowDetails.data) !== null && _workflowDetails$data13 !== void 0 && (_workflowDetails$data14 = _workflowDetails$data13.actionState) !== null && _workflowDetails$data14 !== void 0 && (_workflowDetails$data15 = _workflowDetails$data14.nextActions) !== null && _workflowDetails$data15 !== void 0 && _workflowDetails$data15.find(e => e.action === "ACTIVATE_CONNECTION")) && !(workflowDetails !== null && workflowDetails !== void 0 && (_workflowDetails$data16 = workflowDetails.data) !== null && _workflowDetails$data16 !== void 0 && (_workflowDetails$data17 = _workflowDetails$data16.actionState) !== null && _workflowDetails$data17 !== void 0 && (_workflowDetails$data18 = _workflowDetails$data17.nextActions) !== null && _workflowDetails$data18 !== void 0 && _workflowDetails$data18.find(e => e.action === "SUBMIT_APPLICATION"))) {
     var _workflowDetails$data19, _workflowDetails$data20;
     workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data19 = workflowDetails.data) === null || _workflowDetails$data19 === void 0 ? void 0 : (_workflowDetails$data20 = _workflowDetails$data19.nextActions) === null || _workflowDetails$data20 === void 0 ? void 0 : _workflowDetails$data20.forEach(data => {
-      if (data.action == "EDIT") workflowDetails.data.actionState.nextActions.push(data);
+      if (data.action === "EDIT") workflowDetails.data.actionState.nextActions.push(data);
     });
   }
   workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data21 = workflowDetails.data) === null || _workflowDetails$data21 === void 0 ? void 0 : (_workflowDetails$data22 = _workflowDetails$data21.actionState) === null || _workflowDetails$data22 === void 0 ? void 0 : (_workflowDetails$data23 = _workflowDetails$data22.nextActions) === null || _workflowDetails$data23 === void 0 ? void 0 : _workflowDetails$data23.forEach(action => {
@@ -38358,12 +39770,12 @@ const ApplicationDetails$1 = () => {
   workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data29 = workflowDetails.data) === null || _workflowDetails$data29 === void 0 ? void 0 : (_workflowDetails$data30 = _workflowDetails$data29.nextActions) === null || _workflowDetails$data30 === void 0 ? void 0 : _workflowDetails$data30.forEach(action => {
     if ((action === null || action === void 0 ? void 0 : action.action) === "PAY") {
       var _workflowDetails$data31, _workflowDetails$data32, _workflowDetails$data33, _workflowDetails$data34, _workflowDetails$data35, _workflowDetails$data36;
-      if ((workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data31 = workflowDetails.data) === null || _workflowDetails$data31 === void 0 ? void 0 : (_workflowDetails$data32 = _workflowDetails$data31.processInstances) === null || _workflowDetails$data32 === void 0 ? void 0 : (_workflowDetails$data33 = _workflowDetails$data32[0]) === null || _workflowDetails$data33 === void 0 ? void 0 : _workflowDetails$data33.businessService) == "WSReconnection") {
+      if ((workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data31 = workflowDetails.data) === null || _workflowDetails$data31 === void 0 ? void 0 : (_workflowDetails$data32 = _workflowDetails$data31.processInstances) === null || _workflowDetails$data32 === void 0 ? void 0 : (_workflowDetails$data33 = _workflowDetails$data32[0]) === null || _workflowDetails$data33 === void 0 ? void 0 : _workflowDetails$data33.businessService) === "WSReconnection") {
         action.redirectionUrll = {
           pathname: `WSReconnection/${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.applicationNo}/${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.tenantId}?tenantId=${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.tenantId}&ISWSAPP&applicationNumber=${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.applicationNo}`,
           state: applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.tenantId
         };
-      } else if ((workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data34 = workflowDetails.data) === null || _workflowDetails$data34 === void 0 ? void 0 : (_workflowDetails$data35 = _workflowDetails$data34.processInstances) === null || _workflowDetails$data35 === void 0 ? void 0 : (_workflowDetails$data36 = _workflowDetails$data35[0]) === null || _workflowDetails$data36 === void 0 ? void 0 : _workflowDetails$data36.businessService) == "SWReconnection") {
+      } else if ((workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data34 = workflowDetails.data) === null || _workflowDetails$data34 === void 0 ? void 0 : (_workflowDetails$data35 = _workflowDetails$data34.processInstances) === null || _workflowDetails$data35 === void 0 ? void 0 : (_workflowDetails$data36 = _workflowDetails$data35[0]) === null || _workflowDetails$data36 === void 0 ? void 0 : _workflowDetails$data36.businessService) === "SWReconnection") {
         action.redirectionUrll = {
           pathname: `SWReconnection/${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.applicationNo}/${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.tenantId}?tenantId=${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.tenantId}&ISWSAPP&applicationNumber=${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.applicationNo}`,
           state: applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.tenantId
@@ -38379,12 +39791,12 @@ const ApplicationDetails$1 = () => {
   workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data37 = workflowDetails.data) === null || _workflowDetails$data37 === void 0 ? void 0 : (_workflowDetails$data38 = _workflowDetails$data37.actionState) === null || _workflowDetails$data38 === void 0 ? void 0 : (_workflowDetails$data39 = _workflowDetails$data38.nextActions) === null || _workflowDetails$data39 === void 0 ? void 0 : _workflowDetails$data39.forEach(action => {
     if ((action === null || action === void 0 ? void 0 : action.action) === "PAY") {
       var _workflowDetails$data40, _workflowDetails$data41, _workflowDetails$data42, _workflowDetails$data43, _workflowDetails$data44, _workflowDetails$data45;
-      if ((workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data40 = workflowDetails.data) === null || _workflowDetails$data40 === void 0 ? void 0 : (_workflowDetails$data41 = _workflowDetails$data40.processInstances) === null || _workflowDetails$data41 === void 0 ? void 0 : (_workflowDetails$data42 = _workflowDetails$data41[0]) === null || _workflowDetails$data42 === void 0 ? void 0 : _workflowDetails$data42.businessService) == "WSReconnection") {
+      if ((workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data40 = workflowDetails.data) === null || _workflowDetails$data40 === void 0 ? void 0 : (_workflowDetails$data41 = _workflowDetails$data40.processInstances) === null || _workflowDetails$data41 === void 0 ? void 0 : (_workflowDetails$data42 = _workflowDetails$data41[0]) === null || _workflowDetails$data42 === void 0 ? void 0 : _workflowDetails$data42.businessService) === "WSReconnection") {
         action.redirectionUrll = {
           pathname: `WSReconnection/${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.applicationNo}/${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.tenantId}?tenantId=${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.tenantId}&ISWSAPP&applicationNumber=${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.applicationNo}`,
           state: applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.tenantId
         };
-      } else if ((workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data43 = workflowDetails.data) === null || _workflowDetails$data43 === void 0 ? void 0 : (_workflowDetails$data44 = _workflowDetails$data43.processInstances) === null || _workflowDetails$data44 === void 0 ? void 0 : (_workflowDetails$data45 = _workflowDetails$data44[0]) === null || _workflowDetails$data45 === void 0 ? void 0 : _workflowDetails$data45.businessService) == "SWReconnection") {
+      } else if ((workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data43 = workflowDetails.data) === null || _workflowDetails$data43 === void 0 ? void 0 : (_workflowDetails$data44 = _workflowDetails$data43.processInstances) === null || _workflowDetails$data44 === void 0 ? void 0 : (_workflowDetails$data45 = _workflowDetails$data44[0]) === null || _workflowDetails$data45 === void 0 ? void 0 : _workflowDetails$data45.businessService) === "SWReconnection") {
         action.redirectionUrll = {
           pathname: `SWReconnection/${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.applicationNo}/${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.tenantId}?tenantId=${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.tenantId}&ISWSAPP&applicationNumber=${applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.applicationNo}`,
           state: applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.tenantId
@@ -38449,7 +39861,7 @@ const ApplicationDetails$1 = () => {
     } else {
       const warningCount = sessionStorage.getItem("WARINIG_COUNT") || "0";
       const warningCountDetails = JSON.parse(warningCount);
-      if (warningCountDetails == 0) {
+      if (warningCountDetails === 0) {
         var _response$WaterConnec, _response$SewerageCon, _details$additionalDe;
         const filters = {
           applicationNumber
@@ -38459,9 +39871,9 @@ const ApplicationDetails$1 = () => {
           filters: {
             ...filters
           },
-          businessService: serviceType == "WATER" ? "WS" : "SW"
+          businessService: serviceType === "WATER" ? "WS" : "SW"
         });
-        let details = serviceType == "WATER" ? response === null || response === void 0 ? void 0 : (_response$WaterConnec = response.WaterConnection) === null || _response$WaterConnec === void 0 ? void 0 : _response$WaterConnec[0] : response === null || response === void 0 ? void 0 : (_response$SewerageCon = response.SewerageConnections) === null || _response$SewerageCon === void 0 ? void 0 : _response$SewerageCon[0];
+        let details = serviceType === "WATER" ? response === null || response === void 0 ? void 0 : (_response$WaterConnec = response.WaterConnection) === null || _response$WaterConnec === void 0 ? void 0 : _response$WaterConnec[0] : response === null || response === void 0 ? void 0 : (_response$SewerageCon = response.SewerageConnections) === null || _response$SewerageCon === void 0 ? void 0 : _response$SewerageCon[0];
         if (details !== null && details !== void 0 && (_details$additionalDe = details.additionalDetails) !== null && _details$additionalDe !== void 0 && _details$additionalDe.estimationFileStoreId) {
           var _details$additionalDe2;
           getFiles([details === null || details === void 0 ? void 0 : (_details$additionalDe2 = details.additionalDetails) === null || _details$additionalDe2 === void 0 ? void 0 : _details$additionalDe2.estimationFileStoreId], tenantId);
@@ -38513,20 +39925,6 @@ const ApplicationDetails$1 = () => {
       return getRecieptSearch(Digit.ULBService.getStateId(), (_reciept_data = reciept_data) === null || _reciept_data === void 0 ? void 0 : (_reciept_data$Payment = _reciept_data.Payments) === null || _reciept_data$Payment === void 0 ? void 0 : _reciept_data$Payment[0], applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a27 = applicationDetails.applicationData) === null || _applicationDetails$a27 === void 0 ? void 0 : _applicationDetails$a27.applicationNo, receiptKey);
     }
   };
-  const applicationFeeReceipt = {
-    order: 4,
-    label: t("WS_APLICATION_RECEIPT"),
-    onClick: async () => {
-      const tenant = Digit.ULBService.getStateId();
-      const ConnectionDetailsfile = await Digit.PaymentService.generatePdf(tenantId, {
-        WaterConnection: [applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.applicationData]
-      }, "ws-consolidatedacknowlegment");
-      const file = await Digit.PaymentService.printReciept(tenant, {
-        fileStoreIds: ConnectionDetailsfile.filestoreIds[0]
-      });
-      window.open(file[ConnectionDetailsfile.filestoreIds[0]], "_blank");
-    }
-  };
   switch (appStatus) {
     case "PENDING_FOR_DOCUMENT_VERIFICATION":
     case "PENDING_FOR_CITIZEN_ACTION":
@@ -38843,7 +40241,7 @@ const GetConnectionDetails = () => {
       onClick: props.onClick
     }, /*#__PURE__*/React.createElement(Close, null));
   };
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "employee-application-details",
     style: {
       marginBottom: "15px"
@@ -39182,7 +40580,7 @@ const ActivateConnection = () => {
     }
   };
   if (isEnableLoader || isLoading || isappdetailsLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -39270,7 +40668,7 @@ const ApplicationDetailsBillAmendment = () => {
     label: t("WS_ACK_PDF"),
     onClick: () => getAckPdf(applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.amendment, tenantId, t, applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.applicationDetails)
   }];
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
     className: "employee-main-application-details"
   }, /*#__PURE__*/React.createElement("div", {
     className: "employee-application-details",
@@ -39366,7 +40764,7 @@ const Search = ({
   });
   const isMobile = window.Digit.Utils.browser.isMobile();
   if (result !== null && result !== void 0 && result.isLoading && isMobile) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   const getData = () => {
     var _result$data, _result$data2;
@@ -39384,7 +40782,7 @@ const Search = ({
     var _result$data3;
     return (result === null || result === void 0 ? void 0 : (_result$data3 = result.data) === null || _result$data3 === void 0 ? void 0 : _result$data3.length) > 0 ? true : false;
   };
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(Search, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Search, {
     t: t,
     tenantId: tenantId,
     onSubmit: onSubmit,
@@ -39458,7 +40856,7 @@ const SearchWater = ({
   });
   const isMobile = window.Digit.Utils.browser.isMobile();
   if (result !== null && result !== void 0 && result.isLoading && isMobile) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   const getData = () => {
     var _result$data, _result$data2;
@@ -39485,7 +40883,7 @@ const SearchWater = ({
     }
     return item;
   });
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(SWater, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(SWater, {
     t: t,
     tenantId: tenantId,
     onSubmit: onSubmit,
@@ -39683,7 +41081,7 @@ const EditApplication$1 = () => {
     setShowToast(null);
   };
   if (enabledLoader || isConfigLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   console.log(config.body);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -40041,7 +41439,7 @@ const ConsumptionDetails = ({
     } else return t("NA");
   };
   if (isLoading || isConnectionDetailsLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   let {
     meterReadings
@@ -40118,7 +41516,7 @@ const ConsumptionDetails = ({
     popupModuleMianStyles: mobileView ? {
       paddingLeft: "5px"
     } : {}
-  }, isEnableLoader ? /*#__PURE__*/React.createElement(Loader$1, null) : /*#__PURE__*/React.createElement(FormComposer, {
+  }, isEnableLoader ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(FormComposer, {
     config: config.form,
     onFormValueChange: onFormValueChange,
     cardStyle: {
@@ -40427,7 +41825,7 @@ const ModifyApplication = () => {
     setShowToast(null);
   };
   if (enabledLoader || isEnableLoader || isConfigLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -40609,7 +42007,7 @@ const EditModifyApplication = () => {
     setShowToast(null);
   };
   if (enabledLoader || isConfigLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -40653,7 +42051,7 @@ const DisconnectionApplication = () => {
     });
     config.indexRoute = "docsrequired";
   } else {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement(Switch, null, config.map((routeObj, index) => {
     const {
@@ -40705,7 +42103,7 @@ const DisconnectionApplication$1 = () => {
     });
     config.indexRoute = "new-restoration";
   } else {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   console.log("configconfig", config);
   return /*#__PURE__*/React.createElement(Switch, null, config.map((routeObj, index) => {
@@ -40975,7 +42373,7 @@ const WSEditApplicationByConfig = () => {
     }
   };
   if (enabledLoader || isConfigLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement("div", {
     className: "employee-form-content-with-action-bar "
@@ -41173,7 +42571,7 @@ const GetDisconnectionDetails = () => {
   dowloadOptions.sort(function (a, b) {
     return a.order - b.order;
   });
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "employee-application-details",
     style: {
       marginBottom: "15px"
@@ -41411,7 +42809,7 @@ const ModifyApplicationDetails = () => {
   dowloadOptions.sort(function (a, b) {
     return a.order - b.order;
   });
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
     className: "employee-main-application-details"
   }, /*#__PURE__*/React.createElement("div", {
     className: "employee-application-details",
@@ -41549,7 +42947,7 @@ const EditDisconnectionByConfig = () => {
   };
   const IsDetailsExists = sessionStorage.getItem("IsDetailsExists") ? JSON.parse(sessionStorage.getItem("IsDetailsExists")) : false;
   if (isLoading || !IsDetailsExists || isConfigLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -41672,7 +43070,7 @@ const EditDisconnectionByConfig$1 = () => {
   };
   const IsDetailsExists = sessionStorage.getItem("IsDetailsExists") ? JSON.parse(sessionStorage.getItem("IsDetailsExists")) : false;
   if (isLoading || !IsDetailsExists || isConfigLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -41834,7 +43232,7 @@ const ResubmitDisconnection = () => {
   };
   const IsDetailsExists = sessionStorage.getItem("IsDetailsExists") ? JSON.parse(sessionStorage.getItem("IsDetailsExists")) : false;
   if (isLoading || !IsDetailsExists || isConfigLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -41876,7 +43274,7 @@ const SearchFields$2 = ({
     },
     title: t("ERR_DEFAULT_INPUT_FIELD_MSG")
   };
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(SearchField, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(SearchField, {
     style: {
       width: "100%"
     }
@@ -42082,7 +43480,7 @@ const SearchWaterConnectionIntegrated = ({
       return GetCell(status === "INACTIVE" ? t("WS_NA") : t(`${dueDate}`));
     }
   }], []);
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     styles: {
       fontSize: "32px"
     }
@@ -42096,7 +43494,7 @@ const SearchWaterConnectionIntegrated = ({
     reset,
     tenantId,
     t
-  })), isLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : null, data !== null && data !== void 0 && data.display && !resultOk ? /*#__PURE__*/React.createElement(Card, {
+  })), isLoading ? /*#__PURE__*/React.createElement(Loader, null) : null, data !== null && data !== void 0 && data.display && !resultOk ? /*#__PURE__*/React.createElement(Card, {
     style: {
       marginTop: 20
     }
@@ -42221,7 +43619,7 @@ const SearchIntegrated = ({
     var _result12$data5, _result$data5;
     return (result12 === null || result12 === void 0 ? void 0 : (_result12$data5 = result12.data) === null || _result12$data5 === void 0 ? void 0 : _result12$data5.length) > 0 || (result === null || result === void 0 ? void 0 : (_result$data5 = result.data) === null || _result$data5 === void 0 ? void 0 : _result$data5.length) > 0 ? true : false;
   };
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(SWater, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(SWater, {
     t: t,
     tenantId: tenantId,
     onSubmit: onSubmit,
@@ -42245,7 +43643,7 @@ const SearchWaterConnectionViewIntegrated = ({
   count,
   resultOk
 }) => {
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(SearchWaterConnectionIntegrated, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(SearchWaterConnectionIntegrated, {
     onSubmit: onSubmit,
     data: data,
     count: count,
@@ -42284,7 +43682,7 @@ const BulkBillGeneration = ({
   });
   const isMobile = window.Digit.Utils.browser.isMobile();
   if (result !== null && result !== void 0 && result.isLoading && isMobile) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   const getData = () => {
     console.log("result", result);
@@ -42313,7 +43711,7 @@ const BulkBillGeneration = ({
     var _result$meterReadings;
     return (result === null || result === void 0 ? void 0 : (_result$meterReadings = result.meterReadings) === null || _result$meterReadings === void 0 ? void 0 : _result$meterReadings.length) > 0 ? true : false;
   };
-  return /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(WSBulkBillSearch, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(WSBulkBillSearch, {
     t: t,
     tenantId: tenantId,
     onSubmit: onSubmit,
@@ -42356,7 +43754,7 @@ const WSModule = ({
   Digit.SessionStorage.set("WS_TENANTS", tenants);
   Digit.SessionStorage.set("PT_TENANTS", tenants);
   if (isLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
+    return /*#__PURE__*/React.createElement(Loader, null);
   }
   if (userType === "citizen") {
     return /*#__PURE__*/React.createElement(App, {