FSM Citizen UI

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:

using Timeline component to render the stepper Information in each screen provided with step number in currentStep.

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: