OBPS BPA/OCBPA - ARCHITECT
- Tulika Kundu
Objective
To provide the facility for the user which allows to create New Building Permit Application by the citizen. every application which is created is a part of the workflow.
Apply for New Building Permit Application (BPA)
User can apply for new building permit application by clicking on the “Registered Architect Login”, through which only registered architect can login other user will not be able to proceed further, architect will first need to generate edcr scrutiny number if its not already available, by clicking on “Plan Scrutiny For New Construction” and if its available can directly go to “Building Plan Permit For New Construction”, while going through the workflow, can add all the information, according to the question asked, in the middle of the workflow after owner details Create API will be called, and at the end of the flow a summary screen will be visible for the review of the answers and on clicking the submit button an Update API will be called which will change the status from Initiated to Applied and Registration Application will get updated.
eDCR Scrutiny Registration
User need to provide city, applicant name and upload dxf file in order to generate eDCR number.
Acknowledgement Page will get displayed, user can apply for building permit by clicking on the Apply for Building Plan Permit button, or go back and apply from the home page as mentioned in previous section.
New Building Plan Permit Registration
New Building Permit Document Required screen will be displayed after login, which helps the user to understand the necessary documents needed to complete the new registration for New Building Permit. A Citizen Info card is also shown at the bottom of the page for any additional information, in here it’s about the maximum size of the file that can be uploaded.
Time Line Component
In all the pages Time Line component is present which informs the user about each stepper in completing the whole application registration.
Scrutiny Details Step:
In this step user will need to provide and verify the details from scrutiny API.
Basic Details
User will need to verify the basic details received from the API, by passing the eDCR scrutiny number or if the scrutiny number is not Pre-entered, user can enter the number and search for the result.
Plot Details:
the data asked here is not compulsory, user can enter or skip it all together.
Scrutiny Details:
In this page half of the details are received from scrutiny details API, and a drop down for sub occupancy which is multiple in nature and user can select accordingly.
Location Details:
User can click on GIS icon and select and drop the current address from the geolocation component.
If user doesn't want to select the location on the map, it can enter the pincode and accordingly city and locality will get selected.
Owner & Document Step:
In this step user need to provide details about the owner, it could be single or multiple.
Owner Details:
Multiple owner option selected
Add owner button will be visible and also the Primary Owner checkbox will be available. by clicking on Add Owner button user can add multiple owners accordingly. On clicking on Next button, create API will be called.
Document Details
user has to select the document type and also can upload multiple documents if needed using document upload component. if the type is only one, then it came pre selected for user convenience. Also the documents which are mandatory are defined in MDMS and are taken from there.
An info card is also visible which informs the user about the application number of the application created in the create API call.
NOC Details
User need to verify and upload the documents if required for the NOC details, these information are also fetched from MDMS.
Summary Page and Acknowledgement Screen:
Users can cross-verify the data entered throughout the flow in the Summary page and also if needed to change/update any data, can do that by clicking on the edit icon just mentioned in front of the section header, it will credit 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.
Along with this Fee estimate for the corresponding application is also shown in the summary page.
For Applying of BPA Application updated API is being called, following is the snippet of the Update API being used:
update: "/bpa-services/v1/bpa/_update",If the API response is successful, then the Acknowledgement Screen will be displayed, otherwise Failed Acknowledgement Screen will be displayed.
OC Apply for New Building Permit Application (BPA)
for OCBPA flow, the whole flow is similar to BPA flow only mentioned above just few things are not necessary and therefore omitted in this flow.
OC Plan Scruntiny for new construction:
on clicking of this button user can create an OC eDCR number. for this user will need the permit number and date and this user can get by applying and completing the flow for BPA Application at the end of the approval permit number and permit date is visible, which then can be used to generate OC eDCR number.
Documents required
screen will be visible which will specify what all document or data required to generate OC eDCR number
OC eDCR scrutiny details
By giving the permit number and date, all the details regarding the application will be prepopulated.
After verifying the details user need to upload DXF file, just like in BPA application in order to generate the OC Scrutiny number.
On successful creation Acknowledgement page will be shown
Apply for OC New Construction will take into the same flow as the Apply for new building permit button just the Location & owner details page will be skipped and create API will be called in scrutiny details page. rest everything remains same.
Technical Implementation Details:
All the screen has been developed using the new-UI structure followed previously in FSM, PGR, PT and TL, few new components have been introduced such as Time Line, Multi upload Document etc
The link for the BPA & EDCR Main Index is given below, it can be used to understand the starting point of the flow:
The link for the OCBPA & OCEDCR Main Index is given below, it can be used to understand the starting point of the flow:
OBPS 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. New component like Time Line is defined under component folder. Below is the snippet for folder structure and routing configuration.
Config responsible for routing of each flow
BPA (new building permit Application) : https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/obps/src/config/buildingPermitConfig.js
EDCR (scrutiny number) : https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/obps/src/config/edcrConfig.js
OCBPA (OC new building permit Application) : https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/obps/src/config/ocbuildingPermitConfig.js
OCEDCR (OC Scrutiny number) : https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/obps/src/config/ocEdcrConfig.js
Pages Folder is where the high level configuration for controlling the whole flow is mentioned, for citizens and employees. Citizen includes Apply flows, send back flows, Application details etc. Which inside carry the index (the main starting point of the whole flow).
The main difference of BPA/OCBPA registration flow from other modules apply flow is that the create API is being called in between the flow and at the end the update API is called.
The code for create API request object generation can be found inside the Owner details or scrutiny details component for BPA & OCBPA respectively. this API call is triggered when user clicks on the next button in correspondence address page.
for BPA/OBPS create API call, Digit.OBPSService.create is used to call the API, whole method can be found inside gonext() method in the following files respectively.
Code reference : https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/obps/src/pageComponents/OwnerDetails.js / https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/obps/src/pageComponents/ScrutinyDetails.js
Utils Folder basically contains all the methods which are being used throughout the OBPS module, and if any common method needs to be declared here, which in turn can be imported in other files.
Througout the flow, Download button is mentioned according to the current state of the Application, these documents are generated from the sever side, and are dependent on the business service of the application, to define the business service and the following keys refer the below code:
if(data?.applicationData?.businessService === "BPA_LOW")
{
businessService = ["BPA.LOW_RISK_PERMIT_FEE"]
}
else if(data?.applicationData?.businessService === "BPA")
{
businessService = ["BPA.NC_APP_FEE","BPA.NC_SAN_FEE"];
}
else if(data?.applicationData?.businessService === "BPA_OC")
{
businessService = ["BPA.NC_OC_APP_FEE","BPA.NC_OC_SAN_FEE"];
}following are the hooks used for the download PDF call:
let response = await Digit.PaymentService.generatePdf(tenantId, { Bpa: [requestData] }, order);
const fileStore = await Digit.PaymentService.printReciept(tenantId, { fileStoreIds: response.filestoreIds[0] });
window.open(fileStore[response?.filestoreIds[0]], "_blank");here order for Occupancy Certificate : occupancy-certificate and for Permit order: buildingpermit-low
For updating an Application the update API from BPA is being called using the React hooks, which has been declare under hooks/elements/obps as OBPSService.
The response object from create API is being used for the request object of update API, with addition of document details which user had entered, it will make the status of the Application as Applied instead of initiated. along with this NOC update API is also called which updates the status of the NOC aligned with the particular application.
for update API for NOC, BPA & OCBPA, the hook used for calling the API is:
This API is called in the respective Acnowledgement Page:
https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/obps/src/pages/citizen/OCBuildingPermit/OBPSAcknowledgement.js / https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/obps/src/pages/citizen/OCBuildingPermit/OBPSAcknowledgement.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 Details Name | Master Detail Name |
|---|---|---|---|
EDCRForm | City list |
|
|
DocsRequired | Documents required List |
|
|
BasicDetails | Risk Type |
|
|
OwnerDetails | Gender & Ownership category |
|
|
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-bpa’ locale module. In future if any new labels are implemented in the OBPS - Architect (Citizen) that should also be pushed in the locale DB under rainmaker-bpa locale module. Below is the example of few locale labels.
API Call Role Action mapping:
S.No. | API
| Action id | Roles |
|---|---|---|---|
1 |
|
|
|
2 |
|
|
|
3 |
|
|
|
4 |
|
|
|
5 |
|
|
|
6 |
|
|
|
7 |
|
|
|
8 |
|
|
|
9 |
|
|
|
10 |
|
|
|