@integry/sdk 4.7.39 → 4.7.40

package/src/features/common/ActionForm/index.ts

@@ -1,2602 +0,0 @@
-/* eslint-disable no-nested-ternary */
-import { html, Component } from 'htm/preact';
-import { connect } from 'unistore/preact';
-// import DOMPurify from 'dompurify';
-import { IntegrySDKEvents } from '@/types';
-import { IntegryAPI } from '@/modules/api';
-import { EventEmitter } from '@/modules/event-emitter';
-import { ListBox } from '@/components/MultipurposeField/Dropdown';
-import { Loader } from '@/components/Loader';
-import {
-  IntegryStep,
-  TemplateStep,
-  TemplateField,
-  IncomingWebhookObject,
-  NestedObject,
-} from '@/interfaces';
-import { actionFunctions } from '@/store';
-import MappingUI from '@/features/common/MappingUI';
-import { Button } from '@/components/Button';
-import { StoreType } from '@/types/store';
-import { DateInput, Input, PasswordInput } from '@/components/Input';
-import HTMLContent from '@/components/HTMLContent';
-import TextContent from '@/components/TextContent';
-// import { MappedField } from '@/components/MappedField/MappedField';
-import { MultipurposeField } from '@/components/MultipurposeField';
-import DynamicField from '@/features/common/DynamicField';
-import DynamicTypedField from '@/features/common/DynamicTypedField';
-import SectionField from '@/features/common/SectionField';
-import { TimeInput } from '@/components/TimeInput';
-import NewMappingUI from '@/features/common/NewMappingUI';
-import { ObjectField, FunctionField } from '@/components/form';
-import { areParentValuesValid, getFieldLabelTags } from '@/utils/stepUtils';
-import ConfigureFieldWrapper from '@/components/ConfigureFieldWrapper';
-import {
-  JSONToActivityOutputData,
-  JSONToDynamicFieldData,
-} from '@/utils/ActivityOutputUtils';
-
-import styles from './styles.module.scss';
-
-interface ActionFormPropsType extends StoreType {
-  step: IntegryStep;
-  stepType: 'AUTH' | 'CONFIGURATION' | 'SECTION';
-  showStepValidation: boolean;
-  apiHandler: IntegryAPI;
-  eventEmitter: EventEmitter<IntegrySDKEvents>;
-  isReadOnly?: boolean;
-  accountConnected: boolean;
-  selectedAuthId: string;
-  onFieldChangeCallback?: (fieldId: string, value: string) => void;
-  tagsComponent?: any;
-  tagsTree?: any;
-  showMappingMenu: boolean;
-  showMenuOnLeft: boolean;
-  tagsTreeActivityOutput?: any;
-}
-
-interface ActionFormStateType {
-  loading: boolean;
-  dynamicFieldDataState: any;
-  parentChildMapping: any;
-  dynamicFieldsData: any;
-  parentFieldChanged: any;
-  changedParentMachineName: string;
-}
-
-interface StepDataMapping {
-  [key: string]: any;
-}
-
-type FieldMapping = {
-  [key: string]: {
-    fieldId: number;
-    childFields: any[] | null;
-    parentFields: any[] | null;
-  };
-};
-
-type Mapping = Record<number, any>;
-
-class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
-  constructor(props: ActionFormPropsType) {
-    super(props);
-    const templateStep: any = props.step;
-    this.state = {
-      loading: false,
-      dynamicFieldDataState: {},
-      parentChildMapping: this.setParentChildMapping([templateStep]),
-      dynamicFieldsData: {},
-      parentFieldChanged: [],
-      changedParentMachineName: '',
-    };
-  }
-
-  componentDidMount() {
-    const { step, verifyStepValidity } = this.props;
-    verifyStepValidity(step.id);
-    const triggerStep = this.props.genericData.stepWithActivityOutput;
-    if (triggerStep) {
-      const { id: triggerStepId } = triggerStep;
-      // eslint-disable-next-line no-use-before-define
-      const data = this.getVisibleFieldsDataOnRootStep(triggerStepId);
-      // eslint-disable-next-line no-use-before-define
-      this.setRootStepData(data);
-    } else {
-      this.setRootStepData({});
-    }
-  }
-
-  componentDidUpdate(prevProps: ActionFormPropsType) {
-    const { step, verifyStepValidity } = this.props;
-    if (prevProps.step.id !== step.id) {
-      verifyStepValidity(step.id);
-      const triggerStep = this.props.genericData.stepWithActivityOutput;
-      if (triggerStep) {
-        const { id: triggerStepId } = triggerStep;
-        // eslint-disable-next-line no-use-before-define
-        const data = this.getVisibleFieldsDataOnRootStep(triggerStepId);
-        // eslint-disable-next-line no-use-before-define
-        this.setRootStepData(data);
-      } else {
-        this.setRootStepData({});
-      }
-    }
-  }
-
-  setParentChildMapping(steps: TemplateStep[]) {
-    this.setState((prevState) => {
-      const parentChildMapping = steps.reduce((mapping: Mapping, step) => {
-        const stepMapping = step.template_fields.reduce(
-          (fields: FieldMapping, field) => {
-            const activityField = field.activity_field;
-
-            if (activityField) {
-              // Create a copy of the fields object to avoid mutating it
-              const updatedFields = { ...fields };
-
-              updatedFields[activityField.machine_name] = {
-                fieldId: field.id,
-                childFields: activityField.child_fields
-                  ? JSON.parse(activityField.child_fields)
-                  : null,
-                parentFields: activityField.parent_fields
-                  ? JSON.parse(activityField.parent_fields)
-                  : null,
-              };
-
-              return updatedFields;
-            }
-
-            return fields;
-          },
-          {}, // Initial empty object
-        );
-        // Create a new object for `mapping` to avoid mutation
-        return {
-          ...mapping, // Spread the existing mapping to preserve the previous entries
-          [step.id]: {
-            ...(prevState.parentChildMapping?.[step.id] || {}), // Ensure it starts with the previous state or empty object
-            ...stepMapping, // Merge the new step mapping
-          },
-        };
-      }, {});
-
-      return {
-        parentChildMapping: {
-          ...prevState.parentChildMapping, // Spread the previous state to preserve other data
-          ...parentChildMapping, // Add the newly calculated `parentChildMapping`
-        },
-      };
-    });
-  }
-
-  getVisibleFieldsDataOnRootStep = (
-    stepId: number,
-  ): {
-    [machineName: string]: string;
-  } => {
-    const fields = this.props.stepDataMapping[stepId];
-    const requiredFieldsWithValues = Object.keys(fields)
-      .filter((el) => fields[Number(el)].value)
-      .reduce((prev, curr) => {
-        const currentItem = fields[Number(curr)];
-        return {
-          ...prev,
-          [currentItem.machineName]: currentItem.value,
-        };
-      }, {});
-
-    return requiredFieldsWithValues;
-  };
-
-  makeTagSourceFunctionBody = (
-    obj: any,
-    sourceData: any,
-    sourceStepName: string,
-  ): any => {
-    if (typeof obj === 'string') {
-      return obj.replace(
-        new RegExp(`{[^}]*\\.${sourceStepName}\\.([a-zA-Z0-9_]+)}`, 'g'),
-        (_, key) => sourceData[key] ?? `{${sourceStepName}.${key}}`, // Preserve if not found
-      );
-    }
-    if (Array.isArray(obj)) {
-      return obj.map((item) =>
-        this.makeTagSourceFunctionBody(item, sourceData, sourceStepName),
-      );
-    }
-    if (typeof obj === 'object' && obj !== null) {
-      return Object.fromEntries(
-        Object.entries(obj).map(([key, value]) => [
-          key,
-          this.makeTagSourceFunctionBody(value, sourceData, sourceStepName),
-        ]),
-      );
-    }
-
-    return obj; // Default return for non-string, non-object, non-array types
-  };
-
-  refreshRootStepData = async (callback?: any) => {
-    const triggerStep = this.props.genericData.stepWithActivityOutput;
-    if (triggerStep) {
-      const { id: triggerStepId } = triggerStep;
-      // eslint-disable-next-line no-use-before-define
-      const data = this.getVisibleFieldsDataOnRootStep(triggerStepId);
-      // eslint-disable-next-line no-use-before-define
-      this.setRootStepData(data, true, callback);
-    } else {
-      this.setRootStepData({}, true, callback);
-    }
-  };
-
-  setActivityOutputFromSourceStep = (
-    isRefresh?: boolean | false,
-    callback?: any,
-    integryObject?: any,
-  ) => {
-    const { setDynamicData } = this;
-    const setState = this.setState.bind(this);
-    const sourceSteps = this.props.step.source_steps;
-    const { stepMapping } = this.props;
-    const { props } = this;
-    Object.keys(sourceSteps).forEach((sourceStepKey) => {
-      const stepTagsSource = props.step.source_steps[sourceStepKey];
-      let hasSetData = false;
-      Object.keys(stepMapping).every((mappedStepIndex) => {
-        const stepIdOfSourceStep = stepMapping[mappedStepIndex].step.id;
-        if (
-          stepIdOfSourceStep &&
-          (stepMapping[stepIdOfSourceStep].step.machine_name ===
-            sourceStepKey ||
-            stepMapping[stepIdOfSourceStep].step.machine_name ===
-              stepTagsSource.form_step_machine_name ||
-            (stepTagsSource.tag_source_function_invocation_details &&
-              stepTagsSource.app_id ===
-                stepMapping[stepIdOfSourceStep].step?.authorization_type?.app
-                  ?.id)) &&
-          !props.genericData.isTestIntegration
-        ) {
-          hasSetData = true;
-          if (stepTagsSource.activity_output_url) {
-            if (!isRefresh) {
-              setState({
-                loading: true,
-              });
-            }
-            const sourceStepData: NestedObject = {};
-            const stepDataMappingKeys = Object.keys(
-              props.stepDataMapping[stepIdOfSourceStep],
-            );
-            for (let i = 0; i < stepDataMappingKeys.length; i += 1) {
-              const stepDataMappingKey: string = stepDataMappingKeys[i];
-              const stepDataMapping: StepDataMapping =
-                props.stepDataMapping[stepIdOfSourceStep];
-              const stepDataMappingValue = stepDataMapping[stepDataMappingKey];
-              if (stepDataMappingValue.value) {
-                sourceStepData[stepDataMappingValue.machineName] =
-                  stepDataMappingValue.value;
-              }
-            }
-
-            const isFunctionSource = stepTagsSource?.activity_output_url.includes(
-              'functions/',
-            );
-            const isFunctionActivity =
-              stepTagsSource?.activity_type === 'FUNCTION';
-            const tagSourceFunctionInvocationDetails =
-              stepTagsSource.tag_source_function_invocation_details;
-            const tagSourceFunctionBody =
-              isFunctionSource && tagSourceFunctionInvocationDetails
-                ? this.makeTagSourceFunctionBody(
-                    tagSourceFunctionInvocationDetails.body,
-                    sourceStepData,
-                    stepMapping[stepIdOfSourceStep].step.machine_name || '',
-                  )
-                : {};
-            const callDynamicDataEndpointMethod = isFunctionSource
-              ? tagSourceFunctionInvocationDetails
-                ? tagSourceFunctionInvocationDetails.method
-                : 'POST'
-              : 'GET';
-
-            props.apiHandler
-              .callDynamicDataEndpoint<
-                {
-                  text: string;
-                  value: string;
-                }[]
-              >(
-                new URL(stepTagsSource.activity_output_url),
-                {
-                  authorization_id: `${props.stepMapping[stepIdOfSourceStep].selectedAuthId}`,
-                  connected_account_id: `${props.stepMapping[stepIdOfSourceStep].selectedAuthId}`,
-                  ...sourceStepData,
-                  ...tagSourceFunctionBody,
-                },
-                callDynamicDataEndpointMethod,
-              )
-              .then((res) => {
-                setState({
-                  loading: false,
-                });
-
-                let error = false;
-                if (res) {
-                  const functionResponse: any = res;
-
-                  if (isFunctionSource && 'output' in functionResponse) {
-                    this.setActivityOutputFromIntegryObjectOrRawActivityOutput(
-                      functionResponse.output,
-                      stepTagsSource,
-                      sourceStepKey,
-                      true,
-                      isFunctionActivity,
-                    );
-                  } else {
-                    props.setActivityOutputData({
-                      activityOutputData: stepTagsSource.loop_variable_name
-                        ? this.replaceContactPrefix(
-                            res,
-                            sourceStepKey,
-                            stepTagsSource,
-                          )
-                        : res,
-                    });
-                  }
-                } else {
-                  error = true;
-                }
-                if (callback) {
-                  callback(error);
-                }
-              });
-            if (stepTagsSource.sample_data_endpoint_url && stepIdOfSourceStep) {
-              setDynamicData(
-                stepTagsSource.sample_data_endpoint_url,
-                stepIdOfSourceStep,
-                {
-                  ...sourceStepData,
-                },
-              );
-            }
-          } else if (stepTagsSource.activity_output) {
-            setState({
-              loading: false,
-            });
-            if (callback) {
-              callback();
-            }
-            this.setActivityOutputFromIntegryObjectOrRawActivityOutput(
-              integryObject,
-              stepTagsSource,
-              sourceStepKey,
-            );
-          }
-          return false;
-        }
-
-        if (
-          (props.genericData.isTestIntegration ||
-            (!stepTagsSource.app_id &&
-              !this.canOverrideIntegryObject(integryObject))) &&
-          stepTagsSource.activity_output
-        ) {
-          setState({
-            loading: false,
-          });
-          if (callback) {
-            callback();
-          }
-          hasSetData = true;
-          this.setActivityOutputFromRawActivityOutput(
-            stepTagsSource,
-            sourceStepKey,
-          );
-          return false;
-        }
-        return true;
-      });
-
-      if (!hasSetData && stepTagsSource.activity_output) {
-        this.setActivityOutputFromIntegryObjectOrRawActivityOutput(
-          integryObject,
-          stepTagsSource,
-          sourceStepKey,
-        );
-        setState({
-          loading: false,
-        });
-        if (callback) {
-          callback();
-        }
-        hasSetData = true;
-
-        return false;
-      }
-      if (hasSetData) {
-        return false;
-      }
-      return true;
-    });
-  };
-
-  replaceContactPrefix = (
-    data: any,
-    sourceStepKey: any,
-    stepTagsSource: any,
-  ) => {
-    const replacementPrefix = `steps.${sourceStepKey}.out.${
-      stepTagsSource.loop_variable_name
-        ? `${stepTagsSource.loop_variable_name}`
-        : ''
-    }`;
-
-    return data.map((item: any) => ({
-      ...item,
-      value: item.value.replace('contact_v1', replacementPrefix),
-    }));
-  };
-
-  setActivityOutputFromRawActivityOutput = (
-    stepTagsSource: any,
-    sourceStepKey = '',
-  ) => {
-    try {
-      let objectPaylaod = {};
-      objectPaylaod = stepTagsSource.activity_output as IncomingWebhookObject;
-
-      const activityOutputData = JSONToActivityOutputData(
-        objectPaylaod,
-        '',
-        `steps.${sourceStepKey}.out.${
-          stepTagsSource.loop_variable_name
-            ? `${stepTagsSource.loop_variable_name}.`
-            : ''
-        }`,
-      );
-      const dynamicFieldData = JSONToDynamicFieldData(
-        objectPaylaod,
-        '',
-        `steps.${sourceStepKey}.out.${
-          stepTagsSource.loop_variable_name
-            ? `${stepTagsSource.loop_variable_name}.`
-            : ''
-        }`,
-      );
-      this.props.setIncomingWebhookPayload({
-        incomingWebhookPayload: objectPaylaod,
-      });
-      this.props.setActivityOutputData({
-        activityOutputData: activityOutputData || [],
-      });
-      this.props.setDynamicFieldData({
-        dynamicFieldData: dynamicFieldData || {},
-      });
-      this.setState({
-        dynamicFieldDataState: dynamicFieldData || {},
-      });
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  setDynamicData = (url: string, stepId: number, data: any) => {
-    this.props.apiHandler
-      .callDynamicDataEndpoint<{
-        [fieldId: string]: (string | Record<string, string>)[];
-      }>(new URL(url), {
-        authorization_id: `${this.props.stepMapping[stepId].selectedAuthId}`,
-        ...data,
-      })
-      .then((res) => {
-        if (res) {
-          this.props.setDynamicFieldData({
-            dynamicFieldData: res,
-          });
-          this.setState({
-            dynamicFieldDataState: res,
-          });
-        }
-      });
-  };
-
-  canOverrideIntegryObject = (integryObject: any) => {
-    if (integryObject) {
-      try {
-        const parsedIntegryObject = JSON.parse(
-          integryObject,
-        ) as IncomingWebhookObject;
-
-        if (this.props.userConfig?.objects?.[parsedIntegryObject.name]) {
-          return true;
-        }
-      } catch (e) {
-        return false;
-      }
-    }
-    return false;
-  };
-
-  setActivityOutputFromIntegryObjectOrRawActivityOutput = (
-    integryObject: any,
-    stepTagsSource: any,
-    sourceStepKey = '',
-    isFunctionSource = false,
-    isFunctionActivity = false,
-  ) => {
-    if (integryObject) {
-      const outputPrefix = isFunctionActivity ? 'output' : 'out';
-      try {
-        let objectPaylaod = {};
-        if (isFunctionSource) {
-          objectPaylaod = integryObject;
-        } else {
-          const parsedIntegryObject = JSON.parse(
-            integryObject,
-          ) as IncomingWebhookObject;
-          if (this.props.userConfig?.objects?.[parsedIntegryObject.name]) {
-            objectPaylaod = this.props.userConfig?.objects?.[
-              parsedIntegryObject.name
-            ];
-          } else {
-            objectPaylaod = JSON.parse(parsedIntegryObject.payload);
-          }
-        }
-
-        const activityOutputData = JSONToActivityOutputData(
-          objectPaylaod,
-          '',
-          `steps.${sourceStepKey}.${outputPrefix}.${
-            stepTagsSource.loop_variable_name
-              ? `${stepTagsSource.loop_variable_name}.`
-              : ''
-          }`,
-        );
-        const dynamicFieldData = JSONToDynamicFieldData(
-          objectPaylaod,
-          '',
-          `steps.${sourceStepKey}.${outputPrefix}.${
-            stepTagsSource.loop_variable_name
-              ? `${stepTagsSource.loop_variable_name}.`
-              : ''
-          }`,
-        );
-        this.props.setIncomingWebhookPayload({
-          incomingWebhookPayload: objectPaylaod,
-        });
-        this.props.setActivityOutputData({
-          activityOutputData: activityOutputData || [],
-        });
-        this.props.setDynamicFieldData({
-          dynamicFieldData: dynamicFieldData || {},
-        });
-        this.setState({
-          dynamicFieldDataState: dynamicFieldData || {},
-        });
-      } catch (e) {
-        console.error(e);
-      }
-    } else {
-      this.setActivityOutputFromRawActivityOutput(
-        stepTagsSource,
-        sourceStepKey,
-      );
-    }
-  };
-
-  setRootStepData = async (
-    additionalData: Record<string, string> | undefined,
-    isRefresh?: boolean | false,
-    callback?: any,
-  ) => {
-    const triggerStep = this.props.genericData.stepWithActivityOutput;
-    let integryObject = triggerStep?.template_fields.find(
-      (el) => el.activity_field?.machine_name === 'integry_webhook_object',
-    )?.default_value;
-
-    if (integryObject) {
-      let parsedIntegryObject = {};
-      try {
-        parsedIntegryObject = JSON.parse(integryObject || '{}');
-      } catch (e) {
-        parsedIntegryObject = {};
-      }
-
-      /**
-       * this is to handle the case where the integry object is not in the format
-       * { payload: {}, name: '' }
-       */
-      const payloadName = triggerStep?.template_fields.find(
-        (el) => el.activity_field?.machine_name === 'payload_name',
-      )?.default_value;
-      parsedIntegryObject = {
-        payload: integryObject || '{}',
-        name: payloadName || 'payload',
-      };
-      integryObject = JSON.stringify(parsedIntegryObject);
-    }
-    this.props.setActivityOutputData({
-      activityOutputData: [],
-    });
-    if (
-      this.props.step.source_steps &&
-      Object.keys(this.props.step.source_steps).length > 0
-    ) {
-      this.setActivityOutputFromSourceStep(isRefresh, callback, integryObject);
-    } else if (triggerStep) {
-      const { id: triggerStepId } = triggerStep;
-
-      if (triggerStep.activity.activity_output_url) {
-        if (!isRefresh) {
-          // we don't want to set loading when refreshing the data
-          this.setState({
-            loading: true,
-          });
-        }
-        // setRootDataLoading(true);
-        this.props.apiHandler
-          .callDynamicDataEndpoint<
-            {
-              text: string;
-              value: string;
-            }[]
-          >(new URL(triggerStep.activity.activity_output_url), {
-            authorization_id: `${this.props.stepMapping[triggerStepId].selectedAuthId}`,
-            ...additionalData,
-          })
-          .then((res) => {
-            // setRootDataLoading(false);
-            this.setState({
-              loading: false,
-            });
-            if (callback) {
-              callback();
-            }
-            if (res)
-              this.props.setActivityOutputData({
-                activityOutputData: res,
-              });
-          });
-      } else if (triggerStep.activity.activity_output || integryObject) {
-        // setRootDataLoading(false);
-        this.setActivityOutputFromIntegryObjectOrRawActivityOutput(
-          integryObject,
-          triggerStep.activity,
-        );
-        this.setState({
-          loading: false,
-        });
-        if (callback) {
-          callback();
-        }
-      } else {
-        this.setState({
-          loading: false,
-        });
-        if (callback) {
-          callback();
-        }
-      }
-
-      if (triggerStep.activity.dynamic_field_data_endpoint) {
-        this.setDynamicData(
-          triggerStep.activity.dynamic_field_data_endpoint,
-          triggerStepId,
-          additionalData,
-        );
-      }
-    }
-  };
-
-  removeCurlyBraces = (value: string): string =>
-    value.replace(/^{(.*)}$/, '$1');
-
-  isNotJSON = (obj: any) => {
-    try {
-      if (Array.isArray(obj) && obj.length > 0 && typeof obj[0] === 'object') {
-        return false;
-      }
-      JSON.parse(obj);
-      if (Number(obj)) {
-        return true;
-      }
-      return false;
-    } catch (e) {
-      return true;
-    }
-  };
-
-  arrayToNestedJSONWithFirstValue = (array: any, valueObj: any) => {
-    let tempValueObj: any = {};
-    let arrayUpdated = [];
-    if (array && Array.isArray(array)) {
-      arrayUpdated = array;
-    }
-    Object.keys(valueObj || {}).forEach((i) => {
-      const key = this.removeCurlyBraces(i);
-      tempValueObj = {
-        ...tempValueObj,
-        [key]: valueObj[i] || '',
-      };
-    });
-    let flatForm = {};
-    (arrayUpdated || []).forEach((arr: any) => {
-      flatForm = {
-        ...flatForm,
-        [arr.text]: valueObj[arr.value] || '',
-      };
-    });
-
-    const result = {};
-    (arrayUpdated || []).forEach((item: any) => {
-      if (!item.text || !item.value) {
-        return;
-      }
-      const keys = item.text.split('.');
-      let currentLevel: any = result;
-      keys.forEach((key: any, index: any) => {
-        if (!currentLevel[key]) {
-          if (index === keys.length - 1) {
-            if (tempValueObj[item.value]) {
-              if (
-                tempValueObj[item.value][0] &&
-                this.isNotJSON(tempValueObj[item.value][0])
-              ) {
-                // eslint-disable-next-line prefer-destructuring
-                currentLevel[key] = tempValueObj[item.value][0] || '';
-              } else {
-                currentLevel[key] = '';
-              }
-            } else {
-              currentLevel[key] = '';
-            }
-          } else {
-            currentLevel[key] = {};
-          }
-        }
-        currentLevel = currentLevel[key];
-      });
-    });
-    return result;
-  };
-
-  getFieldValFromActivityOutputRaw = (array: any, val: string) => {
-    const results = val.match(/{([^}]+)}/g);
-    let valSubstituded = val;
-    (results || []).forEach((tag: string) => {
-      const tagCheck = tag.replace(/{|}/g, '');
-      (array || []).forEach((arr: any) => {
-        if (arr.text === tagCheck) {
-          valSubstituded = valSubstituded.replace(tag, `{${arr.value}}`);
-        }
-      });
-    });
-    return valSubstituded;
-  };
-
-  private getStepVisibleFieldsData = (
-    stepId: number,
-  ): {
-    [machineName: string]: string;
-  } => {
-    const fields = this.props.stepDataMapping[stepId];
-    const requiredFieldsWithValues = Object.keys(fields)
-      .filter((el) => fields[Number(el)].value)
-      .reduce((prev, curr) => {
-        const currentItem = fields[Number(curr)];
-        return {
-          ...prev,
-          [currentItem.machineName]: currentItem.value,
-        };
-      }, {});
-    return requiredFieldsWithValues;
-  };
-
-  private areParentValuesFilled = (stepId: number, parentFields: string[]) => {
-    let valid = true;
-    // check if all parent fields have their values set
-    for (let index = 0; index < parentFields.length; index += 1) {
-      const val = parentFields[index];
-      let fieldId = null;
-      if (this.props.parentChildMapping[stepId][val]) {
-        fieldId = this.props.parentChildMapping[stepId][val].fieldId;
-      }
-      const parentField =
-        fieldId &&
-        this.props.stepDataMapping[stepId] &&
-        this.props.stepDataMapping[stepId][fieldId];
-      if (!(parentField && parentField.value)) {
-        valid = false;
-        break;
-      }
-    }
-    return valid;
-  };
-
-  private doParentFieldsHaveValues = (stepId: number, machineName: string) => {
-    let valid = true;
-    const fieldInfo = this.props.parentChildMapping[stepId][machineName];
-    if (fieldInfo && fieldInfo.parentFields)
-      // check if all parent fields have their values set
-      for (let index = 0; index < fieldInfo.parentFields.length; index += 1) {
-        const parentField = this.props.parentChildMapping[stepId][
-          fieldInfo.parentFields[index]
-        ];
-        const parentFieldData =
-          parentField &&
-          this.props.stepDataMapping[stepId] &&
-          this.props.stepDataMapping[stepId][parentField.fieldId];
-        if (!(parentFieldData && parentFieldData.value)) {
-          valid = false;
-          break;
-        }
-      }
-    return valid;
-  };
-
-  private shouldShowStep = (field: TemplateField) => {
-    if (!this.props.showStepValidation) {
-      return true;
-    }
-    const stepId = this.props.step.id;
-    const stepObject = this.props.stepMapping && this.props.stepMapping[stepId];
-
-    if (
-      field.type === 'BUTTON' ||
-      field.type === 'HTML' ||
-      field.type === 'SECTION'
-    )
-      return true;
-
-    if (stepObject && field.activity_field) {
-      if (this.props.userConfig && this.props.userConfig.viewAsIU) return true;
-      const shouldBeShown = !field.is_hidden;
-      // const isAuthSelected = stepObject.selectedAuthId;
-      const isAuthSelected = true;
-
-      const { parentFields } = this.props.parentChildMapping[stepId][
-        field.activity_field.machine_name
-      ];
-
-      const fieldConditions = this.props.conditionalFieldMapping[stepId][
-        field.activity_field.machine_name
-      ];
-      let isParentFilled = true;
-      let isConditionValid = true;
-      if (parentFields) {
-        isParentFilled = this.areParentValuesFilled(stepId, parentFields);
-      }
-
-      if (fieldConditions) {
-        isConditionValid = areParentValuesValid(
-          stepId,
-          fieldConditions,
-          this.props.stepDataMapping,
-        );
-      }
-      const isValid = isParentFilled && isConditionValid;
-
-      return shouldBeShown && isAuthSelected && isValid;
-    }
-    return false;
-  };
-
-  private stepIsOfType = (fields: string[]) => {
-    const stepId = this.props.step.id;
-    const stepObject = (this.props.stepMapping &&
-      this.props.stepMapping[stepId]) || { step: this.props.step };
-    return fields.indexOf(stepObject.step.activity?.type) > -1;
-  };
-
-  private textFieldParentHasValues = (currentField: any) => {
-    const stepId = this.props.step.id;
-    const stepObject = (this.props.stepMapping &&
-      this.props.stepMapping[stepId]) || { step: this.props.step };
-
-    const anyVisibleFields = stepObject.step.template_fields.filter(
-      (el) => el.is_visible,
-    );
-
-    // ignore auth incase of configMode, or viewAsIU
-    const isAuthSelected =
-      this.props?.userConfig && this.props?.userConfig.viewAsIU
-        ? true
-        : stepObject.selectedAuthId;
-
-    const dynamicField = anyVisibleFields.filter(
-      (el) => el.activity_field && el.activity_field.type === 'DYNAMIC',
-    )[0];
-    if (!dynamicField) {
-      return true;
-    }
-
-    let isFieldChild = false;
-    anyVisibleFields.forEach((field) => {
-      const { activity_field } = field;
-      const { activity_field: current_activity_field } = currentField;
-      if (
-        activity_field?.child_fields?.includes(
-          current_activity_field.machine_name,
-        )
-      ) {
-        isFieldChild = true;
-      }
-    });
-
-    if (!isFieldChild) {
-      return true;
-    }
-
-    if (
-      anyVisibleFields.length > 0 &&
-      currentField &&
-      currentField.activity_field &&
-      isAuthSelected &&
-      this.doParentFieldsHaveValues(
-        stepId,
-        currentField.activity_field.machine_name,
-      )
-    ) {
-      return true;
-    }
-    return false;
-  };
-
-  private shouldShowOldMapping = () => {
-    const stepId = this.props.step.id;
-    const stepObject = (this.props.stepMapping &&
-      this.props.stepMapping[stepId]) || { step: this.props.step };
-    if (this.stepIsOfType(['ADAPTER', 'ACTION'])) {
-      const anyVisibleFields = stepObject.step.template_fields.filter(
-        (el) => el.is_visible,
-      );
-
-      const anyVisibleTextFields = stepObject.step.template_fields.filter(
-        (el) => el.is_visible && el.activity_field?.type === 'TEXTFIELD',
-      );
-
-      const isAuthSelected = stepObject.selectedAuthId;
-
-      const dynamicField = anyVisibleFields.filter(
-        (el) => el.activity_field && el.activity_field.type === 'DYNAMIC',
-      )[0];
-
-      // show mapping whenever we have visible text fields and a selected auth
-      if (
-        anyVisibleTextFields.length > 0 &&
-        isAuthSelected &&
-        !dynamicField &&
-        !this.shouldShowNewMapping()
-      )
-        return true;
-
-      // in case we dont have visible text fields and no dynamic fields, dont show mapping
-      if (!dynamicField) {
-        return false;
-      }
-
-      if (
-        anyVisibleFields.length > 0 &&
-        isAuthSelected &&
-        dynamicField &&
-        dynamicField.activity_field &&
-        this.doParentFieldsHaveValues(
-          stepId,
-          dynamicField.activity_field.machine_name,
-        )
-      ) {
-        const fieldConditions = this.props.conditionalFieldMapping[stepId][
-          dynamicField.activity_field.machine_name
-        ];
-        if (fieldConditions) {
-          return areParentValuesValid(
-            stepId,
-            fieldConditions,
-            this.props.stepDataMapping,
-          );
-        }
-        return true;
-      }
-      return false;
-    }
-    return false;
-  };
-
-  private shouldShowNewMapping = () => {
-    const { step, stepMapping } = this.props;
-    const stepObject = stepMapping[step.id];
-
-    if (this.stepIsOfType(['ADAPTER', 'ACTION'])) {
-      const anyVisibleFields = stepObject.step.template_fields.filter(
-        (el) => el.is_visible,
-      );
-
-      if (anyVisibleFields) {
-        const fieldMappingField = anyVisibleFields.filter(
-          (el) =>
-            el.activity_field && el.activity_field.type === 'FIELD_MAPPING',
-        )[0];
-        if (fieldMappingField) {
-          return true;
-        }
-      }
-    }
-    return false;
-  };
-
-  private getMappingDataInput = () => {
-    const stepId = this.props.step.id;
-    const stepObject = this.props.stepMapping && this.props.stepMapping[stepId];
-    const payload = {
-      authId: stepObject.selectedAuthId,
-      fieldsData: this.getStepVisibleFieldsData(stepId),
-    };
-    return payload;
-  };
-
-  private isParentField = (
-    mapping: Record<string, Record<string, any>>,
-    machineName: string,
-  ): boolean =>
-    Object.values(mapping).some((fields) =>
-      Object.values(fields).some(
-        (field) =>
-          Array.isArray(field.parentFields) &&
-          field.parentFields.includes(machineName),
-      ),
-    );
-
-  private getParentDynamicFields = (machineName: string, stepId: number) => {
-    const parentFields =
-      this.state.parentChildMapping?.[stepId]?.[machineName]?.parentFields ||
-      [];
-
-    return parentFields.reduce((acc: Record<string, unknown>, key: string) => {
-      const dynamicData = this.state.dynamicFieldsData as Record<
-        string,
-        unknown
-      >;
-
-      if (key in dynamicData) {
-        acc[key] = dynamicData[key];
-      }
-
-      return acc;
-    }, {});
-  };
-
-  private onFieldChange = ({
-    stepId,
-    fieldId,
-    value,
-    isRequired,
-    machineName,
-    computeValueUsingActivityOutput,
-  }: {
-    stepId: number;
-    fieldId: number;
-    value: string;
-    isRequired: boolean;
-    machineName?: string;
-    computeValueUsingActivityOutput?: boolean;
-  }) => {
-    // we want to check if callback function is passed in props, if yes then call it
-    if (this.props.onFieldChangeCallback) {
-      this.setState((prevState) => ({
-        dynamicFieldsData: {
-          ...prevState.dynamicFieldsData,
-          [machineName || '']: value,
-        },
-      }));
-
-      if (
-        this.isParentField(this.state.parentChildMapping, machineName || '')
-      ) {
-        this.setState((prevState) => ({
-          parentFieldChanged: {
-            ...prevState.parentFieldChanged,
-            [machineName as string]: !prevState.parentFieldChanged?.[
-              machineName as string
-            ],
-          },
-        }));
-        this.setState({ changedParentMachineName: machineName });
-      }
-
-      this.props.onFieldChangeCallback(machineName || '', value);
-    } else {
-      const valueToUse = !computeValueUsingActivityOutput
-        ? value
-        : this.getFieldValFromActivityOutputRaw(
-            this.props.activityOutputData,
-            value,
-          );
-      this.props.setStepFieldData({
-        stepId: `${stepId}`,
-        fieldId: `${fieldId}`,
-        value: valueToUse,
-        isRequired,
-      });
-      this.setState({ changedParentMachineName: machineName });
-      this.setState((prevState) => ({
-        dynamicFieldsData: {
-          ...prevState.dynamicFieldsData,
-          [machineName || '']: value,
-        },
-      }));
-      this.props.clearChildFields({ stepId, fieldId });
-      this.props.verifyStepValidity(Number(stepId));
-    }
-  };
-
-  private hasParent = (
-    fieldId: string,
-    data: Record<string, { parentFields: string[] | null }>,
-  ): boolean => {
-    const parentFields = data?.[fieldId]?.parentFields;
-    return Array.isArray(parentFields) && parentFields.length > 0;
-  };
-
-  private fieldDynamicData = (field: TemplateField) => {
-    const stepId = this.props.step.id;
-    const stepObject = this.props.stepMapping && this.props.stepMapping[stepId];
-    if ((stepObject || this.props.tagsTree) && field.activity_field) {
-      const parentFields =
-        this.props.parentChildMapping[stepId]?.[
-          field.activity_field.machine_name
-        ]?.parentFields || null;
-      if (parentFields) {
-        const endpointData = parentFields.reduce((prev, next) => {
-          const { fieldId } = this.props.parentChildMapping[stepId][next];
-          if (fieldId)
-            return {
-              ...prev,
-              [next]: this.props.stepDataMapping[stepId][fieldId].value,
-            };
-          return prev;
-        }, {});
-        return endpointData;
-      }
-      if (
-        this.state.parentChildMapping &&
-        this.hasParent(
-          field.activity_field.machine_name,
-          this.state.parentChildMapping[stepId],
-        )
-      ) {
-        const selfParentFields =
-          this.state.parentChildMapping[stepId][
-            field.activity_field.machine_name
-          ]?.parentFields || [];
-        const result = selfParentFields.reduce(
-          (acc: Record<string, unknown>, parent: any) => {
-            if (this.state.dynamicFieldsData?.[parent]) {
-              acc[parent] = this.state.dynamicFieldsData[parent];
-            }
-            return acc;
-          },
-          {},
-        );
-        return result;
-      }
-    }
-    return null;
-  };
-
-  private sourceFlowData = (field: TemplateField) => {
-    if (field.source_flow_integration_invocation_url) {
-      // when source_flow_integration_invocation_url is present, we will pass all steps data to the endpoint
-      const { stepMapping, stepDataMapping } = this.props;
-      const endpointData = Object.keys(stepMapping).reduce((prev, next) => {
-        const { machine_name, id: stepId } = stepMapping[next].step;
-        if (machine_name)
-          return {
-            ...prev,
-            [machine_name]: {
-              in: Object.keys(stepDataMapping[stepId]).reduce(
-                (prevFieldObj, nextFieldId) => {
-                  const fieldId = parseInt(nextFieldId, 10);
-                  if (stepDataMapping[stepId][fieldId]) {
-                    const { value, machineName } = stepDataMapping[stepId][
-                      fieldId
-                    ];
-                    return {
-                      ...prevFieldObj,
-                      [machineName]: value,
-                    };
-                  }
-                  return prevFieldObj;
-                },
-                {},
-              ),
-            },
-          };
-        return prev;
-      }, {});
-      return {
-        steps: {
-          ...endpointData,
-        },
-      };
-    }
-    return null;
-  };
-
-  private isHTML = (value: string): boolean => {
-    if (/<\/?[a-z][\s\S]*>/i.test(value)) {
-      return true;
-    }
-    return false;
-  };
-
-  private getPlaceholder = (field: TemplateField) => {
-    let appName =
-      this.props.genericData.stepWithActivityOutput?.activity?.app?.name ===
-      'Incoming Webhook'
-        ? this.props.genericData.selfAppName
-        : this.props.genericData.stepWithActivityOutput?.activity?.app?.name ||
-          '';
-    // this.props.genericData.marketplaceDetail?.app_instance?.account?.name ||
-    // '';
-    if (!appName || appName.includes('Webhook')) {
-      const sourceSteps = this.props.step.source_steps;
-      const { stepMapping } = this.props;
-      const { props } = this;
-      let sourceStepAppId = null;
-      Object.keys(sourceSteps).forEach((sourceStepKey) => {
-        const stepTagsSource = props.step.source_steps[sourceStepKey];
-        sourceStepAppId = stepTagsSource.app_id;
-        if (stepTagsSource.app_name) {
-          appName = stepTagsSource.app_name;
-        } else {
-          Object.keys(stepMapping).every((mappedStepIndex) => {
-            if (
-              stepMapping[mappedStepIndex].step.authorization_type.app.id ===
-              stepTagsSource.app_id
-            ) {
-              appName = stepMapping[mappedStepIndex].step.activity.app.name;
-            }
-            return true;
-          });
-        }
-      });
-      if (appName?.includes('Incoming Webhook') && sourceStepAppId === null) {
-        appName = 'Webhook';
-      }
-    }
-    if (
-      field.activity_field?.type === 'TEXTAREA' ||
-      field.activity_field?.type === 'TEXTFIELD' ||
-      field.activity_field?.type === 'DYNAMIC'
-    ) {
-      return field.is_editable &&
-        !field.is_mappable &&
-        !field.allow_tags_in_text
-        ? 'Enter text...'
-        : !field.is_editable && field.is_mappable
-        ? `Map to a ${appName} field...`
-        : field.is_editable && (field.is_mappable || field.allow_tags_in_text)
-        ? `Enter text or map to a ${appName} field...`
-        : 'Please enter a value';
-    }
-    if (
-      field.activity_field?.type === 'CHECKBOX' ||
-      field.activity_field?.type === 'SELECT' ||
-      field.activity_field?.type === 'RADIO'
-    ) {
-      return field.is_editable &&
-        !field.is_mappable &&
-        !field.allow_tags_in_text
-        ? 'Enter text or select a value...'
-        : !field.is_editable && field.is_mappable
-        ? `Select a value or map to a ${appName} field...`
-        : field.is_editable && field.allow_tags_in_text
-        ? `Enter text with ${appName} fields or select a value...`
-        : field.is_editable && field.is_mappable
-        ? `Enter text, select a value or map to a ${appName} field...`
-        : 'Select a value...';
-    }
-    return field.activity_field?.type === 'TEXTAREA' ||
-      field.activity_field?.type === 'TEXTFIELD'
-      ? 'Enter text...'
-      : field.activity_field?.type === 'CHECKBOX' ||
-        field.activity_field?.type === 'SELECT' ||
-        field.activity_field?.type === 'RADIO'
-      ? 'Select a value...'
-      : '';
-  };
-
-  private replacePlaceholders = (
-    templateObj: { [key: string]: any },
-    dictionary: { [key: string]: any },
-  ): { [key: string]: any } => {
-    const updatedObj: { [key: string]: any } = {};
-
-    // Use Object.entries to iterate over keys and values
-    Object.entries(templateObj).forEach(([key, value]) => {
-      // If the value is a string and contains a placeholder, replace it
-      if (typeof value === 'string' && value.includes('{')) {
-        // Extract the placeholder key between `{}` and use it to replace with the dictionary value
-        const placeholderKey = value.match(/{(.*?)}/);
-
-        if (placeholderKey && placeholderKey[1]) {
-          const keyPath = placeholderKey[1]; // Extract full key path from the placeholder
-          const lastPartKey = keyPath.split('.').pop(); // Get the last part of the key path
-
-          // Check if dictionary has an exact match for the full path or the last part of the path
-          if (dictionary?.[keyPath] !== undefined) {
-            // Replace using the exact match
-            updatedObj[key] = value.replace(
-              placeholderKey[0],
-              dictionary[keyPath],
-            );
-          } else if (lastPartKey && dictionary?.[lastPartKey] !== undefined) {
-            // Replace using the last part match
-            updatedObj[key] = value.replace(
-              placeholderKey[0],
-              dictionary[lastPartKey],
-            );
-          }
-        }
-      } else if (typeof value === 'string' && value) {
-        // If the value is a string but doesn't contain placeholders, retain it as is
-        updatedObj[key] = value;
-      }
-    });
-
-    // Return the updated object containing only keys with replaced values
-    return updatedObj;
-  };
-
-  private findFieldByMachineName = (machineName: string) => {
-    const { stepMapping, step } = this.props;
-    const selectedStep =
-      (stepMapping[step.id] && stepMapping[step.id].step) || step;
-    return selectedStep.template_fields.find(
-      (el) => el.activity_field?.machine_name === machineName,
-    );
-  };
-
-  private checkIfAllParentFieldsHaveDefaultValue = (
-    parentFields: string[],
-  ): boolean =>
-    parentFields.every((parentField) => {
-      const field = this.findFieldByMachineName(parentField);
-      return (
-        field &&
-        field.default_value &&
-        field.default_value !== '' &&
-        field.default_value !== 'null' &&
-        field.default_value !== 'undefined'
-      );
-    });
-
-  render() {
-    const {
-      step,
-      stepMapping,
-      stepDataMapping,
-      setStepFieldData,
-      showStepValidation,
-      isReadOnly,
-      accountConnected,
-    } = this.props;
-    const selectedStep =
-      (stepMapping[step.id] && stepMapping[step.id].step) || step;
-    const selectedStepData =
-      (stepDataMapping && stepDataMapping[step.id]) || {};
-    const actionConfigPayload = {};
-    // userConfig?.objects && genericData.directActionPayloadName
-    //     ? embedConfig?.objects[genericData.directActionPayloadName]
-    //     : embedConfig?.actionsPayload && genericData.directActionPayloadName
-    //     ? embedConfig?.actionsPayload[genericData.directActionPayloadName]
-    //     : null;
-    const activityOutputData =
-      actionConfigPayload || this.props.activityOutputData || {};
-    const noStepFields =
-      selectedStep.template_fields?.length === 0 ||
-      (!(this.props.userConfig && this.props.userConfig.viewAsIU) &&
-        selectedStep.template_fields?.filter((field) => field.is_visible)
-          .length === 0);
-    return html`
-      ${this.state.loading
-        ? html`<div class=${styles.actionFormLoader}><${Loader} /></div>`
-        : html`
-            ${selectedStep
-              ? html`
-                  <div
-                    class=${`${styles.actionFormWrap} ${
-                      this.props.selectedAuthId && this.props.accountConnected
-                        ? `${styles.actionFormWrapAutoWidth}`
-                        : ``
-                    }`}
-                  >
-                    ${noStepFields
-                      ? html`<span class=${styles.noStepFields}
-                          >There’s nothing to configure, please proceed.</span
-                        >`
-                      : selectedStep.template_fields?.map((el) => {
-                          if (
-                            this.shouldShowStep(el) &&
-                            (el.activity_field || el.type === 'SECTION')
-                          ) {
-                            const selectedStepElementData =
-                              (selectedStepData && selectedStepData[el.id]) ||
-                              null;
-                            const elDescription =
-                              el.description && !this.isHTML(el.description)
-                                ? el.description
-                                : el.activity_field?.description &&
-                                  !this.isHTML(el.activity_field?.description)
-                                ? el.activity_field?.description
-                                : '';
-                            let fieldType = el.activity_field?.type || el.type;
-                            const uiField = el.ui_field;
-                            const uiFieldSourceURL =
-                              uiField?.data_source?.url || '';
-                            if (
-                              el.data_type === 'OBJECT' &&
-                              el.type !== 'FUNCTION_FIELD'
-                            ) {
-                              if (
-                                el.type === 'DYNAMIC' &&
-                                uiField?.type === 'CUSTOM_FIELDS'
-                              ) {
-                                fieldType = 'CUSTOM_FIELDS';
-                              } else {
-                                fieldType = 'OBJECT';
-                              }
-                            } else if (
-                              el.data_type === 'OBJECT[]' &&
-                              el.type !== 'FUNCTION_FIELD'
-                            ) {
-                              if (
-                                el.type === 'DYNAMIC' &&
-                                uiField?.type === 'CUSTOM_FIELDS'
-                              ) {
-                                fieldType = 'CUSTOM_FIELDS';
-                              } else {
-                                fieldType = 'OBJECT[]';
-                              }
-                            }
-
-                            switch (fieldType) {
-                              case 'CHECKBOX':
-                              case 'RADIO':
-                              case 'SELECT': {
-                                let fieldVal = null;
-                                let elParentFields = [];
-                                if (
-                                  el.activity_field?.parent_fields &&
-                                  el.activity_field?.parent_fields !== '' &&
-                                  el.activity_field?.parent_fields !== 'null'
-                                ) {
-                                  try {
-                                    elParentFields = JSON.parse(
-                                      el.activity_field?.parent_fields,
-                                    );
-                                  } catch (e) {
-                                    elParentFields = [];
-                                  }
-                                }
-                                if (this.props.onFieldChangeCallback) {
-                                  if (
-                                    Object.prototype.hasOwnProperty.call(
-                                      this.state.dynamicFieldsData || {},
-                                      el.activity_field?.machine_name || '',
-                                    )
-                                  ) {
-                                    fieldVal = this.state.dynamicFieldsData[
-                                      el.activity_field?.machine_name || ''
-                                    ];
-                                  } else {
-                                    fieldVal = el.default_value;
-                                  }
-                                }
-                                const parentFieldsHaveDefaultValues = this.checkIfAllParentFieldsHaveDefaultValue(
-                                  elParentFields,
-                                );
-                                return html`
-                              <div key=${
-                                el.id
-                              } id=${`integry-action-field-wrap-${
-                                  el?.activity_field?.machine_name || ''
-                                }`} class=${`integry-action-field-wrap ${
-                                  el.is_visible ? '' : styles.fNotVisible
-                                }`}>
-                                <${ConfigureFieldWrapper}
-                                field=${el}
-                                stepId=${step.id}
-                                templateId=${this.props.genericData?.templateId}
-                                >
-                                <${ListBox}
-                                  key=${el.activity_field?.id}
-                                  fieldId=${
-                                    el.activity_field?.id ||
-                                    el.id ||
-                                    el?.activity_field?.machine_name
-                                  }
-                                  apiHandler=${this.props.apiHandler}
-                                  title=${el.title || el.activity_field?.title}
-                                  description=${elDescription}
-                                  showStepValidation=${showStepValidation}
-                                  placeholder=${this.getPlaceholder(el)}
-                                  isRequired=${el.is_required}
-                                  isHidden=${el.is_hidden}
-                                  isSearchable=${
-                                    true
-                                    // el.activity_field.is_searchable TODO: enable this when Serach is added for mulipurposes field
-                                  }
-                                  value=${
-                                    fieldVal ||
-                                    (selectedStepData &&
-                                      selectedStepData[el.id] &&
-                                      selectedStepData[el.id].value) ||
-                                    (this.props.onFieldChangeCallback
-                                      ? ''
-                                      : el.default_value) ||
-                                    ''
-                                  }
-                                  onChange=${(val: string) => {
-                                    this.onFieldChange({
-                                      stepId: step.id,
-                                      fieldId: el.id,
-                                      value: val,
-                                      isRequired: el.is_required,
-                                      machineName:
-                                        el.activity_field?.machine_name,
-                                    });
-                                  }}
-                                  endpointUrl=${
-                                    uiFieldSourceURL ||
-                                    el.source_flow_integration_invocation_url ||
-                                    el.activity_field?.data_src
-                                  }
-                                  isDynamic=${el.activity_field?.is_dynamic}
-                                  endpointData=${JSON.stringify({
-                                    authorization_id:
-                                      this.props.stepMapping &&
-                                      this.props.stepMapping[this.props.step.id]
-                                        ?.selectedAuthId,
-                                    ...this.fieldDynamicData(el),
-                                  })}
-                                  isReadOnly=${isReadOnly}
-                                  isChanged=${
-                                    selectedStepElementData &&
-                                    selectedStepElementData.isChanged
-                                  }
-                                  activityOutputData=${activityOutputData}
-                                  }
-                                  type=${el.activity_field?.type}
-                                  selectedAuthId=${`${
-                                    this.props.stepMapping[this.props.step.id]
-                                      ?.selectedAuthId ||
-                                    this.props.selectedAuthId ||
-                                    ''
-                                  }`}
-                                  disabled=${
-                                    !this.props.stepMapping[this.props.step.id]
-                                      ?.isAuthVerified &&
-                                    !this.props.accountConnected
-                                  }
-                                  sourceFlowData=${this.sourceFlowData(el)}
-                                  sourceFlowIntegrataionInvocationUrl=${
-                                    el.source_flow_integration_invocation_url
-                                  }
-                                  skipOptionFetch=${
-                                    this.props.userConfig?.viewAsIU
-                                  } 
-                                  isMappable=${el.is_mappable}
-                                  isEditable=${true}
-                                  allowTagsInText=${el.allow_tags_in_text}
-                                  accountConnected=${accountConnected}
-                                  labelTags=${getFieldLabelTags(el, false)}
-                                  appName=${this.props.step.activity.app.name}
-                                  isMultiSelect=${el.is_multiselect}
-                                  dataSourceBody=${this.replacePlaceholders(
-                                    uiField?.data_source?.body || {},
-                                    this.fieldDynamicData(el) || {},
-                                  )}
-                                  optionKeyPath=${uiField?.value_key_path || ''}
-                                  valueKeyPath=${uiField?.option_key_path || ''}
-                                  parentFieldChanged=${elParentFields.includes(
-                                    this.state.changedParentMachineName,
-                                  )}
-                                  allowWorkspaceConnectedAccounts=${!!this.props
-                                    .onFieldChangeCallback}
-                                  tagsTree=${
-                                    this.props.showMappingMenu
-                                      ? this.props.tagsTree
-                                      : null
-                                  }
-                                  showMenuOnLeft=${
-                                    this.props.showMenuOnLeft || false
-                                  }
-                                  skipInitialLoad=${
-                                    (elParentFields.length ?? 0) > 0 &&
-                                    !elParentFields?.some(
-                                      (parentField: any) =>
-                                        parentField &&
-                                        this.state.dynamicFieldsData?.[
-                                          parentField
-                                        ],
-                                    ) &&
-                                    !parentFieldsHaveDefaultValues
-                                  }
-
-                                ><//>
-                                </${ConfigureFieldWrapper}>
-                              </div>`;
-                              }
-                              case 'TIME':
-                                return html` <div
-                                  key=${el.id}
-                                  id=${`integry-action-field-wrap-${
-                                    el?.activity_field?.machine_name || ''
-                                  }`}
-                                  class=${`integry-action-field-wrap ${
-                                    el.is_visible ? '' : styles.fNotVisible
-                                  }`}
-                                >
-                                  <${TimeInput}
-                                    title=${el.title ||
-                                    el.activity_field?.title}
-                                    description=${elDescription}
-                                    value=${(selectedStepData &&
-                                      selectedStepData[el.id] &&
-                                      selectedStepData[el.id].value) ||
-                                    ''}
-                                    placeholder=${el.placeholder ||
-                                    'Please enter a value'}
-                                    showStepValidation=${showStepValidation}
-                                    isRequired=${el.is_required}
-                                    onChange=${(val: string) => {
-                                      this.onFieldChange({
-                                        stepId: step.id,
-                                        fieldId: el.id,
-                                        value: val,
-                                        isRequired: el.is_required,
-                                      });
-                                    }}
-                                    isReadOnly=${isReadOnly}
-                                    isChanged=${selectedStepElementData &&
-                                    selectedStepElementData.isChanged}
-                                  />
-                                </div>`;
-                              case 'TEXTFIELD':
-                              case 'HIDDEN': {
-                                let fieldVal = null;
-                                if (this.props.onFieldChangeCallback) {
-                                  if (
-                                    Object.prototype.hasOwnProperty.call(
-                                      this.state.dynamicFieldsData || {},
-                                      el.activity_field?.machine_name || '',
-                                    )
-                                  ) {
-                                    fieldVal = this.state.dynamicFieldsData[
-                                      el.activity_field?.machine_name || ''
-                                    ];
-                                  } else {
-                                    fieldVal = el.default_value;
-                                  }
-                                }
-                                const isArray = !!(
-                                  el.data_type === 'STRING[]' ||
-                                  el.data_type === 'NUMBER[]'
-                                );
-                                return (
-                                  (this.textFieldParentHasValues(el) ||
-                                    (this.props.userConfig || {}).viewAsIU) &&
-                                  !el.added_in_mapping &&
-                                  html`
-                                <div id=${`integry-action-field-wrap-${
-                                  el?.activity_field?.machine_name || ''
-                                }`} class=${`integry-action-field-wrap ${
-                                    el.is_visible ? '' : styles.fNotVisible
-                                  }`}>
-                                <${ConfigureFieldWrapper}
-                                field=${el}
-                                stepId=${step.id}
-                                templateId=${this.props.genericData?.templateId}
-                                >
-                                  <${MultipurposeField}
-                                    id=${el.activity_field?.id}
-                                    title=${
-                                      el.title || el.activity_field?.title
-                                    }
-                                    activityOutputData=${
-                                      this.props.showMappingMenu
-                                        ? this.props.tagsTreeActivityOutput
-                                        : this.arrayToNestedJSONWithFirstValue(
-                                            this.props.activityOutputData ||
-                                              JSONToActivityOutputData(
-                                                this.props.tagsTree || {},
-                                              ),
-                                            this.props.dynamicFieldData ||
-                                              this.state
-                                                .dynamicFieldDataState ||
-                                              {},
-                                          )
-                                    }
-                                    activityOutputDataRaw=${
-                                      this.props.activityOutputData ||
-                                      JSONToActivityOutputData(
-                                        this.props.tagsTree || {},
-                                      )
-                                    }
-                                    description=${elDescription}
-                                    value=${
-                                      fieldVal ||
-                                      (selectedStepData &&
-                                        selectedStepData[el.id] &&
-                                        selectedStepData[el.id].value &&
-                                        selectedStepData[el.id].value !==
-                                          'x-integry-skipped-field' &&
-                                        selectedStepData[el.id].value) ||
-                                      el.default_value ||
-                                      ''
-                                    } 
-                                    placeholder=${this.getPlaceholder(el)}
-                                    showStepValidation=${showStepValidation}
-                                    regex=${
-                                      selectedStepData[el.id]
-                                        ? selectedStepData[el.id].regex
-                                        : ''
-                                    }
-                                    regexErrorMessage=${
-                                      selectedStepData[el.id]
-                                        ? selectedStepData[el.id]
-                                            .regexErrorMessage
-                                        : ''
-                                    }
-                                    isRequired=${el.is_required}
-                                    isHidden=${el.is_hidden}
-                                    onChange=${(val: string) => {
-                                      this.onFieldChange({
-                                        stepId: step.id,
-                                        fieldId: el.id,
-                                        value: val,
-                                        isRequired: el.is_required,
-                                        machineName:
-                                          el.activity_field?.machine_name,
-                                        computeValueUsingActivityOutput: true,
-                                      });
-                                    }}
-                                    isReadOnly=${isReadOnly}
-                                    isChanged=${
-                                      selectedStepElementData &&
-                                      selectedStepElementData.isChanged
-                                    }
-                                    type=${el.activity_field?.type}
-                                    isMappable=${el.is_mappable}
-                                    isEditable=${el.is_editable}
-                                    allowTagsInText=${el.allow_tags_in_text}
-                                    labelTags=${getFieldLabelTags(el, false)}
-                                    fieldId=${
-                                      el.activity_field?.machine_name ||
-                                      el.activity_field?.id ||
-                                      el.id
-                                    }
-                                    refreshRootStepData=${
-                                      this.refreshRootStepData
-                                    }
-                                    isButtonEnabled=${
-                                      el.is_button_enabled || false
-                                    }
-                                    buttonText=${el.button_text || ''}
-                                    onButtonClickScript=${
-                                      el.on_button_click_script
-                                    }
-                                    buttonScriptRequiresAuthToken=${
-                                      el.button_script_requires_auth_token
-                                    }
-                                    apiHandler=${this.props.apiHandler}
-                                    isArray=${!!(
-                                      el.data_type === 'STRING[]' ||
-                                      el.data_type === 'NUMBER[]'
-                                    )}
-                                    tagsComponent=${this.props.tagsComponent}
-                                    tagsTree=${
-                                      this.props.showMappingMenu
-                                        ? this.props.tagsTree
-                                        : null
-                                    }
-                                    showMenuOnLeft=${
-                                      this.props.showMenuOnLeft || false
-                                    }
-                                  ><//>
-                                  </${ConfigureFieldWrapper}>
-                                </div>
-                              `
-                                );
-                              }
-                              case 'OBJECT':
-                              case 'OBJECT[]':
-                                return (
-                                  (this.textFieldParentHasValues(el) ||
-                                    (this.props.userConfig || {}).viewAsIU) &&
-                                  !el.added_in_mapping &&
-                                  html`
-                                  <div id=${`integry-action-field-wrap-${
-                                    el?.activity_field?.machine_name || ''
-                                  }`} class=${`integry-action-field-wrap ${
-                                    el.is_visible ? '' : styles.fNotVisible
-                                  }`}>
-                                  <${ConfigureFieldWrapper}
-                                  field=${el}
-                                  stepId=${step.id}
-                                  templateId=${
-                                    this.props.genericData?.templateId
-                                  }
-                                  >
-                                  <${ObjectField}
-                                      field=${el}
-                                      onChange=${this.onFieldChange}
-                                      onChangeInFlow=${(val: string) => {
-                                        this.onFieldChange({
-                                          stepId: step.id,
-                                          fieldId: el.id,
-                                          value: val,
-                                          isRequired: el.is_required,
-                                          machineName:
-                                            el.activity_field?.machine_name,
-                                        });
-                                      }}
-                                      apiHandler=${this.props.apiHandler}
-                                      isArray=${fieldType === 'OBJECT[]'}
-                                      activityOutputData=${
-                                        this.props.showMappingMenu
-                                          ? this.props.tagsTreeActivityOutput
-                                          : this.arrayToNestedJSONWithFirstValue(
-                                              this.props.activityOutputData,
-                                              this.props.dynamicFieldData ||
-                                                this.state
-                                                  .dynamicFieldDataState ||
-                                                {},
-                                            )
-                                      }
-                                    activityOutputDataRaw=${
-                                      this.props.activityOutputData
-                                    }
-                                    objectValue=${
-                                      (selectedStepData &&
-                                        selectedStepData[el.id] &&
-                                        selectedStepData[el.id].objectValue &&
-                                        selectedStepData[el.id].objectValue) ||
-                                      el.default_value ||
-                                      ''
-                                    }
-                                    tagsTree=${
-                                      this.props.showMappingMenu
-                                        ? this.props.tagsTree
-                                        : null
-                                    }
-                                    showMenuOnLeft=${
-                                      this.props.showMenuOnLeft || false
-                                    }
-                                    />
-                                    </${ConfigureFieldWrapper}>
-                                  </div>
-                                `
-                                );
-                              case 'FILE':
-                                return html`
-                                  <div
-                                    id=${`integry-action-field-wrap-${
-                                      el?.activity_field?.machine_name || ''
-                                    }`}
-                                    class=${`integry-action-field-wrap ${
-                                      el.is_visible ? '' : styles.fNotVisible
-                                    }`}
-                                  >
-                                    <${Input}
-                                      id=${el.activity_field?.id}
-                                      title=${el.title ||
-                                      el.activity_field?.title}
-                                      description=${elDescription}
-                                      value=${(selectedStepData &&
-                                        selectedStepData[el.id] &&
-                                        selectedStepData[el.id].value) ||
-                                      ''}
-                                      placeholder=${el.placeholder ||
-                                      'Please enter a URL'}
-                                      showStepValidation=${showStepValidation}
-                                      regex=${selectedStepData[el.id]
-                                        ? selectedStepData[el.id].regex
-                                        : ''}
-                                      regexErrorMessage=${selectedStepData[
-                                        el.id
-                                      ]
-                                        ? selectedStepData[el.id]
-                                            .regexErrorMessage
-                                        : ''}
-                                      isRequired=${el.is_required}
-                                      onChange=${(
-                                        val: string,
-                                        passesRegexTest?: boolean,
-                                      ) => {
-                                        setStepFieldData({
-                                          stepId: `${step.id}`,
-                                          fieldId: `${el.id}`,
-                                          value: val,
-                                          isRequired: el.is_required,
-                                          passesRegexTest,
-                                        });
-                                        this.props.verifyStepValidity(step.id);
-                                      }}
-                                      isReadOnly=${isReadOnly}
-                                      isChanged=${selectedStepElementData &&
-                                      selectedStepElementData.isChanged}
-                                    ><//>
-                                  </div>
-                                `;
-                              case 'DYNAMIC': {
-                                let fieldVal = null;
-                                if (this.props.onFieldChangeCallback) {
-                                  if (
-                                    Object.prototype.hasOwnProperty.call(
-                                      this.state.dynamicFieldsData || {},
-                                      el.activity_field?.machine_name || '',
-                                    )
-                                  ) {
-                                    fieldVal = this.state.dynamicFieldsData[
-                                      el.activity_field?.machine_name || ''
-                                    ];
-                                  } else {
-                                    fieldVal = el.default_value;
-                                  }
-                                }
-                                return html`
-                                  <div
-                                    key=${el.id}
-                                    id=${`integry-action-field-wrap-${
-                                      el?.activity_field?.machine_name || ''
-                                    }`}
-                                    class=${`integry-action-field-wrap ${
-                                      el.is_visible ? '' : styles.fNotVisible
-                                    }`}
-                                  >
-                                    <${DynamicField}
-                                      stepId=${selectedStep.id}
-                                      dynamicField=${el}
-                                      objectValue=${fieldVal}
-                                      endpointData=${JSON.stringify({
-                                        authorization_id:
-                                          (this.props.stepMapping &&
-                                            this.props.stepMapping[
-                                              this.props.step.id
-                                            ]?.selectedAuthId) ||
-                                          this.props.selectedAuthId,
-                                        ...this.fieldDynamicData(el),
-                                        ...this.state.dynamicFieldsData,
-                                      })}
-                                      activityOutputData=${this.props
-                                        .showMappingMenu
-                                        ? this.props.tagsTreeActivityOutput
-                                        : this.arrayToNestedJSONWithFirstValue(
-                                            this.props.activityOutputData ||
-                                              JSONToActivityOutputData(
-                                                this.props.tagsTree || {},
-                                              ),
-                                            this.props.dynamicFieldData ||
-                                              this.state
-                                                .dynamicFieldDataState ||
-                                              {},
-                                          )}
-                                      activityOutputDataRaw=${this.props
-                                        .activityOutputData ||
-                                      JSONToActivityOutputData(
-                                        this.props.tagsTree || {},
-                                      )}
-                                      placeHolder=${this.getPlaceholder(el)}
-                                      appName=${this.props.step.activity.app
-                                        .name}
-                                      selectedAuthId=${`${
-                                        this.props.stepMapping[
-                                          this.props.step.id
-                                        ]?.selectedAuthId ||
-                                        this.props.selectedAuthId ||
-                                        ''
-                                      }`}
-                                      sourceFlowData=${this.sourceFlowData(el)}
-                                      sourceFlowIntegrataionInvocationUrl=${el.source_flow_integration_invocation_url}
-                                      isMappable=${el.is_mappable}
-                                      isEditable=${el.is_editable}
-                                      allowTagsInText=${el.allow_tags_in_text}
-                                      refreshRootStepData=${this
-                                        .refreshRootStepData}
-                                      parentFieldChanged=${this.state
-                                        .parentFieldChanged?.[
-                                        this.state.changedParentMachineName
-                                      ]}
-                                      onChangeCallback=${this.props
-                                        .onFieldChangeCallback
-                                        ? (val: any) => {
-                                            if (
-                                              this.props.onFieldChangeCallback
-                                            ) {
-                                              this.onFieldChange({
-                                                stepId: step.id,
-                                                fieldId: el.id,
-                                                value: val,
-                                                isRequired: el.is_required,
-                                                machineName:
-                                                  el.activity_field
-                                                    ?.machine_name,
-                                              });
-                                            }
-                                          }
-                                        : null}
-                                      tagsTree=${this.props.showMappingMenu
-                                        ? this.props.tagsTree
-                                        : null}
-                                      showMenuOnLeft=${this.props
-                                        .showMenuOnLeft || false}
-                                      showFieldsLimit=${5}
-                                    />
-                                  </div>
-                                `;
-                              }
-                              case 'CUSTOM_FIELDS': {
-                                let fieldVal = null;
-                                let fieldMappedVal = null;
-                                let elParentFields = [];
-                                if (
-                                  el.activity_field?.parent_fields &&
-                                  el.activity_field?.parent_fields !== ''
-                                ) {
-                                  try {
-                                    elParentFields = JSON.parse(
-                                      el.activity_field?.parent_fields,
-                                    );
-                                  } catch (e) {
-                                    elParentFields = [];
-                                  }
-                                }
-                                if (this.props.onFieldChangeCallback) {
-                                  if (
-                                    Object.prototype.hasOwnProperty.call(
-                                      this.state.dynamicFieldsData || {},
-                                      el.activity_field?.machine_name || '',
-                                    )
-                                  ) {
-                                    fieldVal = this.state.dynamicFieldsData[
-                                      el.activity_field?.machine_name || ''
-                                    ];
-                                  } else {
-                                    fieldVal = el.default_value;
-                                  }
-                                } else {
-                                  fieldMappedVal = this.props.stepDataMapping[
-                                    selectedStep.id
-                                  ]
-                                    ? this.props.stepDataMapping[
-                                        selectedStep.id
-                                      ][el.id]
-                                    : ({} as {
-                                        objectValue: Record<
-                                          string,
-                                          string | number
-                                        >;
-                                      });
-                                  fieldMappedVal = fieldMappedVal?.objectValue;
-                                }
-
-                                return html`
-                                  <div
-                                    key=${el.id}
-                                    id=${`integry-action-field-wrap-${
-                                      el?.activity_field?.machine_name || ''
-                                    }`}
-                                    class=${`integry-action-field-wrap ${
-                                      el.is_visible ? '' : styles.fNotVisible
-                                    }`}
-                                  >
-                                    <${DynamicTypedField}
-                                      stepId=${selectedStep.id}
-                                      dynamicField=${el}
-                                      endpointData=${JSON.stringify({
-                                        authorization_id:
-                                          (this.props.stepMapping &&
-                                            this.props.stepMapping[
-                                              this.props.step.id
-                                            ]?.selectedAuthId) ||
-                                          this.props.selectedAuthId,
-                                      })}
-                                      placeHolder=${this.getPlaceholder(el)}
-                                      appName=${this.props.step.activity.app
-                                        .name}
-                                      selectedAuthId=${`${
-                                        this.props.stepMapping[
-                                          this.props.step.id
-                                        ]?.selectedAuthId ||
-                                        this.props.selectedAuthId ||
-                                        ''
-                                      }`}
-                                      sourceFlowIntegrataionInvocationUrl=${uiField
-                                        ?.data_source?.url}
-                                      isMappable=${this.props.showMappingMenu}
-                                      isDisabled=${false}
-                                      isEditable=${false}
-                                      allowTagsInText=${true}
-                                      apiHandler=${this.props.apiHandler}
-                                      idKeyPath=${uiField?.id_key_path}
-                                      typeKeyPath=${uiField?.type_key_path}
-                                      titleKeyPath=${uiField?.title_key_path}
-                                      isRequiredKeyPath=${uiField?.is_required_key_path}
-                                      onChangeCallback=${this.props
-                                        .onFieldChangeCallback
-                                        ? (val: any) => {
-                                            if (
-                                              this.props.onFieldChangeCallback
-                                            ) {
-                                              this.onFieldChange({
-                                                stepId: step.id,
-                                                fieldId: el.id,
-                                                value: val,
-                                                isRequired: el.is_required,
-                                                machineName:
-                                                  el.activity_field
-                                                    ?.machine_name,
-                                              });
-                                            }
-                                          }
-                                        : null}
-                                      tagsTree=${this.props.showMappingMenu
-                                        ? this.props.tagsTree
-                                        : null}
-                                      showMenuOnLeft=${this.props
-                                        .showMenuOnLeft || false}
-                                      dataSourceBody=${this.replacePlaceholders(
-                                        uiField?.data_source?.body || {},
-                                        this.state.dynamicFieldsData,
-                                      )}
-                                      parentFieldsChanged=${this.state
-                                        .parentFieldChanged?.[
-                                        this.state.changedParentMachineName
-                                      ] &&
-                                      elParentFields.includes(
-                                        this.state.changedParentMachineName,
-                                      )}
-                                      activityOutputData=${this.props
-                                        .showMappingMenu
-                                        ? this.props.tagsTreeActivityOutput
-                                        : this.arrayToNestedJSONWithFirstValue(
-                                            this.props.activityOutputData ||
-                                              JSONToActivityOutputData(
-                                                this.props.tagsTree || {},
-                                              ),
-                                            this.props.dynamicFieldData ||
-                                              this.state
-                                                .dynamicFieldDataState ||
-                                              {},
-                                          )}
-                                      activityOutputDataRaw=${this.props
-                                        .activityOutputData ||
-                                      JSONToActivityOutputData(
-                                        this.props.tagsTree || {},
-                                      )}
-                                      value=${fieldVal || fieldMappedVal}
-                                      allowWorkspaceConnectedAccounts=${!!this
-                                        .props.onFieldChangeCallback}
-                                    />
-                                  </div>
-                                `;
-                              }
-                              case 'SECTION':
-                                return html`
-                                  <div
-                                    key=${el.id}
-                                    id=${`integry-action-field-wrap-${
-                                      el?.activity_field?.machine_name || ''
-                                    }`}
-                                    class=${`integry-action-field-wrap`}
-                                  >
-                                    <${SectionField}
-                                      stepId=${selectedStep.id}
-                                      sectionField=${el}
-                                      endpointData=${JSON.stringify({
-                                        authorization_id:
-                                          this.props.stepMapping &&
-                                          this.props.stepMapping[
-                                            this.props.step.id
-                                          ]?.selectedAuthId,
-                                        ...this.fieldDynamicData(el),
-                                      })}
-                                      activityOutputData=${this.arrayToNestedJSONWithFirstValue(
-                                        this.props.activityOutputData,
-                                        {},
-                                      )}
-                                      activityOutputDataRaw=${this.props
-                                        .activityOutputData}
-                                      placeHolder=${this.getPlaceholder(el)}
-                                      appName=${this.props.step.activity.app
-                                        .name}
-                                      selectedAuthId=${`${
-                                        this.props.stepMapping[
-                                          this.props.step.id
-                                        ]?.selectedAuthId || ''
-                                      }`}
-                                      sourceFlowData=${this.sourceFlowData(el)}
-                                      sourceFlowIntegrataionInvocationUrl=${el.source_flow_integration_invocation_url}
-                                      isMappable=${el.is_mappable}
-                                      isEditable=${el.is_editable}
-                                      allowTagsInText=${el.allow_tags_in_text}
-                                      refreshRootStepData=${this
-                                        .refreshRootStepData}
-                                      description=${elDescription}
-                                      showStepValidation=${showStepValidation}
-                                      placeholder=${this.getPlaceholder(el)}
-                                      selectedStepData=${selectedStepData}
-                                      onFieldChange=${this.onFieldChange}
-                                      selectedStepElementData=${selectedStepElementData}
-                                      sourceFlowData=${this.sourceFlowData}
-                                      accountConnected=${accountConnected}
-                                      getFieldLabelTags=${getFieldLabelTags}
-                                      appName=${this.props.step.activity.app}
-                                      fieldDynamicData=${this.fieldDynamicData}
-                                      apiHandler=${this.props.apiHandler}
-                                    />
-                                  </div>
-                                `;
-                              case 'PASSWORD':
-                                return html`
-                                  <div
-                                    key=${el.id}
-                                    id=${`integry-action-field-wrap-${
-                                      el?.activity_field?.machine_name || ''
-                                    }`}
-                                    class=${`integry-action-field-wrap ${
-                                      el.is_visible ? '' : styles.fNotVisible
-                                    }`}
-                                  >
-                                    <${PasswordInput}
-                                      title=${el.title ||
-                                      el.activity_field?.title}
-                                      description=${elDescription}
-                                      value=${(selectedStepData &&
-                                        selectedStepData[el.id] &&
-                                        selectedStepData[el.id].value) ||
-                                      ''}
-                                      placeholder=${el.placeholder ||
-                                      el.activity_field?.placeholder ||
-                                      'Please enter a value'}
-                                      regex=${selectedStepData[el.id]
-                                        ? selectedStepData[el.id].regex
-                                        : ''}
-                                      regexErrorMessage=${selectedStepData[
-                                        el.id
-                                      ]
-                                        ? selectedStepData[el.id]
-                                            .regexErrorMessage
-                                        : ''}
-                                      showStepValidation=${showStepValidation}
-                                      isRequired=${el.is_required}
-                                      onChange=${(val: string) => {
-                                        setStepFieldData({
-                                          stepId: `${step.id}`,
-                                          fieldId: `${el.id}`,
-                                          value: val,
-                                          isRequired: el.is_required,
-                                        });
-                                        this.props.verifyStepValidity(step.id);
-                                      }}
-                                      isReadOnly=${isReadOnly}
-                                      isChanged=${selectedStepElementData &&
-                                      selectedStepElementData.isChanged}
-                                    />
-                                  </div>
-                                `;
-                              case 'TEXTAREA': {
-                                let fieldVal = null;
-                                if (this.props.onFieldChangeCallback) {
-                                  if (
-                                    Object.prototype.hasOwnProperty.call(
-                                      this.state.dynamicFieldsData || {},
-                                      el.activity_field?.machine_name || '',
-                                    )
-                                  ) {
-                                    fieldVal = this.state.dynamicFieldsData[
-                                      el.activity_field?.machine_name || ''
-                                    ];
-                                  } else {
-                                    fieldVal = el.default_value;
-                                  }
-                                }
-                                return html`
-                              <div key=${
-                                el.id
-                              } id=${`integry-action-field-wrap-${
-                                  el?.activity_field?.machine_name || ''
-                                }`} class=${`integry-action-field-wrap ${
-                                  el.is_visible ? '' : styles.fNotVisible
-                                }`}>
-                              <${ConfigureFieldWrapper}
-                                field=${el}
-                                stepId=${step.id}
-                                templateId=${this.props.genericData?.templateId}
-                                >
-                                <${MultipurposeField}
-                                  title=${el.title || el.activity_field?.title}
-                                  description=${elDescription}
-                                  value=${
-                                    fieldVal ||
-                                    (selectedStepData &&
-                                      selectedStepData[el.id] &&
-                                      selectedStepData[el.id].value &&
-                                      selectedStepData[el.id].value !==
-                                        'x-integry-skipped-field' &&
-                                      selectedStepData[el.id].value) ||
-                                    el.default_value ||
-                                    ''
-                                  }
-                                  placeholder=${this.getPlaceholder(el)}
-                                  regex=${
-                                    selectedStepData[el.id]
-                                      ? selectedStepData[el.id].regex
-                                      : ''
-                                  }
-                                  regexErrorMessage=${
-                                    selectedStepData[el.id]
-                                      ? selectedStepData[el.id]
-                                          .regexErrorMessage
-                                      : ''
-                                  }
-                                  showStepValidation=${showStepValidation}
-                                  isRequired=${el.is_required}
-                                  isHidden=${el.is_hidden}
-                                  onChange=${(
-                                    val: string,
-                                    passesRegexTest?: boolean,
-                                  ) => {
-                                    if (this.props.onFieldChangeCallback) {
-                                      this.onFieldChange({
-                                        stepId: step.id,
-                                        fieldId: el.id,
-                                        value: val,
-                                        isRequired: el.is_required,
-                                        machineName:
-                                          el.activity_field?.machine_name,
-                                      });
-                                    } else {
-                                      setStepFieldData({
-                                        stepId: `${step.id}`,
-                                        fieldId: `${el.id}`,
-                                        value: val,
-                                        isRequired: el.is_required,
-                                        passesRegexTest,
-                                      });
-                                      this.props.verifyStepValidity(step.id);
-                                    }
-                                  }}
-                                  isReadOnly=${isReadOnly}
-                                  isChanged=${
-                                    selectedStepElementData &&
-                                    selectedStepElementData.isChanged
-                                  }
-                                  type=${el.activity_field?.type}
-                                  labelTags=${getFieldLabelTags(el, false)}
-                                  activityOutputData=${
-                                    this.props.showMappingMenu
-                                      ? this.props.tagsTreeActivityOutput
-                                      : this.arrayToNestedJSONWithFirstValue(
-                                          this.props.activityOutputData ||
-                                            JSONToActivityOutputData(
-                                              this.props.tagsTree || {},
-                                            ),
-                                          this.props.dynamicFieldData ||
-                                            this.state.dynamicFieldDataState ||
-                                            {},
-                                        )
-                                  }
-                                  activityOutputDataRaw=${
-                                    this.props.activityOutputData ||
-                                    JSONToActivityOutputData(
-                                      this.props.tagsTree || {},
-                                    )
-                                  }
-                                  isMappable=${el.is_mappable}
-                                  isEditable=${el.is_editable}
-                                  allowTagsInText=${el.allow_tags_in_text}
-                                  fieldId=${
-                                    el?.activity_field?.machine_name ||
-                                    el.activity_field?.id ||
-                                    el.id
-                                  }
-                                  refreshRootStepData=${
-                                    this.refreshRootStepData
-                                  }
-                                  tagsComponent=${this.props.tagsComponent}
-                                  tagsTree=${
-                                    this.props.showMappingMenu
-                                      ? this.props.tagsTree
-                                      : null
-                                  }
-                                  showMenuOnLeft=${
-                                    this.props.showMenuOnLeft || false
-                                  }
-                                />
-                              
-                                </${ConfigureFieldWrapper}>
-                              </div>
-                            `;
-                              }
-                              case 'DATE':
-                                return html`
-                                  <div
-                                    key=${el.id}
-                                    id=${`integry-action-field-wrap-${
-                                      el?.activity_field?.machine_name || ''
-                                    }`}
-                                    class=${`integry-action-field-wrap ${
-                                      el.is_visible ? '' : styles.fNotVisible
-                                    }`}
-                                  >
-                                    <${DateInput}
-                                      title=${el.title ||
-                                      el.activity_field?.title}
-                                      description=${elDescription}
-                                      value=${(selectedStepData &&
-                                        selectedStepData[el.id] &&
-                                        selectedStepData[el.id].value) ||
-                                      ''}
-                                      placeholder=${el.placeholder ||
-                                      'Please enter a value'}
-                                      showStepValidation=${showStepValidation}
-                                      isRequired=${el.is_required}
-                                      onChange=${(val: string) => {
-                                        setStepFieldData({
-                                          stepId: `${step.id}`,
-                                          fieldId: `${el.id}`,
-                                          value: val,
-                                          isRequired: el.is_required,
-                                        });
-                                        this.props.verifyStepValidity(step.id);
-                                      }}
-                                      isReadOnly=${isReadOnly}
-                                      isChanged=${selectedStepElementData &&
-                                      selectedStepElementData.isChanged}
-                                    />
-                                  </div>
-                                `;
-                              case 'FIELD_LIST':
-                                return html``;
-                              case 'FIELD_MAPPING':
-                                return html`
-                                  <div
-                                    class=${`${styles.actionStepFieldWrap} integry-action-field-wrap`}
-                                  >
-                                    <${NewMappingUI}
-                                      stepId=${selectedStep.id}
-                                      templateFields=${selectedStep.template_fields}
-                                      showStepValidation=${showStepValidation}
-                                    ><//>
-                                  </div>
-                                `;
-                              case 'HTML':
-                                return html` <${HTMLContent}
-                                  htmlContent=${el.default_value}
-                                />`;
-
-                              case 'TEXT_CONTENT':
-                                return html` <${TextContent}
-                                  textContent=${el.default_value}
-                                />`;
-
-                              case 'FUNCTION_FIELD':
-                                return html`
-                                  <${FunctionField}
-                                    field=${el}
-                                    name="${el.activity_field?.machine_name ||
-                                    'function_field'}"
-                                    description=${elDescription}
-                                    label="${el.title}"
-                                    value=${el.default_value}
-                                    apiHandler=${this.props.apiHandler}
-                                    isArray=${!!(el.data_type === 'OBJECT[]')}
-                                    onChange=${(
-                                      val: string,
-                                      passesRegexTest?: boolean,
-                                    ) => {
-                                      if (this.props.onFieldChangeCallback) {
-                                        this.props.onFieldChangeCallback(
-                                          el.activity_field?.machine_name || '',
-                                          val,
-                                        );
-                                      } else {
-                                        setStepFieldData({
-                                          stepId: `${step.id}`,
-                                          fieldId: `${el.id}`,
-                                          value: this.getFieldValFromActivityOutputRaw(
-                                            this.props.activityOutputData,
-                                            val,
-                                          ),
-                                          isRequired: el.is_required,
-                                          passesRegexTest,
-                                        });
-                                        this.props.verifyStepValidity(step.id);
-                                      }
-                                    }}
-                                    tagsTree=${this.props.showMappingMenu
-                                      ? this.props.tagsTree
-                                      : null}
-                                    isReadOnly=${isReadOnly}
-                                  />
-                                `;
-
-                              default:
-                                // return html``;
-                                return html` <div
-                                  class=${`${styles.actionStepFieldWrap} ${styles.unsupported}`}
-                                >
-                                  Field: ${el.activity_field?.type} is currently
-                                  not supported
-                                </div>`;
-                            }
-                          } else {
-                            switch (el.type) {
-                              case 'HTML':
-                                return html`
-                                  <div
-                                    style="margin-bottom: 2rem;"
-                                    dangerouslySetInnerHTML=${{
-                                      __html: el.default_value,
-                                    }}
-                                  />
-                                `;
-                              case 'BUTTON':
-                                return html`
-                                  <div style="margin-bottom: 2rem;">
-                                    <${Button} label=${el.title} />
-                                  </div>
-                                `;
-                              default:
-                                break;
-                            }
-                          }
-                          return html``;
-                        })}
-                    <!--  ${this.shouldShowOldMapping() &&
-                    !this.shouldShowNewMapping() &&
-                    html`
-                      <div class=${styles.actionStepFieldWrap}>
-                        <${MappingUI}
-                          stepId=${selectedStep.id}
-                          templateFields=${selectedStep.template_fields}
-                          showStepValidation=${showStepValidation}
-                          endpointData=${this.getMappingDataInput()}
-                          key=${`mapping_ui_${selectedStep.id}`}
-                        ><//>
-                      </div>
-                    `} -->
-                  </div>
-                `
-              : html`Step data could not be loaded`}
-          `}
-    `;
-  }
-}
-
-export default connect<
-  ActionFormPropsType,
-  ActionFormStateType,
-  StoreType,
-  unknown
->(
-  [
-    'stepState',
-    'stepMapping',
-    'stepDataMapping',
-    'parentChildMapping',
-    'fieldListMapping',
-    'conditionalFieldMapping',
-    'embedConfig',
-    'activityOutputData',
-    'genericData',
-    'userConfig',
-    'authMapping',
-  ],
-  actionFunctions,
-)(ActionForm);