FSM v1.2.1 - Citizen UI

There are two new updates which is introduced in FSM v1.2.1 while Creating new application from citizen side, which is Stepper Information & Vehicle Capacity Selection in Service Request Screen.

Stepper Information :

We are introducing stepper information in FSM while creating application from citizen Side so that citizens have visibility on how many more they will have to go over to submit all the details regarding their tank.

a rail on the top of the page with steps

Technical Implementations Detail:

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

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

Below are the code snippets to render the stepper information in each screen using Timeline component:

Service Request Screen:

Citizen now can select vehicle capacity along with number of trips required while creating application. If not selected, we will proceed by taking minimum vehicle capacity available with number of trips.

Technical Implementation Details:

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

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}
/>

Code Snippet for fetching all the vehicle 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));

Code snippet for setting the default vehicle capacity to minimum:

PR:

https://github.com/egovernments/DIGIT-Dev/pull/3339