Current Bill Cancellation(frontend repo) - Technical Documentation

Search Bill

Objective

Provide Employee to search active bill , download bill and Cancel bill.

if tax head information can be wrong in a bill. So the bill needs to be cancelled.

Route - https://qa.digit.org/employee/bills/billSearch

Technical Implementation Details

• Initial page.https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/bills/billSearch.js

• Initial MDMS call is being made on page load.

  

Note: We need to configure cancelBill: true in WS and SW in  this path https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/common-masters/uiCommonPay.json

example:

{
   "code": "WS",
   "headerBandLabel": "PAYMENT_COMMON_CONSUMER_CODE",
   "pdfModule":"WNS",
   "receiptKey": "ws-onetime-receipt",
   "cancelReceipt":false,
   "cancelBill": true,
   "billKey": "ws-bill",
   "arrears": true,
   "buttons": [
    {
      "label": "COMMON_BUTTON_HOME",
      "citizenUrl": "/wns-citizen/home",
      "employeeUrl": "/wns/search"
    }
  ]
}

• Form rendering is taken care in https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/bills/billSearchResources/billSearchCard.js

• Table rendering is taken care in https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/bills/billSearchResources/searchResults.js

• The Bill search API and formatting data is in done in https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/bills/billSearchResources/function.js

Table Structure

• MUIDataTable is used to implement Table component.

• Every columns are entry given as an Object

{
   labelName: "Bill No.",
   labelKey: "ABG_COMMON_TABLE_COL_BILL_NO"
}

,

• Any customizations at column level is by customBodyRender hook available in all the colums ‘option’ property.

Data fetch,load and render :

Once the data is fetched using egov-searcher/bill-genie/billswithaddranduser/_get API, the returned data is formatted and dispatched to redux

https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/bills/billSearchResources/function.js

As we can see from the image above, the data is put to specific path inside props.

https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/bills/billSearchResources/searchResults.js

Table component now fetches the data from its props as shown below.

Api Used :

1. egov-mdms-service/v1/_search,

2. egov-searcher/bill-genie/billswithaddranduser/_get

ROLE ACTION MAPPING