@djb25/digit-ui-module-wt 1.0.4 → 1.0.6

package/dist/index.modern.js

@@ -182,7 +182,7 @@ const VerticalTimeline = ({
 };
 
 const WTCreate = () => {
-  var _Digit, _Digit$ComponentRegis, _Digit2, _Digit2$ComponentRegi, _Digit3, _Digit3$ComponentRegi, _Digit4, _Digit4$ComponentRegi;
+  var _Digit, _Digit$ComponentRegis, _Digit2, _Digit2$ComponentRegi, _Digit3, _Digit3$ComponentRegi, _Digit4, _Digit4$ComponentRegi, _params$serviceType2, _params$serviceType2$, _Digit5, _Digit5$ComponentRegi, _Digit6, _Digit6$ComponentRegi, _Digit7, _Digit7$ComponentRegi, _Digit8, _Digit8$ComponentRegi, _Digit9, _Digit9$ComponentRegi;
   const queryClient = useQueryClient();
   const match = useRouteMatch();
   const {
@@ -196,7 +196,6 @@ const WTCreate = () => {
   const [params, setParams, clearParams] = Digit.Hooks.useSessionStorage("WT_Create", {});
   if ((!params.serviceType || Object.keys(params.serviceType).length === 0) && pathname.includes("employee")) {
     if (pathname.includes("mt")) {
-      console.log("MT Create");
       setParams({
         "serviceType": {
           "serviceType": {
@@ -228,101 +227,35 @@ const WTCreate = () => {
       });
     }
   }
-  const goNext = (skipStep, index, isAddMultiple, key) => {
-    let currentPath = pathname.split("/").pop(),
-      lastchar = currentPath.charAt(currentPath.length - 1),
-      isMultiple = false,
-      nextPage;
-    if (Number(parseInt(currentPath)) || currentPath == "0" || currentPath == "-1") {
-      if (currentPath == "-1" || currentPath == "-2") {
-        currentPath = pathname.slice(0, -3);
-        currentPath = currentPath.split("/").pop();
-        isMultiple = true;
-      } else {
-        currentPath = pathname.slice(0, -2);
-        currentPath = currentPath.split("/").pop();
-        isMultiple = true;
-      }
-    } else {
-      isMultiple = false;
-    }
-    if (!isNaN(lastchar)) {
-      isMultiple = true;
-    }
-    let {
-      nextStep = {}
-    } = config.find(routeObj => routeObj.route === currentPath);
-    let redirectWithHistory = history.push;
-    if (skipStep) {
-      redirectWithHistory = history.replace;
-    }
-    if (isAddMultiple) {
-      nextStep = key;
-    }
-    if (nextStep === "request-details") {
-      var _params$serviceType, _params$serviceType$s;
-      const code = params === null || params === void 0 ? void 0 : (_params$serviceType = params.serviceType) === null || _params$serviceType === void 0 ? void 0 : (_params$serviceType$s = _params$serviceType.serviceType) === null || _params$serviceType$s === void 0 ? void 0 : _params$serviceType$s.code;
-      if (code === "MobileToilet") {
-        nextStep = "toiletRequest-details";
-      } else if (code === "TREE_PRUNING") {
-        nextStep = "treePruningRequest-details";
-      }
-    }
-    if (nextStep === null) {
-      return redirectWithHistory(`${match.path}/check`);
-    }
-    if (!isNaN(nextStep.split("/").pop())) {
-      nextPage = `${match.path}/${nextStep}`;
-    } else {
-      nextPage = isMultiple && nextStep !== "map" ? `${match.path}/${nextStep}/${index}` : `${match.path}/${nextStep}`;
-    }
-    redirectWithHistory(nextPage);
-  };
+  if (pathname.includes("employee") && pathname.endsWith("/info")) {
+    history.replace(`${match.path}/form`);
+  }
   if (params && Object.keys(params).length > 0 && window.location.href.includes("/service-type") && sessionStorage.getItem("docReqScreenByBack") !== "true") {
     clearParams();
     queryClient.invalidateQueries("WT_Create");
   }
   const wt_create = async () => {
-    var _params$serviceType2, _params$serviceType2$, _params$serviceType3, _params$serviceType3$, _params$serviceType4, _params$serviceType4$;
-    if ((params === null || params === void 0 ? void 0 : (_params$serviceType2 = params.serviceType) === null || _params$serviceType2 === void 0 ? void 0 : (_params$serviceType2$ = _params$serviceType2.serviceType) === null || _params$serviceType2$ === void 0 ? void 0 : _params$serviceType2$.code) === "WT") {
-      history.push(`${match.path}/wt-acknowledgement`);
-    }
-    if ((params === null || params === void 0 ? void 0 : (_params$serviceType3 = params.serviceType) === null || _params$serviceType3 === void 0 ? void 0 : (_params$serviceType3$ = _params$serviceType3.serviceType) === null || _params$serviceType3$ === void 0 ? void 0 : _params$serviceType3$.code) === "MobileToilet") {
-      history.push(`${match.path}/mt-acknowledgement`);
-    }
-    if ((params === null || params === void 0 ? void 0 : (_params$serviceType4 = params.serviceType) === null || _params$serviceType4 === void 0 ? void 0 : (_params$serviceType4$ = _params$serviceType4.serviceType) === null || _params$serviceType4$ === void 0 ? void 0 : _params$serviceType4$.code) === "TREE_PRUNING") {
-      history.push(`${match.path}/tp-acknowledgement`);
-    }
+    var _params$serviceType, _params$serviceType$s;
+    const code = params === null || params === void 0 ? void 0 : (_params$serviceType = params.serviceType) === null || _params$serviceType === void 0 ? void 0 : (_params$serviceType$s = _params$serviceType.serviceType) === null || _params$serviceType$s === void 0 ? void 0 : _params$serviceType$s.code;
+    if (code === "WT") history.push(`${match.path}/wt-acknowledgement`);
+    if (code === "MobileToilet") history.push(`${match.path}/mt-acknowledgement`);
+    if (code === "TREE_PRUNING") history.push(`${match.path}/tp-acknowledgement`);
   };
-  function handleSelect(key, data, skipStep, index, isAddMultiple = false) {
-    if (key === "owners") {
-      let owners = params.owners || [];
-      owners[index] = data;
-      setParams({
-        ...params,
-        ...{
-          [key]: [...owners]
-        }
-      });
-    } else if (key === "units") {
-      let units = params.units || [];
-      units = data;
+  function handleSelect(key, data) {
+    if (key === "owners") ; else if (key === "units") {
       setParams({
         ...params,
-        units
+        units: data
       });
     } else {
       setParams({
         ...params,
-        ...{
-          [key]: {
-            ...params[key],
-            ...data
-          }
+        [key]: {
+          ...params[key],
+          ...data
         }
       });
     }
-    goNext(skipStep, index, isAddMultiple, key);
   }
   const onSuccess = () => {
     clearParams();
@@ -332,11 +265,115 @@ const WTCreate = () => {
   commonFields.forEach(obj => {
     config = config.concat(obj.body.filter(a => !a.hideInCitizen));
   });
-  config.indexRoute = pathname.includes("citizen") ? "service-type" : "info";
+  config.indexRoute = pathname.includes("citizen") ? "service-type" : "form";
   const CheckPage = (_Digit = Digit) === null || _Digit === void 0 ? void 0 : (_Digit$ComponentRegis = _Digit.ComponentRegistryService) === null || _Digit$ComponentRegis === void 0 ? void 0 : _Digit$ComponentRegis.getComponent("WTCheckPage");
   const WTAcknowledgement = (_Digit2 = Digit) === null || _Digit2 === void 0 ? void 0 : (_Digit2$ComponentRegi = _Digit2.ComponentRegistryService) === null || _Digit2$ComponentRegi === void 0 ? void 0 : _Digit2$ComponentRegi.getComponent("WTAcknowledgement");
   const MTAcknowledgement = (_Digit3 = Digit) === null || _Digit3 === void 0 ? void 0 : (_Digit3$ComponentRegi = _Digit3.ComponentRegistryService) === null || _Digit3$ComponentRegi === void 0 ? void 0 : _Digit3$ComponentRegi.getComponent("MTAcknowledgement");
   const TPAcknowledgement = (_Digit4 = Digit) === null || _Digit4 === void 0 ? void 0 : (_Digit4$ComponentRegi = _Digit4.ComponentRegistryService) === null || _Digit4$ComponentRegi === void 0 ? void 0 : _Digit4$ComponentRegi.getComponent("TPAcknowledgement");
+  const serviceCode = params === null || params === void 0 ? void 0 : (_params$serviceType2 = params.serviceType) === null || _params$serviceType2 === void 0 ? void 0 : (_params$serviceType2$ = _params$serviceType2.serviceType) === null || _params$serviceType2$ === void 0 ? void 0 : _params$serviceType2$.code;
+  const ApplicantDetails = (_Digit5 = Digit) === null || _Digit5 === void 0 ? void 0 : (_Digit5$ComponentRegi = _Digit5.ComponentRegistryService) === null || _Digit5$ComponentRegi === void 0 ? void 0 : _Digit5$ComponentRegi.getComponent("ApplicantDetails");
+  const AddressDetails = (_Digit6 = Digit) === null || _Digit6 === void 0 ? void 0 : (_Digit6$ComponentRegi = _Digit6.ComponentRegistryService) === null || _Digit6$ComponentRegi === void 0 ? void 0 : _Digit6$ComponentRegi.getComponent("AddressDetails");
+  const RequestDetails = (_Digit7 = Digit) === null || _Digit7 === void 0 ? void 0 : (_Digit7$ComponentRegi = _Digit7.ComponentRegistryService) === null || _Digit7$ComponentRegi === void 0 ? void 0 : _Digit7$ComponentRegi.getComponent("RequestDetails");
+  const ToiletRequestDetails = (_Digit8 = Digit) === null || _Digit8 === void 0 ? void 0 : (_Digit8$ComponentRegi = _Digit8.ComponentRegistryService) === null || _Digit8$ComponentRegi === void 0 ? void 0 : _Digit8$ComponentRegi.getComponent("ToiletRequestDetails");
+  const TreePruningRequestDetails = (_Digit9 = Digit) === null || _Digit9 === void 0 ? void 0 : (_Digit9$ComponentRegi = _Digit9.ComponentRegistryService) === null || _Digit9$ComponentRegi === void 0 ? void 0 : _Digit9$ComponentRegi.getComponent("TreePruningRequestDetails");
+  const SinglePageForm = () => {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "24px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: sectionStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: sectionHeaderStyle
+    }, t("ES_APPLICANT_DETAILS")), /*#__PURE__*/React.createElement(ApplicantDetails, {
+      config: {
+        texts: {
+          submitBarLabel: "COMMON_SAVE_NEXT",
+          header: "ES_APPLICANT_DETAILS"
+        },
+        key: "owner"
+      },
+      onSelect: (key, data) => handleSelect(key, data),
+      t: t,
+      formData: params,
+      hideSubmitBar: true
+    })), /*#__PURE__*/React.createElement("div", {
+      style: sectionStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: sectionHeaderStyle
+    }, t("ES_ADDRESS_DETAILS")), /*#__PURE__*/React.createElement(AddressDetails, {
+      config: {
+        texts: {
+          submitBarLabel: "COMMON_SAVE_NEXT",
+          header: "ES_ADDRESS_DETAILS"
+        },
+        key: "address"
+      },
+      onSelect: (key, data) => handleSelect(key, data),
+      t: t,
+      formData: params,
+      hideSubmitBar: true
+    })), (!serviceCode || serviceCode === "WT") && /*#__PURE__*/React.createElement("div", {
+      style: sectionStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: sectionHeaderStyle
+    }, t("WT_REQUEST_DETAILS")), /*#__PURE__*/React.createElement(RequestDetails, {
+      config: {
+        texts: {
+          submitBarLabel: "COMMON_SAVE_NEXT",
+          header: "WT_REQUEST_DETAILS"
+        },
+        key: "requestDetails"
+      },
+      onSelect: (key, data) => handleSelect(key, data),
+      t: t,
+      formData: params,
+      hideSubmitBar: true
+    })), serviceCode === "MobileToilet" && /*#__PURE__*/React.createElement("div", {
+      style: sectionStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: sectionHeaderStyle
+    }, t("MT_REQUEST_DETAILS")), /*#__PURE__*/React.createElement(ToiletRequestDetails, {
+      config: {
+        texts: {
+          submitBarLabel: "COMMON_SAVE_NEXT",
+          header: "MT_REQUEST_DETAILS"
+        },
+        key: "toiletRequestDetails"
+      },
+      onSelect: (key, data) => handleSelect(key, data),
+      t: t,
+      formData: params,
+      hideSubmitBar: true
+    })), serviceCode === "TREE_PRUNING" && /*#__PURE__*/React.createElement("div", {
+      style: sectionStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: sectionHeaderStyle
+    }, t("TP_REQUEST_DETAILS")), /*#__PURE__*/React.createElement(TreePruningRequestDetails, {
+      config: {
+        texts: {
+          submitBarLabel: "COMMON_SAVE_NEXT",
+          header: "TP_REQUEST_DETAILS"
+        },
+        key: "treePruningRequestDetails"
+      },
+      onSelect: (key, data) => handleSelect(key, data),
+      t: t,
+      formData: params,
+      hideSubmitBar: true
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        justifyContent: "flex-end",
+        padding: "16px 0"
+      }
+    }, /*#__PURE__*/React.createElement("button", {
+      style: submitButtonStyle,
+      onClick: () => history.push(`${match.path}/check`)
+    }, t("COMMON_SAVE_NEXT"))));
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
@@ -358,30 +395,48 @@ const WTCreate = () => {
       flex: "1",
       overflowY: "auto"
     }
-  }, /*#__PURE__*/React.createElement(Switch, null, config.map((routeObj, index) => {
-    const {
-      component,
-      texts,
-      inputs,
-      key,
-      additionaFields
-    } = routeObj;
-    const Component = typeof component === "string" ? Digit.ComponentRegistryService.getComponent(component) : component;
-    return /*#__PURE__*/React.createElement(Route, {
-      path: `${match.path}/${routeObj.route}`,
-      key: index
-    }, /*#__PURE__*/React.createElement(Component, {
+  }, /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
+    path: `${match.path}/service-type`
+  }, (() => {
+    const routeObj = config.find(r => r.route === "service-type");
+    if (!routeObj) return null;
+    const Component = typeof routeObj.component === "string" ? Digit.ComponentRegistryService.getComponent(routeObj.component) : routeObj.component;
+    return /*#__PURE__*/React.createElement(Component, {
       config: {
-        texts,
-        inputs,
-        key,
-        additionaFields
+        texts: routeObj.texts,
+        inputs: routeObj.inputs,
+        key: routeObj.key,
+        additionaFields: routeObj.additionaFields
+      },
+      onSelect: (k, data) => {
+        handleSelect(k, data);
+        history.push(`${match.path}/info`);
       },
-      onSelect: handleSelect,
       t: t,
       formData: params
-    }));
-  }), /*#__PURE__*/React.createElement(Route, {
+    });
+  })()), /*#__PURE__*/React.createElement(Route, {
+    path: `${match.path}/info`
+  }, (() => {
+    const routeObj = config.find(r => r.route === "info");
+    if (!routeObj) return null;
+    const Component = typeof routeObj.component === "string" ? Digit.ComponentRegistryService.getComponent(routeObj.component) : routeObj.component;
+    return /*#__PURE__*/React.createElement(Component, {
+      config: {
+        texts: routeObj.texts,
+        inputs: routeObj.inputs,
+        key: routeObj.key,
+        additionaFields: routeObj.additionaFields
+      },
+      onSelect: () => {
+        history.push(`${match.path}/form`);
+      },
+      t: t,
+      formData: params
+    });
+  })()), /*#__PURE__*/React.createElement(Route, {
+    path: `${match.path}/form`
+  }, /*#__PURE__*/React.createElement(SinglePageForm, null)), /*#__PURE__*/React.createElement(Route, {
     path: `${match.path}/check`
   }, /*#__PURE__*/React.createElement(CheckPage, {
     onSubmit: wt_create,
@@ -405,6 +460,31 @@ const WTCreate = () => {
     to: `${match.path}/${config.indexRoute}`
   }))))));
 };
+const sectionStyle = {
+  background: "#fff",
+  borderRadius: "4px",
+  boxShadow: "0 2px 4px rgba(0,0,0,0.08)",
+  padding: "24px",
+  border: "1px solid #E0E0E0"
+};
+const sectionHeaderStyle = {
+  fontSize: "18px",
+  fontWeight: "700",
+  color: "#0B0C0C",
+  marginBottom: "20px",
+  paddingBottom: "12px",
+  borderBottom: "2px solid #F47738"
+};
+const submitButtonStyle = {
+  background: "#F47738",
+  color: "#fff",
+  border: "none",
+  borderRadius: "4px",
+  padding: "12px 32px",
+  fontSize: "16px",
+  fontWeight: "600",
+  cursor: "pointer"
+};
 
 const checkForNotNull = (value = "") => {
   return value && value != null && value != undefined && value != "" ? true : false;
@@ -1886,11 +1966,7 @@ const WTCheckPage = ({
   }))), /*#__PURE__*/React.createElement(CheckBox, {
     label: t("FINAL_DECLARATION_MESSAGE"),
     onChange: setdeclarationhandler,
-    styles: {
-      height: "auto",
-      marginBottom: "30px",
-      marginTop: "10px"
-    }
+    checked: agree
   })), /*#__PURE__*/React.createElement(SubmitBar, {
     label: t("COMMON_BUTTON_SUBMIT"),
     onSubmit: onSubmit,
@@ -14070,13 +14146,15 @@ const ActionModal$b = ({
     }
   });
   let vendorDescription = [];
-  dsoData === null || dsoData === void 0 ? void 0 : (_dsoData$vendor = dsoData.vendor) === null || _dsoData$vendor === void 0 ? void 0 : _dsoData$vendor.map(item => {
-    var _item$additionalDetai;
-    if ((item === null || item === void 0 ? void 0 : (_item$additionalDetai = item.additionalDetails) === null || _item$additionalDetai === void 0 ? void 0 : _item$additionalDetai.description) === "WT") {
+  dsoData === null || dsoData === void 0 ? void 0 : (_dsoData$vendor = dsoData.vendor) === null || _dsoData$vendor === void 0 ? void 0 : _dsoData$vendor.forEach(item => {
+    var _item$additionalDetai, _item$additionalDetai2;
+    if ((item === null || item === void 0 ? void 0 : (_item$additionalDetai = item.additionalDetails) === null || _item$additionalDetai === void 0 ? void 0 : _item$additionalDetai.description) === "WT" || (item === null || item === void 0 ? void 0 : (_item$additionalDetai2 = item.additionalDetails) === null || _item$additionalDetai2 === void 0 ? void 0 : _item$additionalDetai2.serviceType) === "WT") {
+      var _item$owner;
+      const displayLabel = `${item === null || item === void 0 ? void 0 : item.name} (${item === null || item === void 0 ? void 0 : (_item$owner = item.owner) === null || _item$owner === void 0 ? void 0 : _item$owner.mobileNumber})`;
       vendorDescription.push({
         code: item === null || item === void 0 ? void 0 : item.name,
-        name: item === null || item === void 0 ? void 0 : item.name,
-        i18nKey: item === null || item === void 0 ? void 0 : item.name,
+        name: displayLabel,
+        i18nKey: displayLabel,
         vendorId: item === null || item === void 0 ? void 0 : item.id
       });
     }
@@ -15966,7 +16044,7 @@ const WSAdditonalDetails = ({
     connectionDetails: [],
     plumberDetails: []
   };
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
       lineHeight: "19px",
       maxWidth: "950px",
@@ -15977,7 +16055,9 @@ const WSAdditonalDetails = ({
   }, t("WS_COMMON_CONNECTION_DETAIL")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "connection-details-new-value-wrapper"
   }, connectionDetails === null || connectionDetails === void 0 ? void 0 : connectionDetails.map((value, index) => {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Row, {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index
+    }, /*#__PURE__*/React.createElement(Row, {
       className: "border-none",
       key: `${value.title}`,
       label: `${t(`${value.title}`)}`,
@@ -15999,9 +16079,10 @@ const WSAdditonalDetails = ({
     style: cardSubHeaderStyles()
   }, t("WS_ROAD_CUTTING_DETAILS")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "plumber-details-new-value-wrapper"
-  }, roadCuttingDetails === null || roadCuttingDetails === void 0 ? void 0 : roadCuttingDetails.map(value => {
+  }, roadCuttingDetails === null || roadCuttingDetails === void 0 ? void 0 : roadCuttingDetails.map((value, index) => {
     var _value$values;
     return /*#__PURE__*/React.createElement("div", {
+      key: index,
       style: (roadCuttingDetails === null || roadCuttingDetails === void 0 ? void 0 : roadCuttingDetails.length) > 1 ? {
         border: "1px solid #D6D5D4",
         background: "#FAFAFA",
@@ -17223,18 +17304,18 @@ function ApplicationDetailsContent({
     infoClickInfoLabel: getClickInfoDetails(),
     infoClickInfoLabel1: getClickInfoDetails1()
   }) : null, applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a2 = applicationDetails.applicationDetails) === null || _applicationDetails$a2 === void 0 ? void 0 : _applicationDetails$a2.map((detail, index) => {
-    var _detail$values, _detail$additionalDet, _applicationDetails$a3, _applicationDetails$a4, _applicationDetails$a5, _detail$additionalDet2, _applicationDetails$a6, _applicationDetails$a7, _detail$additionalDet3, _detail$additionalDet4, _detail$additionalDet5, _detail$additionalDet6, _detail$additionalDet7, _detail$additionalDet8, _detail$additionalDet9, _detail$additionalDet0, _detail$additionalDet1, _workflowDetails$data, _workflowDetails$data2, _detail$additionalDet10, _detail$additionalDet11, _detail$additionalDet12, _detail$additionalDet13, _detail$additionalDet14, _detail$additionalDet15, _detail$additionalDet16, _detail$additionalDet17, _detail$additionalDet18, _detail$additionalDet19, _detail$additionalDet20, _detail$additionalDet21, _detail$additionalDet22, _detail$additionalDet23, _detail$additionalDet24, _detail$additionalDet25, _detail$additionalDet26, _detail$additionalDet27, _detail$additionalDet28, _detail$additionalDet29;
+    var _detail$title, _detail$values, _detail$additionalDet, _applicationDetails$a3, _applicationDetails$a4, _applicationDetails$a5, _detail$additionalDet2, _applicationDetails$a6, _applicationDetails$a7, _detail$additionalDet3, _detail$additionalDet4, _detail$additionalDet5, _detail$additionalDet6, _detail$additionalDet7, _detail$additionalDet8, _detail$additionalDet9, _detail$additionalDet0, _detail$additionalDet1, _workflowDetails$data, _workflowDetails$data2, _detail$additionalDet10, _detail$additionalDet11, _detail$additionalDet12, _detail$additionalDet13, _detail$additionalDet14, _detail$additionalDet15, _detail$additionalDet16, _detail$additionalDet17, _detail$additionalDet18, _detail$additionalDet19, _detail$additionalDet20, _detail$additionalDet21, _detail$additionalDet22, _detail$additionalDet23, _detail$additionalDet24, _detail$additionalDet25, _detail$additionalDet26, _detail$additionalDet27, _detail$additionalDet28, _detail$additionalDet29;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: index
     }, /*#__PURE__*/React.createElement("div", {
       style: getMainDivStyles()
-    }, index === 0 && !detail.asSectionHeader ? /*#__PURE__*/React.createElement(CardSubHeader, {
+    }, (detail === null || detail === void 0 ? void 0 : (_detail$title = detail.title) === null || _detail$title === void 0 ? void 0 : _detail$title.trim()) && (index === 0 && !detail.asSectionHeader ? /*#__PURE__*/React.createElement(CardSubHeader, {
       style: {
         marginBottom: "16px",
         fontSize: "24px"
       }
-    }, t(detail.title)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardSectionHeader, {
-      style: index == 0 && checkLocation ? {
+    }, t(detail.title)) : /*#__PURE__*/React.createElement(CardSectionHeader, {
+      style: index === 0 && checkLocation ? {
         marginBottom: "16px",
         fontSize: "24px"
       } : {
@@ -17242,7 +17323,7 @@ function ApplicationDetailsContent({
         marginTop: "32px",
         fontSize: "24px"
       }
-    }, isNocLocation ? `${t(detail.title)}` : t(detail.title), detail !== null && detail !== void 0 && detail.Component ? /*#__PURE__*/React.createElement(detail.Component, null) : null)), (detail === null || detail === void 0 ? void 0 : detail.isTable) && /*#__PURE__*/React.createElement("table", {
+    }, t(detail.title), detail !== null && detail !== void 0 && detail.Component ? /*#__PURE__*/React.createElement(detail.Component, null) : null)), (detail === null || detail === void 0 ? void 0 : detail.isTable) && /*#__PURE__*/React.createElement("table", {
       style: {
         tableLayout: "fixed",
         width: "100%",
@@ -17254,14 +17335,17 @@ function ApplicationDetailsContent({
       style: {
         textAlign: "left"
       }
-    }, detail === null || detail === void 0 ? void 0 : detail.headers.map(header => /*#__PURE__*/React.createElement("th", {
+    }, detail === null || detail === void 0 ? void 0 : detail.headers.map((header, index) => /*#__PURE__*/React.createElement("th", {
       style: {
         padding: "10px",
         paddingLeft: "5px",
         border: "1px solid black"
-      }
+      },
+      key: index
     }, t(header)))), detail === null || detail === void 0 ? void 0 : detail.tableRows.map((row, index) => {
-      return /*#__PURE__*/React.createElement("tr", null, row.map((element, idx) => Array.isArray(element) && element.length > 1 && detail.isMaintenance === true ? /*#__PURE__*/React.createElement("td", {
+      return /*#__PURE__*/React.createElement("tr", {
+        key: index
+      }, row.map((element, idx) => Array.isArray(element) && element.length > 1 && detail.isMaintenance === true ? /*#__PURE__*/React.createElement("td", {
         style: {
           paddingTop: "20px",
           textAlign: "left",
@@ -17374,7 +17458,9 @@ function ApplicationDetailsContent({
           }
         });
       }
-      return /*#__PURE__*/React.createElement("div", null, window.location.href.includes("modify") ? /*#__PURE__*/React.createElement(Row, {
+      return /*#__PURE__*/React.createElement("div", {
+        key: index
+      }, window.location.href.includes("modify") ? /*#__PURE__*/React.createElement(Row, {
         className: "border-none",
         key: `${value.title}`,
         label: `${t(`${value.title}`)}`,
@@ -18083,43 +18169,44 @@ const WorkflowTimeline = ({
   const {
     t
   } = useTranslation();
-  if (!(workflowDetails !== null && workflowDetails !== void 0 && (_workflowDetails$data = workflowDetails.data) !== null && _workflowDetails$data !== void 0 && _workflowDetails$data.timeline)) {
+  const timeline = workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data = workflowDetails.data) === null || _workflowDetails$data === void 0 ? void 0 : _workflowDetails$data.processInstances;
+  if (!timeline || timeline.length === 0) {
     return null;
   }
-  const timeline = workflowDetails.data.timeline;
-  const getStatusClass = (status, index) => {
-    if (index === 0) return 'current2';
-    return 'completed2';
+  const getStatusClass = index => {
+    if (index === 0) return "current2";
+    return "completed2";
   };
-  const convertEpochToDate = dateEpoch => {
-    if (!dateEpoch) return "N/A";
-    const date = new Date(dateEpoch);
-    const day = date.getDate().toString().padStart(2, '0');
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const convertEpochToDateTime = epoch => {
+    if (!epoch) return "N/A";
+    const date = new Date(epoch);
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
     const year = date.getFullYear().toString().slice(-2);
-    const hours = date.getHours().toString().padStart(2, '0');
-    const minutes = date.getMinutes().toString().padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
     return `${day}/${month}/${year} ${hours}:${minutes}`;
   };
   return /*#__PURE__*/React.createElement(Card, {
     className: "workflow-timeline-card2 digit-form-composer",
     style: {
-      background: '#fafafa',
-      padding: '16px'
+      background: "#fafafa",
+      padding: "16px"
     }
   }, /*#__PURE__*/React.createElement(CardSubHeader, {
     style: {
-      marginBottom: '16px',
-      fontSize: '16px',
-      fontWeight: '700',
-      color: '#374151'
+      marginBottom: "16px",
+      fontSize: "16px",
+      fontWeight: "700",
+      color: "#374151"
     }
   }, t("WORKFLOW_TIMELINE")), /*#__PURE__*/React.createElement("div", {
     className: "timeline-container2"
   }, timeline.map((checkpoint, index) => {
-    var _checkpoint$auditDeta, _checkpoint$assignes, _checkpoint$assignes2, _checkpoint$assignes3;
-    const statusClass = getStatusClass(checkpoint.status, index);
+    var _checkpoint$auditDeta, _checkpoint$auditDeta2, _checkpoint$state, _checkpoint$state2, _checkpoint$state3, _checkpoint$assigner, _checkpoint$assigner2;
+    const statusClass = getStatusClass(index);
     const showLine = index !== timeline.length - 1 && timeline.length > 1;
+    const epochTime = (checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$auditDeta = checkpoint.auditDetails) === null || _checkpoint$auditDeta === void 0 ? void 0 : _checkpoint$auditDeta.lastModifiedTime) || (checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$auditDeta2 = checkpoint.auditDetails) === null || _checkpoint$auditDeta2 === void 0 ? void 0 : _checkpoint$auditDeta2.createdTime);
     return /*#__PURE__*/React.createElement("div", {
       key: index,
       className: `timeline-item2 ${statusClass}`
@@ -18127,7 +18214,7 @@ const WorkflowTimeline = ({
       className: "timeline-marker2"
     }, /*#__PURE__*/React.createElement("div", {
       className: "timeline-circle2"
-    }, statusClass === 'completed2' ? /*#__PURE__*/React.createElement(CheckIcon, null) : /*#__PURE__*/React.createElement(ClockIcon, null)), showLine && /*#__PURE__*/React.createElement("div", {
+    }, statusClass === "completed2" ? /*#__PURE__*/React.createElement(CheckIcon, null) : /*#__PURE__*/React.createElement(ClockIcon, null)), showLine && /*#__PURE__*/React.createElement("div", {
       className: "timeline-line2"
     })), /*#__PURE__*/React.createElement("div", {
       className: "timeline-content2"
@@ -18135,17 +18222,17 @@ const WorkflowTimeline = ({
       className: "timeline-header2"
     }, /*#__PURE__*/React.createElement("div", {
       className: "timeline-title2"
-    }, t(`WF_${(checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.performedAction) === "REOPEN" ? checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.performedAction : checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.state}`)), /*#__PURE__*/React.createElement("span", {
+    }, t(`WF_${checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$state = checkpoint.state) === null || _checkpoint$state === void 0 ? void 0 : _checkpoint$state.state}`)), /*#__PURE__*/React.createElement("span", {
       className: "timeline-date2"
-    }, convertEpochToDate(checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$auditDeta = checkpoint.auditDetails) === null || _checkpoint$auditDeta === void 0 ? void 0 : _checkpoint$auditDeta.lastModified))), /*#__PURE__*/React.createElement("div", {
+    }, convertEpochToDateTime(epochTime))), /*#__PURE__*/React.createElement("div", {
       className: "timeline-body2"
     }, /*#__PURE__*/React.createElement("div", {
       className: `timeline-status-tag2 status-${statusClass}`
-    }, t(checkpoint.status)), (checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.comment) && /*#__PURE__*/React.createElement("div", {
+    }, t((checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$state2 = checkpoint.state) === null || _checkpoint$state2 === void 0 ? void 0 : _checkpoint$state2.applicationStatus) || (checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$state3 = checkpoint.state) === null || _checkpoint$state3 === void 0 ? void 0 : _checkpoint$state3.state))), (checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.comment) && /*#__PURE__*/React.createElement("div", {
       className: "timeline-comment2"
-    }, t(checkpoint.comment))), (checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$assignes = checkpoint.assignes) === null || _checkpoint$assignes === void 0 ? void 0 : _checkpoint$assignes.length) > 0 && /*#__PURE__*/React.createElement("div", {
+    }, checkpoint.comment)), (checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$assigner = checkpoint.assigner) === null || _checkpoint$assigner === void 0 ? void 0 : _checkpoint$assigner.name) && /*#__PURE__*/React.createElement("div", {
       className: "timeline-footer2"
-    }, /*#__PURE__*/React.createElement("span", null, t("ES_COMMON_ASSIGNED_TO"), ": ", /*#__PURE__*/React.createElement("strong", null, 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.name)))));
+    }, /*#__PURE__*/React.createElement("span", null, t("ES_COMMON_ASSIGNED_TO"), ":", " ", /*#__PURE__*/React.createElement("strong", null, checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$assigner2 = checkpoint.assigner) === null || _checkpoint$assigner2 === void 0 ? void 0 : _checkpoint$assigner2.name)))));
   })));
 };