# Current Bill Cancellation UI Flow

## Overview

Once the user logs in with `WS_CEMP` **or** `SW_CEMP` roles the BillGenie tree option is available on the left panel of the screen.

## Workflow Details

<div align="left"><img src="https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2F0CFVvIZ6tJ1YlJjAFdim%2Fimage%20(157).png?alt=media" alt=""></div>

Clicking on the BillGenie displays two options as seen in the screenshot below.

<div align="left"><img src="https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FIPtKCUeQiaFHyxKNDOjp%2Fimage%20(136).png?alt=media" alt=""></div>

Click on the Bill Cancellation option. This routes the user to the search bill screen.

### **Search Bill**

**Objective:** This option allows employees to search for active bills, download bills, or cancel bills.

For instance, a bill can be cancelled if the tax head information is entered wrong in a bill.&#x20;

Route -[ mSeva](https://qa.digit.org/employee/bills/billSearch)

![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FgBwkWoOElawowiUoeHwG%2Fimage%20\(221\).png?alt=media)

## Technical Implementation

* Initial page - [<img src="https://github.com/fluidicon.png" alt="" data-size="line">frontend/billSearch.js at master · egovernments/frontend](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 made on page load

<div align="left"><img src="https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FemFUxzX5zIUGc7tq2bSl%2Fimage%20(230).png?alt=media" alt=""></div>

{% hint style="info" %}
Note: The search, cancel bill and service category options are available only for enabled services. This is configured in uiCommonPay config by marking the following`cancelBill` path as **true**.

[<img src="https://github.com/fluidicon.png" alt="" data-size="line">egov-mdms-data/uiCommonPay.json at QA · egovernments/egov-mdms-data](https://github.com/egovernments/egov-mdms-data/blob/QA/data/pb/common-masters/uiCommonPay.json)
{% endhint %}

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 details available in[ <img src="https://github.com/fluidicon.png" alt="" data-size="line">frontend/billSearchCard.js at master · egovernments/frontend](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 details available in[ <img src="https://github.com/fluidicon.png" alt="" data-size="line">frontend/searchResults.js at master · egovernments/frontend](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 available in[ <img src="https://github.com/fluidicon.png" alt="" data-size="line">frontend/function.js at master · egovernments/frontend](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 the table component.
* Every column entry is treated as an object.

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

* Any customizations at column level are done through the `customBodyRender` hook available with the *option* property of the columns.

![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FozqsDkNF869guqYPg6Vd%2Fimage%20\(121\).png?alt=media)

#### Data fetch, load and render <a href="#data-fetch-load-and-render" id="data-fetch-load-and-render"></a>

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

[<img src="https://github.com/fluidicon.png" alt="" data-size="line">frontend/function.js at master · egovernments/frontend](https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/bills/billSearchResources/function.js)![](blob:https://digit-discuss.atlassian.net/d7d401f7-90dc-4940-8293-37c3c8fd2a08#media-blob-url=true\&id=379cbc6b-f53c-43ed-8a5b-e3922078b84d\&collection=contentId-1847263265\&contextId=1847263265\&mimeType=image%2Fpng\&name=image-20210727-103850.png\&size=111637\&width=947\&height=491)

![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FQUReuFxWIPK7suptE75P%2Fimage%20\(204\).png?alt=media)

As seen in the above screenshot, the data is assigned to a specific path inside props.

[<img src="https://github.com/fluidicon.png" alt="" data-size="line">frontend/searchResults.js at master · egovernments/frontend](https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/bills/billSearchResources/searchResults.js)

![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2FJube2JUFRyuLYNetc4tK%2Fimage%20\(181\).png?alt=media)

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

![](https://1885278393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUYtUmELy66UydIQtJOn5%2Fuploads%2Fhr53KqN4CSjtlRLrbcrR%2Fimage%20\(264\).png?alt=media)

To cancel bills, employees have to click on the Cancel Bill option. The system navigates to the Bill Details page that displays the bill amount and other details. The bill can be cancelled from this page.[ ](https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/bills/viewBill.js)

[<img src="https://github.com/fluidicon.png" alt="" data-size="line">frontend/viewBill.js at master · egovernments/frontend](https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/bills/viewBill.js)

For bill details refer to the document here - [Bill Details](https://docs.digit.org/local-governance/v2.8/platform/configure-digit/configuring-digit-services/mcs-service-configuration/current-bill-cancellation-ui-flow/bill-details-ui-flow).

#### **API Used**

1. `egov-mdms-service/v1/_search,`
2. `egov-searcher/bill-genie/billswithaddranduser/_get`

## **Role Action Mapping**

| API                                                  | Roles                    | Action ID |
| ---------------------------------------------------- | ------------------------ | --------- |
| `egov-mdms-service/v1/_search`                       |                          | `954`     |
| `egov-searcher/bill-genie/billswithaddranduser/_get` | `SUPERUSER` , `EMPLOYEE` | `1804`    |