@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,827 @@
+/* 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);