@integry/sdk 4.7.39 → 4.7.41

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

@@ -1,827 +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/Listbox';
-import { Loader } from '@/components/Loader';
-import { IntegryStep, TemplateField } from '@/interfaces';
-import { actionFunctions } from '@/store';
-import MappingUI from '@/features/common/MappingUI';
-import { Button } from '@/components/Button';
-import { StoreType } from '@/types/store';
-import { CheckboxGroup } from '@/components/CheckboxGroup';
-import { DateInput, Input, PasswordInput } from '@/components/Input';
-import { TextArea } from '@/components/TextArea';
-import DynamicField from '@/features/common/DynamicField';
-import { RadioGroup } from '@/components/RadioGroup';
-import { TimeInput } from '@/components/TimeInput';
-import NewMappingUI from '@/features/common/NewMappingUI';
-import { areParentValuesValid } from '@/utils/stepUtils';
-
-import styles from './styles.module.scss';
-
-interface StepPropsType extends StoreType {
-  step: IntegryStep;
-  stepType: 'AUTH' | 'CONFIGURATION' | 'SECTION';
-  showStepValidation: boolean;
-  apiHandler: IntegryAPI;
-  eventEmitter: EventEmitter<IntegrySDKEvents>;
-  isReadOnly?: boolean;
-}
-
-interface StepStateType {
-  loading: boolean;
-}
-
-class Step extends Component<StepPropsType, StepStateType> {
-  constructor(props: StepPropsType) {
-    super(props);
-    this.state = {
-      loading: false,
-    };
-  }
-
-  componentDidMount() {
-    const { step, verifyStepValidity } = this.props;
-    verifyStepValidity(step.id);
-  }
-
-  componentDidUpdate(prevProps: StepPropsType) {
-    const { step, verifyStepValidity } = this.props;
-    if (prevProps.step.id !== step.id) {
-      verifyStepValidity(step.id);
-    }
-  }
-
-  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') return true;
-
-    if (stepObject && field.activity_field) {
-      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 = () => {
-    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,
-    );
-
-    const isAuthSelected = stepObject.selectedAuthId;
-
-    const dynamicField = anyVisibleFields.filter(
-      (el) => el.activity_field && el.activity_field.type === 'DYNAMIC',
-    )[0];
-
-    if (!dynamicField) {
-      return true;
-    }
-
-    if (
-      anyVisibleFields.length > 0 &&
-      dynamicField &&
-      dynamicField.activity_field &&
-      isAuthSelected &&
-      this.doParentFieldsHaveValues(
-        stepId,
-        dynamicField.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
-      ];
-      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 isHTML = (value: string): boolean => {
-    if (/<\/?[a-z][\s\S]*>/i.test(value)) {
-      return true;
-    }
-    return false;
-  };
-
-  render() {
-    const {
-      step,
-      stepMapping,
-      stepDataMapping,
-      setStepFieldData,
-      showStepValidation,
-      isReadOnly,
-    } = this.props;
-    const selectedStep = stepMapping[step.id] && stepMapping[step.id].step;
-    const selectedStepData = stepDataMapping && stepDataMapping[step.id];
-
-    return html`
-      ${this.state.loading
-        ? html`<${Loader} //>`
-        : html`
-            ${selectedStep
-              ? html`
-                  <div class=${styles.stepsWrap}>
-                    ${selectedStep.template_fields.map((el) => {
-                      if (this.shouldShowStep(el) && el.activity_field) {
-                        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
-                            : '';
-                        switch (el.activity_field.type) {
-                          case 'SELECT': {
-                            return html`
-                              <div key=${el.id} class=${styles.stepWrap}>
-                                <${ListBox}
-                                  key=${el.activity_field.id}
-                                  apiHandler=${this.props.apiHandler}
-                                  title=${el.title || el.activity_field.title}
-                                  description=${elDescription}
-                                  showStepValidation=${showStepValidation}
-                                  placeholder=${el.placeholder ||
-                                  el.activity_field.placeholder}
-                                  isRequired=${el.is_required}
-                                  isSearchable=${el.activity_field
-                                    .is_searchable}
-                                  isEditable=${el.is_editable || el.activity_field.is_editable}
-                                  value=${(selectedStepData &&
-                                    selectedStepData[el.id] &&
-                                    selectedStepData[el.id].value) ||
-                                  ''}
-                                  onChange=${(val: string) => {
-                                    this.onFieldChange({
-                                      stepId: step.id,
-                                      fieldId: el.id,
-                                      value: val,
-                                      isRequired: el.is_required,
-                                    });
-                                  }}
-                                  endpointUrl=${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}
-                                ><//>
-                              </div>
-                            `;
-                          }
-                          case 'TIME':
-                            return html` <div
-                              key=${el.id}
-                              class=${styles.stepWrap}
-                            >
-                              <${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.shouldShowOldMapping() &&
-                              this.textFieldParentHasValues() &&
-                              !el.added_in_mapping &&
-                              html`
-                                <div class=${styles.stepWrap}>
-                                  <${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 value'}
-                                    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 'FILE':
-                            return html`
-                              <div class=${styles.stepWrap}>
-                                <${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 'CHECKBOX': {
-                            let dataSrc:
-                              | Record<string, string>[]
-                              | string
-                              | null = null;
-                            if (
-                              !el.activity_field?.data_src ||
-                              el.activity_field?.data_src === ''
-                            ) {
-                              // use title as checkbox label
-                              dataSrc = [
-                                {
-                                  id: el.activity_field.machine_name,
-                                  value: el.activity_field.title,
-                                },
-                              ];
-                            } else if (!el.activity_field.data_src_endpoint) {
-                              try {
-                                dataSrc = JSON.parse(
-                                  el.activity_field?.data_src ?? '[]',
-                                );
-                              } catch (error) {
-                                dataSrc = [];
-                                console.error(
-                                  'Error parsing value: ',
-                                  el.activity_field?.data_src,
-                                );
-                              }
-                            }
-                            return html`
-                              <div key=${el.id} class=${styles.stepWrap}>
-                                <${CheckboxGroup}
-                                  fieldId=${el.id}
-                                  title=${el.title || el.activity_field.title}
-                                  description=${elDescription}
-                                  showStepValidation=${showStepValidation}
-                                  placeholder=${el.placeholder}
-                                  value=${selectedStepData &&
-                                  selectedStepData[el.id] &&
-                                  selectedStepData[el.id].value}
-                                  isRequired=${el.is_required}
-                                  dataSrcEndpoint=${el.activity_field.data_src}
-                                  isDynamic=${el.activity_field.is_dynamic}
-                                  initialOptions=${dataSrc}
-                                  endpointData=${JSON.stringify({
-                                    authorization_id:
-                                      this.props.stepMapping &&
-                                      this.props.stepMapping[this.props.step.id]
-                                        ?.selectedAuthId,
-                                    ...this.fieldDynamicData(el),
-                                  })}
-                                  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 'DYNAMIC':
-                            return !this.shouldShowOldMapping()
-                              ? html`
-                                  <div key=${el.id} class=${styles.stepWrap}>
-                                    <${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),
-                                      })}
-                                    />
-                                  </div>
-                                `
-                              : html``;
-                          case 'PASSWORD':
-                            return html`
-                              <div key=${el.id} class=${styles.stepWrap}>
-                                <${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.stepWrap}>
-                                <${TextArea}
-                                  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,
-                                    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 'DATE':
-                            return html`
-                              <div key=${el.id} class=${styles.stepWrap}>
-                                <${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 'RADIO':
-                            return html`
-                              <div key=${el.id} class=${styles.stepWrap}>
-                                <${RadioGroup}
-                                  title=${el.title || el.activity_field.title}
-                                  description=${elDescription}
-                                  isDynamic=${el.activity_field.is_dynamic}
-                                  isRequired=${el.is_required}
-                                  showStepValidation=${showStepValidation}
-                                  dataSrcEndpoint=${el.activity_field.is_dynamic
-                                    ? el.activity_field.data_src
-                                    : null}
-                                  value=${(selectedStepData &&
-                                    selectedStepData[el.id] &&
-                                    selectedStepData[el.id].value) ||
-                                  ''}
-                                  endpointData=${JSON.stringify({
-                                    authorization_id:
-                                      this.props.stepMapping &&
-                                      this.props.stepMapping[this.props.step.id]
-                                        ?.selectedAuthId,
-                                    ...this.fieldDynamicData(el),
-                                  })}
-                                  onChange=${(selected: string) => {
-                                    setStepFieldData({
-                                      stepId: `${step.id}`,
-                                      fieldId: `${el.id}`,
-                                      value: selected,
-                                      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.stepWrap}>
-                                <${NewMappingUI}
-                                  stepId=${selectedStep.id}
-                                  templateFields=${selectedStep.template_fields}
-                                  showStepValidation=${showStepValidation}
-                                ><//>
-                              </div>
-                            `;
-                            case 'HTML':
-                            return html`
-                              <div
-                                dangerouslySetInnerHTML=${{
-                                  __html: el.default_value,
-                                }}
-                              />
-                            `;
-                          default:
-                            return html` <div
-                              class=${`${styles.stepWrap} ${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.stepWrap}>
-                        <${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<StepPropsType, StepStateType, StoreType, unknown>(
-  [
-    'stepState',
-    'stepMapping',
-    'stepDataMapping',
-    'parentChildMapping',
-    'fieldListMapping',
-    'conditionalFieldMapping',
-  ],
-  actionFunctions,
-)(Step);