@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,1139 @@
+/* eslint-disable no-nested-ternary */
+import { html, Component } from 'htm/preact';
+import { connect } from 'unistore/preact';
+import {
+  IntegrationSaveResponse,
+  TemplateField,
+  TemplateStep,
+} from '@/interfaces';
+import { Button, ButtonTypes } from '@/components/Button';
+import { StoreType } from '@/types/store';
+import AuthSelector from '@/features/common/AuthSelector';
+import AuthSelectorCompact from '@/features/common/AuthSelectorCompact';
+import AppContext from '@/contexts/AppContext';
+import Step from '@/features/common/Step';
+import ActionForm from '@/features/common/ActionForm';
+import { actionFunctions } from '@/store';
+import { InfoBox } from '@/components/InfoBox';
+import { TextArea } from '@/components/TextArea';
+import { Tag } from '@/components/Tag';
+import { notEmpty } from '@/types/utils';
+import { ViewStyles } from '@/types';
+import {
+  extractTagsFromStepDataMapping,
+  createMappedObject,
+  getIntegryObject,
+} from '@/utils/objectUtils';
+
+import styles from './styles.module.scss';
+
+export type StepsPropsType = {
+  onUpdate?(integrationDate: IntegrationSaveResponse): void;
+  stepsClassName?: {
+    bottom?: string;
+  };
+  skipAuth?: boolean;
+  onBackClick?: () => void;
+  submitButtonText?: string;
+  hideStepCount?: boolean;
+  editMode?: boolean;
+  deploymentId?: number | string;
+  isInModal?: boolean;
+  stepContainerStyle?: string;
+} & StoreType;
+
+type Parameter = {
+  id: number;
+  machine_name: string;
+  title: string;
+  is_required: boolean;
+  data_type: string;
+  default_value: string;
+  fields: any[];
+};
+
+type IntegrationPayload = {
+  name: string;
+  notification_email: string;
+  template: number;
+  bundle_id: number;
+  bundle_instance_id?: string;
+  steps: {
+    id: number;
+    authorization: number | null;
+    template_step: number;
+    app_user_data: {
+      id: number;
+      value: string | null;
+      template_field: number;
+    }[];
+  }[];
+  parameters: Record<string, string>;
+};
+
+interface PostSaveDataArray {
+  postSave: boolean;
+  sendWebhookURLInEvent: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  postSaveData: any;
+  templateStepId: number;
+  activityId: number;
+  stepName: string;
+}
+
+type StepsStateType = {
+  selectedAuthStep: number | null;
+  loading: boolean;
+  payload: IntegrationPayload | null;
+  postSave: boolean;
+  postSaveData: Record<string, string | number | boolean> | null;
+  postSaveDataArray: PostSaveDataArray[] | null;
+  integrationData: IntegrationSaveResponse | null;
+};
+
+class Steps extends Component<
+  StepsPropsType,
+  StepsStateType & Record<string, unknown>
+> {
+  static contextType = AppContext;
+
+  constructor(props: StepsPropsType) {
+    super(props);
+    this.state = {
+      loading: false,
+      selectedAuthStep: null,
+      payload: null,
+      postSave: false,
+      postSaveData: null,
+      postSaveDataArray: null,
+      integrationData: null,
+      sendWebhookURLInEvent: false,
+    };
+  }
+
+  componentDidMount() {
+    const { stepState: newStepState } = this.props;
+    this.context.eventEmitter.emit('did-change-step', {
+      stepId: newStepState.steps[newStepState.stepIndex]?.stepId ?? null,
+      stepType:
+        newStepState.steps[newStepState.stepIndex]?.type ?? 'CONFIRMATION',
+    });
+  }
+
+  componentDidUpdate(prevProps: StepsPropsType) {
+    const { stepState: prevStepState } = prevProps;
+    const { stepState: newStepState } = this.props;
+    if (prevStepState.stepIndex !== newStepState.stepIndex)
+      this.context.eventEmitter.emit('did-change-step', {
+        stepId: newStepState.steps[newStepState.stepIndex]?.stepId ?? null,
+        stepType:
+          newStepState.steps[newStepState.stepIndex]?.type ?? 'CONFIRMATION',
+      });
+  }
+
+  private getMappingPayload = (stepId: number, data: TemplateField[]) => {
+    const { stepDataMapping } = this.props;
+    // if old mapping, return A, else B
+    let mappingPayload = null;
+
+    const sectionFields = data.reduce(
+      (acc: any[], el) =>
+        el.type === 'SECTION' ? acc.concat(el.template_fields) : acc,
+      [],
+    );
+    const dataFiltered = data
+      .filter((el) => el.type !== 'SECTION')
+      .concat(sectionFields);
+
+    if (this.props.mappingInfo?.isNewMapping) {
+      //
+      const standardFieldsOutsideMapping = data.filter(
+        (el) =>
+          !el.added_in_mapping && el.activity_field?.type !== 'FIELD_MAPPING',
+      );
+      const standardFieldsInsideMapping = data.filter(
+        (el) =>
+          el.added_in_mapping && el.activity_field?.type !== 'FIELD_MAPPING',
+      );
+      const mappingField = data.filter(
+        (el) => el.activity_field?.type === 'FIELD_MAPPING',
+      )[0];
+
+      const payloadForNormalFields = standardFieldsOutsideMapping.map(
+        (field) => ({
+          id: stepDataMapping[stepId][field.id].integrationFieldId || field.id,
+          value: stepDataMapping[stepId][field.id].value,
+          template_field: field.id,
+        }),
+      );
+
+      if (mappingField) {
+        const normalFieldsInsideMappingObj = standardFieldsInsideMapping.reduce(
+          (prev, next) => ({
+            ...prev,
+            [next.activity_field?.machine_name ?? '']: stepDataMapping[stepId][
+              next.id
+            ].value,
+          }),
+          {},
+        );
+        const parsedField =
+          stepDataMapping[stepId][mappingField.id].objectValue;
+
+        mappingPayload = {
+          id: Number(
+            stepDataMapping[stepId][mappingField.id].integrationFieldId,
+          ),
+          template_field: mappingField.id,
+          value: JSON.stringify({
+            ...normalFieldsInsideMappingObj,
+            ...{
+              [this.props.mappingInfo.customFieldsKey || '']: parsedField,
+            },
+          }),
+        };
+      }
+
+      const finalPayload = [...payloadForNormalFields];
+
+      if (mappingPayload) {
+        finalPayload.push(mappingPayload);
+      }
+
+      // "mapping": { // field mapper machine name
+      //   "merged_fields": {
+      //     "mc_email_type": "{sib_trigger.out.attribute.email_type}"
+      //   },
+      //   "mc_email": "{sib_trigger.out.email}"
+      // }
+
+      return finalPayload;
+    }
+    return dataFiltered.map((field) => ({
+      id: stepDataMapping[stepId][field.id].integrationFieldId || field.id,
+      value:
+        (stepDataMapping[stepId][field.id].value ||
+          stepDataMapping[stepId][field.id].value === '') &&
+        !stepDataMapping[stepId][field.id].objectValue
+          ? `${stepDataMapping[stepId][field.id].value}`
+              .replace(/\u200b/g, '') //  replace zerowidthspaces caused by the tagify implementation.
+              .replace(/\u00A0/g, '')
+          : JSON.stringify(stepDataMapping[stepId][field.id].objectValue)
+              .replace(/\u200b/g, '')
+              .replace(/\u00A0/g, ''),
+      template_field: field.id,
+    }));
+  };
+
+  private updateParams = (
+    parameters: Parameter[],
+    updates: Record<string, string>,
+  ): Record<string, string> =>
+    parameters.reduce(
+      (acc, param) => ({
+        ...acc,
+        [param.machine_name]:
+          updates[param.machine_name] ?? param.default_value,
+      }),
+      {},
+    );
+
+  private getPayload = () => {
+    const { stepMapping } = this.props;
+    if (this.context.isPreviewMode) {
+      return null;
+    }
+    let payload: IntegrationPayload = {
+      name: this.props.genericData.name ?? 'My new flow',
+      notification_email: '',
+      template: Number(this.props.genericData.templateId),
+      bundle_id: Number(
+        this.props.deploymentId || this.props.genericData.deploymentId || -1,
+      ),
+      steps: Object.keys(stepMapping).map((el) => ({
+        id: stepMapping[el].integrationStepId || stepMapping[el].step.id,
+        authorization: Number(stepMapping[el].selectedAuthId) || null,
+        template_step: stepMapping[el].step.id,
+        app_user_data: this.getMappingPayload(
+          stepMapping[el].step.id,
+          stepMapping[el].step.template_fields,
+        ),
+      })),
+      parameters: this.updateParams(
+        this.props.genericData.flowParameters ?? {},
+        this.props.genericData.flowParametersData ?? {},
+      ),
+    };
+    if (this.props.integrationIdToEdit) {
+      payload = { ...payload, ...{ bundle_instance_id: 'false' } };
+    }
+    this.setState({ loading: true, payload });
+    return payload;
+  };
+
+  private createIntegration = () => {
+    const payload = this.getPayload();
+    if (payload)
+      this.context.apiHandler
+        .saveIntegration(payload)
+        .then((integration: IntegrationSaveResponse) => {
+          this.postSaveOrCreate(integration);
+        })
+        .catch((err: unknown) => console.error(err));
+  };
+
+  private postSaveOrCreate = (integration: IntegrationSaveResponse) => {
+    const returnedSteps = integration.steps.filter((el) => !!el.returned_data);
+    if (returnedSteps && returnedSteps.length > 0) {
+      let tempPostSave = false;
+      let tempSendWebhookURLInEvent = false;
+      let tempPostSaveData = null;
+      const tempPostSaveDataArray: PostSaveDataArray[] = [];
+      returnedSteps.forEach((returnedStep) => {
+        if (returnedStep && returnedStep.returned_data) {
+          try {
+            const parsedData = JSON.parse(returnedStep.returned_data);
+            if (parsedData.is_webhook_url && parsedData.endpoint) {
+              if (this.props.userConfig?.hideWebhookUrlScreen) {
+                tempPostSave = false;
+                tempSendWebhookURLInEvent = true;
+                tempPostSaveData = parsedData;
+              } else if (
+                Object.prototype.hasOwnProperty.call(
+                  parsedData,
+                  'user_experience',
+                )
+              ) {
+                if (parsedData.user_experience === 'SHOW_TO_USER') {
+                  tempPostSave = true;
+                  tempSendWebhookURLInEvent = true;
+                  tempPostSaveData = parsedData;
+                } else if (parsedData.user_experience === 'RETURN_VIA_SDK') {
+                  tempPostSave = false;
+                  tempSendWebhookURLInEvent = true;
+                  tempPostSaveData = parsedData;
+                } else {
+                  tempPostSave = false;
+                  tempSendWebhookURLInEvent = false;
+                  tempPostSaveData = parsedData;
+                }
+              } else {
+                tempPostSave = true;
+                tempSendWebhookURLInEvent = true;
+                tempPostSaveData = parsedData;
+              }
+              tempPostSaveDataArray.push({
+                postSave: tempPostSave,
+                sendWebhookURLInEvent: tempSendWebhookURLInEvent,
+                postSaveData: tempPostSaveData,
+                templateStepId: returnedStep.template_step,
+                activityId: returnedStep.activity_id,
+                stepName: returnedStep.step_name,
+              });
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+      });
+      const anyWebhookStepIndex = tempPostSaveDataArray.findIndex(
+        (obj) => obj.postSave,
+      );
+      if (anyWebhookStepIndex <= -1) {
+        this.setState(
+          {
+            postSave: false,
+            integrationData: integration,
+            postSaveDataArray: tempPostSaveDataArray,
+          },
+          () => {
+            this.dismiss();
+          },
+        );
+      } else {
+        this.setState({
+          postSave: true,
+          integrationData: integration,
+          postSaveDataArray: tempPostSaveDataArray,
+        });
+      }
+    } else {
+      this.setState(
+        {
+          postSave: false,
+          integrationData: integration,
+          postSaveDataArray: null,
+        },
+        () => {
+          this.dismiss();
+        },
+      );
+    }
+    this.setState({ loading: false });
+  };
+
+  private updateIntegration = () => {
+    const { integrations, integrationIdToEdit, genericData } = this.props;
+    const { currentIntegrationStatus } = genericData;
+    const payload = this.getPayload();
+    const isIntegrationActive =
+      integrations.find(
+        (eachIntg) => Number(eachIntg.id) === Number(integrationIdToEdit),
+      )?.status === 'ACTIVE' || currentIntegrationStatus === 'ACTIVE';
+    if (payload) {
+      this.context.apiHandler
+        .updateIntegration(
+          this.props.integrationIdToEdit,
+          isIntegrationActive,
+          {
+            ...payload,
+            id: `${this.props.integrationIdToEdit}`,
+          },
+        )
+        .then((integration: IntegrationSaveResponse) => {
+          this.postSaveOrCreate(integration);
+        })
+        .catch((err: unknown) => console.error(err));
+    }
+  };
+
+  private getAuthorizationsData = (): {
+    authorizationId: unknown;
+    userIdentity: string;
+    isBrandingAppAuth: unknown;
+  }[] => {
+    const { stepMapping } = this.props;
+    const auths = Object.keys(stepMapping)
+      .map((stepId) => {
+        const step = stepMapping[stepId];
+        const auth = step.authorizations.filter(
+          (el) => el.authorizationId === step.selectedAuthId,
+        )[0];
+        if (auth) {
+          return {
+            authorizationId: stepMapping[stepId].selectedAuthId,
+            userIdentity: auth.userIdentity,
+            isBrandingAppAuth:
+              step.step.activity.app.id ===
+              this.props.genericData.brandingApp?.id,
+          };
+        }
+        return null;
+      })
+      .filter(notEmpty);
+    return auths;
+  };
+
+  private getCallBackURL = () => {
+    const { postSaveDataArray } = this.state;
+    if (postSaveDataArray && postSaveDataArray.length > 0) {
+      if (postSaveDataArray[0].sendWebhookURLInEvent) {
+        return postSaveDataArray[0].postSaveData.endpoint;
+      }
+    }
+    return null;
+  };
+
+  private getCallBackURLArray = () => {
+    const { postSaveDataArray } = this.state;
+    if (postSaveDataArray && postSaveDataArray.length > 0) {
+      const tempURLArray = postSaveDataArray
+        .filter((tempData) => tempData.sendWebhookURLInEvent)
+        .map((tempData) => ({
+          templateStepId: tempData.templateStepId,
+          activityId: tempData.activityId,
+          callbackUrl: tempData.postSaveData.endpoint,
+        }));
+      if (tempURLArray.length > 0) {
+        return tempURLArray;
+      }
+    }
+    return null;
+  };
+
+  private dismiss = () => {
+    const { userConfig, onUpdate = () => null } = this.props;
+    const { integrationData } = this.state;
+    const triggerStep = this.props.genericData.stepWithActivityOutput;
+    const integryObject = getIntegryObject(triggerStep, this.props.userConfig);
+    const objectName = integryObject?.name || 'object';
+    const objectPayload = integryObject?.payload || {};
+    const tags = extractTagsFromStepDataMapping(this.props.stepDataMapping);
+    const mappedObject = createMappedObject(objectPayload, tags);
+
+    if (integrationData) {
+      onUpdate(integrationData);
+      this.props.resetTemplateFields();
+      this.props.setStoreState({
+        showSetupModal: false,
+        showSetupInline: false,
+        fetchingIntegrations: true,
+        activatedTab: userConfig?.autoRedirectToMyFlows ? 'tab-1' : '',
+        dFlag: new Date().toISOString(),
+        // activatedTab: userConfig?.autoRedirectToMyFlows ? 'tab-2' : '',
+      });
+      this.context.eventEmitter.emit('did-save-integration', {
+        integrationId: integrationData.id,
+        name: integrationData.name,
+        templateId: integrationData.template,
+        flowId: integrationData.template,
+        status: integrationData.status,
+        callbackUrl: this.getCallBackURL(),
+        callbackUrlArray: this.getCallBackURLArray(),
+        authorizations: this.getAuthorizationsData(),
+        steps: this.state.payload?.steps ?? [],
+        event: this.props.integrationIdToEdit ? 'EDIT' : 'CREATE',
+        object: objectPayload,
+        mappedObject: objectName
+          ? { [objectName]: mappedObject }
+          : mappedObject,
+        flowDescription: this.props.genericData.flowDescription,
+        flowName: this.props.genericData.name,
+        brandingApp: this.props.genericData.brandingApp,
+      });
+      this.context.eventEmitter.emit('integration-created', {
+        integrationId: integrationData.id,
+        name: integrationData.name,
+        templateId: integrationData.template,
+        flowId: integrationData.template,
+        status: integrationData.status,
+        callbackUrl: this.getCallBackURL(),
+        callbackUrlArray: this.getCallBackURLArray(),
+        authorizations: this.getAuthorizationsData(),
+        steps: this.state.payload?.steps ?? [],
+        event: this.props.integrationIdToEdit ? 'EDIT' : 'CREATE',
+        object: objectPayload,
+        mappedObject: objectName
+          ? { [objectName]: mappedObject }
+          : mappedObject,
+        flowDescription: this.props.genericData.flowDescription,
+        flowName: this.props.genericData.name,
+        brandingApp: this.props.genericData.brandingApp,
+      });
+    }
+  };
+
+  private handleClose = () => {
+    this.context.eventEmitter.emit('did-click-close-button', {
+      isCloseClicked: true,
+    });
+  };
+
+  private handleAuthSelected = (
+    authId: number,
+    stepId: number,
+    isVerified: boolean,
+    override: boolean,
+  ) => {
+    const { stepState } = this.props;
+    const { currentStep } = stepState;
+    const dependentSteps = this.props.stepMapping[stepId].step.template_fields
+      .filter((el) => el.activity_field && el.activity_field.is_dynamic)
+      .map((el) => el.id);
+    // reset all dynamic steps if auth changes
+    this.props.setStepAuthorization(
+      stepId,
+      authId,
+      isVerified,
+      dependentSteps,
+      override,
+    );
+    const isMainApp =
+      this.props.stepMapping[stepId].step.activity.app.id ===
+      (this.props.genericData.app_id || -1);
+
+    const isSelfApp =
+      this.props.stepMapping[stepId].step.authorization_type.app.id ===
+      (this.props.genericData.selfAppId || -1);
+    const visibleFields = this.props.stepMapping[
+      stepId
+    ].step.template_fields.filter((field: any) => field.is_visible === true);
+
+    if (
+      this.props.skipAuth &&
+      currentStep?.type === 'AUTH' &&
+      isMainApp &&
+      isVerified &&
+      visibleFields.length === 0
+    ) {
+      this.props.gotoNextStep();
+    }
+    if (isSelfApp && currentStep?.type === 'AUTH' && isVerified) {
+      //  this.props.gotoNextStep();
+    }
+  };
+
+  private showChangedTag = (currentStepId: number) => {
+    let isStepChanged = false;
+    const { stepDataMapping } = this.props;
+    if (Object.keys(stepDataMapping).length > 0) {
+      if (stepDataMapping[currentStepId]) {
+        // eslint-disable-next-line consistent-return
+        Object.keys(stepDataMapping[currentStepId]).forEach((stepFieldId) => {
+          const selectStepField =
+            stepDataMapping[currentStepId][Number(stepFieldId)];
+          if (
+            selectStepField.type !== 'HIDDEN' &&
+            selectStepField.isChanged === true
+          ) {
+            isStepChanged = true;
+            return isStepChanged;
+            // eslint-disable-next-line no-else-return
+          } else if (
+            selectStepField.type === 'DYNAMIC' &&
+            selectStepField.changedDynamicFields &&
+            selectStepField.changedDynamicFields.length > 0
+          ) {
+            isStepChanged = true;
+            return isStepChanged;
+          }
+        });
+      }
+    }
+    return isStepChanged;
+  };
+
+  render() {
+    let selectedStep: {
+      step: TemplateStep;
+      selectedAuthId: number | null;
+      isAuthVerified?: any | true;
+      authorizations?: any;
+    } | null = null;
+    const { stepState, stepMapping, isInModal = false } = this.props;
+    const { postSave } = this.state;
+    const { currentStep, stepIndex, steps } = stepState;
+    const isReadOnly = this.context?.isReadOnly;
+    let shouldShowLastStep = false;
+    let shouldShowBackButton = false;
+    let isStepValid = false;
+    let showStepValidation = false;
+    let tooltip = '';
+    let forceShowLastPage = false;
+    if (steps.length === 0) {
+      shouldShowBackButton = true;
+      shouldShowLastStep = true;
+      forceShowLastPage = true;
+    } else if (stepIndex > -1 && currentStep?.type !== 'CONFIRMATION') {
+      selectedStep = stepMapping[Number(currentStep?.stepId)];
+      shouldShowLastStep = false;
+      shouldShowBackButton = stepState.stepIndex > 0;
+      isStepValid =
+        (currentStep?.isValid && selectedStep?.isAuthVerified) ?? false;
+      showStepValidation = stepState.showValidation;
+      if (
+        selectedStep?.isAuthVerified === false ||
+        (selectedStep.step.activity.auth_required &&
+          selectedStep.authorizations.length === 0)
+      ) {
+        tooltip =
+          selectedStep.step.authorization_type.type !== 'NO_AUTH'
+            ? 'Please connect an account to proceed'
+            : '';
+      } else if (!currentStep?.isValid) {
+        tooltip = 'Please fill all required fields to proceed';
+      }
+    } else if (
+      currentStep?.type === 'CONFIRMATION' &&
+      stepIndex === steps.length
+    ) {
+      shouldShowBackButton = true;
+      shouldShowLastStep = true;
+    }
+    return html`
+      <div
+        id="stepsWrap"
+        class="${styles.stepsWrap} ${'integry-steps-container'}"
+      >
+        <div
+          id="stepContainer"
+          class="${styles.stepContainer}"
+          style="${!isInModal &&
+          this.props.genericData.viewStyle === ViewStyles.COMPACT
+            ? 'margin: 0px;padding: 0 24px;'
+            : ''}${this.props.stepContainerStyle || ''}${this.props.genericData
+            .viewStyle === ViewStyles.COMPACT && isInModal
+            ? ''
+            : ''}"
+        >
+          ${this.props.genericData.isPreviewMode &&
+          this.props.stepState.currentStep?.type === 'AUTH' &&
+          html`
+            <${InfoBox} style=${{ marginBottom: 30 }}>
+              The auth step is always shown in preview mode and will be hidden
+              when implicit auth is configured on your deployment. Learn more
+              ${' '}<a
+                href="https://support.integry.io/hc/en-us/articles/360049619874-Single-Sign-On-SSO-with-Integration-Marketplace#implementingssoforintegrationmarketplaceinyourapplication"
+                target="_blank"
+                >here</a
+              >.
+            </${InfoBox}>
+          `}
+          <div
+            id="stepInfo"
+            class="${this.props.genericData.viewStyle === ViewStyles.COMPACT
+              ? styles.stepInfoCompact
+              : styles.stepInfo} ${'integry-steps-information'} ${this.props
+              .genericData.app_id
+              ? styles.appFlowStepInfo
+              : ''}"
+          >
+            ${(currentStep || forceShowLastPage) &&
+            html`
+              ${shouldShowLastStep
+                ? html`
+                    <div class=${styles.header}>
+                      <div class=${styles.name}>
+                        <svg
+                          width="25"
+                          height="25"
+                          viewBox="0 0 25 25"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <circle
+                            cx="12.5"
+                            cy="12.5"
+                            r="11.75"
+                            fill="white"
+                            stroke="#2ECC71"
+                            stroke-width="1.5"
+                          />
+                          <path
+                            d="M17.2209 9.16699L11.3907 15.8337L8.33203 12.3361"
+                            stroke="#2ECC71"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                          />
+                        </svg>
+                        <div>
+                          ${postSave &&
+                          !this.props.userConfig?.hideWebhookUrlScreen
+                            ? `Flow ${
+                                this.context?.integrationId
+                                  ? 'updated'
+                                  : 'created'
+                              } successfully`
+                            : 'Confirm and activate'}
+                        </div>
+                      </div>
+                      ${this.props.hideStepCount
+                        ? null
+                        : html` <div class=${styles.steps}>
+                            ${`Step ${
+                              (this.props.stepState?.stepIndex ?? 0) + 1
+                            } / ${
+                              (this.props.stepState?.steps.length ?? 0) + 1
+                            }`}
+                          </div>`}
+                    </div>
+                  `
+                : currentStep?.type === 'AUTH' &&
+                  this.props.stepMapping[Number(selectedStep?.step.id)].step
+                    .activity.app.id ===
+                    (this.props.genericData.app_id || -1) &&
+                  this.props.skipAuth
+                ? null
+                : html`
+                    <div class=${styles.header}>
+                      <div class=${styles.name}>
+                        <img
+                          src=${selectedStep?.step.authorization_type.app
+                            .icon_url ||
+                          selectedStep?.step.activity.app.icon_url}
+                        />
+                        <div class=${styles.textDiv}>
+                          ${currentStep?.type !== 'CONFIRMATION' &&
+                          currentStep?.title}
+                          ${isReadOnly &&
+                          currentStep?.type === 'CONFIGURATION' &&
+                          this.showChangedTag(Number(selectedStep?.step?.id)) &&
+                          html`<${Tag} label="Changed" />`}
+                        </div>
+                      </div>
+                      ${this.props.hideStepCount
+                        ? null
+                        : html` <div class=${styles.steps}>
+                            ${`Step ${
+                              (this.props.stepState?.stepIndex ?? 0) + 1
+                            } / ${
+                              isReadOnly
+                                ? this.props.stepState?.steps.length ?? 0
+                                : (this.props.stepState?.steps.length ?? 0) + 1
+                            }`}
+                          </div>`}
+                    </div>
+                    ${currentStep?.type !== 'CONFIRMATION' &&
+                    (currentStep?.description || '') !== '' &&
+                    html`
+                      <div class=${styles.header}>
+                        <div class=${styles.description}>
+                          ${currentStep?.description}
+                        </div>
+                      </div>
+                    `}
+                  `}
+            `}
+          </div>
+          <div
+            class="${this.props.genericData.viewStyle === ViewStyles.COMPACT
+              ? styles.topCompact
+              : styles.top} ${this.props.genericData.viewStyle ===
+            ViewStyles.COMPACT
+              ? styles.integryScrollbar
+              : ''}"
+            style="${this.props.genericData.testMultipurpose
+              ? 'padding: 0px;'
+              : ''}${isInModal &&
+            this.props.genericData.viewStyle === ViewStyles.COMPACT
+              ? 'overflow-y: auto;width: calc(100% + 10px);padding-right: 5px;max-width: none;'
+              : ''}"
+          >
+            ${currentStep || forceShowLastPage
+              ? html`
+                  ${shouldShowLastStep
+                    ? html`
+                        ${postSave &&
+                        !this.props.userConfig?.hideWebhookUrlScreen
+                          ? html`
+                              <div class=${styles.postSave}>
+                                ${this.state.postSaveDataArray &&
+                                this.state.postSaveDataArray.length > 0 &&
+                                html`
+                                  ${this.state.postSaveDataArray
+                                    .filter((data) => data.postSave)
+                                    .map(
+                                      (data) => html`
+                                        <div
+                                          key=${`key_${data.templateStepId}`}
+                                          class="${styles.webhookFieldWrap}"
+                                        >
+                                          <${TextArea}
+                                            title="${data.stepName}"
+                                            description="Please use the following webhook url to send data"
+                                            value=${data.postSaveData.endpoint}
+                                            showCopyButton=${true}
+                                          />
+                                        </div>
+                                      `,
+                                    )}
+                                `}
+                              </div>
+                            `
+                          : html`
+                              <div class=${styles.save}>
+                                ${this.props.genericData.isAnonymous
+                                  ? html`The integration cannot be enabled
+                                    because the marketplace owner hasn't
+                                    configured authorization. If you are the
+                                    owner, you can set up authorization in
+                                    Marketplace settings.`
+                                  : html` ${this.props.integrationIdToEdit
+                                      ? `Your integration is ready to be updated. Click “${
+                                          this.props.userConfig
+                                            ?.buttonLabelToSaveIntegration ||
+                                          'Update'
+                                        }” to continue.`
+                                      : `Your integration is ready to be enabled. Click “${
+                                          this.props.userConfig
+                                            ?.buttonLabelToSaveIntegration ||
+                                          'Save'
+                                        }” to continue.`}`}
+                              </div>
+                            `}
+                      `
+                    : html`
+                        ${selectedStep &&
+                        html`
+                          ${currentStep?.type === 'AUTH'
+                            ? html`
+                                <div class=${styles.authWrap}>
+                                  <${this.props.genericData.testMultipurpose
+                                    ? AuthSelectorCompact
+                                    : AuthSelector}
+                                    stepId=${selectedStep.step.id}
+                                    key=${selectedStep.step.id}
+                                    apiHandler=${this.context.apiHandler}
+                                    showErrors=${showStepValidation}
+                                    forcedLoading=${this.props.skipAuth &&
+                                    this.props.stepMapping[
+                                      Number(selectedStep?.step.id)
+                                    ].step.activity.app.id ===
+                                      (this.props.genericData.app_id || -1)}
+                                    onAuthSelected=${(
+                                      authId: number,
+                                      isVerified: boolean,
+                                      override: boolean,
+                                    ) =>
+                                      this.handleAuthSelected(
+                                        authId,
+                                        Number(selectedStep?.step.id),
+                                        isVerified,
+                                        override,
+                                      )}
+                                    isReadOnly=${this.props.editMode}
+                                  >
+                                  <//>
+                                </div>
+                              `
+                            : html`
+                                <${this.props.genericData.testMultipurpose
+                                  ? ActionForm
+                                  : Step}
+                                  step=${selectedStep?.step}
+                                  stepType=${currentStep?.type}
+                                  showStepValidation=${showStepValidation}
+                                  apiHandler=${this.context.apiHandler}
+                                  eventEmitter=${this.context.eventEmitter}
+                                  isReadOnly=${this.context?.isReadOnly}
+                                />
+                              `}
+                        `}
+                      `}
+                `
+              : html`This flow has no configured steps`}
+          </div>
+          ${currentStep &&
+          this.props.genericData.viewStyle === ViewStyles.COMPACT &&
+          html`
+            <div
+              id="${this.props.genericData.viewStyle === ViewStyles.COMPACT
+                ? 'stepsBottom'
+                : 'stepsBottomComfortable'}"
+              style="${this.props.genericData.viewStyle ===
+                ViewStyles.COMPACT && !isInModal
+                ? 'padding-bottom: 16px;'
+                : ''}"
+              class=${`${
+                this.props.genericData.viewStyle === ViewStyles.COMPACT
+                  ? styles.bottomCompact
+                  : styles.bottom
+              } ${this.props.stepsClassName?.bottom || ''}`}
+            >
+              <div
+                class=${this.props.genericData.viewStyle === ViewStyles.COMPACT
+                  ? styles.buttonsCompact
+                  : styles.buttons}
+              >
+                ${!this.props.genericData.testMultipurpose &&
+                shouldShowBackButton &&
+                !postSave &&
+                html`
+                  <${Button}
+                    label="Back"
+                    onClick=${() => {
+                      const currentSelectedStep = this.props.stepState?.steps[
+                        this.props.stepState?.stepIndex - 1
+                      ];
+                      if (
+                        this.props.skipAuth &&
+                        currentSelectedStep.type === 'AUTH' &&
+                        this.props.onBackClick
+                      ) {
+                        let isDifferntApp = false;
+                        if (
+                          this.props.stepMapping[
+                            Number(currentSelectedStep.stepId)
+                          ].step.activity.app.id !==
+                          (this.props.genericData.app_id || -1)
+                        ) {
+                          isDifferntApp = true;
+                        }
+                        if (isDifferntApp) {
+                          this.props.gotoPreviousStep();
+                        } else {
+                          this.props.onBackClick();
+                        }
+                      } else {
+                        this.props.gotoPreviousStep();
+                      }
+                    }}
+                    type=${ButtonTypes.SECONDARY}
+                  ><//>
+                `}
+                ${shouldShowLastStep
+                  ? html`
+                      ${!postSave
+                        ? html`
+                            ${this.props.integrationIdToEdit
+                              ? html`
+                                  <${Button}
+                                    label=${this.props.submitButtonText ||
+                                    this.props.userConfig
+                                      ?.buttonLabelToSaveIntegration ||
+                                    'Update'}
+                                    disabled=${this.context.isPreviewMode ||
+                                    this.state.loading}
+                                    isLoading=${this.state.loading}
+                                    onClick=${() => this.updateIntegration()}
+                                  ><//>
+                                `
+                              : html`
+                                  <${Button}
+                                    label=${this.props.submitButtonText ||
+                                    this.props.userConfig
+                                      ?.buttonLabelToSaveIntegration ||
+                                    'Save'}
+                                    disabled=${this.context.isPreviewMode ||
+                                    this.props.genericData.isAnonymous ||
+                                    this.state.loading}
+                                    tooltip=${this.context.isPreviewMode
+                                      ? 'Since this is just a preview, integration\nsetup will have to be done in "Live View"'
+                                      : null}
+                                    isLoading=${this.state.loading}
+                                    onClick=${() => this.createIntegration()}
+                                  ><//>
+                                `}
+                          `
+                        : html`
+                            <${Button}
+                              label="Continue"
+                              onClick=${() => this.dismiss()}
+                            ><//>
+                          `}
+                    `
+                  : html` ${isReadOnly && stepIndex === steps.length - 1
+                      ? html`<${Button}
+                          label="Close"
+                          disabled=${this.context.isPreviewMode ||
+                          this.state.loading}
+                          isLoading=${this.state.loading}
+                          onClick=${() => this.handleClose()}
+                        ><//>`
+                      : html`<${Button}
+                          label="Next"
+                          hasError=${!isReadOnly && !isStepValid}
+                          tooltip=${tooltip}
+                          position="top-right-compact"
+                          onClick=${() =>
+                            isReadOnly || isStepValid
+                              ? this.props.gotoNextStep()
+                              : this.props.showStepValidationState()}
+                        ><//> `}`}
+              </div>
+            </div>
+          `}
+        </div>
+      </div>
+      ${(currentStep || forceShowLastPage) &&
+      this.props.genericData.viewStyle === ViewStyles.COMFORTABLE &&
+      html`
+        <div
+          id="${'stepsBottomComfortable'}"
+          class=${`${styles.bottom} ${this.props.stepsClassName?.bottom || ''}`}
+        >
+          <div class=${styles.buttons}>
+            ${!this.props.genericData.testMultipurpose &&
+            shouldShowBackButton &&
+            !postSave &&
+            html`
+              <${Button}
+                label="Back"
+                onClick=${() => {
+                  const currentSelectedStep = this.props.stepState?.steps[
+                    this.props.stepState?.stepIndex - 1
+                  ];
+                  if (
+                    this.props.skipAuth &&
+                    currentSelectedStep.type === 'AUTH' &&
+                    this.props.onBackClick
+                  ) {
+                    let isDifferntApp = false;
+                    if (
+                      this.props.stepMapping[Number(currentSelectedStep.stepId)]
+                        .step.activity.app.id !==
+                      (this.props.genericData.app_id || -1)
+                    ) {
+                      isDifferntApp = true;
+                    }
+                    if (isDifferntApp) {
+                      this.props.gotoPreviousStep();
+                    } else {
+                      this.props.onBackClick();
+                    }
+                  } else {
+                    this.props.gotoPreviousStep();
+                  }
+                }}
+                type=${ButtonTypes.SECONDARY}
+              ><//>
+            `}
+            ${shouldShowLastStep
+              ? html`
+                  ${!postSave
+                    ? html`
+                        ${this.props.integrationIdToEdit
+                          ? html`
+                              <${Button}
+                                label=${this.props.submitButtonText ||
+                                this.props.userConfig
+                                  ?.buttonLabelToSaveIntegration ||
+                                'Update'}
+                                disabled=${this.context.isPreviewMode ||
+                                this.state.loading}
+                                isLoading=${this.state.loading}
+                                onClick=${() => this.updateIntegration()}
+                              ><//>
+                            `
+                          : html`
+                              <${Button}
+                                label=${this.props.submitButtonText ||
+                                this.props.userConfig
+                                  ?.buttonLabelToSaveIntegration ||
+                                'Save'}
+                                disabled=${this.context.isPreviewMode ||
+                                this.props.genericData.isAnonymous ||
+                                this.state.loading}
+                                tooltip=${this.context.isPreviewMode
+                                  ? 'Since this is just a preview, integration\nsetup will have to be done in "Live View"'
+                                  : null}
+                                isLoading=${this.state.loading}
+                                onClick=${() => this.createIntegration()}
+                              ><//>
+                            `}
+                      `
+                    : html`
+                        <${Button}
+                          label="Continue"
+                          onClick=${() => this.dismiss()}
+                        ><//>
+                      `}
+                `
+              : html` ${isReadOnly && stepIndex === steps.length - 1
+                  ? html`<${Button}
+                      label="Close"
+                      disabled=${this.context.isPreviewMode ||
+                      this.state.loading}
+                      isLoading=${this.state.loading}
+                      onClick=${() => this.handleClose()}
+                    ><//>`
+                  : html`<${Button}
+                      label="Next"
+                      hasError=${!isReadOnly && !isStepValid}
+                      tooltip=${tooltip}
+                      position="top-right"
+                      onClick=${() =>
+                        isReadOnly || isStepValid
+                          ? this.props.gotoNextStep()
+                          : this.props.showStepValidationState()}
+                    ><//> `}`}
+          </div>
+        </div>
+      `}
+    `;
+  }
+}
+
+export default connect<StepsPropsType, StepsStateType, StoreType, unknown>(
+  [
+    'stepState',
+    'userConfig',
+    'mappingInfo',
+    'genericData',
+    'stepMapping',
+    'stepDataMapping',
+    'integrationIdToEdit',
+    'integrations',
+  ],
+  actionFunctions,
+)(Steps);