@integry/sdk 4.5.2 → 4.5.4

package/src/features/containers/SDKContainer/index.ts

@@ -0,0 +1,817 @@
+/* eslint-disable no-nested-ternary */
+import { Modal } from '@/components/Modal';
+import AppContext from '@/contexts/AppContext';
+import TemplatesView from '@/features/templates/TemplatesView';
+import TemplatesViewCompact from '@/features/templates/TemplatesViewCompact';
+import { Template, TemplateStep, UserConfig } from '@/interfaces';
+import { actionFunctions } from '@/store';
+import {
+  TemplateFormRenderModes,
+  TemplateListingRenderModes,
+  ViewStyles,
+} from '@/types';
+import { StoreType } from '@/types/store';
+import { html } from 'htm/preact';
+import { useContext, useEffect, useRef } from 'preact/hooks';
+import { connect } from 'unistore/preact';
+
+import Authentication from '@/features/containers/AppFlowContainer/Authentication';
+import { AuthData, isAuthMessage } from '@/utils/isAuthMessage';
+import FlowSetupContainer from '../FlowSetupContainer';
+import styles from './styles.module.scss';
+
+interface ContainerProps extends StoreType {
+  deploymentId: string;
+  userConfig?: UserConfig;
+  layout: TemplateListingRenderModes;
+  renderMode: TemplateFormRenderModes;
+  renderFlowsMode?: TemplateFormRenderModes;
+  flowId?: number;
+  integrationId?: number;
+  params?: Record<string, string>;
+}
+
+const SDKContainer = (props: ContainerProps) => {
+  const context = useContext(AppContext);
+  const { flowId, integrationId } = props;
+  const defaultFlowId = flowId || 0;
+  const defautlIntegrationId = integrationId || 0;
+  const flowParams = props.params || {};
+
+  const templateListComponent = useRef<typeof TemplatesView | undefined>(
+    props.genericData.viewStyle === ViewStyles.COMPACT
+      ? TemplatesViewCompact
+      : TemplatesView,
+  );
+
+  const onTemplateClick = (template: Template) => {
+    const { renderMode } = props;
+    if (renderMode === TemplateFormRenderModes.DETACHED) {
+      context?.eventEmitter.emit('should-load-flow', {
+        templateId: template.id,
+        flowId: template.id,
+      });
+    } else {
+      props.setStoreState({
+        showSetupModal: renderMode === TemplateFormRenderModes.MODAL,
+        showSetupInline: renderMode === TemplateFormRenderModes.INLINE,
+        genericData: {
+          ...props.genericData,
+          templateId: template.id,
+          name: template.name,
+        },
+      });
+    }
+
+    // switch (renderMode) {
+    //   case TemplateFormRenderModes.MODAL: {
+    //     props.setStoreState({
+    //       showSetupModal: true,
+    //       genericData: {
+    //         ...props.genericData,
+    //         brandingApp: null,
+    //         templateId,
+    //       },
+    //     });
+    //     break;
+    //   }
+    //   case TemplateFormRenderModes.INLINE: {
+    //     props.setStoreState({
+    //       showSetupInline: true,
+    //       genericData: {
+    //         ...props.genericData,
+    //         brandingApp: null,
+    //         templateId,
+    //       },
+    //     });
+    //     break;
+    //   }
+    //   case TemplateFormRenderModes.DETACHED: {
+    //     context?.eventEmitter.emit('should-load-flow', {
+    //       templateId,
+    //       flowId: templateId,
+    //     });
+    //     break;
+    //   }
+    //   default:
+    //     break;
+    // }
+  };
+
+  const getContainerName = () => props.genericData.name;
+  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;
+    }
+    if (
+      (props.genericData.isTestIntegration &&
+        Number(selectedStep?.step.id) ===
+          Number(Object.keys(stepMapping)[0])) ||
+      props.genericData.customFlowSetupRender
+    ) {
+      shouldShowBackButton = false;
+    }
+    return {
+      selectedStep,
+      isStepValid,
+      showStepValidation,
+      shouldShowBackButton,
+      shouldShowLastStep,
+    };
+  };
+
+  const getSelectedStepApp = (step: 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 {};
+  };
+
+  const getStepAuthorizations = (authorizations: any) => {
+    const updateAuthorizations: any = [];
+    authorizations.forEach((auth: any) => {
+      updateAuthorizations.push({
+        id: auth.authorizationId,
+        user_identity: auth.userIdentity,
+        access_token: auth.accessToken,
+      });
+    });
+    return updateAuthorizations;
+  };
+
+  const handleAuthSelected = (
+    authId: number,
+    stepId: number,
+    isVerified: boolean,
+    override: boolean,
+  ) => {
+    const { stepState } = props;
+    const { currentStep } = stepState;
+    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,
+      );
+    }
+
+    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 deletedAuth = props.stepMapping[stepId].authorizations.filter(
+      (auth: any) => auth.authorizationId === authId,
+    )[0];
+    const authorizationId = Number(deletedAuth.authorizationId);
+
+    props.toggleDeleteAuthorizationFlag({
+      stepId,
+      authId: deletedAuth.authorizationId,
+      isDeleting: true,
+      error: '',
+    });
+
+    context?.eventEmitter.emit('did-begin-remove-authorization', {
+      authorizationId: Number(deletedAuth.authorizationId),
+    });
+    props.removeAuthorization({
+      stepId,
+      authId: deletedAuth.authorizationId,
+    });
+    context?.eventEmitter.emit('did-remove-authorization', {
+      authorizationId,
+      appId,
+    });
+  };
+
+  const onAuthResponseReceived = (
+    messageEvent: MessageEvent<AuthData>,
+    stepId: number,
+  ) => {
+    if (isAuthMessage(messageEvent) && messageEvent.data.activity_name) {
+      if (stepId) {
+        const authId = Number(messageEvent.data.authorization_id);
+        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,
+          });
+        }
+        // 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,
+        // });
+      }
+    }
+  };
+
+  useEffect(() => {
+    const { renderMode } = props;
+    if (defaultFlowId !== 0) {
+      if (renderMode === TemplateFormRenderModes.DETACHED) {
+        context?.eventEmitter.emit('should-load-flow', {
+          templateId: defaultFlowId,
+          flowId: defaultFlowId,
+        });
+      } else if (defautlIntegrationId !== 0) {
+        props.setStoreState({
+          showSetupModal: renderMode === TemplateFormRenderModes.MODAL,
+          showSetupInline: renderMode === TemplateFormRenderModes.INLINE,
+          integrationIdToEdit: defautlIntegrationId,
+          genericData: {
+            ...props.genericData,
+            templateId: defaultFlowId,
+            name: '',
+          },
+        });
+      } else {
+        props.setStoreState({
+          showSetupModal: renderMode === TemplateFormRenderModes.MODAL,
+          showSetupInline: renderMode === TemplateFormRenderModes.INLINE,
+          genericData: {
+            ...props.genericData,
+            templateId: defaultFlowId,
+            name: '',
+          },
+        });
+      }
+    }
+
+    if (props.renderFlowsMode === TemplateFormRenderModes.MODAL) {
+      props.setStoreState({
+        showFlowsListModal: true,
+      });
+    }
+  }, []);
+
+  const {
+    renderMode,
+    renderFlowsMode,
+    layout,
+    deploymentId,
+    showSetupInline,
+    showSetupModal,
+    resetTemplateFields,
+    genericData,
+  } = props;
+  const viewStyle = (genericData.viewStyle || 'comfortable').toLowerCase();
+  const mainViewStyle = `flows-${viewStyle}-view--${renderFlowsMode}`;
+
+  return html`
+    <div
+      id="flows-${(genericData.viewStyle || 'comfortable').toLowerCase()}-view"
+      class="${styles['integry-container']} ${props.genericData.viewStyle ===
+      ViewStyles.COMPACT
+        ? styles['compact-view']
+        : ''} ${styles[mainViewStyle]}"
+    >
+      ${renderFlowsMode === TemplateFormRenderModes.MODAL
+        ? !showSetupModal &&
+          html`
+        <${Modal}
+          isOpen=${props.showFlowsListModal}
+          isCompact=${genericData.viewStyle === ViewStyles.COMPACT}
+          onClose=${() => {
+            props.resetTemplateFields();
+            if (!props.genericData.isPreviewMode) {
+              props.setStoreState({
+                showFlowsListModal: false,
+              });
+            }
+          }}
+          CustomCloseElement=${() => html` <svg
+            style="cursor:pointer; position: absolute; right: 25px; top: 25px;"
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13 1L1 13"
+              stroke="#4F4F4F"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M1 1L13 13"
+              stroke="#4F4F4F"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>`}
+        >
+        <div class="integry-container__setup-form--modal" style="height: 100%;">
+        <div class=${styles.flowName}></div>
+            <${templateListComponent.current}
+              layout=${layout}
+              renderMode=${renderMode}
+              renderFlowsMode=${renderFlowsMode}
+              deploymentId=${deploymentId}
+              apiHandler=${context?.apiHandler}
+              eventEmitter=${context?.eventEmitter}
+              onTemplateClick=${onTemplateClick}
+            >
+            </${templateListComponent.current}>
+          </div>
+            <//>
+          `
+        : !showSetupInline &&
+          html`
+            <${templateListComponent.current}
+              layout=${layout}
+              renderMode=${renderMode}
+              renderFlowsMode=${renderFlowsMode}
+              deploymentId=${deploymentId}
+              apiHandler=${context?.apiHandler}
+              eventEmitter=${context?.eventEmitter}
+              onTemplateClick=${onTemplateClick}
+            >
+            </${templateListComponent.current}>
+          `}
+      ${renderMode === TemplateFormRenderModes.INLINE &&
+      showSetupInline &&
+      html`
+        <div
+          class="${props.genericData.viewStyle === ViewStyles.COMPACT
+            ? styles.inlineSetupCompact
+            : styles.inlineSetup} ${'integry-container__setup-form--inline'}"
+        >
+          <div
+            class=${props.genericData.testMultipurpose
+              ? styles.flowNameCompact
+              : styles.flowName}
+            style="${genericData.viewStyle === ViewStyles.COMPACT
+              ? 'margin: 0; width: 100%;'
+              : ''}"
+          >
+            ${props.genericData.testMultipurpose &&
+            html`
+              ${getSelectedStep().shouldShowBackButton &&
+              html`<svg
+                style="cursor: pointer;z-index: 1;"
+                onclick=${() => {
+                  if (getSelectedStep().shouldShowBackButton) {
+                    const currentSelectedStep =
+                      props.stepState?.steps[props.stepState?.stepIndex - 1];
+                    if (currentSelectedStep.type === 'AUTH') {
+                      props.resetTemplateFields();
+                    } else {
+                      props.gotoPreviousStep();
+                    }
+                  } else {
+                    props.resetTemplateFields();
+                  }
+                }}
+                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="${props.genericData.viewStyle === ViewStyles.COMPACT
+                  ? styles.flowNameGroupCompact
+                  : styles.flowNameGroup}"
+              >
+                <img
+                  src=${props.genericData.brandingApp?.icon_url ||
+                  getSelectedStep().selectedStep?.step.authorization_type.app
+                    .icon_url ||
+                  getSelectedStep().selectedStep?.step.activity.app.icon_url}
+                />
+                <span> ${getContainerName()} </span>
+              </div>
+            `}
+            ${!props.genericData.testMultipurpose &&
+            html` <svg
+                style="cursor: pointer;"
+                onclick=${() => {
+                  props.resetTemplateFields();
+                }}
+                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>
+              ${getContainerName()}`}
+          </div>
+          <div class=${styles.flowAccountWrap}>
+            ${props.stepState.currentStep?.type === 'CONFIGURATION' &&
+            (props.genericData.selfAppId !==
+              getSelectedStep().selectedStep?.step.activity.app.id ||
+              props.genericData.isPreviewMode) &&
+            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}
+              stepId=${Number(getSelectedStep().selectedStep?.step.id)}
+              onAuthSelected=${(authId: number, status: boolean) => {
+                handleAuthSelected(
+                  authId,
+                  Number(getSelectedStep().selectedStep?.step.id),
+                  status,
+                  false,
+                );
+              }}
+            />`}
+          </div>
+          <${FlowSetupContainer}
+            deploymentId=${props.deploymentId || props.genericData.deploymentId}
+            flowId=${props.genericData.templateId}
+            hideStepCount=${props.genericData.testMultipurpose}
+            hideStepNavigation=${props.genericData.testMultipurpose}
+            setupContainerStyle="${genericData.viewStyle === ViewStyles.COMPACT
+              ? ''
+              : ''}"
+            stepContainerStyle="${genericData.viewStyle === ViewStyles.COMPACT
+              ? 'padding: 0;'
+              : ''}"
+            params=${flowParams}
+          />
+          <div
+            class=${styles.close}
+            onclick=${() => {
+              resetTemplateFields();
+            }}
+          >
+            <svg
+              width="20"
+              height="22"
+              viewBox="0 0 20 22"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M14.2426 16.1822L5.75732 6.86328"
+                stroke="#999999"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+              <path
+                d="M14.2426 6.86328L5.75732 16.1822"
+                stroke="#999999"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+          </div>
+        </div>
+      `}
+    </div>
+    ${renderMode === TemplateFormRenderModes.MODAL &&
+    html`
+      <${Modal}
+          isOpen=${props.showSetupModal}
+          onClose=${() => {
+            props.resetTemplateFields();
+            if (!props.genericData.isPreviewMode) {
+              props.setStoreState({
+                showFlowsListModal: false,
+              });
+            }
+          }}
+          isCompact=${genericData.viewStyle === ViewStyles.COMPACT}
+          CustomCloseElement=${() => html` <svg
+            style="cursor:pointer; position: absolute; right: 25px; top: 25px;"
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13 1L1 13"
+              stroke="#4F4F4F"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M1 1L13 13"
+              stroke="#4F4F4F"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>`}
+        >
+      <div class="integry-container__setup-form--modal" style="height: calc(100% - 85px);">
+        <div class=${
+          props.genericData.testMultipurpose
+            ? styles.flowNameCompact
+            : styles.flowName
+        } style="${
+      props.genericData.viewStyle === ViewStyles.COMPACT
+        ? 'padding-top: 16px; width: calc(100% - 60px);'
+        : props.genericData.testMultipurpose
+        ? 'padding-top: 16px;'
+        : ''
+    }">
+        ${
+          props.genericData.testMultipurpose &&
+          html`
+            ${getSelectedStep().shouldShowBackButton &&
+            html`
+              <svg
+                style="cursor: pointer; z-index: 1;"
+                onclick=${() => {
+                  if (getSelectedStep().shouldShowBackButton) {
+                    const currentSelectedStep =
+                      props.stepState?.steps[props.stepState?.stepIndex - 1];
+                    if (currentSelectedStep.type === 'AUTH') {
+                      props.resetTemplateFields();
+                    } else {
+                      props.gotoPreviousStep();
+                    }
+                  } else {
+                    props.resetTemplateFields();
+                  }
+                }}
+                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="${props.genericData.viewStyle === ViewStyles.COMPACT
+                ? styles.flowNameGroupCompact
+                : styles.flowNameGroup}"
+            >
+              <img
+                src=${props.genericData.brandingApp?.icon_url ||
+                getSelectedStep().selectedStep?.step.authorization_type.app
+                  .icon_url ||
+                getSelectedStep().selectedStep?.step.activity.app.icon_url}
+              />
+              <span>${getContainerName()}</span>
+            </div>
+          `
+        }
+          ${
+            !props.genericData.testMultipurpose &&
+            html` <svg
+                style="cursor: pointer;"
+                onclick=${() => {
+                  props.resetTemplateFields();
+                }}
+                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>
+              ${getContainerName()}`
+          }
+        </div>
+        <div class=${styles.flowAccountWrap}>
+          ${
+            props.stepState.currentStep?.type === 'CONFIGURATION' &&
+            (props.genericData.selfAppId !==
+              getSelectedStep().selectedStep?.step.activity.app.id ||
+              props.genericData.isPreviewMode) &&
+            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}
+              stepId=${Number(getSelectedStep().selectedStep?.step.id)}
+              onAuthSelected=${(authId: number, status: boolean) => {
+                handleAuthSelected(
+                  authId,
+                  Number(getSelectedStep().selectedStep?.step.id),
+                  status,
+                  false,
+                );
+              }}
+            />`
+          }
+        </div>
+          <${FlowSetupContainer}
+            deploymentId=${props.deploymentId || props.genericData.deploymentId}
+            flowId=${props.genericData.templateId}
+            isInModal=${true}
+            hideStepCount=${props.genericData.testMultipurpose}
+            hideStepNavigation=${props.genericData.testMultipurpose}
+            params=${flowParams}
+          ><//>
+          <//>
+        </div>
+    `}
+  `;
+};
+
+export default connect<ContainerProps, unknown, StoreType, unknown>(
+  [
+    'userConfig',
+    'integrations',
+    'templates',
+    'showSetupModal',
+    'genericData',
+    'showSetupInline',
+    'integrationIdToEdit',
+    'showFlowsListModal',
+    'stepMapping',
+    'stepState',
+    'stepDataMapping',
+  ],
+  actionFunctions,
+)(SDKContainer);