Objective

To provide users with the details of the Bills and options to cancel the bill.

Implementation Details

This screen is developed under the egov-abg-dev folder in the below file:

The details of the Bill is fetched by calling BillingService fetchBill API and the Consumer.No is used in the query param.

FetchBill API returns the Bill Object which contains all the details about the bill including Billing Period, Due Amount, Due Date, and information about the Tax, Cess, Rebate, Penalty applied in this bill.

NextStep

On click on next step, it will go to cancel bill screen, there we need to select the options for reason for bill cancellation. Find more details here for the cancel bill screen - Cancel Bill

API Call Role Action Mapping

Objective

To provide users for selecting reasons and options to cancel the bill.

Implementation Details

This screen is developed under the egov-abg-dev folder in the below file:

The reasons for bill cancellation options are fetching from MDMS service.

PREVIOUS STEP: on click on this it will go back to the bill details screen.

Cancel Bill

On click on cancel bill, cancel bill API (billing-service/bill/v2/_cancelbill )will trigger and after the success of the cancel bill, it will route to the acknowledgement screen.

next step button file present in the below file path:

Acknowledgement Screen

Localisation

for these modules, we are re-using the “rainmaker-ws” and “rainmaker-abg” modules, if they are any new keys, we are adding under “rainmaker-abg”.

API Call Role Action Mapping

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 MDMS call is being made on page load

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"
    }
  ]
}

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

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

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

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