@djb25/digit-ui-module-common 1.0.5 → 1.0.7

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import { Loader, Card, RadioButtons, MobileNumber, TextInput, CheckBox, CitizenConsentForm, SubmitBar, KeyNote, Header, Toast, CardSubHeader, CardLabel, CardSectionHeader, InfoBanner, Banner, CardText, StatusTable, Row, DownloadPrefixIcon, HomeIcon, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, DatePicker, SearchIconSvg, CardLabelError, Dropdown, FormComposer, ActionBar, Menu } from '@djb25/digit-ui-react-components';
+import { Loader, Card, RadioButtons, MobileNumber, TextInput, CheckBox, CitizenConsentForm, SubmitBar, KeyNote, Header, Toast, CardSubHeader, CardLabel, CardSectionHeader, InfoBanner, Banner, CardText, StatusTable, Row, DownloadPrefixIcon, HomeIcon, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, DatePicker, LabelFieldPair, SearchIconSvg, CardLabelError, Dropdown, VerticalTimeline, FormComposer, ActionBar, Menu, LayoutWrapper } from '@djb25/digit-ui-react-components';
 import React, { useState, useEffect, useMemo, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation, useParams, Link, useRouteMatch, Switch, Route } from 'react-router-dom';
@@ -2868,6 +2868,8 @@ const CitizenPayment = _ref => {
     moduleCode = _ref.moduleCode;
   const _useRouteMatch = useRouteMatch(),
     currentPath = _useRouteMatch.path;
+  const _useLocation = useLocation(),
+    routerState = _useLocation.state;
   const commonProps = {
     stateCode,
     cityCode,
@@ -2906,7 +2908,33 @@ const CitizenPayment = _ref => {
     show: pathname.includes("/failure")
   }];
   const getDynamicBreadcrumbs = () => {
-    return crumbs.filter(crumb => crumb.show);
+    let activeCrumbs = crumbs.filter(crumb => crumb.show);
+    const isWNS = pathname.includes("/WS") || pathname.includes("/SW") || window.location.search.includes("workflow=WNS");
+    if (isWNS) {
+      activeCrumbs.splice(1, 0, {
+        path: "/digit-ui/citizen/ws-home",
+        label: t("ES_TITLE_WATER_AND_SEWERAGE"),
+        show: true
+      });
+      if (routerState !== null && routerState !== void 0 && routerState.fromMyApplications || routerState !== null && routerState !== void 0 && routerState.fromApplicationDetails) {
+        activeCrumbs.splice(2, 0, {
+          path: "/digit-ui/citizen/ws/my-applications",
+          label: t("CS_HOME_MY_APPLICATIONS"),
+          show: true
+        });
+      }
+      if (routerState !== null && routerState !== void 0 && routerState.fromApplicationDetails) {
+        activeCrumbs.splice(3, 0, {
+          label: t("WS_APPLICATION_DETAILS_HEADER"),
+          show: true,
+          onClick: () => window.history.back()
+        });
+      }
+    }
+    if (activeCrumbs.length > 0) {
+      activeCrumbs[activeCrumbs.length - 1].path = "";
+    }
+    return activeCrumbs;
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement("div", {
     className: "ground-container employee-app-container form-container"
@@ -3028,6 +3056,7 @@ const useCashPaymentDetails = (props, t) => {
     body: [{
       withoutLabel: true,
       type: "custom",
+      colSpan: "span 2",
       populators: {
         name: "ManualRecieptDetails",
         customProps: {},
@@ -3089,6 +3118,7 @@ const useCardPaymentDetails = (props, t) => {
     body: [{
       withoutLabel: true,
       type: "custom",
+      colSpan: "span 2",
       populators: {
         name: "paymentModeDetails",
         customProps: {},
@@ -3132,54 +3162,26 @@ const CardDetailsComponent = _ref => {
       });
     }
   }, [last4Digits, transactionNumber, reTransanctionNumber]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair"
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: "card-label"
-  }, t("NOC_PAYMENT_CARD_LAST_DIGITS_LABEL") + " *"), /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "field-container"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "employee-card-input",
+  return /*#__PURE__*/React.createElement("div", {
+    className: "formcomposer-section-grid"
+  }, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("NOC_PAYMENT_CARD_LAST_DIGITS_LABEL") + " *"), /*#__PURE__*/React.createElement(TextInput, {
     value: last4Digits,
-    type: "text",
     name: "instrumentNumber",
     maxLength: "4",
     minLength: "4",
     required: true,
     onChange: e => setLast4Digits(e.target.value)
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair"
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: "card-label"
-  }, t("NOC_PAYMENT_TRANS_NO_LABEL") + " *"), /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "field-container"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "employee-card-input",
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("NOC_PAYMENT_TRANS_NO_LABEL") + " *"), /*#__PURE__*/React.createElement(TextInput, {
     value: transactionNumber,
-    type: "text",
     name: "instrumentNumber",
     required: true,
     onChange: e => setTransactionNumber(e.target.value)
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair"
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: "card-label"
-  }, t("NOC_PAYMENT_RENTR_TRANS_LABEL") + " *"), /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "field-container"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "employee-card-input",
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("NOC_PAYMENT_RENTR_TRANS_LABEL") + " *"), /*#__PURE__*/React.createElement(TextInput, {
     value: reTransanctionNumber,
-    type: "text",
     name: "instrumentNumber",
     required: true,
     onChange: e => setReTransanctionNumber(e.target.value)
-  })))));
+  })));
 };
 
 const useChequeDetails = (props, t) => {
@@ -3189,6 +3191,7 @@ const useChequeDetails = (props, t) => {
     body: [{
       withoutLabel: true,
       type: "custom",
+      colSpan: "span 2",
       populators: {
         name: "paymentModeDetails",
         customProps: {},
@@ -3278,92 +3281,46 @@ const ChequeDetailsComponent = props => {
     setIfscCodeError("");
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair"
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: "card-label"
-  }, t("PAYMENT_CHQ_NO_LABEL"), " *"), /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "field-container"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "employee-card-input",
+    className: "formcomposer-section-grid"
+  }, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PAYMENT_CHQ_NO_LABEL") + " *"), /*#__PURE__*/React.createElement(TextInput, {
     value: instrumentNumber,
-    type: "text",
-    name: "instrumentNumber",
     onChange: e => setChequeNo(e.target.value),
+    name: "instrumentNumber",
     required: true
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair"
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: "card-label"
-  }, t("PAYMENT_CHEQUE_DATE_LABEL"), " *"), /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "field-container"
-  }, /*#__PURE__*/React.createElement(DatePicker, {
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PAYMENT_CHEQUE_DATE_LABEL") + " *"), /*#__PURE__*/React.createElement(DatePicker, {
     isRequired: true,
     date: instrumentDate,
     onChange: d => {
       setChequeDate(d);
     }
-  })))),
-  /*#__PURE__*/
-  React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair"
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: "card-label"
-  }, t("PAYMENT_IFSC_CODE_LABEL"), " *"), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PAYMENT_IFSC_CODE_LABEL") + " *"), /*#__PURE__*/React.createElement("div", {
     className: "field"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "cheque-date"
   }, /*#__PURE__*/React.createElement("input", {
     value: ifscCode,
     type: "text",
     onChange: handleIFSCChange,
-    minlength: "11",
-    maxlength: "11",
+    minLength: "11",
+    maxLength: "11",
     required: true
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: setBankDetailsFromIFSC
-  }, /*#__PURE__*/React.createElement(SearchIconSvg, null)))))), ifscCodeError && /*#__PURE__*/React.createElement(CardLabelError, {
+  }, /*#__PURE__*/React.createElement(SearchIconSvg, null))), ifscCodeError && /*#__PURE__*/React.createElement(CardLabelError, {
     style: {
-      width: "70%",
-      marginLeft: "30%",
       fontSize: "12px",
       marginTop: "-21px"
     }
-  }, ifscCodeError), /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair"
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: "card-label"
-  }, t("PAYMENT_BANK_NAME_LABEL")), /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "field-container"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "employee-card-input",
+  }, ifscCodeError))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PAYMENT_BANK_NAME_LABEL")), /*#__PURE__*/React.createElement(TextInput, {
     value: bankName,
-    type: "text",
-    className: "employee-card-input",
     readOnly: true,
     disabled: true
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair"
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: "card-label"
-  }, t("PAYMENT_BANK_BRANCH_LABEL")), /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "field-container"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "employee-card-input",
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PAYMENT_BANK_BRANCH_LABEL")), /*#__PURE__*/React.createElement(TextInput, {
     value: bankBranch,
-    type: "text",
-    className: "employee-card-input",
     readOnly: true,
     disabled: true
-  }))))));
+  }))));
 };
 
 function listCacheClear() {
@@ -4905,7 +4862,6 @@ const BillDetails$1 = _ref => {
   };
   const config = BillDetailsKeyNoteConfig()[ModuleWorkflow ? ModuleWorkflow : businessService];
   const getAdvanceAmountPaid = (applicationData === null || applicationData === void 0 ? void 0 : applicationData.applicationStatus) === "DSO_INPROGRESS";
-  console.log(bill, "bill");
   const renderArrearDetailsForWNS = () => {
     var _yearWiseBills$filter, _yearWiseBills$filter2, _yearWiseBills$filter3, _yearWiseBills$filter4, _yearWiseBills$filter5;
     return /*#__PURE__*/React.createElement("table", {
@@ -5515,10 +5471,17 @@ const CollectPayment = props => {
     timerValues: state === null || state === void 0 ? void 0 : state.timerValue,
     t: t,
     SlotSearchData: state === null || state === void 0 ? void 0 : state.SlotSearchData
-  }))), /*#__PURE__*/React.createElement(FormComposer, {
-    cardStyle: {
-      paddingBottom: "100px"
-    },
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "employee-form-section-wrapper"
+  }, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: [{
+      timeLine: [{
+        actions: t("PAYMENT_COLLECT_LABEL"),
+        currentStep: 1
+      }]
+    }],
+    showFinalStep: false
+  }), /*#__PURE__*/React.createElement(FormComposer, {
     label: t("PAYMENT_COLLECT_LABEL"),
     config: getFormConfig(),
     onSubmit: onSubmit,
@@ -5538,7 +5501,7 @@ const CollectPayment = props => {
     style: {
       maxWidth: "670px"
     }
-  }));
+  })));
 };
 
 const convertEpochToDate$1 = dateEpoch => {
@@ -6953,24 +6916,38 @@ const EmployeePayment = _ref => {
     let crumbs = [{
       icon: HomeIcon,
       path: "/digit-ui/employee"
-    }, {
-      label: t("ES_COMMON_HOME"),
-      path: "/digit-ui/employee"
     }];
-    if (pathname.includes("/fsm/home")) {
+    if (pathname.includes("/payment/collect")) {
+      crumbs.push({
+        label: t("PAYMENT_COLLECT_LABEL"),
+        path: ""
+      });
+    } else if (pathname.includes("/payment/success")) {
       crumbs.push({
-        label: t("ES_TITLE_FSM"),
-        path: "/digit-ui/employee/fsm/home"
+        label: t("CS_PAYMENT_SUCCESSFUL"),
+        path: ""
       });
-    } else if (pathname.includes("/fsm/inbox")) {
+    } else if (pathname.includes("/payment/failure")) {
       crumbs.push({
-        label: t("ES_TITLE_INBOX"),
-        path: "/digit-ui/employee/fsm/inbox"
+        label: t("CS_PAYMENT_FAILED"),
+        path: ""
       });
+    } else {
+      if (pathname.includes("/fsm/home")) {
+        crumbs.push({
+          label: t("ES_TITLE_FSM"),
+          path: "/digit-ui/employee/fsm/home"
+        });
+      } else if (pathname.includes("/fsm/inbox")) {
+        crumbs.push({
+          label: t("ES_TITLE_INBOX"),
+          path: "/digit-ui/employee/fsm/inbox"
+        });
+      }
     }
     return crumbs;
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "ground-container employee-app-container form-container"
   }, /*#__PURE__*/React.createElement(ModuleHeader, {
     leftContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowLeft, {
@@ -6982,17 +6959,19 @@ const EmployeePayment = _ref => {
     className: "employee-form"
   }, /*#__PURE__*/React.createElement("div", {
     className: "employee-form-content"
-  }, /*#__PURE__*/React.createElement(PrivateRoute, {
+  }, /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(PrivateRoute, {
     path: currentPath + "/collect/:businessService/:consumerCode"
+  }, /*#__PURE__*/React.createElement(LayoutWrapper, {
+    layoutClass: "action"
   }, /*#__PURE__*/React.createElement(CollectPayment, _extends({}, commonProps, {
     basePath: currentPath
-  }))), /*#__PURE__*/React.createElement(PrivateRoute, {
+  })))), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: currentPath + "/success/:businessService/:receiptNumber/:consumerCode"
   }, /*#__PURE__*/React.createElement(SuccessfulPayment$1, commonProps)), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: currentPath + "/integration/:moduleName/:pageName"
   }, /*#__PURE__*/React.createElement(IFrameInterface, commonProps)), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: currentPath + "/failure"
-  }, /*#__PURE__*/React.createElement(FailedPayment$1, commonProps))))))));
+  }, /*#__PURE__*/React.createElement(FailedPayment$1, commonProps)))))));
 };
 
 const PaymentModule = _ref => {