Objective: The User Profile page is used to view or update user details like name, gender, email, phone number, and profile pic.

A user profile is created when the user registers into the application for the first time.

Types of User Profiles

• Citizen: A citizen is a basic user who uses the application to perform basic tasks including

  • creating applications, properties, etc

  • viewing all applications, properties, etc

  • payments

• Employee: An employee is a user linked to the organization and is more privileged than the citizen and can perform the following tasks

  • creating applications, properties, etc

  • viewing all applications, properties, etc

  • payments

  • and many more

Technical Implementations

Technical Implementations of the user profile code link: https://github.com/egovernments/DIGIT-Dev/blob/master/frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/citizen/Home/UserProfile.js

API Call Role Action Mapping

Overview

Employees can change cities by clicking on the dropdown available in the top right corner of the screen.

Screen Details

Changing the city allows employees to perform all actions such as generating demand and collections etc in the new ULB/City.

Overview

The User Profile page for citizens can be accessed by clicking on the Edit Profile icon in the app drawer. Click on the hamburger menu in the top bar on the app to open the app drawer.

Screen Details

Functionalities - User Profile Page

Upload or remove profile picture

• A user can upload or remove their profile picture by clicking on the camera icon available over the profile thumbnail.

• Clicking on the camera icon displays the bottom drawer. Select the upload photo from the gallery or remove the profile picture option as required.

The user can upload a new photo or remove the old photo.

Update user details

• Users can update their details by editing the required text fields on the User Profile page.

• Values entered by the user must be valid.

Update user password (Only for employee users)

• Users can also change the current password by providing

  • current password

  • new password

  • confirm password (must be same as new password entered)

Save changes

• All changes are updated when the Save button is clicked.

• Saving changes validates the fields and the status is shown in the toast messages.

User details are updated successfully.

Overview

The user profile page allows users to manage user information. Users can add their own profile picture and can update their password from this page. The User Profile page provides common functionalities for both citizens and employees with some differences.

Screen Details

Employees can access the User Profile page by clicking on the Edit Profile icon at the top app bar.

Below are the fields employees can edit as per the given validation.

Objective: To facilitate users update invalid or inactive mobile numbers in the owner records.

Update Mobile Number

1. Reminds ULB users about the invalid mobile numbers existing in the owner's record and facilitates updating those in an easy way.

2. Enables ULB users to update the mobile numbers in a request from the property owner(s).

3. Enables property owner(s) to update the mobile number in their record by way of login into the system.

Users can update the mobile number from the application details page by clicking on the assign button at the workflow level.

This opens a pop-up window where users can enter the respective details required to update the mobile number.

Click on the Update button once the details are entered.

Following actions take place on successful updates -

1. Mobile number is updated in the owner’s record and a success message is displayed.

2. View Property page is refreshed to reflect the updated mobile number.

3. SMS is sent to both (old and new) mobile numbers intimating about the change in the mobile number in the owner’s record.

The following actions take place on failure to update -

1. Failure message is displayed.

2. User remains on the View Property page.

Invalid Mobile Number

Property is searched to collect the tax and the search result is displayed.

Clicking on the Collect Tax button displays an alert dialogue box communicating the following details:

1. Mobile number associated with owner(s) detail is incorrect. Update the correct mobile number to receive future notifications. - Text message.

2. Continue to Collect- action button

3. Update Mobile Number - action button

Continue to Collect - The user is taken to the collection page and the collection process is completed.

Update Mobile Number - Users must provide the below details to update the mobile number:

1. Owner’s name - displays the owner name.

2. Current mobile number - displays the existing mobile number of the owner.

3. New mobile number - a text box to enter the new mobile number. The mobile number validations are applicable as per the DIGIT standard mobile number validation.

4. Documents required - provision to upload necessary documents as attachments. This is optional and includes -

   • Duly Signed Change Request Form

   • Identity Proof (Aadhar Card, Voter ID)

     • Document Name - Drop-down with the list of documents considered as identity proof.

     • Choose File - File picker to upload the file.

5. Update - action button to update the mobile no.

The remaining process is the same as in the application details edit page.

Technical Implementation Details

Update and invalid mobile number code link: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/pt/src/components/search/PropertySearchResults.js

Popup component code link: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/pt/src/pages/citizen/MyProperties/updateNumber.js

Assignment code:

const UpdatePropertyNumberComponent = Digit?.ComponentRegistryService?.getComponent("EmployeeUpdateOwnerNumber");

A mobile number is invalid if it doesn't match the pattern defined in the MDMS config file or if the number of digits is invalid.

MDMS Config

 "MdmsCriteria": {
        "tenantId": "pb",
        "moduleDetails": [
            {
                "moduleName": "PropertyTax",
                "masterDetails": [
                    {
                        "name": "UpdateNumber"
                    }
                ]
            }
        ]
    }

Response:

invalidNumber: "9999999999"
invalidPattern: "^[6789][0-9]{9}$"
skipEnabled: true
warningEnabled: true
documents:[]

MDMS

The MDMS is used to check any invalid number. This data is present in the technical implementation part.

Localization

The localization keys for the update mobile number and invalid number are added to the ‘rainmaker-pt’ locale module. Any changes, updates or addition of any new localization key is done in the same locale module.

Role Actions Mapping

Objective: To provide users with additional information on the error messages on UI.

Network Tab

Generic error messages may appear on the UI while using the application and performing some action. For instance, Something went wrong / Please try again or contact support.

Despite trying again, the same error message pops back up. What else could go wrong? The Network tab provides users with more information about the error.

The steps below provide detailed information on using the Network Tab.

Step 1: Inspect the Page On the page with the error message, right-click anywhere on the page. Click on Inspect in the dropdown menu.

Step 2: Select the Network Tab The browser’s network tab offers a way to look directly at what’s happening behind the scenes of a page. It offers not only the type of data being requested and passed as we interact with the page, but also provides information on any actions that are failing. After selecting Inspect, a new window pops up. Click on the Network tab on this window. Select the XHR filter option. This hides everything except API requests.

Step 3: Refresh the Page Click the Refresh button on your browser. Since the Network tab displays the requests that occur after the tab has been opened, refreshing the page enables users to view the error as it occurs. The various API request details appear on the page as it reloads.

Step 4: Re-create the Error The error needs to be re-created to understand what is causing it. This is done by repeating the steps that led to the error. For instance, clicking on Update re-creates the error and the panel pinpoints the request that is causing the issue.

Step 5: Find the Red-Line Item in the Network Panel The line item appearing in red is the error. The status reflected on the image above is 404, which is the error code for a bad request. If the status is 200, it means the code is OK and there is nothing wrong with these requests.

Step 6: Preview the Error Details Click on the red-line item to see the error details. Clicking on that line item opens a new frame on the right-hand side. The tabs in this frame include Headers, Preview, Response, Cookies, and Timing. Click on Preview since this contains the basic information.

Step 7: View the Error Message

There is no specific message in some cases. In this instance, the following message is displayed:

Thanks to the network panel, it allows users to diagnose the issue and apply a fix.