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

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';
@@ -1378,7 +1378,7 @@ const SelectPaymentType$1 = props => {
             emailId: (userInfo === null || userInfo === void 0 ? void 0 : (_userInfo$info4 = userInfo.info) === null || _userInfo$info4 === void 0 ? void 0 : _userInfo$info4.emailId) || (billDetails === null || billDetails === void 0 ? void 0 : billDetails.emailId),
             username: (userInfo === null || userInfo === void 0 ? void 0 : (_userInfo$info5 = userInfo.info) === null || _userInfo$info5 === void 0 ? void 0 : _userInfo$info5.userName) || (billDetails === null || billDetails === void 0 ? void 0 : billDetails.userName)
           },
-          callbackUrl: window.location.href.includes("mcollect") || wrkflow === "WNS" ? window.location.protocol + "//" + window.location.host + "/digit-ui/citizen/payment/success/" + businessService + "/" + (wrkflow === "WNS" ? consumerCode : consumerCode) + "/" + tenantId + "?workflow=" + (wrkflow === "WNS" ? wrkflow : "mcollect") : window.location.protocol + "//" + window.location.host + "/digit-ui/citizen/payment/success/" + businessService + "/" + (wrkflow === "WNS" ? encodeURIComponent(consumerCode) : consumerCode) + "/" + tenantId + "?propertyId=" + consumerCode,
+          callbackUrl: window.location.href.includes("mcollect") || wrkflow === "WNS" ? window.location.protocol + "//" + window.location.host + "/digit-ui/citizen/payment/success/" + businessService + "/" + encodeURIComponent(consumerCode) + "/" + tenantId + "?workflow=" + (wrkflow === "WNS" ? wrkflow : "mcollect") : window.location.protocol + "//" + window.location.host + "/digit-ui/citizen/payment/success/" + businessService + "/" + encodeURIComponent(consumerCode) + "/" + tenantId + "?propertyId=" + encodeURIComponent(consumerCode),
           additionalDetails: {
             isWhatsapp: false
           }
@@ -1388,7 +1388,7 @@ const SelectPaymentType$1 = props => {
         return Promise.resolve(Digit.PaymentService.createCitizenReciept(billDetails === null || billDetails === void 0 ? void 0 : billDetails.tenantId, filterData)).then(function (data) {
           var _data$Transaction;
           const redirectUrl = data === null || data === void 0 ? void 0 : (_data$Transaction = data.Transaction) === null || _data$Transaction === void 0 ? void 0 : _data$Transaction.redirectUrl;
-          if ((d === null || d === void 0 ? void 0 : d.paymentType) == "AXIS") {
+          if ((d === null || d === void 0 ? void 0 : d.paymentType) == "AXIS" || (d === null || d === void 0 ? void 0 : d.paymentType) == "NPCI") {
             window.location = redirectUrl;
           } else if ((d === null || d === void 0 ? void 0 : d.paymentType) == "NTTDATA") {
             let redirect = redirectUrl.split("returnURL=");
@@ -1553,7 +1553,8 @@ const WrapPaymentComponent = props => {
     bpaData = _Digit$Hooks$obps$use2 === void 0 ? {} : _Digit$Hooks$obps$use2,
     isBpaSearchLoading = _Digit$Hooks$obps$use.isLoading;
   const _Digit$Hooks$usePayme = Digit.Hooks.usePaymentUpdate({
-      egId
+      egId,
+      tenantId
     }, business_service, {
       retry: false,
       staleTime: Infinity,
@@ -1676,15 +1677,26 @@ const WrapPaymentComponent = props => {
   const printReciept = function () {
     try {
       var _payments$Payments$;
-      function _temp6() {
-        return Promise.resolve(Digit.PaymentService.printReciept(state, {
-          fileStoreIds: response.filestoreIds[0]
-        })).then(function (fileStore) {
-          if (fileStore && fileStore[response.filestoreIds[0]]) {
-            window.open(fileStore[response.filestoreIds[0]], "_blank");
-          }
+      function _temp9() {
+        var _response, _response$filestoreId, _response2, _response2$fileStoreI;
+        function _temp7() {
           setPrinting(false);
-        });
+        }
+        const fileStoreId = ((_response = response) === null || _response === void 0 ? void 0 : (_response$filestoreId = _response.filestoreIds) === null || _response$filestoreId === void 0 ? void 0 : _response$filestoreId[0]) || ((_response2 = response) === null || _response2 === void 0 ? void 0 : (_response2$fileStoreI = _response2.fileStoreIds) === null || _response2$fileStoreI === void 0 ? void 0 : _response2$fileStoreI[0]);
+        const _temp6 = function () {
+          if (fileStoreId) {
+            return Promise.resolve(Digit.PaymentService.printReciept(state, {
+              fileStoreIds: fileStoreId
+            })).then(function (fileStore) {
+              if (fileStore && fileStore[fileStoreId]) {
+                window.open(fileStore[fileStoreId], "_blank");
+              }
+            });
+          } else {
+            console.error("PDF generation failed to return a filestoreId", response);
+          }
+        }();
+        return _temp6 && _temp6.then ? _temp6.then(_temp7) : _temp7(_temp6);
       }
       let generatePdfKeyForWs = "ws-onetime-receipt";
       if (printing) return Promise.resolve();
@@ -1695,13 +1707,13 @@ const WrapPaymentComponent = props => {
       let response = {
         filestoreIds: [(_payments$Payments$ = payments.Payments[0]) === null || _payments$Payments$ === void 0 ? void 0 : _payments$Payments$.fileStoreId]
       };
-      const _temp5 = function () {
+      const _temp8 = function () {
         if (!(paymentData !== null && paymentData !== void 0 && paymentData.fileStoreId)) {
           let assessmentYear = "",
             assessmentYearForReceipt = "";
           let count = 0;
           let toDate, fromDate;
-          const _temp4 = function (_payments$Payments, _payments$Payments$2, _payments$Payments$2$, _payments$Payments2) {
+          const _temp5 = function (_payments$Payments, _payments$Payments$2, _payments$Payments$2$, _payments$Payments2) {
             if ((payments === null || payments === void 0 ? void 0 : (_payments$Payments = payments.Payments) === null || _payments$Payments === void 0 ? void 0 : (_payments$Payments$2 = _payments$Payments[0]) === null || _payments$Payments$2 === void 0 ? void 0 : (_payments$Payments$2$ = _payments$Payments$2.paymentDetails) === null || _payments$Payments$2$ === void 0 ? void 0 : _payments$Payments$2$[0].businessService) == "PT" || (payments === null || payments === void 0 ? void 0 : (_payments$Payments2 = payments.Payments) === null || _payments$Payments2 === void 0 ? void 0 : _payments$Payments2[0].paymentDetails[0].businessService) == "PT.MUTATION") {
               payments.Payments[0].paymentDetails[0].bill.billDetails.map(element => {
                 if (element.amount > 0 || element.amountPaid > 0) {
@@ -1735,15 +1747,25 @@ const WrapPaymentComponent = props => {
               payments.Payments[0].additionalDetails = details;
               paymentArray[0] = payments.Payments[0];
               console.log("generatedpdfkey", generatePdfKey);
-              const _temp3 = function () {
-                if (business_service == "WS" || business_service == "SW") {
+              const _temp4 = function () {
+                if (business_service !== null && business_service !== void 0 && business_service.includes("WS") || business_service !== null && business_service !== void 0 && business_service.includes("SW")) {
                   return Promise.resolve(Digit.PaymentService.generatePdf(state, {
                     Payments: [_extends({}, paymentData)]
                   }, generatePdfKeyForWs)).then(function (_Digit$PaymentService) {
                     response = _Digit$PaymentService;
+                    const _temp2 = function (_response3, _response3$filestoreI, _response4, _response4$fileStoreI) {
+                      if (!((_response3 = response) !== null && _response3 !== void 0 && (_response3$filestoreI = _response3.filestoreIds) !== null && _response3$filestoreI !== void 0 && _response3$filestoreI[0]) && !((_response4 = response) !== null && _response4 !== void 0 && (_response4$fileStoreI = _response4.fileStoreIds) !== null && _response4$fileStoreI !== void 0 && _response4$fileStoreI[0])) {
+                        return Promise.resolve(Digit.PaymentService.generatePdf(state, {
+                          Payments: [_extends({}, paymentData)]
+                        }, generatePdfKey)).then(function (_Digit$PaymentService2) {
+                          response = _Digit$PaymentService2;
+                        });
+                      }
+                    }();
+                    if (_temp2 && _temp2.then) return _temp2.then(function () {});
                   });
                 } else {
-                  const _temp2 = function () {
+                  const _temp3 = function () {
                     if (businessServ.includes("BPA")) {
                       var _payments$Payments$0$, _payments$Payments$0$2;
                       let queryObj = {
@@ -1762,28 +1784,28 @@ const WrapPaymentComponent = props => {
                         });
                         return Promise.resolve(Digit.PaymentService.generatePdf(state, {
                           Payments: [_extends({}, updatedpayments)]
-                        }, generatePdfKey)).then(function (_Digit$PaymentService2) {
-                          response = _Digit$PaymentService2;
+                        }, generatePdfKey)).then(function (_Digit$PaymentService3) {
+                          response = _Digit$PaymentService3;
                         });
                       });
                     } else {
                       return Promise.resolve(Digit.PaymentService.generatePdf(state, {
                         Payments: [_extends({}, paymentData)]
-                      }, generatePdfKey)).then(function (_Digit$PaymentService3) {
-                        response = _Digit$PaymentService3;
+                      }, generatePdfKey)).then(function (_Digit$PaymentService4) {
+                        response = _Digit$PaymentService4;
                       });
                     }
                   }();
-                  if (_temp2 && _temp2.then) return _temp2.then(function () {});
+                  if (_temp3 && _temp3.then) return _temp3.then(function () {});
                 }
               }();
-              if (_temp3 && _temp3.then) return _temp3.then(function () {});
+              if (_temp4 && _temp4.then) return _temp4.then(function () {});
             }
           }();
-          if (_temp4 && _temp4.then) return _temp4.then(function () {});
+          if (_temp5 && _temp5.then) return _temp5.then(function () {});
         }
       }();
-      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
+      return Promise.resolve(_temp8 && _temp8.then ? _temp8.then(_temp9) : _temp9(_temp8));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -1940,7 +1962,7 @@ const WrapPaymentComponent = props => {
         }
       })).then(function (applicationDetails) {
         var _applicationDetails$h, _applicationDetails$h2;
-        function _temp8() {
+        function _temp1() {
           return Promise.resolve(Digit.PaymentService.printReciept(tenantId, {
             fileStoreIds: fileStoreId
           })).then(function (fileStore) {
@@ -1949,7 +1971,7 @@ const WrapPaymentComponent = props => {
         }
         let fileStoreId = applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$h = applicationDetails.hallsBookingApplication) === null || _applicationDetails$h === void 0 ? void 0 : (_applicationDetails$h2 = _applicationDetails$h[0]) === null || _applicationDetails$h2 === void 0 ? void 0 : _applicationDetails$h2.permissionLetterFilestoreId;
         const generatePdfKeyForTL = "chbpermissionletter";
-        const _temp7 = function () {
+        const _temp0 = function () {
           if (!fileStoreId) {
             return Promise.resolve(Digit.PaymentService.generatePdf(tenantId, {
               hallsBookingApplication: [applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.hallsBookingApplication[0]]
@@ -1965,7 +1987,7 @@ const WrapPaymentComponent = props => {
             });
           }
         }();
-        return _temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7);
+        return _temp0 && _temp0.then ? _temp0.then(_temp1) : _temp1(_temp0);
       });
     } catch (e) {
       return Promise.reject(e);
@@ -1980,7 +2002,7 @@ const WrapPaymentComponent = props => {
         }
       })).then(function (applicationDetails) {
         var _applicationDetails$b, _applicationDetails$b2;
-        function _temp0() {
+        function _temp11() {
           return Promise.resolve(Digit.PaymentService.printReciept(tenantId, {
             fileStoreIds: fileStoreId
           })).then(function (fileStore) {
@@ -1989,7 +2011,7 @@ const WrapPaymentComponent = props => {
         }
         let fileStoreId = applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$b = applicationDetails.bookingApplication) === null || _applicationDetails$b === void 0 ? void 0 : (_applicationDetails$b2 = _applicationDetails$b[0]) === null || _applicationDetails$b2 === void 0 ? void 0 : _applicationDetails$b2.permissionLetterFilestoreId;
         const generatePdfKeyForTL = "advpermissionletter";
-        const _temp9 = function () {
+        const _temp10 = function () {
           if (!fileStoreId) {
             return Promise.resolve(Digit.PaymentService.generatePdf(tenantId, {
               bookingApplication: [applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.bookingApplication[0]]
@@ -2005,7 +2027,7 @@ const WrapPaymentComponent = props => {
             });
           }
         }();
-        return _temp9 && _temp9.then ? _temp9.then(_temp0) : _temp0(_temp9);
+        return _temp10 && _temp10.then ? _temp10.then(_temp11) : _temp11(_temp10);
       });
     } catch (e) {
       return Promise.reject(e);
@@ -2022,7 +2044,7 @@ const WrapPaymentComponent = props => {
         }
       })).then(function (applicationDetails) {
         const generatePdfKeyForTL = "svcertificate";
-        const _temp1 = function () {
+        const _temp12 = function () {
           if (applicationDetails) {
             var _applicationDetails$S;
             return Promise.resolve(Digit.PaymentService.generatePdf(state, {
@@ -2036,7 +2058,7 @@ const WrapPaymentComponent = props => {
             });
           }
         }();
-        if (_temp1 && _temp1.then) return _temp1.then(function () {});
+        if (_temp12 && _temp12.then) return _temp12.then(function () {});
       });
     } catch (e) {
       return Promise.reject(e);
@@ -2052,7 +2074,7 @@ const WrapPaymentComponent = props => {
         }
       })).then(function (applicationDetails) {
         const generatePdfKeyForTL = "petservicecertificate";
-        const _temp10 = function () {
+        const _temp13 = function () {
           if (applicationDetails) {
             var _applicationDetails$P;
             return Promise.resolve(Digit.PaymentService.generatePdf(state, {
@@ -2066,7 +2088,7 @@ const WrapPaymentComponent = props => {
             });
           }
         }();
-        if (_temp10 && _temp10.then) return _temp10.then(function () {});
+        if (_temp13 && _temp13.then) return _temp13.then(function () {});
       });
     } catch (e) {
       return Promise.reject(e);
@@ -2083,7 +2105,7 @@ const WrapPaymentComponent = props => {
         }
       })).then(function (applicationDetails) {
         const generatePdfKeyForTL = "svidentitycard";
-        const _temp11 = function () {
+        const _temp14 = function () {
           if (applicationDetails) {
             var _applicationDetails$S2;
             return Promise.resolve(Digit.PaymentService.generatePdf(state, {
@@ -2097,7 +2119,7 @@ const WrapPaymentComponent = props => {
             });
           }
         }();
-        if (_temp11 && _temp11.then) return _temp11.then(function () {});
+        if (_temp14 && _temp14.then) return _temp14.then(function () {});
       });
     } catch (e) {
       return Promise.reject(e);
@@ -2112,7 +2134,7 @@ const WrapPaymentComponent = props => {
         }
       })).then(function (applicationDetails) {
         var _applicationDetails$b3, _applicationDetails$b4;
-        function _temp13() {
+        function _temp16() {
           return Promise.resolve(Digit.PaymentService.printReciept(tenantId, {
             fileStoreIds: fileStoreId
           })).then(function (fileStore) {
@@ -2120,29 +2142,29 @@ const WrapPaymentComponent = props => {
           });
         }
         let fileStoreId = applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$b3 = applicationDetails.bookingApplication) === null || _applicationDetails$b3 === void 0 ? void 0 : (_applicationDetails$b4 = _applicationDetails$b3[0]) === null || _applicationDetails$b4 === void 0 ? void 0 : _applicationDetails$b4.paymentReceiptFilestoreId;
-        const _temp12 = function () {
+        const _temp15 = function () {
           if (!fileStoreId) {
             let response = {
               filestoreIds: [payments === null || payments === void 0 ? void 0 : payments.fileStoreId]
             };
             return Promise.resolve(Digit.PaymentService.generatePdf(tenantId, {
               Payments: [_extends({}, paymentData)]
-            }, "advservice-receipt")).then(function (_Digit$PaymentService4) {
-              var _response;
-              response = _Digit$PaymentService4;
+            }, "advservice-receipt")).then(function (_Digit$PaymentService5) {
+              var _response5;
+              response = _Digit$PaymentService5;
               const updatedApplication = _extends({}, applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.bookingApplication[0], {
-                paymentReceiptFilestoreId: (_response = response) === null || _response === void 0 ? void 0 : _response.filestoreIds[0]
+                paymentReceiptFilestoreId: (_response5 = response) === null || _response5 === void 0 ? void 0 : _response5.filestoreIds[0]
               });
               return Promise.resolve(AdvertisementCreateApi.mutateAsync({
                 bookingApplication: updatedApplication
               })).then(function () {
-                var _response2;
-                fileStoreId = (_response2 = response) === null || _response2 === void 0 ? void 0 : _response2.filestoreIds[0];
+                var _response6;
+                fileStoreId = (_response6 = response) === null || _response6 === void 0 ? void 0 : _response6.filestoreIds[0];
               });
             });
           }
         }();
-        return _temp12 && _temp12.then ? _temp12.then(_temp13) : _temp13(_temp12);
+        return _temp15 && _temp15.then ? _temp15.then(_temp16) : _temp16(_temp15);
       });
     } catch (e) {
       return Promise.reject(e);
@@ -2157,7 +2179,7 @@ const WrapPaymentComponent = props => {
         }
       })).then(function (applicationDetails) {
         var _applicationDetails$h3, _applicationDetails$h4;
-        function _temp15() {
+        function _temp18() {
           return Promise.resolve(Digit.PaymentService.printReciept(tenantId, {
             fileStoreIds: fileStoreId
           })).then(function (fileStore) {
@@ -2165,29 +2187,29 @@ const WrapPaymentComponent = props => {
           });
         }
         let fileStoreId = applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$h3 = applicationDetails.hallsBookingApplication) === null || _applicationDetails$h3 === void 0 ? void 0 : (_applicationDetails$h4 = _applicationDetails$h3[0]) === null || _applicationDetails$h4 === void 0 ? void 0 : _applicationDetails$h4.paymentReceiptFilestoreId;
-        const _temp14 = function () {
+        const _temp17 = function () {
           if (!fileStoreId) {
             let response = {
               filestoreIds: [payments === null || payments === void 0 ? void 0 : payments.fileStoreId]
             };
             return Promise.resolve(Digit.PaymentService.generatePdf(tenantId, {
               Payments: [_extends({}, paymentData)]
-            }, "chbservice-receipt")).then(function (_Digit$PaymentService5) {
-              var _response3;
-              response = _Digit$PaymentService5;
+            }, "chbservice-receipt")).then(function (_Digit$PaymentService6) {
+              var _response7;
+              response = _Digit$PaymentService6;
               const updatedApplication = _extends({}, applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.hallsBookingApplication[0], {
-                paymentReceiptFilestoreId: (_response3 = response) === null || _response3 === void 0 ? void 0 : _response3.filestoreIds[0]
+                paymentReceiptFilestoreId: (_response7 = response) === null || _response7 === void 0 ? void 0 : _response7.filestoreIds[0]
               });
               return Promise.resolve(mutation.mutateAsync({
                 hallsBookingApplication: updatedApplication
               })).then(function () {
-                var _response4;
-                fileStoreId = (_response4 = response) === null || _response4 === void 0 ? void 0 : _response4.filestoreIds[0];
+                var _response8;
+                fileStoreId = (_response8 = response) === null || _response8 === void 0 ? void 0 : _response8.filestoreIds[0];
               });
             });
           }
         }();
-        return _temp14 && _temp14.then ? _temp14.then(_temp15) : _temp15(_temp14);
+        return _temp17 && _temp17.then ? _temp17.then(_temp18) : _temp18(_temp17);
       });
     } catch (e) {
       return Promise.reject(e);
@@ -2195,9 +2217,9 @@ const WrapPaymentComponent = props => {
   };
   const printRecieptNew = function (payment) {
     try {
-      function _temp20() {
+      function _temp23() {
         var _payments$Payments$3;
-        function _temp18() {
+        function _temp21() {
           return Promise.resolve(Digit.PaymentService.printReciept(state, {
             fileStoreIds: response.filestoreIds[0]
           })).then(function (fileStore) {
@@ -2207,7 +2229,7 @@ const WrapPaymentComponent = props => {
         let response = {
           filestoreIds: [(_payments$Payments$3 = payments.Payments[0]) === null || _payments$Payments$3 === void 0 ? void 0 : _payments$Payments$3.fileStoreId]
         };
-        const _temp17 = function () {
+        const _temp20 = function () {
           if (true) {
             let assessmentYear = "",
               assessmentYearForReceipt = "";
@@ -2403,47 +2425,47 @@ const WrapPaymentComponent = props => {
               payments.Payments[0].paymentDetails[0].additionalDetails = details;
             }
             paymentArray[0] = payments.Payments[0];
-            const _temp16 = function () {
+            const _temp19 = function () {
               if (payment.Payments[0].paymentDetails[0].businessService == "PT.MUTATION") {
                 return Promise.resolve(Digit.PaymentService.generatePdf(state, {
                   Payments: paymentArray
-                }, "pt-receipt")).then(function (_Digit$PaymentService8) {
-                  response = _Digit$PaymentService8;
+                }, "pt-receipt")).then(function (_Digit$PaymentService9) {
+                  response = _Digit$PaymentService9;
                 });
               } else {
                 return Promise.resolve(Digit.PaymentService.generatePdf(state, {
                   Payments: paymentArray
-                }, generatePdfKey)).then(function (_Digit$PaymentService9) {
-                  response = _Digit$PaymentService9;
+                }, generatePdfKey)).then(function (_Digit$PaymentService0) {
+                  response = _Digit$PaymentService0;
                 });
               }
             }();
-            if (_temp16 && _temp16.then) return _temp16.then(function () {});
+            if (_temp19 && _temp19.then) return _temp19.then(function () {});
           }
         }();
-        return _temp17 && _temp17.then ? _temp17.then(_temp18) : _temp18(_temp17);
+        return _temp20 && _temp20.then ? _temp20.then(_temp21) : _temp21(_temp20);
       }
       console.log("paymentpayment", payment, payment.Payments[0].paymentDetails[0].receiptNumber, payment.Payments[0]);
       const tenantId = Digit.ULBService.getCurrentTenantId();
       const state = Digit.ULBService.getStateId();
       let paymentArray = [];
       let payments;
-      const _temp19 = function () {
+      const _temp22 = function () {
         if (payment.Payments[0].paymentDetails[0].businessService == "PT.MUTATION") {
           return Promise.resolve(Digit.PaymentService.getReciept(tenantId, "PT.MUTATION", {
             receiptNumbers: payment.Payments[0].paymentDetails[0].receiptNumber
-          })).then(function (_Digit$PaymentService6) {
-            payments = _Digit$PaymentService6;
+          })).then(function (_Digit$PaymentService7) {
+            payments = _Digit$PaymentService7;
           });
         } else {
           return Promise.resolve(Digit.PaymentService.getReciept(tenantId, "PT", {
             receiptNumbers: payment.Payments[0].paymentDetails[0].receiptNumber
-          })).then(function (_Digit$PaymentService7) {
-            payments = _Digit$PaymentService7;
+          })).then(function (_Digit$PaymentService8) {
+            payments = _Digit$PaymentService8;
           });
         }
       }();
-      return Promise.resolve(_temp19 && _temp19.then ? _temp19.then(_temp20) : _temp20(_temp19));
+      return Promise.resolve(_temp22 && _temp22.then ? _temp22.then(_temp23) : _temp23(_temp22));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -3006,6 +3028,7 @@ const useCashPaymentDetails = (props, t) => {
     body: [{
       withoutLabel: true,
       type: "custom",
+      colSpan: "span 2",
       populators: {
         name: "ManualRecieptDetails",
         customProps: {},
@@ -3067,6 +3090,7 @@ const useCardPaymentDetails = (props, t) => {
     body: [{
       withoutLabel: true,
       type: "custom",
+      colSpan: "span 2",
       populators: {
         name: "paymentModeDetails",
         customProps: {},
@@ -3110,54 +3134,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) => {
@@ -3167,6 +3163,7 @@ const useChequeDetails = (props, t) => {
     body: [{
       withoutLabel: true,
       type: "custom",
+      colSpan: "span 2",
       populators: {
         name: "paymentModeDetails",
         customProps: {},
@@ -3256,92 +3253,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() {
@@ -4883,7 +4834,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", {
@@ -5493,10 +5443,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,
@@ -5516,7 +5473,7 @@ const CollectPayment = props => {
     style: {
       maxWidth: "670px"
     }
-  }));
+  })));
 };
 
 const convertEpochToDate$1 = dateEpoch => {
@@ -6931,24 +6888,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, {
@@ -6960,17 +6931,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 => {