@integry/sdk 4.5.2 → 4.5.3

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

@@ -0,0 +1,1790 @@
+/* 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,
+  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 SectionField from '@/features/common/SectionField';
+import { TimeInput } from '@/components/TimeInput';
+import NewMappingUI from '@/features/common/NewMappingUI';
+import { ObjectField } 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;
+}
+
+interface ActionFormStateType {
+  loading: boolean;
+  dynamicFieldDataState: any;
+}
+
+interface StepDataMapping {
+  [key: string]: any;
+}
+
+class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
+  constructor(props: ActionFormPropsType) {
+    super(props);
+    this.state = {
+      loading: false,
+      dynamicFieldDataState: {},
+    };
+  }
+
+  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({});
+      }
+    }
+  }
+
+  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;
+  };
+
+  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) &&
+          !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;
+              }
+            }
+
+            props.apiHandler
+              .callDynamicDataEndpoint<
+                {
+                  text: string;
+                  value: string;
+                }[]
+              >(new URL(stepTagsSource.activity_output_url), {
+                authorization_id: `${props.stepMapping[stepIdOfSourceStep].selectedAuthId}`,
+                ...sourceStepData,
+              })
+              .then((res) => {
+                setState({
+                  loading: false,
+                });
+
+                let error = false;
+                if (res) {
+                  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 = '',
+  ) => {
+    if (integryObject) {
+      try {
+        const parsedIntegryObject = JSON.parse(
+          integryObject,
+        ) as IncomingWebhookObject;
+        let objectPaylaod = {};
+        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}.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);
+      }
+    } 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) {
+        // 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) => {
+    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];
+    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];
+
+    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];
+    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 onFieldChange = ({
+    stepId,
+    fieldId,
+    value,
+    isRequired,
+  }: {
+    stepId: number;
+    fieldId: number;
+    value: string;
+    isRequired: boolean;
+  }) => {
+    this.props.setStepFieldData({
+      stepId: `${stepId}`,
+      fieldId: `${fieldId}`,
+      value,
+      isRequired,
+    });
+    this.props.clearChildFields({ stepId, fieldId });
+    this.props.verifyStepValidity(Number(stepId));
+  };
+
+  private fieldDynamicData = (field: TemplateField) => {
+    const stepId = this.props.step.id;
+    const stepObject = this.props.stepMapping && this.props.stepMapping[stepId];
+    if (stepObject && 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;
+      }
+    }
+    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;
+  };
+
+  render() {
+    const {
+      step,
+      stepMapping,
+      stepDataMapping,
+      setStepFieldData,
+      showStepValidation,
+      isReadOnly,
+      accountConnected,
+    } = this.props;
+    const selectedStep = stepMapping[step.id] && stepMapping[step.id].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}>
+                    ${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') {
+                              fieldType = 'OBJECT';
+                            } else if (el.data_type === 'OBJECT[]') {
+                              fieldType = 'OBJECT[]';
+                            }
+
+                            switch (fieldType) {
+                              case 'CHECKBOX':
+                              case 'RADIO':
+                              case 'SELECT': {
+                                return html`
+                              <div key=${
+                                el.id
+                              } class=${`${styles.actionStepFieldWrap} integry-action-field-wrap`}>
+                                <${ConfigureFieldWrapper}
+                                field=${el}
+                                stepId=${step.id}
+                                templateId=${this.props.genericData?.templateId}
+                                >
+                                <${ListBox}
+                                  key=${el.activity_field?.id}
+                                  fieldId=${el.activity_field?.id || el.id}
+                                  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=${
+                                    (selectedStepData &&
+                                      selectedStepData[el.id] &&
+                                      selectedStepData[el.id].value) ||
+                                    el.default_value ||
+                                    ''
+                                  }
+                                  onChange=${(val: string) => {
+                                    this.onFieldChange({
+                                      stepId: step.id,
+                                      fieldId: el.id,
+                                      value: val,
+                                      isRequired: el.is_required,
+                                    });
+                                  }}
+                                  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 || ''
+                                  }`}
+                                  disabled=${!this.props.stepMapping[
+                                    this.props.step.id
+                                  ]?.isAuthVerified}
+                                  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 || ''}
+                                ><//>
+                                </${ConfigureFieldWrapper}>
+                              </div>`;
+                              }
+                              case 'TIME':
+                                return html` <div
+                                  key=${el.id}
+                                  class=${`${styles.actionStepFieldWrap} integry-action-field-wrap`}
+                                >
+                                  <${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':
+                                return (
+                                  (this.textFieldParentHasValues(el) ||
+                                    (this.props.userConfig || {}).viewAsIU) &&
+                                  !el.added_in_mapping &&
+                                  html`
+                                <div class=${`${styles.actionStepFieldWrap} integry-action-field-wrap`}>
+                                <${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.arrayToNestedJSONWithFirstValue(
+                                      this.props.activityOutputData,
+                                      this.props.dynamicFieldData ||
+                                        this.state.dynamicFieldDataState ||
+                                        {},
+                                    )}
+                                    activityOutputDataRaw=${
+                                      this.props.activityOutputData
+                                    }
+                                    description=${elDescription}
+                                    value=${
+                                      (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].regex}
+                                    regexErrorMessage=${
+                                      selectedStepData[el.id].regexErrorMessage
+                                    }
+                                    isRequired=${el.is_required}
+                                    isHidden=${el.is_hidden}
+                                    onChange=${(
+                                      val: string,
+                                      passesRegexTest?: boolean,
+                                    ) => {
+                                      setStepFieldData({
+                                        stepId: `${step.id}`,
+                                        fieldId: `${el.id}`,
+                                        value: this.getFieldValFromActivityOutputRaw(
+                                          this.props.activityOutputData,
+                                          val,
+                                        ),
+                                        isRequired: el.is_required,
+                                        passesRegexTest,
+                                      });
+                                      this.props.verifyStepValidity(step.id);
+                                    }}
+                                    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?.id ||
+                                      el.activity_field?.machine_name ||
+                                      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[]'
+                                    )}
+                                  ><//>
+                                  </${ConfigureFieldWrapper}>
+                                </div>
+                              `
+                                );
+
+                              case 'OBJECT':
+                              case 'OBJECT[]':
+                                return (
+                                  (this.textFieldParentHasValues(el) ||
+                                    (this.props.userConfig || {}).viewAsIU) &&
+                                  !el.added_in_mapping &&
+                                  html`
+                                  <div class=${`${styles.actionStepFieldWrap} integry-action-field-wrap`}>
+                                  <${ConfigureFieldWrapper}
+                                  field=${el}
+                                  stepId=${step.id}
+                                  templateId=${
+                                    this.props.genericData?.templateId
+                                  }
+                                  >
+                                  <${ObjectField}
+                                      field=${el}
+                                      onChange=${this.onFieldChange}
+                                      apiHandler=${this.props.apiHandler}
+                                      isArray=${fieldType === 'OBJECT[]'}
+                                      activityOutputData=${this.arrayToNestedJSONWithFirstValue(
+                                        this.props.activityOutputData,
+                                        this.props.dynamicFieldData ||
+                                          this.state.dynamicFieldDataState ||
+                                          {},
+                                      )}
+                                    activityOutputDataRaw=${
+                                      this.props.activityOutputData
+                                    }
+                                    />
+                                    </${ConfigureFieldWrapper}>
+                                  </div>
+                                `
+                                );
+                              case 'FILE':
+                                return html`
+                                  <div
+                                    class=${`${styles.actionStepFieldWrap} integry-action-field-wrap`}
+                                  >
+                                    <${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].regex}
+                                      regexErrorMessage=${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':
+                                return html`
+                                  <div
+                                    key=${el.id}
+                                    class=${`${styles.actionStepFieldWrap} integry-action-field-wrap`}
+                                  >
+                                    <${DynamicField}
+                                      stepId=${selectedStep.id}
+                                      dynamicField=${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,
+                                        this.props.dynamicFieldData ||
+                                          this.state.dynamicFieldDataState ||
+                                          {},
+                                      )}
+                                      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}
+                                    />
+                                  </div>
+                                `;
+                              case 'SECTION':
+                                return html`
+                                  <div
+                                    key=${el.id}
+                                    class=${`${styles.actionStepFieldWrap} 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}
+                                    class=${`${styles.actionStepFieldWrap} integry-action-field-wrap`}
+                                  >
+                                    <${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].regex}
+                                      regexErrorMessage=${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':
+                                return html`
+                              <div key=${
+                                el.id
+                              } class=${`${styles.actionStepFieldWrap} integry-action-field-wrap`}>
+                              <${ConfigureFieldWrapper}
+                                field=${el}
+                                stepId=${step.id}
+                                templateId=${this.props.genericData?.templateId}
+                                >
+                                <${MultipurposeField}
+                                  title=${el.title || el.activity_field?.title}
+                                  description=${elDescription}
+                                  value=${
+                                    (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].regex}
+                                  regexErrorMessage=${
+                                    selectedStepData[el.id].regexErrorMessage
+                                  }
+                                  showStepValidation=${showStepValidation}
+                                  isRequired=${el.is_required}
+                                  isHidden=${el.is_hidden}
+                                  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
+                                  }
+                                  type=${el.activity_field?.type}
+                                  labelTags=${getFieldLabelTags(el, false)}
+                                  activityOutputData=${this.arrayToNestedJSONWithFirstValue(
+                                    this.props.activityOutputData,
+                                    this.props.dynamicFieldData ||
+                                      this.state.dynamicFieldDataState ||
+                                      {},
+                                  )}
+                                  activityOutputDataRaw=${
+                                    this.props.activityOutputData
+                                  }
+                                  isMappable=${el.is_mappable}
+                                  isEditable=${el.is_editable}
+                                  allowTagsInText=${el.allow_tags_in_text}
+                                  fieldId=${el.activity_field?.id || el.id}
+                                  refreshRootStepData=${
+                                    this.refreshRootStepData
+                                  }
+                                />
+                              
+                                </${ConfigureFieldWrapper}>
+                              </div>
+                            `;
+                              case 'DATE':
+                                return html`
+                                  <div
+                                    key=${el.id}
+                                    class=${`${styles.actionStepFieldWrap} integry-action-field-wrap`}
+                                  >
+                                    <${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}
+                                />`;
+                                return html`
+                                  <div
+                                    dangerouslySetInnerHTML=${{
+                                      __html: el.default_value,
+                                    }}
+                                  />
+                                `;
+                              case 'TEXT_CONTENT':
+                                return html` <${TextContent}
+                                  textContent=${el.default_value}
+                                />`;
+
+                              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);