Property Tax - Create Property

Objective

To provide user facilities to add new property and view about the details of the property and application currently on their number. It will also allow the user to update the property or edit the application

Open

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 property.

Open

Property Details Flow:

User will need to enter the details about the property first, following is the flow chart for the property details flow:

Assessment Details Flow:

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

UI/UX Unit Revamp

Now instead of capturing Unit data in separate pages, we capture data in one page only, we can add multiple unit buy clicking on “add more” button. for each floor respective unit page will load and we can add units corresponding to that.

Address Details Flow:

After entering about the details of the property user will need to enter about the address of the property, where it is located. The flow will be straight forward, without any conditional routing.

Users can pinpoint the location in Geo-location map, according to which pin code and city as well as locality will be automatically filled.

Owner Details Flow:

At the last user will need 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.

In the case of Institutional, following data will be asked in the first screen, and the following screen will remain the same.

In the case of a single/Multiple Owner following screen will be displayed, rest flow will remain the same.

Check Page and Acknowledgement Screen:

Users can cross-verify the data entered throughout the flow in the Check page and also if needed to change/update any data can do that by clicking on the change option just mentioned just in front of the data, it will credited them to the said page which data needs to be changed and then the whole floor needs to be repeated again in order to submit the application.

For Registration of property Create API is being called, following is the snippet of the Create API being used:

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

Technical Implementation Details:

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

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

/DIGIT-Dev/frontend/micro-ui/web/micro-ui-internals/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 under config folder which is common for both Citizen as well as Employee. Below is the snippet for folder structure and routing configuration.

Pages Folder is where the high level configuration for controlling the whole flow is mentioned, for citizens and employees. Citizen includes Create, edit, my properties, my application and search Property. Which inside carry 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 and the config for the PDF generation can be found in the link given below:

/DIGIT-Dev/frontend/micro-ui/web/micro-ui-internals/packages/modules/pt/src/getPTAcknowledgementData.js

Utils Folder basically contains all the methods which are being used throughout the PT module, and if any common method needs to be declared here, which in turn can be imported in other files. 

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

MDMS data:

Throughout the flow, few of the pages data are being imported from MDMS, Following are the list of pages which are using MDMS data, These pages .js files can be found under page components.

For calling of MDMS data React Hooks has been used, so that it could be shared throughout the modules. Below is the little code snippet for the call used for MDMS.

Localization :

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

API Call Role Action mapping:

Related articles