@integry/sdk 4.5.2 → 4.5.4

package/src/features/containers/AppFlowContainer/AppFlowWrap/index.tsx

@@ -0,0 +1,1081 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-use-before-define */
+/* eslint-disable no-nested-ternary */
+import { html } from 'htm/preact';
+import {
+  useEffect,
+  useContext,
+  useState,
+  useCallback,
+  useRef,
+} from 'preact/hooks';
+import { connect } from 'unistore/preact';
+import { Modal } from '@/components/Modal';
+import Footer from '@/components/Footer';
+import { actionFunctions } from '@/store';
+import FlowSetupContainer from '@/features/containers/FlowSetupContainer';
+import Authentication from '@/features/containers/AppFlowContainer/Authentication';
+import AppContext from '@/contexts/AppContext';
+import { StoreType } from '@/types/store';
+import {
+  BrandingApp,
+  UserConfig,
+  Flow,
+  TemplateStep,
+  Instance,
+  Integration,
+} from '@/interfaces';
+import { AuthData, isAuthMessage } from '@/utils/isAuthMessage';
+import { MarketplaceRenderModes, ViewStyles } from '@/types';
+import AppFlowListing from '../AppFlowListing';
+
+import styles from './styles.module.scss';
+import AppPageLoader from './app-page-loader';
+
+interface WraperrProps extends StoreType {
+  marketplaceId: string;
+  userConfig?: UserConfig;
+  renderMode?: MarketplaceRenderModes;
+  renderFlowSetupMode?: MarketplaceRenderModes;
+  onBackClick?: () => void;
+  isInModal?: boolean;
+}
+
+const RenderAppPage = (props: WraperrProps) => {
+  const [appData, setAppData] = useState<BrandingApp | null>(null);
+  const [isLoading, setIsloading] = useState<boolean>(false);
+  const [isReloadingFlowListing, setIsReloadingFlowListing] = useState<boolean>(
+    false,
+  );
+  const [selectedFlow, setSelectedFlow] = useState<{
+    flow: Flow;
+    instance: Instance | null;
+  } | null>(null);
+  const [appFlows, setAppFlows] = useState<Flow[] | []>([]);
+  const [skipAuth, setSkipAuth] = useState<boolean>(true);
+  const [accountVerified, setAccountVerified] = useState<boolean>(false);
+  const interval = useRef<null | ReturnType<typeof setTimeout>>(null);
+  // const [selectedAuthId, setSelectedAuthId] = useState<number>(0);
+  const context = useContext(AppContext);
+  const {
+    genericData,
+    renderMode,
+    renderFlowSetupMode,
+    isInModal = false,
+  } = props;
+  const { marketplaceId, app_id, keepBackButtonForFlows = false } = genericData;
+  let selectedAuthId = 0;
+
+  useEffect(() => {
+    setIsloading(true);
+    if (app_id) {
+      // eslint-disable-next-line no-use-before-define
+      getAppFlows();
+    }
+    return () => interval.current && clearInterval(interval.current);
+  }, [app_id]);
+
+  useEffect(() => {
+    if (app_id) {
+      context?.apiHandler.getAppInfo(app_id).then((data) => {
+        if (data) {
+          setAppData(data);
+          if (data.authorization_type) {
+            const { authorizations = [] } = data.authorization_type;
+            setSkipAuth(authorizations.length > 0);
+            emitDidAppLoadEvent(data);
+          }
+        } else {
+          console.error(`Failed to fetch app details`);
+        }
+      });
+    }
+  }, [app_id]);
+
+  const emitDidAppLoadEvent = useCallback((appInfo: BrandingApp) => {
+    if (appInfo && appInfo.authorization_type) {
+      const { authorizations = [] } = appInfo.authorization_type;
+      const currentAutObj =
+        authorizations.length > 0
+          ? authorizations[authorizations.length - 1]
+          : null;
+      context?.eventEmitter.emit('did-app-load', {
+        appName: appInfo.name,
+        appId: appInfo.id,
+        appLogoUrl: appInfo.icon_url,
+        authorizationId: currentAutObj?.id || null,
+      });
+    }
+  }, []);
+
+  const pollApiWithExponentialBackoff = (
+    remainingTime = 600000, // 10 mins
+    currentDelay = 1000,
+  ) => {
+    if (app_id && remainingTime > 0) {
+      const { userConfig } = props;
+      if (genericData.deploymentId && genericData.showTemplates) {
+        context?.apiHandler
+          .getAdminAppFlows({
+            appId: app_id,
+            bundleId: genericData.deploymentId,
+          })
+          .then((data) => {
+            if (data) {
+              setAppFlows(data.results);
+              interval.current = setTimeout(() => {
+                pollApiWithExponentialBackoff(
+                  remainingTime - currentDelay,
+                  currentDelay * 1.5,
+                );
+              }, currentDelay);
+            } else {
+              console.error(`Failed to fetch flows`);
+            }
+          });
+      } else {
+        const { tags = [] } = userConfig || {};
+        context?.apiHandler
+          .getAppFlows(app_id, tags, selectedAuthId)
+          .then((data) => {
+            if (data) {
+              setAppFlows(data.results);
+              interval.current = setTimeout(() => {
+                pollApiWithExponentialBackoff(
+                  remainingTime - currentDelay,
+                  currentDelay * 1.5,
+                );
+              }, currentDelay);
+            } else {
+              console.error(`Failed to fetch flows`);
+            }
+          });
+      }
+    }
+  };
+
+  const pollFlowStatus = (flows: Flow[]) => {
+    const shouldPoll = flows.some(
+      (flow) =>
+        flow.instances.length > 0 &&
+        flow.instances.some((instance) => instance.status === 'ACTIVE'),
+    );
+    if (shouldPoll) {
+      pollApiWithExponentialBackoff();
+    } else if (interval.current) {
+      clearInterval(interval.current);
+    }
+  };
+
+  const updateInstanceName = (
+    flowId: number,
+    instanceId: number,
+    name: string,
+  ) => {
+    const updatedInstances = appFlows.map((flow) => {
+      if (flow.id === flowId) {
+        const updatedFlow = {
+          ...flow,
+          instances: flow.instances.map((instance) => {
+            const updatedInstance = { ...instance };
+            if (instance.id === instanceId) {
+              updatedInstance.name = name;
+            }
+            return updatedInstance;
+          }),
+        };
+        return updatedFlow;
+      }
+      return flow;
+    });
+    setAppFlows(updatedInstances);
+  };
+
+  const handleDeleteInstance = (integration: Integration) => {
+    const {
+      id: integrationId,
+      name: integrationName,
+      template_detail,
+    } = integration;
+    props.setIntegrationLoadingState({
+      integrationId,
+      isLoading: true,
+      op: 'edit',
+    });
+    context?.apiHandler
+      .deleteIntegration(integrationId)
+      .then((res) => {
+        console.info(res);
+        props.setIntegrationLoadingState({
+          integrationId,
+          isLoading: false,
+          op: 'delete',
+        });
+        getAppFlows();
+
+        context?.eventEmitter.emit('did-delete-integration', {
+          flowId: template_detail.id,
+          flowName: template_detail.name,
+          flowDescription: template_detail.description,
+          integrationId,
+          integrationName,
+        });
+      })
+      .catch((err) => console.error(err));
+  };
+
+  const getAppFlows = (authId: any = null) => {
+    if (authId && selectedAuthId !== authId) {
+      setIsReloadingFlowListing(true);
+      selectedAuthId = authId;
+    }
+    if (interval.current) clearInterval(interval.current);
+    if (app_id) {
+      const { userConfig } = props;
+      if (genericData.deploymentId && genericData.showTemplates) {
+        context?.apiHandler
+          .getAdminAppFlows({
+            appId: app_id,
+            bundleId: genericData.deploymentId,
+          })
+          .then((data) => {
+            if (data) {
+              setAppFlows(data.results);
+              pollFlowStatus(data.results);
+              setIsloading(false);
+              setIsReloadingFlowListing(false);
+              context?.eventEmitter.emit('did-load-flows', {
+                flows: data.results,
+              });
+            } else {
+              console.error(`Failed to fetch flows`);
+            }
+          });
+      } else {
+        const { tags = [] } = userConfig || {};
+        context?.apiHandler.getAppFlows(app_id, tags, authId).then((data) => {
+          if (data) {
+            setAppFlows(data.results);
+            pollFlowStatus(data.results);
+            setIsloading(false);
+            setIsReloadingFlowListing(false);
+            context?.eventEmitter.emit('did-load-flows', {
+              flows: data.results,
+            });
+          } else {
+            console.error(`Failed to fetch flows`);
+          }
+        });
+      }
+    }
+  };
+
+  const emitAddAuthEvent = useCallback(
+    (messageEvent: MessageEvent<AuthData>) => {
+      if (isAuthMessage(messageEvent) && messageEvent.data.activity_name) {
+        const eventPayload = {
+          identity: messageEvent.data.user_identity,
+          authorizationId: Number(messageEvent.data.authorization_id),
+          flowId: null,
+          appId: messageEvent.data.app_id,
+          appName: appData?.name || '',
+          appIcon: appData?.icon_url || '',
+          alreadyExists: messageEvent.data.already_exists,
+          externalId: messageEvent.data.external_id,
+        };
+        context?.eventEmitter.emit('did-add-authorization', eventPayload);
+      }
+    },
+    [],
+  );
+
+  const emitDeleteAuthEvent = (authId: number, appId: number) => {
+    context?.eventEmitter.emit('did-remove-authorization', {
+      authorizationId: Number(authId),
+      appId,
+    });
+  };
+
+  const onFlowSelect = (flow: Flow, instance?: Instance) => {
+    setSelectedFlow({ flow, instance: instance || null });
+    if (!instance) {
+      props.setStoreState({
+        integrationIdToEdit: null,
+        showSetupModal: true,
+      });
+      props.setGenericData({
+        name: flow.name,
+      });
+    } else {
+      props.setStoreState({
+        integrationIdToEdit: instance.id,
+        showSetupModal: true,
+      });
+      props.setGenericData({
+        name: instance.name,
+      });
+    }
+    if (interval.current) {
+      clearInterval(interval.current);
+    }
+  };
+
+  const getSelectedStep = () => {
+    const { stepState, stepMapping } = props;
+    const { currentStep, stepIndex, steps } = stepState;
+    let selectedStep: {
+      step: TemplateStep;
+      selectedAuthId: number | null;
+    } | null = null;
+    let shouldShowLastStep = false;
+    let shouldShowBackButton = false;
+    let isStepValid = false;
+    let showStepValidation = false;
+    if (stepIndex > -1 && currentStep?.type !== 'CONFIRMATION') {
+      selectedStep = stepMapping[Number(currentStep?.stepId)];
+      shouldShowLastStep = false;
+      shouldShowBackButton = stepState.stepIndex > 0;
+      isStepValid = currentStep?.isValid ?? false;
+      showStepValidation = stepState.showValidation;
+    } else if (
+      currentStep?.type === 'CONFIRMATION' &&
+      stepIndex === steps.length
+    ) {
+      shouldShowBackButton = true;
+      shouldShowLastStep = true;
+    }
+    return {
+      selectedStep,
+      isStepValid,
+      showStepValidation,
+      shouldShowBackButton,
+      shouldShowLastStep,
+    };
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const getSelectedStepApp = (step: any): any => {
+    if (step && step.authorization_type) {
+      return {
+        id: step.authorization_type.app.id,
+        name: step.authorization_type.app.name,
+        icon_url: step.authorization_type.app.icon_url,
+        authorization_type: step.authorization_type,
+      };
+    }
+    return null;
+  };
+
+  const getStepAuthorizations = (authorizations: any) => {
+    const updateAuthorizations: any = [];
+    authorizations.forEach((auth: any) => {
+      updateAuthorizations.push({
+        id: auth.authorizationId,
+        user_identity: auth.userIdentity,
+      });
+    });
+    return updateAuthorizations;
+  };
+
+  const handleAuthSelected = (
+    authId: number,
+    stepId: number,
+    isVerified: boolean,
+    override: boolean,
+  ) => {
+    const dependentSteps = 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
+    if (props.stepMapping[stepId]?.selectedAuthId !== authId) {
+      props.setStepAuthorization(
+        stepId,
+        authId,
+        isVerified,
+        dependentSteps,
+        override,
+      );
+    }
+
+    if (selectedFlow === null) {
+      props.setSelectedAuthByAppId({
+        appId: appData?.id || -1,
+        authId,
+      });
+    }
+    // selectedAuthId = authId;
+    getAppFlows(authId);
+
+    /*     const isMainApp =
+      props.stepMapping[stepId]?.step.activity.app.id ===
+      (props.genericData.app_id || -1); */
+    // if (
+    //   props.skipAuth &&
+    //   currentStep?.type === 'AUTH' &&
+    //   isMainApp &&
+    //   isVerified
+    // ) {
+    //   this.props.gotoNextStep();
+    // }
+  };
+
+  const deleteAuth = (authId: number, stepId: number, appId: number) => {
+    const auth = props.stepMapping[stepId].authorizations.filter(
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      (auth: any) => auth.authorizationId === authId,
+    )[0];
+
+    props.toggleDeleteAuthorizationFlag({
+      stepId,
+      authId: auth.authorizationId,
+      isDeleting: true,
+      error: '',
+    });
+
+    context?.eventEmitter.emit('did-begin-remove-authorization', {
+      authorizationId: Number(auth.authorizationId),
+    });
+    props.removeAuthorization({
+      stepId,
+      authId: auth.authorizationId,
+    });
+    context?.eventEmitter.emit('did-remove-authorization', {
+      authorizationId: Number(auth.authorizationId),
+      appId,
+    });
+  };
+
+  const onAuthResponseReceived = (
+    messageEvent: MessageEvent<AuthData>,
+    stepId: number,
+  ) => {
+    if (isAuthMessage(messageEvent) && messageEvent.data.activity_name) {
+      console.info(messageEvent.data);
+      if (stepId) {
+        if (!messageEvent.data.already_exists) {
+          props.addAuthorization({
+            stepId,
+            authData: {
+              authorizationId: messageEvent.data.authorization_id,
+              userIdentity: messageEvent.data.user_identity,
+              disableLink: '',
+              authType: '',
+              isVerified: false,
+              didFetchStatus: false,
+              isVerifying: false,
+              isDeleting: false,
+              error: '',
+            },
+          });
+        } else {
+          props.setStepAuthId({
+            stepId,
+            authId: Number(messageEvent.data.authorization_id),
+          });
+        }
+        // context?.eventEmitter.emit('did-add-authorization', {
+        //   identity: messageEvent.data.user_identity,
+        //   authorizationId: Number(messageEvent.data.authorization_id),
+        //   flowId: props.genericData.templateId,
+        //   appId: appId || 0,
+        //   appName: authApp?.name,
+        //   appIcon: authApp?.icon_url,
+        //   alreadyExists: messageEvent.data.already_exists,
+        //   externalId: messageEvent.data.external_id,
+        // });
+      }
+    }
+  };
+
+  const handleGoBackToAppsCloseModal = () => {
+    setSelectedFlow(null);
+    getAppFlows();
+    props.setStoreState({
+      showSetupModal: false,
+    });
+  };
+
+  const handleGoBackToApps = () => {
+    if (!props.genericData.testMultipurpose) {
+      setSelectedFlow(null);
+      getAppFlows();
+      props.setStoreState({
+        showSetupModal: false,
+      });
+    } else if (getSelectedStep().shouldShowBackButton) {
+      const currentSelectedStep =
+        props.stepState?.steps[props.stepState?.stepIndex - 1];
+      if (currentSelectedStep.type === 'AUTH') {
+        setSelectedFlow(null);
+        getAppFlows();
+        props.setStoreState({
+          showSetupModal: false,
+        });
+      } else {
+        props.gotoPreviousStep();
+      }
+    } else {
+      setSelectedFlow(null);
+      getAppFlows();
+      props.setStoreState({
+        showSetupModal: false,
+      });
+    }
+  };
+
+  return isLoading
+    ? html`<div
+        class="${genericData.viewStyle === ViewStyles.COMPACT
+          ? styles['compact-view']
+          : ''}"
+      >
+        <${AppPageLoader} renderMode=${renderMode} />
+      </div>`
+    : html`
+        <div
+          id="appPageContainer-${genericData.viewStyle}--${renderMode}"
+          class="${styles.appPageContainer} ${'integry-container__app-page'} ${props
+            .genericData.testMultipurpose
+            ? styles.appPageContainerCompact
+            : ''} ${genericData.viewStyle === ViewStyles.COMPACT
+            ? styles['compact-view']
+            : ''}"
+          style="${renderMode === MarketplaceRenderModes.INLINE
+            ? 'display: flex; flex-direction: column;'
+            : ''}
+            ${genericData.viewStyle === ViewStyles.COMPACT &&
+          renderMode === MarketplaceRenderModes.INLINE
+            ? 'height: calc(100%);'
+            : ''}
+            "
+        >
+          <div
+            class="${selectedFlow && props.genericData.testMultipurpose
+              ? styles.headerCompact
+              : styles.header} ${'app-page__header'} ${genericData.viewStyle ===
+              ViewStyles.COMPACT && isInModal
+              ? styles.headerCompactInModal
+              : ''}"
+          >
+            ${props.genericData.testMultipurpose &&
+            html` <div class=${styles.appInfo}>
+                ${selectedFlow &&
+                html`
+                  <div class="${styles.flowSetupHeaderCompact}">
+                    <svg
+                      onclick=${handleGoBackToApps}
+                      class=${styles.backLink}
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="32"
+                      height="32"
+                      viewBox="0 0 32 32"
+                      fill="none"
+                    >
+                      <circle
+                        cx="16"
+                        cy="16"
+                        r="15.5"
+                        fill="white"
+                        stroke="#E0E0E0"
+                      />
+                      <path
+                        d="M15.547 11.0504L15.8825 10.7004L15.8825 10.7004L15.547 11.0504ZM15.5614 11.7359L15.2114 11.4004L15.2114 11.4004L15.5614 11.7359ZM14.8614 11.0649L15.2114 11.4004L15.2114 11.4004L14.8614 11.0649ZM10.013 16.1222L9.66297 15.7867L9.66297 15.7867L10.013 16.1222ZM9.69129 16.4578L9.3413 16.1222L9.01962 16.4578L9.3413 16.7933L9.69129 16.4578ZM10.013 16.7933L9.66297 17.1288L10.013 16.7933ZM14.8614 21.8507L15.2114 21.5151L15.2114 21.5151L14.8614 21.8507ZM15.547 21.8651L15.8825 22.2151L15.8825 22.2151L15.547 21.8651ZM15.5614 21.1796L15.9114 20.8441L15.9114 20.8441L15.5614 21.1796ZM11.0346 16.4578L10.6846 16.1222L10.363 16.4578L10.6846 16.7933L11.0346 16.4578ZM15.2114 11.4004L15.2114 11.4004L15.9114 12.0715C16.282 11.6849 16.2691 11.071 15.8825 10.7004L15.2114 11.4004ZM15.2114 11.4004L15.2114 11.4004L15.8825 10.7004C15.4959 10.3298 14.8821 10.3427 14.5115 10.7293L15.2114 11.4004ZM10.363 16.4578L15.2114 11.4004L14.5115 10.7293L9.66297 15.7867L10.363 16.4578ZM10.0413 16.7933L10.363 16.4578L9.66297 15.7867L9.3413 16.1222L10.0413 16.7933ZM10.363 16.4578L10.0413 16.1222L9.3413 16.7933L9.66297 17.1288L10.363 16.4578ZM15.2114 21.5151L10.363 16.4578L9.66297 17.1288L14.5115 22.1862L15.2114 21.5151ZM15.2114 21.5151L15.2114 21.5151L14.5115 22.1862C14.8821 22.5728 15.4959 22.5858 15.8825 22.2151L15.2114 21.5151ZM15.2114 21.5151L15.2114 21.5151L15.8825 22.2151C16.2691 21.8445 16.282 21.2307 15.9114 20.8441L15.2114 21.5151ZM10.6846 16.7933L15.2114 21.5151L15.9114 20.8441L11.3846 16.1222L10.6846 16.7933ZM15.2114 11.4004L10.6846 16.1222L11.3846 16.7933L15.9114 12.0715L15.2114 11.4004ZM21.5152 16.4581L21.5152 17.4278C22.0507 17.4278 22.4848 16.9937 22.4848 16.4581L21.5152 16.4581ZM21.5152 16.4581L22.4848 16.4581C22.4848 15.9226 22.0507 15.4884 21.5152 15.4884L21.5152 16.4581ZM11.8182 16.4581L21.5152 16.4581L21.5152 15.4884L11.8182 15.4884L11.8182 16.4581ZM11.8182 16.4581L11.8182 16.4581L11.8182 15.4884C11.2826 15.4884 10.8485 15.9226 10.8485 16.4581L11.8182 16.4581ZM11.8182 16.4581L11.8182 16.4581L10.8485 16.4581C10.8485 16.9937 11.2826 17.4278 11.8182 17.4278L11.8182 16.4581ZM21.5152 16.4581L11.8182 16.4581L11.8182 17.4278L21.5152 17.4278L21.5152 16.4581Z"
+                        fill="#4250F0"
+                      />
+                    </svg>
+                    <div
+                      class="${styles.flowNameCompact}"
+                      style="${genericData.viewStyle !== ViewStyles.COMPACT
+                        ? 'justify-content: flex-start;'
+                        : ''}"
+                    >
+                      <img
+                        class=${styles.flowNameCompactImg}
+                        src=${appData?.icon_url}
+                        alt=${appData?.name}
+                      />
+                      <span>${selectedFlow?.flow.name}</span>
+                    </div>
+                  </div>
+                `}
+                ${selectedFlow === null &&
+                html`${keepBackButtonForFlows &&
+                  props.onBackClick &&
+                  selectedFlow === null &&
+                  html`
+                    <svg
+                      style="cursor: pointer;"
+                      onclick=${props.onBackClick}
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="32"
+                      height="32"
+                      viewBox="0 0 32 32"
+                      fill="none"
+                    >
+                      <circle
+                        cx="16"
+                        cy="16"
+                        r="15.5"
+                        fill="white"
+                        stroke="#E0E0E0"
+                      />
+                      <path
+                        d="M15.5477 11.0504L15.8832 10.7004L15.8832 10.7004L15.5477 11.0504ZM15.5622 11.7359L15.2122 11.4004L15.2122 11.4004L15.5622 11.7359ZM14.8622 11.0649L15.2122 11.4004L15.2122 11.4004L14.8622 11.0649ZM10.0137 16.1222L9.66371 15.7867L9.66371 15.7867L10.0137 16.1222ZM9.69202 16.4578L9.34203 16.1222L9.02036 16.4578L9.34203 16.7933L9.69202 16.4578ZM10.0137 16.7933L9.66371 17.1288L10.0137 16.7933ZM14.8622 21.8507L15.2122 21.5151L15.2122 21.5151L14.8622 21.8507ZM15.5477 21.8651L15.8832 22.2151L15.8832 22.2151L15.5477 21.8651ZM15.5622 21.1796L15.9122 20.8441L15.9122 20.8441L15.5622 21.1796ZM11.0354 16.4578L10.6854 16.1222L10.3637 16.4578L10.6854 16.7933L11.0354 16.4578ZM15.2122 11.4004L15.2122 11.4004L15.9122 12.0715C16.2828 11.6849 16.2698 11.071 15.8832 10.7004L15.2122 11.4004ZM15.2122 11.4004L15.2122 11.4004L15.8832 10.7004C15.4967 10.3298 14.8828 10.3427 14.5122 10.7293L15.2122 11.4004ZM10.3637 16.4578L15.2122 11.4004L14.5122 10.7293L9.66371 15.7867L10.3637 16.4578ZM10.042 16.7933L10.3637 16.4578L9.66371 15.7867L9.34203 16.1222L10.042 16.7933ZM10.3637 16.4578L10.042 16.1222L9.34203 16.7933L9.66371 17.1288L10.3637 16.4578ZM15.2122 21.5151L10.3637 16.4578L9.66371 17.1288L14.5122 22.1862L15.2122 21.5151ZM15.2122 21.5151L15.2122 21.5151L14.5122 22.1862C14.8828 22.5728 15.4967 22.5858 15.8832 22.2151L15.2122 21.5151ZM15.2122 21.5151L15.2122 21.5151L15.8832 22.2151C16.2698 21.8445 16.2828 21.2307 15.9122 20.8441L15.2122 21.5151ZM10.6854 16.7933L15.2122 21.5151L15.9122 20.8441L11.3853 16.1222L10.6854 16.7933ZM15.2122 11.4004L10.6854 16.1222L11.3853 16.7933L15.9122 12.0715L15.2122 11.4004ZM21.5152 16.4578L21.5152 16.4578L21.5152 17.4275C22.0507 17.4275 22.4848 16.9933 22.4848 16.4578L21.5152 16.4578ZM21.5152 16.4578L21.5152 16.4578L22.4848 16.4578C22.4848 15.9222 22.0507 15.4881 21.5152 15.4881L21.5152 16.4578ZM11.8182 16.4578L21.5152 16.4578L21.5152 15.4881L11.8182 15.4881L11.8182 16.4578ZM11.8182 16.4578L11.8182 15.4881C11.2826 15.4881 10.8485 15.9222 10.8485 16.4578L11.8182 16.4578ZM11.8182 16.4578L10.8485 16.4578C10.8485 16.9933 11.2826 17.4275 11.8182 17.4275L11.8182 16.4578ZM21.5152 16.4578L11.8182 16.4578L11.8182 17.4275L21.5152 17.4275L21.5152 16.4578Z"
+                        fill="#4250F0"
+                      />
+                    </svg>
+                  `}
+                  <img src=${appData?.icon_url} alt=${appData?.name} />
+                  <div class="${styles.appName}">${appData?.name}</div>`}
+              </div>
+              <div class=${styles.flowAccountWrap}>
+                ${props.stepState.currentStep?.type === 'CONFIGURATION' &&
+                getSelectedStep().selectedStep?.step.authorization_type.app
+                  .id !== props.genericData.selfAppId &&
+                getSelectedStep().selectedStep?.step.authorization_type.type !==
+                  'NO_AUTH' &&
+                html` <${Authentication}
+                  authorizations=${getStepAuthorizations(
+                    props.stepMapping[props.stepState.currentStep.stepId]
+                      ?.authorizations || [],
+                  )}
+                  appData=${getSelectedStepApp(
+                    getSelectedStep().selectedStep?.step,
+                  )}
+                  onAuthDelete=${(authId: number, appId: number) => {
+                    deleteAuth(
+                      authId,
+                      Number(getSelectedStep().selectedStep?.step.id),
+                      appId,
+                    );
+                  }}
+                  onAuthenticationRecieved=${(
+                    messageEvent: MessageEvent<AuthData>,
+                  ) => {
+                    onAuthResponseReceived(
+                      messageEvent,
+                      Number(getSelectedStep().selectedStep?.step.id),
+                    );
+                    handleAuthSelected(
+                      messageEvent.data.authorization_id,
+                      Number(getSelectedStep().selectedStep?.step.id),
+                      true,
+                      false,
+                    );
+                  }}
+                  onAuthVerify=${(authId: number, status: boolean) => {
+                    handleAuthSelected(
+                      authId,
+                      Number(getSelectedStep().selectedStep?.step.id),
+                      status,
+                      false,
+                    );
+                  }}
+                  hideAuthActions=${true}
+                  onAuthSelected=${(authId: number, status: boolean) => {
+                    handleAuthSelected(
+                      authId,
+                      Number(getSelectedStep().selectedStep?.step.id),
+                      status,
+                      false,
+                    );
+                  }}
+                  stepId=${Number(getSelectedStep().selectedStep?.step.id)}
+                  initialAuthVerification=${true}
+                />`}
+              </div>
+              ${selectedFlow === null &&
+              appData?.authorization_type.type !== 'NO_AUTH' &&
+              html` <${Authentication}
+                authorizations=${appData?.authorization_type.authorizations ||
+                []}
+                flows=${appFlows}
+                appData=${appData}
+                onAuthDelete=${(authId: number, appId: number) => {
+                  setAccountVerified(false);
+                  if (app_id) {
+                    context?.apiHandler.getAppInfo(app_id).then((data) => {
+                      if (data) {
+                        setAppData(data);
+                        if (data.authorization_type) {
+                          const {
+                            authorizations = [],
+                          } = data.authorization_type;
+                          setSkipAuth(authorizations.length > 0);
+                        }
+                      } else {
+                        console.error(`Failed to fetch app details`);
+                      }
+                    });
+                  }
+                  getAppFlows();
+                  setSelectedFlow(null);
+                  emitDeleteAuthEvent(authId, appId);
+                }}
+                onAuthenticationRecieved=${(
+                  messageEvent: MessageEvent<AuthData>,
+                ) => {
+                  setAccountVerified(false);
+                  if (app_id) {
+                    context?.apiHandler.getAppInfo(app_id).then((data) => {
+                      if (data) {
+                        setAppData(data);
+                        if (data.authorization_type) {
+                          const {
+                            authorizations = [],
+                          } = data.authorization_type;
+                          setSkipAuth(authorizations.length > 0);
+                        }
+                        getAppFlows(messageEvent.data.authorization_id);
+                      } else {
+                        console.error(`Failed to fetch app details`);
+                      }
+                    });
+                  } else {
+                    getAppFlows();
+                  }
+                  emitAddAuthEvent(messageEvent);
+                }}
+                onAuthVerify=${(authId: number, staus: boolean) => {
+                  setAccountVerified(staus);
+                }}
+                hideAuthActions=${selectedFlow !== null}
+                onAuthSelected=${(authId: number, status: boolean) => {
+                  handleAuthSelected(
+                    authId,
+                    Number(getSelectedStep().selectedStep?.step.id),
+                    status,
+                    false,
+                  );
+                }}
+                stepId=${Number(getSelectedStep().selectedStep?.step.id)}
+                initialAuthVerification=${true}
+              />`}`}
+            ${!props.genericData.testMultipurpose &&
+            html` <div class=${styles.appInfo}>
+                ${keepBackButtonForFlows &&
+                props.onBackClick &&
+                selectedFlow === null &&
+                html`
+                  <svg
+                    style="cursor: pointer;"
+                    onclick=${props.onBackClick}
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="32"
+                    height="32"
+                    viewBox="0 0 32 32"
+                    fill="none"
+                  >
+                    <circle
+                      cx="16"
+                      cy="16"
+                      r="15.5"
+                      fill="white"
+                      stroke="#E0E0E0"
+                    />
+                    <path
+                      d="M15.5477 11.0504L15.8832 10.7004L15.8832 10.7004L15.5477 11.0504ZM15.5622 11.7359L15.2122 11.4004L15.2122 11.4004L15.5622 11.7359ZM14.8622 11.0649L15.2122 11.4004L15.2122 11.4004L14.8622 11.0649ZM10.0137 16.1222L9.66371 15.7867L9.66371 15.7867L10.0137 16.1222ZM9.69202 16.4578L9.34203 16.1222L9.02036 16.4578L9.34203 16.7933L9.69202 16.4578ZM10.0137 16.7933L9.66371 17.1288L10.0137 16.7933ZM14.8622 21.8507L15.2122 21.5151L15.2122 21.5151L14.8622 21.8507ZM15.5477 21.8651L15.8832 22.2151L15.8832 22.2151L15.5477 21.8651ZM15.5622 21.1796L15.9122 20.8441L15.9122 20.8441L15.5622 21.1796ZM11.0354 16.4578L10.6854 16.1222L10.3637 16.4578L10.6854 16.7933L11.0354 16.4578ZM15.2122 11.4004L15.2122 11.4004L15.9122 12.0715C16.2828 11.6849 16.2698 11.071 15.8832 10.7004L15.2122 11.4004ZM15.2122 11.4004L15.2122 11.4004L15.8832 10.7004C15.4967 10.3298 14.8828 10.3427 14.5122 10.7293L15.2122 11.4004ZM10.3637 16.4578L15.2122 11.4004L14.5122 10.7293L9.66371 15.7867L10.3637 16.4578ZM10.042 16.7933L10.3637 16.4578L9.66371 15.7867L9.34203 16.1222L10.042 16.7933ZM10.3637 16.4578L10.042 16.1222L9.34203 16.7933L9.66371 17.1288L10.3637 16.4578ZM15.2122 21.5151L10.3637 16.4578L9.66371 17.1288L14.5122 22.1862L15.2122 21.5151ZM15.2122 21.5151L15.2122 21.5151L14.5122 22.1862C14.8828 22.5728 15.4967 22.5858 15.8832 22.2151L15.2122 21.5151ZM15.2122 21.5151L15.2122 21.5151L15.8832 22.2151C16.2698 21.8445 16.2828 21.2307 15.9122 20.8441L15.2122 21.5151ZM10.6854 16.7933L15.2122 21.5151L15.9122 20.8441L11.3853 16.1222L10.6854 16.7933ZM15.2122 11.4004L10.6854 16.1222L11.3853 16.7933L15.9122 12.0715L15.2122 11.4004ZM21.5152 16.4578L21.5152 16.4578L21.5152 17.4275C22.0507 17.4275 22.4848 16.9933 22.4848 16.4578L21.5152 16.4578ZM21.5152 16.4578L21.5152 16.4578L22.4848 16.4578C22.4848 15.9222 22.0507 15.4881 21.5152 15.4881L21.5152 16.4578ZM11.8182 16.4578L21.5152 16.4578L21.5152 15.4881L11.8182 15.4881L11.8182 16.4578ZM11.8182 16.4578L11.8182 15.4881C11.2826 15.4881 10.8485 15.9222 10.8485 16.4578L11.8182 16.4578ZM11.8182 16.4578L10.8485 16.4578C10.8485 16.9933 11.2826 17.4275 11.8182 17.4275L11.8182 16.4578ZM21.5152 16.4578L11.8182 16.4578L11.8182 17.4275L21.5152 17.4275L21.5152 16.4578Z"
+                      fill="#4250F0"
+                    />
+                  </svg>
+                `}
+                <img src=${appData?.icon_url} alt=${appData?.name} />
+                <div class="${styles.appName}">${appData?.name}</div>
+              </div>
+              <${Authentication}
+                authorizations=${appData?.authorization_type.authorizations ||
+                []}
+                flows=${appFlows}
+                appData=${appData}
+                onAuthDelete=${(authId: number, appId: number) => {
+                  setAccountVerified(false);
+                  if (app_id) {
+                    context?.apiHandler.getAppInfo(app_id).then((data) => {
+                      if (data) {
+                        setAppData(data);
+                        if (data.authorization_type) {
+                          const {
+                            authorizations = [],
+                          } = data.authorization_type;
+                          setSkipAuth(authorizations.length > 0);
+                        }
+                      } else {
+                        console.error(`Failed to fetch app details`);
+                      }
+                    });
+                  }
+                  getAppFlows();
+                  setSelectedFlow(null);
+                  emitDeleteAuthEvent(authId, appId);
+                }}
+                onAuthenticationRecieved=${(
+                  messageEvent: MessageEvent<AuthData>,
+                ) => {
+                  setAccountVerified(false);
+                  if (app_id) {
+                    context?.apiHandler.getAppInfo(app_id).then((data) => {
+                      if (data) {
+                        setAppData(data);
+                        if (data.authorization_type) {
+                          const {
+                            authorizations = [],
+                          } = data.authorization_type;
+                          setSkipAuth(authorizations.length > 0);
+                        }
+                        getAppFlows(messageEvent.data.authorization_id);
+                      } else {
+                        console.error(`Failed to fetch app details`);
+                      }
+                    });
+                  } else {
+                    getAppFlows();
+                  }
+                  emitAddAuthEvent(messageEvent);
+                }}
+                onAuthVerify=${(authId: number, staus: boolean) => {
+                  setAccountVerified(staus);
+                }}
+                hideAuthActions=${selectedFlow !== null}
+                onAuthSelected=${(authId: number, status: boolean) => {
+                  handleAuthSelected(
+                    authId,
+                    Number(getSelectedStep().selectedStep?.step.id),
+                    status,
+                    false,
+                  );
+                }}
+                stepId=${Number(getSelectedStep().selectedStep?.step.id)}
+              />`}
+          </div>
+
+          <div
+            class="${renderMode === MarketplaceRenderModes.MODAL
+              ? genericData.viewStyle === ViewStyles.COMPACT && isInModal
+                ? styles.modalContentWrapCompact
+                : styles.modalContentWrap
+              : styles.inlineContentWrap} ${'integry-apps-flow-container'}"
+            style="${renderFlowSetupMode === MarketplaceRenderModes.MODAL &&
+            selectedFlow !== null
+              ? 'overflow: hidden;'
+              : ''}"
+          >
+            ${(selectedFlow === null ||
+              renderFlowSetupMode === MarketplaceRenderModes.MODAL) &&
+            html` ${isReloadingFlowListing &&
+              !isLoading &&
+              html`<div
+                class="${genericData.viewStyle === ViewStyles.COMPACT
+                  ? styles['compact-view']
+                  : ''}"
+              >
+                <${AppPageLoader} renderMode=${renderMode} />
+              </div>`}
+              <${AppFlowListing}
+                marketplaceId=${marketplaceId}
+                onFlowSelect=${onFlowSelect}
+                updateInstanceName=${updateInstanceName}
+                appData=${appData}
+                appFlows=${appFlows}
+                accountVerified=${appData?.authorization_type.type === 'NO_AUTH'
+                  ? true
+                  : accountVerified}
+                renderMode=${renderMode}
+                onDeleteInstance=${(instance: Integration) => {
+                  handleDeleteInstance(instance);
+                }}
+              />`}
+            ${selectedFlow &&
+            (renderFlowSetupMode === MarketplaceRenderModes.INLINE
+              ? html`
+              <div class="${styles.appFlowSetupForm}">
+              ${
+                !props.genericData.testMultipurpose &&
+                html` <div class="${styles.flowSetupHeader}">
+                  <div class="${styles.backLink}" onclick=${handleGoBackToApps}>
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 33 33"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <circle
+                        cx="16.6758"
+                        cy="16.5684"
+                        r="15.5"
+                        fill="white"
+                        stroke="#4250f0"
+                      />
+                      <path
+                        d="M16.8975 11.3777L16.5547 11.7205L16.5547 11.7205L16.8975 11.3777ZM16.8975 12.0634L16.5547 11.7205L16.5547 11.7205L16.8975 12.0634ZM16.2119 11.3777L16.5547 11.7205L16.2119 11.3777ZM11.3634 16.2262L11.0205 15.8833L11.0205 15.8833L11.3634 16.2262ZM11.0205 16.569L10.6777 
+                      16.2262L10.3349 16.569L10.6777 16.9118L11.0205 16.569ZM11.3634 16.9118L11.0205 17.2547L11.0205 17.2547L11.3634 16.9118ZM16.2119 21.7603L16.5547 21.4175L16.5547 21.4175L16.2119 21.7603ZM16.8975 21.7603L16.5547 21.4175L16.5547 21.4175L16.8975 21.7603ZM16.8975 21.0747L16.5547 21.4175L16.5547 21.4175L16.8975 21.0747ZM12.3919 16.569L12.0491 16.2262L11.7062 16.569L12.0491 16.9118L12.3919 16.569ZM22.8574 17.0545L22.8574 17.5394L22.8574 17.0545ZM22.8574 16.0848L22.8574 16.5697L22.8574 
+                      16.0848ZM13.1605 16.0848L13.1605 15.6L13.1605 16.0848ZM13.1605 17.0545L13.1605 16.5697L13.1605 17.0545ZM16.5547 11.7205L16.5547 11.7205L17.2404 12.4062C17.6191 12.0275 17.6191 11.4135 17.2404 11.0348L16.5547 11.7205ZM16.5547 11.7205L17.2404 11.0348C16.8617 10.6562 16.2477 10.6562 15.869 11.0348L16.5547 11.7205ZM11.7062 16.569L16.5547 11.7205L15.869 11.0348L11.0205 15.8833L11.7062 16.569ZM11.3634 16.9118L11.7062 16.569L11.0205 15.8833L10.6777 16.2262L11.3634 16.9118ZM11.7062 16.569L11.3634 16.2262L10.6777 
+                      16.9118L11.0205 17.2547L11.7062 16.569ZM16.5547 21.4175L11.7062 16.569L11.0205 17.2547L15.869 22.1032L16.5547 21.4175ZM16.5547 21.4175L15.869 22.1032C16.2477 22.4819 16.8617 22.4819 17.2404 22.1032L16.5547 21.4175ZM16.5547 21.4175L16.5547 
+                      21.4175L17.2404 22.1032C17.6191 21.7245 17.6191 21.1105 17.2404 20.7318L16.5547 21.4175ZM12.0491 16.9118L16.5547 21.4175L17.2404 20.7318L12.7347 16.2262L12.0491 16.9118ZM16.5547 11.7205L12.0491 16.2262L12.7347 16.9118L17.2404 12.4062L16.5547 11.7205ZM22.8574 16.5697L22.8574 16.5697L22.8574 17.5394C23.393 17.5394 23.8271 17.1052 23.8271 16.5697L22.8574 16.5697ZM22.8574 16.5697L22.8574 16.5697L23.8271 16.5697C23.8271 16.0341 23.393 15.6 22.8574 15.6L22.8574 
+                      16.5697ZM13.1605 16.5697L22.8574 16.5697L22.8574 15.6L13.1605 15.6L13.1605 16.5697ZM13.1605 16.5697L13.1605 15.6C12.6249 15.6 12.1908 16.0341 12.1908 16.5697L13.1605 16.5697ZM13.1605 16.5697L12.1908 16.5697C12.1908 17.1052 12.6249 17.5394 13.1605 17.5394L13.1605 16.5697ZM22.8574 16.5697L13.1605 16.5697L13.1605 17.5394L22.8574 17.5394L22.8574 16.5697Z"
+                        fill="#4250f0"
+                      />
+                    </svg>
+                  </div>
+                  <div class="${styles.flowName}">${genericData.name}</div>
+                </div>`
+              }
+            <div id="${
+              renderMode === MarketplaceRenderModes.MODAL
+                ? 'flowSetupWrapperModal'
+                : 'flowSetupWrapper'
+            }" class="${
+                  renderMode === MarketplaceRenderModes.MODAL
+                    ? styles.flowSetupWrapperModal
+                    : styles.flowSetupWrapper
+                } ${
+                  genericData.viewStyle === ViewStyles.COMPACT &&
+                  styles.flowSetupWrapperModalCompact
+                }">
+              <${FlowSetupContainer}
+                  deploymentId=${
+                    genericData.deploymentId || appData?.default_bundle_id
+                  }
+                  flowId=${selectedFlow?.flow.id}
+                  key=${`flow-setup-${selectedFlow?.flow.id}-${selectedFlow?.instance?.id}`}
+                  integrationId=${selectedFlow?.instance?.id || null}
+                  hideStepNavigation=${true}
+                  setupContainerClassName=${
+                    renderMode === MarketplaceRenderModes.MODAL
+                      ? styles.setupContainer
+                      : ''
+                  }
+                  stepsClassName=${
+                    renderMode === MarketplaceRenderModes.MODAL
+                      ? { bottom: styles.stepsBottom }
+                      : null
+                  }
+                  onUpdate=${handleGoBackToAppsCloseModal}
+                  onFlowExecute=${getAppFlows}
+                  onBackClick=${() => {
+                    setSelectedFlow(null);
+                  }}
+                  skipAuth=${skipAuth}
+                  hideStepCount=${true}
+                  isInModal=${renderMode === MarketplaceRenderModes.MODAL}
+                  
+                ></${FlowSetupContainer}>
+                </div>
+            </div>
+                `
+              : html`
+                <${Modal}
+                  isOpen=${props.showSetupModal}
+                  onClose=${handleGoBackToAppsCloseModal}
+                  className="flowAppsModal"
+                  isCompact=${genericData.viewStyle === ViewStyles.COMPACT}
+                  >
+                  <div class="${styles.appFlowSetupForm}">
+                  ${html` <div class="${styles.flowSetupHeader}">
+                    <div
+                      class="${styles.backLink}"
+                      onclick=${handleGoBackToApps}
+                    >
+                      <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 33 33"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <circle
+                          cx="16.6758"
+                          cy="16.5684"
+                          r="15.5"
+                          fill="white"
+                          stroke="#4250f0"
+                        />
+                        <path
+                          d="M16.8975 11.3777L16.5547 11.7205L16.5547 11.7205L16.8975 11.3777ZM16.8975 12.0634L16.5547 11.7205L16.5547 11.7205L16.8975 12.0634ZM16.2119 11.3777L16.5547 11.7205L16.2119 11.3777ZM11.3634 16.2262L11.0205 15.8833L11.0205 15.8833L11.3634 16.2262ZM11.0205 16.569L10.6777 
+                          16.2262L10.3349 16.569L10.6777 16.9118L11.0205 16.569ZM11.3634 16.9118L11.0205 17.2547L11.0205 17.2547L11.3634 16.9118ZM16.2119 21.7603L16.5547 21.4175L16.5547 21.4175L16.2119 21.7603ZM16.8975 21.7603L16.5547 21.4175L16.5547 21.4175L16.8975 21.7603ZM16.8975 21.0747L16.5547 21.4175L16.5547 21.4175L16.8975 21.0747ZM12.3919 16.569L12.0491 16.2262L11.7062 16.569L12.0491 16.9118L12.3919 16.569ZM22.8574 17.0545L22.8574 17.5394L22.8574 17.0545ZM22.8574 16.0848L22.8574 16.5697L22.8574 
+                          16.0848ZM13.1605 16.0848L13.1605 15.6L13.1605 16.0848ZM13.1605 17.0545L13.1605 16.5697L13.1605 17.0545ZM16.5547 11.7205L16.5547 11.7205L17.2404 12.4062C17.6191 12.0275 17.6191 11.4135 17.2404 11.0348L16.5547 11.7205ZM16.5547 11.7205L17.2404 11.0348C16.8617 10.6562 16.2477 10.6562 15.869 11.0348L16.5547 11.7205ZM11.7062 16.569L16.5547 11.7205L15.869 11.0348L11.0205 15.8833L11.7062 16.569ZM11.3634 16.9118L11.7062 16.569L11.0205 15.8833L10.6777 16.2262L11.3634 16.9118ZM11.7062 16.569L11.3634 16.2262L10.6777 
+                          16.9118L11.0205 17.2547L11.7062 16.569ZM16.5547 21.4175L11.7062 16.569L11.0205 17.2547L15.869 22.1032L16.5547 21.4175ZM16.5547 21.4175L15.869 22.1032C16.2477 22.4819 16.8617 22.4819 17.2404 22.1032L16.5547 21.4175ZM16.5547 21.4175L16.5547 
+                          21.4175L17.2404 22.1032C17.6191 21.7245 17.6191 21.1105 17.2404 20.7318L16.5547 21.4175ZM12.0491 16.9118L16.5547 21.4175L17.2404 20.7318L12.7347 16.2262L12.0491 16.9118ZM16.5547 11.7205L12.0491 16.2262L12.7347 16.9118L17.2404 12.4062L16.5547 11.7205ZM22.8574 16.5697L22.8574 16.5697L22.8574 17.5394C23.393 17.5394 23.8271 17.1052 23.8271 16.5697L22.8574 16.5697ZM22.8574 16.5697L22.8574 16.5697L23.8271 16.5697C23.8271 16.0341 23.393 15.6 22.8574 15.6L22.8574 
+                          16.5697ZM13.1605 16.5697L22.8574 16.5697L22.8574 15.6L13.1605 15.6L13.1605 16.5697ZM13.1605 16.5697L13.1605 15.6C12.6249 15.6 12.1908 16.0341 12.1908 16.5697L13.1605 16.5697ZM13.1605 16.5697L12.1908 16.5697C12.1908 17.1052 12.6249 17.5394 13.1605 17.5394L13.1605 16.5697ZM22.8574 16.5697L13.1605 16.5697L13.1605 17.5394L22.8574 17.5394L22.8574 16.5697Z"
+                          fill="#4250f0"
+                        />
+                      </svg>
+                    </div>
+                    <div
+                      class="${styles.flowName}"
+                      style="${genericData.viewStyle === ViewStyles.COMPACT &&
+                      renderFlowSetupMode === MarketplaceRenderModes.MODAL
+                        ? 'width: 75%; text-align: center;'
+                        : ''}"
+                    >
+                      ${genericData.name}
+                    </div>
+                  </div>`}
+                  ${props.genericData.testMultipurpose && html``}
+    
+            <div id="flowSetupWrapperModal" class=${
+              styles.flowSetupWrapperModal
+            }>
+              <${FlowSetupContainer}
+                  deploymentId=${
+                    genericData.deploymentId || appData?.default_bundle_id
+                  }
+                  flowId=${selectedFlow?.flow.id}
+                  key=${`flow-setup-${selectedFlow?.flow.id}-${selectedFlow?.instance?.id}`}
+                  integrationId=${selectedFlow?.instance?.id || null}
+                  hideStepNavigation=${true}
+                  setupContainerClassName=${
+                    renderMode === MarketplaceRenderModes.MODAL
+                      ? styles.setupContainer
+                      : renderFlowSetupMode === MarketplaceRenderModes.MODAL
+                      ? styles.setupContainerModal
+                      : ''
+                  }
+                  stepsClassName=${
+                    renderMode === MarketplaceRenderModes.MODAL
+                      ? { bottom: styles.stepsBottom }
+                      : null
+                  }
+                  onUpdate=${handleGoBackToAppsCloseModal}
+                  onFlowExecute=${getAppFlows}
+                  onBackClick=${() => {
+                    setSelectedFlow(null);
+                  }}
+                  skipAuth=${skipAuth}
+                  hideStepCount=${true}
+                  isInModal=${
+                    renderMode === MarketplaceRenderModes.MODAL ||
+                    renderFlowSetupMode === MarketplaceRenderModes.MODAL
+                  }
+                ></${FlowSetupContainer}>
+                </div>
+            </div>
+                  <//>
+                `)}
+          </div>
+          ${((renderMode === MarketplaceRenderModes.INLINE &&
+            renderFlowSetupMode !== MarketplaceRenderModes.INLINE) ||
+            !selectedFlow) &&
+          html`<${Footer}
+            style="${renderMode === MarketplaceRenderModes.MODAL
+              ? 'padding-top: 10px;'
+              : ''}"
+          />`}
+        </div>
+      `;
+};
+
+export default connect<WraperrProps, unknown, StoreType, unknown>(
+  [
+    'userConfig',
+    'genericData',
+    'showMarketplaceModal',
+    'showMarketplaceAppPageId',
+    'showSetupModal',
+    'IUAccountsData',
+    'incomingWebhookPayload',
+    'stepState',
+    'stepMapping',
+  ],
+  actionFunctions,
+)(RenderAppPage);