There are two new updates introduced in FSM v1.2.1 while creating a new application - Stepper Information and Vehicle Capacity Selection in the Service Request Screen.

Stepper Information

We are introducing stepper information in FSM while creating an application from the citizen side so that they have visibility on how many steps they need to go over to submit details regarding their tank.

Technical Implementations Details:

TLTimelineInFSM.js file is the common component and used for rendering the stepper information. The path of the file is:

frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/components/TLTimelineInFSM.js

The code snippets for defining the steps present in FSM application under case “APPLY”:

The code snippets to render the stepper information in each screen using the timeline component:

Service Request Screen

Citizens can now select vehicle capacity along with the number of trips required while creating an application. If nothing is selected, we will proceed by taking the minimum vehicle capacity available with the number of trips.

Technical Implementation Details:

Code path: frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pageComponents/SelectTripNo.js

The code snippet for rendering the Vehicle Capacity field in Service Request screen:

<CardText> {t("ES_VEHICLE CAPACITY")} </CardText>
 <RadioOrSelect
    options={vehicleMenu?.map((vehicle) => ({ ...vehicle, label: vehicle.capacity }))}
    selectedOption={vehicleCapacity}
    optionKey="capacity"
    onSelect={selectVehicle}
    optionCardStyles={{ zIndex: "60" }}
    t={t}
    isMandatory={config.isMandatory}isDropDown={true}
/>

The code snippet for fetching the vehicles available under all DSO:

const allVehicles = dsoData.reduce((acc, curr) => {
  return curr.vehicles && curr.vehicles.length ? acc.concat(curr.vehicles) : acc;
}, []);
const cpacityMenu = Array.from(new Set(allVehicles.map((a) => a.capacity)))
    .map((capacity) => allVehicles.find((a) => a.capacity === capacity));

The code snippet for setting the default vehicle capacity to minimum:

This section includes the following:

• FM Citizen UI

• FSM Employee UI

• FSM DSO UI

• FSM FSTPO UI

There are three main updates in FSM v1.2.1 for employee UI:

1. Application timeline

2. Photo viewed by employee/DSO

3. Payment mode while completing request

1. Application Timeline:

An employee can see the application status in application timeline with provider details.

Technical Implementation Details:

The path for the code:

frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/ApplicationDetails/index.js

The code snippet to render application timeline:

The code snippet for extracting the provider info for each status:

2. Photo viewed by employee/DSO

An employee/DSO can view the photo uploaded by the employee/DSO in complete request action.

Technical Implementation Details:

The path for the code:

frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/ApplicationDetails/index.js

The code snippets to render the field:

ViewImages.js are the common component used to fetch and render the Image file id. The path is shown below:

frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/components/ViewImages.js

3. Payment mode while completing request

An employee has to select the payment mode while completing the request.

Technical Implementation Details:

File path:

frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/ApplicationDetails/config/CompleteApplication.js

The code snippet to render the field.

MDMS file fetch for payment mode:

egov-mdms-data/ReceivedPaymentType.json at UAT · egovernments/egov-mdms-data

{
    "tenantId": "pg",
    "moduleName": "FSM",
    "ReceivedPaymentType": [
        {
            "name": "Payed in Cash",
            "code": "PAYED_IN_CASH",
            "active": true
        },
        {
            "name": "Payed in Counter",
            "code": "PAYED_IN_COUNTER",
            "active": true
        },
        {
            "name": "Netbanking",
            "code": "NETBANKING",
            "active": true
        }
    ]
}

In FSTP, we are trying to decouple the vehicle dispose from the FSM application. Whether vehicle is attached to any FSM application or not, we allow the vehicle to dispose in the FSTP plant.

FSTP Home UI:

After logging as a FSTP user, we have now the home button option:

Technical Implementation Details:

Code changes path are:

DIGIT-Dev/frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/components/FsmCard.js

FSTP Operations UI:

After moving into “home” option, an FSTP user can choose from the following options:

• FSTP can choose Add Vehicle Log option if he/she wants to check whether a vehicle is linked to any application and dispose.

• FSTP can choose Inbox if he/she wants to check all the applications that are is ready to dispose.

Technical Implementation Details:

The path for code:

frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/FstpOperations.js

The code snippet for populating the options:

The code snippet for rendering the icon:

ULBHomeCard.js is the common component used to populate options in the screen.

The paths:

frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/ULBHomeCard.js

FSTP Add Vehicle Log UI:

FSTP can add vehicle log using vehicle number (in proper format with spaces, e.g. AB 00 CD 1234). An improper format will throw an error.

Techincal Implementation Details:

The path for the code:

frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/FstpAddVehicle.js

The code snippet for populating the add vehicle log field and its validation:

The code snippet for rendering the screen:

FSTP Service Request Screen:

After entering the vehicle number in the add vehicle log screen, we are fetching the FSM application, which is linked to that specific vehicle number. The data is rendered as shown below:

Technical Implementation Details:

The path for the code:

frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/FstpServiceRequest.js

The code snippets for fetching the FSM application linked to vehicle number:

Fetching the vehicle Id using vehicle number

Fetching the vehicle log using vehicle Id

Extracting out the FSM application number from vehicle log:

Fetching the FSM application details using FSM application number

The code snippets to render the data:

Mobile view

Desktop view

Vehicle Log screen:

After selecting the application, FSTPO can dispose the vehicle log in the vehicle log screen.

Additional details and attachment fields are introduced in new updates in FSM v1.2.1 .

The screen for the existing vehicle log:

The screen for new vehicle log if no application is found for vehicle is shown below. FSTPO can dispose the new vehicle log by providing all the details below.

Technical Implementation Details:

The path for the code:

frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/FstpOperatorDetails.js

The code snippet for additional details and attachments field:

For new vehicle log:

The code snippets to render input field for new vehicle log:

Complete Request

Fetching data from the MDMS

Customising Fields In A Form

The config can be found at CompleteApplication.js

File Path: frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/ApplicationDetails/config/CompleteApplication.js

{
          label: "ES_NEW_APPLICATION_PROPERTY_TYPE",
          isMandatory: true,
          type: "component",
          route: "property-type",
          key: "propertyType",
          component: "SelectPropertyType",
          texts: {
            headerCaption: "",
            header: "CS_FILE_APPLICATION_PROPERTY_LABEL",
            cardText: "CS_FILE_APPLICATION_PROPERTY_TEXT",
            submitBarLabel: "CS_COMMON_NEXT",
          },
          nextStep: "property-subtype",
        },
        {
          label: "ES_NEW_APPLICATION_PROPERTY_SUB-TYPE",
          isMandatory: true,
          type: "component",
          route: "property-subtype",
          key: "subtype",
          component: "SelectPropertySubtype",
          texts: {
            headerCaption: "",
            header: "CS_FILE_APPLICATION_PROPERTY_SUBTYPE_LABEL",
            cardText: "CS_FILE_APPLICATION_PROPERTY_SUBTYPE_TEXT",
            submitBarLabel: "CS_COMMON_NEXT",
          },
          nextStep: "map",
        },
        {
          label: "ES_NEW_APPLICATION_PIT_TYPE",
          isMandatory: false,
          type: "component",
          route: "pit-type",
          key: "pitType",
          component: "SelectPitType",
          texts: {
            header: "CS_FILE_PROPERTY_PIT_TYPE",
            cardText: "CS_FILE_PROPERTY_PIT_TYPE_TEXT",
            submitBarLabel: "CS_COMMON_NEXT",
            skipText: "CORE_COMMON_SKIP_CONTINUE",
          },
          nextStep: "tank-size",
        },
        {
          route: "tank-size",
          component: "SelectTankSize",
          isMandatory: false,
          texts: {
            headerCaption: "",
            header: "CS_FILE_APPLICATION_PIT_SEPTIC_TANK_SIZE_TITLE",
            cardText: "CS_FILE_APPLICATION_PIT_SEPTIC_TANK_SIZE_TEXT",
            submitBarLabel: "CS_COMMON_NEXT",
          },
          type: "component",
          key: "pitDetail",
          nextStep: null,
          label: "ES_NEW_APPLICATION_PIT_DIMENSION",
        },

Upload Pit Photo Button

UploadPitPhoto.js molecule is available within the molecules folder in react-components.

File Path: frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/molecules/UploadPitPhoto.js

Saving Image fileId in FSM service

const uploadImage = useCallback(async () => {
        if (uploadedImagesIds === null || uploadedImagesIds.length < 3) {
            const response = await Digit.UploadServices.Filestorage("FSM", image, props.tenantId);
            setUploadedImagesIds(addUploadedImageIds(response));
        } else {
            console.log("disabled")
        }
    }, [addUploadedImageIds, image]);

Filter Component On DSO Inbox Screen

The link for the MDMS changes made is given below.

RoleStatusMappping.json

  {
            "userRole": "FSM_DSO",
            "statuses": [
                "DSO_INPROGRESS",
                "PENDING_DSO_APPROVAL",
                "COMPLETED",
            ],
            "zeroCheck": true,
            "fixed": false
        },

Schedule Action For Post Pay In DSO

Schedule Action is added for post-pay applications where DSOs can schedule the trip by entering the number of trips.

Code snippet for schedule window:

 case "SCHEDULE":
      case "ES_FSM_SCHEDULE":
        setFormValve(true);
        return setConfig(
          configScheduleDso({
            t,
            rejectMenu: Reason?.DeclineReason,
            setReason: setDeclineReason,
            reason: declineReason,
            applicationCreatedTime: applicationData?.auditDetails?.createdTime,
            vehicle,
            vehicleCapacity: applicationData?.vehicleCapacity,
            action,
            noOfTrips: applicationData?.noOfTrips
          })
        );

ScheduleDso.js is the file responsible for the schedule window pop up.

File path: frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/ApplicationDetails/config/ScheduleDso.js