Overview

Users can look for the list of the properties registered under their mobile number in My Properties Tab. Each Property for the initial view will display Property Id, Owner Name, Address and status, with view details option, through which User can look up more details about the property registered. If users do not find the property looking for, new property can be registered using the below link “Click here to register new Property”.

Once the user clicks on View Details, the Property Information Page is displayed with all the necessary information about the property.

Technical Implementation Details

Click here to fetch the working code for the My Properties and Property Details common Index.

The template for My properties and Property Information page is present inside pt/pages/citizen/MyProperties. The list of properties is retrieved by calling the search API "/property-services/property/_search".

This API is called using the React hook present inside the index of My Properties and Property information page, a single property is being loaded, bypassing the unique Property Id in the search API.

If search API result is successful, Assessment Search API is called to know the assessment status i.e /property-services/assessment/_search.

If the assessment object returned fetches assessment array details then the fetch bill API is called in order to retrieve the payment details for the particular property. API is /billing-service/bill/v2/_fetchbill

Following is the hook used for the property search API, assessment search and fetch bill.

const { isLoading, isError, error, data } = Digit.Hooks.pt.usePropertySearch(tenantId);
const assessmentData = await Digit.PTService.assessmentSearch({ tenantId, filters: { propertyIds } });
billData = await Digit.PaymentService.fetchBill(tenantId, {
     businessService: "PT",
     consumerCode: propertyIds,
   });

MDMS

No MDMS data is used here, all the data is loaded from Search API.

Localization

For My Properties also the Localization keys are added to the ‘rainmaker-pt’ locale module. To change, update or add, any new localization key is done in the same locale module only.

Overview

This page provides the user interface and API details for My Applications feature in the PT module. Users can review the list of applications and their status registered under their mobile number in the My Applications tab. Initially, only four application will load at once. If the user wants to look for more, the “Load More” option needs to be clicked. Each Application for the initial view will display Application No, Service Category, Property Id, Application Type and status, with Track option, that enables the user to look up more details about the Application. If a user is unable to find their property details on the system, a new Application can be raised using the link provided at the bottom of the page.

Once the user clicks on the Track Button, the Application Details Page is displayed with all the necessary information about the application.

Timeline component: The timeline component is present at the end of the application details which tells about the current status and history of the application passing through various workflows and actions taken.

Technical Implementation Details

Click here to fetch the working code details for My Applications and Application Details common Index.

The template for My Application is present under pt/pages/citizen/PTMyApplications and the Application Details page is present inside pt/pages/citizen named as PTApplicationDetails. The list of Applications is retrieved by calling the search API "/property-services/property/_search"

This API is called using the React hook present inside the index of PTMyapplication and PTApplicationDetails page, a single application is being loaded, bypassing the unique Property Id in the search API.

Following is the hook used for the property search API.

const { isLoading, isError, error, data } = Digit.Hooks.pt.usePropertySearch(tenantId);

Create and Update Util Function

The two main util function and the objective of it are given below:

Create Util Function: While going through the Create flow, all the inputs that the user has entered are stored in a different structure. Since the units are not separated in the flow but incorporated according to each ground, the storing structure is different from the request body of Create API. This function transforms the flow of stored data into the requested body format.

Click here to fetch the code.

Update Util Function: Click here to find detailed information about this function.

MDMS

No MDMS data is used here, all the data is being loaded from Search API.

Localization

For My Applications also the Localization keys are added in the ‘rainmaker-pt’ locale module same as My properties and create. To change, update or add any new localization key is done in the same locale module only.

Overview

This page provides information and details for edit and updates property feature in the PT module. This feature allows the user to edit the application already created or update the property already registered with their mobile number. After verification, the employee can send the application back to the citizen with remarks on any required changes. The edit and update feature allows the users to make these changes. It also allows the user to update the details of the property details online if there are any such upgrades or changes.

Edit Application

On the Application details page, on the employee side, if the property is marked with “Send Back to Citizen”, the edit option will appear dynamically at the end of the page and will be static in nature.

Update Property

On clicking the Update button, users can edit/update the property details by going through the Create flow again. The only exception here is the values will be pre-populated from the Property object received from Property Search API. On completing the flow the Update API is called and the property is updated successfully.

Acknowledgement screen

Technical Implementation Details

Click here to access the Edit/Update property main index.

The main code contains the functions that transform the property object received in Search API to the object. This includes primarily the Assessment flow units suitable for the Create flow since the user has to go through Create flow again with pre-populated details and update the value of the data accordingly. It also contains the routing details for the pages in the Create flow.

Update Util function: this function does the exact opposite of the Create util function (refer Property Tax - My Applications ). The property object which is received from the Property Search API is converted to the Create flow relevant structure so that the values can be pre-populated for the user convenience, on completing the flow, the application is updated. The link for the same is available here.

MDMS

MDMS data used here is the same as the Create flow since the flow structure used for edit/update property is the same as the create property flow. Please refer to the link here for detailed MDMS information.

Localization

For Edit/Update Property also, the Localization keys are being added in the ‘rainmaker-pt’ locale module. To change, update or adding of any new localization key will be done in the same locale module only.

Overview

This page provides detailed UI information on the Create Property feature available in the Property Tax module.

The objective is to provide user facilities to add a new property, view the property details and the application currently on their number. The feature allows users to update the property or edit the application.

Create Property

Users can add new property using the Create Property button, and while going through the workflow, can add all the valid information, according to the question asked. At the end of the flow, a Check page will be displayed on which the user can cross verify the information entered. On submitting, the application is created.

Create Property Flow

Property Tax information screen will be displayed after login, which helps the user to understand the necessary documents needed to complete the new registration for the property.

Property Details Flow

The user needs to enter the details about the property first. Below is the flow chart for the property details flow.

Assessment Details Flow

Then the user will be asked about the assessment details, which contains information about each floor and basement.

Address Details Flow

After entering the details of the property, the user needs to enter the address of the property, where it is located. The flow is straightforward, without any conditional routing.

Users can pinpoint the location in the Geo-location map, according to which pin code and city, as well as locality, is auto-populated.

Owner Details Flow

Finally, the user needs to enter the details, about the property owner, it can be institutional - (Government/ Private) or Single/Multiple Owner. According to which the details will be filled.

Check Page and Acknowledgement Screen

Users can cross-verify the data entered throughout the flows in the Check page. Click on the change button adjacent to the relevant data allows users to change/update the entered data. The user is redirected to the relevant page where data needs to be changed. Repeat the successive flows to submit the application.

For Registration of property, Create API is called. Following is the snippet of the Create API used:1create: "/property-services/property/_create"

If the API response is successful, then the Acknowledgement Screen is displayed, otherwise Failed Acknowledgement Screen is displayed.

Technical Implementation Details

All the screens have been developed using the new-UI structure followed previously in FSM and PGR.

The link for the Create Property Main Index is given below, it can be used to understand the starting point of the flow:

https://github.com/egovernments/digit-ui-internals/blob/development/packages/modules/pt/src/pages/citizen/Create/index.js

PT (Property Tax) Module has been segregated into a specified structure. All the screen configuration is inside PageComponent Folder, and the configuration for routing of the pages are mentioned in the config folder which is common for both Citizen as well as Employee. The snippet for folder structure and routing configuration is given below.

Pages Folder is where the high-level configuration for controlling the whole flow is mentioned, for citizens and employees. Citizen flows include Create, Edit, My Properties, My Application and Search Property. The search property flow carries the index (the main starting point of the whole flow).

After completing the flow the user can download the acknowledgement PDF form of the property created. Click here to find the config for the PDF generation.

Utils Folder basically contains all the methods which are being used throughout the PT module. In case any common method needs to be declared here, it can be imported into other files.

For creating an Application the Create API from Property Tax is being called using the React hooks, which has been declared under hooks/elements/PT as PTService.

MDMS Data

Throughout the flows, data across a few pages are imported from MDMS. Following is the list of pages that are using MDMS data. These pages .js files can be found under page components.

Data React Hooks are used for calling MDMS, so that it could be shared throughout the modules.

Below is the little code snippet for the call used for MDMS.

const { data: OwnerShipCategoryOb } = Digit.Hooks.pt.usePropertyMDMS(stateId, "PropertyTax", "OwnerShipCategory");

Localization

Localization keys are added under the ‘rainmaker-pt’ locale module. In future, if any new labels are implemented in the Property Tax (Citizen) they should also be pushed in the locale DB under rainmaker-pt locale module. Below is an example of few locale labels.

API Call Role Action Mapping

Documents and Resource Links

Overview

The Quick Pay feature allows a citizen to quickly view or pay all his pending bills for Property Tax (or any other supported business Service) by clicking links directly from the Digit-UI home screen.

Clicking on the Property Tax link in the Quick Pay section, a user is logged in and redirected to the My Bills Screen. Else, the user has to log in using his mobile number and the OTP sent to the number. The user is redirected to the My Bills screen.

On the My Bills screen, the user finds his pending property Tax bills (displayed as cards) for registered properties. The user can click on the View Details button of the corresponding card to check the detailed bill summary which takes him to the bill details page. There is also a link for the case when the user is unable to find the property tax bills.

The Bill Details screen shows a list of various categories of taxes that are present. After checking the user can select to pay either the full amount or custom amount, which cannot be less than ₹100 and not more than the total tax. These restrictions, however, are customizable as per ULB requirement and can be changed through MDMS.

Click on the Proceed To Pay button redirects the user to the Pay screen. The user is asked to select the payment gateway from a bunch of radio buttons, and then after clicking pay, the user is redirected to the bank payment gateway.

After making a successful payment through the bank gateway, the user is redirected to the response screen which shows the details of the payment and other bill details.

In case the payment fails for any reason the response screen shows the message, that the payment transaction has failed.

Use Case: when user wants to pay for Property for a different mobile number:

My Bills page only displays the properties with pending Taxes, which are associated with the mobile number which is logged in. But if a user wants to search for any other property, then he can click on the link below the My Bills screen which will take the user to the search screen.

On the Search screen, the user can search a property by mobile Number, a unique property ID, or an existing property ID. After mentioning the parameters the search takes the user to the search results screen. Where user can see all the properties with the matching criteria, whether or not they have pending taxes.

From Here on clicking view Details a user is redirected to the bill-details Screen, for the property, just as in the case of My Bills Screen.

Technical Details

My Bills Screen

An MDMS call is made to this page to fetch details based on the defined restrictions such as partial payment is allowed or not, advance payment allowed or not, minimum payable amount etc. for the particular business Service which is supplied into URL.

The MDMS criteria used here for fetching MDMS details are:

Also, the pending bills are fetched for the citizen for the specific business service using the custom hook, that fetches bill for logged-in mobile number.

On this page, for each business service, there is a configuration stored to define what part of the bill is to be displayed.

The configuration returns an object of structure.

Here my-bill key has config for the my-bills screen, this configuration decides what details to show on the card for each service from the bill object returned through fetchBill API.

It is an array of objects, where each object puts the bill detail on the My-Bills bill card.

Each object contains 4 properties ie keyValue, keyPath, fallback, noteStyle. The keynote config is added into the Digit component Registry as getBillDetailsConfigWithBusinessService

Bill Details Screen

It checks for various payment restrictions which are fetched from the MDMS on above mentioned MY Bills description, and also all the tax heads that are to be displayed in the summary are also fetched from the same MDMS.

The structure for payment rule response from the MDMS are -

partPaymentAllowed key when true allows payment less than bill details to be paid otherwise the user can pay only the bill Amount.

minAmountPayable is the minimum bill amount a user can pay.

isAdvanceAllowed if the true user can enter the amount more than the specified.

Payment Screen

The payment screen fetches the payment gateways from an MDMS call.

Response Screen

Search Screen

Search Result Screen

Adding a new Bill detail for the business Service

The keynote config is responsible for adding the new bill UI for adding a new Bill for a business Service.

API Call Role Action Mapping