ca-mfe-page-scoring-ui/src/store/progressTracker/progressTracker.reducer.ts

This is a react shell for the SPGI Platform MFE implementation

import { createSlice } from '@reduxjs/toolkit';
import {
  getVisibleSteps,
  updateProgressTrackerState,
  updateActiveState,
  updateFormData,
  getActiveStep,
  getNextSelectedStep
} from '@components/StepTracker/stepperCommon';
import { trackerStatus, stepIds } from '@root/constants';

export const initialState = {
  initProgressSteps: [],
  steppers: [],
  activeStepId: stepIds.COMPANY_DATA_INPUTS, //'scoringSelection',
  activeStep: {},
  enableNextStep: true,
  formData: [],
  isTriggerValidation: false,
  isCollapsed: false,
  isNextLoading: false
};

export const progressTrackerSlice = createSlice({
  name: 'progressTracker',
  initialState,
  reducers: {
    fetchSteps: (state, action) => {
      const { payload } = action;
      const visibleSteps = getVisibleSteps(payload);
      const activeStep = getActiveStep(visibleSteps);

      state.initProgressSteps = payload;
      state.steppers = getVisibleSteps(payload);
      state.activeStep = activeStep;
    },
    stepSelection: (state, action) => {
      const { payload } = action;
      let updatedProgressSteps = [];

      if (Array.isArray(payload)) {
        payload.forEach(payloadObj => {
          const stepsStatus = updateProgressTrackerState(state, payloadObj);
          state.steppers = stepsStatus;
        });
        updatedProgressSteps = state.steppers;
      } else {
        updatedProgressSteps = updateProgressTrackerState(state, payload);
      }

      state.steppers = getVisibleSteps(updatedProgressSteps);
    },
    setActiveStep: (state, action) => {
      const { payload } = action;
      const updatedSteps = updateActiveState(state, payload);
      const activeStep = getActiveStep(updatedSteps);

      state.activeStepId = payload.stepId;
      state.steppers = updatedSteps;
      state.activeStep = activeStep;
    },
    setEnableNext: (state, action) => {
      state.enableNextStep = action.payload;
    },
    setFormInputData: (state, action) => {
      state.formData = updateFormData(state.formData, action.payload);
    },
    setValidationStatus: (state, action) => {
      const stepperData = [...state.steppers];
      const { stepId, validationStatus, parentStepId = null } = action.payload;
      let currIndex = -1;
      if (parentStepId) {
        currIndex = stepperData.findIndex(step => step.stepId === parentStepId);
        const currStep = stepperData[currIndex];
        if (currStep?.nestedSteps?.length > 0) {
          const nestedStp = currStep.nestedSteps.map(step => step.stepId === stepId ? { ...step, validationStatus } : step);
          stepperData[currIndex].nestedSteps = nestedStp;
        }
      } else {
        currIndex = stepperData.findIndex(step => step.stepId === stepId);
      }
      stepperData[currIndex].validationStatus = validationStatus;
      state.steppers = stepperData;
      state.activeStep = getActiveStep(stepperData);
    },
    triggerValidationStatus: (state, action) => {
      state.isTriggerValidation = action.payload;
    },
    isNextLoadingStatus: (state, action) => {
      state.isNextLoading = action.payload;
    },
    resetValidations: state => {
      const { initProgressSteps } = state;
      state.initProgressSteps = initProgressSteps;
      state.steppers = getVisibleSteps(initProgressSteps);
    },
    setSidebarCollapse: (state, action) => {
      state.isCollapsed = action.payload;
    },
    skipCurrentStep: (state, action) => {
      const nextSelectedStep = getNextSelectedStep({...state}, action.payload);
      const updatedSteps = updateActiveState(state, {
        stepId: nextSelectedStep.nextStep,
        parentStepId: nextSelectedStep.nextStepParent});
      const activeStep = getActiveStep(updatedSteps);

      state.activeStepId = nextSelectedStep.nextStep;
      state.steppers = updatedSteps;
      state.activeStep = activeStep;

      const updatedProgressSteps = updateProgressTrackerState(state, {
        showStep: false,
        isDisabled: false,
        stepId: action.payload.stepId,
        nestedStepId: action.payload.nestedStepId,
        status: trackerStatus.NOT_SELECTED
      });
      state.steppers = getVisibleSteps(updatedProgressSteps);
    }
  }
});

export const {
  stepSelection,
  fetchSteps,
  setActiveStep,
  setEnableNext,
  setFormInputData,
  setValidationStatus,
  triggerValidationStatus,
  isNextLoadingStatus,
  resetValidations,
  setSidebarCollapse,
  skipCurrentStep
} = progressTrackerSlice.actions;

export default progressTrackerSlice.reducer;