Property Tax - UI

Owned by Gyan
Last updated: Jul 11, 2019

Property Tax module UI description:

  • PT was the first major module built on the Rainmaker platform
  • Due to significant differences between citizen and employee interface, the code for both has been segregated into two separate apps, pt-citizen and pt-employee under dev-packages.
  • The UI code is written in pure react.js with significant use of react HOCs, middlewares and action hooks, there has been no use of a defined UI framework.
  • The starting/parent component of PT under which other child components are rendered is formWizard component, its the main wizard component which shows the stepper and the content is loaded as per the active index running. (path: \egov-web-app\web\rainmaker\dev-packages\pt-employee-dev\src\Screens\FormWizard\index.js).
  • PT uses UI components defined in egov-ui-kit.


Intricacies in the module:-

  • The most complex part in the module is the assessment information part, where we have handled the multiItem component to show multiple units on the same floor.
  • the units are received and sent in the API as an array. 
  • To render a different variety of plot and floor details for every unique combination of property usage type and property type selected, we have all possible specs written at "\egov-ui-kit-dev\src\config\forms\specs\PropertyTaxPay\", which can be dynamically picked as per the collection with the help of assessInfoFormManager.js present in egov-ui-kit's utils folder.


PT Form hooks:

  • beforeFieldChange → gets called before the every "handleFieldChange" action. it accepts action, dispatch and state as its parameters. it can be used to set other fields or perform any action/operation on every field change. we can alter the value as well here and return the action.
  • updateDependentFields → gets called on every "handleFieldChange" action and is specifically used to load dependent fields. If the data of one dropdown gets loaded only after selecting an option in the previous dropdown, then updateDependentFields hook is the right choice. it gets formKey, field, dispatch, and state as its parameters 
  • beforeInitForm →  gets called before init form action. can be used to make api calls and popuate dropdowns, set fields, set default values etc. When this is called, at that time the same form and its state will not be available in the redux, so setting the form in the state or manipulating it is not possible. actions can be performed only on states other than self.
  • afterInitform  → gets called just after the init form action, its advantage is that when this gets called the form is available in the redux state, so any action can be performed on them.


PT form actions: 

  • setFieldProperty : eg    setFieldProperty(formKey, "ownerCategoryIdType", "dropDownData", documentTypes)
  • prepareFormData : eg  prepareFormData(jsonPath, fieldValue)