@djb25/digit-ui-module-ws 1.0.66 → 1.0.68

package/dist/index.modern.js

@@ -10914,6 +10914,11 @@ const BILLSBreadCrumbs = _ref => {
     path: "/digit-ui/employee/ws/required-documents",
     label: t("ES_COMMON_WS_DOCUMENTS_REQUIRED"),
     show: location.pathname.includes("/required-documents") ? true : false
+  }, {
+    path: "" + (location === null || location === void 0 ? void 0 : location.pathname) + location.search,
+    label: t("WS_MUTATION_CONNECTION_LABEL"),
+    show: location.pathname.includes("/mutation-application") ? true : false,
+    isBack: true
   }, {
     path: requestParam ? "/digit-ui/employee/ws/bill-amendment?" + requestParam : "/digit-ui/employee/ws/bill-amendment",
     label: t("WS_BILL_AMEND_APP"),
@@ -11248,6 +11253,9 @@ const App$1 = _ref2 => {
 let actions = [];
 const getAction = flow => {
   switch (flow) {
+    case "MUTATION":
+      actions = ['WS_MUTATION_DETAILS', 'WS_MUTATION_NEW_CONSUMER', 'WS_MUTATION_DOCUMENTS', 'WS_MUTATION_PREVIEW'];
+      break;
     default:
       actions = ['WS_COMMON_PROPERTY_DETAILS', 'WS_COMMON_CONNECTION_DETAIL', 'WS_COMMON_DOCUMENT_DETAILS', 'WS_COMMON_SUMMARY'];
   }
@@ -17430,13 +17438,13 @@ const UploadFileDigiLocker = props => {
   useEffect(() => handleEmpty(), [inpRef === null || inpRef === void 0 ? void 0 : (_inpRef$current = inpRef.current) === null || _inpRef$current === void 0 ? void 0 : _inpRef$current.files]);
   useEffect(() => handleChange(), [props.message]);
   const dataURItoBlob = dataURI => {
-    var binary = atob(dataURI.split(',')[1]);
+    var binary = atob(dataURI.split(",")[1]);
     var array = [];
     for (var i = 0; i < binary.length; i++) {
       array.push(binary.charCodeAt(i));
     }
     return new Blob([new Uint8Array(array)], {
-      type: 'application/pdf'
+      type: "application/pdf"
     });
   };
   const fetchDigiLockerDocuments = function (e) {
@@ -17470,20 +17478,69 @@ const UploadFileDigiLocker = props => {
             const code = props.documentType.toUpperCase();
             if (code.includes("AADHAAR") || code.includes("AADHAR")) doctype = "ADHAR";else if (code.includes("DRIVING") || code.includes("DRVLC")) doctype = "DRVLC";else if (code.includes("PAN")) doctype = "PANCR";else if (code.includes("VOTER")) doctype = "VOTER";
           }
-          let uri = res1.IssuedDoc.filter(item => item.doctype === doctype);
-          const _temp = function () {
+          const DOCTYPE_ALIASES = {
+            ADHAR: ["ADHAR", "AADHAAR", "AADHAR"],
+            DRVLC: ["DRVLC", "DRIVING"],
+            PANCR: ["PANCR", "PANCH", "PAN"],
+            VOTER: ["VOTER", "VOTERID"]
+          };
+          const aliases = DOCTYPE_ALIASES[doctype] || [doctype];
+          let uri = res1.IssuedDoc.filter(item => aliases.some(alias => item.doctype === alias));
+          const _temp5 = function () {
             if ((uri === null || uri === void 0 ? void 0 : uri.length) > 0) {
+              const uriStr = uri[0].uri || "";
+              const parts = uriStr.split("-");
+              const documentNumber = parts.length > 1 ? parts[parts.length - 1] : "";
+              if (documentNumber && props !== null && props !== void 0 && props.onDocumentNumber) {
+                props.onDocumentNumber(documentNumber);
+              }
               let TokenReqNew = {
                 authToken: digiLockerToken,
-                id: uri[0].uri
+                id: uriStr
               };
               const tenantId = Digit.ULBService.getCurrentTenantId() || "dl.djb";
               return Promise.resolve(Digit.DigiLockerService.uri({
                 TokenReq: TokenReqNew
               }, tenantId)).then(function (res2) {
-                let c = new Blob([res2]);
-                let filename = doctype + "_" + (uri[0].name || "document") + ".pdf";
-                convertToFile(e, c, filename);
+                function _temp4() {
+                  let filename = doctype + "_" + (uri[0].name || "document") + ".pdf";
+                  if (blobData) convertToFile(e, blobData, filename);else setShowToast({
+                    error: true,
+                    label: "Failed to read document from DigiLocker."
+                  });
+                }
+                let blobData;
+                const _temp3 = function () {
+                  if (typeof res2 === "string" && res2.includes("base64")) {
+                    blobData = dataURItoBlob(res2);
+                  } else {
+                    const _temp2 = function () {
+                      if (res2 instanceof Blob) {
+                        blobData = res2;
+                      } else {
+                        const _temp = function () {
+                          if (res2 && typeof res2 === "object" && res2.fileStoreId) {
+                            return Promise.resolve(Digit.UploadServices.FileFetchbyid(res2.fileStoreId, Digit.ULBService.getStateId())).then(function (fileRes) {
+                              if (fileRes !== null && fileRes !== void 0 && fileRes.data) {
+                                var _fileRes$headers;
+                                blobData = fileRes.data instanceof Blob ? fileRes.data : new Blob([fileRes.data], {
+                                  type: ((_fileRes$headers = fileRes.headers) === null || _fileRes$headers === void 0 ? void 0 : _fileRes$headers["content-type"]) || "application/pdf"
+                                });
+                              }
+                            });
+                          } else {
+                            blobData = new Blob([JSON.stringify(res2)], {
+                              type: "application/pdf"
+                            });
+                          }
+                        }();
+                        if (_temp && _temp.then) return _temp.then(function () {});
+                      }
+                    }();
+                    if (_temp2 && _temp2.then) return _temp2.then(function () {});
+                  }
+                }();
+                return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
               });
             } else {
               setShowToast({
@@ -17492,7 +17549,7 @@ const UploadFileDigiLocker = props => {
               });
             }
           }();
-          if (_temp && _temp.then) return _temp.then(function () {});
+          if (_temp5 && _temp5.then) return _temp5.then(function () {});
         });
       }, function (error) {
         console.error("DigiLocker Fetch Error:", error);
@@ -17818,25 +17875,28 @@ function SelectDocument(_ref2) {
     documentUid = _useState7[0],
     setDocumentUid = _useState7[1];
   const _useState8 = useState(false),
-    showCamera = _useState8[0],
-    setShowCamera = _useState8[1];
+    isDocumentUidLocked = _useState8[0],
+    setIsDocumentUidLocked = _useState8[1];
   const _useState9 = useState(false),
-    isUploading = _useState9[0],
-    setIsUploading = _useState9[1];
+    showCamera = _useState9[0],
+    setShowCamera = _useState9[1];
   const _useState0 = useState(false),
-    setIsCameraFile = _useState0[1];
+    isUploading = _useState0[0],
+    setIsUploading = _useState0[1];
   const _useState1 = useState(false),
-    showDocModal = _useState1[0],
-    setShowDocModal = _useState1[1];
-  const _useState10 = useState(""),
-    docFileUrl = _useState10[0],
-    setDocFileUrl = _useState10[1];
+    setIsCameraFile = _useState1[1];
+  const _useState10 = useState(false),
+    showDocModal = _useState10[0],
+    setShowDocModal = _useState10[1];
   const _useState11 = useState(""),
-    docFileType = _useState11[0],
-    setDocFileType = _useState11[1];
-  const _useState12 = useState(false),
-    digiLockerUpload = _useState12[0],
-    setDigilockerUpload = _useState12[1];
+    docFileUrl = _useState11[0],
+    setDocFileUrl = _useState11[1];
+  const _useState12 = useState(""),
+    docFileType = _useState12[0],
+    setDocFileType = _useState12[1];
+  const _useState13 = useState(false),
+    digiLockerUpload = _useState13[0],
+    setDigilockerUpload = _useState13[1];
   useEffect(() => {
     const eligible = isDigiLockerEligible((selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.code) || "");
     setDigilockerUpload(eligible);
@@ -17854,17 +17914,16 @@ function SelectDocument(_ref2) {
           const _temp = _catch(function () {
             return Promise.resolve(Digit.UploadServices.FileFetchbyid(uploadedFile, Digit.ULBService.getStateId())).then(function (res) {
               if (res !== null && res !== void 0 && res.data) {
+                var _res$headers, _res$headers2;
+                const contentType = ((_res$headers = res.headers) === null || _res$headers === void 0 ? void 0 : _res$headers["content-type"]) || ((_res$headers2 = res.headers) === null || _res$headers2 === void 0 ? void 0 : _res$headers2["Content-Type"]) || "";
+                const isPdf = contentType.toLowerCase().includes("pdf") || res.data instanceof Blob && res.data.type && res.data.type.toLowerCase().includes("pdf");
+                const mimeType = isPdf ? "application/pdf" : contentType || "image/jpeg";
                 const blob = res.data instanceof Blob ? res.data : new Blob([res.data], {
-                  type: res.headers["content-type"] || res.headers["Content-Type"] || "image/jpeg"
+                  type: mimeType
                 });
                 const fileURL = URL.createObjectURL(blob);
                 setDocFileUrl(fileURL);
-                const contentType = res.headers["content-type"] || res.headers["Content-Type"] || "";
-                if (contentType.toLowerCase().includes("pdf")) {
-                  setDocFileType("pdf");
-                } else {
-                  setDocFileType("image");
-                }
+                setDocFileType(isPdf ? "pdf" : "image");
                 setShowDocModal(true);
               }
             });
@@ -17903,8 +17962,8 @@ function SelectDocument(_ref2) {
   }
   const dropdownData = doc.dropdownData;
   var dropDownData = dropdownData;
-  const _useState13 = useState(false),
-    isHidden = _useState13[0];
+  const _useState14 = useState(false),
+    isHidden = _useState14[0];
   const addError = () => {
     var _formState$errors, _formState$errors$con;
     let type = formState === null || formState === void 0 ? void 0 : (_formState$errors = formState.errors) === null || _formState$errors === void 0 ? void 0 : (_formState$errors$con = _formState$errors[config.key]) === null || _formState$errors$con === void 0 ? void 0 : _formState$errors$con.type;
@@ -18044,8 +18103,16 @@ function SelectDocument(_ref2) {
   }, /*#__PURE__*/React.createElement(TextInput, {
     type: "text",
     value: documentUid,
-    onChange: e => setDocumentUid(e.target.value),
-    placeholder: t("WS_IDENTITY_NO_PLACEHOLDER")
+    onChange: e => {
+      if (!isDocumentUidLocked) setDocumentUid(e.target.value);
+    },
+    placeholder: t("WS_IDENTITY_NO_PLACEHOLDER"),
+    disabled: isDocumentUidLocked,
+    style: isDocumentUidLocked ? {
+      backgroundColor: "#f0f0f0",
+      cursor: "not-allowed",
+      color: "#555"
+    } : {}
   }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, doc !== null && doc !== void 0 && doc.required ? t((doc === null || doc === void 0 ? void 0 : (_doc$i18nKey2 = doc.i18nKey) === null || _doc$i18nKey2 === void 0 ? void 0 : _doc$i18nKey2.replaceAll(".", "_")) + "_UPLOAD_DOCUMENT") + "*" : "" + t((doc === null || doc === void 0 ? void 0 : (_doc$i18nKey3 = doc.i18nKey) === null || _doc$i18nKey3 === void 0 ? void 0 : _doc$i18nKey3.replaceAll(".", "_")) + "_UPLOAD_DOCUMENT")), /*#__PURE__*/React.createElement("div", {
     className: "field",
     style: {
@@ -18064,6 +18131,7 @@ function SelectDocument(_ref2) {
       setUploadedFile(null);
       setFile(null);
       setIsCameraFile(false);
+      setIsDocumentUidLocked(false);
     },
     id: id,
     message: uploadedFile ? "1 " + t("CS_ACTION_FILEUPLOADED") : t("CS_ACTION_NO_FILEUPLOADED"),
@@ -18080,8 +18148,13 @@ function SelectDocument(_ref2) {
       setUploadedFile(null);
       setFile(null);
       setIsCameraFile(false);
+      setIsDocumentUidLocked(false);
     },
-    documentType: selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.code
+    documentType: selectedDocument === null || selectedDocument === void 0 ? void 0 : selectedDocument.code,
+    onDocumentNumber: num => {
+      setDocumentUid(num);
+      setIsDocumentUidLocked(true);
+    }
   }) : /*#__PURE__*/React.createElement(UploadFile, {
     onUpload: selectfile,
     onDelete: () => {
@@ -18218,12 +18291,12 @@ const CameraCaptureModal = _ref4 => {
     t = _ref4.t;
   const videoRef = useRef(null);
   const canvasRef = useRef(null);
-  const _useState14 = useState(null),
-    stream = _useState14[0],
-    setStream = _useState14[1];
   const _useState15 = useState(null),
-    error = _useState15[0],
-    setError = _useState15[1];
+    stream = _useState15[0],
+    setStream = _useState15[1];
+  const _useState16 = useState(null),
+    error = _useState16[0],
+    setError = _useState16[1];
   useEffect(() => {
     const startCamera = function () {
       try {
@@ -47995,11 +48068,11 @@ const ApplicationDetails$1 = () => {
 };
 
 const GetConnectionDetails = () => {
-  var _applicationDetails$a, _applicationDetails$a2, _applicationDetails$a3, _applicationDetails$a4, _applicationDetails$a5, _applicationDetails$a6, _applicationDetails$a7, _applicationDetails$a8, _applicationDetails$a9, _applicationDetails$a0, _applicationDetails$a1, _applicationDetails$a10, _applicationDetails$a11, _applicationDetails$a12, _mdmsCommonmastersDat, _applicationDetails$a14, _applicationDetails$a18, _applicationDetails$f5, _applicationDetails$p3, _applicationDetails$p4, _applicationDetails$a19, _applicationDetails$a20, _applicationDetails$a21, _applicationDetails$f6, _applicationDetails$f7;
+  var _applicationDetails$a, _applicationDetails$a2, _applicationDetails$a3, _applicationDetails$a4, _applicationDetails$a5, _applicationDetails$a6, _applicationDetails$a7, _applicationDetails$a8, _applicationDetails$a9, _applicationDetails$a0, _applicationDetails$a1, _applicationDetails$a10, _applicationDetails$a11, _applicationDetails$a12, _mdmsCommonmastersDat, _applicationDetails$a14, _applicationDetails$a18, _applicationDetails$f7, _applicationDetails$p3, _applicationDetails$p4, _applicationDetails$a19, _applicationDetails$a20, _applicationDetails$a21, _applicationDetails$f8, _applicationDetails$f9;
   const getBillSearch = function () {
     try {
-      const _temp = function (_applicationDetails$f8) {
-        if ((applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$f8 = applicationDetails.fetchBillsData) === null || _applicationDetails$f8 === void 0 ? void 0 : _applicationDetails$f8.length) > 0) {
+      const _temp = function (_applicationDetails$f0) {
+        if ((applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$f0 = applicationDetails.fetchBillsData) === null || _applicationDetails$f0 === void 0 ? void 0 : _applicationDetails$f0.length) > 0) {
           var _applicationDetails$a22;
           const service = serviceType === "WATER" ? "WS" : "SW";
           let wsSearchFilters = {
@@ -48129,7 +48202,7 @@ const GetConnectionDetails = () => {
   const checkApplicationStatus = (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a14 = applicationDetails.applicationData) === null || _applicationDetails$a14 === void 0 ? void 0 : _applicationDetails$a14.status) === "Active" ? true : false;
   const checkWorkflow = applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.isApplicationApproved;
   const getModifyConnectionButton = () => {
-    var _applicationDetails$f, _applicationDetails$a15, _applicationDetails$p;
+    var _applicationDetails$f, _applicationDetails$f2, _applicationDetails$a15, _applicationDetails$p;
     if (!checkApplicationStatus) {
       setshowActionToast({
         key: "error",
@@ -48137,7 +48210,7 @@ const GetConnectionDetails = () => {
       });
       return;
     }
-    if ((applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$f = applicationDetails.fetchBillsData[0]) === null || _applicationDetails$f === void 0 ? void 0 : _applicationDetails$f.totalAmount) > 0) {
+    if ((applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$f = applicationDetails.fetchBillsData) === null || _applicationDetails$f === void 0 ? void 0 : (_applicationDetails$f2 = _applicationDetails$f[0]) === null || _applicationDetails$f2 === void 0 ? void 0 : _applicationDetails$f2.totalAmount) > 0) {
       setshowActionToast({
         key: "error",
         label: "WS_DUE_AMOUNT_SHOULD_BE_ZERO"
@@ -48150,7 +48223,7 @@ const GetConnectionDetails = () => {
     }));
   };
   const getMutationButton = () => {
-    var _applicationDetails$f2, _applicationDetails$a16, _applicationDetails$p2;
+    var _applicationDetails$f3, _applicationDetails$f4, _applicationDetails$a16, _applicationDetails$p2;
     if (!checkApplicationStatus) {
       setshowActionToast({
         key: "error",
@@ -48158,7 +48231,7 @@ const GetConnectionDetails = () => {
       });
       return;
     }
-    if ((applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$f2 = applicationDetails.fetchBillsData[0]) === null || _applicationDetails$f2 === void 0 ? void 0 : _applicationDetails$f2.totalAmount) > 0) {
+    if ((applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$f3 = applicationDetails.fetchBillsData) === null || _applicationDetails$f3 === void 0 ? void 0 : (_applicationDetails$f4 = _applicationDetails$f3[0]) === null || _applicationDetails$f4 === void 0 ? void 0 : _applicationDetails$f4.totalAmount) > 0) {
       setshowActionToast({
         key: "error",
         label: "WS_DUE_AMOUNT_SHOULD_BE_ZERO"
@@ -48212,9 +48285,9 @@ const GetConnectionDetails = () => {
         label: "WORKFLOW_IN_PROGRESS"
       });
     } else {
-      var _billData$, _applicationDetails$f3;
+      var _billData$, _applicationDetails$f5;
       console.log("due", due, applicationDetails);
-      if (((_billData$ = billData[0]) === null || _billData$ === void 0 ? void 0 : _billData$.status) === "ACTIVE" || (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$f3 = applicationDetails.fetchBillsData) === null || _applicationDetails$f3 === void 0 ? void 0 : _applicationDetails$f3.length) <= 0 || due == "0" || due < 0) {
+      if (((_billData$ = billData[0]) === null || _billData$ === void 0 ? void 0 : _billData$.status) === "ACTIVE" || (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$f5 = applicationDetails.fetchBillsData) === null || _applicationDetails$f5 === void 0 ? void 0 : _applicationDetails$f5.length) <= 0 || due == "0" || due < 0) {
         Digit.SessionStorage.set("WS_DISCONNECTION", applicationDetails);
         history.push("" + pathname);
       } else {
@@ -48230,8 +48303,8 @@ const GetConnectionDetails = () => {
         label: "WORKFLOW_IN_PROGRESS"
       });
     } else {
-      var _billData$2, _applicationDetails$f4;
-      if (((_billData$2 = billData[0]) === null || _billData$2 === void 0 ? void 0 : _billData$2.status) === "ACTIVE" || (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$f4 = applicationDetails.fetchBillsData) === null || _applicationDetails$f4 === void 0 ? void 0 : _applicationDetails$f4.length) <= 0 || due === "0") {
+      var _billData$2, _applicationDetails$f6;
+      if (((_billData$2 = billData[0]) === null || _billData$2 === void 0 ? void 0 : _billData$2.status) === "ACTIVE" || (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$f6 = applicationDetails.fetchBillsData) === null || _applicationDetails$f6 === void 0 ? void 0 : _applicationDetails$f6.length) <= 0 || due === "0") {
         Digit.SessionStorage.set("WS_DISCONNECTION", applicationDetails);
         history.push("" + pathname);
       } else {
@@ -48266,7 +48339,7 @@ const GetConnectionDetails = () => {
     label: t("WS_CONNECTION_DETAILS"),
     onClick: () => downloadConnectionDetails()
   };
-  if ((applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$f5 = applicationDetails.fetchBillsData) === null || _applicationDetails$f5 === void 0 ? void 0 : _applicationDetails$f5.length) > 0) dowloadOptions = [appFeeDownloadReceipt, connectionDetailsReceipt];else dowloadOptions = [connectionDetailsReceipt];
+  if ((applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$f7 = applicationDetails.fetchBillsData) === null || _applicationDetails$f7 === void 0 ? void 0 : _applicationDetails$f7.length) > 0) dowloadOptions = [appFeeDownloadReceipt, connectionDetailsReceipt];else dowloadOptions = [connectionDetailsReceipt];
   const Close = () => /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -48389,7 +48462,7 @@ const GetConnectionDetails = () => {
     className: "modal-header-ws"
   }, t("WS_CLEAR_DUES_DISCONNECTION_SUB_HEADER_LABEL"), " "), /*#__PURE__*/React.createElement("div", {
     className: "modal-body-ws"
-  }, /*#__PURE__*/React.createElement("span", null, t("WS_COMMON_TABLE_COL_AMT_DUE_LABEL"), ": \u20B9", due ? due : applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$f6 = applicationDetails.fetchBillsData) === null || _applicationDetails$f6 === void 0 ? void 0 : (_applicationDetails$f7 = _applicationDetails$f6[0]) === null || _applicationDetails$f7 === void 0 ? void 0 : _applicationDetails$f7.totalAmount))) : null, showActionToast && /*#__PURE__*/React.createElement(Toast, {
+  }, /*#__PURE__*/React.createElement("span", null, t("WS_COMMON_TABLE_COL_AMT_DUE_LABEL"), ": \u20B9", due ? due : applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$f8 = applicationDetails.fetchBillsData) === null || _applicationDetails$f8 === void 0 ? void 0 : (_applicationDetails$f9 = _applicationDetails$f8[0]) === null || _applicationDetails$f9 === void 0 ? void 0 : _applicationDetails$f9.totalAmount))) : null, showActionToast && /*#__PURE__*/React.createElement(Toast, {
     error: showActionToast.key,
     label: t("" + showActionToast.label),
     onClose: closeBillToast
@@ -49543,7 +49616,15 @@ const ConsumptionDetails = _ref => {
     meterReadings = _ref2.meterReadings;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "employee-form-section-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: [{
+      timeLine: [{
+        actions: "WS_VIEW_CONSUMPTION",
+        currentStep: 1
+      }]
+    }],
+    showFinalStep: false
+  }), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       display: "flex",
@@ -50167,49 +50248,230 @@ const EditModifyApplication = () => {
   }));
 };
 
-const WSMutationApplicantDetails = _ref => {
-  var _formData$config$key, _errors$proposedNewCo, _errors$newOwnerMobil, _errors$newOwnerEmail, _errors$relationshipW, _errors$reasonForName;
+const Step1_ExistingConnection = _ref => {
+  var _appData$connectionHo, _propertyData$Propert, _propertyData$Propert2, _appData$property, _propertyAddress$loca;
+  let applicationDetails = _ref.applicationDetails,
+    propertyId = _ref.propertyId;
+  const getMaskedName = name => {
+    if (!name) return "NA";
+    return name.split("").map((char, index) => index % 2 === 1 && char !== " " ? "*" : char).join("");
+  };
+  const getMaskedPhone = phone => {
+    if (!phone || phone.length < 10) return "NA";
+    return "******" + phone.slice(-4);
+  };
+  const appData = (applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.applicationData) || {};
+  const connectionNo = (appData === null || appData === void 0 ? void 0 : appData.connectionNo) || "NA";
+  const meterId = (appData === null || appData === void 0 ? void 0 : appData.meterId) || "NA";
+  const connectionStatus = (appData === null || appData === void 0 ? void 0 : appData.status) || "NA";
+  const holderDetails = (appData === null || appData === void 0 ? void 0 : (_appData$connectionHo = appData.connectionHolders) === null || _appData$connectionHo === void 0 ? void 0 : _appData$connectionHo[0]) || {};
+  const registeredName = getMaskedName(holderDetails === null || holderDetails === void 0 ? void 0 : holderDetails.name);
+  const registeredPhone = getMaskedPhone(holderDetails === null || holderDetails === void 0 ? void 0 : holderDetails.mobileNumber);
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const _Digit$Hooks$pt$usePr = Digit.Hooks.pt.usePropertySearch({
+      filters: {
+        propertyIds: propertyId
+      },
+      tenantId
+    }, {
+      enabled: !!propertyId
+    }),
+    propertyData = _Digit$Hooks$pt$usePr.data;
+  const propertyAddress = (propertyData === null || propertyData === void 0 ? void 0 : (_propertyData$Propert = propertyData.Properties) === null || _propertyData$Propert === void 0 ? void 0 : (_propertyData$Propert2 = _propertyData$Propert[0]) === null || _propertyData$Propert2 === void 0 ? void 0 : _propertyData$Propert2.address) || (appData === null || appData === void 0 ? void 0 : (_appData$property = appData.property) === null || _appData$property === void 0 ? void 0 : _appData$property.address) || {};
+  const formattedAddress = [(propertyAddress === null || propertyAddress === void 0 ? void 0 : propertyAddress.houseNo) || (propertyAddress === null || propertyAddress === void 0 ? void 0 : propertyAddress.doorNo), propertyAddress === null || propertyAddress === void 0 ? void 0 : propertyAddress.buildingName, propertyAddress === null || propertyAddress === void 0 ? void 0 : propertyAddress.street, propertyAddress === null || propertyAddress === void 0 ? void 0 : (_propertyAddress$loca = propertyAddress.locality) === null || _propertyAddress$loca === void 0 ? void 0 : _propertyAddress$loca.name, propertyAddress === null || propertyAddress === void 0 ? void 0 : propertyAddress.city, propertyAddress === null || propertyAddress === void 0 ? void 0 : propertyAddress.pincode].filter(Boolean).join(", ") || "NA";
+  const missingFields = [];
+  if (connectionNo === "NA") missingFields.push("Connection Number");
+  if (registeredName === "NA") missingFields.push("Owner Name");
+  if (formattedAddress === "NA") missingFields.push("Property Address");
+  return /*#__PURE__*/React.createElement(Card, {
+    style: {
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "16px",
+      backgroundColor: "#fff3cd",
+      color: "#856404",
+      borderRadius: "8px",
+      border: "1px solid #ffeeba",
+      marginBottom: "20px",
+      display: "flex",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginRight: "8px",
+      fontSize: "20px"
+    }
+  }, "\u2139\uFE0F"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: "500"
+    }
+  }, "Name Change / Mutation is limited to changing the name of the consumer/account holder on the existing water connection. It does not constitute or imply transfer of property ownership.")), missingFields.length > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "12px 16px",
+      backgroundColor: "#fdecea",
+      color: "#611a15",
+      borderRadius: "8px",
+      border: "1px solid #f5c6cb",
+      marginBottom: "16px",
+      display: "flex",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginRight: "8px",
+      fontSize: "18px"
+    }
+  }, "\u26A0\uFE0F"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: "500",
+      fontSize: "14px"
+    }
+  }, "Please verify the connection data before proceeding.")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "24px",
+      marginRight: "8px"
+    }
+  }, "\uD83C\uDFE2"), /*#__PURE__*/React.createElement("h2", {
+    style: {
+      fontSize: "20px",
+      fontWeight: "700",
+      margin: 0
+    }
+  }, "1. Existing Connection & Current Consumer Details.")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "16px",
+      backgroundColor: "#f9f9f9",
+      borderRadius: "8px",
+      borderLeft: "4px solid #00497e"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr 1fr",
+      gap: "16px"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: "#555",
+      fontSize: "14px",
+      marginBottom: "4px"
+    }
+  }, "Connection Number"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: "bold"
+    }
+  }, connectionNo)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: "#555",
+      fontSize: "14px",
+      marginBottom: "4px"
+    }
+  }, "Current Owner Name"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: "bold"
+    }
+  }, registeredName)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: "#555",
+      fontSize: "14px",
+      marginBottom: "4px"
+    }
+  }, "Property Address"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: "bold"
+    }
+  }, formattedAddress)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: "#555",
+      fontSize: "14px",
+      marginBottom: "4px"
+    }
+  }, "Connection Status"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: "bold",
+      color: (connectionStatus === null || connectionStatus === void 0 ? void 0 : connectionStatus.toLowerCase()) === "active" ? "#28a745" : "#dc3545"
+    }
+  }, connectionStatus)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: "#555",
+      fontSize: "14px",
+      marginBottom: "4px"
+    }
+  }, "Meter Number"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: "bold"
+    }
+  }, meterId)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: "#555",
+      fontSize: "14px",
+      marginBottom: "4px"
+    }
+  }, "Mobile Number"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: "bold"
+    }
+  }, registeredPhone)))));
+};
+
+const Step2_NewConsumerDetails = _ref => {
+  var _errors$proposedNewCo, _errors$gender, _errors$newOwnerMobil, _errors$newOwnerEmail, _errors$reasonForName, _errors$relationshipW;
   let t = _ref.t,
-    config = _ref.config,
-    onSelect = _ref.onSelect,
-    formData = _ref.formData,
-    clearErrors = _ref.clearErrors;
+    onNext = _ref.onNext,
+    onBack = _ref.onBack,
+    defaultValues = _ref.defaultValues;
   const _useForm = useForm({
-      defaultValues: (formData === null || formData === void 0 ? void 0 : formData[config.key]) || {}
+      defaultValues: defaultValues || {},
+      mode: "onBlur"
     }),
     control = _useForm.control,
-    watch = _useForm.watch,
-    localFormState = _useForm.formState;
-  const formValue = watch();
-  const errors = localFormState.errors;
+    handleSubmit = _useForm.handleSubmit,
+    errors = _useForm.formState.errors,
+    trigger = _useForm.trigger,
+    setError = _useForm.setError,
+    clearErrors = _useForm.clearErrors;
+  const _useState = useState(null),
+    showToast = _useState[0],
+    setShowToast = _useState[1];
+  const _useState2 = useState({}),
+    touched = _useState2[0],
+    setTouched = _useState2[1];
+  const selectedReason = useWatch({
+    control,
+    name: "reasonForNameChange"
+  });
+  const isOtherReason = (selectedReason === null || selectedReason === void 0 ? void 0 : selectedReason.code) === "OTHER" || selectedReason === "OTHER";
+  const genderOptions = [{
+    code: "MALE",
+    i18nKey: "Male"
+  }, {
+    code: "FEMALE",
+    i18nKey: "Female"
+  }, {
+    code: "TRANSGENDER",
+    i18nKey: "Transgender"
+  }];
   const reasonOptions = [{
     code: "SALE_PURCHASE",
-    i18nKey: "Sale / Purchase of Property"
+    i18nKey: "Purchase of Property"
   }, {
     code: "DEVOLUTION_INHERITANCE",
     i18nKey: "Devolution/Inheritance"
   }, {
     code: "OTHER",
-    i18nKey: "Other Reason(Gift, Lease, etc)"
+    i18nKey: "Other Reason(Gift Deed, Lease Agreement, etc)"
   }];
   const relationshipOptions = [{
-    code: "MOTHER",
-    i18nKey: "Mother"
-  }, {
-    code: "FATHER",
-    i18nKey: "Father"
-  }, {
-    code: "SIBLING",
-    i18nKey: "Sibling"
-  }, {
-    code: "SPOUSE",
-    i18nKey: "Spouse"
-  }, {
-    code: "SON",
-    i18nKey: "Son"
-  }, {
-    code: "DAUGHTER",
-    i18nKey: "Daughter"
+    code: "BLOOD_RELATION",
+    i18nKey: "Blood Relation (Son / Daughter / Spouse)"
   }, {
     code: "LEGAL_HEIR",
     i18nKey: "Legal heir"
@@ -50217,432 +50479,1357 @@ const WSMutationApplicantDetails = _ref => {
     code: "OTHER",
     i18nKey: "Other"
   }];
-  const _useState = useState((formData === null || formData === void 0 ? void 0 : (_formData$config$key = formData[config.key]) === null || _formData$config$key === void 0 ? void 0 : _formData$config$key.saleDeedDocumentId) || null),
-    uploadedFile = _useState[0],
-    setUploadedFile = _useState[1];
-  const _useState2 = useState(null),
-    file = _useState2[0],
-    setFile = _useState2[1];
-  const _useState3 = useState(false),
-    isUploading = _useState3[0],
-    setIsUploading = _useState3[1];
-  useEffect(() => {
-    const currentState = _extends({}, formValue, {
-      saleDeedDocumentId: uploadedFile
-    });
-    if (!lodash.isEqual(formData === null || formData === void 0 ? void 0 : formData[config.key], currentState)) {
-      onSelect(config.key, currentState);
-    }
-  }, [formValue, uploadedFile]);
-  useEffect(() => {
-    (function () {
-      try {
-        const _temp2 = function () {
-          if (file) {
-            const _temp = _finallyRethrows(function () {
-              return _catch(function () {
-                setIsUploading(true);
-                return Promise.resolve(window.Digit.UploadServices.Filestorage("WS", file, window.Digit.ULBService.getStateId())).then(function (response) {
-                  var _response$data, _response$data$files;
-                  if ((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.length) > 0) {
-                    setUploadedFile(response.data.files[0].fileStoreId);
-                    clearErrors && clearErrors(config.key);
-                  }
-                });
-              }, function (err) {
-                console.error("File upload error", err);
-              });
-            }, function (_wasThrown, _result) {
-              setIsUploading(false);
-              if (_wasThrown) throw _result;
-              return _result;
-            });
-            if (_temp && _temp.then) return _temp.then(function () {});
-          }
-        }();
-        return _temp2 && _temp2.then ? _temp2.then(function () {}) : void 0;
-      } catch (e) {
-        Promise.reject(e);
-      }
-    })();
-  }, [file]);
   const errorStyle = {
     width: "100%",
     marginLeft: "0px",
     fontSize: "12px",
-    marginTop: "4px"
+    marginTop: "4px",
+    color: "#d32f2f"
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "formcomposer-section-grid",
+  const getFieldBorderStyle = fieldName => {
+    if (errors !== null && errors !== void 0 && errors[fieldName]) return {
+      border: "1px solid #d32f2f"
+    };
+    if (touched[fieldName] && !(errors !== null && errors !== void 0 && errors[fieldName])) return {
+      border: "1px solid #28a745"
+    };
+    return {};
+  };
+  const onSubmit = data => {
+    if (data.proposedNewConsumerName && data.proposedNewConsumerName.trim().length < 3) {
+      setError("proposedNewConsumerName", {
+        type: "manual",
+        message: "Name must be at least 3 characters"
+      });
+      return;
+    }
+    if (data.proposedNewConsumerName && !/^[a-zA-Z\s.'-]+$/.test(data.proposedNewConsumerName.trim())) {
+      setError("proposedNewConsumerName", {
+        type: "manual",
+        message: "Name should only contain alphabets, spaces, dots, hyphens"
+      });
+      return;
+    }
+    onNext(data);
+  };
+  const onError = () => {
+    const errorCount = Object.keys(errors).length;
+    setShowToast({
+      key: "error",
+      message: "Please fix " + errorCount + " validation error" + (errorCount > 1 ? "s" : "") + " before proceeding."
+    });
+  };
+  const mandatoryIndicator = /*#__PURE__*/React.createElement("span", {
     style: {
-      gridTemplateColumns: "1fr 1fr",
-      gap: "20px",
-      display: "grid"
+      color: "#d32f2f",
+      marginLeft: "2px"
+    }
+  }, "*");
+  return /*#__PURE__*/React.createElement(Card, {
+    style: {
+      marginBottom: "20px"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
-      flexDirection: "column",
-      gap: "20px"
+      alignItems: "center",
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "24px",
+      marginRight: "8px"
+    }
+  }, "\uD83D\uDC64"), /*#__PURE__*/React.createElement("h2", {
+    style: {
+      fontSize: "20px",
+      fontWeight: "700",
+      margin: 0
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LabelFieldPair, {
+  }, "2. New Consumer Details.")), Object.keys(errors).length > 0 && /*#__PURE__*/React.createElement("div", {
     style: {
+      padding: "12px 16px",
+      backgroundColor: "#fdecea",
+      color: "#611a15",
+      borderRadius: "8px",
+      border: "1px solid #f5c6cb",
+      marginBottom: "16px",
       display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      gap: "4px"
+      alignItems: "center"
     }
-  }, /*#__PURE__*/React.createElement(CardLabel, {
+  }, /*#__PURE__*/React.createElement("span", {
     style: {
-      margin: 0,
+      marginRight: "8px",
+      fontSize: "18px"
+    }
+  }, "\u26A0\uFE0F"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: "500",
+      fontSize: "14px"
+    }
+  }, "Please fill in all required fields marked with ", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#d32f2f",
       fontWeight: "bold"
     }
-  }, "PROPOSED NEW CONSUMER NAME*"), /*#__PURE__*/React.createElement("div", {
-    className: "field",
+  }, "*"), " before proceeding.")), /*#__PURE__*/React.createElement("form", {
+    onSubmit: handleSubmit(onSubmit, onError)
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      width: "100%"
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr 1fr",
+      gap: "24px",
+      padding: "16px 0"
     }
-  }, /*#__PURE__*/React.createElement(Controller, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      fontWeight: "bold"
+    }
+  }, "New Consumer Full Name ", mandatoryIndicator), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "proposedNewConsumerName",
     rules: {
-      required: "Required field"
+      required: "Consumer name is required",
+      minLength: {
+        value: 3,
+        message: "Name must be at least 3 characters"
+      },
+      pattern: {
+        value: /^[a-zA-Z\s.'-]+$/,
+        message: "Only alphabets, spaces, dots and hyphens allowed"
+      }
     },
     render: props => /*#__PURE__*/React.createElement(TextInput, {
       value: props.value,
       onChange: e => {
         props.onChange(e.target.value);
+        clearErrors("proposedNewConsumerName");
       },
-      placeholder: "Enter full legal name of new owner",
-      onBlur: props.onBlur
+      onBlur: () => {
+        props.onBlur();
+        setTouched(p => _extends({}, p, {
+          proposedNewConsumerName: true
+        }));
+        trigger("proposedNewConsumerName");
+      },
+      placeholder: "Enter full name (e.g. Rajesh Kumar)",
+      style: getFieldBorderStyle("proposedNewConsumerName")
     })
-  }))), (errors === null || errors === void 0 ? void 0 : errors.proposedNewConsumerName) && /*#__PURE__*/React.createElement(CardLabelError, {
+  }), (errors === null || errors === void 0 ? void 0 : errors.proposedNewConsumerName) && /*#__PURE__*/React.createElement(CardLabelError, {
     style: errorStyle
-  }, errors === null || errors === void 0 ? void 0 : (_errors$proposedNewCo = errors.proposedNewConsumerName) === null || _errors$proposedNewCo === void 0 ? void 0 : _errors$proposedNewCo.message)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LabelFieldPair, {
+  }, errors === null || errors === void 0 ? void 0 : (_errors$proposedNewCo = errors.proposedNewConsumerName) === null || _errors$proposedNewCo === void 0 ? void 0 : _errors$proposedNewCo.message)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, {
     style: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      gap: "4px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, {
-    style: {
-      margin: 0,
       fontWeight: "bold"
     }
-  }, "NEW OWNER MOBILE NUMBER*"), /*#__PURE__*/React.createElement("div", {
-    className: "field",
+  }, "Gender ", mandatoryIndicator), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "gender",
+    rules: {
+      required: "Please select gender"
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      selected: props.value,
+      option: genderOptions,
+      select: val => {
+        props.onChange(val);
+        setTouched(p => _extends({}, p, {
+          gender: true
+        }));
+      },
+      optionKey: "i18nKey",
+      t: t,
+      placeholder: "Select Gender"
+    })
+  }), (errors === null || errors === void 0 ? void 0 : errors.gender) && /*#__PURE__*/React.createElement(CardLabelError, {
+    style: errorStyle
+  }, errors === null || errors === void 0 ? void 0 : (_errors$gender = errors.gender) === null || _errors$gender === void 0 ? void 0 : _errors$gender.message)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, {
     style: {
-      width: "100%"
+      fontWeight: "bold"
     }
-  }, /*#__PURE__*/React.createElement(Controller, {
+  }, "Mobile Number ", mandatoryIndicator), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "newOwnerMobileNumber",
     rules: {
-      required: "Required field",
+      required: "Mobile number is required",
       pattern: {
         value: /^[6-9]\d{9}$/,
-        message: "Invalid mobile number"
+        message: "Enter a valid 10-digit mobile number starting with 6-9"
       }
     },
     render: props => /*#__PURE__*/React.createElement(MobileNumber, {
       value: props.value || "",
       onChange: val => {
         props.onChange(val);
+        clearErrors("newOwnerMobileNumber");
       },
-      placeholder: "Enter mobile number",
-      onBlur: props.onBlur
+      onBlur: () => {
+        setTouched(p => _extends({}, p, {
+          newOwnerMobileNumber: true
+        }));
+        trigger("newOwnerMobileNumber");
+      },
+      placeholder: "Enter 10-digit mobile number",
+      maxLength: 10
     })
-  }))), (errors === null || errors === void 0 ? void 0 : errors.newOwnerMobileNumber) && /*#__PURE__*/React.createElement(CardLabelError, {
+  }), (errors === null || errors === void 0 ? void 0 : errors.newOwnerMobileNumber) && /*#__PURE__*/React.createElement(CardLabelError, {
     style: errorStyle
-  }, errors === null || errors === void 0 ? void 0 : (_errors$newOwnerMobil = errors.newOwnerMobileNumber) === null || _errors$newOwnerMobil === void 0 ? void 0 : _errors$newOwnerMobil.message)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LabelFieldPair, {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      gap: "4px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, {
+  }, errors === null || errors === void 0 ? void 0 : (_errors$newOwnerMobil = errors.newOwnerMobileNumber) === null || _errors$newOwnerMobil === void 0 ? void 0 : _errors$newOwnerMobil.message)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, {
     style: {
-      margin: 0,
       fontWeight: "bold"
     }
-  }, "NEW OWNER EMAIL ADDRESS"), /*#__PURE__*/React.createElement("div", {
-    className: "field",
+  }, "Email ID ", /*#__PURE__*/React.createElement("span", {
     style: {
-      width: "100%"
+      color: "#999",
+      fontSize: "12px"
     }
-  }, /*#__PURE__*/React.createElement(Controller, {
+  }, "(Optional)")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "newOwnerEmailAddress",
     rules: {
       pattern: {
         value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-        message: "Invalid email address"
+        message: "Please enter a valid email address"
       }
     },
     render: props => /*#__PURE__*/React.createElement(TextInput, {
       value: props.value,
       onChange: e => {
         props.onChange(e.target.value);
+        clearErrors("newOwnerEmailAddress");
       },
-      placeholder: "Enter email address",
-      onBlur: props.onBlur
+      onBlur: () => {
+        props.onBlur();
+        setTouched(p => _extends({}, p, {
+          newOwnerEmailAddress: true
+        }));
+        trigger("newOwnerEmailAddress");
+      },
+      placeholder: "example@email.com",
+      style: getFieldBorderStyle("newOwnerEmailAddress")
     })
-  }))), (errors === null || errors === void 0 ? void 0 : errors.newOwnerEmailAddress) && /*#__PURE__*/React.createElement(CardLabelError, {
+  }), (errors === null || errors === void 0 ? void 0 : errors.newOwnerEmailAddress) && /*#__PURE__*/React.createElement(CardLabelError, {
     style: errorStyle
-  }, errors === null || errors === void 0 ? void 0 : (_errors$newOwnerEmail = errors.newOwnerEmailAddress) === null || _errors$newOwnerEmail === void 0 ? void 0 : _errors$newOwnerEmail.message)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LabelFieldPair, {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      gap: "4px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, {
+  }, errors === null || errors === void 0 ? void 0 : (_errors$newOwnerEmail = errors.newOwnerEmailAddress) === null || _errors$newOwnerEmail === void 0 ? void 0 : _errors$newOwnerEmail.message)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, {
     style: {
-      margin: 0,
       fontWeight: "bold"
     }
-  }, "RELATIONSHIP WITH EXISTING CONSUMER*"), /*#__PURE__*/React.createElement("div", {
-    className: "field",
-    style: {
-      width: "100%"
-    }
-  }, /*#__PURE__*/React.createElement(Controller, {
+  }, "Reason for Name Change / Mutation ", mandatoryIndicator), /*#__PURE__*/React.createElement(Controller, {
     control: control,
-    name: "relationshipWithExistingConsumer",
+    name: "reasonForNameChange",
     rules: {
-      required: "Required field"
+      required: "Please select a reason for mutation"
     },
     render: props => /*#__PURE__*/React.createElement(Dropdown, {
       selected: props.value,
-      option: relationshipOptions,
-      select: e => {
-        props.onChange(e);
+      option: reasonOptions,
+      select: val => {
+        props.onChange(val);
+        setTouched(p => _extends({}, p, {
+          reasonForNameChange: true
+        }));
       },
       optionKey: "i18nKey",
       t: t,
-      placeholder: "Select relationship"
+      placeholder: "Select reason"
     })
-  }))), (errors === null || errors === void 0 ? void 0 : errors.relationshipWithExistingConsumer) && /*#__PURE__*/React.createElement(CardLabelError, {
+  }), (errors === null || errors === void 0 ? void 0 : errors.reasonForNameChange) && /*#__PURE__*/React.createElement(CardLabelError, {
     style: errorStyle
-  }, errors === null || errors === void 0 ? void 0 : (_errors$relationshipW = errors.relationshipWithExistingConsumer) === null || _errors$relationshipW === void 0 ? void 0 : _errors$relationshipW.message))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "20px"
-    }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LabelFieldPair, {
+  }, errors === null || errors === void 0 ? void 0 : (_errors$reasonForName = errors.reasonForNameChange) === null || _errors$reasonForName === void 0 ? void 0 : _errors$reasonForName.message)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, {
     style: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      gap: "4px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, {
-    style: {
-      margin: 0,
-      fontWeight: "bold"
-    }
-  }, "REASON FOR NAME CHANGE*"), /*#__PURE__*/React.createElement("div", {
-    className: "field",
-    style: {
-      width: "100%"
+      fontWeight: "bold",
+      color: isOtherReason ? "inherit" : "#999"
     }
-  }, /*#__PURE__*/React.createElement(Controller, {
+  }, "Relationship with Existing Consumer ", isOtherReason && mandatoryIndicator), /*#__PURE__*/React.createElement(Controller, {
     control: control,
-    name: "reasonForNameChange",
+    name: "relationshipWithExistingConsumer",
     rules: {
-      required: "Required field"
+      required: isOtherReason ? "Relationship is required when 'Other Reason' is selected" : false
     },
     render: props => /*#__PURE__*/React.createElement(Dropdown, {
       selected: props.value,
-      option: reasonOptions,
-      select: e => {
-        props.onChange(e);
+      option: relationshipOptions,
+      select: val => {
+        props.onChange(val);
+        setTouched(p => _extends({}, p, {
+          relationshipWithExistingConsumer: true
+        }));
       },
       optionKey: "i18nKey",
       t: t,
-      placeholder: "Select reason"
+      placeholder: "Select relationship",
+      disable: !isOtherReason
     })
-  }))), (errors === null || errors === void 0 ? void 0 : errors.reasonForNameChange) && /*#__PURE__*/React.createElement(CardLabelError, {
-    style: errorStyle
-  }, errors === null || errors === void 0 ? void 0 : (_errors$reasonForName = errors.reasonForNameChange) === null || _errors$reasonForName === void 0 ? void 0 : _errors$reasonForName.message)), /*#__PURE__*/React.createElement("div", {
+  }), !isOtherReason && /*#__PURE__*/React.createElement("span", {
     style: {
-      marginTop: "10px",
-      padding: "20px",
-      border: "1px dashed #ccc",
-      borderRadius: "8px",
-      backgroundColor: "#fafafa"
+      fontSize: "11px",
+      color: "#999",
+      marginTop: "4px",
+      display: "block"
     }
-  }, /*#__PURE__*/React.createElement(LabelFieldPair, {
+  }, "Enabled only when \"Other Reason\" is selected above"), (errors === null || errors === void 0 ? void 0 : errors.relationshipWithExistingConsumer) && /*#__PURE__*/React.createElement(CardLabelError, {
+    style: errorStyle
+  }, errors === null || errors === void 0 ? void 0 : (_errors$relationshipW = errors.relationshipWithExistingConsumer) === null || _errors$relationshipW === void 0 ? void 0 : _errors$relationshipW.message))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      gap: "4px"
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginTop: "24px"
     }
-  }, /*#__PURE__*/React.createElement(CardLabel, {
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onBack,
     style: {
-      margin: 0,
+      padding: "8px 24px",
+      backgroundColor: "#e0e0e0",
+      border: "none",
+      borderRadius: "4px",
+      cursor: "pointer",
       fontWeight: "bold"
     }
-  }, "UPLOAD REGISTERED SALE DEED*"), /*#__PURE__*/React.createElement("p", {
+  }, "\u2190 Back"), /*#__PURE__*/React.createElement("div", {
     style: {
-      color: "#666",
-      fontSize: "12px",
-      marginBottom: "15px",
-      marginTop: "5px"
+      display: "flex",
+      alignItems: "center",
+      gap: "12px"
     }
-  }, "Submit a clear scan of the stamp duty Registered Sale Deed."), /*#__PURE__*/React.createElement("div", {
-    className: "field",
+  }, /*#__PURE__*/React.createElement("span", {
     style: {
-      width: "100%"
+      fontSize: "12px",
+      color: "#999"
     }
-  }, /*#__PURE__*/React.createElement(UploadFile, {
-    id: "sale-deed-upload",
-    onUpload: e => {
-      setFile(e.target.files[0]);
-    },
-    onDelete: () => {
-      setUploadedFile(null);
-      setFile(null);
-    },
-    message: uploadedFile ? "1 File Uploaded" : "Click to upload document",
-    accept: "image/*, .pdf, .png, .jpeg, .jpg",
-    uploadedFiles: uploadedFile && !file ? [["Document", {
-      fileStoreId: uploadedFile
-    }]] : undefined,
-    removeTargetedFile: () => {
-      setUploadedFile(null);
-      setFile(null);
+  }, "Fields marked with ", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#d32f2f"
     }
-  }))), isUploading && /*#__PURE__*/React.createElement("span", {
+  }, "*"), " are mandatory"), /*#__PURE__*/React.createElement("button", {
+    type: "submit",
     style: {
-      color: "#00497e",
-      fontWeight: "bold",
-      fontSize: "12px"
+      padding: "10px 24px",
+      backgroundColor: "#00497e",
+      color: "white",
+      border: "none",
+      borderRadius: "4px",
+      cursor: "pointer",
+      fontWeight: "bold"
     }
-  }, "Uploading..."))));
+  }, "Save & Proceed to Documents \u2192")))), showToast && /*#__PURE__*/React.createElement(Toast, {
+    error: showToast.key === "error",
+    warning: showToast.key === "warning",
+    label: t(showToast.message),
+    onClose: () => setShowToast(null),
+    isDleteBtn: true
+  }));
 };
 
-const MutationApplication = () => {
-  var _state, _details, _details2, _details2$application, _applicationDetails$a, _applicationDetails$a2, _applicationDetails$a3, _applicationDetails$a4, _applicationDetails$a5, _applicationDetails$a6, _applicationDetails$a7;
-  const _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  let _useLocation = useLocation(),
-    state = _useLocation.state;
-  state = state ? typeof state === "string" ? JSON.parse(state) : state : {};
-  const history = useHistory();
-  let filters = getQueryStringParams(location.search);
-  const _useState = useState(false),
-    canSubmit = _useState[0],
-    setSubmitValve = _useState[1];
-  const _useState2 = useState(null),
-    showToast = _useState2[0],
-    setShowToast = _useState2[1];
-  const _useState3 = useState({}),
-    appData = _useState3[0],
-    setAppData = _useState3[1];
-  const _useState4 = useState({
-      head: "",
-      body: []
+const Step3_UploadDocuments = _ref => {
+  var _defaultValues$reason;
+  let t = _ref.t,
+    onNext = _ref.onNext,
+    onBack = _ref.onBack,
+    defaultValues = _ref.defaultValues;
+  const _useState = useState((defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.identityProofType) || null),
+    identityProofType = _useState[0],
+    setIdentityProofType = _useState[1];
+  const _useState2 = useState((defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.documentNumber) || ""),
+    documentNumber = _useState2[0],
+    setDocumentNumber = _useState2[1];
+  const _useState3 = useState((defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.identityProofDocumentId) || null),
+    identityProofFile = _useState3[0],
+    setIdentityProofFile = _useState3[1];
+  const _useState4 = useState((defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.saleDeedDocumentId) || null),
+    mutationDocFile = _useState4[0],
+    setMutationDocFile = _useState4[1];
+  const _useState5 = useState({
+      identity: null,
+      mutation: null
     }),
-    config = _useState4[0],
-    setConfig = _useState4[1];
-  const _useState5 = useState(true),
-    enabledLoader = _useState5[0],
-    setEnabledLoader = _useState5[1];
+    rawFiles = _useState5[0],
+    setRawFiles = _useState5[1];
   const _useState6 = useState(false),
-    isAppDetailsPage = _useState6[0];
-  const _useState7 = useState(false),
-    isEnableLoader = _useState7[0],
-    setIsEnableLoader = _useState7[1];
-  let tenantId = Digit.ULBService.getCurrentTenantId();
-  const applicationNumber = filters === null || filters === void 0 ? void 0 : filters.applicationNumber;
-  const serviceType = filters === null || filters === void 0 ? void 0 : filters.service;
-  const stateId = Digit.ULBService.getStateId();
-  let _Digit$Hooks$ws$useWS = Digit.Hooks.ws.useWSConfigMDMS.WSCreateConfig(stateId, {}),
-    newConfig = _Digit$Hooks$ws$useWS.data,
-    isConfigLoading = _Digit$Hooks$ws$useWS.isLoading;
-  let details = cloneDeep_1((_state = state) === null || _state === void 0 ? void 0 : _state.data);
-  let _Digit$Hooks$ws$useWS2 = Digit.Hooks.ws.useWSDetailsPage(t, tenantId, ((_details = details) === null || _details === void 0 ? void 0 : _details.applicationNo) || applicationNumber, (serviceType === null || serviceType === void 0 ? void 0 : serviceType.toUpperCase()) || ((_details2 = details) === null || _details2 === void 0 ? void 0 : (_details2$application = _details2.applicationData) === null || _details2$application === void 0 ? void 0 : _details2$application.serviceType)),
-    applicationDetails = _Digit$Hooks$ws$useWS2.data;
-  details = applicationDetails;
-  const _useState8 = useState(new URLSearchParams(useLocation().search).get("propertyId")),
-    propertyId = _useState8[0],
-    setPropertyId = _useState8[1];
-  const _Digit$Hooks$useSessi = Digit.Hooks.useSessionStorage("PT_CREATE_EMP_WS_NEW_FORM", {}),
-    sessionFormData = _Digit$Hooks$useSessi[0],
-    setSessionFormData = _Digit$Hooks$useSessi[1],
-    clearSessionFormData = _Digit$Hooks$useSessi[2];
-  const _Digit$Hooks$pt$usePr = Digit.Hooks.pt.usePropertySearch({
-      filters: {
-        propertyIds: propertyId
-      },
-      tenantId: tenantId
-    }, {
-      filters: {
-        propertyIds: propertyId
-      },
-      tenantId: tenantId,
-      enabled: propertyId && propertyId != "" ? true : false
-    }),
-    propertyDetails = _Digit$Hooks$pt$usePr.data;
-  useEffect(() => {
-    if (!isConfigLoading && newConfig && Array.isArray(newConfig)) {
-      const config = cloneDeep_1(newConfig.find(conf => conf.hideInCitizen && conf.isModify));
-      if (config) {
-        var _config$body;
-        config.head = "WS_WATER_AND_SEWERAGE_MUTATION_CONNECTION_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.isModifyConnection) bodyDetails.push(data);
-        });
-        bodyDetails.forEach(bdyData => {
-          if ((bdyData === null || bdyData === void 0 ? void 0 : bdyData.head) === "WS_COMMON_PROPERTY_DETAILS") {
-            bdyData.head = "";
-            bdyData.className = "mutation-disabled-section";
-          } else if ((bdyData === null || bdyData === void 0 ? void 0 : bdyData.head) === "WS_COMMON_CONNECTION_HOLDER_DETAILS_HEADER") {
-            bdyData.head = "Specify ownership updates and transfer reason:";
-            bdyData.body = [{
-              type: "component",
-              key: "MutationApplicantDetails",
-              component: WSMutationApplicantDetails,
-              withoutLabel: true
-            }];
-          } else {
-            bdyData.head = "";
-            bdyData.className = "mutation-hidden-section";
-          }
-        });
-        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(function () {
+    isUploading = _useState6[0],
+    setIsUploading = _useState6[1];
+  const _useState7 = useState(null),
+    showToast = _useState7[0],
+    setShowToast = _useState7[1];
+  const _useState8 = useState({}),
+    fieldErrors = _useState8[0],
+    setFieldErrors = _useState8[1];
+  const _useState9 = useState(false),
+    hasAttemptedSubmit = _useState9[0],
+    setHasAttemptedSubmit = _useState9[1];
+  const identityOptions = [{
+    code: "AADHAAR",
+    i18nKey: "Aadhaar Card"
+  }, {
+    code: "VOTER_ID",
+    i18nKey: "Voter ID"
+  }, {
+    code: "PAN",
+    i18nKey: "PAN Card"
+  }, {
+    code: "OTHER",
+    i18nKey: "Any other document configured by DJB"
+  }];
+  const getReasonDocLabel = reasonCode => {
+    switch (reasonCode) {
+      case "SALE_PURCHASE":
+        return "Upload Purchase of Property";
+      case "DEVOLUTION_INHERITANCE":
+        return "Upload Devolution/ Inheritance";
+      case "OTHER":
+        return "Upload Other (Gift Deed, Will registration, etc.)";
+      default:
+        return "Upload Supporting Document";
+    }
+  };
+  const reasonCode = (defaultValues === null || defaultValues === void 0 ? void 0 : (_defaultValues$reason = defaultValues.reasonForNameChange) === null || _defaultValues$reason === void 0 ? void 0 : _defaultValues$reason.code) || (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.reasonForNameChange);
+  const reasonDocLabel = getReasonDocLabel(reasonCode);
+  const validateDocumentNumber = (value, docType) => {
+    if (!value || !value.trim()) return "Document number is required";
+    const trimmed = value.trim();
+    if ((docType === null || docType === void 0 ? void 0 : docType.code) === "AADHAAR") {
+      if (!/^\d{12}$/.test(trimmed)) return "Aadhaar number must be exactly 12 digits";
+    } else if ((docType === null || docType === void 0 ? void 0 : docType.code) === "PAN") {
+      if (!/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(trimmed.toUpperCase())) return "PAN must be in format ABCDE1234F";
+    } else if ((docType === null || docType === void 0 ? void 0 : docType.code) === "VOTER_ID") {
+      if (!/^[A-Z]{3}\d{7}$/.test(trimmed.toUpperCase())) return "Voter ID must be in format ABC1234567";
+    } else {
+      if (trimmed.length < 3) return "Document number must be at least 3 characters";
+    }
+    return null;
+  };
+  const validateFileSize = file => {
+    const maxSizeMB = 5;
+    if (file.size > maxSizeMB * 1024 * 1024) {
+      return "File size exceeds " + maxSizeMB + "MB limit. Please choose a smaller file.";
+    }
+    return null;
+  };
+  const validateFileType = file => {
+    const allowedTypes = ["image/jpeg", "image/jpg", "image/png", "application/pdf"];
+    if (!allowedTypes.includes(file.type)) {
+      return "Only PDF, PNG, JPEG files are allowed.";
+    }
+    return null;
+  };
+  const handleFileUpload = function (file, type) {
     try {
-      const IsDetailsExists = sessionStorage.getItem("IsDetailsExists") ? JSON.parse(sessionStorage.getItem("IsDetailsExists")) : false;
-      const _temp = function (_details3, _details3$application) {
-        if ((_details3 = details) !== null && _details3 !== void 0 && (_details3$application = _details3.applicationData) !== null && _details3$application !== void 0 && _details3$application.id) {
-          var _details4, _details4$application;
-          return Promise.resolve(convertApplicationData(details, (serviceType === null || serviceType === void 0 ? void 0 : serviceType.toUpperCase()) || ((_details4 = details) === null || _details4 === void 0 ? void 0 : (_details4$application = _details4.applicationData) === null || _details4$application === void 0 ? void 0 : _details4$application.serviceType), true, undefined, t)).then(function (convertAppData) {
-            setSessionFormData(prev => _extends({}, prev, convertAppData));
-            setAppData(prev => _extends({}, prev, convertAppData));
-            sessionStorage.setItem("IsDetailsExists", JSON.stringify(true));
+      const sizeError = validateFileSize(file);
+      if (sizeError) {
+        setShowToast({
+          key: "error",
+          message: sizeError
+        });
+        return Promise.resolve();
+      }
+      const typeError = validateFileType(file);
+      if (typeError) {
+        setShowToast({
+          key: "error",
+          message: typeError
+        });
+        return Promise.resolve();
+      }
+      const _temp = _finallyRethrows(function () {
+        return _catch(function () {
+          setIsUploading(true);
+          return Promise.resolve(window.Digit.UploadServices.Filestorage("WS", file, window.Digit.ULBService.getStateId())).then(function (response) {
+            var _response$data, _response$data$files;
+            if ((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.length) > 0) {
+              const fileStoreId = response.data.files[0].fileStoreId;
+              if (type === "identity") {
+                setIdentityProofFile(fileStoreId);
+                setFieldErrors(prev => _extends({}, prev, {
+                  identityFile: null
+                }));
+              }
+              if (type === "mutation") {
+                setMutationDocFile(fileStoreId);
+                setFieldErrors(prev => _extends({}, prev, {
+                  mutationFile: null
+                }));
+              }
+              setShowToast({
+                key: "success",
+                message: "Document uploaded successfully!"
+              });
+            }
           });
-        }
-      }();
+        }, function (err) {
+          console.error("File upload error", err);
+          setShowToast({
+            key: "error",
+            message: "File upload failed. Please try again."
+          });
+        });
+      }, function (_wasThrown, _result) {
+        setIsUploading(false);
+        if (_wasThrown) throw _result;
+        return _result;
+      });
       return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [details, applicationDetails]);
+  };
+  useEffect(() => {
+    if (rawFiles.identity) handleFileUpload(rawFiles.identity, "identity");
+  }, [rawFiles.identity]);
+  useEffect(() => {
+    if (rawFiles.mutation) handleFileUpload(rawFiles.mutation, "mutation");
+  }, [rawFiles.mutation]);
+  useEffect(() => {
+    if (hasAttemptedSubmit) {
+      const newErrors = {};
+      if (!identityProofType) newErrors.identityType = "Please select a document type";
+      if (!identityProofFile) newErrors.identityFile = "Please upload your identity proof document";
+      if (!mutationDocFile) newErrors.mutationFile = "Please upload the reason-based supporting document";
+      const docError = validateDocumentNumber(documentNumber, identityProofType);
+      if (docError) newErrors.documentNumber = docError;
+      setFieldErrors(newErrors);
+    }
+  }, [identityProofType, documentNumber, identityProofFile, mutationDocFile, hasAttemptedSubmit]);
+  const onProceed = () => {
+    setHasAttemptedSubmit(true);
+    const newErrors = {};
+    if (!identityProofType) newErrors.identityType = "Please select a document type";
+    const docError = validateDocumentNumber(documentNumber, identityProofType);
+    if (docError) newErrors.documentNumber = docError;
+    if (!identityProofFile) newErrors.identityFile = "Please upload your identity proof document";
+    if (!mutationDocFile) newErrors.mutationFile = "Please upload the reason-based supporting document";
+    setFieldErrors(newErrors);
+    if (Object.keys(newErrors).length > 0) {
+      const errorCount = Object.keys(newErrors).length;
+      setShowToast({
+        key: "warning",
+        message: "Please fix " + errorCount + " issue" + (errorCount > 1 ? "s" : "") + " before proceeding."
+      });
+      return;
+    }
+    onNext({
+      identityProofType,
+      documentNumber: documentNumber.trim(),
+      identityProofDocumentId: identityProofFile,
+      saleDeedDocumentId: mutationDocFile
+    });
+  };
+  const uploadBoxStyle = (hasError, hasFile) => ({
+    border: hasError ? "2px dashed #d32f2f" : hasFile ? "2px dashed #28a745" : "1px dashed #ccc",
+    padding: "20px",
+    borderRadius: "8px",
+    backgroundColor: hasError ? "#fef2f2" : hasFile ? "#f0fff4" : "#f4f9fc",
+    textAlign: "center",
+    marginTop: "8px",
+    transition: "all 0.2s ease"
+  });
+  const errorTextStyle = {
+    fontSize: "12px",
+    color: "#d32f2f",
+    marginTop: "4px"
+  };
+  const successTextStyle = {
+    fontSize: "12px",
+    color: "#28a745",
+    marginTop: "4px",
+    fontWeight: "500"
+  };
+  const mandatoryIndicator = /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#d32f2f",
+      marginLeft: "2px"
+    }
+  }, "*");
+  const errorCount = Object.keys(fieldErrors).length;
+  return /*#__PURE__*/React.createElement(Card, {
+    style: {
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      marginBottom: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "24px",
+      marginRight: "8px"
+    }
+  }, "\uD83D\uDCC4"), /*#__PURE__*/React.createElement("h2", {
+    style: {
+      fontSize: "20px",
+      fontWeight: "700",
+      margin: 0
+    }
+  }, "3. Upload Verification Documents")), /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: "#666",
+      marginBottom: "20px"
+    }
+  }, "Please upload legible scanned copies or photos (PDF, PNG, JPEG - Max 5MB)."), hasAttemptedSubmit && errorCount > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "12px 16px",
+      backgroundColor: "#fdecea",
+      color: "#611a15",
+      borderRadius: "8px",
+      border: "1px solid #f5c6cb",
+      marginBottom: "16px",
+      display: "flex",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginRight: "8px",
+      fontSize: "18px"
+    }
+  }, "\u26A0\uFE0F"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: "500",
+      fontSize: "14px"
+    }
+  }, errorCount, " required item", errorCount > 1 ? "s" : "", " still need", errorCount === 1 ? "s" : "", " your attention before proceeding.")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: "24px"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      fontWeight: "bold"
+    }
+  }, "1. Address / Identity Proof ", mandatoryIndicator), /*#__PURE__*/React.createElement(Dropdown, {
+    selected: identityProofType,
+    option: identityOptions,
+    select: val => {
+      setIdentityProofType(val);
+      setFieldErrors(prev => _extends({}, prev, {
+        identityType: null
+      }));
+    },
+    optionKey: "i18nKey",
+    t: t,
+    placeholder: "Select Document Type",
+    style: {
+      marginBottom: "12px"
+    }
+  }), fieldErrors.identityType && /*#__PURE__*/React.createElement("div", {
+    style: errorTextStyle
+  }, fieldErrors.identityType), /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      fontWeight: "bold",
+      marginTop: "8px"
+    }
+  }, "Document Number ", mandatoryIndicator), /*#__PURE__*/React.createElement(TextInput, {
+    value: documentNumber,
+    onChange: e => {
+      setDocumentNumber(e.target.value);
+      setFieldErrors(prev => _extends({}, prev, {
+        documentNumber: null
+      }));
+    },
+    onBlur: () => {
+      if (hasAttemptedSubmit) {
+        const err = validateDocumentNumber(documentNumber, identityProofType);
+        if (err) setFieldErrors(prev => _extends({}, prev, {
+          documentNumber: err
+        }));
+      }
+    },
+    placeholder: (identityProofType === null || identityProofType === void 0 ? void 0 : identityProofType.code) === "AADHAAR" ? "Enter 12-digit Aadhaar number" : (identityProofType === null || identityProofType === void 0 ? void 0 : identityProofType.code) === "PAN" ? "Enter PAN (e.g. ABCDE1234F)" : "Enter Document Number",
+    style: _extends({
+      marginBottom: "4px"
+    }, fieldErrors.documentNumber ? {
+      border: "1px solid #d32f2f"
+    } : {})
+  }), fieldErrors.documentNumber && /*#__PURE__*/React.createElement("div", {
+    style: errorTextStyle
+  }, fieldErrors.documentNumber), (identityProofType === null || identityProofType === void 0 ? void 0 : identityProofType.code) === "AADHAAR" && !fieldErrors.documentNumber && /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "11px",
+      color: "#999"
+    }
+  }, "Format: 12-digit numeric (e.g. 123456789012)"), (identityProofType === null || identityProofType === void 0 ? void 0 : identityProofType.code) === "PAN" && !fieldErrors.documentNumber && /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "11px",
+      color: "#999"
+    }
+  }, "Format: ABCDE1234F"), /*#__PURE__*/React.createElement("div", {
+    style: uploadBoxStyle(!!fieldErrors.identityFile, !!identityProofFile)
+  }, /*#__PURE__*/React.createElement(UploadFile, {
+    id: "identity-upload",
+    onUpload: e => setRawFiles(prev => _extends({}, prev, {
+      identity: e.target.files[0]
+    })),
+    onDelete: () => {
+      setIdentityProofFile(null);
+      setRawFiles(prev => _extends({}, prev, {
+        identity: null
+      }));
+    },
+    message: identityProofFile ? "Uploaded" : "Click to Choose File",
+    accept: "image/*, .pdf, .png, .jpeg, .jpg",
+    uploadedFiles: identityProofFile && !rawFiles.identity ? [["Document", {
+      fileStoreId: identityProofFile
+    }]] : undefined,
+    removeTargetedFile: () => {
+      setIdentityProofFile(null);
+      setRawFiles(prev => _extends({}, prev, {
+        identity: null
+      }));
+    }
+  })), fieldErrors.identityFile && /*#__PURE__*/React.createElement("div", {
+    style: errorTextStyle
+  }, fieldErrors.identityFile), identityProofFile && /*#__PURE__*/React.createElement("div", {
+    style: successTextStyle
+  }, "\u2713 Document uploaded successfully")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      fontWeight: "bold"
+    }
+  }, "2. Reason-Based Supporting Document ", mandatoryIndicator), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "10px",
+      backgroundColor: "#e9ecef",
+      borderRadius: "4px",
+      marginBottom: "12px",
+      color: "#495057",
+      fontSize: "14px",
+      minHeight: "42px",
+      display: "flex",
+      alignItems: "center"
+    }
+  }, reasonDocLabel), /*#__PURE__*/React.createElement("div", {
+    style: uploadBoxStyle(!!fieldErrors.mutationFile, !!mutationDocFile)
+  }, /*#__PURE__*/React.createElement(UploadFile, {
+    id: "mutation-upload",
+    onUpload: e => setRawFiles(prev => _extends({}, prev, {
+      mutation: e.target.files[0]
+    })),
+    onDelete: () => {
+      setMutationDocFile(null);
+      setRawFiles(prev => _extends({}, prev, {
+        mutation: null
+      }));
+    },
+    message: mutationDocFile ? "Uploaded" : "Click to Upload",
+    accept: "image/*, .pdf, .png, .jpeg, .jpg",
+    uploadedFiles: mutationDocFile && !rawFiles.mutation ? [["Document", {
+      fileStoreId: mutationDocFile
+    }]] : undefined,
+    removeTargetedFile: () => {
+      setMutationDocFile(null);
+      setRawFiles(prev => _extends({}, prev, {
+        mutation: null
+      }));
+    }
+  })), fieldErrors.mutationFile && /*#__PURE__*/React.createElement("div", {
+    style: errorTextStyle
+  }, fieldErrors.mutationFile), mutationDocFile && /*#__PURE__*/React.createElement("div", {
+    style: successTextStyle
+  }, "\u2713 Document uploaded successfully"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginTop: "32px"
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onBack,
+    style: {
+      padding: "8px 24px",
+      backgroundColor: "#e0e0e0",
+      border: "none",
+      borderRadius: "4px",
+      cursor: "pointer",
+      fontWeight: "bold"
+    }
+  }, "\u2190 Back"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "12px",
+      color: "#999"
+    }
+  }, "All documents are mandatory"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onProceed,
+    disabled: isUploading,
+    style: {
+      padding: "10px 24px",
+      backgroundColor: isUploading ? "#ccc" : "#00497e",
+      color: "white",
+      border: "none",
+      borderRadius: "4px",
+      cursor: isUploading ? "not-allowed" : "pointer",
+      fontWeight: "bold"
+    }
+  }, isUploading ? "Uploading..." : "Proceed to Application Preview →"))), showToast && /*#__PURE__*/React.createElement(Toast, {
+    error: showToast.key === "error",
+    warning: showToast.key === "warning",
+    success: showToast.key === "success",
+    label: t(showToast.message),
+    onClose: () => setShowToast(null),
+    isDleteBtn: true
+  }));
+};
+
+const Step4_Preview = _ref => {
+  var _appData$connectionHo, _appData$property, _address$locality;
+  let formData = _ref.formData,
+    applicationDetails = _ref.applicationDetails,
+    onBack = _ref.onBack,
+    onSubmit = _ref.onSubmit,
+    isLoading = _ref.isLoading;
+  const _useState = useState(false),
+    agreed = _useState[0],
+    setAgreed = _useState[1];
+  const _useState2 = useState(0),
+    fee = _useState2[0],
+    setFee = _useState2[1];
+  const _useState3 = useState("Calculating..."),
+    slab = _useState3[0],
+    setSlab = _useState3[1];
+  const getMaskedName = name => {
+    if (!name) return "NA";
+    return name.split("").map((char, index) => index % 2 === 1 && char !== " " ? "*" : char).join("");
+  };
+  const getMaskedPhone = phone => {
+    if (!phone || phone.length < 10) return "NA";
+    return "******" + phone.slice(-4);
+  };
+  const appData = (applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.applicationData) || {};
+  const connectionNo = (appData === null || appData === void 0 ? void 0 : appData.connectionNo) || "NA";
+  const meterId = (appData === null || appData === void 0 ? void 0 : appData.meterId) || "NA";
+  const propertyId = (appData === null || appData === void 0 ? void 0 : appData.propertyId) || "NA";
+  const oldHolder = (appData === null || appData === void 0 ? void 0 : (_appData$connectionHo = appData.connectionHolders) === null || _appData$connectionHo === void 0 ? void 0 : _appData$connectionHo[0]) || {};
+  const oldName = getMaskedName(oldHolder === null || oldHolder === void 0 ? void 0 : oldHolder.name);
+  const oldPhone = getMaskedPhone(oldHolder === null || oldHolder === void 0 ? void 0 : oldHolder.mobileNumber);
+  const address = (appData === null || appData === void 0 ? void 0 : (_appData$property = appData.property) === null || _appData$property === void 0 ? void 0 : _appData$property.address) || {};
+  const oldAddress = [address === null || address === void 0 ? void 0 : address.doorNo, address === null || address === void 0 ? void 0 : address.buildingName, address === null || address === void 0 ? void 0 : address.street, address === null || address === void 0 ? void 0 : (_address$locality = address.locality) === null || _address$locality === void 0 ? void 0 : _address$locality.name, address === null || address === void 0 ? void 0 : address.city].filter(Boolean).join(", ") || "NA";
+  const proposedNewConsumerName = formData.proposedNewConsumerName,
+    newOwnerMobileNumber = formData.newOwnerMobileNumber,
+    relationshipWithExistingConsumer = formData.relationshipWithExistingConsumer,
+    reasonForNameChange = formData.reasonForNameChange,
+    identityProofType = formData.identityProofType,
+    documentNumber = formData.documentNumber,
+    identityProofDocumentId = formData.identityProofDocumentId,
+    saleDeedDocumentId = formData.saleDeedDocumentId;
+  const getRelationshipName = code => {
+    if (code !== null && code !== void 0 && code.code) return code.i18nKey;
+    const map = {
+      "BLOOD_RELATION": "Blood Relation",
+      "LEGAL_HEIR": "Legal Heir",
+      "OTHER": "Other"
+    };
+    return map[code] || code;
+  };
+  const getReasonName = code => {
+    if (code !== null && code !== void 0 && code.code) return code.i18nKey;
+    const map = {
+      "SALE_PURCHASE": "Sale / Purchase of Property",
+      "DEVOLUTION_INHERITANCE": "Inheritance / Succession",
+      "OTHER": "Other"
+    };
+    return map[code] || code;
+  };
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const viewDocument = function (fileStoreId) {
+    try {
+      if (!fileStoreId) return Promise.resolve();
+      const _temp = _catch(function () {
+        const stateId = Digit.ULBService.getStateId();
+        return Promise.resolve(window.Digit.UploadServices.Filefetch([fileStoreId], stateId)).then(function (res) {
+          var _res$data;
+          if (res !== null && res !== void 0 && (_res$data = res.data) !== null && _res$data !== void 0 && _res$data[fileStoreId]) {
+            const fileUrl = res.data[fileStoreId].split(",")[0];
+            window.open(fileUrl, "_blank");
+          }
+        });
+      }, function (err) {
+        console.error("Failed to fetch document", err);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  useEffect(() => {
+    const relationCode = (relationshipWithExistingConsumer === null || relationshipWithExistingConsumer === void 0 ? void 0 : relationshipWithExistingConsumer.code) || relationshipWithExistingConsumer;
+    if (relationCode && relationCode !== "OTHER") {
+      setFee(100);
+      setSlab("Blood relation slab");
+    } else {
+      setFee(1350);
+      setSlab("Other Slab");
+    }
+  }, [relationshipWithExistingConsumer]);
+  const sectionStyle = {
+    border: "1px solid #e0e0e0",
+    borderRadius: "8px",
+    padding: "16px",
+    marginBottom: "16px"
+  };
+  const labelStyle = {
+    color: "#666",
+    fontSize: "14px",
+    marginBottom: "4px"
+  };
+  const valueStyle = {
+    fontWeight: "bold",
+    fontSize: "16px"
+  };
+  const uploadDocStatusStyle = {
+    fontSize: "14px",
+    fontWeight: "bold"
+  };
+  return /*#__PURE__*/React.createElement(Card, {
+    style: {
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "24px",
+      marginRight: "8px"
+    }
+  }, "\uD83D\uDCCB"), /*#__PURE__*/React.createElement("h2", {
+    style: {
+      fontSize: "20px",
+      fontWeight: "700",
+      margin: 0
+    }
+  }, "4. Application Preview & Final Declaration")), /*#__PURE__*/React.createElement("div", {
+    style: _extends({}, sectionStyle, {
+      borderLeft: "4px solid #00497e"
+    })
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      fontSize: "16px",
+      fontWeight: "bold",
+      color: "#00497e",
+      marginBottom: "12px"
+    }
+  }, "Property & Connection Summary"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Connection No"), /*#__PURE__*/React.createElement("div", {
+    style: valueStyle
+  }, connectionNo)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Meter Number"), /*#__PURE__*/React.createElement("div", {
+    style: valueStyle
+  }, meterId)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Property ID"), /*#__PURE__*/React.createElement("div", {
+    style: valueStyle
+  }, propertyId)))), /*#__PURE__*/React.createElement("div", {
+    style: _extends({}, sectionStyle, {
+      borderLeft: "4px solid #f29c1f"
+    })
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      fontSize: "16px",
+      fontWeight: "bold",
+      color: "#f29c1f",
+      marginBottom: "12px"
+    }
+  }, "\uD83D\uDD12 Existing / Previous Owner Details (Masked Information)"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Registered Name:"), /*#__PURE__*/React.createElement("div", {
+    style: valueStyle
+  }, oldName)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Meter Number:"), /*#__PURE__*/React.createElement("div", {
+    style: valueStyle
+  }, meterId)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Registered Phone:"), /*#__PURE__*/React.createElement("div", {
+    style: valueStyle
+  }, oldPhone))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Registered Address:"), /*#__PURE__*/React.createElement("div", {
+    style: valueStyle
+  }, oldAddress))), /*#__PURE__*/React.createElement("div", {
+    style: _extends({}, sectionStyle, {
+      borderLeft: "4px solid #00497e"
+    })
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      fontSize: "16px",
+      fontWeight: "bold",
+      color: "#00497e",
+      marginBottom: "12px"
+    }
+  }, "\uD83D\uDC64 Transferee (New Owner) Summary"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "New Owner Name"), /*#__PURE__*/React.createElement("div", {
+    style: valueStyle
+  }, proposedNewConsumerName)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Mobile Number"), /*#__PURE__*/React.createElement("div", {
+    style: valueStyle
+  }, newOwnerMobileNumber)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Relation Type"), /*#__PURE__*/React.createElement("div", {
+    style: valueStyle
+  }, getRelationshipName(relationshipWithExistingConsumer))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Transfer Reason"), /*#__PURE__*/React.createElement("div", {
+    style: valueStyle
+  }, getReasonName(reasonForNameChange))))), /*#__PURE__*/React.createElement("div", {
+    style: _extends({}, sectionStyle, {
+      borderLeft: "4px solid #17a2b8"
+    })
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      fontSize: "16px",
+      fontWeight: "bold",
+      color: "#17a2b8",
+      marginBottom: "12px"
+    }
+  }, "Uploaded Documents"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr 1fr",
+      gap: "16px"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Address / Identity Proof"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: uploadDocStatusStyle
+  }, "\u2713 ", (identityProofType === null || identityProofType === void 0 ? void 0 : identityProofType.i18nKey) || "Document"), identityProofDocumentId && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => viewDocument(identityProofDocumentId),
+    style: {
+      color: "#00497e",
+      background: "none",
+      border: "none",
+      textDecoration: "underline",
+      cursor: "pointer",
+      fontSize: "14px",
+      fontWeight: "bold"
+    }
+  }, "View"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Document Number"), /*#__PURE__*/React.createElement("div", {
+    style: valueStyle
+  }, documentNumber || "NA")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Reason-Based Proof"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: uploadDocStatusStyle
+  }, "\u2713 Uploaded"), saleDeedDocumentId && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => viewDocument(saleDeedDocumentId),
+    style: {
+      color: "#00497e",
+      background: "none",
+      border: "none",
+      textDecoration: "underline",
+      cursor: "pointer",
+      fontSize: "14px",
+      fontWeight: "bold"
+    }
+  }, "View"))))), /*#__PURE__*/React.createElement("div", {
+    style: _extends({}, sectionStyle, {
+      backgroundColor: "#f2fff5",
+      border: "1px solid #c3e6cb",
+      borderLeft: "4px solid #28a745"
+    })
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      fontSize: "16px",
+      fontWeight: "bold",
+      color: "#28a745",
+      marginBottom: "12px"
+    }
+  }, "\uD83D\uDCB5 Mutation Fee Details (Money to Pay in Mutation)"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Mutation Money to Pay:"), /*#__PURE__*/React.createElement("div", {
+    style: _extends({}, valueStyle, {
+      color: "#28a745",
+      fontSize: "20px"
+    })
+  }, "\u20B9 ", fee, ".00")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Fee Status:"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      padding: "4px 8px",
+      backgroundColor: "#d1ecf1",
+      color: "#0c5460",
+      borderRadius: "16px",
+      fontSize: "12px",
+      fontWeight: "bold"
+    }
+  }, "PAYABLE POST VERIFICATION")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: labelStyle
+  }, "Applicable Slab:"), /*#__PURE__*/React.createElement("div", {
+    style: valueStyle
+  }, slab)))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "16px",
+      backgroundColor: "#fffbeb",
+      border: "1px solid #ffeeba",
+      borderRadius: "8px",
+      marginBottom: "24px"
+    }
+  }, /*#__PURE__*/React.createElement(CheckBox, {
+    label: "I want to go ahead with submitting this application. I confirm that the details and information provided by me are true and correct to the best of my knowledge.",
+    onChange: e => setAgreed(e.target.checked),
+    checked: agreed
+  })), /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onBack,
+    style: {
+      padding: "8px 24px",
+      backgroundColor: "#e0e0e0",
+      border: "none",
+      borderRadius: "4px",
+      cursor: "pointer",
+      fontWeight: "bold",
+      marginRight: "16px"
+    }
+  }, "\u2190 Edit Information"), /*#__PURE__*/React.createElement(SubmitBar, {
+    label: isLoading ? "Submitting..." : "Submit Mutation Application",
+    onSubmit: onSubmit,
+    disabled: !agreed || isLoading
+  })));
+};
+
+const Step5_Submission = _ref => {
+  let applicationNumber = _ref.applicationNumber,
+    serviceType = _ref.serviceType,
+    t = _ref.t;
+  const history = useHistory();
+  const _useState = useState(null),
+    showToast = _useState[0],
+    setShowToast = _useState[1];
+  const _useState2 = useState(false);
+  const _Digit$Hooks$ws$useWS = Digit.Hooks.ws.useWSApplicationActions(serviceType);
+  const goHome = () => {
+    history.push("/digit-ui/employee");
+  };
+  const bannerStyle = {
+    backgroundColor: "#fff",
+    border: "1px solid #d4edda",
+    borderTop: "4px solid #28a745",
+    borderRadius: "8px",
+    padding: "20px",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "20px"
+  };
+  const statusPanelStyle = {
+    backgroundColor: "#fff",
+    border: "1px solid #e0e0e0",
+    borderRadius: "8px",
+    padding: "20px"
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "20px 0"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: bannerStyle
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", {
+    style: {
+      color: "#28a745",
+      fontSize: "20px",
+      fontWeight: "bold",
+      margin: 0,
+      display: "flex",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginRight: "8px"
+    }
+  }, "\u2705"), " Application Submitted Successfully!"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: "#666",
+      marginTop: "4px"
+    }
+  }, "Application Reference No: ", /*#__PURE__*/React.createElement("strong", {
+    style: {
+      color: "#00497e"
+    }
+  }, applicationNumber))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+    style: {
+      padding: "6px 12px",
+      backgroundColor: "#fff3cd",
+      color: "#856404",
+      borderRadius: "16px",
+      fontSize: "12px",
+      fontWeight: "bold"
+    }
+  }, "PENDING_APPROVAL_FOR_MUTATION"))), /*#__PURE__*/React.createElement("div", {
+    style: statusPanelStyle
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      color: "#00497e",
+      fontSize: "16px",
+      fontWeight: "bold",
+      margin: "0 0 16px 0",
+      display: "flex",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginRight: "8px"
+    }
+  }, "\uD83D\uDCCC"), " Current Workflow Status"), /*#__PURE__*/React.createElement("hr", {
+    style: {
+      border: "0",
+      borderTop: "1px solid #e0e0e0",
+      margin: "0 0 16px 0"
+    }
+  }), /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: "#333",
+      fontSize: "14px",
+      margin: 0
+    }
+  }, "Application has been routed to ", /*#__PURE__*/React.createElement("strong", null, "Water Supply Department Verification Officer"), ".")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: "24px",
+      textAlign: "center"
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: goHome,
+    style: {
+      padding: "10px 24px",
+      backgroundColor: "#00497e",
+      color: "white",
+      border: "none",
+      borderRadius: "4px",
+      cursor: "pointer",
+      fontWeight: "bold"
+    }
+  }, "Go to Home")), showToast && /*#__PURE__*/React.createElement(Toast, {
+    error: showToast.key === "error",
+    warning: showToast.key === "warning",
+    label: t(showToast.message),
+    onClose: () => setShowToast(null)
+  }));
+};
+
+const MutationApplication = () => {
+  var _state, _details$applicationD, _applicationDetails$a, _applicationDetails$a3, _applicationDetails$a4;
+  const _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  let _useLocation = useLocation(),
+    state = _useLocation.state;
+  state = state ? typeof state === "string" ? JSON.parse(state) : state : {};
+  const history = useHistory();
+  let filters = getQueryStringParams(location.search);
+  const _useState = useState(1),
+    currentStep = _useState[0],
+    setCurrentStep = _useState[1];
+  const _useState2 = useState({}),
+    formData = _useState2[0],
+    setFormData = _useState2[1];
+  const _useState3 = useState(null),
+    showToast = _useState3[0],
+    setShowToast = _useState3[1];
+  const _useState4 = useState(null),
+    generatedAppNo = _useState4[0],
+    setGeneratedAppNo = _useState4[1];
+  const _useState5 = useState(false),
+    isSubmitting = _useState5[0],
+    setIsSubmitting = _useState5[1];
+  const _useState6 = useState(new Set()),
+    setCompletedSteps = _useState6[1];
+  let tenantId = Digit.ULBService.getCurrentTenantId();
+  const applicationNumber = filters === null || filters === void 0 ? void 0 : filters.applicationNumber;
+  const serviceType = filters === null || filters === void 0 ? void 0 : filters.service;
+  let details = cloneDeep_1((_state = state) === null || _state === void 0 ? void 0 : _state.data);
+  let _Digit$Hooks$ws$useWS = Digit.Hooks.ws.useWSDetailsPage(t, tenantId, (details === null || details === void 0 ? void 0 : details.applicationNo) || applicationNumber, (serviceType === null || serviceType === void 0 ? void 0 : serviceType.toUpperCase()) || (details === null || details === void 0 ? void 0 : (_details$applicationD = details.applicationData) === null || _details$applicationD === void 0 ? void 0 : _details$applicationD.serviceType)),
+    isDetailsLoading = _Digit$Hooks$ws$useWS.isLoading,
+    applicationDetails = _Digit$Hooks$ws$useWS.data;
+  const _useState7 = useState(new URLSearchParams(useLocation().search).get("propertyId") || (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a = applicationDetails.applicationData) === null || _applicationDetails$a === void 0 ? void 0 : _applicationDetails$a.propertyId)),
+    propertyId = _useState7[0];
+  const _Digit$Hooks$pt$usePr = Digit.Hooks.pt.usePropertySearch({
+      filters: {
+        propertyIds: propertyId
+      },
+      tenantId: tenantId
+    }, {
+      filters: {
+        propertyIds: propertyId
+      },
+      tenantId: tenantId,
+      enabled: !!propertyId
+    }),
+    propertyDetails = _Digit$Hooks$pt$usePr.data,
+    isPropertyLoading = _Digit$Hooks$pt$usePr.isLoading;
+  const _Digit$Hooks$useSessi = Digit.Hooks.useSessionStorage("PT_CREATE_EMP_WS_NEW_FORM", {}),
+    sessionFormData = _Digit$Hooks$useSessi[0],
+    setSessionFormData = _Digit$Hooks$useSessi[1],
+    clearSessionFormData = _Digit$Hooks$useSessi[2];
+  useEffect(() => {
+    var _applicationDetails$a2;
+    const fetchAppData = function () {
+      try {
+        const dataToConvert = applicationDetails || details;
+        const _temp = function (_dataToConvert$applic) {
+          if (dataToConvert !== null && dataToConvert !== void 0 && (_dataToConvert$applic = dataToConvert.applicationData) !== null && _dataToConvert$applic !== void 0 && _dataToConvert$applic.id) {
+            var _dataToConvert$applic2;
+            return Promise.resolve(convertApplicationData(dataToConvert, (serviceType === null || serviceType === void 0 ? void 0 : serviceType.toUpperCase()) || (dataToConvert === null || dataToConvert === void 0 ? void 0 : (_dataToConvert$applic2 = dataToConvert.applicationData) === null || _dataToConvert$applic2 === void 0 ? void 0 : _dataToConvert$applic2.serviceType), true, undefined, t)).then(function (convertAppData) {
+              setSessionFormData(prev => _extends({}, prev, convertAppData));
+              sessionStorage.setItem("IsDetailsExists", JSON.stringify(true));
+            });
+          }
+        }();
+        return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+    if (applicationDetails !== null && applicationDetails !== void 0 && (_applicationDetails$a2 = applicationDetails.applicationData) !== null && _applicationDetails$a2 !== void 0 && _applicationDetails$a2.id && !(sessionFormData !== null && sessionFormData !== void 0 && sessionFormData.applicationData)) {
+      fetchAppData();
+    }
+  }, [applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a3 = applicationDetails.applicationData) === null || _applicationDetails$a3 === void 0 ? void 0 : _applicationDetails$a3.id]);
   useEffect(() => {
     var _propertyDetails$Prop;
     if (propertyDetails !== null && propertyDetails !== void 0 && (_propertyDetails$Prop = propertyDetails.Properties) !== null && _propertyDetails$Prop !== void 0 && _propertyDetails$Prop[0]) {
@@ -50656,220 +51843,311 @@ const MutationApplication = () => {
       });
     }
   }, [propertyDetails]);
-  useEffect(() => {
-    var _sessionFormData$Conn, _sessionFormData$Conn2;
-    if (sessionFormData !== null && sessionFormData !== void 0 && (_sessionFormData$Conn = sessionFormData.ConnectionDetails) !== null && _sessionFormData$Conn !== void 0 && (_sessionFormData$Conn2 = _sessionFormData$Conn[0]) !== null && _sessionFormData$Conn2 !== void 0 && _sessionFormData$Conn2.applicationNo) {
-      setEnabledLoader(false);
-    }
-  }, [propertyDetails, sessionFormData, sessionFormData === null || sessionFormData === void 0 ? void 0 : sessionFormData.cpt]);
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      var _sessionFormData$Conn3, _sessionFormData$Conn4, _sessionFormData$Conn5, _sessionFormData$Conn6, _sessionFormData$Conn7;
-      if (isAppDetailsPage) window.location.href = window.location.origin + "/digit-ui/employee/ws/application-details?applicationNumber=" + (sessionFormData === null || sessionFormData === void 0 ? void 0 : (_sessionFormData$Conn3 = sessionFormData.ConnectionDetails) === null || _sessionFormData$Conn3 === void 0 ? void 0 : (_sessionFormData$Conn4 = _sessionFormData$Conn3[0]) === null || _sessionFormData$Conn4 === void 0 ? void 0 : _sessionFormData$Conn4.applicationNo) + "&service=" + (sessionFormData === null || sessionFormData === void 0 ? void 0 : (_sessionFormData$Conn5 = sessionFormData.ConnectionDetails) === null || _sessionFormData$Conn5 === void 0 ? void 0 : (_sessionFormData$Conn6 = _sessionFormData$Conn5[0]) === null || _sessionFormData$Conn6 === void 0 ? void 0 : (_sessionFormData$Conn7 = _sessionFormData$Conn6.serviceName) === null || _sessionFormData$Conn7 === void 0 ? void 0 : _sessionFormData$Conn7.toUpperCase());
-    }, 3000);
-    return () => clearTimeout(timer);
-  }, [isAppDetailsPage]);
   const _Digit$Hooks$ws$useWa = Digit.Hooks.ws.useWaterCreateAPI("WATER"),
     waterMutation = _Digit$Hooks$ws$useWa.mutate;
-  const _Digit$Hooks$ws$useWS3 = Digit.Hooks.ws.useWSApplicationActions("WATER");
   const _Digit$Hooks$ws$useWa2 = Digit.Hooks.ws.useWaterCreateAPI("SEWERAGE"),
     sewerageMutation = _Digit$Hooks$ws$useWa2.mutate;
-  const _Digit$Hooks$ws$useWS4 = Digit.Hooks.ws.useWSApplicationActions("SEWERAGE");
-  const onFormValueChange = (setValue, formData, formState) => {
-    var _formData$cpt, _formData$cpt$details;
-    const updatedData = _extends({}, sessionFormData, formData);
-    if (!lodash.isEqual(sessionFormData, updatedData)) {
-      setSessionFormData(updatedData);
-    }
-    if (Object.keys(formState.errors).length > 0 && Object.keys(formState.errors).length == 1 && formState.errors["owners"] && Object.values(formState.errors["owners"].type).filter(ob => ob.type === "required").length == 0 && !(formData !== null && formData !== void 0 && (_formData$cpt = formData.cpt) !== null && _formData$cpt !== void 0 && (_formData$cpt$details = _formData$cpt.details) !== null && _formData$cpt$details !== void 0 && _formData$cpt$details.propertyId)) setSubmitValve(true);else setSubmitValve(!Object.keys(formState.errors).length);
+  const _Digit$Hooks$ws$useWS2 = Digit.Hooks.ws.useWSApplicationActions("WATER"),
+    waterUpdateMutation = _Digit$Hooks$ws$useWS2.mutate;
+  const _Digit$Hooks$ws$useWS3 = Digit.Hooks.ws.useWSApplicationActions("SEWERAGE"),
+    sewerageUpdateMutation = _Digit$Hooks$ws$useWS3.mutate;
+  const handleNextStep2 = data => {
+    setFormData(prev => _extends({}, prev, data));
+    setCompletedSteps(prev => new Set([...prev, 2]));
+    setCurrentStep(3);
   };
-  const onSubmit = function (data) {
+  const handleNextStep3 = data => {
+    setFormData(prev => _extends({}, prev, data));
+    setCompletedSteps(prev => new Set([...prev, 3]));
+    setCurrentStep(4);
+  };
+  const submitApplication = function () {
     try {
-      var _finalData$cpt, _propertyDetails$Prop3;
-      let finalData = _extends({}, sessionFormData, data);
-      if (!(finalData !== null && finalData !== void 0 && (_finalData$cpt = finalData.cpt) !== null && _finalData$cpt !== void 0 && _finalData$cpt.id) && !(propertyDetails !== null && propertyDetails !== void 0 && (_propertyDetails$Prop3 = propertyDetails.Properties) !== null && _propertyDetails$Prop3 !== void 0 && _propertyDetails$Prop3[0])) {
-        var _finalData$cpt2;
-        if (!(finalData !== null && finalData !== void 0 && (_finalData$cpt2 = finalData.cpt) !== null && _finalData$cpt2 !== void 0 && _finalData$cpt2.details) || !propertyDetails) {
-          setShowToast({
-            key: "error",
-            message: "ERR_INVALID_PROPERTY_ID"
-          });
-          return Promise.resolve();
+      setIsSubmitting(true);
+      const _temp2 = _catch(function () {
+        var _finalData$cpt;
+        let finalData = _extends({}, sessionFormData);
+        if (!(finalData !== null && finalData !== void 0 && (_finalData$cpt = finalData.cpt) !== null && _finalData$cpt !== void 0 && _finalData$cpt.details)) {
+          var _propertyDetails$Prop3;
+          finalData.cpt = {
+            details: propertyDetails === null || propertyDetails === void 0 ? void 0 : (_propertyDetails$Prop3 = propertyDetails.Properties) === null || _propertyDetails$Prop3 === void 0 ? void 0 : _propertyDetails$Prop3[0]
+          };
         }
-      }
-      const _temp7 = function () {
-        if (!canSubmit) {
-          setShowToast({
-            warning: true,
-            message: "PLEASE_FILL_MANDATORY_DETAILS"
-          });
-          setTimeout(() => {
-            setShowToast(false);
-          }, 3000);
-        } else {
-          var _finalData$cpt3;
-          if (!(finalData !== null && finalData !== void 0 && (_finalData$cpt3 = finalData.cpt) !== null && _finalData$cpt3 !== void 0 && _finalData$cpt3.details)) {
-            var _propertyDetails$Prop4;
-            finalData.cpt = {
-              details: propertyDetails === null || propertyDetails === void 0 ? void 0 : (_propertyDetails$Prop4 = propertyDetails.Properties) === null || _propertyDetails$Prop4 === void 0 ? void 0 : _propertyDetails$Prop4[0]
-            };
+        finalData.MutationApplicantDetails = {
+          proposedNewConsumerName: formData.proposedNewConsumerName,
+          newOwnerMobileNumber: formData.newOwnerMobileNumber,
+          newOwnerEmailAddress: formData.newOwnerEmailAddress,
+          reasonForNameChange: formData.reasonForNameChange,
+          relationshipWithExistingConsumer: formData.relationshipWithExistingConsumer,
+          saleDeedDocumentId: formData.saleDeedDocumentId,
+          identityProofType: formData.identityProofType,
+          identityProofDocumentId: formData.identityProofDocumentId,
+          documentNumber: formData.documentNumber
+        };
+        if (finalData !== null && finalData !== void 0 && finalData.MutationApplicantDetails) {
+          var _finalData$Connection;
+          const mutDetails = finalData.MutationApplicantDetails;
+          const existingHolder = (finalData === null || finalData === void 0 ? void 0 : (_finalData$Connection = finalData.ConnectionHolderDetails) === null || _finalData$Connection === void 0 ? void 0 : _finalData$Connection[0]) || {};
+          finalData.ConnectionHolderDetails = [_extends({}, existingHolder, {
+            name: mutDetails.proposedNewConsumerName || existingHolder.name,
+            mobileNumber: mutDetails.newOwnerMobileNumber || existingHolder.mobileNumber,
+            emailId: mutDetails.newOwnerEmailAddress || existingHolder.emailId,
+            sameAsOwnerDetails: false
+          })];
+        }
+        const sessionDetails = sessionStorage.getItem("WS_EDIT_APPLICATION_DETAILS") ? JSON.parse(sessionStorage.getItem("WS_EDIT_APPLICATION_DETAILS")) : {};
+        return Promise.resolve(convertModifyApplicationDetails(finalData, sessionDetails, "INITIATE")).then(function (convertAppData) {
+          if (!convertAppData.dateEffectiveFrom) {
+            convertAppData.dateEffectiveFrom = Date.now();
           }
           if (finalData !== null && finalData !== void 0 && finalData.MutationApplicantDetails) {
-            var _finalData$Connection;
+            var _mutDetails$reasonFor;
             const mutDetails = finalData.MutationApplicantDetails;
-            const existingHolder = (finalData === null || finalData === void 0 ? void 0 : (_finalData$Connection = finalData.ConnectionHolderDetails) === null || _finalData$Connection === void 0 ? void 0 : _finalData$Connection[0]) || {};
-            finalData.ConnectionHolderDetails = [_extends({}, existingHolder, {
-              name: mutDetails.proposedNewConsumerName || existingHolder.name,
-              mobileNumber: mutDetails.newOwnerMobileNumber || existingHolder.mobileNumber,
-              emailId: mutDetails.newOwnerEmailAddress || existingHolder.emailId,
-              sameAsOwnerDetails: false
-            })];
-          }
-          const details = sessionStorage.getItem("WS_EDIT_APPLICATION_DETAILS") ? JSON.parse(sessionStorage.getItem("WS_EDIT_APPLICATION_DETAILS")) : {};
-          return Promise.resolve(convertModifyApplicationDetails(finalData, details, "APPLY_MUTATION")).then(function (convertAppData) {
-            function _temp6() {
-              const _temp4 = function () {
-                if (serviceType !== "WATER") {
-                  const _temp3 = function () {
-                    if (sewerageMutation) {
-                      setIsEnableLoader(true);
-                      return Promise.resolve(sewerageMutation(reqDetails, {
-                        onError: (error, variables) => {
-                          var _error$response, _error$response$data, _error$response$data$, _error$response$data$2, _error$response2, _error$response2$data, _error$response2$data2, _error$response2$data3;
-                          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$2 = _error$response$data$[0]) !== null && _error$response$data$2 !== void 0 && _error$response$data$2.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$data3 = _error$response2$data2[0]) === null || _error$response2$data3 === void 0 ? void 0 : _error$response2$data3.message : error
-                          });
-                          setTimeout(closeToastOfError, 5000);
-                        },
-                        onSuccess: function (data, variables) {
-                          try {
-                            var _data$SewerageConnect, _data$SewerageConnect2;
-                            clearSessionFormData();
-                            history.push("/digit-ui/employee/ws/ws-response?applicationNumber1=" + (data === null || data === void 0 ? void 0 : (_data$SewerageConnect = data.SewerageConnections) === null || _data$SewerageConnect === void 0 ? void 0 : (_data$SewerageConnect2 = _data$SewerageConnect[0]) === null || _data$SewerageConnect2 === void 0 ? void 0 : _data$SewerageConnect2.applicationNo));
-                            return Promise.resolve();
-                          } catch (e) {
-                            return Promise.reject(e);
-                          }
-                        }
-                      })).then(function () {});
-                    }
-                  }();
-                  if (_temp3 && _temp3.then) return _temp3.then(function () {});
-                }
-              }();
-              if (_temp4 && _temp4.then) return _temp4.then(function () {});
+            if (!convertAppData.additionalDetails) convertAppData.additionalDetails = {};
+            if (mutDetails.reasonForNameChange) convertAppData.additionalDetails.reasonForNameChange = ((_mutDetails$reasonFor = mutDetails.reasonForNameChange) === null || _mutDetails$reasonFor === void 0 ? void 0 : _mutDetails$reasonFor.code) || mutDetails.reasonForNameChange;
+            if (mutDetails.relationshipWithExistingConsumer) {
+              var _mutDetails$relations;
+              const relationCode = ((_mutDetails$relations = mutDetails.relationshipWithExistingConsumer) === null || _mutDetails$relations === void 0 ? void 0 : _mutDetails$relations.code) || mutDetails.relationshipWithExistingConsumer;
+              convertAppData.additionalDetails.relationshipWithExistingConsumer = relationCode;
+              convertAppData.additionalDetails.isBloodRelation = relationCode !== "OTHER";
             }
-            if (finalData !== null && finalData !== void 0 && finalData.MutationApplicantDetails) {
-              var _mutDetails$reasonFor;
-              const mutDetails = finalData.MutationApplicantDetails;
-              if (!convertAppData.additionalDetails) convertAppData.additionalDetails = {};
-              if (mutDetails.reasonForNameChange) convertAppData.additionalDetails.reasonForNameChange = ((_mutDetails$reasonFor = mutDetails.reasonForNameChange) === null || _mutDetails$reasonFor === void 0 ? void 0 : _mutDetails$reasonFor.code) || mutDetails.reasonForNameChange;
-              if (mutDetails.relationshipWithExistingConsumer) {
-                var _mutDetails$relations;
-                const relationCode = ((_mutDetails$relations = mutDetails.relationshipWithExistingConsumer) === null || _mutDetails$relations === void 0 ? void 0 : _mutDetails$relations.code) || mutDetails.relationshipWithExistingConsumer;
-                convertAppData.additionalDetails.relationshipWithExistingConsumer = relationCode;
-                convertAppData.additionalDetails.isBloodRelation = relationCode !== "OTHER";
-              }
-              if (mutDetails.saleDeedDocumentId) {
-                convertAppData.additionalDetails.saleDeedDocumentId = mutDetails.saleDeedDocumentId;
-                if (!convertAppData.documents) convertAppData.documents = [];
-                convertAppData.documents.push({
-                  documentType: "REGISTERED_SALE_DEED",
-                  fileStoreId: mutDetails.saleDeedDocumentId,
-                  documentUid: mutDetails.saleDeedDocumentId
+            if (mutDetails.saleDeedDocumentId) {
+              convertAppData.additionalDetails.saleDeedDocumentId = mutDetails.saleDeedDocumentId;
+              if (!convertAppData.documents) convertAppData.documents = [];
+              convertAppData.documents.push({
+                documentType: "REGISTERED_SALE_DEED",
+                fileStoreId: mutDetails.saleDeedDocumentId,
+                documentUid: mutDetails.saleDeedDocumentId,
+                status: "ACTIVE"
+              });
+            }
+            if (mutDetails.identityProofDocumentId) {
+              var _mutDetails$identityP;
+              if (!convertAppData.documents) convertAppData.documents = [];
+              convertAppData.documents.push({
+                documentType: ((_mutDetails$identityP = mutDetails.identityProofType) === null || _mutDetails$identityP === void 0 ? void 0 : _mutDetails$identityP.code) || "IDENTITY_PROOF",
+                fileStoreId: mutDetails.identityProofDocumentId,
+                documentUid: mutDetails.documentNumber || mutDetails.identityProofDocumentId,
+                documentNumber: mutDetails.documentNumber,
+                status: "ACTIVE"
+              });
+            }
+          }
+          convertAppData.applicationType = serviceType == "WATER" ? "MUTATION_WATER_CONNECTION" : "MUTATION_SEWERAGE_CONNECTION";
+          const reqDetails = serviceType == "WATER" ? {
+            WaterConnection: convertAppData,
+            reconnectRequest: false,
+            disconnectRequest: false
+          } : {
+            SewerageConnection: convertAppData,
+            reconnectRequest: false,
+            disconnectRequest: false
+          };
+          const mutation = serviceType == "WATER" ? waterMutation : sewerageMutation;
+          return Promise.resolve(mutation(reqDetails, {
+            onError: error => {
+              var _error$response, _error$response$data, _error$response$data$, _error$response$data$2;
+              setIsSubmitting(false);
+              setShowToast({
+                key: "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$2 = _error$response$data$[0]) === null || _error$response$data$2 === void 0 ? void 0 : _error$response$data$2.message) || "Failed to submit application"
+              });
+            },
+            onSuccess: data => {
+              var _data$response, _data$response$data;
+              if (data instanceof Error || data !== null && data !== void 0 && data.isAxiosError || data !== null && data !== void 0 && (_data$response = data.response) !== null && _data$response !== void 0 && (_data$response$data = _data$response.data) !== null && _data$response$data !== void 0 && _data$response$data.Errors) {
+                var _data$response2, _data$response2$data, _apiErrors$;
+                setIsSubmitting(false);
+                const apiErrors = data === null || data === void 0 ? void 0 : (_data$response2 = data.response) === null || _data$response2 === void 0 ? void 0 : (_data$response2$data = _data$response2.data) === null || _data$response2$data === void 0 ? void 0 : _data$response2$data.Errors;
+                const errorMessage = (apiErrors === null || apiErrors === void 0 ? void 0 : (_apiErrors$ = apiErrors[0]) === null || _apiErrors$ === void 0 ? void 0 : _apiErrors$.message) || (data === null || data === void 0 ? void 0 : data.message) || "Failed to submit application";
+                setShowToast({
+                  key: "error",
+                  message: errorMessage
                 });
+                return;
               }
-            }
-            convertAppData.applicationType = serviceType == "WATER" ? "MUTATION_WATER_CONNECTION" : "MUTATION_SEWERAGE_CONNECTION";
-            const reqDetails = serviceType == "WATER" ? {
-              WaterConnection: convertAppData,
-              reconnectRequest: false,
-              disconnectRequest: false
-            } : {
-              SewerageConnection: convertAppData,
-              reconnectRequest: false,
-              disconnectRequest: false
-            };
-            const _temp5 = function () {
-              if (serviceType == "WATER") {
-                const _temp2 = function () {
-                  if (waterMutation) {
-                    setIsEnableLoader(true);
-                    return Promise.resolve(waterMutation(reqDetails, {
-                      onError: (error, variables) => {
-                        var _error$response3, _error$response3$data, _error$response3$data2, _error$response4, _error$response4$data, _error$response4$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
-                        });
-                        setTimeout(closeToastOfError, 5000);
-                      },
-                      onSuccess: function (data, variables) {
-                        try {
-                          var _data$WaterConnection, _data$WaterConnection2;
-                          clearSessionFormData();
-                          history.push("/digit-ui/employee/ws/ws-response?applicationNumber=" + (data === null || data === void 0 ? void 0 : (_data$WaterConnection = data.WaterConnection) === null || _data$WaterConnection === void 0 ? void 0 : (_data$WaterConnection2 = _data$WaterConnection[0]) === null || _data$WaterConnection2 === void 0 ? void 0 : _data$WaterConnection2.applicationNo));
-                          return Promise.resolve();
-                        } catch (e) {
-                          return Promise.reject(e);
-                        }
-                      }
-                    })).then(function () {});
+              if (data !== null && data !== void 0 && data.Errors && data.Errors.length > 0) {
+                setIsSubmitting(false);
+                setShowToast({
+                  key: "error",
+                  message: data.Errors[0].message || "Failed to submit application"
+                });
+              } else {
+                var _data$WaterConnection, _data$SewerageConnect, _Digit, _Digit$Customizations, _Digit$Customizations2;
+                const updateMutation = serviceType == "WATER" ? waterUpdateMutation : sewerageUpdateMutation;
+                const createdConnection = serviceType == "WATER" ? data === null || data === void 0 ? void 0 : (_data$WaterConnection = data.WaterConnection) === null || _data$WaterConnection === void 0 ? void 0 : _data$WaterConnection[0] : data === null || data === void 0 ? void 0 : (_data$SewerageConnect = data.SewerageConnections) === null || _data$SewerageConnect === void 0 ? void 0 : _data$SewerageConnect[0];
+                let updatePayload = _extends({}, createdConnection, {
+                  dateEffectiveFrom: (createdConnection === null || createdConnection === void 0 ? void 0 : createdConnection.dateEffectiveFrom) || Date.now(),
+                  processInstance: _extends({}, createdConnection === null || createdConnection === void 0 ? void 0 : createdConnection.processInstance, {
+                    action: "APPLY_MUTATION"
+                  })
+                });
+                if ((_Digit = Digit) !== null && _Digit !== void 0 && (_Digit$Customizations = _Digit.Customizations) !== null && _Digit$Customizations !== void 0 && (_Digit$Customizations2 = _Digit$Customizations.WS) !== null && _Digit$Customizations2 !== void 0 && _Digit$Customizations2.customiseUpdatePayloadOfWS) {
+                  updatePayload = Digit.Customizations.WS.customiseUpdatePayloadOfWS(createdConnection, updatePayload, serviceType);
+                }
+                let reqDetailsUpdate = serviceType == "WATER" ? {
+                  WaterConnection: updatePayload,
+                  reconnectRequest: false,
+                  disconnectRequest: false
+                } : {
+                  SewerageConnection: updatePayload,
+                  reconnectRequest: false,
+                  disconnectRequest: false
+                };
+                updateMutation(reqDetailsUpdate, {
+                  onError: error => {
+                    var _error$response2, _error$response2$data, _error$response2$data2, _error$response2$data3;
+                    setIsSubmitting(false);
+                    setShowToast({
+                      key: "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$data3 = _error$response2$data2[0]) === null || _error$response2$data3 === void 0 ? void 0 : _error$response2$data3.message) || "Failed to update workflow"
+                    });
+                  },
+                  onSuccess: updateData => {
+                    var _updateData$response, _updateData$response$, _updateData$WaterConn, _updateData$WaterConn2, _updateData$SewerageC, _updateData$SewerageC2;
+                    setIsSubmitting(false);
+                    if (updateData instanceof Error || updateData !== null && updateData !== void 0 && updateData.isAxiosError || updateData !== null && updateData !== void 0 && (_updateData$response = updateData.response) !== null && _updateData$response !== void 0 && (_updateData$response$ = _updateData$response.data) !== null && _updateData$response$ !== void 0 && _updateData$response$.Errors) {
+                      var _updateData$response2, _updateData$response3, _apiErrors$2;
+                      const apiErrors = updateData === null || updateData === void 0 ? void 0 : (_updateData$response2 = updateData.response) === null || _updateData$response2 === void 0 ? void 0 : (_updateData$response3 = _updateData$response2.data) === null || _updateData$response3 === void 0 ? void 0 : _updateData$response3.Errors;
+                      const errorMessage = (apiErrors === null || apiErrors === void 0 ? void 0 : (_apiErrors$2 = apiErrors[0]) === null || _apiErrors$2 === void 0 ? void 0 : _apiErrors$2.message) || (updateData === null || updateData === void 0 ? void 0 : updateData.message) || "Failed to update workflow";
+                      setShowToast({
+                        key: "error",
+                        message: errorMessage
+                      });
+                      return;
+                    }
+                    if (updateData !== null && updateData !== void 0 && updateData.Errors && updateData.Errors.length > 0) {
+                      setShowToast({
+                        key: "error",
+                        message: updateData.Errors[0].message || "Failed to update workflow"
+                      });
+                      return;
+                    }
+                    clearSessionFormData();
+                    const newAppNo = serviceType == "WATER" ? updateData === null || updateData === void 0 ? void 0 : (_updateData$WaterConn = updateData.WaterConnection) === null || _updateData$WaterConn === void 0 ? void 0 : (_updateData$WaterConn2 = _updateData$WaterConn[0]) === null || _updateData$WaterConn2 === void 0 ? void 0 : _updateData$WaterConn2.applicationNo : updateData === null || updateData === void 0 ? void 0 : (_updateData$SewerageC = updateData.SewerageConnections) === null || _updateData$SewerageC === void 0 ? void 0 : (_updateData$SewerageC2 = _updateData$SewerageC[0]) === null || _updateData$SewerageC2 === void 0 ? void 0 : _updateData$SewerageC2.applicationNo;
+                    setGeneratedAppNo(newAppNo);
+                    setCurrentStep(5);
                   }
-                }();
-                if (_temp2 && _temp2.then) return _temp2.then(function () {});
+                });
               }
-            }();
-            return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5);
-          });
-        }
-      }();
-      return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(function () {}) : void 0);
+            }
+          })).then(function () {});
+        });
+      }, function (e) {
+        console.error(e);
+        setIsSubmitting(false);
+        setShowToast({
+          key: "error",
+          message: "Failed to submit application"
+        });
+      });
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  const closeToastOfError = () => {
-    setShowToast(null);
-  };
-  const closeToast = () => {
-    setShowToast(null);
+  const handleTimelineSelect = (route, index) => {
+    const targetStep = index + 1;
+    if (targetStep < currentStep) {
+      setCurrentStep(targetStep);
+      return;
+    }
+    if (targetStep === currentStep) return;
+    if (targetStep > currentStep) {
+      setShowToast({
+        key: "warning",
+        message: "Please complete Step " + currentStep + " before proceeding to Step " + targetStep + "."
+      });
+    }
   };
-  if (enabledLoader || isEnableLoader || isConfigLoading) {
+  const timelineConfig = [{
+    sectionId: "application",
+    route: "application-selection",
+    actions: "Existing Connection"
+  }, {
+    sectionId: "applicant",
+    route: "applicant-details",
+    actions: "New Consumer Details"
+  }, {
+    sectionId: "documents",
+    route: "documents",
+    actions: "Documents"
+  }, {
+    sectionId: "Review",
+    route: "review",
+    actions: "Preview"
+  }].map((step, index) => _extends({}, step, {
+    timeLine: [{
+      actions: step.actions,
+      currentStep: index + 1
+    }]
+  }));
+  if (isDetailsLoading || propertyId && isPropertyLoading) {
     return /*#__PURE__*/React.createElement(Loader, null);
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, "\n        .mutation-disabled-section { pointer-events: none; opacity: 0.8; margin-top: -24px !important; }\n        .mutation-hidden-section { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; overflow: hidden !important; border: 0 !important; }\n        .mutation-hidden-section + hr { display: none !important; margin: 0 !important; }\n        .mutation-hidden-section + .break-line { display: none !important; margin: 0 !important; }\n      "), /*#__PURE__*/React.createElement(Header, null, t(config.head)), /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardSubHeader, null, t("WS_MUTATION_DETAILS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
-    label: t("WS_MYCONNECTIONS_APPLICATION_NO"),
-    text: (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a = applicationDetails.applicationData) === null || _applicationDetails$a === void 0 ? void 0 : _applicationDetails$a.applicationNo) || "NA"
-  }), /*#__PURE__*/React.createElement(Row, {
-    label: t("WS_CONNECTION_CATEGORY"),
-    text: (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a2 = applicationDetails.applicationData) === null || _applicationDetails$a2 === void 0 ? void 0 : _applicationDetails$a2.connectionCategory) || "NA"
-  }), /*#__PURE__*/React.createElement(Row, {
-    label: t("WS_PROPERTY_ID_LABEL"),
-    text: (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a3 = applicationDetails.applicationData) === null || _applicationDetails$a3 === void 0 ? void 0 : _applicationDetails$a3.propertyId) || propertyId || "NA"
-  }), /*#__PURE__*/React.createElement(Row, {
-    label: t("WS_APPLICATION_ID"),
-    text: (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a4 = applicationDetails.applicationData) === null || _applicationDetails$a4 === void 0 ? void 0 : _applicationDetails$a4.id) || (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a5 = applicationDetails.applicationData) === null || _applicationDetails$a5 === void 0 ? void 0 : _applicationDetails$a5.connectionNo) || "NA"
-  }), /*#__PURE__*/React.createElement(Row, {
-    label: t("WS_CONNECTION_DATE"),
-    text: applicationDetails !== null && applicationDetails !== void 0 && (_applicationDetails$a6 = applicationDetails.applicationData) !== null && _applicationDetails$a6 !== void 0 && _applicationDetails$a6.connectionExecutionDate ? Digit.DateUtils.ConvertEpochToDate(applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a7 = applicationDetails.applicationData) === null || _applicationDetails$a7 === void 0 ? void 0 : _applicationDetails$a7.connectionExecutionDate) : "NA"
-  }))), /*#__PURE__*/React.createElement(FormComposer, {
-    config: config.body,
-    userType: "employee",
-    onFormValueChange: onFormValueChange,
-    label: t("CS_COMMON_SUBMIT"),
-    onSubmit: onSubmit,
-    defaultValues: sessionFormData,
-    appData: appData
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "employee-form-section-wrapper"
+  }, currentStep !== 5 && /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: timelineConfig,
+    currentActiveIndex: currentStep - 1,
+    showFinalStep: false,
+    onSelect: handleTimelineSelect
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "1",
+      minWidth: 0
+    }
+  }, currentStep === 1 && /*#__PURE__*/React.createElement(Fragment$2, null, /*#__PURE__*/React.createElement(Step1_ExistingConnection, {
+    t: t,
+    applicationDetails: applicationDetails,
+    propertyId: propertyId
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "flex-end"
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: () => {
+      setCompletedSteps(prev => new Set([...prev, 1]));
+      setCurrentStep(2);
+    },
+    style: {
+      padding: "10px 24px",
+      backgroundColor: "#00497e",
+      color: "white",
+      border: "none",
+      borderRadius: "4px",
+      cursor: "pointer",
+      fontWeight: "bold"
+    }
+  }, "Proceed to New Consumer Details \u2192"))), currentStep === 2 && /*#__PURE__*/React.createElement(Step2_NewConsumerDetails, {
+    t: t,
+    defaultValues: formData,
+    onNext: handleNextStep2,
+    onBack: () => setCurrentStep(1)
+  }), currentStep === 3 && /*#__PURE__*/React.createElement(Step3_UploadDocuments, {
+    t: t,
+    defaultValues: formData,
+    onNext: handleNextStep3,
+    onBack: () => setCurrentStep(2)
+  }), currentStep === 4 && /*#__PURE__*/React.createElement(Step4_Preview, {
+    t: t,
+    formData: formData,
+    applicationDetails: applicationDetails,
+    onBack: () => setCurrentStep(3),
+    onSubmit: submitApplication,
+    isLoading: isSubmitting
+  }), currentStep === 5 && /*#__PURE__*/React.createElement(Step5_Submission, {
+    t: t,
+    applicationNumber: generatedAppNo,
+    serviceType: serviceType || (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a4 = applicationDetails.applicationData) === null || _applicationDetails$a4 === void 0 ? void 0 : _applicationDetails$a4.serviceType)
   }), showToast && /*#__PURE__*/React.createElement(Toast, {
-    isDleteBtn: true,
-    error: (showToast === null || showToast === void 0 ? void 0 : showToast.key) === "error" ? true : false,
+    error: (showToast === null || showToast === void 0 ? void 0 : showToast.key) === "error",
+    warning: (showToast === null || showToast === void 0 ? void 0 : showToast.key) === "warning",
     label: t(showToast === null || showToast === void 0 ? void 0 : showToast.message),
-    onClose: closeToast
-  }));
+    onClose: () => setShowToast(null),
+    isDleteBtn: true
+  }))));
 };
 
 const getPath$5 = (path, params) => {