Overview

This document will help us generate the APK for Citizen and Employee applications.

Steps

1. Android Web View

Android offers a variety of ways to present content to a user. To provide a user experience that’s consistent with the rest of the platform, it’s usually best to build a native app that incorporates framework-provided experiences, such as Android App Links or Search. Additionally, you can use Google Play-based experiences, such as App Actions and Slices, where Google Play services are available. Some apps, however, may need increased control over the UI. In this case, a WebView is a good option for displaying trusted first-party content.

In Egov we create only responsive web apps instead of native apps (Android, IOS). The Android web view is used to render the out web application.

2. Generate APK For Citizen & Employee Applications

1. Clone the GitHub - egovernments/DIGIT-OSS: eGov Foundation's Open source repository of the DIGIT repo.

2. Open the below location in the Android studio.

Generate APK for citizen application

1. Go to build. Gradle file there we have created multiple environments(UAT and PROD), please select the environment where you want to generate APK and put your web application URL.

2. Update the web application URL as required Application URL.

   buildConfigField 'String', 'url', '"https://uat.digit.org/citizen/user/register"'

   also, specify the citizen gateway hostname if not using Mastercard,

   buildConfigField 'String', 'gatewayHost', '"migs.mastercard.co.in"'

3. Save the file on the left side of the Android studio. Click Build Variants and select the applicable build variant.

4. Click on Build menu, select Build APK(s) submenu.

It will take some time to generate and it will show generated location.

Generating APK for employee application

1. Go to build. Gradle file there we have created multiple environments (UAT and PROD), please select the environment where you want to generate APK and put your web application URL.

2. Save the file, left side of the android studio click Build variants, and select build variant.

3. Click on the build menu, and select Build APK(s) submenu.

It will take some time to generate and it will show generated location.

3. Generate APK For Production

1. Follow the 3rd and 4th steps mentioned above.

2. Click on the Build menu and select Generate Signed Bundle / APK.

1. Select 1st radio button - Android App Bundle.

1. Enter the information presented in the form and click on Next.

1. Upload the APK generated by the 4th step and upload it to the play store.

Related Links

How to debug android app using Chrome browser

Post the backend development and deployment of DIGIT as per steps detailed in the Backend Developer Guide, it is time to start building the UI screens. For illustration purposes, we are going to build the citizen and employee screens for the Birth Registration module.

This guide offers a systematic view of how to create the application screens on DIGIT.

Developer code: Download the UI code from the link here Birth-Registration.

List of Pre-requisites - Before starting with the UI development, know the list of technical requirements for frontend development on DIGIT UI.

Steps to follow: The docs and resources below offer a step-by-step guide to UI development.

Run Sample Module - Once you are done with the setup, run the sample module provided in this guide. Test run the module and deploy it using CI/CD to your development environment.

Before setting up: The following tools have to be installed prior to development. Make sure to install the specific versions provided below. If no version is provided, it is assumed that the latest version can be installed.

1. Install Visual Studio Code. VS Code Extensions to be installed from the marketplace:

2. Install NodeJS 14.20.0

3. version 1.22.19

4. Install Python version 2.7

5. Clone the repository locally from your organization's umbrella. This contains the frontend code under the frontend folder.

To learn how to install yarn on Linux, follow .

Technical Pre-requisites

• Prior knowledge of React JS

• Prior knowledge of HTML / CSS

• Prior knowledge of Redux/Hooks

• Prior knowledge of SCSS/React StoryBook

• Prior knowledge of Git

• Prior knowledge of Queries and Mutations

• Knowledge of the DIGIT UI framework

Check the page to access help documents on the tools required for UI development.

Overview

Once the local setup is completed, the next step is to run the application locally. This document provides the steps on how to run the digit-ui on a local machine.

Steps

Configure Environment File

Step 1: To run the application in the local environment, add the .env file in the example folder -

Step 2: Copy the below content and add to the .env file. If the user is a citizen then configure the .env file as follows:-

Step 3: To run the application as citizen, then update the value of REACT_APP_USER_TYPE=CITIZEN.

Step 4: To point the frontend to different environment change the REACT_APP_GLOBAL,and add the GlobalConfig environment file for that environment.

Update both REACT_APP_PROXY_API and REACT_APP_PROXY_ASSETS to the environment URL.

Initialise & Run The Application

Step 1: To initialise the Yarn execute the below command -

Step 2: Once the yarn initialization is successful execute the below command -

Step 3: Running this command will start the application.

Login As

There are two types of login -

1. Employee: If you log in as an employee, the below screen is displayed.

HomePage Employee: Once the employee is logged in, users are redirected to the employee home page.

1. HomePage Citizen: Once the citizens are logged in successfully, users are redirected to the citizen homepage.

HomePage Citizen

Overview

This document provides the steps for creating new screens in the DIGIT-UI.

Steps

Creating a screen in DIGIT UI involve simple steps and is classified into 4 different screen -

1. Create

2. View

3. Inbox

4. Search

Create Screen

To create any new screen of the Create type, use the FormcomposerV2 and transmit the configuration as specified in the sample.js file.

To check the different types of configurations, refer to the fieldSelector function.

View Screen

To use any view screen, create the hook for initiating API calls and structure the configurations for the View section.

• Refer to the integrated screen with ApplicationDetailsTemplate - ViewProperty.js.

• The hook details for the same is mentioned in useGenericViewProperty.js

• The service configuration details are available in Search.js

Inbox Screen

To create any inbox screen, use the InboxComposer and add the following configurations:

• Main file: EdcrInbox

• Check the folder which contains other configs like filter, table, search, and mobile responsiveness.

• The hook for the same is defined in useEDCRInbox.js

• Use the latest InboxSearchComposer (InboxV2)

• Both Inbox and Search screens can be shown based on the input configurations passed to that component - BillInbox.js

• Configuration are mentioned in InboxConfig for local reference and it is fetched from the MDMS BillInboxConfig.

Search Screen

An example for Search screen is available in SearchConfig.

Overview

This page provides the steps to configure the FormComposer.

Configuration Details

For complex configuration or screen details refer to documentation on Utility - preprocess

Other Variants (FormComposerV2)

There are 3 new use cases added to the FormComposer in addition to the default one where the whole form was rendered in a single card. Those 2 are the following:

• Multiple cards

• Cards with navigation menu

• Multiple cards with navigation menu on a single card

The following use cases are covered in the DIGIT-WORKS repo.

URL to access:/works-ui/employee/works/sampleForm

Multiple Cards

This can be done by setting the showMultipleCards prop to the FormComposer as true. In this case, every object in the formConfig will be treated as a separate Card and will be rendered accordingly.

Access Config Link.

Cards With Navigation Menu

FormComposer provides the option to activate a navigation menu that appears on top of the card. Each link in the menu corresponds to a specific card. To enable this feature, provide an array configuration for the navigation menu as a prop to the FormComposer component. Then, map each card with a link from the navigation menu configuration array using a designated key named "navLink", associating it with a value in the Navigation Menu Config.

Access Configuration link.

Multiple Cards With Navigation Menu On A Single Card

This use case is the same as above. The only difference is the navLink property in the config. If this property is present and valid for a card config, the corresponding card will be mapped to a navigation menu link. On the other hand, if navLink is not present or invalid, the corresponding card will be rendered as a separate Card.

Multiple options can be selected.

Overview

There are two common components for workflow related actions and timeline management.

• WorkflowActions -

• WorkflowTimeline -

Both of these components are available on each View Screen. The WorkflowTimeline component is responsible for presenting the workflow history at the bottom of the View Screen. Similarly, the WorkflowActions component renders an action bar at the bottom of the view screens, showcasing pertinent actions based on the logged-in user's role and workflow configuration.

Workflow Timeline

This component is directly integrated with the component that renders all the relevant data in view screens. WorkflowTimeline component is called in this component like this:

It expects a few props:

• BusinessService -> Name of the businessService from workflow configuration

• applicationNo -> Idgen generated application number

• tenantId

• timelineStatusPrefix -> prefix used in localisation of every checkpoint in timeline

• statusAttribute -> here we can pass the attribute(either status/state) that is the key in the workflow process instance response, whichever we want to show in the checkpoint.

This component internally calls the workflow APIs to fetch the process instance of the application and renders the history accordingly. It also makes a check for the current state of the application. If the current state is not terminated state then it will show an extra checkpoint at the top with statusAttribute as status to show pending states checkpoint. If the current state is terminated state then it will not show pending states.

Refer to the below snapshots, notice they both have 4 checkpoints. Approved refers to terminate state.

Workflow Actions

This component is rendered on every View component separately to render the action bar with relevant actions.

Sample code Snapshot:

It expects a few props:

• BusinessService -> Name of the businessService from workflow configuration

• forcedActionPrefix -> for localization

• applicationNo -> Idgen generated application number

• tenantId

• applicationDetails -> same data returned from hook used on view screen

• Url -> update API url to hit

• setStateChanged -> when update is successful this is called. Hence search apis will be called again and workflow history and workflow actions will be updated without screen refresh

• moduleCode

• editApplicationNumber -> Used in case of edit/modify action

This component internally calls the update apis and shows a relevant toast on success/failure or a response screen in case of edit action.

Overview

This page provides the approach details for -

• rendering the Inbox screen or Search screen based on the config

• calling the API dynamically based on API details passed via config

Common Components Used

InboxSearchComposer

This is a container component for inbox and search screens. It consists of 4 children components which can be rendered conditionally.

InboxSearchLinks

This component is used to render titles and links in the inbox.

SearchComponent

This component is used to render search or filter forms with ‘clear’ and ‘search’ buttons.

Results table

This component is used to render a table with searched results.

RenderFormFields

This component is used to render form fields passed in the 'fields' parameter in the config

Hooks Used

To fetch inbox details, ‘useCustomAPIHook’ is used which takes all the API details like URL, query params, body, config etc. from config (defined in MDMS).

Sample MDMS Data For Inbox

Sample MDMS Data For Search

Configure Screens - Steps

1. Create config based on the sections that need to be displayed on the screen. The basic structure for Inbox and Search screens is given below.

1. Based on the flag given for each section its visibility is controlled. If the ‘show’ flag is true, then the section is visible, else it is hidden.

2. Add API details in the top section, this API will be called via useCustomAPIHook and return the data. This consists of the below details.
3. Add search form config which can be used in both inbox/search screen. It consists of UIconfig containing label info, styling info, default form values, and fields which need to be rendered in the form. Refer below
4. Add Links config consists of link info, logo to be shown and title. Refer below
5. Add Filter form config which is similar to the search form. Refer below
6. Add Table (Search result) config consists of labels, column data and related jsonpaths to access the data passed. Refer below
7. To add any customisations on query params, request body, table columns or to add any custom validations in forms, related code can be added in the UICustomisations file as below
8. Once the above config is defined, created an index file/ Component in the pages folder. Fetch the config from MDMS and pass it to the inboxSearchComposer component as below

Limitations

• This approach is followed only in Inbox and Search screens currently.

• Only one API can be called dynamically based on given configurations.

Usage

To use the latest Inbox search composer it has to be imported from the React components or Utilities

React components

package

Utilities:

package

Overview

This utility is designed to transform the MDMS configuration into FormComposer and InboxFormComposer configurations. Typically, every UI configuration relies on certain parameters. These parameters might include dropdown dependencies or custom classes determined at runtime based on specific logic. However, since the configuration is in JSON format stored within MDMS, direct usage of variables is not feasible. To address this requirement, we've developed a utility capable of converting this JSON into a parameter-based JSON structure.

Steps

This utility serves as an engine that accepts MDMS configurations along with dependent parameters. It then processes this data to generate a parameter-enabled configuration. This resultant configuration can be utilized by FormComposer and InboxFormComposer to render the UI elements accordingly.

Below is the method used to configure the MDMS -

1. Pass the JSON path of the dependent key that requires runtime updates. In the example above, the target is on “populators.options”.

2. Update the options at runtime based on certain logic.

1. Once the configuration is complete, this will be added to MDMS. So, the next thing is to pass this config and its dependencies to the Pre-Process utility. The Namespace to access this utility :

The dependency Object contains multiple actions which the pre-process function runs for us.

1. Translate - This targets the JSON path and does translation for the passed data.

2. updateDependent - This targets the JSON path and update the dependencies.

3. convertStringToRegex - This targets the JSON path and converts the String RegEx to RegExp based Regex.

Refer to the sample example below -

In the example above, we are using the action “updatedependent” from pre-process utility.

• “Key” targets the input key name. This will help preprocess to target the right input field.

• “Value” - Each input within the configuration is associated with a JSON path, with each path targeting a dependent object. As previously demonstrated, we passed the JSON in a specific order within an array. Similarly, we must pass the corresponding dependent values in the same order to ensure alignment with the correct targets.

A similar utility is also developed for InboxSearchComposer. Refer to this same document for both utilities.

Overview

This page provides details about the Digit UI configuration required to enable it in any environment

DevOps Configuration

Build Configuration

Step 1: Add entry in build-config.yaml file in the master branch of the forked repository. This will set up the job pipeline in Jenkins. Make sure to also add the same config to the feature branch you are working on. Refer

Add the below content for digit-ui.

Step 2: Go to the Jenkins build the page, select "Job Builder" and click on "Build now". This will pull the config from build_config.yaml and identify all modules that need to be built.

Step 3: Once the build is done, go to your Jenkins build page. The service will appear under the repository path in which it has been added, i.e. if the service is added under frontend, it will show up in the frontend section as below,

Helmchart Configuration

Step 2: Deploy-as-code/helm/charts/frontend/digit-ui

Environment Configuration

Step 1: Locate the following "deploy-as-code/helm/environments/works-dev.yaml" in the DevOps repository of your organization.

Step 2: Add the below code block within the environment YAML file used to deploy the Works platform -

Global Configuration

This section contains the configuration that is applicable globally to all UI modules. These need to be configured prior to the configuration of service-specific UI.

Steps to create a globalconfig.js file:

1. Create a config file (globalconfigs.js) with the below-mentioned config (refer code below).

2. Configure all the images/logo required in the S3 and add links as footerBWLogoURL , footerLogoURL.

3. Mention the state tenant ID as stateTenantId.

4. If any User roles have to be made invalid add as invalidEmployeeRoles.

5. Then push this global config file into your S3 bucket as globalconfigs.js

AWS S3 Bucket Configuration

The S3 bucket has to be configured by the DevOps team, to store all the assets being used in the Application like Logos, globalConfigs, etc.

Steps to create a new AWS Bucket -

1. Create a new AWS S3 Bucket

2. Update the Bucket Policy with the following content, to make the bucket public

1. Update the Cross-Origin Resource Sharing (CORS) configuration with the following content

1. To proxy the same bucket in any environment and make the necessary changes in the environment.yaml file located in the DevOps repository's configmaps under egov-config, follow the steps below:

   • Add the s3-assets-bucket: "pg-egov-assets"

1. After adding the proxy in the enironment file, restart the s3-proxy build in the environment with config enabled.

Overview

This page provides the architecture and key features of the DIGIT UI. Click on the broader headings below to find the details.

Frontend Components

Broadly, the DIGIT UI frontend components are categorized as below:

Nomenclature

1. The first line contains the Architecture Component name or info

2. The second line has npm-package and in the bracket there is a template based on which the component will be created.

Features

• Easy-to-use CLI

• Handles all modern JS features

• Bundles commonjs and es module formats

• Supports complicated peer-dependencies

• Supports CSS modules

Templates

The templates have the following folder structure: The components related to the template are inside the src folder of the template and an example is created to use and showcase the app created by the template.

Architecture

We have two main React Apps:

1. micro-ui-internals

   • Meant for the eGov development team to build components and default modules.

   • Contains the following modules:

     • CSS Library

     • UI Components (presently react-components)

     • Utils Library: Contains Services, Localization handling and React Hooks.

     • UI Modules

       • Core - containing login, routing and global state.

       • PGR

       • FSM

       • PT

       • Payment

       • etc ...

2. micro-ui

   • Meant for the state team to manage, make changes, and deploy

   • Import digit-ui-internals modules

   • Customizations

     • View

     • Services

   • Build and deploy scripts

     • Dockerfile & nginx.conf

     • build-config.yaml

CSS Library

The CSS Library contains all the classes both in the module and compiled form.

This can be imported using import "@egovernments/digit-ui.css/Button"

or full CSS import using import "@egovernments/digit-ui.css"

Component Libraries

Component Library contains a set of all the required components defined in them.

Libraries & Utils

These contain the following:

• Localization workflows

• API handling - API caching and handling strategies will be here, imported, and shared by all modules. Published as a function, can be used by anyone.

• Localisation

Modules

The module will function as a closed system for the states, limiting their access to node_modules or CDNs only. Any components specific to a state can be provided during the module's initialization within the employee or citizen application's state.

Below is an illustration of how the modules structure looks like:

Modules contain the following inbuilt

• Theme - this may change if we later decide to use any css-in-js library, like styled-components.

• Components

• Routes

• State management

• Business logic

• API integrations

Employee / Citizen App

The app imports the developed module.

In the next phase, the Employee and Citizen app can be rewritten as a single app with the role and permissions-based rendering.

Related Links

This section of the guide enables developers to create their own front-end citizen module from scratch which they can deploy on top of DIGIT UI. The new module will be visible as a "card" in the DIGIT citizen portal.

Steps to build the citizen portal for a module

This guide provides examples and illustrations on how to set up and integrate the most commonly used DIGIT UI libraries.

Refer to the sample screens .

Overview

This document provides the customisation details for DIGIT UI. Customisation can be classified broadly into two types -

1. Overriding the Component/Hooks/CSS

2. Overwriting the required changes directly into the Micro-ui-internals

Overriding

Overriding involves making all customization changes exclusively within the micro-ui/web directory.

For CSS

Within the custom CSS module, define customized CSS using the same class name or ID. Afterward, publish the changes. Ensure to reference this custom CSS file in the index.html to reflect the modifications on the website.

<link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css@1.5.22/dist/index.css" />
<link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-custom-css@0.2.6/dist/index.css" />// Some code

For Components/Hooks

For overriding any components, re-register the same component in the same name in the customization folder. The latest changes are reflected.

Overwriting Changes

Overwriting involves directly modifying the micro-ui-internals directory. This is slightly more challenging method to incorporate changes. Make sure the docker file is updated as per the code below and includes the install-deps.sh script.

```
dockerfile

RUN cd web/ \
    && node envs.js \
    &&  ./install-deps.sh \
    && yarn install \
    && yarn build 
```

The workspace in the web/package.json should be updated as below:

```json
 "workspaces": [
    "micro-ui-internals/packages/libraries",
    "micro-ui-internals/packages/react-components",
```

Overview

Once the project structure is ready, it is time to install and configure the module dependencies in the Master Data Management Service (MDMS). Follow the steps below to finalise these.

Steps

Add MDMS (Master Data Management Service) Configuration

1. Enable the module in citymodule.jsonbefore creating a new module. A sample module is available for reference here: citymodule.json.

For the purpose of illustration here, add the following module (birth registration) as given below:

  "citymodule": [{
      "module": "BR",
      "code": "BR",
      "active": true,
      "order": 1,
      "tenants": [
        {
          "code": "pb.jalandhar"
        },
        {
          "code": "pb.nawanshahr"
        },
        {
          "code": "pb.amritsar"
        }
      ]
    }],

1. Register the birth registration UI module in three places so that it will be available to the developer at runtime as well as at the time of deployment. Below are the three places where the module needs to be registered:

micro-ui/web/micro-ui-internals/package.json micro-ui/web/micro-ui-internals/example/package.json micro-ui/web/micro-ui-internalsWeb/package.json

1. Micro-ui-internals:- Open the micro-ui-internals package.json file and add this module as a dependency.

"dev:br": "cd packages/modules/br && yarn start",
"build:br": "cd packages/modules/br && yarn build", 

1. In the example/package.json, add the following line:

"@egovernments/digit-ui-module-br":"^1.0.0",

1. In the web/package.json, add the following line:

"@egovernments/digit-ui-module-br":"1.0.0",

Overview

DIGIT comes with common re-usable libraries that can be imported for use in a new module. This page provides the steps on importing the required components.

Steps

CSS , libraries , common , react components can be imported by adding into package.json.

"@egovernments/digit-ui-css": "1.5.3",
"@egovernments/digit-ui-libraries":"1.5.3",
"@egovernments/digit-ui-module-common":"1.5.3",
"@egovernments/digit-ui-module-br":"1.5.4",
"@egovernments/digit-ui-module-dss":"1.5.3",
"@egovernments/digit-ui-react-components":"1.5.3",

Common components live in micro-ui/web/micro-ui-internals/packages/react-components micro-ui/web/micro-ui-internals/packages/css

DIGIT components that we are reusing -

1. FormComposer

2. ActionBar

3. Banner

4. Card

5. CardText

6. Loader

7. SubmitBar

8. AppContainer

9. BackButton

10. PrivateRoute

11. Icons

12. CitizenHomecard

Overview

This is the first step towards the setup of the citizen module. Follow the steps given below to create the project structure.

Steps

• Go to micro-ui--internals → packages → modules.

• Inside the module, create a folder and provide a name for the service. For instance, the service name here is birth registration.

• Create folder br (you can give any name).

• Add the package.json to the created folder. Mention the module name and other dependencies here.

{
    "name": "@egovernments/digit-ui-module-br",
    "version": "1.5.4",
    "license": "MIT",
    "description": "Birth Registration Module",
    "main": "dist/index.js",
    "module": "dist/index.modern.js",
    "source": "src/Module.js",
    "files": [
      "dist"
    ],
    "scripts": {
      "start": "microbundle-crl watch --no-compress --format modern,cjs",
      "build": "microbundle-crl --no-compress --format modern,cjs",
      "prepublish": "yarn build"
    },
    "peerDependencies": {
      "react": "17.0.2",
      "react-router-dom": "5.3.0"
    },
    "dependencies": {
      "@egovernments/digit-ui-libraries": "1.5.4",
      "@egovernments/digit-ui-react-components": "1.5.4",
      "lodash.merge": "^4.6.2",
      "react": "17.0.2",
      "react-dom": "17.0.2",
      "react-hook-form": "6.15.8",
      "react-i18next": "11.16.2",
      "react-query": "3.6.1",
      "react-redux": "7.2.8",
      "react-router-dom": "5.3.0",
      "react-table": "7.7.0",
      "redux": "4.1.2",
      "redux-thunk": "2.4.1"
    }
  }
  

• After creating the package.json for birth registration, the project structure (as seen in the image below) is created.

Overview

This document provides the steps on how to integrate another UI into the DIGIT UI using iframe.

Steps

1. Enable the Utilities module.

   • Add these MDMS configurations to enable the Utilities module.

   • Add the mentioned changes in your web/src/App.js and web/package.json to enable the module in the Build.

2. Once the Utilities module is enabled, add the following changes to the master (file path given below).

Reference Master details: data/pg/commonmasters/uiCommonConstants.json

  "uiCommonConstants": [
      {
         "shg": {
            "iframe-routes": {
               "home": {
                  "routePath": "/works-shg-app/",
                  "isOrigin": true
               }
            }
         }
      }
   ]

Here -

• shg is the path name to access inside digit-ui;

• home is the route to access it;

• whatever is mentioned inside routePath should be the Application/Pod name that is expected to be shown inside the digit-ui;

1. Once the MDMS changes are applied, access the new application using the following route - <SERVER_URL>/digit-ui/employee/utilities/iframe/<PATH_NAME>/<ROUTE_NAME>

Examples: New Web Application (UI - any framework)

DIGIT UI

Overview

This page explores the steps to publish CSS if there are any CSS Customization/changes. While customising, if any changes are made In the CSS folder it has to be compiled and published to npm.

Steps

Currently, the CSS is published in npm as @egovernments/digit-ui-css

Refer to the NPM link here - digit-ui-css.

So any changes to the CSS folder locally must be published in different organisations and in the same or different package name. For example - @xyz/digit-ui-css and version 1.0.0 then the following changes have to be made in the code to reflect in the digit-ui

​index.html - file location

frontend/micro-ui/web/public/index.html

The style sheet link must be updated as follows,

<link rel="stylesheet" href="https://unpkg.com/@xyz/digit-ui-css@1.0.0/dist/index.css"/>

Use either of the following commands to publish the CSS

• In the frontend/micro-ui/web/micro-ui-internals folder run yarn run publish:css or

• In the frontend/micro-ui/web/micro-ui-internals/packages/css folder run yarn run publish --access public

There are two ways to customize the CSS -

1. Override the required CSS only without changing in the CSS folder and making changes only in the custom CSS folder. Both CSS will be present in the index.html the order of the package mentioned in the HTML determines which CSS needs to be taken ie the box mentioned in the last will have more precedence. example of overriding CSS as follow - index.html

2. Overwrite the complete existing CSS.

Reference doc for publishing any package to npm -

Now that we are done with setting up the citizen module, the next step is to build the employee portal on top of the DIGIT UI for the Birth Registration module. The employee portal is designed to support multiple workflows like verifying the information and approving or rejecting the registered details of citizens.

How to build the employee portal for a module?

This guide provides examples and illustrations on how to set up and integrate the most commonly used DIGIT UI libraries.

Refer to the sample screens .

All content on this website by is licensed under a .

Follow the instructions to set up the job pipeline. Ignore the steps not applicable to the frontend.

All content on this website by is licensed under a .

Overview

This page provides details about how the Banner image and Citizen Services Card are rendered.

Steps

UI Implementation

The link to banner images and the labels and links of citizen services on the citizen services card are defined in the below MDMS file.

egov-mdms-data/data/pb/common-masters/uiHomePage.json at DEV · egovernments/egov-mdms-data

Banner Image

For mobile and desktop we have different banner images link. We can change the images link on the below object

"appBannerDesktop":{
"code": "APP_BANNER_DESKTOP",
"name": "App Banner Desktop View",
"bannerUrl": "https://s3.ap-south-1.amazonaws.com/egov-qa-assets/app-banner-web.jpg", "enabled": true},
"appBannerMobile":{
"code": "APP_BANNER_MOBILE",
"name": "App Banner Mobile View",
"bannerUrl": "https://s3.ap-south-1.amazonaws.com/egov-qa-assets/app-banner-mobile.jpg", "enabled": true}

Citizen Services Card/Information/Updates Props

Here we have two objects citizenServicesCard and informationAndUpdatesCard. Both of them have sideOption object which is a link to View All page.

props object contains the objects that we want to show on these two cards.

Change the label of the cards and add the navigation URL for each prop. Click on the card redirects users to the respective screen.

"citizenServicesCard":{
"code": "HOME_CITIZEN_SERVICES_CARD",
"name": "Home Citizen services Card",
"enabled": true,
"headerLabel": "DASHBOARD_CITIZEN_SERVICES_LABEL",
"sideOption": {
"name": "DASHBOARD_VIEW_ALL_LABEL",
"enabled": true,
"navigationUrl": "/digit-ui/citizen/all-services" },
"props": [
{
"code": "CITIZEN_SERVICE_PGR",
"name": "Complaints",
"label": "ES_PGR_HEADER_COMPLAINT",
"enabled": true,
"navigationUrl": "/digit-ui/citizen/pgr-home"},]},

WhatsApp Banner Image / Link To WhatsApp Bot

Similar to Banner image, for WhatsApp Banner Image, we have two objects for mobile and desktop view. On click of the image it will redirect to WhatsApp bot. The redirection URL is defined in the navigation URL param.

"whatsAppBannerDesktop":{
"code": "WHATSAPP_BANNER_DESKTOP",
"name": "WhatsApp Banner Desktop View",
"bannerUrl": "https://s3.ap-south-1.amazonaws.com/egov-qa-assets/whatsapp-web.jpg", "enabled": true,
"navigationUrl": "https://api.whatsapp.com/send?phone=918744060444&text=mSeva"},
"whatsAppBannerMobile":{
"code": "WHATSAPP_BANNER_MOBILE",
"name": "WhatsApp Banner Mobile View",
"bannerUrl": "https://s3.ap-south-1.amazonaws.com/egov-qa-assets/whatsapp-mobile.jpg", "enabled": true,
"navigationUrl": "https://api.whatsapp.com/send?phone=918744060444&text=mSeva"}

Multiple options can be selected.

Citizen Home Screen Configuration

Details about how the module cards are rendered in the Citizen Home screen and how to add a new Card.

UI Implementation

All the modules that are enabled are defined in this file

DIGIT-Dev/frontend/micro-ui/web/micro-ui-internals/example/src/index.js

const enabledModules = [   "PGR",   "FSM",   "Payment",   "PT",   "QuickPayLinks",   "DSS",   "MCollect",   "HRMS",   "TL",   "Receipts",   "OBPS",   "Engagement",   "NOC",   "WS",   "CommonPT",   "NDSS",   "Bills", ];

This array contains a list of modules that are enabled in DIGIT-UI. This array is passed down to DigitUIWrapper Component defined here: frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/Module.js. Here this array is passed down to this hook:

const { isLoading, data: initData } = Digit.Hooks.useInitStore(stateCode, enabledModules);

Now initData.modules will be containing an array of modules containing the following details about each module. Example object is shown here as PT module:

{ "module": "PT", "code": "PT", "bannerImage": "https://egov-qa-assets.s3.amazonaws.com/PT.png", "active": true, "order": 1, "tenants": [ { "code": "pb.jalandhar" }, { "code": "pb.nawanshahr" }, { "code": "pb.amritsar" } ] }

This array is further passed down to the CitizenHome component present in the file

frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/Home.js

This component will render a CitizenHomeCard component for every module that is present in the passed-down array of modules according to some conditions that are explained below.

How cards are rendered along with links and icons:

As you can see in the home screen of Citizen, every module card has some links for it. Details of those links is stored in MDMS so that it becomes configurable. In the UI those details are fetched and accordingly module cards are rendered with the information fetched from the MDMS.

This module card data is stored in this file data/pb/ACCESSCONTROL-ACTIONS-TEST/actions-test.json. The format of the link data is described in such a way that every link object will have these key properties among others:

1. url → every link in the citizen side has this property set to “digit-ui-card”. It is used to filter all the links that belong to Citizen side

2. parentModule → describes to which module this link belongs

3. navigationURL → describes the destination url

In the UI this above mentioned data is fetched using this hook which calls this API egov-mdms-service/v1/_search.

const { isLoading: islinkDataLoading, data: linkData, isFetched: isLinkDataFetched } = Digit.Hooks.useCustomMDMS()

This hook call is made in this file frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/citizen/index.js

After some processing in the UI this linkData will be an array in which every key will be module name and its value would be an object containing the links array and iconName and module Header, it will look like this:

Using this data every card along with it’s icon, header and links will be rendered in Citizen Home.

This rendering is done in this component frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/Home.js using CitizenHomeCard component.

Icon Configuration / Naming Convention

Every module icon is stored as an svg component in this file svgindex.js. Name of every svg component follows a common format which is the name of the module followed by Icon string. For instance, PTIcon is the icon name for PT module. This icon name details are also stored in the MDMS file, which is used to display appropriate icons on the module cards.

Add New Card

Now that we are aware of how the module cards are rendered with their respective data , let’s discuss how to add a new module Card.

To add a new module card , we need to add the name of the module in the list of enabled modules. The details of this module will be fetched using this same hook as explained above:

const { isLoading, data: initData } = Digit.Hooks.useInitStore(stateCode, enabledModules);

By doing this a new module card will be rendered but it’s header, links, and icon will not be rendered because we need to add this data in the MDMS. We need to add this data in this file as explained above actions-test.json and accordingly add matching ids in this file roleactions.json with rolecode property set to ‘CITIZEN’

Sample actions-test and roleactions object

Sample actions-test object

{ "id": 2307, "name": "BPA_CITIZEN_HOME_VIEW_APP_BY_CITIZEN_LABEL", "url": "digit-ui-card", "displayName": "View applications by Citizen", "orderNumber": 1, "parentModule": "OBPS", "enabled": true, "serviceCode": "", "code": "", "path": "", "navigationURL": "/digit-ui/citizen/obps/my-applications", "leftIcon": "OBPSIcon", "rightIcon": "", "queryParams": "" }

Sample roleactions Object

{ "rolecode": "CITIZEN", "actionid": 2307, "actioncode": "", "tenantId": "pb" }

Multiple options can be selected.

Required setup things? i) Install Vs Code -

• vs code for windows

• vs code for Linux

VS Code Extension -

• GitLense

• ESLint

• Tailwind CSS

ii) Install Node JS -

• Node Js For Windows

• Node Js For Linux

iii) Install Postman - Postman is the tool we use to hit and test the APIs exposed by various services that we have. To install postman, follow the following links -

• Postman for Windows

• Postman for Linux

2) How to install Yarn?

Install Yarn -

Yarn For Linux

npm install --global yarn
yarn --version

3) How To add Globalconfig in Digit UI Environment?

Local Environment: To enable it into local development we need to add the javascript code block of globalconfig.js into the index.html

Path:- micro-ui/web/public/index.html

Link:- https://github.com/egovernments/DIGIT-Dev/blob/master/frontend/micro-ui/web/public/index.html

Script:-

<script src="https://path/to/public/s3/bucket/globalConfigs.js"></script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <link rel="icon" href="https://cdn.jsdelivr.net/npm/@egovernments/digit-ui-css/img/browser-icon.png"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap" rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css@1.4.111/dist/index.css"/>
    <!-- <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css/dist/index.css"/> -->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="theme-color" content="#00bcd1"/>
    <title>mSeva</title>
     <script src="https://path/to/public/s3/bucket/globalConfigs.js"></script> 
   
</script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Dev Environment: To enable it in the dev environment we need to add the javascript code block of telemetry into the Path:- DIGIT-DevOps/deploy-as-code/helm/environments/dev.yam

Link:- https://github.com/egovernments/DIGIT-Dev/blob/master/frontend/micro-ui/web/public/index.html

<script src=https://path/to/public/s3/bucket/globalConfigs.js type=text/javascript></script>

employee:
  dashboard-url: "https://dashboard-pbuat.egovernments.org/s/w---s/app/kibana#/dashboard/4e687470-f3c7-11e8-8d09-b151e2b1cf8e?embed=true&_g=(refreshInterval%3A(pause%3A!f%2Cvalue%3A300000)%2Ctime%3A(from%3Anow-15m%2Cmode%3Aquick%2Cto%3Anow))"
  custom-js-injection: |
    sub_filter.conf: "
      sub_filter  '<head>' '<head>
      <script src=https://path/to/public/s3/bucket/globalConfigs.js type=text/javascript></script>
      ';"

citizen:
  custom-js-injection: |
    sub_filter.conf: "
      sub_filter  '<head>' '<head>
      <script src=https://path/to/public/s3/bucket/globalConfigs.js type=text/javascript></script>
      ';"

digit-ui:
  custom-js-injection: |
    sub_filter.conf: "
      sub_filter  '<head>' '<head>
      <script src=https://path/to/public/s3/bucket/globalConfigs.js type=text/javascript></script>
      ';"

4) How to Register New Module in Digit UI? Creating config into mdms:-

If you are creating a new module then, first we need to enable that module as true in citymodule.json and update the Module in citymodule.json.

 {
      "module": "BR",
      "code": "BR",
      "active": true,
      "order": 1,
      "tenants": [
        {
          "code": "pb.jalandhar"
        },
        {
          "code": "pb.nawanshahr"
        },
        {
          "code": "pb.amritsar"
        }
      ]
    },

Suppose your module name is BR(Birth-Registration) then change the module and code as BR. and update the citymodule.json file. or

Install Dependency 5) In Digit UI Where do we need to add the .env file? Add the .env file in the example folder -

If the User is a citizen then we will configure the .env file as follow:-

SKIP_PREFLIGHT_CHECK=true
REACT_APP_USER_TYPE=CITIZEN
REACT_APP_EMPLOYEE_TOKEN=c835932f-2ad4-4d05-83d6-49e0b8c59f8a
REACT_APP_CITIZEN_TOKEN=7cd58aae-30b3-41ed-a1b3-3417107a993c
REACT_APP_PROXY_API=https://dev.companyname.org
REACT_APP_PROXY_ASSETS=https://dev.companyname.org
REACT_APP_GLOBAL=https://path/to/public/s3/bucket/globalConfigs.js
REACT_APP_CENTRAL_GLOBAL=https://path/to/public/s3/bucket/statebglobalConfigs.js
REACT_APP_QA_GLOBAL=https://path/to/public/s3/bucket/egov-dev-assets/globalConfigs.js
REACT_APP_UAT_GLOBAL=https://path/to/public/s3/bucket/egov-uat-assets/globalConfigs.js
REACT_APP_STATEB_GLOBAL=https://path/to/public/s3/bucket/statebglobalConfigs.js
staging=https://staging.companyname.org

If the User is an Employee then we configure the .env as follows:-

SKIP_PREFLIGHT_CHECK=true
REACT_APP_USER_TYPE=EMPLOYEE
REACT_APP_EMPLOYEE_TOKEN=c835932f-2ad4-4d05-83d6-49e0b8c59f8a
REACT_APP_CITIZEN_TOKEN=7cd58aae-30b3-41ed-a1b3-3417107a993c
REACT_APP_PROXY_API=https://dev.companyname.org
REACT_APP_PROXY_ASSETS=https://dev.companyname.org
REACT_APP_GLOBAL=https://path/to/public/s3/bucket/globalConfigs.js
REACT_APP_CENTRAL_GLOBAL=https://path/to/public/s3/bucket/statebglobalConfigs.js
REACT_APP_QA_GLOBAL=https://path/to/public/s3/bucket/egov-dev-assets/globalConfigs.js
REACT_APP_UAT_GLOBAL=https://path/to/public/s3/bucket/egov-uat-assets/globalConfigs.js
REACT_APP_STATEB_GLOBAL=https://path/to/public/s3/bucket/statebglobalConfigs.js
staging=https://staging.companyname.org

6) In Digit UI Where do we need to add the .env file when we run the react app from micro-ui/web?

Add the .env file in the micro-ui/web/src/

REACT_APP_STATE_LEVEL_TENANT_ID=pb
REACT_APP_PROXY_URL=https://dev.companyname.org

Overview

This page provides the steps to debug the android application using a chrome browser.

Steps

1. Connect your android device to the system.

2. Go to developer mode in the mobile device and enable USB debugging.

3. Open the Chrome browser and navigate to the URL chrome://inspect

1. The browser shows the list of devices connected to the system.

1. Select the mSeva application and click on inspect.

1. This opens a new window. Here we can see the mobile preview and the developer tool.

1. Start debugging the application as we have done in normal web applications.

Useful Links

Chrome for developers

Android web view and how to generate APK

Overview

This page provides the steps to resolve issues using the network tab on the browser.

While using the application or while performing some action if something fails we get generic error messages on the UI.

Such as - 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 enables us to see more information about the Error.

Steps

To fetch more information in context to the error message -

1. Inspect the Page - On the page with the error message, right-click the page and choose Inspect in the dropdown menu.

2. Select the Network Tab - The browser’s network tab is a way to look directly at what’s happening behind the scenes of a page. It shows us not only the type of data being requested and passed as we interact with the page, but it also let's know if there are any actions that are failing. After selecting Inspect, a new window will appear. In this new window, click the Network tab. Then, select the XHR filter option. This will hide everything except API requests.

3. Refresh the Page - Click the Refresh button in your browser. Since the Network tab will only show us the requests that occur after the tab has been opened, we’ll need to refresh the page so that we can view the error as it occurs. As the page reloads, you’ll see various API requests populate the panel.

4. Re-create the Error - In order to understand what’s causing our error, we’ll first need to go through the same steps we took to get the error so that we can watch the request happen in real-time. In this case, to recreate the error we’ll click Update again. By re-creating the error, we’ll see exactly which request is causing the issue.

1. Find the Red-Line Item in the Network Panel - This is the error that occurs when clicking Update. The status is 400, which is the error code for “bad request.” Everything else has the status 200, which is the code for “OK,” meaning nothing went wrong for those other requests.

2. Preview the Error Details - Click the red-line item to see the error details. Clicking that line item will open a new frame on the right-hand side, and in this frame, you’ll see a few tabs: Headers, Preview, Response, Cookies, and Timing. In this case, stick with Preview since this contains the basic information.

3. View the Error Message - While in some cases you won’t see a specific message here, in this case, you’ll see the following:

error: "Not Found"
message: "No message available"
path: "/egov-workflow-v2/egov-wf/process/_nearingslacount"
status: 404

Thanks to the network panel, you were able to take a look under the hood, diagnose the issue, and put a fix in place.

Overview

This section will walk you through the code that needs to be developed for the application.

Steps

Detailed user screen wireframes should be available at this point for development.

import { newConfig } from "../../../components/config/config";
const configs = newConfig?newConfig:newConfig;

import { FormComposer } from "@egovernments/digit-ui-react-components";
import React from "react";
import { useTranslation } from "react-i18next";

import { newConfig } from "../../../components/config/config";

const Create = () => {
 
  const { t } = useTranslation();
  const configs = newConfig?newConfig:newConfig;

  return (
    <FormComposer
    heading={t("Create Birth Registration")}
    label={t("ES_COMMON_APPLICATION_SUBMIT")}
    config={configs.map((config) => {
      return {
        ...config,
        body: config.body.filter((a) => !a.hideInEmployee),
      };
    })}
  
    fieldStyle={{ marginRight: 0 }}
  />
  );
};

export default Create;

export const newConfig =[
    {
        "head": "Birth-Details",
        "body": [
         
            {
                type: "component",
                component: "BrSelectName",
                key: "BrSelectName",
                withoutLabel: true,
              },
              {
                type: "component",
                component: "BRSelectGender",
                key: "BRSelectPhoneGender",
                withoutLabel: true,
              },
              {
                type: "component",
                component: "BRSelectPhoneNumber",
                key: "BRSelectPhoneNumber",
                withoutLabel: true,
              },
              {
                type: "component",
                component: "BRSelectEmailId",
                key: "BRSelectEmailId",
                withoutLabel: true,
              },
          
              {
                type: "component",
                component: "BrSelectAddress",
                key: "BrSelectAddress",
                withoutLabel: true,
              },
              {
                type: "component",
                component: "SelectCorrespondenceAddress",
                key: "SelectCorrespondenceAddress",
                withoutLabel: true,
              },
        ]
    },

];

import { AppContainer, BackButton,PrivateRoute } from "@egovernments/digit-ui-react-components";
import React from "react";
import {  Switch, useRouteMatch } from "react-router-dom";

import { useTranslation } from "react-i18next";



const App = () => {
  const { path, url, ...match } = useRouteMatch();
  const { t } = useTranslation();

  const Create = Digit?.ComponentRegistryService?.getComponent("BRCreate");
  const Response = Digit?.ComponentRegistryService?.getComponent("Response");
  
  return (
    <span className={"pt-citizen"}>
      <Switch>
        <AppContainer>
        <BackButton>Back</BackButton> 
        
          <PrivateRoute path={`${path}/birth`} component={Create} />
          <PrivateRoute path={`${path}/response`} component={Response} />
        </AppContainer>
      </Switch>
    </span>
  );
};

export default App;

import {  CitizenHomeCard, PTIcon } from "@egovernments/digit-ui-react-components";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useRouteMatch } from "react-router-dom";
import CitizenApp from "./pages/citizen";
import Create from "./pages/citizen/create/index";
import EmployeeApp from "./pages/employee";
import BrSelectName from "./pagecomponents/BrSelectName";
import BRSelectPhoneNumber from "./pagecomponents/BrSelectPhoneNumber";
import BRSelectGender from "./pagecomponents/BRSelectGender";
import BRSelectEmailId from "./pagecomponents/SelectEmailId";
import BRSelectPincode from "./pagecomponents/BRSelectPincode";
import BrSelectAddress from "./pagecomponents/BrSelectAddress";
import SelectCorrespondenceAddress from "./pagecomponents/SelectCorrespondenceAddress";
import SelectDocuments from "./pagecomponents/SelectDocuments";
import BRCard from "./components/config/BRCard";
import BRManageApplication from "./pages/employee/BRManageApplication";
import RegisterDetails from "./pages/employee/RegisterDetails";
import Response from "./pages/citizen/create/Response";

const componentsToRegister = {
 Response,
  RegisterDetails,
  BRManageApplication,
  BRCard,
  SelectDocuments,
  SelectCorrespondenceAddress,
  BrSelectAddress,
  BRSelectPincode,
  BRSelectEmailId,
  BRSelectGender,
  BRSelectPhoneNumber,
  BrSelectName,
  BRCreate : Create,
};

export const BRModule = ({ stateCode, userType, tenants }) => {
  const { path, url } = useRouteMatch();

  const moduleCode = "BR";
  const language = Digit.StoreData.getCurrentLanguage();
  const { isLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });

  if (userType === "citizen") {
    return <CitizenApp path={path} stateCode={stateCode} />;
  }

  return <EmployeeApp path={path} stateCode={stateCode} />;
};

export const BRLinks = ({ matchPath, userType }) => {
  const { t } = useTranslation();


  const links = [
  
    {
      link: `${matchPath}/birth`,
      i18nKey: t("Create BirthRegistration"),
    },
   
   
  ];

  return <CitizenHomeCard header={t("BirthRegistration")} links={links} Icon={() => <PTIcon className="fill-path-primary-main" />} />;
};

export const initBRComponents = () => {
  Object.entries(componentsToRegister).forEach(([key, value]) => {
    Digit.ComponentRegistryService.setComponent(key, value);
  });
};

import React from 'react';

import { initDSSComponents } from "@egovernments/digit-ui-module-dss";
import { PaymentModule, PaymentLinks, paymentConfigs } from "@egovernments/digit-ui-module-common";
import { DigitUI } from "@egovernments/digit-ui-module-core";
import { initLibraries } from "@egovernments/digit-ui-libraries";
import { initEngagementComponents } from "@egovernments/digit-ui-module-engagement";
import {initCustomisationComponents} from "./Customisations";
import { initCommonPTComponents } from "@egovernments/digit-ui-module-commonpt";
import { BRModule ,initBRComponents ,BRLinks} from "@egovernments/digit-ui-module-br";

initLibraries();
//"WS" removed the ws enabledModules ;
const enabledModules = ["Payment","QuickPayLinks", "DSS","Engagement", "BR"];
window.Digit.ComponentRegistryService.setupRegistry({
  ...paymentConfigs,
  PaymentModule,
  PaymentLinks,
  BRModule,
  BRLinks,

});

initBRComponents();
initDSSComponents();
initEngagementComponents();

initCustomisationComponents();

function App() {
  const stateCode = window.globalConfigs?.getConfig("STATE_LEVEL_TENANT_ID") || process.env.REACT_APP_STATE_LEVEL_TENANT_ID;
  if (!stateCode) {
    return <h1>stateCode is not defined</h1>
  }
  return (
    <DigitUI stateCode={stateCode} enabledModules={enabledModules}  />
  );
}

export default App;

import React from "react";
import ReactDOM from "react-dom";
import { initLibraries } from "@egovernments/digit-ui-libraries";
import { BRModule, initBRComponents ,BRLinks} from "@egovernments/digit-ui-module-br";
import { initDSSComponents } from "@egovernments/digit-ui-module-dss";
import { PaymentModule, PaymentLinks, paymentConfigs } from "@egovernments/digit-ui-module-common";
import { initEngagementComponents } from "@egovernments/digit-ui-module-engagement";
import { DigitUI } from "@egovernments/digit-ui-module-core";
import "@egovernments/digit-ui-css/example/index.css";



var Digit = window.Digit || {};

const enabledModules = [ "Payment","QuickPayLinks", "DSS","Engagement","BR"];

const initTokens = (stateCode) => {
  const userType = window.sessionStorage.getItem("userType") || process.env.REACT_APP_USER_TYPE || "CITIZEN";

  const token =window.localStorage.getItem("token")|| process.env[`REACT_APP_${userType}_TOKEN`];
 
  const citizenInfo = window.localStorage.getItem("Citizen.user-info")
 
  const citizenTenantId = window.localStorage.getItem("Citizen.tenant-id") || stateCode;

  const employeeInfo = window.localStorage.getItem("Employee.user-info");
  const employeeTenantId = window.localStorage.getItem("Employee.tenant-id");

  const userTypeInfo = userType === "CITIZEN" || userType === "QACT" ? "citizen" : "employee";
  window.Digit.SessionStorage.set("user_type", userTypeInfo);
  window.Digit.SessionStorage.set("userType", userTypeInfo);

  if (userType !== "CITIZEN") {
    window.Digit.SessionStorage.set("User", { access_token: token, info: userType !== "CITIZEN" ? JSON.parse(employeeInfo) : citizenInfo });
  } else {
    // if (!window.Digit.SessionStorage.get("User")?.extraRoleInfo) window.Digit.SessionStorage.set("User", { access_token: token, info: citizenInfo });
  }

  window.Digit.SessionStorage.set("Citizen.tenantId", citizenTenantId);
 
 if(employeeTenantId && employeeTenantId.length) window.Digit.SessionStorage.set("Employee.tenantId", employeeTenantId);
};

const initDigitUI = () => {
  window?.Digit.ComponentRegistryService.setupRegistry({

    PaymentModule,
    BRModule,
    PaymentLinks,
    BRLinks,
 
  });


  initDSSComponents();
  initEngagementComponents();
  initBRComponents();



  
  const stateCode = window?.globalConfigs?.getConfig("STATE_LEVEL_TENANT_ID") || "pb";
  initTokens(stateCode);

  const registry = window?.Digit.ComponentRegistryService.getRegistry();
  ReactDOM.render(<DigitUI stateCode={stateCode} enabledModules={enabledModules} />, document.getElementById("root"));
};

initLibraries().then(() => {
  initDigitUI();
});

{
        name: t("Birth-Registration"),
        Icon: <OBPSIcon />,
        onClick: () => history.push("/digit-ui/citizen/br-home"),
      },

import {
    Calender, CardBasedOptions, CaseIcon, ComplaintIcon, DocumentIcon, HomeIcon, Loader, OBPSIcon, PTIcon, StandaloneSearchBar, WhatsNewCard
} from "@egovernments/digit-ui-react-components";
import React from "react";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";

const Home = () => {
  const { t } = useTranslation();
  const history = useHistory();
  const tenantId = Digit.ULBService.getCitizenCurrentTenant(true);
  const { data: { stateInfo } = {}, isLoading } = Digit.Hooks.useStore.getInitData();

  const conditionsToDisableNotificationCountTrigger = () => {
    if (Digit.UserService?.getUser()?.info?.type === "EMPLOYEE") return false;
    if (!Digit.UserService?.getUser()?.access_token) return false;
    return true;
  };

  const { data: EventsData, isLoading: EventsDataLoading } = Digit.Hooks.useEvents({
    tenantId,
    variant: "whats-new",
    config: {
      enabled: conditionsToDisableNotificationCountTrigger(),
    },
  });

  if (!tenantId) {
    history.push(`/digit-ui/citizen/select-language`);
  }

  const allCitizenServicesProps = {
    header: t("DASHBOARD_CITIZEN_SERVICES_LABEL"),
    sideOption: {
      name: t("DASHBOARD_VIEW_ALL_LABEL"),
      onClick: () => history.push("/digit-ui/citizen/all-services"),
    },
    options: [
     
     
      {
        name: t("Birth-Registration"),
        Icon: <OBPSIcon />,
        onClick: () => history.push("/digit-ui/citizen/br-home"),
      },
     
    ],
    styles: { display: "flex", flexWrap: "wrap", justifyContent: "flex-start", width: "100%" },
  };
  const allInfoAndUpdatesProps = {
    header: t("CS_COMMON_DASHBOARD_INFO_UPDATES"),
    sideOption: {
      name: t("DASHBOARD_VIEW_ALL_LABEL"),
      onClick: () => {},
    },
    options: [
      {
        name: t("CS_HEADER_MYCITY"),
        Icon: <HomeIcon />,
      },
      {
        name: t("EVENTS_EVENTS_HEADER"),
        Icon: <Calender />,
        onClick: () => history.push("/digit-ui/citizen/engagement/events"),
      },
      {
        name: t("CS_COMMON_DOCUMENTS"),
        Icon: <DocumentIcon />,
        onClick: () => history.push("/digit-ui/citizen/engagement/docs"),
      },
      {
        name: t("CS_COMMON_SURVEYS"),
        Icon: <DocumentIcon />,
        onClick: () => history.push("/digit-ui/citizen/engagement/surveys/list"),
      },
     
    ],
    styles: { display: "flex", flexWrap: "wrap", justifyContent: "flex-start", width: "100%" },
  };

  return isLoading ? (
    <Loader />
  ) : (
    <div className="HomePageWrapper">
      <div className="BannerWithSearch">
        <img src={stateInfo?.bannerUrl} />
        <div className="Search">
          <StandaloneSearchBar placeholder={t("CS_COMMON_SEARCH_PLACEHOLDER")} />
        </div>
      </div>

      <div className="ServicesSection">
        <CardBasedOptions {...allCitizenServicesProps} />
        <CardBasedOptions {...allInfoAndUpdatesProps} />
      </div>

      {conditionsToDisableNotificationCountTrigger() ? (
        EventsDataLoading ? (
          <Loader />
        ) : (
          <div className="WhatsNewSection">
            <div className="headSection">
              <h2>{t("DASHBOARD_WHATS_NEW_LABEL")}</h2>
              <p onClick={() => history.push("/digit-ui/citizen/engagement/whats-new")}>{t("DASHBOARD_VIEW_ALL_LABEL")}</p>
            </div>
            <WhatsNewCard {...EventsData?.[0]} />
          </div>
        )
      ) : null}
    </div>
  );
};

export default Home;

import Urls from "../atoms/urls";
import { Request } from "../atoms/Utils/Request";

const BRService = {
  
  create: (data, tenantId) =>
    Request({
      data: data,
      url: Urls.br.create,
      useCache: false,
      method: "POST",
      auth: true,
      userService: true,
      params: { tenantId },
    }),
    get: (data, tenantId) =>
    Request({
      data: data,
      url: Urls.br.get,
      useCache: false,
      method: "GET",
      auth: true,
      userService: true,
      params: { tenantId },
    }),
};

export default BRService;

br: {
    create: "https://62f0e3e5e2bca93cd23f2ada.mockapi.io/user",
    get:"https://62f0e3e5e2bca93cd23f2ada.mockapi.io/user",
    
  },

import { useQuery, useMutation } from "react-query";

import BRService from "../../services/elements/BR";

export const useBRCreate = (tenantId, config = {}) => {
  return useMutation((data) => BRService.create(data, tenantId));
};

export default useBRCreate;