Trade License - Apply Flow

Objective

To provide the facility for the user which allows to create trade license application for the current year by citizen or counter employee.

Apply for Trade License

User can apply for trade license application by clicking on the Apply for Trade License button, and while going through the workflow, can add all the information, according to the question asked, at the end of the flow a summary screen will be visible for the review of the answers and on clicking the submit button an Application Trade License will be created for current Financial Year.

Apply Flow

Trade License Registration screen will be displayed after login, which helps the user to understand the necessary documents needed to complete the new registration for Trade License. A Citizen Info card is also shown at the bottom of the page for any additional information, in here it’s about the maximum size of the file that can be uploaded.

Trade License Details/Assessment Flow:

In this flow user need to provide specific information about the trade its registering in order to get the license. Following are the steppers user needs to go through in this flow.

Trade Name - User need to give the name of the trade and in this page only an info card is shown at the bottom which tells about the current financial year the trade application will be created, this financial year value is retrieved from MDMS.

Structure Type - here user need to select yes or no based on whether the trade has mobility or not, if they select Yes, then it will move to vehicle type and if they select No then it will move to Building type page.

Vehicle Type / Building Type - The options for vehicle and building type are coming from MDMS structure. Building type has a information card about the options Pucca and kuccha.

Commencement Date - It defines the date at which the trade had started or will start in the future.

Trade Units - User can enter about the trade category whether its goods or services, according to the option selected, Trade Type will load from MDMS as a drop down and according to the trade type selected trade sub-type options will load in the trade sub type drop down. The unit of measure and UOM value cannot be entered by user, it will get pre-populated according to the options selected above that too from MDMS.

User need to enter at least one unit to move forward and if needed to enter more, add more unit option can be clicked to do so, and to remove any unit, delete option on the top right of each unit card can be clicked.

Accessories - First page will be if there are any accessory or not , as accessories are not compulsory for trade, if yes it will move to accessory details page if no it will skip it altogether and move to start of address flow.

Accessory details - The option for accessory are retrieved from MDMS, according to the option selected Unit of measure gets pre-populated, which is non editable by user, rest UOM value and accessory count user can edit or gets pre-populated from MDMS, for adding multiple accessory Add More Trade Accessory button can be clicked, it will be as similar as trade units.

Address Details Flow:

After entering about the details about the Trade user will need to enter about the address of the Trade, where it is located. The flow will be straight forward, without any conditional routing.

Users can pinpoint the location in Geo-location map, according to which pin code and city as well as locality will be automatically filled.

Owner Details Flow:

At the last user will need to enter the details, about the Trade owner, it can be Single or Multiple Owner. According to which the details will be filled.

In the case of a single/Multiple Owner following screen will be displayed, rest flow will remain the same.

User can add multiple owners by clicking on the add owner button, same functionality as Trade units and accessories. Add Owner button is not visible if user selects single owner in the previous page.

Rest of the flow will contain about the owner primary address and three documents mainly regarding address proof, owner identity and owner photo graph.

Check Page and Acknowledgement Screen:

Users can cross-verify the data entered throughout the flow in the Check page and also if needed to change/update any data, can do that by clicking on the change option just mentioned in front of the data, it will credit them to the said page which data needs to be changed and then the whole flow needs to be repeated again in order to submit the application.

For Applying of Trade License Create API is being called, following is the snippet of the Create API being used:

create: "/tl-services/v1/_create"

If the API response is successful, then the Acknowledgement Screen will be displayed, otherwise Failed Acknowledgement Screen will be displayed.

On clicking on the Download Acknowledgement Form, A PDF will be downloaded.

Technical Implementation Details:

All the screen has been developed using the new-UI structure followed previously in FSM, PGR and PT, except for multi-component.

The link for the Apply Trade License Main Index is given below, it can be used to understand the starting point of the flow:

https://github.com/egovernments/digit-ui-internals/blob/main/packages/modules/tl/src/pages/citizen/Create/index.js

TL (Trade License) Module has been segregated into a specified structure, All the screen configuration is inside PageComponent Folder, and the configuration for routing of the pages are mentioned under config folder which is common for both Citizen as well as Employee. Below is the snippet for folder structure and routing configuration.

export const newConfig = [
  {
    head: "",
    body: [
      {
        type: "component",
        component: "TLInfoLabel",
        key: "tradedetils1",
        withoutLabel: true,
        hideInCitizen: true,
      }
    ]
  },

Pages Folder is where the high level configuration for controlling the whole flow is mentioned, for citizens and employees. Citizen includes Create, EditTrade, Renewal, Applications and search Trade. Which inside carry the index (the main starting point of the whole flow).

After completing the flow the user can download the acknowledgement PDF form of the License created and the config for the PDF generation can be found in the link given below:

https://github.com/egovernments/digit-ui-internals/blob/main/packages/modules/tl/src/utils/getTLAcknowledgementData.js

Utils Folder basically contains all the methods which are being used throughout the TL module, and if any common method needs to be declared here, which in turn can be imported in other files. 

For creating an Application the Create API from Trade License is being called using the React hooks, which has been declare under hooks/elements/TL as TLService.

MDMS data:

Throughout the flow, few of the pages data are being imported from MDMS, Following are the list of pages which are using MDMS data, These pages .js files can be found under page components.

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

const { isLoading, data: Documentsob = {} } = Digit.Hooks.tl.useTradeLicenseMDMS(stateId, "TradeLicense", "TLDocuments");

Localization :

Localization keys are added under the ‘rainmaker-tl’ locale module. In future if any new labels are implemented in the Trade License (Citizen) that should also be pushed in the locale DB under rainmaker-tl locale module. Below is the example of few locale labels.

API Call Role Action mapping: