@integry/sdk 4.7.39 → 4.7.41

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

@@ -1,1140 +0,0 @@
-/* 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;
-  flowType?: 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 = this.props?.flowType !== 'ON_DEMAND';
-                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);