Current Bill Cancellation UI Flow

Frontend Repo

Once the user login with WS_CEMP or SW_CEMP Roles, then the User will get the BillGenie tree option on the left side.

on click on BillGenie will get two options like below

on clicking on bill Cancellation, it will route to the search bill screen.

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 - mSeva

Technical Implementation Details

• Initial page - frontend/billSearch.js at master · egovernments/frontend
• Initial MDMS call is being made on page load

Note: only for the enabled service we can search, cancel the bill and serviceCategory drop downs options .it can be configured in uiCommonPay config by setting true to cancelBill this path

egov-mdms-data/uiCommonPay.json at QA · egovernments/egov-mdms-data

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 of in frontend/billSearchCard.js at master · egovernments/frontend
• Table rendering is taken care of in frontend/searchResults.js at master · egovernments/frontend
• The Bill search API and formatting data is in done in frontend/function.js at master · egovernments/frontend

Table Structure

• MUIDataTable is used to implement the Table component

• Every column entry is given as an Object

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

• Any customizations at column level are by customBodyRender hook available in all the columns ‘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

frontend/function.js at master · egovernments/frontend

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

frontend/searchResults.js at master · egovernments/frontend

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

For employee Action as “cancel bill “ so that employee can cancel the active bill on click of cancel bill, it will navigate to the Bill details page where we can see the bill amount and other details from there we can do the Cancel. frontend/viewBill.js at master · egovernments/frontend

Bill details document is available here Bill Details

API Used

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

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

Role Action Mapping

S.NO	API	ROLES	ACTION ID
1	egov-mdms-service/v1/_search		954
2	egov-searcher/bill-genie/billswithaddranduser/_get	SUPERUSER , EMPLOYEE	1804