@mseva/upyog-ui-module-chb 1.1.61 → 1.1.62

package/dist/index.modern.js

@@ -1,5 +1,5 @@
-import { TickMark, CardSubHeader, Modal as Modal$1, CardLabelDesc, CardLabel, CardText, Card, FormStep, Dropdown, TextArea, Loader as Loader$1, TextInput, MobileNumber, Toast, LabelFieldPair, UploadFile, Table, KeyNote, SubmitBar, CardHeader, InfoIcon, Calender, TelePhone, DisplayPhotos as DisplayPhotos$1, CardSectionHeader, CheckPoint, ConnectingCheckPoints, AppContainer, BackButton, PrivateRoute, PDFSvg as PDFSvg$2, StatusTable, Row, CheckBox, LinkButton, Banner, Header, MultiLink, SearchField, FilterFormField, RadioButtons, ComplaintIcon, InboxComposer, SearchForm, CardLabelError, DatePicker, EmployeeModuleCard, CloseSvg, Localities, RemoveableTag, FormComposer, ActionBar, Menu, OTPInput, Rating, CitizenHomeCard } from '@mseva/digit-ui-react-components';
-import React, { useState, useEffect, useRef, Fragment as Fragment$1, useMemo, useReducer, useCallback } from 'react';
+import { TickMark, CardSubHeader, Modal as Modal$1, CardLabelDesc, CardLabel, CardText, Card, FormStep, Dropdown, TextArea, Loader as Loader$1, TextInput, MobileNumber, Toast, LabelFieldPair, UploadFile, Table, KeyNote, SubmitBar, CardHeader, InfoIcon, Calender, CheckPoint, ConnectingCheckPoints, AppContainer, BackButton, PrivateRoute, PDFSvg as PDFSvg$2, StatusTable, Row, CardSectionHeader, CheckBox, LinkButton, Banner, Header, MultiLink, TelePhone, DisplayPhotos, SearchField, FilterFormField, RadioButtons, ComplaintIcon, InboxComposer, SearchForm, CardLabelError, DatePicker, EmployeeModuleCard, CloseSvg, Localities, RemoveableTag, FormComposer, ActionBar, Menu, OTPInput, Rating, CitizenHomeCard } from '@mseva/digit-ui-react-components';
+import React, { useState, useEffect, useRef, useMemo, useCallback, Fragment as Fragment$1, useReducer } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useRouteMatch, useHistory, Switch, Route, Redirect, Link, useParams } from 'react-router-dom';
 import { useForm, Controller, useFormContext } from 'react-hook-form';
@@ -542,10 +542,6 @@ function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
 }
 
-function getCjsExportFromNamespace (n) {
-	return n && n['default'] || n;
-}
-
 var jquery = createCommonjsModule(function (module) {
   (function (global, factory) {
 
@@ -14391,8 +14387,6 @@ var accessibility = createCommonjsModule(function (module, exports) {
 });
 unwrapExports(accessibility);
 
-var _shallowEqual = getCjsExportFromNamespace(index_esm);
-
 var Calendar_1 = createCommonjsModule(function (module, exports) {
 
   function _typeof(obj) {
@@ -15047,7 +15041,7 @@ var Calendar_1 = createCommonjsModule(function (module, exports) {
             monthNames: this.getMonthNames()
           });
         }
-        if (!(0, _shallowEqual.shallowEqualObjects)(prevProps.scroll, this.props.scroll)) {
+        if (!(0, index_esm.shallowEqualObjects)(prevProps.scroll, this.props.scroll)) {
           this.setState({
             scrollArea: this.calcScrollArea(this.props)
           });
@@ -17661,44 +17655,267 @@ const CommunityHallSearch = ({
   }));
 };
 
-const CHBWFReason = ({
-  headComment,
-  otherComment
-}) => /*#__PURE__*/React.createElement("div", {
-  className: "checkpoint-comments-wrap"
-}, /*#__PURE__*/React.createElement("h4", null, headComment), /*#__PURE__*/React.createElement("p", null, otherComment));
+const getTimelineAcknowledgementData = (workflowDetails, tenantInfo, t) => {
+  var _workflowDetails$data, _workflowDetails$data2, _processInstances$, _processInstances$2, _processInstances$3, _timeline$, _timeline$2, _timeline$3, _timeline$4;
+  const timeline = (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data = workflowDetails.data) === null || _workflowDetails$data === void 0 ? void 0 : _workflowDetails$data.timeline) || (workflowDetails === null || workflowDetails === void 0 ? void 0 : workflowDetails.timeline) || [];
+  const processInstances = (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data2 = workflowDetails.data) === null || _workflowDetails$data2 === void 0 ? void 0 : _workflowDetails$data2.processInstances) || (workflowDetails === null || workflowDetails === void 0 ? void 0 : workflowDetails.processInstances) || [];
+  const businessId = (processInstances === null || processInstances === void 0 ? void 0 : (_processInstances$ = processInstances[0]) === null || _processInstances$ === void 0 ? void 0 : _processInstances$.businessId) || "N/A";
+  const businessService = (processInstances === null || processInstances === void 0 ? void 0 : (_processInstances$2 = processInstances[0]) === null || _processInstances$2 === void 0 ? void 0 : _processInstances$2.businessService) || "N/A";
+  const moduleName = (processInstances === null || processInstances === void 0 ? void 0 : (_processInstances$3 = processInstances[0]) === null || _processInstances$3 === void 0 ? void 0 : _processInstances$3.moduleName) || "N/A";
+  const timelineRows = timeline.map((item, index) => {
+    var _item$auditDetails, _item$auditDetails2, _item$assigner, _item$assigner2, _item$assigner3, _item$wfComment;
+    const createdDate = (item === null || item === void 0 ? void 0 : (_item$auditDetails = item.auditDetails) === null || _item$auditDetails === void 0 ? void 0 : _item$auditDetails.created) || "N/A";
+    const timing = (item === null || item === void 0 ? void 0 : (_item$auditDetails2 = item.auditDetails) === null || _item$auditDetails2 === void 0 ? void 0 : _item$auditDetails2.timing) || "N/A";
+    const assignerName = (item === null || item === void 0 ? void 0 : (_item$assigner = item.assigner) === null || _item$assigner === void 0 ? void 0 : _item$assigner.name) || "N/A";
+    const assignerType = (item === null || item === void 0 ? void 0 : (_item$assigner2 = item.assigner) === null || _item$assigner2 === void 0 ? void 0 : _item$assigner2.type) || "N/A";
+    const mobileNumber = (item === null || item === void 0 ? void 0 : (_item$assigner3 = item.assigner) === null || _item$assigner3 === void 0 ? void 0 : _item$assigner3.mobileNumber) || "N/A";
+    const action = (item === null || item === void 0 ? void 0 : item.performedAction) || "N/A";
+    const status = (item === null || item === void 0 ? void 0 : item.status) || (item === null || item === void 0 ? void 0 : item.state) || "N/A";
+    const comment = (item === null || item === void 0 ? void 0 : (_item$wfComment = item.wfComment) === null || _item$wfComment === void 0 ? void 0 : _item$wfComment[0]) || "-";
+    const documents = (item === null || item === void 0 ? void 0 : item.wfDocuments) || [];
+    return {
+      sNo: index + 1,
+      action: t ? t(action) : action,
+      status: t ? t(status) : status,
+      assignerName,
+      assignerType,
+      mobileNumber,
+      designation: assignerType,
+      date: createdDate,
+      time: timing,
+      dateTime: `${createdDate} ${timing !== "N/A" ? timing : ""}`.trim(),
+      comment,
+      documents: documents.map(doc => ({
+        name: (doc === null || doc === void 0 ? void 0 : doc.fileName) || (doc === null || doc === void 0 ? void 0 : doc.documentType) || "Document",
+        type: (doc === null || doc === void 0 ? void 0 : doc.documentType) || "Document",
+        fileStoreId: doc === null || doc === void 0 ? void 0 : doc.fileStoreId
+      })),
+      hasDocuments: documents.length > 0
+    };
+  });
+  return {
+    t,
+    tenantId: (tenantInfo === null || tenantInfo === void 0 ? void 0 : tenantInfo.code) || "",
+    tenantName: (tenantInfo === null || tenantInfo === void 0 ? void 0 : tenantInfo.name) || (tenantInfo === null || tenantInfo === void 0 ? void 0 : tenantInfo.i18nKey) || "Government Department",
+    name: t ? t("TIMELINE_PDF_TITLE") : "Application Timeline",
+    heading: t ? t("TIMELINE_PDF_HEADING") : "File Movement Report",
+    businessId,
+    businessService: t ? t(`CS_COMMON_${businessService === null || businessService === void 0 ? void 0 : businessService.toUpperCase()}`) : businessService,
+    moduleName,
+    currentStatus: t ? t((timeline === null || timeline === void 0 ? void 0 : (_timeline$ = timeline[0]) === null || _timeline$ === void 0 ? void 0 : _timeline$.status) || (timeline === null || timeline === void 0 ? void 0 : (_timeline$2 = timeline[0]) === null || _timeline$2 === void 0 ? void 0 : _timeline$2.state) || "N/A") : (timeline === null || timeline === void 0 ? void 0 : (_timeline$3 = timeline[0]) === null || _timeline$3 === void 0 ? void 0 : _timeline$3.status) || (timeline === null || timeline === void 0 ? void 0 : (_timeline$4 = timeline[0]) === null || _timeline$4 === void 0 ? void 0 : _timeline$4.state) || "N/A",
+    generatedDate: new Date().toLocaleDateString("en-IN", {
+      day: "2-digit",
+      month: "long",
+      year: "numeric"
+    }),
+    generatedDateTime: new Date().toLocaleString("en-IN", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: true
+    }),
+    timelineRows,
+    totalSteps: timelineRows.length
+  };
+};
 
-const CHBWFCaption = ({
-  data,
-  OpenImage
+const parseDate = dateStr => {
+  if (!dateStr || dateStr === "N/A") return null;
+  if (typeof dateStr === "string" && dateStr !== null && dateStr !== void 0 && dateStr.includes("/")) {
+    const [day, month, year] = dateStr === null || dateStr === void 0 ? void 0 : dateStr.split("/");
+    return new Date(year, month - 1, day);
+  }
+  return new Date(dateStr);
+};
+const calculateDays = (start, end) => {
+  if (!start || !end) return "N/A";
+  const startDate = parseDate(start);
+  const endDate = parseDate(end);
+  if (!startDate || !endDate || isNaN(startDate === null || startDate === void 0 ? void 0 : startDate.getTime()) || isNaN(endDate === null || endDate === void 0 ? void 0 : endDate.getTime())) {
+    return "N/A";
+  }
+  const diffDays = Math.floor((endDate - startDate) / 86400000);
+  return diffDays < 0 ? "N/A" : diffDays === 0 ? "0 Days" : `${diffDays} Days`;
+};
+const PDFSvg = React.memo(({
+  width: _width = 85,
+  height: _height = 100,
+  style
+}) => /*#__PURE__*/React.createElement("svg", {
+  style: style,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: _width,
+  height: _height,
+  viewBox: "0 0 20 20",
+  fill: "gray"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v1zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm10 5.5h1v-3h-1v3z"
+})));
+const pdfDownloadLink = (documents, fileStoreId) => {
+  var _downloadLink$split;
+  const downloadLink = (documents === null || documents === void 0 ? void 0 : documents[fileStoreId]) || "";
+  const formats = (downloadLink === null || downloadLink === void 0 ? void 0 : (_downloadLink$split = downloadLink.split(",")) === null || _downloadLink$split === void 0 ? void 0 : _downloadLink$split.filter(Boolean)) || [];
+  return (formats === null || formats === void 0 ? void 0 : formats.find(link => !(link !== null && link !== void 0 && link.includes("large")) && !(link !== null && link !== void 0 && link.includes("medium")) && !(link !== null && link !== void 0 && link.includes("small")))) || (formats === null || formats === void 0 ? void 0 : formats[0]) || "";
+};
+const TimelineDocument = React.memo(({
+  value,
+  Code,
+  index
 }) => {
-  var _data$wfComment, _data$thumbnailsToSho, _data$thumbnailsToSho2;
   const {
-    t
-  } = useTranslation();
-  return /*#__PURE__*/React.createElement("div", null, data.date && /*#__PURE__*/React.createElement("p", null, data.date), /*#__PURE__*/React.createElement("p", null, data.name), data.mobileNumber && /*#__PURE__*/React.createElement(TelePhone, {
-    mobile: data.mobileNumber
-  }), data.source && /*#__PURE__*/React.createElement("p", null, t("ES_APPLICATION_DETAILS_APPLICATION_CHANNEL_" + data.source.toUpperCase())), data.comment && /*#__PURE__*/React.createElement(Reason, {
-    otherComment: data === null || data === void 0 ? void 0 : data.otherComment,
-    headComment: data === null || data === void 0 ? void 0 : data.comment
-  }), data !== null && data !== void 0 && data.wfComment ? /*#__PURE__*/React.createElement("div", null, data === null || data === void 0 ? void 0 : (_data$wfComment = data.wfComment) === null || _data$wfComment === void 0 ? void 0 : _data$wfComment.map(e => /*#__PURE__*/React.createElement("div", {
-    className: "TLComments"
-  }, /*#__PURE__*/React.createElement("h3", null, t("WF_COMMON_COMMENTS")), /*#__PURE__*/React.createElement("p", {
-    style: {
-      overflowX: "scroll"
-    }
-  }, e)))) : null, (data === null || data === void 0 ? void 0 : (_data$thumbnailsToSho = data.thumbnailsToShow) === null || _data$thumbnailsToSho === void 0 ? void 0 : (_data$thumbnailsToSho2 = _data$thumbnailsToSho.thumbs) === null || _data$thumbnailsToSho2 === void 0 ? void 0 : _data$thumbnailsToSho2.length) > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: "TLComments"
-  }, /*#__PURE__*/React.createElement("h3", null, t("CS_COMMON_ATTACHMENTS")), /*#__PURE__*/React.createElement(DisplayPhotos$1, {
-    srcs: data === null || data === void 0 ? void 0 : data.thumbnailsToShow.thumbs,
-    onClick: (src, index) => {
-      OpenImage(src, index, data === null || data === void 0 ? void 0 : data.thumbnailsToShow);
-    }
-  })) : null);
+    isLoading,
+    data
+  } = Digit.Hooks.ads.useADSDocumentSearch({
+    value
+  }, {
+    value
+  }, Code, index);
+  const documents = useMemo(() => {
+    var _value$documents;
+    const docs = value !== null && value !== void 0 && value.documents ? value === null || value === void 0 ? void 0 : (_value$documents = value.documents) === null || _value$documents === void 0 ? void 0 : _value$documents.documents : value;
+    return (docs === null || docs === void 0 ? void 0 : docs.filter(doc => (doc === null || doc === void 0 ? void 0 : doc.documentType) === Code)) || [];
+  }, [value, Code]);
+  if (isLoading) return /*#__PURE__*/React.createElement(Loader$1, null);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "timeline-docs-wrapper"
+  }, documents === null || documents === void 0 ? void 0 : documents.map((document, idx) => {
+    const documentLink = pdfDownloadLink(data === null || data === void 0 ? void 0 : data.pdfFiles, document === null || document === void 0 ? void 0 : document.fileStoreId);
+    if (!documentLink) return null;
+    return /*#__PURE__*/React.createElement("a", {
+      key: idx,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      href: documentLink,
+      className: "timeline-doc-link"
+    }, /*#__PURE__*/React.createElement(PDFSvg, {
+      className: "timeline-doc-icon"
+    }));
+  }));
+});
+const normalizeTimeline = workflowDetails => {
+  var _workflowDetails$data;
+  const rawTimeline = workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data = workflowDetails.data) === null || _workflowDetails$data === void 0 ? void 0 : _workflowDetails$data.timeline;
+  if (!rawTimeline || !Array.isArray(rawTimeline)) return [];
+  return rawTimeline === null || rawTimeline === void 0 ? void 0 : rawTimeline.map((item, index) => {
+    var _item$auditDetails, _item$auditDetails2, _item$assigner, _item$wfComment;
+    const createdDate = (item === null || item === void 0 ? void 0 : (_item$auditDetails = item.auditDetails) === null || _item$auditDetails === void 0 ? void 0 : _item$auditDetails.created) || "N/A";
+    const lastModified = (item === null || item === void 0 ? void 0 : (_item$auditDetails2 = item.auditDetails) === null || _item$auditDetails2 === void 0 ? void 0 : _item$auditDetails2.lastModified) || "N/A";
+    return {
+      id: index,
+      state: item === null || item === void 0 ? void 0 : item.state,
+      assignerName: (item === null || item === void 0 ? void 0 : (_item$assigner = item.assigner) === null || _item$assigner === void 0 ? void 0 : _item$assigner.name) || "N/A",
+      performedAction: item === null || item === void 0 ? void 0 : item.performedAction,
+      comment: (item === null || item === void 0 ? void 0 : (_item$wfComment = item.wfComment) === null || _item$wfComment === void 0 ? void 0 : _item$wfComment[0]) || "",
+      documents: (item === null || item === void 0 ? void 0 : item.wfDocuments) || [],
+      createdDate,
+      lastModified,
+      noOfDays: calculateDays(createdDate, lastModified)
+    };
+  });
+};
+const HEADER_FIELDS = [{
+  label: "CM_TIMELINE_NAME",
+  key: "assignerName"
+}, {
+  label: "CM_TIMELINE_ACTION_TAKEN",
+  key: "performedAction"
+}, {
+  label: "CM_TIMELINE_ACTION_TAKEN_ON",
+  key: "lastModified"
+}, {
+  label: "CM_TIMELINE_DATE_RECEIVED",
+  key: "createdDate"
+}, {
+  label: "CM_TIMELINE_NO_OF_DAYS",
+  key: "noOfDays"
+}];
+const TimelineCaption = React.memo(({
+  checkpoint,
+  t,
+  onDownloadPDF
+}) => {
+  var _checkpoint$documents, _checkpoint$documents2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "timeline-card"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "timeline-header"
+  }, HEADER_FIELDS === null || HEADER_FIELDS === void 0 ? void 0 : HEADER_FIELDS.map(({
+    label,
+    key
+  }) => /*#__PURE__*/React.createElement("div", {
+    key: key,
+    className: "timeline-header-item"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "timeline-label"
+  }, t(label), ":"), /*#__PURE__*/React.createElement("span", {
+    className: "timeline-value"
+  }, t(checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint[key]) || "N/A")))), /*#__PURE__*/React.createElement("div", {
+    className: "timeline-note"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "timeline-label"
+  }, t("CM_TIMELINE_NOTE"), ":"), /*#__PURE__*/React.createElement("div", {
+    className: "note-box"
+  }, (checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.comment) || t("CM_TIMELINE_NO_COMMENTS"))), (checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$documents = checkpoint.documents) === null || _checkpoint$documents === void 0 ? void 0 : _checkpoint$documents.length) > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "timeline-docs"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "timeline-label"
+  }, t("CM_TIMELINE_DOCUMENT_ATTACHED"), ":"), checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$documents2 = checkpoint.documents) === null || _checkpoint$documents2 === void 0 ? void 0 : _checkpoint$documents2.map((doc, index) => /*#__PURE__*/React.createElement(TimelineDocument, {
+    key: `${doc === null || doc === void 0 ? void 0 : doc.documentType}-${index}`,
+    value: checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.documents,
+    Code: doc === null || doc === void 0 ? void 0 : doc.documentType,
+    index: index
+  }))));
+});
+const ApplicationTimeline = ({
+  workflowDetails,
+  t
+}) => {
+  var _workflowDetails$data2, _workflowDetails$data3, _workflowDetails$data4, _timeline$;
+  const details = (workflowDetails === null || workflowDetails === void 0 ? void 0 : workflowDetails.data) || workflowDetails;
+  const timeline = useMemo(() => normalizeTimeline({
+    data: details
+  }), [details]);
+  const currentState = workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data2 = workflowDetails.data) === null || _workflowDetails$data2 === void 0 ? void 0 : (_workflowDetails$data3 = _workflowDetails$data2.timeline) === null || _workflowDetails$data3 === void 0 ? void 0 : (_workflowDetails$data4 = _workflowDetails$data3[0]) === null || _workflowDetails$data4 === void 0 ? void 0 : _workflowDetails$data4.state;
+  const handleDownloadPDF = useCallback(() => {
+    const tenantInfo = Digit.SessionStorage.get("CITIZEN.COMMON.HOME.CITY") || {};
+    const acknowledgementData = getTimelineAcknowledgementData(workflowDetails, tenantInfo, t);
+    Digit.Utils.pdf.generateTimelinePDF(acknowledgementData);
+  }, [workflowDetails, t]);
+  if (!(timeline !== null && timeline !== void 0 && timeline.length)) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "timeline-hoc-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "timeline-header-wrapper"
+  }, /*#__PURE__*/React.createElement(CardSubHeader, {
+    className: "timeline-subheader"
+  }, t("CS_APPLICATION_DETAILS_APPLICATION_TIMELINE")), /*#__PURE__*/React.createElement("span", {
+    onClick: handleDownloadPDF,
+    className: "download-button"
+  }, t("CS_COMMON_DOWNLOAD"))), (timeline === null || timeline === void 0 ? void 0 : timeline.length) === 1 ? /*#__PURE__*/React.createElement(CheckPoint, {
+    isCompleted: true,
+    label: t(timeline === null || timeline === void 0 ? void 0 : (_timeline$ = timeline[0]) === null || _timeline$ === void 0 ? void 0 : _timeline$.state),
+    customChild: /*#__PURE__*/React.createElement(TimelineCaption, {
+      checkpoint: timeline === null || timeline === void 0 ? void 0 : timeline[0],
+      t: t,
+      onDownloadPDF: handleDownloadPDF
+    })
+  }) : /*#__PURE__*/React.createElement(ConnectingCheckPoints, null, timeline === null || timeline === void 0 ? void 0 : timeline.map(checkpoint => /*#__PURE__*/React.createElement(CheckPoint, {
+    key: checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.id,
+    keyValue: checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.id,
+    isCompleted: (checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.state) === currentState,
+    label: t(checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.state),
+    customChild: /*#__PURE__*/React.createElement(TimelineCaption, {
+      checkpoint: checkpoint,
+      t: t,
+      onDownloadPDF: handleDownloadPDF
+    })
+  }))));
 };
 
 const CHBWFApplicationTimeline = props => {
-  var _props$application, _props$application$wo, _props$application2, _props$application3, _data$timeline, _data$timeline2, _data$timeline$;
+  var _props$application, _props$application$wo, _props$application2, _props$application3;
   const {
     t
   } = useTranslation();
@@ -17711,48 +17928,8 @@ const CHBWFApplicationTimeline = props => {
     id: (_props$application3 = props.application) === null || _props$application3 === void 0 ? void 0 : _props$application3.bookingNo,
     moduleCode: businessService
   });
-  function OpenImage(imageSource, index, thumbnailsToShow) {
-    var _thumbnailsToShow$ful;
-    window.open(thumbnailsToShow === null || thumbnailsToShow === void 0 ? void 0 : (_thumbnailsToShow$ful = thumbnailsToShow.fullImage) === null || _thumbnailsToShow$ful === void 0 ? void 0 : _thumbnailsToShow$ful[0], "_blank");
-  }
-  const getTimelineCaptions = checkpoint => {
-    if (checkpoint.state === "OPEN") {
-      var _checkpoint$auditDeta, _props$application4;
-      const caption = {
-        date: checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$auditDeta = checkpoint.auditDetails) === null || _checkpoint$auditDeta === void 0 ? void 0 : _checkpoint$auditDeta.lastModified,
-        source: ((_props$application4 = props.application) === null || _props$application4 === void 0 ? void 0 : _props$application4.channel) || ""
-      };
-      return /*#__PURE__*/React.createElement(CHBWFCaption, {
-        data: caption
-      });
-    } else if (checkpoint.state) {
-      var _checkpoint$auditDeta2, _checkpoint$assignes, _checkpoint$assignes$, _checkpoint$assignes2, _checkpoint$assignes3;
-      const caption = {
-        date: checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$auditDeta2 = checkpoint.auditDetails) === null || _checkpoint$auditDeta2 === void 0 ? void 0 : _checkpoint$auditDeta2.lastModified,
-        name: checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$assignes = checkpoint.assignes) === null || _checkpoint$assignes === void 0 ? void 0 : (_checkpoint$assignes$ = _checkpoint$assignes[0]) === null || _checkpoint$assignes$ === void 0 ? void 0 : _checkpoint$assignes$.name,
-        mobileNumber: checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$assignes2 = checkpoint.assignes) === null || _checkpoint$assignes2 === void 0 ? void 0 : (_checkpoint$assignes3 = _checkpoint$assignes2[0]) === null || _checkpoint$assignes3 === void 0 ? void 0 : _checkpoint$assignes3.mobileNumber,
-        comment: t(checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.comment),
-        wfComment: checkpoint.wfComment,
-        thumbnailsToShow: checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.thumbnailsToShow
-      };
-      return /*#__PURE__*/React.createElement(CHBWFCaption, {
-        data: caption,
-        OpenImage: OpenImage
-      });
-    } else {
-      var _props$application5, _checkpoint$assigner;
-      const caption = {
-        date: Digit.DateUtils.ConvertTimestampToDate((_props$application5 = props.application) === null || _props$application5 === void 0 ? void 0 : _props$application5.auditDetails.lastModified),
-        name: checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$assigner = checkpoint.assigner) === null || _checkpoint$assigner === void 0 ? void 0 : _checkpoint$assigner.name,
-        comment: t(checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.comment)
-      };
-      return /*#__PURE__*/React.createElement(CHBWFCaption, {
-        data: caption
-      });
-    }
-  };
   const showNextActions = nextActions => {
-    var _nextAction, _props$application6, _props$application7;
+    var _nextAction, _props$application4, _props$application5;
     let nextAction = nextActions[0];
     const next = nextActions.map(action => action.action);
     if (next.includes("PAY") || next.includes("EDIT")) {
@@ -17771,10 +17948,10 @@ const CHBWFApplicationTimeline = props => {
           }
         }, /*#__PURE__*/React.createElement(Link, {
           to: {
-            pathname: `/digit-ui/citizen/payment/my-bills/${businessService}/${props === null || props === void 0 ? void 0 : (_props$application6 = props.application) === null || _props$application6 === void 0 ? void 0 : _props$application6.bookingNo}`,
+            pathname: `/digit-ui/citizen/payment/my-bills/${businessService}/${props === null || props === void 0 ? void 0 : (_props$application4 = props.application) === null || _props$application4 === void 0 ? void 0 : _props$application4.bookingNo}`,
             state: {
               tenantId: props.application.tenantId,
-              bookingNo: props === null || props === void 0 ? void 0 : (_props$application7 = props.application) === null || _props$application7 === void 0 ? void 0 : _props$application7.bookingNo
+              bookingNo: props === null || props === void 0 ? void 0 : (_props$application5 = props.application) === null || _props$application5 === void 0 ? void 0 : _props$application5.bookingNo
             }
           }
         }, /*#__PURE__*/React.createElement(SubmitBar, {
@@ -17797,31 +17974,10 @@ const CHBWFApplicationTimeline = props => {
   if (isLoading) {
     return /*#__PURE__*/React.createElement(Loader$1, null);
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !isLoading && /*#__PURE__*/React.createElement(Fragment$1, null, (data === null || data === void 0 ? void 0 : (_data$timeline = data.timeline) === null || _data$timeline === void 0 ? void 0 : _data$timeline.length) > 0 && /*#__PURE__*/React.createElement(CardSectionHeader, {
-    style: {
-      marginBottom: "16px",
-      marginTop: "32px"
-    }
-  }, t("CS_APPLICATION_DETAILS_APPLICATION_TIMELINE")), data !== null && data !== void 0 && data.timeline && (data === null || data === void 0 ? void 0 : (_data$timeline2 = data.timeline) === null || _data$timeline2 === void 0 ? void 0 : _data$timeline2.length) === 1 ? /*#__PURE__*/React.createElement(CheckPoint, {
-    isCompleted: true,
-    label: t((data === null || data === void 0 ? void 0 : (_data$timeline$ = data.timeline[0]) === null || _data$timeline$ === void 0 ? void 0 : _data$timeline$.state) && `WF_${businessService}_${data.timeline[0].state}` || "NA"),
-    customChild: getTimelineCaptions(data === null || data === void 0 ? void 0 : data.timeline[0])
-  }) : /*#__PURE__*/React.createElement(ConnectingCheckPoints, null, (data === null || data === void 0 ? void 0 : data.timeline) && (data === null || data === void 0 ? void 0 : data.timeline.map((checkpoint, index, arr) => {
-    var _data$processInstance;
-    let timelineStatusPostfix = "";
-    if (window.location.href.includes("/obps/")) {
-      var _workflowDetails, _workflowDetails$data, _workflowDetails$data2, _workflowDetails$data3, _workflowDetails2, _workflowDetails2$dat, _workflowDetails2$dat2, _workflowDetails2$dat3;
-      if ((_workflowDetails = workflowDetails) !== null && _workflowDetails !== void 0 && (_workflowDetails$data = _workflowDetails.data) !== null && _workflowDetails$data !== void 0 && (_workflowDetails$data2 = _workflowDetails$data.timeline[index - 1]) !== null && _workflowDetails$data2 !== void 0 && (_workflowDetails$data3 = _workflowDetails$data2.state) !== null && _workflowDetails$data3 !== void 0 && _workflowDetails$data3.includes("BACK_FROM") || (_workflowDetails2 = workflowDetails) !== null && _workflowDetails2 !== void 0 && (_workflowDetails2$dat = _workflowDetails2.data) !== null && _workflowDetails2$dat !== void 0 && (_workflowDetails2$dat2 = _workflowDetails2$dat.timeline[index - 1]) !== null && _workflowDetails2$dat2 !== void 0 && (_workflowDetails2$dat3 = _workflowDetails2$dat2.state) !== null && _workflowDetails2$dat3 !== void 0 && _workflowDetails2$dat3.includes("SEND_TO_CITIZEN")) timelineStatusPostfix = `_NOT_DONE`;else if ((checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.performedAction) === "SEND_TO_ARCHITECT") timelineStatusPostfix = `_BY_ARCHITECT_DONE`;else timelineStatusPostfix = index == 0 ? "" : `_DONE`;
-    }
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: index
-    }, /*#__PURE__*/React.createElement(CheckPoint, {
-      keyValue: index,
-      isCompleted: index === 0,
-      label: t(`ES_PTR_COMMON_STATUS_${data === null || data === void 0 ? void 0 : (_data$processInstance = data.processInstances[index].state) === null || _data$processInstance === void 0 ? void 0 : _data$processInstance["state"]}${timelineStatusPostfix}`),
-      customChild: getTimelineCaptions(checkpoint)
-    }));
-  })))), data && showNextActions(data === null || data === void 0 ? void 0 : data.nextActions));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isLoading && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(ApplicationTimeline, {
+    workflowDetails: data,
+    t: t
+  })), data && showNextActions(data === null || data === void 0 ? void 0 : data.nextActions));
 };
 
 const checkForNotNull = (value = "") => {
@@ -17989,7 +18145,7 @@ const CHBDataConvert = data => {
 const checkForNA = (value = "") => {
   return checkForNotNull(value) ? value : "CS_NA";
 };
-const pdfDownloadLink = (documents = {}, fileStoreId = "", format = "") => {
+const pdfDownloadLink$1 = (documents = {}, fileStoreId = "", format = "") => {
   let downloadLink = documents[fileStoreId] || "";
   let differentFormats = (downloadLink === null || downloadLink === void 0 ? void 0 : downloadLink.split(",")) || [];
   let fileURL = "";
@@ -18091,7 +18247,7 @@ function CHBDocument({
       flexWrap: "wrap"
     }
   }, documents.map((document, index) => {
-    let documentLink = pdfDownloadLink(data.pdfFiles, document.fileStoreId);
+    let documentLink = pdfDownloadLink$1(data.pdfFiles, document.fileStoreId);
     return /*#__PURE__*/React.createElement("a", {
       target: "_",
       href: documentLink,
@@ -18517,10 +18673,62 @@ const CHBAcknowledgement = ({
   }));
 };
 
+const Loader = ({
+  page: _page = false
+}) => {
+  const baseStyle = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  };
+  const pageStyle = {
+    ...baseStyle,
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100vw",
+    height: "100vh",
+    background: "rgba(255,255,255,0.6)",
+    backdropFilter: "blur(4px)",
+    zIndex: 9999
+  };
+  const moduleStyle = {
+    ...baseStyle,
+    minHeight: "100px",
+    width: "100%",
+    position: "relative"
+  };
+  const spinnerStyle = {
+    width: "64px",
+    height: "64px",
+    border: "8px solid #1976d2",
+    borderTop: "8px solid transparent",
+    borderRadius: "50%",
+    animation: "spin 1.2s linear infinite"
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: _page ? pageStyle : moduleStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    style: spinnerStyle
+  }), /*#__PURE__*/React.createElement("style", null, `
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        `));
+};
+Loader.propTypes = {
+  page: propTypes.bool
+};
+Loader.defaultProps = {
+  page: false
+};
+
 const ChbApplication = ({
   application,
   tenantId,
-  buttonLabel
+  buttonLabel,
+  refetch
 }) => {
   var _application$applican;
   const {
@@ -18528,7 +18736,7 @@ const ChbApplication = ({
   } = useTranslation();
   const history = useHistory();
   const [showToast, setShowToast] = useState(null);
-  console.log("application", application);
+  const [loader, setLoader] = useState(false);
   const getBookingDateRange = bookingSlotDetails => {
     var _bookingSlotDetails$, _bookingSlotDetails;
     if (!bookingSlotDetails || bookingSlotDetails.length === 0) {
@@ -18545,6 +18753,28 @@ const ChbApplication = ({
   const handleMakePayment = async () => {
     history.push(`/digit-ui/citizen/payment/collect/chb-services/${application === null || application === void 0 ? void 0 : application.bookingNo}/${tenantId}?tenantId=${tenantId}`);
   };
+  const handleCancel = async () => {
+    setLoader(true);
+    const finalPayload = {
+      hallsBookingApplication: {
+        ...application,
+        workflow: {
+          action: "CANCEL"
+        }
+      }
+    };
+    try {
+      const response = await Digit.CHBServices.update({
+        tenantId,
+        ...finalPayload
+      });
+      refetch();
+      setLoader(false);
+    } catch (err) {
+      setLoader(false);
+      return err;
+    }
+  };
   useEffect(() => {
     if (showToast) {
       const timer = setTimeout(() => {
@@ -18577,6 +18807,9 @@ const ChbApplication = ({
   })), application.bookingStatus === "PENDING_FOR_PAYMENT" && /*#__PURE__*/React.createElement(SubmitBar, {
     label: t("CS_APPLICATION_DETAILS_MAKE_PAYMENT"),
     onSubmit: handleMakePayment
+  }), application.bookingStatus === "BOOKED" && /*#__PURE__*/React.createElement(SubmitBar, {
+    label: t("WF_EMPLOYEE_NDC_CANCEL"),
+    onSubmit: handleCancel
   })), showToast && /*#__PURE__*/React.createElement(Toast, {
     error: showToast.error,
     warning: showToast.warning,
@@ -18584,6 +18817,8 @@ const ChbApplication = ({
     onClose: () => {
       setShowToast(null);
     }
+  }), loader && /*#__PURE__*/React.createElement(Loader, {
+    page: true
   }));
 };
 
@@ -18634,13 +18869,11 @@ const CHBMyApplications = () => {
   useEffect(() => {
     refetch();
   }, []);
-  if (isLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
-  }
   const filteredApplications = (data === null || data === void 0 ? void 0 : data.hallsBookingApplication) || [];
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null, `${t("CHB_MY_APPLICATION_HEADER")} (${filteredApplications.length})`), /*#__PURE__*/React.createElement("div", null, (filteredApplications === null || filteredApplications === void 0 ? void 0 : filteredApplications.length) > 0 && (filteredApplications === null || filteredApplications === void 0 ? void 0 : filteredApplications.map((application, index) => /*#__PURE__*/React.createElement("div", {
     key: index
   }, /*#__PURE__*/React.createElement(ChbApplication, {
+    refetch: refetch,
     application: application,
     tenantId: tenantId,
     buttonLabel: t("CHB_SUMMARY")
@@ -18661,82 +18894,11 @@ const CHBMyApplications = () => {
       color: "#007bff"
     },
     onClick: handleLoadMore
-  }, t("CHB_LOAD_MORE_MSG")))));
+  }, t("CHB_LOAD_MORE_MSG"))), isLoading && /*#__PURE__*/React.createElement(Loader, {
+    page: true
+  })));
 };
 
-const PDFSvg = ({
-  width: _width = 20,
-  height: _height = 20,
-  style
-}) => /*#__PURE__*/React.createElement("svg", {
-  style: style,
-  xmlns: "http://www.w3.org/2000/svg",
-  width: _width,
-  height: _height,
-  viewBox: "0 0 20 20",
-  fill: "gray"
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v1zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm10 5.5h1v-3h-1v3z"
-}));
-function NDCDocument({
-  value = {},
-  Code,
-  index
-}) {
-  const {
-    t
-  } = useTranslation();
-  const {
-    isLoading,
-    isError,
-    error,
-    data
-  } = Digit.Hooks.ads.useADSDocumentSearch({
-    value
-  }, {
-    value
-  }, Code, index);
-  console.log("dataInNDCDocument", data);
-  const documents = value !== null && value !== void 0 && value.documents ? value.documents.documents.filter(doc => doc.documentType === Code).map(doc => ({
-    ...doc,
-    documentType: doc.documentType.replace(/\./g, "_")
-  })) : value.filter(doc => doc.documentType === Code).map(doc => ({
-    ...doc,
-    documentType: doc.documentType.replace(/\./g, "_")
-  }));
-  if (isLoading) {
-    return /*#__PURE__*/React.createElement(Loader$1, null);
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: "19px"
-    }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, (data === null || data === void 0 ? void 0 : data.pdfFiles) && /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      flexWrap: "wrap"
-    }
-  }, documents === null || documents === void 0 ? void 0 : documents.map((document, index) => {
-    let documentLink = pdfDownloadLink(data.pdfFiles, document === null || document === void 0 ? void 0 : document.fileStoreId);
-    return /*#__PURE__*/React.createElement("a", {
-      target: "_",
-      href: documentLink,
-      style: {
-        minWidth: "100px",
-        marginRight: "10px"
-      },
-      key: index
-    }, /*#__PURE__*/React.createElement(PDFSvg, {
-      width: 85,
-      height: 100,
-      style: {
-        background: "#f6f6f6",
-        padding: "8px"
-      }
-    }));
-  }))));
-}
-
 const capitalize = text => text.substr(0, 1).toUpperCase() + text.substr(1);
 const ulbCamel = ulb => ulb.toLowerCase().split(" ").map(capitalize).join(" ");
 const getChbAcknowledgementData = async (application, tenantInfo, t) => {
@@ -41625,45 +41787,8 @@ var standalone = createCommonjsModule(function (module, exports) {
 });
 unwrapExports(standalone);
 
-const getTimelineCaptions = (checkpoint, index, arr, t) => {
-  var _checkpoint$auditDeta, _checkpoint$assigner, _checkpoint$assigner2, _thumbnailsToShow$thu;
-  const {
-    wfComment: comment,
-    thumbnailsToShow,
-    wfDocuments
-  } = checkpoint;
-  const caption = {
-    date: checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$auditDeta = checkpoint.auditDetails) === null || _checkpoint$auditDeta === void 0 ? void 0 : _checkpoint$auditDeta.lastModified,
-    name: checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$assigner = checkpoint.assigner) === null || _checkpoint$assigner === void 0 ? void 0 : _checkpoint$assigner.name,
-    source: checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$assigner2 = checkpoint.assigner) === null || _checkpoint$assigner2 === void 0 ? void 0 : _checkpoint$assigner2.source
-  };
-  return /*#__PURE__*/React.createElement("div", null, (comment === null || comment === void 0 ? void 0 : comment.length) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: "TLComments"
-  }, /*#__PURE__*/React.createElement("h3", null, t("WF_COMMON_COMMENTS")), /*#__PURE__*/React.createElement("p", {
-    style: {
-      overflowX: "scroll"
-    }
-  }, comment)), (thumbnailsToShow === null || thumbnailsToShow === void 0 ? void 0 : (_thumbnailsToShow$thu = thumbnailsToShow.thumbs) === null || _thumbnailsToShow$thu === void 0 ? void 0 : _thumbnailsToShow$thu.length) > 0 && /*#__PURE__*/React.createElement(DisplayPhotos, {
-    srcs: thumbnailsToShow.thumbs,
-    onClick: (src, idx) => {
-      var _thumbnailsToShow$ful;
-      let fullImage = ((_thumbnailsToShow$ful = thumbnailsToShow.fullImage) === null || _thumbnailsToShow$ful === void 0 ? void 0 : _thumbnailsToShow$ful[idx]) || src;
-      Digit.Utils.zoomImage(fullImage);
-    }
-  }), (wfDocuments === null || wfDocuments === void 0 ? void 0 : wfDocuments.length) > 0 && /*#__PURE__*/React.createElement("div", null, wfDocuments === null || wfDocuments === void 0 ? void 0 : wfDocuments.map((doc, index) => /*#__PURE__*/React.createElement("div", {
-    key: index
-  }, /*#__PURE__*/React.createElement(NDCDocument, {
-    value: wfDocuments,
-    Code: doc === null || doc === void 0 ? void 0 : doc.documentType,
-    index: index
-  })))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: "8px"
-    }
-  }, caption.date && /*#__PURE__*/React.createElement("p", null, caption.date), caption.name && /*#__PURE__*/React.createElement("p", null, caption.name), caption.source && /*#__PURE__*/React.createElement("p", null, t("ES_COMMON_FILED_VIA_" + caption.source.toUpperCase()))));
-};
 const CHBApplicationDetails = () => {
-  var _workflowDetails$data, _workflowDetails$data2, _workflowDetails$data3, _chb_details$addition, _chb_details$bookingS, _chb_details$applican, _chb_details$applican2, _chb_details$applican3, _chb_details$specialC, _chb_details$purpose, _docs, _docs2, _workflowDetails$data6, _workflowDetails$data7, _workflowDetails$data8, _workflowDetails$data9, _workflowDetails$data0;
+  var _workflowDetails$data, _workflowDetails$data2, _workflowDetails$data3, _chb_details$addition, _chb_details$bookingS, _chb_details$applican, _chb_details$applican2, _chb_details$applican3, _chb_details$specialC, _chb_details$purpose, _docs, _docs2;
   const {
     t
   } = useTranslation();
@@ -41760,13 +41885,20 @@ const CHBApplicationDetails = () => {
     return /*#__PURE__*/React.createElement(Loader$1, null);
   }
   const getChbAcknowledgement = async () => {
-    const applications = application || {};
-    console.log('applications for chbb', applications);
-    const tenantInfo = tenants.find(tenant => tenant.code === applications.tenantId);
-    const acknowldgementDataAPI = await getChbAcknowledgementData({
-      ...applications
-    }, tenantInfo, t);
-    Digit.Utils.pdf.generate(acknowldgementDataAPI);
+    try {
+      setLoading(true);
+      const applications = application || {};
+      console.log("applications for chbb", applications);
+      const tenantInfo = tenants.find(tenant => tenant.code === applications.tenantId);
+      const acknowldgementDataAPI = await getChbAcknowledgementData({
+        ...applications
+      }, tenantInfo, t);
+      Digit.Utils.pdf.generate(acknowldgementDataAPI);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
   };
   let documentDate = t("CS_NA");
   if (chb_details !== null && chb_details !== void 0 && (_chb_details$addition = chb_details.additionalDetails) !== null && _chb_details$addition !== void 0 && _chb_details$addition.documentDate) {
@@ -41780,64 +41912,78 @@ const CHBApplicationDetails = () => {
     payments,
     ...params
   }) {
-    var _data$hallsBookingApp;
-    let application = data === null || data === void 0 ? void 0 : (_data$hallsBookingApp = data.hallsBookingApplication) === null || _data$hallsBookingApp === void 0 ? void 0 : _data$hallsBookingApp[0];
-    let fileStoreId = application === null || application === void 0 ? void 0 : application.paymentReceiptFilestoreId;
-    if (!fileStoreId) {
-      var _response, _response2;
-      let response = {
-        filestoreIds: [payments === null || payments === void 0 ? void 0 : payments.fileStoreId]
-      };
-      response = await Digit.PaymentService.generatePdf(tenantId, {
-        Payments: [{
-          ...payments,
-          ...application
-        }]
-      }, "chbservice-receipt");
-      const updatedApplication = {
-        ...application,
-        paymentReceiptFilestoreId: (_response = response) === null || _response === void 0 ? void 0 : _response.filestoreIds[0]
-      };
-      await mutation.mutateAsync({
-        hallsBookingApplication: updatedApplication
+    try {
+      var _data$hallsBookingApp;
+      setLoading(true);
+      let application = data === null || data === void 0 ? void 0 : (_data$hallsBookingApp = data.hallsBookingApplication) === null || _data$hallsBookingApp === void 0 ? void 0 : _data$hallsBookingApp[0];
+      let fileStoreId = application === null || application === void 0 ? void 0 : application.paymentReceiptFilestoreId;
+      if (!fileStoreId) {
+        var _response, _response2;
+        let response = {
+          filestoreIds: [payments === null || payments === void 0 ? void 0 : payments.fileStoreId]
+        };
+        response = await Digit.PaymentService.generatePdf(tenantId, {
+          Payments: [{
+            ...payments,
+            ...application
+          }]
+        }, "chbservice-receipt");
+        const updatedApplication = {
+          ...application,
+          paymentReceiptFilestoreId: (_response = response) === null || _response === void 0 ? void 0 : _response.filestoreIds[0]
+        };
+        await mutation.mutateAsync({
+          hallsBookingApplication: updatedApplication
+        });
+        fileStoreId = (_response2 = response) === null || _response2 === void 0 ? void 0 : _response2.filestoreIds[0];
+        refetch();
+      }
+      const fileStore = await Digit.PaymentService.printReciept(tenantId, {
+        fileStoreIds: fileStoreId
       });
-      fileStoreId = (_response2 = response) === null || _response2 === void 0 ? void 0 : _response2.filestoreIds[0];
-      refetch();
+      window.open(fileStore[fileStoreId], "_blank");
+    } catch (error) {
+      console.error("Sanction Letter download error:", error);
+    } finally {
+      setLoading(false);
     }
-    const fileStore = await Digit.PaymentService.printReciept(tenantId, {
-      fileStoreIds: fileStoreId
-    });
-    window.open(fileStore[fileStoreId], "_blank");
   }
   async function getPermissionLetter({
     tenantId,
     payments,
     ...params
   }) {
-    let application = {
-      hallsBookingApplication: ((data === null || data === void 0 ? void 0 : data.hallsBookingApplication) || []).map(app => {
-        return {
-          ...app,
-          bookingSlotDetails: [...(app.bookingSlotDetails || [])].sort((a, b) => {
-            return new Date(a.bookingDate) - new Date(b.bookingDate);
-          })
-        };
-      })
-    };
-    let fileStoreId = application === null || application === void 0 ? void 0 : application.permissionLetterFilestoreId;
-    if (!fileStoreId) {
-      const response = await Digit.PaymentService.generatePdf(tenantId, {
-        Payments: [{
-          ...payments,
-          ...application
-        }]
-      }, "chb-permissionletter");
-      fileStoreId = response === null || response === void 0 ? void 0 : response.filestoreIds[0];
+    try {
+      setLoading(true);
+      let application = {
+        hallsBookingApplication: ((data === null || data === void 0 ? void 0 : data.hallsBookingApplication) || []).map(app => {
+          return {
+            ...app,
+            bookingSlotDetails: [...(app.bookingSlotDetails || [])].sort((a, b) => {
+              return new Date(a.bookingDate) - new Date(b.bookingDate);
+            })
+          };
+        })
+      };
+      let fileStoreId = payments === null || payments === void 0 ? void 0 : payments.fileStoreId;
+      if (!fileStoreId) {
+        const response = await Digit.PaymentService.generatePdf(tenantId, {
+          Payments: [{
+            ...payments,
+            ...application
+          }]
+        }, "chb-permissionletter");
+        fileStoreId = response === null || response === void 0 ? void 0 : response.filestoreIds[0];
+      }
+      const fileStore = await Digit.PaymentService.printReciept(tenantId, {
+        fileStoreIds: fileStoreId
+      });
+      window.open(fileStore[fileStoreId], "_blank");
+    } catch (error) {
+      console.error("Sanction Letter download error:", error);
+    } finally {
+      setLoading(false);
     }
-    const fileStore = await Digit.PaymentService.printReciept(tenantId, {
-      fileStoreIds: fileStoreId
-    });
-    window.open(fileStore[fileStoreId], "_blank");
   }
   let dowloadOptions = [];
   dowloadOptions.push({
@@ -41899,7 +42045,7 @@ const CHBApplicationDetails = () => {
     styles: {
       fontSize: "32px"
     }
-  }, t("CHB_BOOKING_DETAILS")), dowloadOptions && dowloadOptions.length > 0 && /*#__PURE__*/React.createElement(MultiLink, {
+  }, t("CHB_BOOKING_DETAILS")), loading && /*#__PURE__*/React.createElement(Loader$1, null), dowloadOptions && dowloadOptions.length > 0 && /*#__PURE__*/React.createElement(MultiLink, {
     className: "multilinkWrapper",
     onHeadClick: () => setShowOptions(!showOptions),
     displayOptions: showOptions,
@@ -41981,23 +42127,50 @@ const CHBApplicationDetails = () => {
       marginTop: "10px",
       fontSize: "15px"
     }
-  }, t(doc === null || doc === void 0 ? void 0 : doc.documentType))))) : /*#__PURE__*/React.createElement("h5", null, t("CS_NO_DOCUMENTS_UPLOADED"))))), (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data6 = workflowDetails.data) === null || _workflowDetails$data6 === void 0 ? void 0 : _workflowDetails$data6.timeline) && /*#__PURE__*/React.createElement(Card, {
+  }, t(doc === null || doc === void 0 ? void 0 : doc.documentType))))) : /*#__PURE__*/React.createElement("h5", null, t("CS_NO_DOCUMENTS_UPLOADED"))))), /*#__PURE__*/React.createElement(CardSubHeader, {
     style: {
-      marginTop: "20px"
+      fontSize: "24px"
     }
-  }, /*#__PURE__*/React.createElement(CardSubHeader, {
+  }, t("CS_APPLICATION_DETAILS_APPLICATION_TIMELINE")), /*#__PURE__*/React.createElement(ApplicationTimeline, {
+    workflowDetails: workflowDetails,
+    t: t
+  })));
+};
+
+const CHBWFReason = ({
+  headComment,
+  otherComment
+}) => /*#__PURE__*/React.createElement("div", {
+  className: "checkpoint-comments-wrap"
+}, /*#__PURE__*/React.createElement("h4", null, headComment), /*#__PURE__*/React.createElement("p", null, otherComment));
+
+const CHBWFCaption = ({
+  data,
+  OpenImage
+}) => {
+  var _data$wfComment, _data$thumbnailsToSho, _data$thumbnailsToSho2;
+  const {
+    t
+  } = useTranslation();
+  return /*#__PURE__*/React.createElement("div", null, data.date && /*#__PURE__*/React.createElement("p", null, data.date), /*#__PURE__*/React.createElement("p", null, data.name), data.mobileNumber && /*#__PURE__*/React.createElement(TelePhone, {
+    mobile: data.mobileNumber
+  }), data.source && /*#__PURE__*/React.createElement("p", null, t("ES_APPLICATION_DETAILS_APPLICATION_CHANNEL_" + data.source.toUpperCase())), data.comment && /*#__PURE__*/React.createElement(Reason, {
+    otherComment: data === null || data === void 0 ? void 0 : data.otherComment,
+    headComment: data === null || data === void 0 ? void 0 : data.comment
+  }), data !== null && data !== void 0 && data.wfComment ? /*#__PURE__*/React.createElement("div", null, data === null || data === void 0 ? void 0 : (_data$wfComment = data.wfComment) === null || _data$wfComment === void 0 ? void 0 : _data$wfComment.map(e => /*#__PURE__*/React.createElement("div", {
+    className: "TLComments"
+  }, /*#__PURE__*/React.createElement("h3", null, t("WF_COMMON_COMMENTS")), /*#__PURE__*/React.createElement("p", {
     style: {
-      fontSize: "24px"
+      overflowX: "scroll"
     }
-  }, t("CS_APPLICATION_DETAILS_APPLICATION_TIMELINE")), (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data7 = workflowDetails.data) === null || _workflowDetails$data7 === void 0 ? void 0 : _workflowDetails$data7.timeline.length) === 1 ? /*#__PURE__*/React.createElement(CheckPoint, {
-    isCompleted: true,
-    label: t(workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data8 = workflowDetails.data) === null || _workflowDetails$data8 === void 0 ? void 0 : (_workflowDetails$data9 = _workflowDetails$data8.timeline[0]) === null || _workflowDetails$data9 === void 0 ? void 0 : _workflowDetails$data9.status)
-  }) : /*#__PURE__*/React.createElement(ConnectingCheckPoints, null, workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data0 = workflowDetails.data) === null || _workflowDetails$data0 === void 0 ? void 0 : _workflowDetails$data0.timeline.map((checkpoint, index, arr) => /*#__PURE__*/React.createElement(CheckPoint, {
-    keyValue: index,
-    isCompleted: index === 0,
-    label: t(checkpoint.status),
-    customChild: getTimelineCaptions(checkpoint, index, arr, t)
-  }))))));
+  }, e)))) : null, (data === null || data === void 0 ? void 0 : (_data$thumbnailsToSho = data.thumbnailsToShow) === null || _data$thumbnailsToSho === void 0 ? void 0 : (_data$thumbnailsToSho2 = _data$thumbnailsToSho.thumbs) === null || _data$thumbnailsToSho2 === void 0 ? void 0 : _data$thumbnailsToSho2.length) > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "TLComments"
+  }, /*#__PURE__*/React.createElement("h3", null, t("CS_COMMON_ATTACHMENTS")), /*#__PURE__*/React.createElement(DisplayPhotos, {
+    srcs: data === null || data === void 0 ? void 0 : data.thumbnailsToShow.thumbs,
+    onClick: (src, index) => {
+      OpenImage(src, index, data === null || data === void 0 ? void 0 : data.thumbnailsToShow);
+    }
+  })) : null);
 };
 
 function _extends() {
@@ -43505,57 +43678,6 @@ const TableConfig = t => ({
   }
 });
 
-const Loader = ({
-  page: _page = false
-}) => {
-  const baseStyle = {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center"
-  };
-  const pageStyle = {
-    ...baseStyle,
-    position: "fixed",
-    top: 0,
-    left: 0,
-    width: "100vw",
-    height: "100vh",
-    background: "rgba(255,255,255,0.6)",
-    backdropFilter: "blur(4px)",
-    zIndex: 9999
-  };
-  const moduleStyle = {
-    ...baseStyle,
-    minHeight: "100px",
-    width: "100%",
-    position: "relative"
-  };
-  const spinnerStyle = {
-    width: "64px",
-    height: "64px",
-    border: "8px solid #1976d2",
-    borderTop: "8px solid transparent",
-    borderRadius: "50%",
-    animation: "spin 1.2s linear infinite"
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    style: _page ? pageStyle : moduleStyle
-  }, /*#__PURE__*/React.createElement("div", {
-    style: spinnerStyle
-  }), /*#__PURE__*/React.createElement("style", null, `
-          @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-          }
-        `));
-};
-Loader.propTypes = {
-  page: propTypes.bool
-};
-Loader.defaultProps = {
-  page: false
-};
-
 const ModalConfig = ({
   t,
   action,
@@ -43717,7 +43839,7 @@ const NDCModal = ({
         };
       }));
     }
-  }, [approverData]);
+  }, [approverData, EmployeeStatusData]);
   function selectFile(e) {
     setFile(e.target.files[0]);
   }
@@ -43810,45 +43932,8 @@ const NDCModal = ({
   }));
 };
 
-const getTimelineCaptions$1 = (checkpoint, index, arr, t) => {
-  var _checkpoint$auditDeta, _checkpoint$assigner, _checkpoint$assigner2, _thumbnailsToShow$thu;
-  const {
-    wfComment: comment,
-    thumbnailsToShow,
-    wfDocuments
-  } = checkpoint;
-  const caption = {
-    date: checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$auditDeta = checkpoint.auditDetails) === null || _checkpoint$auditDeta === void 0 ? void 0 : _checkpoint$auditDeta.lastModified,
-    name: checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$assigner = checkpoint.assigner) === null || _checkpoint$assigner === void 0 ? void 0 : _checkpoint$assigner.name,
-    source: checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$assigner2 = checkpoint.assigner) === null || _checkpoint$assigner2 === void 0 ? void 0 : _checkpoint$assigner2.source
-  };
-  return /*#__PURE__*/React.createElement("div", null, (comment === null || comment === void 0 ? void 0 : comment.length) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: "TLComments"
-  }, /*#__PURE__*/React.createElement("h3", null, t("WF_COMMON_COMMENTS")), /*#__PURE__*/React.createElement("p", {
-    style: {
-      overflowX: "scroll"
-    }
-  }, comment)), (thumbnailsToShow === null || thumbnailsToShow === void 0 ? void 0 : (_thumbnailsToShow$thu = thumbnailsToShow.thumbs) === null || _thumbnailsToShow$thu === void 0 ? void 0 : _thumbnailsToShow$thu.length) > 0 && /*#__PURE__*/React.createElement(DisplayPhotos, {
-    srcs: thumbnailsToShow.thumbs,
-    onClick: (src, idx) => {
-      var _thumbnailsToShow$ful;
-      let fullImage = ((_thumbnailsToShow$ful = thumbnailsToShow.fullImage) === null || _thumbnailsToShow$ful === void 0 ? void 0 : _thumbnailsToShow$ful[idx]) || src;
-      Digit.Utils.zoomImage(fullImage);
-    }
-  }), (wfDocuments === null || wfDocuments === void 0 ? void 0 : wfDocuments.length) > 0 && /*#__PURE__*/React.createElement("div", null, wfDocuments === null || wfDocuments === void 0 ? void 0 : wfDocuments.map((doc, index) => /*#__PURE__*/React.createElement("div", {
-    key: index
-  }, /*#__PURE__*/React.createElement(NDCDocument, {
-    value: wfDocuments,
-    Code: doc === null || doc === void 0 ? void 0 : doc.documentType,
-    index: index
-  })))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: "8px"
-    }
-  }, caption.date && /*#__PURE__*/React.createElement("p", null, caption.date), caption.name && /*#__PURE__*/React.createElement("p", null, caption.name), caption.source && /*#__PURE__*/React.createElement("p", null, t("ES_COMMON_FILED_VIA_" + caption.source.toUpperCase()))));
-};
 const CHBApplicationDetails$1 = () => {
-  var _workflowDetails$data, _workflowDetails$data2, _workflowDetails$data3, _user$info, _user$info$roles, _workflowDetails$data6, _workflowDetails$data7, _workflowDetails$data8, _workflowDetailsTemp$, _workflowDetailsTemp$2, _chb_details$addition, _chb_details$bookingS, _chb_details$applican, _chb_details$applican2, _chb_details$applican3, _chb_details$specialC, _chb_details$purpose, _docs, _docs2, _workflowDetails$data9, _workflowDetails$data0, _workflowDetails$data1, _workflowDetails$data10, _workflowDetails$data11, _workflowDetails$data12, _workflowDetails$data13, _workflowDetails$data14, _workflowDetails$data15;
+  var _workflowDetails$data, _workflowDetails$data2, _workflowDetails$data3, _user$info, _user$info$roles, _workflowDetails$data6, _workflowDetails$data7, _workflowDetails$data8, _workflowDetailsTemp$, _workflowDetailsTemp$2, _chb_details$addition, _chb_details$bookingS, _chb_details$applican, _chb_details$applican2, _chb_details$applican3, _chb_details$specialC, _chb_details$purpose, _docs, _docs2, _workflowDetails$data9, _workflowDetails$data0, _workflowDetails$data1, _workflowDetails$data10;
   const {
     t
   } = useTranslation();
@@ -44034,11 +44119,40 @@ const CHBApplicationDetails$1 = () => {
       history.push(`/digit-ui/employee/payment/collect/chb-services/${appNo}/${tenantId}?tenantId=${tenantId}`);
     } else if ((action === null || action === void 0 ? void 0 : action.action) == "EDIT") {
       history.push(`/digit-ui/employee/ndc/create/${appNo}`);
+    } else if ((action === null || action === void 0 ? void 0 : action.action) == "CANCEL") {
+      handleCancel();
     } else {
       setShowModal(true);
       setSelectedAction(action);
     }
   }
+  const handleCancel = async () => {
+    console.log("displayData?.applicantData", data === null || data === void 0 ? void 0 : data.hallsBookingApplication);
+    setLoader(true);
+    const finalPayload = {
+      hallsBookingApplication: {
+        ...application,
+        workflow: {
+          action: "CANCEL"
+        }
+      }
+    };
+    try {
+      const response = await Digit.CHBServices.update({
+        tenantId,
+        ...finalPayload
+      });
+      workflowDetails.revalidate();
+      setTimeout(() => {
+        history.push("/digit-ui/employee/chb/inbox");
+        window.location.reload();
+      }, 2000);
+      setLoader(false);
+    } catch (err) {
+      setLoader(false);
+      return err;
+    }
+  };
   const fetchBillData = async () => {
     setLoading(true);
     const result = await Digit.PaymentService.fetchBill(tenantId, {
@@ -44337,19 +44451,10 @@ const CHBApplicationDetails$1 = () => {
       marginTop: "10px",
       fontSize: "15px"
     }
-  }, t(doc === null || doc === void 0 ? void 0 : doc.documentType))))) : /*#__PURE__*/React.createElement("h5", null, t("CS_NO_DOCUMENTS_UPLOADED"))))), (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data9 = workflowDetails.data) === null || _workflowDetails$data9 === void 0 ? void 0 : _workflowDetails$data9.timeline) && /*#__PURE__*/React.createElement(Card, {
-    style: {
-      marginTop: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardSubHeader, null, t("CS_APPLICATION_DETAILS_APPLICATION_TIMELINE")), (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data0 = workflowDetails.data) === null || _workflowDetails$data0 === void 0 ? void 0 : _workflowDetails$data0.timeline.length) === 1 ? /*#__PURE__*/React.createElement(CheckPoint, {
-    isCompleted: true,
-    label: t(workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data1 = workflowDetails.data) === null || _workflowDetails$data1 === void 0 ? void 0 : (_workflowDetails$data10 = _workflowDetails$data1.timeline[0]) === null || _workflowDetails$data10 === void 0 ? void 0 : _workflowDetails$data10.status)
-  }) : /*#__PURE__*/React.createElement(ConnectingCheckPoints, null, workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data11 = workflowDetails.data) === null || _workflowDetails$data11 === void 0 ? void 0 : _workflowDetails$data11.timeline.map((checkpoint, index, arr) => /*#__PURE__*/React.createElement(CheckPoint, {
-    keyValue: index,
-    isCompleted: index === 0,
-    label: t(checkpoint.status),
-    customChild: getTimelineCaptions$1(checkpoint, index, arr, t)
-  })))), actions && actions.length > 0 && !actions.some(a => a.action === "SUBMIT") && /*#__PURE__*/React.createElement(ActionBar, null, displayMenu && (workflowDetails !== null && workflowDetails !== void 0 && (_workflowDetails$data12 = workflowDetails.data) !== null && _workflowDetails$data12 !== void 0 && (_workflowDetails$data13 = _workflowDetails$data12.actionState) !== null && _workflowDetails$data13 !== void 0 && _workflowDetails$data13.nextActions || workflowDetails !== null && workflowDetails !== void 0 && (_workflowDetails$data14 = workflowDetails.data) !== null && _workflowDetails$data14 !== void 0 && _workflowDetails$data14.nextActions) ? /*#__PURE__*/React.createElement(Menu, {
+  }, t(doc === null || doc === void 0 ? void 0 : doc.documentType))))) : /*#__PURE__*/React.createElement("h5", null, t("CS_NO_DOCUMENTS_UPLOADED"))))), /*#__PURE__*/React.createElement(CardSubHeader, null, t("CS_APPLICATION_DETAILS_APPLICATION_TIMELINE")), /*#__PURE__*/React.createElement(ApplicationTimeline, {
+    workflowDetails: workflowDetails,
+    t: t
+  }), actions && actions.length > 0 && !actions.some(a => a.action === "SUBMIT") && /*#__PURE__*/React.createElement(ActionBar, null, displayMenu && (workflowDetails !== null && workflowDetails !== void 0 && (_workflowDetails$data9 = workflowDetails.data) !== null && _workflowDetails$data9 !== void 0 && (_workflowDetails$data0 = _workflowDetails$data9.actionState) !== null && _workflowDetails$data0 !== void 0 && _workflowDetails$data0.nextActions || workflowDetails !== null && workflowDetails !== void 0 && (_workflowDetails$data1 = workflowDetails.data) !== null && _workflowDetails$data1 !== void 0 && _workflowDetails$data1.nextActions) ? /*#__PURE__*/React.createElement(Menu, {
     localeKeyPrefix: `WF_EDITRENEWAL`,
     options: filteredActions,
     optionKey: "action",
@@ -44369,7 +44474,7 @@ const CHBApplicationDetails$1 = () => {
     applicationData: data,
     closeModal: closeModal,
     submitAction: submitAction,
-    actionData: workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data15 = workflowDetails.data) === null || _workflowDetails$data15 === void 0 ? void 0 : _workflowDetails$data15.timeline,
+    actionData: workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data10 = workflowDetails.data) === null || _workflowDetails$data10 === void 0 ? void 0 : _workflowDetails$data10.timeline,
     workflowDetails: workflowDetails,
     showToast: showToast,
     getEmployees: getEmployees,
@@ -44383,7 +44488,7 @@ const CHBApplicationDetails$1 = () => {
     label: error,
     isDleteBtn: true,
     onClose: closeToast
-  }), (isLoading || auditDataLoading || getLoader) && /*#__PURE__*/React.createElement(Loader, {
+  }), (isLoading || auditDataLoading || getLoader || workflowDetails.isLoading || recieptDataLoading) && /*#__PURE__*/React.createElement(Loader, {
     page: true
   })));
 };
@@ -45292,6 +45397,7 @@ const CHBCitizenSecond = ({
   const [loader, setLoader] = useState(false);
   const [showInfo, setShowInfo] = useState(false);
   const [error, setError] = useState(null);
+  console.log("tenantId", tenantId);
   const {
     control,
     handleSubmit,
@@ -47098,8 +47204,6 @@ var reactLifecyclesCompat_es = {
   polyfill: polyfill
 };
 
-var _reactLifecyclesCompat = getCjsExportFromNamespace(reactLifecyclesCompat_es);
-
 var Modal_1 = createCommonjsModule(function (module, exports) {
 
   Object.defineProperty(exports, "__esModule", {
@@ -47388,7 +47492,7 @@ var Modal_1 = createCommonjsModule(function (module, exports) {
       padding: "20px"
     }
   };
-  (0, _reactLifecyclesCompat.polyfill)(Modal);
+  (0, reactLifecyclesCompat_es.polyfill)(Modal);
   if (process.env.NODE_ENV !== "production") {
     Modal.setCreateHTMLElement = function (fn) {
       return createHTMLElement = fn;
@@ -47418,7 +47522,9 @@ const CitizenConsent = ({
   showTermsPopupOwner,
   setShowTermsPopupOwner,
   otpVerifiedTimestamp,
-  getModalData
+  getModalData,
+  getUser,
+  getShowOtp
 }) => {
   var _user$info, _getModalData$purpose;
   const {
@@ -47443,7 +47549,6 @@ const CitizenConsent = ({
   const [userSelected, setUser] = useState(null);
   const [setOtpLoading, setSetOtpLoading] = useState(false);
   const stateCode = Digit.ULBService.getStateId();
-  console.log("getModalData", getModalData);
   const [isUploading, setIsUploading] = useState(false);
   const [isFileUploaded, setIsFileUploaded] = useState(false);
   const isCitizenDeclared = sessionStorage.getItem("CitizenConsentdocFilestoreidCHB");
@@ -47546,12 +47651,11 @@ const CitizenConsent = ({
     setShowTermsPopupOwner(false);
   };
   const handleVerifyOTPClick = async () => {
-    var _user$info3, _user$info4;
     const requestData = {
       username: getModalData === null || getModalData === void 0 ? void 0 : getModalData.mobileNumber,
       password: otp,
-      tenantId: user === null || user === void 0 ? void 0 : (_user$info3 = user.info) === null || _user$info3 === void 0 ? void 0 : _user$info3.tenantId,
-      userType: user === null || user === void 0 ? void 0 : (_user$info4 = user.info) === null || _user$info4 === void 0 ? void 0 : _user$info4.type
+      tenantId: "pb",
+      userType: "citizen"
     };
     try {
       setSetOtpLoading(true);
@@ -47580,10 +47684,6 @@ const CitizenConsent = ({
         const formatted = `${map.day} ${map.month} ${map.year} ${map.weekday} ${map.hour}:${map.minute}:${map.second} ${map.dayPeriod} ${map.timeZoneName}`;
         setOTPVerifiedTimestamp(formatted);
         sessionStorage.setItem("otpVerifiedTimestampcitizen", formatted);
-        setUser({
-          info,
-          ...tokens
-        });
         setSetOtpLoading(false);
         setShowOTPInput(false);
         setIsOTPVerified(true);
@@ -47594,7 +47694,30 @@ const CitizenConsent = ({
         return "";
       }
     } catch (error) {
-      console.error("Error verifying OTP:", error);
+      setOTPError(t("Error verifying OTP"));
+      setSetOtpLoading(false);
+      return "";
+    }
+  };
+  const handleVerifyOTPClickNew = async () => {
+    setSetOtpLoading(true);
+    const stateCode = "pb";
+    const requestData = {
+      name: getModalData === null || getModalData === void 0 ? void 0 : getModalData.name,
+      emailId: getModalData === null || getModalData === void 0 ? void 0 : getModalData.emailId,
+      username: getModalData === null || getModalData === void 0 ? void 0 : getModalData.mobileNumber,
+      otpReference: otp,
+      tenantId: "pb"
+    };
+    try {
+      const {
+        ResponseInfo,
+        UserRequest: info,
+        ...tokens
+      } = await Digit.UserService.registerUser(requestData, stateCode);
+      setSetOtpLoading(false);
+      setIsOTPVerified(true);
+    } catch (error) {
       setOTPError(t("Error verifying OTP"));
       setSetOtpLoading(false);
       return "";
@@ -47603,17 +47726,15 @@ const CitizenConsent = ({
   const handleGetOTPClick = async () => {
     setLoader(true);
     try {
-      var _user$info5;
       const response = await Digit.UserService.sendOtp({
         otp: {
           mobileNumber: getModalData === null || getModalData === void 0 ? void 0 : getModalData.mobileNumber,
-          tenantId: user === null || user === void 0 ? void 0 : (_user$info5 = user.info) === null || _user$info5 === void 0 ? void 0 : _user$info5.tenantId,
-          userType: "CITIZEN",
+          tenantId: "pb",
+          userType: "citizen",
           type: "login"
         }
       });
       setLoader(false);
-      console.log("  Full OTP send response:", JSON.stringify(response, null, 2));
       if (response !== null && response !== void 0 && response.error) {
         if (response.error.fields && Array.isArray(response.error.fields)) {
           const hasUnknownCredential = response.error.fields.some(field => {
@@ -47762,7 +47883,7 @@ const CitizenConsent = ({
   }, /*#__PURE__*/React.createElement(SubmitBar, {
     label: t("BPA_CLOSE"),
     onSubmit: closeModal
-  })), /*#__PURE__*/React.createElement("br", null), !isCitizenDeclared && !isOTPVerified && /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("br", null), !isCitizenDeclared && !isOTPVerified && !getShowOtp && /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       justifyContent: "flex-end"
@@ -47771,12 +47892,12 @@ const CitizenConsent = ({
     label: t("BPA_UPLOAD"),
     onSubmit: handleGetOTPClick,
     disabled: !isValidMobileNumber
-  })), showOTPInput && !isCitizenDeclared && !isOTPVerified && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(CardLabel, null, t("BPA_OTP")), /*#__PURE__*/React.createElement(OTPInput, {
+  })), showOTPInput && !isCitizenDeclared && !isOTPVerified && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(CardLabel, null, t("CHB_OTP")), /*#__PURE__*/React.createElement(OTPInput, {
     length: 6,
     onChange: value => setOTP(value),
     value: otp
   }), /*#__PURE__*/React.createElement(SubmitBar, {
-    label: t("VERIFY_OTP"),
+    label: t("CHB_VERIFY_OTP"),
     onSubmit: handleVerifyOTPClick
   }), otpError && /*#__PURE__*/React.createElement(CardLabel, {
     style: {
@@ -47786,7 +47907,14 @@ const CitizenConsent = ({
     style: {
       color: "green"
     }
-  }, t(otpSuccess))), isOTPVerified && !isCitizenDeclared && /*#__PURE__*/React.createElement("div", {
+  }, t(otpSuccess))), getShowOtp && !isOTPVerified && !isCitizenDeclared && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(CardLabel, null, t("CHB_OTP")), /*#__PURE__*/React.createElement(OTPInput, {
+    length: 6,
+    onChange: value => setOTP(value),
+    value: otp
+  }), /*#__PURE__*/React.createElement(SubmitBar, {
+    label: t("CHB_VERIFY_OTP"),
+    onSubmit: handleVerifyOTPClickNew
+  })), isOTPVerified && !isCitizenDeclared && /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       justifyContent: "flex-end"
@@ -47805,7 +47933,7 @@ const CHBCitizenDetailsNew = ({
   currentStepData,
   onGoBack
 }) => {
-  var _user$info, _user$info2, _user$info3;
+  var _user$info, _user$info2, _user$info3, _user$info4;
   const tenantId = window.location.href.includes("citizen") ? window.localStorage.getItem("CITIZEN.CITY") : window.localStorage.getItem("Employee.tenant-id");
   const isCitizen = window.location.href.includes("citizen");
   const stateId = Digit.ULBService.getStateId();
@@ -47819,6 +47947,7 @@ const CHBCitizenDetailsNew = ({
     email: false,
     address: false
   });
+  const [getShowOtp, setShowOtp] = useState(false);
   const {
     control,
     handleSubmit,
@@ -47829,11 +47958,13 @@ const CHBCitizenDetailsNew = ({
     getValues,
     watch
   } = useForm({
+    mode: "onChange",
+    reValidateMode: "onChange",
     defaultValues: {
       name: isCitizen && (user === null || user === void 0 ? void 0 : (_user$info = user.info) === null || _user$info === void 0 ? void 0 : _user$info.name) || "",
       emailId: isCitizen && (user === null || user === void 0 ? void 0 : (_user$info2 = user.info) === null || _user$info2 === void 0 ? void 0 : _user$info2.emailId) || "",
       mobileNumber: isCitizen && (user === null || user === void 0 ? void 0 : (_user$info3 = user.info) === null || _user$info3 === void 0 ? void 0 : _user$info3.mobileNumber) || "",
-      address: ""
+      address: isCitizen && (user === null || user === void 0 ? void 0 : (_user$info4 = user.info) === null || _user$info4 === void 0 ? void 0 : _user$info4.permanentCity) || ""
     }
   });
   const onSubmit = async data => {
@@ -47842,19 +47973,18 @@ const CHBCitizenDetailsNew = ({
     if (currentStepData !== null && currentStepData !== void 0 && (_currentStepData$venu = currentStepData.venueDetails) !== null && _currentStepData$venu !== void 0 && (_currentStepData$venu2 = _currentStepData$venu[0]) !== null && _currentStepData$venu2 !== void 0 && _currentStepData$venu2.bookingNo) {
       goNext(currentStepData === null || currentStepData === void 0 ? void 0 : currentStepData.venueDetails);
     } else {
-      var _currentStepData$owne, _user$info4, _baseApplication$purp, _baseApplication$purp2;
+      var _currentStepData$owne, _user$info5, _baseApplication$purp, _baseApplication$purp2;
       const baseApplication = (currentStepData === null || currentStepData === void 0 ? void 0 : (_currentStepData$owne = currentStepData.ownerDetails) === null || _currentStepData$owne === void 0 ? void 0 : _currentStepData$owne.hallsBookingApplication) || {};
       if (!isCitizenDeclared) {
         alert("Please upload Self Certificate");
         return;
       }
-      console.log("baseApplication", baseApplication);
       const applicantDetail = {
         tenantId: tenantId,
         applicantName: data === null || data === void 0 ? void 0 : data.name,
         applicantMobileNo: data === null || data === void 0 ? void 0 : data.mobileNumber,
         applicantEmailId: data === null || data === void 0 ? void 0 : data.emailId,
-        type: user === null || user === void 0 ? void 0 : (_user$info4 = user.info) === null || _user$info4 === void 0 ? void 0 : _user$info4.type
+        type: user === null || user === void 0 ? void 0 : (_user$info5 = user.info) === null || _user$info5 === void 0 ? void 0 : _user$info5.type
       };
       const additionalDetails = {
         ...(baseApplication === null || baseApplication === void 0 ? void 0 : baseApplication.additionalDetails),
@@ -47881,7 +48011,6 @@ const CHBCitizenDetailsNew = ({
           additionalDetails
         }
       };
-      console.log("checkpayload", payload);
       setLoader(true);
       try {
         const response = await Digit.CHBServices.create(payload);
@@ -47906,70 +48035,27 @@ const CHBCitizenDetailsNew = ({
   const updateUser = async () => {
     const checkData = getValues();
     setLoader(true);
-    console.log("checkData", checkData);
+    const tenantId = "pb";
     const payload = {
-      tenantId: "pb",
-      name: (checkData === null || checkData === void 0 ? void 0 : checkData.name) || null,
-      userName: (checkData === null || checkData === void 0 ? void 0 : checkData.mobileNumber) || null,
-      mobileNumber: (checkData === null || checkData === void 0 ? void 0 : checkData.mobileNumber) || null,
-      emailId: (checkData === null || checkData === void 0 ? void 0 : checkData.email) || null,
-      gender: (checkData === null || checkData === void 0 ? void 0 : checkData.gender) || "MALE",
-      fatherOrHusbandName: (checkData === null || checkData === void 0 ? void 0 : checkData.fatherOrHusbandName) || null,
-      permanentCity: (checkData === null || checkData === void 0 ? void 0 : checkData.permanentCity) || null,
-      correspondenceCity: (checkData === null || checkData === void 0 ? void 0 : checkData.correspondenceCity) || null,
-      permanentDistrict: (checkData === null || checkData === void 0 ? void 0 : checkData.permanentDistrict) || null,
-      permanentState: (checkData === null || checkData === void 0 ? void 0 : checkData.permanentState) || null,
-      correspondenceState: (checkData === null || checkData === void 0 ? void 0 : checkData.correspondenceState) || null,
-      correspondenceDistrict: (checkData === null || checkData === void 0 ? void 0 : checkData.correspondenceDistrict) || null,
-      type: "CITIZEN",
-      isPrimaryOwner: true,
-      ownerType: "NONE",
-      status: true,
-      active: true,
-      accountLocked: false,
-      correspondenceAddress: null,
-      permanentAddress: null,
-      permanentPinCode: null,
-      correspondencePinCode: null,
-      ownerId: null,
-      ownerShipPercentage: null,
-      institutionId: null,
-      documents: null,
-      relationship: null,
-      pan: null,
-      aadhaarNumber: null,
-      dob: null,
-      pwdExpiryDate: null,
-      locale: null,
-      signature: null,
-      bloodGroup: null,
-      identificationMark: null,
-      photo: null,
-      roles: [{
-        code: "CITIZEN",
-        name: "CITIZEN",
-        tenantId: "pb"
-      }],
-      createdBy: "0",
-      lastModifiedBy: "0",
-      createdDate: null,
-      lastModifiedDate: null,
-      otpReference: null
+      otp: {
+        tenantId,
+        mobileNumber: (checkData === null || checkData === void 0 ? void 0 : checkData.mobileNumber) || null,
+        name: (checkData === null || checkData === void 0 ? void 0 : checkData.name) || null,
+        emailId: (checkData === null || checkData === void 0 ? void 0 : checkData.emailId) || null,
+        type: "register"
+      }
     };
     try {
-      const response = await Digit.UserService.createUser(payload, tenantId);
+      const response = await Digit.UserService.sendOtp(payload, tenantId);
       setLoader(false);
-      console.log("response", response);
+      setShowOtp(true);
     } catch (err) {
       setLoader(false);
-      console.log(err);
     }
   };
   const handleModalData = e => {
     var _currentStepData$owne2, _getValues, _getValues2, _getValues3, _getValues4, _mapData$purpose, _mapData$bookingSlotD, _mapData$bookingSlotD2, _mapData$bookingSlotD3, _mapData$bookingSlotD4, _mapData$bookingSlotD5;
-    console.log("currentStepData", currentStepData);
-    console.log("getvalues", getValues());
-    if (!getUser) {
+    if (!getUser && !isCitizen) {
       updateUser();
     }
     const mapData = currentStepData === null || currentStepData === void 0 ? void 0 : (_currentStepData$owne2 = currentStepData.ownerDetails) === null || _currentStepData$owne2 === void 0 ? void 0 : _currentStepData$owne2.hallsBookingApplication;
@@ -47987,7 +48073,6 @@ const CHBCitizenDetailsNew = ({
       security: 5000,
       rent: mapData === null || mapData === void 0 ? void 0 : mapData.amount
     };
-    console.log("payload", payload);
     setModalData(payload);
     if (e.target.checked) setShowTermsPopup(true);
   };
@@ -48000,13 +48085,13 @@ const CHBCitizenDetailsNew = ({
         mobileNumber: value,
         userType: "CITIZEN"
       }, {});
-      console.log("userData", userData);
+      sessionStorage.removeItem("CitizenConsentdocFilestoreidCHB");
       setUser(userData === null || userData === void 0 ? void 0 : (_userData$user = userData.user) === null || _userData$user === void 0 ? void 0 : _userData$user[0]);
       if (userData !== null && userData !== void 0 && (_userData$user2 = userData.user) !== null && _userData$user2 !== void 0 && _userData$user2[0]) {
         setValue("name", userData.user[0].name);
         setValue("emailId", userData.user[0].emailId);
         setValue("address", userData.user[0].permanentAddress);
-        clearErrors(["name", "emailId"]);
+        clearErrors(["name", "emailId", "address"]);
       }
       setLoader(false);
     } catch (error) {
@@ -48043,10 +48128,12 @@ const CHBCitizenDetailsNew = ({
       },
       value: props.value,
       onChange: e => {
-        console.log("eee", e);
         props.onChange(e);
         setValue("name", "");
         setValue("emailId", "");
+        setValue("address", "");
+        setUser("");
+        setShowOtp(false);
         if (e.length === 10) {
           handleMobileChange(e);
         }
@@ -48226,6 +48313,8 @@ const CHBCitizenDetailsNew = ({
     showTermsPopupOwner: showTermsPopup,
     setShowTermsPopupOwner: setShowTermsPopup,
     getModalData: getModalData,
+    getUser: getUser,
+    getShowOtp: getShowOtp,
     tenantId: tenantId
   }), loader && /*#__PURE__*/React.createElement(Loader, {
     page: true
@@ -48402,7 +48491,7 @@ function CHBDocument$1({
       flexWrap: "wrap"
     }
   }, documents === null || documents === void 0 ? void 0 : documents.map((document, index) => {
-    let documentLink = pdfDownloadLink(data.pdfFiles, document === null || document === void 0 ? void 0 : document.fileStoreId);
+    let documentLink = pdfDownloadLink$1(data.pdfFiles, document === null || document === void 0 ? void 0 : document.fileStoreId);
     return /*#__PURE__*/React.createElement("a", {
       target: "_",
       href: documentLink,
@@ -48731,6 +48820,7 @@ const CHBSelectProofIdentity = ({
   const [enableSubmit, setEnableSubmit] = useState(true);
   const [checkRequiredFields, setCheckRequiredFields] = useState(false);
   const tenantId = window.location.href.includes("employee") ? Digit.ULBService.getCurrentPermanentCity() : localStorage.getItem("CITIZEN.CITY");
+  console.log("tenantId", tenantId);
   const {
     data,
     isLoading