Citizen : Water & Sewerage Create
- Tulika Kundu
Objective
To provide user facilities to add new W&S connection applications and view about the details of the connection and application currently on their number. It will also allow the user to update the connection or edit the application.
Water & Sewerage Create
Users can add new connection using the Apply For New Connection 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.
Water & Sewerage Create Flow :
WNS information screen will be displayed after login, which helps the user to understand the necessary documents needed to complete the new registration for new connection.
Property Details Flow :
User will either need to add the property details by using the property search of commonPT or can choose to create a light weight property using commonPT create, both the screens will then lead to property details page, which will display a summary of property selected or created.
Connection Details Flow :
Here user can either select to go with the owners of property or can choose to add connection holder details, following with the data regarding the connection, here of user can have 3 options to choose from about which the application will be created :
Water Connection
Sewerage Connection
Water and Sewerage Connection
Accordingly, The create will be called,
water_create: "/ws-services/wc/_create",
sewarage_create: "/sw-services/swc/_create",
Document Details :
User can upload all the documents related to data entered, this list is MDMS controlled, so it can be easily modifiable.
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 edit option just mentioned in front of the section header, it will credited them to the said page which data needs to be changed and then the whole flow needs to be repeated again in order to submit the application.
For the final Initiation of the application Update API is being called, which is used to particularly send the data of document details :
water_update: "/ws-services/wc/_update",
sewarage_update: "/sw-services/swc/_update"If the API response is successful, then the Acknowledgement Screen will be displayed, otherwise Failed Acknowledgement Screen will be displayed.
Technical Implementation Details:
The structure followed the same as in the previous modules, the path for the WNS 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/ws/src/pages/citizen/WSCreate/index.js
The module had 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.
in the Conection details pages, Create API is being called according to the service selected, following hook call can be found in the respective pages :
/DIGIT-Dev/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pageComponents/WSSewerageConnectionDetails.js
Digit.WSService.create(payload, "SEWERAGE")
.then((result, err) => {
setIsDisableForNext(false);
let data = {...formData, SewerageConnectionResult: result, sewerageConnectionDetails : {proposedWaterClosets : proposedWaterClosets, proposedToilets : proposedToilets} }
//1, units
onSelect("", data, "", true);
})
.catch((e) => {
setIsDisableForNext(false);
setShowToast({ key: "error" });
setError(e?.response?.data?.Errors[0]?.message || null);
});
/DIGIT-Dev/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pageComponents/WSWaterConnectionDetails.js
after check page Update API is being called which can be found in the Acknowledgement page :
/DIGIT-Dev/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pages/citizen/WSCreate/WSAcknowledgement.js
After completing the flow the user can download the acknowledgement PDF form of the application 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/ws/src/utils/getWSAcknowledgementData.js
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.
PageComponent | MDMS Detail | Module Detail Name | Master Detail Name | |
|---|---|---|---|---|
| 1 | WSDocsRequired | List of documents required for each category |
|
|
| 2 | WSConnectionHolderDetails | Gender List |
|
|
| 3 | WSWaterConnectionDetails | Pipe Size |
|
|
| 4 | WSDocumentDetails | List of documents to be uploaded |
|
|
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-ws’ locale module. In future if any new labels are implemented in the Water and Sewerage that should also be pushed in the locale DB under rainmaker-ws locale module.
ROLE ACTION MAPPING
API | ROLES | ACTION ID | |
|---|---|---|---|
1 |
| CITIZEN |
|
2 |
| CITIZEN |
|
3 |
| CITIZEN |
|
4 |
| CITIZEN |
|
5 |
| CITIZEN |
|
6 |
| CITIZEN |
|