Apply Water & Sewerage

Objective

This feature is developed for Citizen/Employee can create apply for new Water & sewerage connection. User has to provide various information regarding property and the owner and the location of the property, and connection details like Water/Sewerage/Both and number of Taps,Pipe Size etc. User has to upload supportive documents. and User has to provide the additional Details like connection Type,water source, water sub source,RoadType, connection activation details. Once the application registered successfully it goes through various phases such as Doc Verification, Field Inspection, Pending for Approval, Pay,Pending for connection activation etc.

Technical Implementation Details

When user tries to create new Application, a popup comes upfront before navigating to the creation form. This popup tells about documents required to upload in the process so that user can collect those in advance.
This popup data is configurable in MDMS. On clicking Apply For New Connection(citizen application) or New Application(employee application) a MDMS call is made to get the required document information. This information is passed to the Popup.

Open

An Apply button is located at the footer of this popup. User can proceed to filing new Application on clicking of this apply button. The code related to this popup is written in search.js file. below is the link of the file.
For Employee:
https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-wns-dev/src/ui-config/screens/specs/wns/search.js

Open

For Citizen:
https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-wns-dev/src/ui-config/screens/specs/wns-citizen/home.js
showHideAdhocPopup method is responsible for making required Document MDMS call and opening popup.

Apply for New Water & Sewerage Application divided into four forms. The configuration related to all these forms are written in apply.js file.
https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-wns-dev/src/ui-config/screens/specs/wns/apply.js

MDMS Configs and other actions are Explained in W&S - UI Technical Configuration

Connection Details

Connection details is the first step of apply. It has two cards one card is related to Find/Create Property. which gets Information about the property Details ,Property Location in Detail,property owner details.

Second card is related to the Connection details in that Apply For specified for either User can select only Water connection/ only sewerage connection/ both water&sewerage connection. based on check box value relevant fields will populate.

Both Water & Sewerage:

For below screen shots relevant code is present in https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-wns-dev/src/ui-config/screens/specs/wns/applyResource/connectionDetails.js .

Only for sewerage:

For below screen shot relevant code is present in apply.js file in that formwizardFirstStep.

Only for Water:

Documents

Documents screen is the second step in the process. User can upload all the relevant documents asked while Creating application. Some of the documents are mandatory and its configurable so that it can be made mandatory or optional as per requirement. Below file holds all the required configuration for this screen.

For below screen shot relevant code is present in apply.js file in that formwizardSecondStep.

Additional Details page(This page only visible for Employee not for Citizen)

Additional Details screen is the Third step in the process. This page details are non mandatory at the time of apply connection. Later stages Employee can fill the relevant fields based on requirement.

For below screen shot relevant code is present in apply.js file in that formwizardThirdStep.

Multi Road Type Feature:

Earlier (Till Digit 2.2 ), it supports single type and storing the values in the string format like roadType: "BMPREMIXROAD" and roadCuttingArea: 123

Now, it supports multi type, user can add multiple road types by clicking on the add road type button and sending the values in the format of array of objects like

"roadCuttingInfo": [{ "roadType": "BMPREMIXROAD","roadCuttingArea": 123},{"roadType": "BRICKPAVING","roadCuttingArea": 123}].

Summary Screen

After successfully updating Additional details, the next step is summary page. User can see all the information entered . User has options to edit the information of each section. Upon clicking of edit icon user will navigate to respective section with all the data pre-filled. Below is the file contains all the required configuration of this screen.

For below screen shot relevant code is present in apply.js file in that formwizardFourthStep.

Submit application

Once user clicks on submit button, user navigates to acknowledgement screen stating that the application submitted successfully. Below is the acknowledgement configuration file.

https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-wns-dev/src/ui-config/screens/specs/wns/acknowledgement.js

Acknowledgement screen and acknowledgement is Explained in W&S-Application,Estimation Notice,Sanction Letter

W&S-Create Api

W&S application is created using /ws-services/wc/_create API, the returned data is formatted and dispatched to redux

https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-wns-dev/src/ui-utils/commons.js

While Creating Property

creationReason: "CREATE"

For More Information About W&S-Application,

Once The Application is Successfully created for further actions are explained as below,

Search Application is explained in

About W&S Application-workflow is explained in

API Call Role Action mapping: