@integry/sdk 4.5.2 → 4.5.4

package/src/store/actionFunctions.ts

@@ -0,0 +1,1573 @@
+/* eslint-disable import/no-cycle */
+import { Store } from 'unistore';
+
+import {
+  BundleResponse,
+  // IntegrationResponse,
+  PreviewMetadata,
+  TemplateField,
+  TemplateStep,
+  ConditionalFields,
+  MarketplaceDetail,
+  MarketplaceAppAuthorizationType,
+} from '@/interfaces';
+import { StepStateStep, State } from '@/types/store';
+import { Authorization } from '@/types';
+import { initialState } from '@/store/initialState';
+import { decodeJSON } from '@/utils/jsonEncodeDecode';
+import { areParentValuesValid } from '@/utils/stepUtils';
+
+export const actionFunctions = (storeSnapshot: Store<State>) => ({
+  setStoreState(state: State, partialUpdate: Partial<State>): Partial<State> {
+    return {
+      ...state,
+      ...partialUpdate,
+    };
+  },
+  setBaseData(state: State, bundleResponse: BundleResponse): Partial<State> {
+    return {
+      ...state,
+      integrations: bundleResponse.integrations.map((el) => ({
+        ...el,
+        loading: false,
+      })),
+      templates: bundleResponse.templates,
+      fetchingIntegrations: false,
+      fetchingTemplates: false,
+    };
+  },
+
+  setSteps(state: State, templateSteps: TemplateStep[]): Partial<State> {
+    const parsedSteps: StepStateStep[] = [];
+    let itemIndex = -1;
+    const appAuthIsAdded: number[] = [];
+    templateSteps.forEach((element) => {
+      const { authorization_type } = element;
+      const { app } = authorization_type;
+      const hideAuthorizaiton = element.hide_authorization;
+
+      if (!hideAuthorizaiton && !appAuthIsAdded.includes(app.id)) {
+        appAuthIsAdded.push(app.id);
+        let stepTitle: string = element.activity.app.name;
+        let stepIcon: string = element.activity.app.icon_url;
+        if (element.activity.type === 'MAKE_HTTP_CALL') {
+          stepTitle = element.authorization_type.app.name;
+          stepIcon = element.authorization_type.app.icon_url;
+        }
+
+        itemIndex += 1;
+        // step has auth required so split into two.
+        parsedSteps.push({
+          stepId: element.id,
+          title: `${stepTitle} Account`,
+          iconUrl: stepIcon,
+          isCompleted: false,
+          isCurrentlyOpen: false,
+          type: 'AUTH',
+          requiredFields: [element.id], // auth if required will always be named like this
+          invalidFields: {
+            [element.id]: '',
+          },
+          isValid: false,
+          itemIndex,
+        });
+      } else {
+        // auth is implicit so we will select the first available auth
+      }
+
+      // if (element.is_visible) {
+      //   // check if we need to show the config step at all
+      //   if (element.template_fields.length > 0) {
+      //     // step has template fields with at least one visible
+      //     const hasVisibleTemplateFields =
+      //       element.template_fields.filter((el) => el.is_visible).length > 0;
+
+      //     // check which of these are required
+      //     const requiredFields = element.template_fields
+      //       .filter((el) => el.is_required && el.is_visible)
+      //       .map((field) => field.id);
+
+      //     // check if no default value is provided
+      //     const invalidFields = element.template_fields
+      //       .filter(
+      //         (el) => el.is_required && !el.default_value && el.is_visible,
+      //       )
+      //       .reduce((prev, field) => ({ ...prev, [field.id]: '' }), {});
+
+      //     const isValidDefault = Object.keys(invalidFields).length < 1;
+
+      //     if (hasVisibleTemplateFields) {
+      //       itemIndex += 1;
+      //       parsedSteps.push({
+      //         stepId: element.id,
+      //         title: element.title,
+      //         iconUrl: element.activity.app.icon_url,
+      //         isCompleted: false,
+      //         isCurrentlyOpen: false,
+      //         type: 'CONFIGURATION',
+      //         requiredFields,
+      //         invalidFields,
+      //         isValid: isValidDefault,
+      //         itemIndex,
+      //       });
+      //     }
+      //   }
+      // }
+    });
+    templateSteps.forEach((element) => {
+      if (element.is_visible) {
+        // check if we need to show the config step at all
+        if (element.template_fields.length > 0) {
+          // step has template fields with at least one visible
+          const hasVisibleTemplateFields =
+            element.template_fields.filter((el) => el.is_visible).length > 0;
+
+          // check which of these are required
+          const requiredFields = element.template_fields
+            .filter((el) => el.is_required && el.is_visible)
+            .map((field) => field.id);
+
+          // check if no default value is provided
+          const invalidFields = element.template_fields
+            .filter(
+              (el) => el.is_required && !el.default_value && el.is_visible,
+            )
+            .reduce((prev, field) => ({ ...prev, [field.id]: '' }), {});
+
+          const isValidDefault = Object.keys(invalidFields).length < 1;
+
+          if (hasVisibleTemplateFields) {
+            itemIndex += 1;
+            parsedSteps.push({
+              stepId: element.id,
+              title: element.title,
+              description: element.description || '',
+              iconUrl: element.activity.app.icon_url,
+              isCompleted: false,
+              isCurrentlyOpen: false,
+              type: 'CONFIGURATION',
+              requiredFields,
+              invalidFields,
+              isValid: isValidDefault,
+              itemIndex,
+            });
+          }
+        }
+      }
+    });
+
+    return {
+      ...state,
+      stepState: {
+        steps: parsedSteps,
+        fieldsListData: null,
+        currentStep: parsedSteps[0],
+        stepIndex: 0,
+        showValidation: false,
+        allStepsCompleted: false,
+      },
+    };
+  },
+
+  setIntegrationLoadingState(
+    state: State,
+    data: {
+      integrationId: number;
+      isLoading: boolean;
+      op: 'edit' | 'delete' | 'edit-name';
+      nextVal?: boolean;
+      updatedName?: string;
+    },
+  ): Partial<State> {
+    const { integrationId, isLoading, op, nextVal } = data;
+    const index = state.integrations.findIndex((el) => el.id === integrationId);
+    if (op === 'delete') {
+      return {
+        ...state,
+        integrations: state.integrations.filter(
+          (el) => el.id !== integrationId,
+        ),
+      };
+    }
+    if (op === 'edit' && index > -1) {
+      const int = {
+        ...state.integrations[index],
+        loading: isLoading,
+      };
+      if (nextVal !== null && nextVal !== undefined) {
+        int.status = nextVal ? 'ACTIVE' : 'INACTIVE';
+      }
+      return {
+        ...state,
+        integrations: [
+          ...state.integrations.slice(0, index),
+          int,
+          ...state.integrations.slice(index + 1),
+        ],
+      };
+    }
+    if (op === 'edit-name' && index > -1) {
+      const int = {
+        ...state.integrations[index],
+        name: `${data.updatedName}`,
+        loading: isLoading,
+      };
+      return {
+        ...state,
+        integrations: [
+          ...state.integrations.slice(0, index),
+          int,
+          ...state.integrations.slice(index + 1),
+        ],
+      };
+    }
+    return {
+      ...state,
+    };
+  },
+
+  showStepValidationState(state: State): Partial<State> {
+    const { stepState } = state;
+    return {
+      stepState: {
+        ...stepState,
+        showValidation: true,
+      },
+    };
+  },
+
+  hideStepValidationState(state: State): Partial<State> {
+    const { stepState } = state;
+    return {
+      stepState: {
+        ...stepState,
+        showValidation: false,
+      },
+    };
+  },
+
+  gotoNextStep(state: State): Partial<State> {
+    const { stepState } = state;
+    if (stepState) {
+      const newIndex = Number(stepState.stepIndex) + 1;
+      const step = stepState.steps[Number(stepState.stepIndex) + 1];
+      const updatedStep = {
+        ...stepState.steps[state.stepState.stepIndex],
+        isCompleted: true,
+      };
+      if (!step) {
+        // last step reached
+        return {
+          stepState: {
+            ...stepState,
+            steps: [
+              ...stepState.steps.slice(0, stepState.stepIndex),
+              updatedStep,
+              ...stepState.steps.slice(stepState.stepIndex + 1),
+            ],
+            currentStep: {
+              type: 'CONFIRMATION',
+            },
+            stepIndex: newIndex,
+            allStepsCompleted: true,
+            showValidation: false,
+          },
+        };
+      }
+
+      return {
+        stepState: {
+          ...stepState,
+          steps: [
+            ...stepState.steps.slice(0, stepState.stepIndex),
+            updatedStep,
+            ...stepState.steps.slice(stepState.stepIndex + 1),
+          ],
+          currentStep: {
+            ...step,
+          },
+          stepIndex: newIndex,
+          showValidation: false,
+        },
+      };
+    }
+    return state;
+  },
+
+  gotoPreviousStep(state: State): Partial<State> {
+    if (state.stepState) {
+      const newIndex = Number(state.stepState.stepIndex) - 1;
+      const step = state.stepState.steps[Number(state.stepState.stepIndex) - 1];
+      let showStepValidation = !step.isValid;
+      if (state.genericData.isReadOnly) {
+        showStepValidation = false;
+      }
+      return {
+        stepState: {
+          ...state.stepState,
+          currentStep: step,
+          stepIndex: newIndex,
+          showValidation: showStepValidation,
+        },
+      };
+    }
+    return state;
+  },
+
+  gotoStepInPreview: (
+    state: State,
+    previewMetadata: PreviewMetadata,
+  ): Partial<State> => {
+    const { stepState } = state;
+    const { stepId, type } = previewMetadata;
+
+    if (stepId && type !== 'CONFIRMATION') {
+      // go to a particular step
+      const stepIndexToNavigateTo = stepState.steps.findIndex(
+        (el) => el.stepId === stepId && el.type === type,
+      );
+      if (stepIndexToNavigateTo > -1)
+        return {
+          stepState: {
+            ...state.stepState,
+            currentStep: stepState.steps[stepIndexToNavigateTo],
+            stepIndex: stepIndexToNavigateTo,
+            allStepsCompleted: false,
+          },
+        };
+    }
+
+    if (!stepId && type === 'CONFIRMATION') {
+      return {
+        stepState: {
+          ...stepState,
+          currentStep: {
+            type: 'CONFIRMATION',
+          },
+          stepIndex: stepState.steps.length,
+          allStepsCompleted: true,
+        },
+      };
+    }
+    return state;
+  },
+
+  gotoStep: (state: State, stepIndex: number): Partial<State> => {
+    const { stepState } = state;
+    const { stepIndex: oldStepIndex } = stepState;
+    if (stepState) {
+      const { currentStep } = stepState;
+      const stepToNavigateTo = stepState.steps[stepIndex];
+
+      if (state.genericData.isPreviewMode) {
+        // we can go to any step in preview mode
+        if (stepIndex === stepState.steps.length) {
+          return {
+            stepState: {
+              ...stepState,
+              currentStep: {
+                type: 'CONFIRMATION',
+              },
+              stepIndex: stepState.steps.length,
+              allStepsCompleted: true,
+            },
+          };
+        }
+        return {
+          stepState: {
+            ...state.stepState,
+            currentStep: {
+              ...stepToNavigateTo,
+            },
+            stepIndex,
+            allStepsCompleted: false,
+          },
+        };
+      }
+
+      // go to any step in isReadOnly Mode
+      if (state.genericData.isReadOnly) {
+        return {
+          stepState: {
+            ...state.stepState,
+            currentStep: {
+              ...stepToNavigateTo,
+            },
+            stepIndex,
+            // allStepsCompleted: false,
+          },
+        };
+      }
+
+      // navigate directly to confirmation page if all steps are completed
+      if (
+        stepState.allStepsCompleted &&
+        stepIndex === stepState.steps.length &&
+        stepState.currentStep?.type !== 'CONFIRMATION' &&
+        stepState.currentStep?.isValid
+      ) {
+        return {
+          stepState: {
+            ...stepState,
+            currentStep: {
+              type: 'CONFIRMATION',
+            },
+            stepIndex: stepState.steps.length,
+            allStepsCompleted: true,
+          },
+        };
+      }
+
+      // navigate to confirmation from final step
+      if (
+        currentStep &&
+        currentStep.type !== 'CONFIRMATION' &&
+        currentStep.isValid &&
+        oldStepIndex === stepState.steps.length - 1 &&
+        stepIndex === stepState.steps.length
+      ) {
+        const updatedStep = {
+          ...stepState.steps[oldStepIndex],
+          isCompleted: true,
+        };
+        return {
+          stepState: {
+            ...stepState,
+            steps: [
+              ...stepState.steps.slice(0, oldStepIndex),
+              updatedStep,
+              ...stepState.steps.slice(oldStepIndex + 1),
+            ],
+            currentStep: {
+              type: 'CONFIRMATION',
+            },
+            stepIndex,
+            allStepsCompleted: true,
+          },
+        };
+      }
+
+      // navigate to a step if it is completed
+      if (
+        (stepToNavigateTo && stepToNavigateTo.isCompleted) ||
+        (stepToNavigateTo &&
+          stepState.currentStep?.type !== 'CONFIRMATION' &&
+          stepState.currentStep?.isCompleted &&
+          stepToNavigateTo.type === 'CONFIRMATION')
+      ) {
+        return {
+          stepState: {
+            ...state.stepState,
+            currentStep: {
+              ...stepToNavigateTo,
+            },
+            stepIndex,
+            showValidation: !stepToNavigateTo.isValid,
+          },
+        };
+      }
+      if (
+        // clicking on next step with current completed
+        stepState.currentStep?.type !== 'CONFIRMATION' &&
+        stepState.currentStep?.isValid &&
+        stepIndex === oldStepIndex + 1
+      ) {
+        const updatedStep = {
+          ...stepState.steps[oldStepIndex],
+          isCompleted: true,
+          isValid: true,
+        };
+        return {
+          stepState: {
+            ...state.stepState,
+            steps: [
+              ...stepState.steps.slice(0, oldStepIndex),
+              updatedStep,
+              ...stepState.steps.slice(oldStepIndex + 1),
+            ],
+            currentStep: {
+              ...stepToNavigateTo,
+            },
+            stepIndex,
+          },
+        };
+      }
+
+      // navigate to a step immediately following a completed step
+      if (
+        stepState.steps[stepIndex - 1] &&
+        stepState.steps[stepIndex - 1].isCompleted &&
+        stepState.steps[stepIndex].type !== 'CONFIRMATION'
+      ) {
+        return {
+          stepState: {
+            ...state.stepState,
+            currentStep: {
+              ...stepToNavigateTo,
+            },
+            stepIndex,
+          },
+        };
+      }
+    }
+    return state;
+  },
+
+  verifyStepValidity(state: State, stepId: number) {
+    const { stepDataMapping, conditionalFieldMapping } = state;
+    const element = stepDataMapping[stepId];
+
+    const fieldsData = Object.keys(element).map((fieldId) => {
+      const ele = element[Number(fieldId)];
+      return ele;
+    });
+
+    const visibleFields = fieldsData.filter((el) => {
+      // filter out hidden conditional fields
+      const fieldConditions = conditionalFieldMapping[stepId][el.machineName];
+      if (fieldConditions) {
+        return areParentValuesValid(stepId, fieldConditions, stepDataMapping);
+      }
+      return true;
+    });
+
+    const invalid = visibleFields.filter((el) => {
+      if (el.isRequired) {
+        if (el.type === 'SECTION') {
+          return false;
+        }
+        if (!el.value && !el.objectValue) {
+          return true;
+        }
+        if (el.type === 'CHECKBOX' && el.value === '0') {
+          return true;
+        }
+      }
+      if (el.value && !el.passesRegexTest) {
+        return true;
+      }
+      return false;
+    });
+
+    const isValid = !(invalid.length > 0);
+
+    return {
+      stepState: {
+        ...state.stepState,
+        currentStep: {
+          ...state.stepState.currentStep,
+          isValid,
+        },
+      },
+    };
+  },
+
+  getStepState() {
+    return storeSnapshot.getState().stepState;
+  },
+
+  setGenericData(
+    state: State,
+    genericData: Partial<{
+      templateId: number;
+      deploymentId: number;
+      isPreviewMode: boolean;
+      marketplaceId?: number;
+      marketplaceDetail?: MarketplaceDetail;
+      IUAccountsData?: MarketplaceAppAuthorizationType;
+      testMultipurpose?: boolean;
+    }>,
+  ): Partial<State> {
+    return {
+      genericData: {
+        ...state.genericData,
+        ...genericData,
+      },
+    };
+  },
+
+  setStepMapping(
+    state: State,
+    steps: TemplateStep[],
+    integrationId?: number,
+  ): Partial<State> {
+    const integrationIdToEdit = state.integrationIdToEdit || integrationId;
+
+    // find first step that is of trigger/query type
+    const stepWithActivityOutput =
+      steps.find(
+        (step) =>
+          step.activity &&
+          (step.activity.type === 'TRIGGER' ||
+            step.activity.type === 'QUERY' ||
+            step.activity.type === 'ADAPTER'),
+      ) || null;
+
+    let fieldListMappingData: {
+      [machineName: string]: TemplateField & { stepId: number };
+    } = {};
+
+    let standardFieldsInsideMapping: {
+      [k: string]: string | Record<string, string>;
+    } = {};
+
+    let stepIdWithFieldMapping = '';
+
+    fieldListMappingData = steps
+      .map((step) =>
+        step.template_fields.reduce((prev, next) => {
+          if (next.activity_field?.type === 'FIELD_LIST') {
+            return {
+              ...prev,
+              [`{steps.${step.machine_name}.field_list}`]: {
+                ...next,
+                stepId: step.id,
+              },
+            };
+          }
+          return prev;
+        }, {}),
+      )
+      .filter((el) => Object.keys(el).length > 0)
+      .reduce((prev, next) => ({ ...prev, ...next }), {});
+
+    const stepMapping: any = steps.reduce((prev, step) => {
+      let selectedAuthId = 0;
+      let shouldAutoVerifyAuth = false;
+      if (
+        state.genericData.isReadOnly &&
+        integrationIdToEdit &&
+        step.step_authorization
+      ) {
+        selectedAuthId = step.step_authorization; // set selected auth in read only mode
+      } else if (
+        step.hide_authorization ||
+        state.genericData.isPreviewMode ||
+        (step.is_workspace_app_step && step.activity.type === 'FORM')
+      ) {
+        shouldAutoVerifyAuth = true;
+        selectedAuthId = step.step_authorization
+          ? step.step_authorization
+          : step.authorization_type.authorizations[0]?.id ?? null;
+      } else if (state.stepMapping[step.id]) {
+        selectedAuthId = state.stepMapping[step.id].selectedAuthId;
+      } else if (integrationIdToEdit && step.step_authorization) {
+        shouldAutoVerifyAuth = true;
+        selectedAuthId = step.step_authorization; // set selected auth in edit mode
+      }
+      return {
+        ...prev,
+        [step.id]: {
+          step,
+          integrationStepId: step.step_instance,
+          authorizations:
+            step.authorization_type.authorizations?.map((el) => ({
+              authorizationId: el.id,
+              userIdentity: el.user_identity,
+              authType: el.authorization_type,
+              disableLink: el.disable_link,
+              isErrored: false,
+              isVerifying: false,
+              isVerified: false,
+              accessToken: el?.access_token || null,
+            })) ?? [],
+          isAuthVerified: shouldAutoVerifyAuth,
+          isUserinfoRequired: step.authorization_type?.is_userinfo_required,
+          selectedAuthId,
+          invalidFields: {},
+          isValid: !!integrationIdToEdit,
+          isCompleted: !!integrationIdToEdit,
+        },
+      };
+    }, {});
+
+    const parsedStepsCopy = state.stepState.steps.map((el) => ({
+      ...el,
+      invalidFields: {},
+      isValid: !!stepMapping[el.stepId].selectedAuthId,
+      isCompleted: !!stepMapping[el.stepId].selectedAuthId,
+    }));
+
+    function processTemplateFields(templateFields: any, step: any) {
+      return templateFields.reduce((acc: any, curr: any) => {
+        let value = null;
+        let objectValue = null;
+        let changedDynamicFields = [];
+        const isEditMode = !!integrationIdToEdit;
+        const isFieldMapping = curr.activity_field?.type === 'FIELD_MAPPING';
+        const isDynamicField = curr.activity_field?.type === 'DYNAMIC';
+        const isStepVisible = !!step.is_visible;
+        const isFieldVisible = !!curr.is_visible;
+        const userData =
+          (curr.app_user_data &&
+            curr.app_user_data.length > 0 &&
+            curr.app_user_data[0]) ||
+          null;
+
+        if (isEditMode && !isFieldMapping && userData && isFieldVisible) {
+          if (isDynamicField) {
+            try {
+              objectValue = JSON.parse(`${userData.value || '{}'}`);
+              changedDynamicFields = JSON.parse(
+                `${userData.changed_dynamic_fields || '[]'}`,
+              );
+            } catch (err) {
+              console.error(err);
+            }
+          } else {
+            value = userData.value;
+          }
+        } else if (!isStepVisible || !isFieldVisible) {
+          value = curr.default_value;
+          if (userData && userData.value) value = userData.value;
+        } else if (isFieldMapping && userData && userData.value) {
+          const mappingData: Record<
+            string,
+            string | Record<string, string>
+          > = JSON.parse(`${userData.value}`);
+
+          stepIdWithFieldMapping = `${step.id}`;
+
+          standardFieldsInsideMapping = Object.fromEntries(
+            Object.entries(mappingData).filter(
+              ([key]) => typeof mappingData[key] === 'string',
+            ),
+          );
+
+          const mapping = Object.fromEntries(
+            Object.entries(mappingData).filter(
+              ([key]) => typeof mappingData[key] !== 'string',
+            ),
+          );
+
+          objectValue = mapping[Object.keys(mapping)[0]];
+        } else {
+          value = '';
+        }
+
+        const newAcc = {
+          ...acc,
+          [curr.id]: {
+            fieldId: curr.id,
+            value,
+            objectValue,
+            machineName: curr.activity_field?.machine_name,
+            isRequired: curr.activity_field?.is_required || curr.is_required,
+            isVisible: curr.is_visible,
+            isDynamic:
+              curr.activity_field?.type === 'DYNAMIC' ||
+              curr.activity_field?.type === 'FIELD_MAPPING',
+            integrationFieldId:
+              curr.app_user_data && curr.app_user_data.length > 0
+                ? curr.app_user_data[0].id
+                : null,
+            isAddedInMapping: !!curr.added_in_mapping,
+            type: curr.activity_field?.type || curr.type,
+            regex: curr.activity_field?.regex,
+            regexErrorMessage: curr.activity_field?.regex_error_message,
+            passesRegexTest: true,
+            isChanged: userData ? userData.is_changed : false,
+            changedDynamicFields,
+          },
+        };
+
+        if (curr?.type === 'SECTION' && curr?.template_fields) {
+          return {
+            ...newAcc,
+            ...processTemplateFields(curr.template_fields, step),
+          };
+        }
+
+        return newAcc;
+      }, {});
+    }
+
+    const stepDataMapping: Record<number, any> = steps.reduce(
+      (prev, step) => ({
+        ...prev,
+        [step.id]: {
+          ...state.stepDataMapping[step.id],
+          ...processTemplateFields(step.template_fields, step),
+        },
+      }),
+      {},
+    );
+
+    // set standard field values from mapping data
+    if (
+      Object.keys(standardFieldsInsideMapping).length > 0 &&
+      stepIdWithFieldMapping
+    ) {
+      Object.keys(stepDataMapping).forEach((stepId) => {
+        const stepObj = stepDataMapping[Number(stepId)];
+        Object.keys(stepObj).forEach((fieldId) => {
+          const field = stepObj[Number(fieldId)];
+          if (standardFieldsInsideMapping[field.machineName]) {
+            field.value = standardFieldsInsideMapping[field.machineName];
+          }
+        });
+      });
+    }
+
+    return {
+      stepState: integrationIdToEdit
+        ? {
+            ...state.stepState,
+            steps: parsedStepsCopy,
+            currentStep: parsedStepsCopy[0],
+            showValidation: !integrationIdToEdit,
+            allStepsCompleted: !!integrationIdToEdit,
+          }
+        : state.stepState,
+      stepMapping: {
+        ...state.stepMapping,
+        ...stepMapping,
+      },
+      stepDataMapping: {
+        ...state.stepDataMapping,
+        ...stepDataMapping,
+      },
+      fieldListMapping: fieldListMappingData,
+      genericData: {
+        ...state.genericData,
+        stepWithActivityOutput,
+      },
+    };
+  },
+
+  setActivityOutputData(
+    state: State,
+    data: {
+      activityOutputData: {
+        value: string;
+        text: string;
+      }[];
+    },
+  ): Partial<State> {
+    return {
+      ...state,
+      activityOutputData: data.activityOutputData,
+    };
+  },
+
+  setAppsAuthData(
+    state: State,
+    data: {
+      appsAuthData: {
+        appId: number;
+        isVerified: boolean;
+      }[];
+    },
+  ): Partial<State> {
+    return {
+      ...state,
+      appsAuthData: data.appsAuthData,
+    };
+  },
+
+  setDynamicFieldData(
+    state: State,
+    data: {
+      dynamicFieldData: {
+        [fieldId: string]: (string | Record<string, string>)[];
+      };
+    },
+  ): Partial<State> {
+    return {
+      ...state,
+      dynamicFieldData: Object.keys(data.dynamicFieldData).reduce(
+        (prev, next) => ({
+          ...prev,
+          [`{${next}}`]: data.dynamicFieldData[next],
+        }),
+        {},
+      ),
+    };
+  },
+
+  setIncomingWebhookPayload(
+    state: State,
+    data: {
+      incomingWebhookPayload: {
+        [fieldId: string]: string | Record<string, string>;
+      };
+    },
+  ): Partial<State> {
+    return {
+      ...state,
+      incomingWebhookPayload: data.incomingWebhookPayload,
+    };
+  },
+
+  setParentChildMapping(state: State, steps: TemplateStep[]): Partial<State> {
+    const parentChildMapping = steps.reduce(
+      (prev, step) => ({
+        ...prev,
+        [step.id]: {
+          ...state.parentChildMapping[step.id],
+          ...step.template_fields.reduce((acc, curr) => {
+            if (curr.activity_field)
+              return {
+                ...acc,
+                [curr.activity_field?.machine_name]: {
+                  fieldId: curr.id,
+                  childFields: curr.activity_field?.child_fields
+                    ? JSON.parse(curr.activity_field?.child_fields ?? '[]')
+                    : null,
+                  parentFields: curr.activity_field?.parent_fields
+                    ? JSON.parse(curr.activity_field?.parent_fields ?? '[]')
+                    : null,
+                },
+              };
+            return acc;
+          }, {}),
+        },
+      }),
+      {},
+    );
+
+    return {
+      parentChildMapping: {
+        ...state.parentChildMapping,
+        ...parentChildMapping,
+      },
+    };
+  },
+
+  setConditionalFieldMapping(
+    state: State,
+    steps: TemplateStep[],
+  ): Partial<State> {
+    const conditionalFieldMapping = steps.reduce(
+      (prev, step) => ({
+        ...prev,
+        [step.id]: {
+          ...state.conditionalFieldMapping[step.id],
+          ...step.template_fields.reduce((acc: { [key: string]: [] }, curr) => {
+            if (
+              curr.activity_field &&
+              !!curr.activity_field.conditional_fields
+            ) {
+              const parentMachineName = curr.activity_field?.machine_name;
+              const parentFieldId = curr.id;
+              const conditions = (decodeJSON(
+                curr?.activity_field?.conditional_fields,
+              ) || []) as ConditionalFields[];
+              return {
+                ...acc, // conditions from previous fields
+                ...conditions.reduce(
+                  (accCondition: { [key: string]: [] }, currCondition) => {
+                    const { value } = currCondition;
+                    const childFields = (decodeJSON(
+                      currCondition.field_array,
+                    ) || []) as string[];
+                    return {
+                      ...accCondition,
+                      ...childFields.reduce(
+                        (accChild, currChild) => ({
+                          ...accChild,
+                          [currChild]: [
+                            ...(acc[currChild] || []), // current child conditions from previous fields
+                            ...(accCondition[currChild] || []), // current child conditions from previous condition array
+                            { value, parentMachineName, parentFieldId },
+                          ],
+                        }),
+                        {},
+                      ),
+                    };
+                  },
+                  {},
+                ),
+              };
+            }
+            return acc;
+          }, {}),
+        },
+      }),
+      {},
+    );
+
+    return {
+      conditionalFieldMapping: {
+        ...state.conditionalFieldMapping,
+        ...conditionalFieldMapping,
+      },
+    };
+  },
+
+  addAuthorization(
+    state: State,
+    params: {
+      stepId: number;
+      authData: Authorization;
+    },
+  ): Partial<State> {
+    const { stepId, authData } = params;
+    return {
+      stepMapping: {
+        ...state.stepMapping,
+        [stepId]: {
+          ...state.stepMapping[stepId],
+          authorizations: [
+            ...state.stepMapping[stepId].authorizations,
+            authData,
+          ],
+        },
+      },
+    };
+  },
+
+  addAppAuthorization(
+    state: State,
+    params: {
+      appId: number;
+      authData: Authorization;
+    },
+  ): Partial<State> {
+    const { appId, authData } = params;
+    return {
+      authMapping: {
+        ...state.authMapping,
+        [appId]: {
+          ...state.authMapping[appId],
+          authorizations: [
+            ...state.authMapping[appId]?.authorizations,
+            authData,
+          ],
+        },
+      },
+    };
+  },
+
+  setSelectedAuthByAppId(
+    state: State,
+    params: {
+      appId: number;
+      authId: number | null;
+    },
+  ): Partial<State> {
+    const { appId, authId } = params;
+    return {
+      selectedAuthByAppId: {
+        ...state.selectedAuthByAppId,
+        [appId]: authId,
+      },
+    };
+  },
+
+  removeAuthorization(
+    state: State,
+    params: {
+      stepId: number;
+      authId: number;
+    },
+  ): Partial<State> {
+    const { stepId, authId } = params;
+
+    const updatedArr = state.stepMapping[stepId].authorizations.filter(
+      (el) => el.authorizationId !== authId,
+    );
+
+    const step = state.stepState.currentStep as StepStateStep;
+    return {
+      stepState: {
+        ...state.stepState,
+        currentStep: {
+          ...step,
+          isValid: updatedArr.length > 0 ? step.isValid : false,
+          isCompleted: updatedArr.length > 0 ? step.isCompleted : false,
+        },
+      },
+      stepMapping: {
+        ...state.stepMapping,
+        [stepId]: {
+          ...state.stepMapping[stepId],
+          authorizations: updatedArr,
+        },
+      },
+    };
+  },
+
+  toggleVerifyAuthorizationFlag(
+    state: State,
+    params: {
+      stepId: number;
+      authId: number;
+      isVerifying: boolean;
+    },
+  ): Partial<State> {
+    const { stepId, authId, isVerifying } = params;
+    const authObjIndex = state.stepMapping[stepId]?.authorizations.findIndex(
+      (el) => el.authorizationId === authId,
+    );
+
+    if (!(authObjIndex > -1)) return state;
+
+    return {
+      stepMapping: {
+        ...state.stepMapping,
+        [stepId]: {
+          ...state.stepMapping[stepId],
+          authorizations: [
+            ...state.stepMapping[stepId].authorizations.slice(0, authObjIndex),
+            {
+              ...state.stepMapping[stepId].authorizations[authObjIndex],
+              isVerifying,
+            },
+            ...state.stepMapping[stepId].authorizations.slice(authObjIndex + 1),
+          ],
+        },
+      },
+    };
+  },
+
+  toggleVerifyAppAuthorizationFlag(
+    state: State,
+    params: {
+      appId: number;
+      authId: number;
+      isVerifying: boolean;
+    },
+  ): Partial<State> {
+    const { appId, authId, isVerifying } = params;
+    const authObjIndex = state.authMapping[appId]?.authorizations.findIndex(
+      (el) => el.authorizationId === authId,
+    );
+
+    if (!(authObjIndex > -1)) return state;
+
+    return {
+      stepMapping: {
+        ...state.stepMapping,
+        [appId]: {
+          ...state.authMapping[appId],
+          authorizations: [
+            ...state.authMapping[appId].authorizations.slice(0, authObjIndex),
+            {
+              ...state.authMapping[appId].authorizations[authObjIndex],
+              isVerifying,
+            },
+            ...state.authMapping[appId].authorizations.slice(authObjIndex + 1),
+          ],
+        },
+      },
+    };
+  },
+
+  toggleDeleteAuthorizationFlag(
+    state: State,
+    params: {
+      stepId: number;
+      authId: number;
+      isDeleting: boolean;
+      error: string;
+    },
+  ): Partial<State> {
+    const { stepId, authId, isDeleting, error } = params;
+    const authObjIndex = state.stepMapping[stepId].authorizations.findIndex(
+      (el) => el.authorizationId === authId,
+    );
+    return {
+      stepMapping: {
+        ...state.stepMapping,
+        [stepId]: {
+          ...state.stepMapping[stepId],
+          authorizations: [
+            ...state.stepMapping[stepId].authorizations.slice(0, authObjIndex),
+            {
+              ...state.stepMapping[stepId].authorizations[authObjIndex],
+              isDeleting,
+              error,
+            },
+            ...state.stepMapping[stepId].authorizations.slice(authObjIndex + 1),
+          ],
+        },
+      },
+    };
+  },
+
+  toggleDeleteAppAuthorizationFlag(
+    state: State,
+    params: {
+      stepId: number;
+      authId: number;
+      isDeleting: boolean;
+      error: string;
+    },
+  ): Partial<State> {
+    const { stepId, authId, isDeleting, error } = params;
+    const authObjIndex = state.stepMapping[stepId].authorizations.findIndex(
+      (el) => el.authorizationId === authId,
+    );
+    return {
+      stepMapping: {
+        ...state.stepMapping,
+        [stepId]: {
+          ...state.stepMapping[stepId],
+          authorizations: [
+            ...state.stepMapping[stepId].authorizations.slice(0, authObjIndex),
+            {
+              ...state.stepMapping[stepId].authorizations[authObjIndex],
+              isDeleting,
+              error,
+            },
+            ...state.stepMapping[stepId].authorizations.slice(authObjIndex + 1),
+          ],
+        },
+      },
+    };
+  },
+
+  setStepAuthId(
+    state: State,
+    params: { stepId: number; authId: number },
+  ): Partial<State> {
+    const { stepId, authId } = params;
+    return {
+      stepMapping: {
+        ...state.stepMapping,
+        [stepId]: {
+          ...state.stepMapping[stepId],
+          selectedAuthId: authId,
+        },
+      },
+    };
+  },
+
+  setStepAuthorization(
+    state: State,
+    stepId: number,
+    selectedAuthId: number | null,
+    isVerified: boolean,
+    fieldsToReset: number[],
+    override: boolean,
+  ): Partial<State> {
+    const step = state.stepState.steps[state.stepState.stepIndex];
+    const stepFromMapping = state.stepMapping[stepId];
+    const latestStepState = storeSnapshot.getState().stepState;
+    if (
+      step &&
+      step.type !== 'CONFIRMATION' &&
+      latestStepState.currentStep?.type !== 'CONFIRMATION' &&
+      latestStepState.currentStep?.stepId === stepId
+    ) {
+      const { invalidFields } = step;
+      if (isVerified) delete invalidFields[stepId];
+      const updatedStep = {
+        ...state.stepState.steps[state.stepState.stepIndex],
+        invalidFields,
+        isValid: Object.keys(invalidFields).length < 1 && isVerified,
+        isCompleted: stepFromMapping.selectedAuthId !== null || isVerified,
+      };
+      const authObjIndex = state.stepMapping[stepId]?.authorizations.findIndex(
+        (el) => el.authorizationId === selectedAuthId,
+      );
+
+      if (!(authObjIndex > -1)) {
+        /**
+         * Reset template step fields when the step does not have the selected auth ID
+         */
+        if (!(authObjIndex > -1)) {
+          return {
+            // reset all values for the dependent fields of auth
+            stepMapping: {
+              ...state.stepMapping,
+              [stepId]: {
+                ...state.stepMapping[stepId],
+                selectedAuthId: null,
+              },
+            },
+            stepDataMapping: override
+              ? state.stepDataMapping
+              : {
+                  ...state.stepDataMapping,
+                  [stepId]: {
+                    ...state.stepDataMapping[stepId],
+                    ...fieldsToReset.reduce(
+                      (acc, curr) => ({
+                        ...acc,
+                        [curr]: {
+                          ...state.stepDataMapping[stepId][curr],
+                          value: '',
+                        },
+                      }),
+                      {},
+                    ),
+                  },
+                },
+          };
+        }
+      }
+
+      // get all steps, update selected auth ID for all steps where auth type matches
+      let stepMappingCopy = {};
+
+      Object.keys(state.stepMapping).forEach((stepID) => {
+        const currentStep = state.stepMapping[stepID];
+        const authStep = state.stepMapping[stepId];
+        let defaultStepAuthorizations = currentStep.authorizations;
+        if (
+          currentStep.step.authorization_type.app.id ===
+            state.stepMapping[stepId].step.authorization_type.app.id &&
+          stepId !== Number(stepID)
+        ) {
+          /**
+           * this means that there is another step of same app that should also be populated with new auth added
+           */
+          if (defaultStepAuthorizations.length === 0) {
+            defaultStepAuthorizations =
+              state.stepMapping[stepId].authorizations;
+          } else {
+            defaultStepAuthorizations = [
+              ...currentStep.authorizations.slice(0, authObjIndex),
+              {
+                ...state.stepMapping[stepId].authorizations[authObjIndex],
+                isVerified,
+                isVerifying: false,
+                didFetchStatus: true,
+                error: '',
+              },
+              ...currentStep.authorizations.slice(authObjIndex + 1),
+            ];
+          }
+        }
+        stepMappingCopy = {
+          ...stepMappingCopy,
+          [stepID]: {
+            ...currentStep,
+            selectedAuthId:
+              (isVerified && stepId === Number(stepID)) ||
+              currentStep.step.authorization_type.id ===
+                authStep.step.authorization_type.id // if the step we are currently on has the same auth type, update the ID
+                ? selectedAuthId
+                : currentStep.selectedAuthId,
+            isAuthVerified: isVerified,
+            authorizations:
+              Number(stepID) === stepId
+                ? [
+                    ...currentStep.authorizations.slice(0, authObjIndex),
+                    {
+                      ...currentStep.authorizations[authObjIndex],
+                      isVerified,
+                      isVerifying: false,
+                      didFetchStatus: true,
+                      error: '',
+                    },
+                    ...currentStep.authorizations.slice(authObjIndex + 1),
+                  ]
+                : defaultStepAuthorizations,
+          },
+        };
+      });
+
+      return {
+        stepState: {
+          ...state.stepState,
+          steps: [
+            ...state.stepState.steps.slice(0, state.stepState.stepIndex),
+            updatedStep,
+            ...state.stepState.steps.slice(state.stepState.stepIndex + 1),
+          ],
+          currentStep: updatedStep,
+          showValidation: !isVerified && !stepFromMapping.selectedAuthId,
+        },
+        stepMapping: stepMappingCopy,
+        // // reset all values for the dependent fields of auth
+        stepDataMapping: override
+          ? state.stepDataMapping
+          : {
+              ...state.stepDataMapping,
+              [stepId]: {
+                ...state.stepDataMapping[stepId],
+                ...fieldsToReset.reduce(
+                  (acc, curr) => ({
+                    ...acc,
+                    [curr]: {
+                      ...state.stepDataMapping[stepId][curr],
+                      value: '',
+                    },
+                  }),
+                  {},
+                ),
+              },
+            },
+      };
+    }
+    return state;
+  },
+
+  resetCustomMappingData(state: State, stepId: number): Partial<State> {
+    const step = state.stepMapping[stepId];
+    const dynamicFieldId = step.step.template_fields.filter(
+      (el) => el.activity_field?.type === 'DYNAMIC',
+    )[0]?.id;
+
+    if (dynamicFieldId) {
+      const stepData = state.stepDataMapping[stepId][dynamicFieldId];
+      if (stepData) stepData.objectValue = {};
+      return {
+        stepDataMapping: {
+          ...state.stepDataMapping,
+          [stepId]: {
+            ...state.stepDataMapping[stepId],
+            [dynamicFieldId]: stepData,
+          },
+        },
+      };
+    }
+    return state;
+  },
+
+  setStepFieldData(
+    state: State,
+    data: {
+      stepId: number;
+      fieldId: number;
+      value: string;
+      isRequired: boolean;
+      passesRegexTest?: boolean;
+    },
+  ): Partial<State> {
+    const { stepId, fieldId, value, passesRegexTest = true } = data;
+    const step = state.stepState.steps[state.stepState.stepIndex];
+
+    if (step.type !== 'CONFIRMATION') {
+      return {
+        stepState: {
+          ...state.stepState,
+          allStepsCompleted: false,
+        },
+        stepDataMapping: {
+          ...state.stepDataMapping,
+          [stepId]: {
+            ...state.stepDataMapping[stepId],
+            [fieldId]: {
+              ...state.stepDataMapping[stepId][fieldId],
+              value,
+              passesRegexTest,
+            },
+          },
+        },
+      };
+    }
+    return state;
+  },
+
+  clearChildFields(
+    state: State,
+    data: {
+      stepId: number;
+      fieldId: number;
+    },
+  ): Partial<State> {
+    // clear all child fields of the field that was just updated
+    const { stepId, fieldId } = data;
+    const step = state.stepState.steps[state.stepState.stepIndex];
+    if (step && step.type !== 'CONFIRMATION') {
+      const stepData = state.parentChildMapping[stepId];
+
+      if (!stepData) return state;
+
+      const field = Object.keys(stepData).find(
+        (el) => stepData[el].fieldId === fieldId,
+      );
+
+      if (!field) return state;
+
+      const { childFields } = stepData[field];
+
+      if (!childFields) return state;
+
+      // empty all fields in step data mapping for this step ID
+      const stepDataMapping = state.stepDataMapping[stepId];
+
+      // update fields inside step data mapping if machine name matches
+      const updatedStepDataMapping = Object.keys(stepDataMapping).reduce(
+        (acc, curr: string) => {
+          const stepField = stepDataMapping[Number(curr)];
+          if (childFields.includes(stepField.machineName)) {
+            return {
+              ...acc,
+              [curr]: {
+                ...stepField,
+                value: '',
+              },
+            };
+          }
+          return {
+            ...acc,
+            [curr]: stepField,
+          };
+        },
+        {},
+      );
+
+      return {
+        ...state,
+        stepDataMapping: {
+          ...state.stepDataMapping,
+          [stepId]: updatedStepDataMapping,
+        },
+      };
+    }
+    return state;
+  },
+
+  setStepMappingData(
+    state: State,
+    data: {
+      stepId: number;
+      fieldId: number;
+      id: string;
+      value: string | null;
+    },
+  ): Partial<State> {
+    const val = state.stepDataMapping[data.stepId][data.fieldId]?.objectValue;
+    let newVal;
+    if (data.value) {
+      newVal = {
+        ...(state.stepDataMapping[data.stepId][data.fieldId]?.objectValue ??
+          {}),
+        ...{ [data.id]: data.value },
+      };
+    } else if (val) {
+      delete val[data.id];
+      newVal = val;
+      if (Object.keys(newVal).length === 0) newVal = null;
+    }
+    if (newVal)
+      return {
+        stepDataMapping: {
+          ...state.stepDataMapping,
+          [data.stepId]: {
+            ...state.stepDataMapping[data.stepId],
+            [data.fieldId]: {
+              ...state.stepDataMapping[data.stepId][data.fieldId],
+              objectValue: newVal,
+            },
+          },
+        },
+      };
+    return state;
+  },
+  resetTemplateFields(state: State): State {
+    return {
+      ...state,
+      stepMapping: initialState.stepMapping,
+      stepDataMapping: initialState.stepDataMapping,
+      stepState: initialState.stepState,
+      showSetupModal: initialState.showSetupModal,
+      showSetupInline: initialState.showSetupInline,
+      parentChildMapping: initialState.parentChildMapping,
+      integrationIdToEdit: initialState.integrationIdToEdit,
+      genericData: {
+        ...state.genericData,
+        brandingApp: initialState.genericData.brandingApp,
+        templateId: initialState.genericData.templateId,
+      },
+    };
+  },
+  reset(): State {
+    return initialState;
+  },
+});