Objective: Provide employees with purposeful workflow actions.

The same screen is used for both Application Details and Modify Application Details workflows. The details are provided below for the applicable scenarios.

Workflow Details

Application Details

Clicking on the application number from the inbox/search screen/connection search, routes to the application details screen. A search call is made before rendering the screen and details are populated based on the search response.

Application Details Screen

Refer to Employee: Ad-hoc Rebate/Penalty and View Breakup in application details

Timeline View

Downloads

Estimation Letter

Once the Pending for Field Inspection stage is complete (if the status is pending approval) an Estimation Letter is generated.

Sanction Letter & Download Receipt

Once the payment stage is complete (and the status is pending for connection activation), the Sanction letter and receipt are generated.

Water & Sewerage Workflow Table

Technical Implementation Details

Application Details File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pages/employee/ApplicationDetails.js

Hook details for application details search:

let { isLoading, isError, data: applicationDetails, error } = Digit.Hooks.ws.useWSDetailsPage(t, tenantId, applicationNumber, serviceType);  let workflowDetails = Digit.Hooks.useWorkflowDetails(    {      tenantId: tenantId,      id: applicationNumber,      moduleCode: applicationDetails?.processInstancesDetails?.[0]?.businessService,    },    {      enabled: applicationDetails?.processInstancesDetails?.[0]?.businessService ? true : false,    }  );
const { data: reciept_data, isLoading: recieptDataLoading } = Digit.Hooks.useRecieptSearch(    {      tenantId: stateCode,      businessService:  serviceType == "WATER" ? "WS.ONE_TIME_FEE" : "SW.ONE_TIME_FEE",      consumerCodes: applicationDetails?.applicationData?.applicationNo    },    {      enabled: applicationDetails?.applicationData?.applicationType?.includes("NEW_")    }  );
const { data: oldData } = Digit.Hooks.ws.useOldValue({    tenantId,    filters: { connectionNumber: applicationDetails?.applicationData?.connectionNo, isConnectionSearch: true },    businessService: serviceType,  });

The timeline view is common for all modules. File path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/index.js

Downloads Method Reference:

const applicationDownloadObject = { order: 3, label: t("WS_APPLICATION"), onClick: handleDownloadPdf, };

File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pages/employee/ApplicationDetails.js

Estimation Letter Method Reference:

const wsEstimateDownloadObject = { order: 1, label: t("WS_ESTIMATION_NOTICE"), onClick: () => getFiles([applicationDetails?.applicationData?.additionalDetails?.estimationFileStoreId], stateCode), };

File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pages/employee/ApplicationDetails.js

Sanction Fee Method Reference:

const sanctionDownloadObject = { order: 2, label: t("WS_SANCTION_LETTER"), onClick: () => getFiles([applicationDetails?.applicationData?.additionalDetails?.sanctionFileStoreId], stateCode), };

Receipt Method Reference:

const appFeeDownloadReceipt = { order: 4, label: t("DOWNLOAD_RECEIPT_HEADER"), onClick: () => getRecieptSearch(applicationDetails?.applicationData?.tenantId ? applicationDetails?.applicationData?.tenantId : Digit.ULBService.getCurrentTenantId(), reciept_data?.Payments?.[0], applicationDetails?.applicationData?.applicationNo, receiptKey ), };

File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pages/employee/ApplicationDetails.js

Localisation Details

Localisation keys are added in the ‘rainmaker-ws’ locale module.

API Call Role Action Mapping

Employee Roles and Credentials - The credentials and details are available in the document attached below:

Objective: Provide employees with specific workflow actions.

The same screen is used for both application details and to modify application details. The page provides the details of these workflows based on the conditions.

Workflow Details

Modify Application Details

Clicking on the Application Number in the inbox/search screen/connection search routes users to the application details screen. A search call is made before rendering the screen and details are populated based on the search response.

Modify Application Details Screen

Timeline View:

Downloads

Water & Sewerage Workflow Table

Implementation Details

Hook details for application details search:

Method Reference:

const applicationDownloadObject = { order: 3, label: t("WS_APPLICATION"), onClick: handleDownloadPdf, };

Localisation Details

Localisation keys are added in the ‘rainmaker-ws’ locale module.

Water & Sewerage Workflow:

API Call Role Action Mapping

Objective: To provide user facilities to disconnect an active W&S connection when they are not using the service. So, that they don’t have to pay for any charges

Validations

• To disconnect, connection should be in ACTIVE state. Connections which are under WORKFLOW or INACTIVE are not eligible for disconnection.

• In cases dues are pending, user has to clear the dues before applying for Disconnection.

• ‘Disconnect’ option itself is not displayed in the action list for the connection which are INACTIVE.

Route

My Connections → View Connection Details → Disconnect

Clicking on Disconnect it navigates to the Water and Sewerage Disconnection Application Document required screen.

File Path:

File Path:

Date Validation

On Clicking on Next button in the document required screen,

if the proposed date is after <slaDays for disconnection> it will route to Application form Water & Sewerage Disconnection, else it will throw an error in the form of toast messgae, “Date should be after <slaDays for disconnection> from application create Date“.

To get the SLA days /egov-workflow-v2/egov-wf/businessservice/_search?businessServices=DisconnectWSConnection API call is made on load of Application Form Page

Technical Implementation Details:

Initial MDMS call is being made on page load

Mdms data :

On Clicking on Next button in the Application Form Screen , it will route to Upload Documents Screen

On Clicking on Next button in the Upload Documents Screen , it will route to Summary Check Page Screen

In Check Page you can edit the entered data for Disconnection.

On Clicking on Submit button in the Check Page Screen , it will make water or sewerage create and update API calls.

Data fetch , load and render :

• ws-services/wc/_create

Payload: WaterConnection: {

...data,

isdisconnection : true,

isDisconnectionTemporary: true (if Temporary Disconnection selected else false),

disconnectionReason: ““

},

disconnectRequest: true

• sw-services/swc/_create

Payload: WaterConnection: {

...data,

isdisconnection : true,

isDisconnectionTemporary: true (if Temporary Disconnection selected else false),

disconnectionReason: ““

},

disconnectRequest: true

• ws-services/wc/_update

Payload: WaterConnection: {

...data,

isdisconnection : true,

isDisconnectionTemporary: true (if Temporary Disconnection selected else false),

disconnectionReason: ““

},

disconnectRequest: true

• sw-services/swc/_update

Payload: WaterConnection: {

...data,

applicationType: if(Water Application) "DISCONNECT_WATER_CONNECTION" else (if Sewerage Application) "DISCONNECT_SEWERAGE_CONNECTION",

processInstance: {

...data?.processInstance,

businessService: if(Water Application) "DisconnectWSConnection" else (if Sewerage Application) "DisconnectSWConnection",

action: "SUBMIT_APPLICATION", }

},

After the Success of the Create and Update calls it routes users to the Disconnection Acknowledgement screen.

Clicking on the Download Acknowledgement Form button downloads the Water or Sewerage Disconnection Acknowledgement PDF.

Objective: Provide the UI technical implementation details for the My Connections feature available for citizen users.

Workflow Details

Users can review the list of connections and their status registered under their mobile number in the My Connections tab. Each connection in the initial view will display the Consumer No, Service Name, Consumer Name, status, and property Address with the View Details option, through which the User can look up more details about the connection.

Once the user clicks on the View Details button, the Connection Details page is displayed with all the necessary information about the connection.

The link provided in the connection details page is similar to the link provided in the applications details page, eg Consumption details, for more reference

Technical Implementation Details

The path for the My Connections and Connection Details common Index is given below. It provides an understanding of the working of the code.

File path - packages/modules/ws/src/pages/citizen/MyConnection/index.js

The template for My Connection is present within packages/modules/ws/src/pages/citizen/MyConnection/WSConnection.js. The Connection Details page is available within packages/modules/ws/src/pages/citizen/MyConnection/ConnectionDetails.js. The Connection list is retrieved by calling the search API "/ws-services/wc/_search" & "/sw-services/swc/_search" using the searchType as CONNECTION for the filter params.

Hooks used for fetching the connections for Water and Sewerage are:

The code to the linked page, Consumption Details is available in the file: packages/modules/ws/src/pages/citizen/MyConnection/ConsumptionDetails.js

MDMS Data

No MDMS data is used here. All data is loaded from the Search API.

Localization

For My Applications, the localization keys are added in the ‘rainmaker-ws’ locale module same as My connections and create. Changes, updates or addition of any new localization key is done in the same locale module only.

API Role Action Mapping

Objective: The Apply and Modify feature in the WS module allows counter employees to create or modify Water and Sewerage applications.

Every application is a part of the workflow.

Workflow Details

Once a new application connection is activated, the system generates the consumer code. This code is used to route users to the connection details screen from the search/connection screen. Clicking on the Take Action button displays multiple options based on conditions. Clicking on the Modify Connection option routes users to the modify screen.

Validations

• To disconnect, the connection should be in an ACTIVE state. Connections which are under WORKFLOW or INACTIVE are not eligible for Modify.

Acknowledgement screen

W&S-Application

Creating an application on the water and sewerage module generates an acknowledgement form that can be downloaded by users. Processing the applications pending field inspection and user payment generates the Estimation Letter and Sanction Letter respectively. Find the configuration details for enabling the download of these documents.

Acknowledgement Download

Users can download the acknowledgement after submitting the W&S Create application.

Technical Implementation Details

Data fetch, load and render:

ws-services/wc/_create

sw-services/swc/_create

Case 1: In the case of Water connections:

• Clicking on the Submit button calls the ws-services/wc/_create API and creates the application. The update API ws-services/is called after getting a successful response on creating the application.

Case 2: In the case of Sewerage connections:

• Clicking on Submit button calls the sw-services/swc/_create API and creates the application. The update API sw-services/swc/_updateis called after getting a successful response on creating the application.

Successful create and update calls routes users to the acknowledgement screen.

For the application PDF, all related code is written to the W&S folder in the below-mentioned file.

Role Action Mapping

Objective: The Water and Sewerage 'Apply Disconnection' is the major feature in WS Module. It allows Counter Employees to create Water and Sewerage Applications.

Every application is a part of the workflow.

Workflow Details

Once a new application connection is activated, the system generates a consumer code. This code is used to route users to the connection details screen from the search/connection screen.

Clicking on the Take Action button displays multiple options based on conditions. Clicking on the Apply for Disconnection option routes users to the Disconnect Document Required screen.

Validations

• To disconnect, the connection should be in an ACTIVE state. Connections which are under WORKFLOW or INACTIVE are not eligible for disconnection.

• In cases dues are pending, the user has to clear the dues before applying for Disconnection.

• The Disconnect option itself is not displayed in the action list for the connection which is INACTIVE.

Connection details:Employee: Water and Sewerage Connection Details

Clicking on the Apply button routes users to the Disconnection apply screen.

Acknowledgement screen

Successful create and update calls routes users to the acknowledgement screen.

W&S Application

Users get the acknowledgement form once they have created and submitted their application successfully. Processing of applications pending field inspection and user payment enables the download of the estimation letter and the sanction letter respectively. The section below provides the configuration for the document downloads.

Acknowledgement Download

Users can download the acknowledgement after submitting the W&S Create Application.

Technical Implementation Details

File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pageComponents/WSDisconnectionDocsRequired.js

File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pages/employee/DisconnectionApplication/index.js

Data fetch, load and render

ws-services/wc/_create

sw-services/swc/_create

Case 1: In the case of Water connections:

• Clicking on Submit button calls the ws-services/wc/_create API and creates the application. The update API ws-services/wc/_updateis called after getting a successful response on creating the application.

Case 2: In the case of Sewerage connections:

• Clicking on Submit button calls the sw-services/swc/_create API and creates the application. The update API sw-services/swc/_update is called after getting a successful response on creating the application.

File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pages/employee/WSResponse.js

File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pages/employee/DisconnectionApplication/WSDisconnectionResponse.js

The code for the application PDF is written in the below-mentioned file.

File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/utils/getWSAcknowledgementData.js

Role Action Mapping

Objective: Provide the details of the connection to the employees and citizens.

Connection Details

The Connection Details page provides the details about the connection, the property which is used to create the connection and the owner details of the property. The same can be downloaded as a PDF file or printed directly from the page.

Employees will be able to open the “View Consumption Details” page from the “Connection Details” page for the Metered Reading Connection. The Consumption Details page will provide more options like adding details of the consumed water charges.

Users have the option to add new meter readings. Clicking on it displays a pop-up, where the user can fill in the asked details and click on submit to add a new meter reading for the connection.

Downloads

Technical Implementation Details

The hook used for fetching connection details -

const { isLoading, isError, data: response } = Digit.Hooks.ws.useWSConsumptionSearch({ filters: filter1 }, { filters: filter1 });

Connection Details File Path: https://github.com/egovernments/DIGIT-Dev/blob/master/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pages/employee/connectionDetails/ConsumptionDetails.js

Meter Reading File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pages/employee/connectionDetails/connectionDetails.js

Hook details for connection details search and others:

const { isLoading, isError, data: applicationDetails, error } = Digit.Hooks.ws.useConnectionDetail(t, tenantId, applicationNumber, serviceType);
const {    isLoading: updatingApplication,    isError: updateApplicationError,    data: updateResponse,    error: updateError,    mutate,  } = Digit.Hooks.ws.useWSApplicationActions(serviceType);
const { data: reciept_data, isLoading: recieptDataLoading } = Digit.Hooks.useRecieptSearch(    {      tenantId: stateCode,      businessService:  serviceType == "WATER" ? "WS.ONE_TIME_FEE" : "SW.ONE_TIME_FEE",      consumerCodes: applicationDetails?.applicationData?.applicationNo    },    {      enabled: (applicationDetails?.applicationData?.applicationNo && applicationDetails?.applicationData?.applicationType?.includes("NEW_") && !applicationDetails?.colletionOfData?.length > 0) ? true : false    }  );

Downloads File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pages/employee/connectionDetails/connectionDetails.js

Download Receipt Method:

const appFeeDownloadReceipt = {    order: 1,    label: t("DOWNLOAD_RECEIPT_HEADER"),    onClick: () => getRecieptSearch(reciept_data?.Payments?.[0]),  };

Connection Details Receipt Method:

const connectionDetailsReceipt = {    order: 2,    label: t("WS_CONNECTION_DETAILS_RECEIPT"),    onClick: () => downloadConnectionDetails(),  };

Localisation Details

Localisation keys used on this page are added under “rainmaker-ws” locale module and the same should be used if any new keys are added to this page.

API Call Role Action Mapping

Objective: Provide the UI technical implementation details for the Create applications feature available for citizen users.

Workflow Details

To provide user facilities to add new W&S connection applications and view the details of the connection and application currently on their number. It also allows the users to update the connection or edit the application.

Water & Sewerage Create

Users can add new connections using the Apply For New Connection button. The workflow adds valid information, as per the question asked. At the end of the flow, a Check page is displayed on which the user can cross-verify the information entered. The application is created upon submission.

Water & Sewerage Create Flow:

WNS information screen is displayed after login, which helps the user to understand the necessary documents needed to complete the new registration for a new connection.

Property Details Flow:

Users can either add the property details by using the property search of commonPT or can choose to create a lightweight property using the commonPT create. Both screens lead users to the property details page, which displays a summary of the property selected or created.

Connection Details Flow:

Here users can either select to go with the owners of the property or can choose to add connection holder details. Users have 3 options to choose from in context to the type of connection required:

1. Water Connection

2. Sewerage Connection

3. Water and Sewerage Connection

Based on the selection, the create API is called.

water_create: "/ws-services/wc/_create",
sewarage_create: "/sw-services/swc/_create",

Document Details:

Users can upload all documents related to the data entered. The list of documents is controlled by the MDMS data and hence can be modified as per requirements.

Check Page & Acknowledgement Screens:

Users can cross-verify the data entered throughout the flow on the Check page. If any changes or updates are required to the data users can do this by clicking on the Edit option available in front of the section header. This routes them to the specific page where 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 is displayed. Else, the Failed Acknowledgement Screen is displayed.

Technical Implementation Details

The structure followed here is the same as in the previous modules. The path for the WNS Main Index is given below and 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. The screen configuration is inside the PageComponent Folder, and the configuration for routing of the pages is mentioned in the config folder which is common for both citizen users as well as employees.

The Create API is called based on the service selected on the Connection Details page. The following hook call can be found on 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

Digit.WSService.create(payload, "WATER")
        .then((result, err) => {
          setIsDisableForNext(false);
          let data = {...formData, WaterConnectionResult: result, waterConectionDetails : {proposedTaps : proposedTaps, proposedPipeSize : proposedPipeSize}  }
          //1, units
          onSelect("", data, "", true);

        })
        .catch((e) => {
          setIsDisableForNext(false);
          setShowToast({ key: "error" });
          setError(e?.response?.data?.Errors[0]?.message || null);
        });

After the check page, the Update API is called and this is available on the Acknowledgement page:

/DIGIT-Dev/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pages/citizen/WSCreate/WSAcknowledgement.js

 if(data?.serviceName?.code === "WATER" || data?.serviceName?.code === "BOTH"){
        tenantId = data?.cpt?.details?.tenantId || tenantId;
        let formdata = isEdit ? convertToEditWSUpdate(data) : convertToWSUpdate(data);
        WSmutation.mutate(formdata, {
          onSuccess,
        })

After completing the flow, the users can download the acknowledgement PDF form of the application created and the config for the PDF generation is available 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, a few of the page data is imported from the MDMS. Following is the list of pages using MDMS data. The pages .js files are available in the page component column.

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

 const { isLoading: wsDocsLoading, data: wsDocs } = Digit.Hooks.ws.WSSearchMdmsTypes.useWSServicesMasters(tenantId);

Localization

The localization keys are added under the ‘rainmaker-ws’ locale module. In future, if any new labels are implemented in the Water and Sewerage they should also be pushed in the locale DB within the rainmaker-ws locale module.

API Role Action Mapping

Objective: Provide employees with specific workflow actions.

This page provides the workflow details and actions for water and sewerage disconnection application details.

Workflow Details

Application Details

Clicking on the Application Number in the inbox/search screen routes users to the disconnection application details screen. A search call is made before rendering the screen and details are populated based on the search response.

Application Details Screen

Application Timeline

Downloads

Application Form

Disconnection Notice

Water & Sewerage Disconnection Workflow Table

Implementation Details

Application Details File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pages/employee/ApplicationDetails.js

Hook details for application details search:

let { isLoading, isError, data: applicationDetails, error } = Digit.Hooks.ws.useDisConnectionDetails(t, tenantId, applicationNumber, serviceType);

Disconnection Notice Download File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pages/employee/DisconnectionDetails.js

Application Form Download File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/ws/src/pages/employee/DisconnectionDetails.js

The timeline view is common for all modules. Timeline view file path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/index.js

Localisation Details

Localisation keys are added in the ‘rainmaker-ws’ locale module.

API Call Role Action Mapping

Objective: To provide the facility of abstraction of private details of users. It will also help in masking sensitive details and unmasking the information by authorized roles whenever needed.

Workflow Details

Masking / Un-Masking of Data

Particular entries of an object from the search API will appear masked if it is enabled in the MDMS (mentioned in the technical implementation section below). This is based on roles and if the value is masked in UI, the eye icon will be available adjacent to it. Clicking on this icon allows users to unmask it.

Once the user clicks on the eye icon, the corresponding search API is called with plainAccessRequestobject in the request info. This allows the data to be unmasked in the response object and leads to the refreshing of values and the whole data is visible. The eye icon will not be visible anymore.

Technical Implementation Details

The masking of data and its dependency on roles is defined in the following MDMS file: egov-mdms-data/SecurityPolicy.json at develop · egovernments/egov-mdms-data (github.com)

Let us take an example of an object in the MDMS file i.e. WnSConnection

{
      "model": "WnSConnection",
      "uniqueIdentifier": {
        "name": "applicationNo",
        "jsonPath": "applicationNo"
      },
      "attributes": [
        {
          "name": "ownerType",
          "jsonPath": "connectionHolders/*/ownerType",
          "patternId": "005",
          "defaultVisibility": ""
        },        
        {
          "name": "plumberInfoMobileNumber",
          "jsonPath": "plumberInfo/*/mobileNumber",
          "patternId": "008",
          "defaultVisibility": ""
        },
        {
          "name": "relationship",
          "jsonPath": "connectionHolders/*/relationship",
          "patternId": "005",
          "defaultVisibility": ""
        }
      ],
      "roleBasedDecryptionPolicy": [
        {
          "roles": ["EMPLOYEE","CITIZEN","WS_CEMP","WS_DOC_VERIFIER","WS_FIELD_INSPECTOR","WS_APPROVER","WS_CLERK","SW_CEMP","SW_DOC_VERIFIER","SW_FIELD_INSPECTOR","SW_APPROVER","SW_CLERK"],
          "attributeAccessList": [
            
            {
              "attribute": "ownerType",
              "firstLevelVisibility": "MASKED",
              "secondLevelVisibility": ""
            },
            {
              "attribute": "plumberInfoMobileNumber",
              "firstLevelVisibility": "MASKED",
              "secondLevelVisibility": ""
            },
            {
              "attribute": "relationship",
              "firstLevelVisibility": "MASKED",
              "secondLevelVisibility": ""
            }
          ]
        }
      ]
    },

Here the unique identifier is defined as applicationNo, so from UI plain request object which is sent in Search API contains recordId as applicationNo. Similarly, the list of attributes mentioned here is received as masked by default in the response object from the Search API. The roles mentioned in the roles array defines the roles for which these attributes were to be masked.

Masking in details Page

In the UI code repository, If any particular data has to be masked then we have to send a Privacy object along with corresponding data to ApplicationDetailsTemplate

Example:

For water application details the connection holder details have to be masked. The privacy object is passed from the applicationdetails hook.

Relationship object of connection holder details below:

 { title: "WS_CONN_HOLDER_OWN_DETAIL_RELATION_LABEL", value: wsDataDetails?.connectionHolders?.[0]?.relationship,
              privacy: { uuid: uuid, fieldName: ["relationship"], model: "WnSConnection",showValue: false,
              loadData: {
                serviceName: serviceType === "WATER" ? "/ws-services/wc/_search" : "/sw-services/swc/_search",
                requestBody: {},
                requestParam: { tenantId, applicationNumber },
                jsonPath: serviceType === "WATER" ? "WaterConnection[0].connectionHolders[0].relationship" : "SewerageConnections[0].connectionHolders[0].relationship",
                isArray: false,
              }, },
            },

Here uuid is the record id which we have to send for a particular model; fieldName is the name defined in the MDMS as well as the exact param which we receive in the response object; model is the model from SecurityPolicy MDMS; showValue is sent as true if we want to append any data with the newly unmasked data. Usually, this is used for property address and loadData is an object in which we sent the body and params for the API call that must be made in order to get the unmasked data. Refer code - DIGIT-Dev/Search.js at 090ef18028a50f38222e426ec59ab9f123833af0 · egovernments/DIGIT-Dev (github.com)

ApplicationDetailsTemplate has the eye icon already integrated with Row Component, which can be enabled by passing the above privacy object. Refer code - DIGIT-Dev/StatusTable.js at 090ef18028a50f38222e426ec59ab9f123833af0 · egovernments/DIGIT-Dev (github.com)

UnMaskComponent is the main component which handles all the unmasking action through the eye icon. The following component must be integrated if the eye icon needs to be implemented in any given place.

 const { isLoading, data } = Digit.Hooks.useCustomMDMS(
    Digit.ULBService.getStateId(),
    "DataSecurity",
    [{ name: "SecurityPolicy" }],
    {
      select: (data) => data?.DataSecurity?.SecurityPolicy?.find((elem) => elem?.model == privacy?.model) || {},
    }
  );
  const { privacy: privacyValue, updatePrivacy } = Digit.Hooks.usePrivacyContext();
  if (isLoading || privacy?.hide) {
    return null;
  }
  
  if (Digit.Utils.checkPrivacy(data, privacy) && iseyevisible) {
    sessionStorage.setItem("isPrivacyEnabled","true");
    return (
      <span
        onClick={() => {
          sessionStorage.setItem("eyeIconClicked",privacy?.fieldName);
          updatePrivacy(privacy?.uuid, privacy?.fieldName);
        }}
      >
      <div className={`tooltip`}>
        <PrivacyMaskIcon className="privacy-icon" style={style}></PrivacyMaskIcon>
            <span className="tooltiptext" style={{
                    fontSize: "medium",
                    width: "unset",
                    display: "block",
                    marginRight:"-60px",
                  }}>
                   {t("CORE_UNMASK_DATA")}
                  </span>
                </div>
      </span>
    );
  }
  return null;
});

This loads the MDMS data and filters it out as per the specified model for which the unmaskComponent is being called. Next, it calls the checkprivacy obejct to verify if privacy is enabled for that particular role and model (refer to below code for privacy check).

export const checkPrivacy = (mdmsObj, privacyDetail) => {
  if (mdmsObj?.attributes?.some((ele) => (ele?.name === privacyDetail?.fieldName || privacyDetail?.fieldName?.includes(ele?.name) )&& ele?.defaultVisibility === "MASKED")) {
    return true;
  }
  const userInfo = Digit.UserService.getUser();
  const userRoles = userInfo?.info?.roles?.map((roleData) => roleData?.code);
  if (
    mdmsObj?.roleBasedDecryptionPolicy?.some(
      (ele) =>
        ele?.roles?.some((e) => userRoles?.includes(e)) &&
        ele?.attributeAccessList?.some(
          (ele) => (ele?.attribute === privacyDetail?.fieldName || privacyDetail?.fieldName?.includes(ele?.attribute)) && ele?.firstLevelVisibility === "MASKED" && ele?.secondLevelVisibility === ""
        )
    )
  ) {
    return true;
  }
  return false;
};

If the checkprivacy is returned true, the eye icon is visible and clicking on it calls the updateprivacy method defined in useprivacycontext hook: Refer - DIGIT-Dev/usePrivacyContext.js at 090ef18028a50f38222e426ec59ab9f123833af0 · egovernments/DIGIT-Dev (github.com)

This triggers the search hook called again with plainAccessRequest (mentioned in the above picture), but for that privacy object has to be sent in the hook for re-triggering.

  let { isLoading, isError, data: applicationDetails, error } = Digit.Hooks.ws.useWSDetailsPage(t, tenantId, applicationNumber, serviceType, userInfo,{ privacy: Digit.Utils.getPrivacyObject() });

For all methods related to privacy, refer to the document here: DIGIT-Dev/privacy.js at develop · egovernments/DIGIT-Dev (github.com)

Unmasking in Edit Details page

For enabling the eye icon in the text field similar steps have to be followed :

1. The search API Hook used to prefill the data in the edit screen should have a privacy object being sent in it.

2. Unmask component has to be defined with the corresponding component.

  let { isLoading, isError, data: applicationDetails, error } = Digit.Hooks.ws.useWSDetailsPage(t, tenantId, details?.applicationNo, details?.applicationData?.serviceType,{privacy : Digit.Utils.getPrivacyObject() });

render={(props) => (
                <div style={{display:"flex",alignItems:"baseline",marginRight:props.value?.includes("*")? "-20px" : "-4%"}}>
                <div className="employee-card-input employee-card-input--front" style={{ position: "relative", marginTop:"4px" }}>+91</div>
                <TextInput
                  //type="number"
                  value={props.value}
                  autoFocus={focusIndex.index === connectionHolderDetail?.key && focusIndex.type === "mobileNumber"}
                  errorStyle={(localFormState.touched.mobileNumber && errors?.mobileNumber?.message) ? true : false}
                  onChange={(e) => {
                    setMobileNumber(e.target.value)
                    props.onChange(e.target.value);
                    setFocusIndex({ index: connectionHolderDetail?.key, type: "mobileNumber" });
                  }}
                  labelStyle={{ marginTop: "unset" }}
                  onBlur={props.onBlur}
                  style={checkifPrivacyValid() && !(props.value?.includes("*")) ? (!(Digit.Utils.checkPrivacy(privacyData, { uuid:connectionHolderDetail?.uuid, fieldName: "connectionHoldersMobileNumber", model: "WnSConnectionOwner" })) && !(Digit.Utils.checkPrivacy(privacyData, { uuid:connectionHolderDetail?.uuid, fieldName: "mobileNumber", model: "User" })) ? {width:"96%"} : {width:"96%", background: "#FAFAFA"}) : {background: "#FAFAFA"}}
                />
                {checkifPrivacyValid() && <div style={{marginRight:"-10px",marginLeft:"10px"}}>
                <UnMaskComponent iseyevisible={props.value?.includes("*")?true:false} privacy={{ uuid:connectionHolderDetail?.uuid, fieldName: "connectionHoldersMobileNumber", model: "WnSConnectionOwner" }}></UnMaskComponent>
                </div>}
                </div>

Refer: Index page for edit details: DIGIT-Dev/index.js at develop · egovernments/DIGIT-Dev (github.com)

MDMS Data

SecurityPolicy.json is used to handle all privacy-related action

Objective: Provide the UI screens and configuration details for the ad-hoc rebate or penalty feature and the view breakup option available in water and sewerage applications.

Workflow Details

Ad-hoc Rebate/Penalty

The Water and Sewerage ad-hoc Rebate/Penalty is a feature in WS Module. It allows employees to add rebates or penalties for Water and Sewerage Applications.

Clicking on the Add Rebate/Penalty option opens the popup with the fields.

Clicking on the Add button on the pop-up screen closes the pop-up window and the filled-in data is updated in the Fee Estimate card.

View Breakup

The View Breakup feature in the WS module allows employees to view the details of tax heads for water and sewerage applications.

After logging in with Water and sewerage employee roles the user gets the option to view the breakup in the new WS/SW Application in the Fee Estimate card in the WS/SW application details.

WS/SW Application details: Employee: Water and Sewerage Application Details

Clicking on the View Breakup option opens the popup with the updated data.

Implementation Details

Once the user logs in with "WS_APPROVER", "WS_FIELD_INSPECTOR", "SW_FIELD_INSPECTOR", "SW_APPROVER". If the roles and actions buttons are visible on the screen, then the user gets the option to add Ad-hoc Rebate/Penalty to a new WS/SW application in the Fee Estimate card in the WS/SW application details.

WS/SW Application details: Employee: Water and Sewerage Application Details

Fee Estimation File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/WSFeeEstimation.js and the initial data and logic is from the Application details in https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/libraries/src/services/molecules/WS/Search.js

Fee Estimation Pop-up functionality is present in the https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/WSFeeEstimation.js

View Breakup File Path: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/ViewBreakup.js and the initial data and logic is from the Application details in https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/libraries/src/services/molecules/WS/Search.js

View Breakup pop-up functionality is present in the https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/ViewBreakup.js

Localisation Details

Localisation keys are added under the ‘rainmaker-ws’ locale module.

API Call Role Action Mapping

Objective: Provide the UI technical implementation details for the My Applications feature available for citizen users.

Workflow Details

Users can review the list of applications and their status registered under their mobile numbers in the My Applications tab. Each application for the initial view displays Application No., Service Name, Consumer Name, Property Id, Status, SLA and Property Address with the View Details option, through which the user can look up more details about the application.

Once the user clicks on the View Details button, the Application Details page is displayed with all the necessary information about the application.

There are two links provided in the application details screen. One is for Property Details which allows users to see the in-depth details of the property associated with the application. The other is available on the Connection Details page to view the Additional Details of the connection for the application.

Timeline Component

The Timeline component is present at the end of the application details which tells about the current status and history of the application (open to edit, approve, reject, or closed).

Technical Implementation Details

The file path for the My Applications and Application Details common Index is given below. It provides an understanding of the working of the code.

File path: packages/modules/ws/src/pages/citizen/WSMyApplications/index.js

The template for My Application is available within packages/modules/ws/src/pages/citizen/WSMyApplications/ws-application.js. The Application Details page is available within packages/modules/ws/src/pages/citizen/WSApplicationDetails.js. The Application list is retrieved by calling the search API "/ws-services/wc/_search" & "/sw-services/swc/_search"

Hooks used for fetching the applications for Water and Sewerage are:

MDMS Data

No MDMS data is used here. The data is loaded from the Search API.

Localization Details

For My Applications, the Localization keys are added to the ‘rainmaker-ws’ locale module same as My connections and Create. Changes, updates or addition of any new localization key is done in the same locale module only.

API Role Action Mapping