@integry/sdk 4.7.39 → 4.7.41

package/src/index.ts

@@ -1,2244 +0,0 @@
-import { html, render } from 'htm/preact';
-import { Provider } from 'unistore/preact';
-
-import { IntegryAPI } from '@/modules/api';
-import {
-  InitConfig,
-  ConfigWithObject,
-  ConfigWithUrlParams,
-  APIConfig,
-  PreviewPayload,
-  MarketplaceConfig,
-  MultipurposeFieldType,
-  FunctionFieldType,
-  ConnectedAccount,
-  MarketplaceApp,
-} from '@/interfaces';
-
-import { HMAC } from '@/extensions/HMAC';
-
-import { EventEmitter } from '@/modules/event-emitter';
-import AppContext from '@/contexts/AppContext';
-
-import {
-  IntegrySDKEvents,
-  MarketplaceRenderModes,
-  TemplateFormRenderModes,
-  TemplateListingRenderModes,
-  ViewStyles,
-  RenderModes,
-  Layouts,
-  SetupIntegrationOptions,
-  RenderFlowStepOptions,
-  RenderMappingMenuOptions,
-  ShowFunctionOptions,
-} from '@/types';
-
-import { createSDKStore, initialState } from '@/store';
-import isBrowser from '@/utils/isBrowser';
-import { getUrlParam } from '@/utils/getUrlParam';
-
-import SDKContainer from '@/features/containers/SDKContainer';
-import SDKFailedContainer from '@/features/containers/SDKFailedContainer';
-import AuthSetupContainer from '@/features/containers/AuthSetupContainer';
-import FlowSetupContainer from '@/features/containers/FlowSetupContainer';
-import MarketplaceContainer from '@/features/containers/MarketplaceContainer';
-import AppFlowContainer from '@/features/containers/AppFlowContainer';
-import MarketplaceAppsContainer from '@/features/containers/MarketplaceAppsContainer';
-import ActionForm from '@/features/common/ActionForm';
-import { TagsMenu } from '@/components/TagsMenu';
-
-import FunctionForm from '@/features/common/FunctionForm';
-import { openPopupWindow } from '@/utils/popup';
-import { Modal } from '@/components/Modal';
-import {
-  JSONToActivityOutputData,
-  arrayToNestedJSONWithFirstValue,
-} from '@/utils/ActivityOutputUtils';
-import { ListBox } from '@/components/MultipurposeField/Dropdown';
-import { FunctionField } from '@/components/form';
-import { MultipurposeField } from './components/MultipurposeField';
-import SDKDebugContainer from './features/containers/SDKDebugContainer';
-
-const Helpers = { getAuthHash: HMAC };
-
-// eslint-disable-next-line no-underscore-dangle
-const __buildVersion__ = '';
-
-/**
- * Integry JS SDK
- */
-export class IntegryJS {
-  static SDK_VERSION = __buildVersion__;
-
-  private config: ConfigWithObject & ConfigWithUrlParams;
-
-  private apiHandler: IntegryAPI;
-
-  private initConfig: InitConfig;
-
-  eventEmitter = new EventEmitter<IntegrySDKEvents>();
-
-  // allow customers to use template tagging
-  static html = html;
-
-  static RenderModes: typeof RenderModes = RenderModes;
-
-  static TemplateFormRenderModes: typeof TemplateFormRenderModes =
-    TemplateFormRenderModes;
-
-  static Layouts: typeof Layouts = Layouts;
-
-  static ViewStyles: typeof ViewStyles = ViewStyles;
-
-  static MarketplaceRenderModes: typeof MarketplaceRenderModes =
-    MarketplaceRenderModes;
-
-  static Helpers: {
-    getAuthHash: (key: string, message: string) => Promise<string>;
-  };
-
-  private authModalId = '';
-
-  private forceRerender = false;
-
-  constructor(config: ConfigWithObject | ConfigWithUrlParams) {
-    let integryAPIParams: APIConfig;
-
-    const baseUrl = config.baseUrl || 'https://app.integry.io';
-
-    const baseAPIUrl = 'https://api.integry.io';
-
-    const configUpdated = config;
-
-    // perform the overrides according to new configuration syntax
-    if (configUpdated.user) {
-      const { userId, apiKey, ...extras } = configUpdated.user;
-      if (!('userId' in configUpdated)) {
-        (configUpdated as any).userId = '';
-      }
-      if ('userId' in configUpdated) {
-        configUpdated.userId = userId.toString();
-      }
-      if (!configUpdated.xIntegryConfig) {
-        configUpdated.xIntegryConfig = {};
-      }
-
-      if (!configUpdated.xIntegryConfig.appAuth) {
-        configUpdated.xIntegryConfig.appAuth = {};
-      }
-
-      if (!configUpdated.xIntegryConfig.appAuth.extras) {
-        configUpdated.xIntegryConfig.appAuth.extras = {};
-      }
-
-      configUpdated.xIntegryConfig.appAuth.apiKey = (apiKey || '').toString();
-      configUpdated.xIntegryConfig.appAuth.extras = extras as Record<
-        string,
-        string | number
-      >;
-    }
-
-    const apiConfig = {
-      oauthVerifyPath: 'auth/verify',
-      endpointsUrl: 'https://integry-app.appspot.com',
-      baseUrl,
-      baseUrlv2: `${baseUrl}/v2`,
-      baseAPIUrl: `${baseAPIUrl}`,
-      apiKey: configUpdated.xIntegryConfig?.appAuth?.apiKey,
-      authId: configUpdated.xIntegryConfig?.appAuth?.authId,
-      extras: configUpdated.xIntegryConfig?.appAuth?.extras,
-    };
-
-    const userConfig = configUpdated.options || configUpdated.userConfig || {};
-    if (configUpdated.options && configUpdated.payloads) {
-      configUpdated.options.objects = config.payloads;
-    }
-
-    if ('appKey' in configUpdated) {
-      integryAPIParams = {
-        ...configUpdated,
-        ...apiConfig,
-        appKey: configUpdated.appKey,
-        hash: configUpdated.hash,
-        userId: configUpdated.userId,
-      };
-      this.config = {
-        ...configUpdated,
-        ...apiConfig,
-        appKey: configUpdated.appKey,
-        hash: configUpdated.hash,
-        userId: configUpdated.userId,
-        deploymentId: configUpdated.deploymentId,
-        userConfig: configUpdated.deploymentId
-          ? {
-              ...userConfig,
-              tags: userConfig?.tags
-                ? [...userConfig?.tags, `${configUpdated.deploymentId}`]
-                : [`${configUpdated.deploymentId}`],
-            }
-          : userConfig,
-      };
-    } else {
-      const urlparams = this.getAuthParamsFromUrl() || {};
-      integryAPIParams = {
-        ...apiConfig,
-        ...urlparams,
-      };
-      this.config = {
-        ...apiConfig,
-        ...urlparams,
-        userConfig: configUpdated.userConfig,
-      };
-    }
-    this.authModalId = this.getRandomFlowId(6);
-    this.apiHandler = new IntegryAPI(integryAPIParams);
-    this.verifyAuthConfig()
-      .then((response) => {
-        if (!response?.config_verified) {
-          console.error(
-            'IntegrySDK: Auth config verification failed, are your auth parameters correct?',
-          );
-        } else {
-          this.eventEmitter.emit('ready', {
-            isReady: true,
-          });
-        }
-      })
-      .catch((err) => console.error(err));
-    this.initConfig = {
-      containerId: '',
-      renderMode: TemplateFormRenderModes.INLINE,
-    };
-  }
-
-  /**
-   * Handler function when SDK has failed to load.
-   */
-  private SDKFailedHandler = (config: any, containerId: string) => {
-    const userConfig = config.options || config.userConfig || {};
-    const targetEl = document.getElementById(containerId);
-    if (targetEl) {
-      render(
-        html`
-          <${SDKFailedContainer}
-            message="SDK failed to load"
-            debug=${userConfig.debug}
-            config=${userConfig.debug ? config : null}
-          >
-          <//>
-        `,
-        targetEl,
-      );
-    }
-    throw new Error('IntegrySDK: SDK failed to load');
-  };
-
-  /**
-   *
-   * @param length Length of string to randomly generate
-   * @returns {string} Returns a random string
-   */
-  private getRandomFlowId = (length: number): string => {
-    const result = [];
-    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-    const charactersLength = characters.length;
-    for (let i = 0; i < length; i += 1) {
-      result.push(
-        characters.charAt(Math.floor(Math.random() * charactersLength)),
-      );
-    }
-    return `x-integry-modal-${result.join('')}`;
-  };
-
-  private getAuthParamsFromUrl = (): ConfigWithObject => {
-    const urlParams =
-      isBrowser() && new URLSearchParams(window.location.search);
-    if (urlParams) {
-      const userId = urlParams.get('user_id');
-      const appKey = urlParams.get('app_key');
-      const hash = urlParams.get('hash');
-      const deploymentId = urlParams.get('deployment_id');
-      if (!userId || !appKey || !hash || !deploymentId) {
-        throw new Error(
-          `The following auth variables are undefined: ${
-            !userId ? 'userId' : ''
-          } ${!appKey ? 'appKey' : ''} ${!hash ? 'hash' : ''} ${
-            !deploymentId ? 'deploymentId' : ''
-          }`,
-        );
-      }
-      return {
-        userId,
-        appKey,
-        hash,
-        deploymentId,
-      };
-    }
-    return {
-      userId: '',
-      appKey: '',
-      hash: '',
-      deploymentId: '',
-    };
-  };
-
-  /**
-   * Prints version number of this SDK version
-   */
-  public printVersion = (): void => {
-    console.info(`@integry/sdk@${IntegryJS.SDK_VERSION}`);
-  };
-
-  /**
-   *
-   * @param renderMode
-   * @param templateContainerId
-   * @returns {HTMLElement | null}
-   */
-  private setupFlowFormDestination = (
-    renderMode: TemplateFormRenderModes,
-    templateContainerId?: string,
-  ): HTMLElement | null => {
-    let el: HTMLElement | null = null;
-
-    if (templateContainerId) {
-      if (
-        renderMode === TemplateFormRenderModes.MODAL ||
-        renderMode === TemplateFormRenderModes.INLINE
-      ) {
-        throw new Error(
-          'The `templateContainerId` property is unsupported when render mode is set to "MODAL" or "INLINE"',
-        );
-      }
-      el = document.getElementById(templateContainerId);
-      if (!el) {
-        console.warn(
-          `The template form render target with id ${templateContainerId} was not found`,
-        );
-        // throw new Error('The template form render target was not found');
-      }
-    }
-
-    switch (renderMode) {
-      case TemplateFormRenderModes.MODAL:
-        el = document.createElement('div');
-        el.id = this.getRandomFlowId(8);
-        document.body.appendChild(el);
-        return el;
-      case TemplateFormRenderModes.INLINE:
-        return null;
-      case TemplateFormRenderModes.DETACHED:
-        return el;
-      case TemplateFormRenderModes.CUSTOM:
-        return el;
-      default:
-        throw new Error(
-          `Unsupported renderMode ${renderMode} configuration, please provide one of ${JSON.stringify(
-            Object.keys(TemplateFormRenderModes),
-          )}`,
-        );
-    }
-  };
-
-  /**
-   * Render the template form we ship
-   * @param data
-   */
-  public renderFlowSetupForm = (data: {
-    flowId?: string;
-    integrationId?: number;
-    flowContainerId: string;
-    versionId?: number;
-    viewStyle?: string;
-  }): void => {
-    const { flowId, flowContainerId, versionId, viewStyle } = data;
-    const targetEl = document.getElementById(flowContainerId);
-    if (!targetEl) {
-      console.warn(
-        `Integry template form render target with id ${flowContainerId} was not found`,
-      );
-      return;
-    }
-    let parsedFlowId = Number(flowId);
-    let parsedIntegrationId = this.config.integrationId || data.integrationId;
-
-    if (!parsedIntegrationId) {
-      parsedIntegrationId = Number(getUrlParam('integrationId'));
-    }
-
-    if (!parsedFlowId) {
-      parsedFlowId = Number(getUrlParam('flowId'));
-    }
-
-    const store = createSDKStore();
-
-    store.setState({
-      integrationIdToEdit: parsedIntegrationId,
-      userConfig: this.config.userConfig,
-      genericData: {
-        ...initialState.genericData,
-        implicitAuthEnabled: !!this.config.xIntegryConfig?.appAuth?.apiKey,
-        deploymentId: Number(this.config.deploymentId),
-        isAnonymous: !!this.config.xIntegryConfig?.isAnonymous,
-        viewStyle: viewStyle || ViewStyles.COMFORTABLE,
-        testMultipurpose: true,
-        customFlowSetupRender: true,
-      },
-    });
-
-    render(
-      html`
-        <${AppContext.Provider}
-          value=${{
-            apiHandler: this.apiHandler,
-            eventEmitter: this.eventEmitter,
-            isPreviewMode: false,
-          }}
-        >
-          <${Provider} store=${store} key=${this.getRandomFlowId(10)}>
-            <${SDKContainer}
-              deploymentId=${this.config.deploymentId}
-              userConfig=${this.config.userConfig}
-              layout=${TemplateListingRenderModes.LIST}
-              renderMode=${this.initConfig.renderMode}
-              renderFlowsMode=${this.initConfig.renderFlowsMode ||
-              TemplateFormRenderModes.INLINE}
-              flowId=${parsedFlowId}
-              integrationId=${parsedIntegrationId}
-            >
-            <//>
-          <//>
-        <//>
-      `,
-      targetEl,
-    );
-  };
-
-  public setupIntegration = (
-    flowId: string,
-    options: SetupIntegrationOptions = {
-      containerId: 'integry-marketplace',
-      renderMode: RenderModes.MODAL,
-      layout: Layouts.WIDE,
-      params: {},
-    },
-  ): void => {
-    const targetEl = document.getElementById(options.containerId || '');
-    if (!targetEl) {
-      console.warn(
-        `Integry template form render target with id ${options.containerId} was not found`,
-      );
-      return;
-    }
-    let parsedFlowId = Number(flowId);
-    let parsedIntegrationId = options.integrationId || null;
-
-    if (!parsedIntegrationId) {
-      parsedIntegrationId = Number(getUrlParam('integrationId'));
-    }
-
-    if (!parsedFlowId) {
-      parsedFlowId = Number(getUrlParam('flowId'));
-    }
-
-    const store = createSDKStore();
-
-    store.setState({
-      integrationIdToEdit: parsedIntegrationId,
-      userConfig: this.config.userConfig,
-      genericData: {
-        ...initialState.genericData,
-        implicitAuthEnabled: !!this.config.xIntegryConfig?.appAuth?.apiKey,
-        deploymentId: Number(this.config.deploymentId),
-        isAnonymous: !!this.config.xIntegryConfig?.isAnonymous,
-        viewStyle: options.layout || ViewStyles.COMFORTABLE,
-        testMultipurpose: true,
-        customFlowSetupRender: true,
-      },
-    });
-
-    render(
-      html`
-        <${AppContext.Provider}
-          value=${{
-            apiHandler: this.apiHandler,
-            eventEmitter: this.eventEmitter,
-            isPreviewMode: false,
-          }}
-        >
-          <${Provider} store=${store} key=${this.getRandomFlowId(10)}>
-            <${SDKContainer}
-              deploymentId=${this.config.deploymentId}
-              userConfig=${this.config.userConfig}
-              layout=${TemplateListingRenderModes.LIST}
-              renderMode=${options.renderMode}
-              renderFlowsMode=${options.renderMode}
-              flowId=${parsedFlowId}
-              integrationId="${parsedIntegrationId}"
-              params=${options.params}
-            >
-            <//>
-          <//>
-        <//>
-      `,
-      targetEl,
-    );
-  };
-
-  public showFunctionUI = (
-    functionName: string,
-    functionArguments: {
-      [key: string]: any;
-    } = {},
-    connectedAccountId?: string,
-  ): Promise<Record<any, any>> => {
-    const store = createSDKStore();
-
-    return new Promise((resolve, reject) => {
-      this.apiHandler
-        .getFunctionDetails(functionName)
-        .then((response: any) => {
-          if (!response) {
-            return reject(new Error('Function not found.'));
-          }
-          if (response.meta.app.connected_accounts.length === 0) {
-            return reject(new Error('No connected account found.'));
-          }
-          if (
-            connectedAccountId &&
-            !response.meta.app.connected_accounts.find(
-              (account: any) => account.id === connectedAccountId,
-            )
-          ) {
-            return reject(new Error('Connected account not found.'));
-          }
-
-          let targetEl = document.getElementById(this.initConfig.containerId);
-          if (!targetEl) {
-            targetEl = document.createElement('div');
-            targetEl.id = this.authModalId;
-            document.body.appendChild(targetEl);
-          }
-
-          store.setState({
-            userConfig: this.config.userConfig,
-            genericData: {
-              ...initialState.genericData,
-              implicitAuthEnabled:
-                !!this.config.xIntegryConfig?.appAuth?.apiKey,
-              deploymentId: Number(this.config.deploymentId),
-              isAnonymous: !!this.config.xIntegryConfig?.isAnonymous,
-            },
-          });
-
-          render(
-            html`
-              <div id="functionFormWrap">
-                <${Modal}
-                  isOpen=${true}
-                  onClose=${() => {
-                    const authIdElement = document.getElementById(
-                      this.authModalId,
-                    );
-                    if (authIdElement) {
-                      authIdElement.remove();
-                      this.eventEmitter.emit('modal-closed', {});
-                    }
-                  }}
-                  className="flowAppsModal"
-                  isCompact=${false}
-                >
-                  ${html`<${AppContext.Provider}
-                  value=${{
-                    apiHandler: this.apiHandler,
-                    eventEmitter: this.eventEmitter,
-                    isPreviewMode: false,
-                  }}
-                >
-                  <${Provider} store=${store}>
-                    <${FunctionForm}
-                      functionName=${functionName}
-                      connectedAccountId=${connectedAccountId}
-                      functionArguments=${functionArguments}
-                      apiHandler=${this.apiHandler}
-                      onClose=${(functionUIResponse: any) => {
-                        const authIdElement = document.getElementById(
-                          this.authModalId,
-                        );
-                        if (authIdElement) {
-                          authIdElement.remove();
-                        }
-                        resolve(functionUIResponse);
-                      }}
-                    >
-                  <//>
-                </${AppContext.Provider}>`}
-                <//>
-              </div>
-            `,
-            targetEl,
-          );
-
-          // Ensure the function has a return value
-          return null;
-        })
-        .catch((err) => {
-          reject(err);
-        });
-    });
-  };
-
-  public showFunction = (
-    functionName: string,
-    options: ShowFunctionOptions = {
-      params: {},
-      payload: {},
-      connectedAccountId: '',
-      autoMapPayload: false,
-      version: null,
-      allow_workspace_connected_accounts: false,
-    },
-  ): Promise<Record<any, any>> => {
-    const store = createSDKStore();
-
-    return new Promise((resolve, reject) => {
-      this.apiHandler
-        .getFunctionDetails(
-          functionName,
-          options.autoMapPayload ? options.payload : {},
-          options.version,
-          options.allow_workspace_connected_accounts,
-        )
-        .then((response: any) => {
-          if (!response) {
-            return reject(new Error('Function not found.'));
-          }
-          if (response.meta.app.connected_accounts.length === 0) {
-            return reject(new Error('No connected account found.'));
-          }
-          if (
-            options.connectedAccountId &&
-            !response.meta.app.connected_accounts.find(
-              (account: any) =>
-                Number(account.id) === Number(options.connectedAccountId),
-            )
-          ) {
-            return reject(new Error('Connected account not found.'));
-          }
-
-          let targetEl = document.getElementById(this.initConfig.containerId);
-          if (!targetEl) {
-            targetEl = document.createElement('div');
-            targetEl.id = this.authModalId;
-            document.body.appendChild(targetEl);
-          }
-
-          store.setState({
-            userConfig: this.config.userConfig,
-            genericData: {
-              ...initialState.genericData,
-              implicitAuthEnabled:
-                !!this.config.xIntegryConfig?.appAuth?.apiKey,
-              deploymentId: Number(this.config.deploymentId),
-              isAnonymous: !!this.config.xIntegryConfig?.isAnonymous,
-            },
-          });
-
-          render(
-            html`
-              <div id="functionFormWrap">
-                <${Modal}
-                  isOpen=${true}
-                  onClose=${() => {
-                    const authIdElement = document.getElementById(
-                      this.authModalId,
-                    );
-                    if (authIdElement) {
-                      authIdElement.remove();
-                      this.eventEmitter.emit('modal-closed', {});
-                    }
-                  }}
-                  className="flowAppsModal"
-                  isCompact=${false}
-                >
-                  ${html`<${AppContext.Provider}
-                  value=${{
-                    apiHandler: this.apiHandler,
-                    eventEmitter: this.eventEmitter,
-                    isPreviewMode: false,
-                  }}
-                >
-                  <${Provider} store=${store}>
-                    <${FunctionForm}
-                      functionName=${functionName}
-                      connectedAccountId=${options.connectedAccountId}
-                      functionArguments=${options.params}
-                      variables=${options.payload}
-                      autoMapVars=${options.autoMapPayload}
-                      version=${options.version}
-                      allowWorkspaceConnectedAccounts=${
-                        options.allow_workspace_connected_accounts
-                      }
-                      apiHandler=${this.apiHandler}
-                      onClose=${(functionUIResponse: any) => {
-                        const authIdElement = document.getElementById(
-                          this.authModalId,
-                        );
-                        if (authIdElement) {
-                          authIdElement.remove();
-                        }
-                        resolve(functionUIResponse);
-                      }}
-                    >
-                  <//>
-                </${AppContext.Provider}>`}
-                <//>
-              </div>
-            `,
-            targetEl,
-          );
-
-          // Ensure the function has a return value
-          return null;
-        })
-        .catch((err) => {
-          reject(err);
-        });
-    });
-  };
-
-  public invokeFunction = (
-    functionName: string,
-    params: {
-      [key: string]: any;
-    },
-    connectedAccountId: string,
-  ): Promise<Record<any, any>> =>
-    new Promise((resolve, reject) => {
-      // Prepare the request body by encoding `args` to JSON
-      const functionDetails = {
-        method: this.getMethod(),
-        url: `${this.getBaseAPIUrl()}/functions/${functionName}/call/`,
-        headers: this.getHeaders(),
-        args: params,
-      };
-      this.apiHandler
-        .invokeFunction(functionDetails, connectedAccountId)
-        .then((response: any) => {
-          // Check if the response has an error or is not valid (you can customize this check based on the API response structure)
-          resolve(response);
-        })
-        .catch((error: any) => {
-          reject(
-            new Error(
-              `Failed to invoke function: ${error.message || 'Unknown error'}`,
-            ),
-          );
-        });
-    });
-
-  public callFunction = (
-    functionName: string,
-    params: {
-      [key: string]: any;
-    },
-    vars: {
-      [key: string]: any;
-    } = {},
-    connectedAccountId: string,
-    version: string | null = null,
-    allow_workspace_connected_accounts = false,
-  ): Promise<Record<any, any>> =>
-    new Promise((resolve, reject) => {
-      // Prepare the request body by encoding `args` to JSON
-      const headers: Record<string, string> = {
-        ...this.getHeaders(),
-      };
-      if (version) {
-        headers.Version = version;
-      }
-      let url = `${this.getBaseAPIUrl()}/functions/${functionName}/call/`;
-      if (allow_workspace_connected_accounts) {
-        url += '?allow_workspace_connected_accounts=true';
-      }
-      const functionDetails = {
-        method: this.getMethod(),
-        url,
-        headers,
-        args: params,
-        vars,
-      };
-      this.apiHandler
-        .invokeFunction(functionDetails, connectedAccountId)
-        .then((response: any) => {
-          // Check if the response has an error or is not valid (you can customize this check based on the API response structure)
-          resolve(response);
-        })
-        .catch((error: any) => {
-          reject(
-            new Error(
-              `Failed to call function: ${error.message || 'Unknown error'}`,
-            ),
-          );
-        });
-    });
-
-  public connectApp = (appName: string): Promise<string> =>
-    new Promise((resolve, reject) => {
-      // Open the child window
-      this.apiHandler.getApp(appName).then((app) => {
-        if (!app || !app.login_url || app.login_url === '') {
-          reject(
-            new Error(
-              `App not found or doesn't require an authentication: ${appName}`,
-            ),
-          );
-          return;
-        }
-        const authWindow = openPopupWindow(
-          app.login_url,
-          'Auth Window',
-          window,
-          800,
-          600,
-        );
-
-        // Function to handle the auth response from the child window
-        const onAuthResponseReceived = (event: MessageEvent) => {
-          // Verify the message origin (for security)
-          if (event.origin !== 'https://app.integry.io') return;
-
-          // Check if the message contains the connectedAccountId
-          if (
-            typeof event.data === 'object' &&
-            event.data !== null &&
-            'authorization_id' in event.data
-          ) {
-            const { authorization_id } = event.data;
-            // Resolve the Promise with the connectedAccountId
-            resolve(`${authorization_id}`);
-
-            // Clean up event listener
-            window.removeEventListener('message', onAuthResponseReceived);
-            // Close the auth window
-            if (authWindow) authWindow.close();
-            this.eventEmitter.emit('app-connected', app);
-          } else {
-            reject(new Error('No connected account ID received'));
-          }
-        };
-
-        // Add the message event listener
-        window.addEventListener('message', onAuthResponseReceived);
-
-        // Handle cases where the user closes the auth window without completing auth
-        const checkWindowClosed = setInterval(() => {
-          if (authWindow && authWindow.closed) {
-            clearInterval(checkWindowClosed);
-            window.removeEventListener('message', onAuthResponseReceived);
-            reject(new Error('Auth window closed by user'));
-          }
-        }, 500);
-      });
-    });
-
-  public disconnectApp = (
-    appName: string,
-    connectedAccountId?: string,
-  ): Promise<any> => {
-    if (!connectedAccountId && !appName) {
-      return Promise.reject(
-        new Error(
-          `'appName' or 'connectedAccountId' are required when calling 'disconnectApp'`,
-        ),
-      );
-    }
-
-    if (connectedAccountId) {
-      return this.apiHandler
-        .deleteAuth(Number(connectedAccountId))
-        .then((response) => {
-          this.getApp(appName).then((app) => {
-            this.eventEmitter.emit('app-disconnected', app);
-          });
-          return response;
-        })
-        .catch((error) => Promise.reject(error));
-    }
-    return this.getApp(appName).then((app: any | null) => {
-      // If no connected accounts were found
-      if (
-        !app ||
-        !app.connected_accounts ||
-        app.connected_accounts.length === 0
-      ) {
-        return Promise.reject(
-          new Error(`No connected accounts found for app: ${appName}`),
-        );
-      }
-
-      // If exactly one account is found
-      if (app.connected_accounts.length === 1) {
-        return this.apiHandler
-          .deleteAuth(Number(app.connected_accounts[0].id))
-          .then((response) => {
-            const appUpdated = app;
-            appUpdated.connected_accounts = [];
-            this.eventEmitter.emit('app-disconnected', appUpdated);
-            return response;
-          })
-          .catch((error) => Promise.reject(error));
-      }
-
-      // If more than one account is found
-      return Promise.reject(
-        new Error(`Multiple connected accounts found for app: ${appName}`),
-      );
-    });
-  };
-
-  public isAppConnected = (appName: string): Promise<any> => {
-    if (!appName) {
-      return Promise.reject(
-        new Error(`'appName' is required when calling 'isConnected'`),
-      );
-    }
-
-    return this.apiHandler
-      .getConnectedAccounts(appName)
-      .then((response) => {
-        if (response && response.connected_accounts.length > 0) {
-          return Promise.resolve(true);
-        }
-        return Promise.resolve(false);
-      })
-      .catch((error) => Promise.reject(error));
-  };
-
-  public getFunction = (functionName: string): Promise<any> => {
-    if (!functionName) {
-      return Promise.reject(
-        new Error(
-          `'functionName' is required when calling 'getFunctionSignature'`,
-        ),
-      );
-    }
-
-    return this.apiHandler.getFunctionSignature(functionName);
-  };
-
-  public getConnectedAccounts = (
-    appName: string,
-  ): Promise<ConnectedAccount[] | null> => {
-    if (!appName) {
-      return Promise.reject(
-        new Error(`'appName' is required when calling 'getConnectedAccounts'`),
-      );
-    }
-
-    return this.apiHandler.getConnectedAccounts(appName).then((response) => {
-      // Check if response and connected_accounts are valid and not empty
-      if (response && response.connected_accounts.length > 0) {
-        // Return an array of strings containing only the ids
-
-        return Promise.resolve(response.connected_accounts); // Resolve with the array of ids as strings
-      }
-      return Promise.resolve([]); // Return an empty array if no connected accounts
-    });
-  };
-
-  private getApp = (appName: string): Promise<MarketplaceApp | null> => {
-    if (!appName) {
-      return Promise.reject(
-        new Error(`'appName' is required when calling 'getApp'`),
-      );
-    }
-
-    return this.apiHandler.getApp(appName).then((response) => response);
-  };
-
-  /**
-   * Render the template form we ship
-   * @param data
-   */
-  public renderAccountConnectionModal = (data?: {
-    deploymentId?: string;
-    appId?: number;
-    authTypeId?: number;
-  }): void => {
-    const store = createSDKStore();
-    if (data) {
-      const { appId, authTypeId } = data;
-      if (!appId && authTypeId) {
-        throw new Error(
-          `IntegrySDK: 'authTypeId' cannot be used without providing 'appId' when calling 'renderAccountConnectionModal'`,
-        );
-      }
-    }
-
-    let targetEl = document.getElementById(this.authModalId);
-    if (!targetEl) {
-      targetEl = document.createElement('div');
-      targetEl.id = this.authModalId;
-      document.body.appendChild(targetEl);
-    } else {
-      store.setState({
-        genericData: {
-          ...initialState.genericData,
-          showAppAuthModal: true,
-        },
-      });
-    }
-    if (data && data.authTypeId) {
-      this.forceRerender = !this.forceRerender;
-    }
-
-    store.setState({
-      userConfig: this.config.userConfig,
-      genericData: {
-        ...initialState.genericData,
-        deploymentId:
-          data && data.deploymentId ? Number(data.deploymentId) : null,
-        authConnection: {
-          appId: data && data.appId ? Number(data.appId) : null,
-          authTypeId: data && data.authTypeId ? Number(data.authTypeId) : null,
-        },
-        authModalId: this.authModalId,
-        showAppAuthModal: !data?.authTypeId,
-        isAnonymous: !!this.config.xIntegryConfig?.isAnonymous,
-      },
-    });
-
-    render(
-      html`
-        <${AppContext.Provider}
-          value=${{
-            apiHandler: this.apiHandler,
-            eventEmitter: this.eventEmitter,
-            isPreviewMode: false,
-          }}
-        >
-          <${Provider} store=${store}>
-            <${AuthSetupContainer}
-              deploymentId=${data?.deploymentId}
-              appId=${data?.appId}
-              authTypeId=${data?.authTypeId}
-              forceRerender=${this.forceRerender}
-              onClose=${() => {
-                const authIdElement = document.getElementById(this.authModalId);
-                if (authIdElement) {
-                  authIdElement.remove();
-                }
-              }}
-            >
-            <//>
-          <//>
-        <//>
-      `,
-      targetEl,
-    );
-  };
-
-  public async removeAuthorization(data: { authorizationId: number }): Promise<{
-    data: string | null;
-    status: number;
-  } | null> {
-    /// throw error if authId is not provided
-    if (!data.authorizationId) {
-      throw new Error(
-        `'authorizationId' is required when calling 'removeAuthorization'`,
-      );
-    }
-    return this.apiHandler.deleteAuth(data.authorizationId).then((response) => {
-      this.eventEmitter.emit('did-remove-authorization', {
-        authorizationId: Number(data.authorizationId),
-      });
-      this.init({ ...this.initConfig, skipAccountConnectionOnLoad: true });
-      return response
-        ? {
-            status: response.status,
-            data: response.data,
-          }
-        : null;
-    });
-  }
-
-  /**
-   * Render the template form we ship
-   * @param params
-   */
-  public renderPreview = (params: PreviewPayload): void => {
-    const { templateData, metadata, previewContainerId } = params;
-    const targetEl = document.getElementById(previewContainerId);
-    if (!targetEl) {
-      console.warn(
-        `Integry template form render target with id ${previewContainerId} was not found`,
-      );
-      return;
-    }
-    const store = createSDKStore();
-
-    store.setState({
-      genericData: {
-        ...initialState.genericData,
-        implicitAuthEnabled: !!this.config.xIntegryConfig?.appAuth?.apiKey,
-      },
-    });
-
-    render(
-      html`
-        <${AppContext.Provider}
-          value=${{
-            apiHandler: this.apiHandler,
-            eventEmitter: this.eventEmitter,
-            isPreviewMode: true,
-          }}
-        >
-          <${Provider} store=${store}>
-            <${FlowSetupContainer}
-              deploymentId=${this.config.deploymentId}
-              isPreviewMode=${true}
-              templatePreviewData=${templateData}
-              previewMetadata=${metadata}
-            >
-            <//>
-          <//>
-        <//>
-      `,
-      targetEl,
-    );
-  };
-
-  /**
-   *
-   * @param initConfig
-   */
-  public init = (initConfig: InitConfig) => {
-    const { appId, showApps = false } = initConfig;
-    if (!this.config.appKey || !this.config.hash || !this.config.userId) {
-      this.SDKFailedHandler(this.config, initConfig.containerId);
-    }
-    this.initConfig = initConfig;
-    if (!appId) {
-      if (showApps) {
-        this.renderAppFlows(initConfig);
-      } else {
-        this.initializeMarketplace(initConfig);
-      }
-    } else {
-      this.renderAppFlows(initConfig);
-    }
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  public updateSdkUserConfig = (config: any) => {
-    const store = createSDKStore();
-    const currentConfig = store.getState();
-    store.setState({
-      userConfig: { ...currentConfig.userConfig, ...config.userConfig },
-    });
-  };
-
-  public initializeMarketplace = (initConfig: InitConfig) => {
-    const {
-      containerId,
-      templateContainerId,
-      renderMode,
-      renderFlowsMode,
-      skipAccountConnectionOnLoad = false,
-      testMultipurpose = true,
-      flowId = null,
-      integrationId = null,
-      viewStyle = testMultipurpose === false
-        ? ViewStyles.COMFORTABLE
-        : ViewStyles.COMFORTABLE,
-    } = initConfig;
-
-    const target = document.getElementById(containerId);
-
-    if (!renderMode) {
-      throw new Error('Template form render mode needs to be defined');
-    }
-
-    this.setupFlowFormDestination(renderMode, templateContainerId);
-    if (target) {
-      const layout = TemplateListingRenderModes.LIST;
-      /** REMOVED THIS TO SUPPRESS x-integry-layout dom attribute to avoid grid */
-      // (target.getAttribute(
-      //   'x-integry-layout',
-      // ) as TemplateListingRenderModes) || TemplateListingRenderModes.LIST;
-      // this.renderMode = renderMode;
-      const store = createSDKStore();
-      store.setState({
-        userConfig: this.config.userConfig,
-        xIntegryConfig: this.config.xIntegryConfig || {},
-        integrationIdToEdit: integrationId,
-        showSetupModal: flowId
-          ? renderMode === TemplateFormRenderModes.MODAL
-          : false,
-        showSetupInline: flowId
-          ? renderMode === TemplateFormRenderModes.INLINE
-          : false,
-        genericData: {
-          ...initialState.genericData,
-          templateId: flowId,
-          implicitAuthEnabled: !!this.config.xIntegryConfig?.appAuth?.apiKey,
-          deploymentId: Number(this.config.deploymentId),
-          isAnonymous: !!this.config.xIntegryConfig?.isAnonymous,
-          skipAccountConnectionOnLoad,
-          deploymentIdFromConfig: this.config.deploymentId
-            ? Number(this.config.deploymentId)
-            : null,
-          testMultipurpose,
-          viewStyle,
-        },
-        customComponents: this.config.userConfig?.customComponents,
-        ...(renderFlowsMode === TemplateFormRenderModes.MODAL && {
-          showFlowsListModal: true,
-        }),
-      });
-
-      this.verifyAuthConfig()
-        .then((response) => {
-          if (!response?.config_verified) {
-            console.error(
-              'IntegrySDK: Auth config verification failed, are your auth parameters correct?',
-            );
-          } else {
-            const currentState = store.getState();
-            store.setState({
-              genericData: {
-                ...currentState.genericData,
-                customerAppName: response.meta.app.name,
-              },
-            });
-            this.eventEmitter.emit('ready', {
-              isReady: true,
-            });
-            this.getUserVariables().then((userVariables) => {
-              let userVariablesValidation = true;
-              userVariables.forEach((variable: any) => {
-                if (
-                  (variable.key !== 'api_key' &&
-                    (!this.config.xIntegryConfig?.appAuth?.extras ||
-                      !this.config.xIntegryConfig?.appAuth?.extras[
-                        variable.key
-                      ])) ||
-                  (variable.key === 'api_key' &&
-                    !this.config.xIntegryConfig?.appAuth?.apiKey)
-                ) {
-                  userVariablesValidation = false;
-                }
-              });
-              if (!userVariablesValidation) {
-                this.eventEmitter.emit('did-raise-sdk-embed-warning', {
-                  type: 'missing-user-variable-values',
-                  message:
-                    'One or more user variables or their values are missing.',
-                });
-              }
-              store.setState({
-                genericData: {
-                  ...currentState.genericData,
-                  userVariables,
-                  userVariablesValidation,
-                  storage: response.meta.storage,
-                },
-              });
-            });
-          }
-        })
-        .catch((err) => console.error(err));
-
-      render(
-        html`
-          <${AppContext.Provider}
-            value=${{
-              apiHandler: this.apiHandler,
-              eventEmitter: this.eventEmitter,
-              isPreviewMode: false,
-            }}
-          >
-            <${Provider} store=${store} key=${this.getRandomFlowId(10)}>
-              <${SDKContainer}
-                deploymentId=${this.config.deploymentId}
-                userConfig=${this.config.userConfig}
-                layout=${layout}
-                renderMode=${renderMode}
-                renderFlowsMode=${renderFlowsMode ||
-                TemplateFormRenderModes.INLINE}
-              >
-              <//>
-            <//>
-          <//>
-          ${this.config.userConfig?.debug &&
-          html`<${SDKDebugContainer}
-            message=""
-            config=${this.config}
-            eventEmitter=${this.eventEmitter}
-          >
-          <//>`}
-        `,
-        target,
-      );
-    } else {
-      console.warn(
-        `Integry SDK render target with id ${containerId} was not found`,
-      );
-      // throw new Error('The render target was not found');
-    }
-  };
-
-  public showFlows = (
-    renderMode: RenderModes = RenderModes.MODAL,
-    containerId = 'integry-marketplace',
-    layout = Layouts.WIDE,
-  ) => {
-    const target = document.getElementById(containerId);
-
-    if (!renderMode) {
-      throw new Error('Template form render mode needs to be defined');
-    }
-
-    if (target) {
-      const templateListLayout = TemplateListingRenderModes.LIST;
-
-      const store = createSDKStore();
-      store.setState({
-        userConfig: this.config.userConfig,
-        xIntegryConfig: this.config.xIntegryConfig || {},
-        showSetupModal: false,
-        showSetupInline: false,
-        genericData: {
-          ...initialState.genericData,
-          templateId: null,
-          implicitAuthEnabled: !!this.config.xIntegryConfig?.appAuth?.apiKey,
-          deploymentId: Number(this.config.deploymentId),
-          isAnonymous: !!this.config.xIntegryConfig?.isAnonymous,
-          skipAccountConnectionOnLoad: false,
-          deploymentIdFromConfig: this.config.deploymentId
-            ? Number(this.config.deploymentId)
-            : null,
-          testMultipurpose: true,
-          showTemplates: true,
-          showApps: false,
-          viewStyle: layout,
-        },
-        customComponents: this.config.userConfig?.customComponents,
-        ...(renderMode === RenderModes.MODAL && {
-          showMarketplaceModal: true,
-        }),
-      });
-
-      this.verifyAuthConfig()
-        .then((response) => {
-          if (!response?.config_verified) {
-            console.error(
-              'IntegrySDK: Auth config verification failed, are your auth parameters correct?',
-            );
-          } else {
-            const currentState = store.getState();
-            store.setState({
-              genericData: {
-                ...currentState.genericData,
-                customerAppName: response.meta.app.name,
-              },
-            });
-            this.eventEmitter.emit('ready', {
-              isReady: true,
-            });
-            this.getUserVariables().then((userVariables) => {
-              let userVariablesValidation = true;
-              userVariables.forEach((variable: any) => {
-                if (
-                  (variable.key !== 'api_key' &&
-                    (!this.config.xIntegryConfig?.appAuth?.extras ||
-                      !this.config.xIntegryConfig?.appAuth?.extras[
-                        variable.key
-                      ])) ||
-                  (variable.key === 'api_key' &&
-                    !this.config.xIntegryConfig?.appAuth?.apiKey)
-                ) {
-                  userVariablesValidation = false;
-                }
-              });
-              if (!userVariablesValidation) {
-                this.eventEmitter.emit('did-raise-sdk-embed-warning', {
-                  type: 'missing-user-variable-values',
-                  message:
-                    'One or more user variables or their values are missing.',
-                });
-              }
-              store.setState({
-                genericData: {
-                  ...currentState.genericData,
-                  userVariables,
-                  userVariablesValidation,
-                  storage: response.meta.storage,
-                },
-              });
-            });
-          }
-        })
-        .catch((err) => console.error(err));
-
-      render(
-        html`
-          <${AppContext.Provider}
-            value=${{
-              apiHandler: this.apiHandler,
-              eventEmitter: this.eventEmitter,
-              isPreviewMode: false,
-            }}
-          >
-            <${Provider} store=${store} key=${this.getRandomFlowId(10)}>
-              <${SDKContainer}
-                deploymentId=${this.config.deploymentId}
-                userConfig=${this.config.userConfig}
-                layout=${templateListLayout}
-                renderMode=${renderMode}
-                renderFlowsMode=${renderMode || TemplateFormRenderModes.INLINE}
-              >
-              <//>
-            <//>
-          <//>
-          ${this.config.userConfig?.debug &&
-          html`<${SDKDebugContainer}
-            message=""
-            config=${this.config}
-            eventEmitter=${this.eventEmitter}
-          >
-          <//>`}
-        `,
-        target,
-      );
-    } else {
-      console.warn(
-        `Integry SDK render target with id ${containerId} was not found`,
-      );
-      // throw new Error('The render target was not found');
-    }
-  };
-
-  /**
-   *
-   * @param marketplaceConfig
-   */
-  public renderMarketplace = (marketplaceConfig: MarketplaceConfig) => {
-    const { containerId, renderMode } = marketplaceConfig;
-
-    const target = document.getElementById(containerId);
-
-    if (!renderMode) {
-      throw new Error('Marketplace render mode needs to be defined');
-    }
-
-    if (target) {
-      const store = createSDKStore();
-      store.setState({
-        userConfig: this.config.userConfig,
-        genericData: {
-          ...initialState.genericData,
-          implicitAuthEnabled: !!this.config.xIntegryConfig?.appAuth?.apiKey,
-          deploymentId: Number(this.config.marketplaceId),
-          marketplaceId: Number(this.config.marketplaceId),
-          isAnonymous: !!this.config.xIntegryConfig?.isAnonymous,
-        },
-        customComponents: this.config.userConfig?.customComponents,
-        ...(renderMode === MarketplaceRenderModes.MODAL && {
-          showMarketplaceModal: true,
-        }),
-      });
-
-      render(
-        html`
-          <${AppContext.Provider}
-            value=${{
-              apiHandler: this.apiHandler,
-              eventEmitter: this.eventEmitter,
-              isPreviewMode: false,
-            }}
-          >
-            <${Provider} store=${store} key=${this.getRandomFlowId(6)}>
-              <${MarketplaceContainer}
-                marketplaceId=${this.config.marketplaceId}
-                userConfig=${this.config.userConfig}
-                renderMode=${renderMode}
-              >
-              <//>
-            <//>
-          <//>
-        `,
-        target,
-      );
-    } else {
-      console.warn(
-        `Integry SDK render target with id ${containerId} was not found`,
-      );
-    }
-  };
-
-  public renderAppFlows = (appFlowConfig: InitConfig) => {
-    const {
-      containerId,
-      renderMode,
-      appId,
-      renderAppPageMode,
-      renderFlowSetupMode,
-      showApps = false,
-      skipOnDemand = false,
-      skipAccountConnectionOnLoad = false,
-      testMultipurpose = true,
-      viewStyle = testMultipurpose === false
-        ? ViewStyles.COMFORTABLE
-        : ViewStyles.COMFORTABLE,
-    } = appFlowConfig;
-    /// const hostApiKey = this.config.xIntegryConfig?.appAuth?.apiKey;
-    const target = document.getElementById(containerId);
-    if (!renderMode) {
-      throw new Error('App Page render mode needs to be defined');
-    }
-    /*  if (!hostApiKey && !showApps) {
-      throw new Error('API key for host app needs to be defined');
-    } */
-    if (target) {
-      const store = createSDKStore();
-      store.setState({
-        userConfig: {
-          ...this.config.userConfig,
-          hideWebhookUrlScreen: false,
-          hideExistingIntegrations:
-            this.config.userConfig &&
-            Object.prototype.hasOwnProperty.call(
-              this.config.userConfig,
-              'hideExistingIntegrations',
-            )
-              ? this.config.userConfig.hideExistingIntegrations
-              : false,
-        },
-        xIntegryConfig: this.config.xIntegryConfig || {},
-        genericData: {
-          ...initialState.genericData,
-          app_id: appId,
-          deploymentId: Number(this.config.deploymentId),
-          showTemplates: !!appFlowConfig.showTemplates,
-          showApps,
-          skipOnDemand,
-          skipAccountConnectionOnLoad,
-          testMultipurpose,
-          viewStyle,
-        },
-        ...((renderMode === TemplateFormRenderModes.MODAL ||
-          renderAppPageMode === TemplateFormRenderModes.MODAL) && {
-          showMarketplaceModal: true,
-        }),
-      });
-
-      this.verifyAuthConfig()
-        .then((response) => {
-          if (!response?.config_verified) {
-            console.error(
-              'IntegrySDK: Auth config verification failed, are your auth parameters correct?',
-            );
-          } else {
-            const currentState = store.getState();
-            store.setState({
-              genericData: {
-                ...currentState.genericData,
-                customerAppName: response.meta.app.name,
-              },
-            });
-            this.eventEmitter.emit('ready', {
-              isReady: true,
-            });
-            this.getUserVariables().then((userVariables) => {
-              let userVariablesValidation = true;
-              userVariables.forEach((variable: any) => {
-                if (
-                  (variable.is_required &&
-                    variable.key !== 'api_key' &&
-                    (!this.config.xIntegryConfig?.appAuth?.extras ||
-                      !this.config.xIntegryConfig?.appAuth?.extras[
-                        variable.key
-                      ])) ||
-                  (variable.key === 'api_key' &&
-                    !this.config.xIntegryConfig?.appAuth?.apiKey)
-                ) {
-                  userVariablesValidation = false;
-                }
-              });
-              if (!userVariablesValidation) {
-                this.eventEmitter.emit('did-raise-sdk-embed-warning', {
-                  type: 'missing-user-variable-values',
-                  message:
-                    'One or more user variables or their values are missing.',
-                });
-              }
-              store.setState({
-                genericData: {
-                  ...currentState.genericData,
-                  userVariables,
-                  userVariablesValidation,
-                  storage: response.meta.storage,
-                },
-              });
-            });
-          }
-        })
-        .catch((err) => console.error(err));
-
-      render(
-        html`
-          <${AppContext.Provider}
-            value=${{
-              apiHandler: this.apiHandler,
-              eventEmitter: this.eventEmitter,
-              isPreviewMode: false,
-            }}
-          >
-            <${Provider} store=${store} key=${this.getRandomFlowId(6)}>
-              <${AppFlowContainer}
-                marketplaceId=${this.config.marketplaceId}
-                userConfig=${this.config.userConfig}
-                renderMode=${renderMode}
-                renderAppPageMode=${renderAppPageMode || renderMode}
-                renderFlowSetupMode=${renderFlowSetupMode ||
-                TemplateFormRenderModes.INLINE}
-              >
-              <//>
-            <//>
-          <//>
-          ${this.config.userConfig?.debug &&
-          html`<${SDKDebugContainer}
-            message=""
-            config=${this.config}
-            eventEmitter=${this.eventEmitter}
-          >
-          <//>`}
-        `,
-        target,
-      );
-    } else {
-      console.warn(
-        `Integry SDK render target with id ${containerId} was not found`,
-      );
-    }
-  };
-
-  public showApp = (
-    appName: string,
-    renderMode: RenderModes = RenderModes.MODAL,
-    containerId = 'integry-marketplace',
-    layout: Layouts = Layouts.WIDE,
-  ) => {
-    /// const hostApiKey = this.config.xIntegryConfig?.appAuth?.apiKey;
-    let target = document.getElementById(containerId);
-    if (!appName) {
-      throw new Error('App name needs to be defined');
-    }
-    if (!target && renderMode !== RenderModes.MODAL) {
-      console.warn(
-        `Integry SDK render target with id ${containerId} was not found`,
-      );
-      return;
-    }
-
-    if (!target && renderMode === RenderModes.MODAL) {
-      const targetEl = document.createElement('div');
-      targetEl.id = containerId;
-      document.body.appendChild(targetEl);
-      target = targetEl;
-    }
-    if (target) {
-      const store = createSDKStore();
-      store.setState({
-        userConfig: {
-          ...this.config.userConfig,
-          hideWebhookUrlScreen: false,
-          hideExistingIntegrations:
-            this.config.userConfig &&
-            Object.prototype.hasOwnProperty.call(
-              this.config.userConfig,
-              'hideExistingIntegrations',
-            )
-              ? this.config.userConfig.hideExistingIntegrations
-              : false,
-        },
-        xIntegryConfig: this.config.xIntegryConfig || {},
-        genericData: {
-          ...initialState.genericData,
-          app_id: appName,
-          deploymentId: Number(this.config.deploymentId),
-          showTemplates: false,
-          showApps: false,
-          skipOnDemand: false,
-          skipAccountConnectionOnLoad: false,
-          testMultipurpose: true,
-          viewStyle: layout,
-        },
-        ...(renderMode === RenderModes.MODAL && {
-          showMarketplaceModal: true,
-        }),
-      });
-
-      this.verifyAuthConfig()
-        .then((response) => {
-          if (!response?.config_verified) {
-            console.error(
-              'IntegrySDK: Auth config verification failed, are your auth parameters correct?',
-            );
-          } else {
-            const currentState = store.getState();
-            store.setState({
-              genericData: {
-                ...currentState.genericData,
-                customerAppName: response.meta.app.name,
-              },
-            });
-            this.eventEmitter.emit('ready', {
-              isReady: true,
-            });
-            this.getUserVariables().then((userVariables) => {
-              let userVariablesValidation = true;
-              userVariables.forEach((variable: any) => {
-                if (
-                  (variable.is_required &&
-                    variable.key !== 'api_key' &&
-                    (!this.config.xIntegryConfig?.appAuth?.extras ||
-                      !this.config.xIntegryConfig?.appAuth?.extras[
-                        variable.key
-                      ])) ||
-                  (variable.key === 'api_key' &&
-                    !this.config.xIntegryConfig?.appAuth?.apiKey)
-                ) {
-                  userVariablesValidation = false;
-                }
-              });
-              if (!userVariablesValidation) {
-                this.eventEmitter.emit('did-raise-sdk-embed-warning', {
-                  type: 'missing-user-variable-values',
-                  message:
-                    'One or more user variables or their values are missing.',
-                });
-              }
-              store.setState({
-                genericData: {
-                  ...currentState.genericData,
-                  userVariables,
-                  userVariablesValidation,
-                  storage: response.meta.storage,
-                },
-              });
-            });
-          }
-        })
-        .catch((err) => console.error(err));
-
-      render(
-        html`
-          <${AppContext.Provider}
-            value=${{
-              apiHandler: this.apiHandler,
-              eventEmitter: this.eventEmitter,
-              isPreviewMode: false,
-            }}
-          >
-            <${Provider} store=${store} key=${this.getRandomFlowId(6)}>
-              <${AppFlowContainer}
-                marketplaceId=${this.config.marketplaceId}
-                userConfig=${this.config.userConfig}
-                renderMode=${renderMode}
-                renderAppPageMode=${renderMode}
-                renderFlowSetupMode=${renderMode}
-              >
-              <//>
-            <//>
-          <//>
-          ${this.config.userConfig?.debug &&
-          html`<${SDKDebugContainer}
-            message=""
-            config=${this.config}
-            eventEmitter=${this.eventEmitter}
-          >
-          <//>`}
-        `,
-        target,
-      );
-    } else {
-      console.warn(
-        `Integry SDK render target with id ${containerId} was not found`,
-      );
-    }
-  };
-
-  public showApps = (
-    renderMode: RenderModes = RenderModes.MODAL,
-    containerId = 'integry-marketplace',
-    layout = Layouts.WIDE,
-    fetchAll = false,
-    useLoadMoreButton = false,
-  ) => {
-    let target = document.getElementById(containerId);
-    if (!target) {
-      const targetEl = document.createElement('div');
-      targetEl.id = containerId;
-      document.body.appendChild(targetEl);
-      target = targetEl;
-    }
-
-    if (target) {
-      const store = createSDKStore();
-      store.setState({
-        userConfig: {
-          ...this.config.userConfig,
-          hideWebhookUrlScreen: false,
-          hideExistingIntegrations:
-            this.config.userConfig &&
-            Object.prototype.hasOwnProperty.call(
-              this.config.userConfig,
-              'hideExistingIntegrations',
-            )
-              ? this.config.userConfig.hideExistingIntegrations
-              : false,
-        },
-        xIntegryConfig: this.config.xIntegryConfig || {},
-        genericData: {
-          ...initialState.genericData,
-          deploymentId: Number(this.config.deploymentId),
-          showTemplates: false,
-          showApps: true,
-          skipOnDemand: false,
-          skipAccountConnectionOnLoad: false,
-          testMultipurpose: true,
-          viewStyle: layout,
-        },
-        ...(renderMode === RenderModes.MODAL && {
-          showMarketplaceModal: true,
-        }),
-      });
-
-      this.verifyAuthConfig()
-        .then((response) => {
-          if (!response?.config_verified) {
-            console.error(
-              'IntegrySDK: Auth config verification failed, are your auth parameters correct?',
-            );
-          } else {
-            const currentState = store.getState();
-            store.setState({
-              genericData: {
-                ...currentState.genericData,
-                customerAppName: response.meta.app.name,
-              },
-            });
-          }
-        })
-        .catch((err) => console.error(err));
-
-      render(
-        html`
-          <${AppContext.Provider}
-            value=${{
-              apiHandler: this.apiHandler,
-              eventEmitter: this.eventEmitter,
-              isPreviewMode: false,
-            }}
-          >
-            <${Provider} store=${store} key=${this.getRandomFlowId(6)}>
-              <${MarketplaceAppsContainer}
-                marketplaceId=${this.config.marketplaceId}
-                userConfig=${this.config.userConfig}
-                renderMode=${renderMode}
-                renderAppPageMode=${renderMode}
-                renderFlowSetupMode=${TemplateFormRenderModes.INLINE}
-                fetchAll=${fetchAll}
-                useLoadMoreButton=${useLoadMoreButton}
-              >
-              <//>
-            <//>
-          <//>
-        `,
-        target,
-      );
-    } else {
-      console.warn(
-        `Integry SDK render target with id ${containerId} was not found`,
-      );
-    }
-  };
-
-  public showConnectedAccounts = (
-    appName: string,
-    renderMode: RenderModes = RenderModes.MODAL,
-    containerId = 'integry-marketplace',
-    layout = Layouts.WIDE,
-  ) => {
-    let target = document.getElementById(containerId);
-    if (!target) {
-      const targetEl = document.createElement('div');
-      targetEl.id = containerId;
-      document.body.appendChild(targetEl);
-      target = targetEl;
-    }
-
-    if (target) {
-      const store = createSDKStore();
-      store.setState({
-        userConfig: {
-          ...this.config.userConfig,
-          hideWebhookUrlScreen: false,
-          hideExistingIntegrations:
-            this.config.userConfig &&
-            Object.prototype.hasOwnProperty.call(
-              this.config.userConfig,
-              'hideExistingIntegrations',
-            )
-              ? this.config.userConfig.hideExistingIntegrations
-              : false,
-        },
-        xIntegryConfig: this.config.xIntegryConfig || {},
-        genericData: {
-          ...initialState.genericData,
-          deploymentId: Number(this.config.deploymentId),
-          showTemplates: false,
-          showApps: true,
-          skipOnDemand: false,
-          skipAccountConnectionOnLoad: false,
-          testMultipurpose: true,
-          viewStyle: layout,
-        },
-        ...(renderMode === RenderModes.MODAL && {
-          showMarketplaceModal: true,
-        }),
-      });
-
-      this.verifyAuthConfig()
-        .then((response) => {
-          if (!response?.config_verified) {
-            console.error(
-              'IntegrySDK: Auth config verification failed, are your auth parameters correct?',
-            );
-          } else {
-            const currentState = store.getState();
-            store.setState({
-              genericData: {
-                ...currentState.genericData,
-                customerAppName: response.meta.app.name,
-              },
-            });
-          }
-        })
-        .catch((err) => console.error(err));
-
-      render(
-        html`
-          <${AppContext.Provider}
-            value=${{
-              apiHandler: this.apiHandler,
-              eventEmitter: this.eventEmitter,
-              isPreviewMode: false,
-            }}
-          >
-            <${Provider} store=${store} key=${this.getRandomFlowId(6)}>
-              <${MarketplaceAppsContainer}
-                marketplaceId=${this.config.marketplaceId}
-                userConfig=${this.config.userConfig}
-                renderMode=${renderMode}
-                renderAppPageMode=${renderMode}
-                renderFlowSetupMode=${TemplateFormRenderModes.INLINE}
-                appName=${appName}
-              >
-              <//>
-            <//>
-          <//>
-        `,
-        target,
-      );
-    } else {
-      console.warn(
-        `Integry SDK render target with id ${containerId} was not found`,
-      );
-    }
-  };
-
-  public renderMultipurposeField = ({
-    containerId,
-    multipurposeFieldProps,
-  }: {
-    containerId: string;
-    multipurposeFieldProps: MultipurposeFieldType;
-  }) => {
-    const target = document.getElementById(containerId);
-
-    if (target) {
-      render(
-        html`<div>
-          ${multipurposeFieldProps.type === 'CHECKBOX' ||
-          multipurposeFieldProps.type === 'RADIO' ||
-          multipurposeFieldProps.type === 'SELECT'
-            ? html`<${ListBox}
-                activityOutputData=${multipurposeFieldProps.activityOutputData}
-                title=${multipurposeFieldProps.title}
-                description=${multipurposeFieldProps.description}
-                placeholder=${multipurposeFieldProps.placeholder}
-                value=${multipurposeFieldProps.value}
-                type=${multipurposeFieldProps.type}
-                onChange=${multipurposeFieldProps.onChange}
-                endpointUrl=${multipurposeFieldProps.endpointUrl}
-                isSearchable=${multipurposeFieldProps.isSearchable}
-                allowTagsInText=${multipurposeFieldProps.allowTagsInText}
-                isMappable=${multipurposeFieldProps.isMappable}
-                isEditable=${multipurposeFieldProps.isEditable}
-                hideTabs=${multipurposeFieldProps.hideTabs}
-              />`
-            : html`<${MultipurposeField}
-                activityOutputData=${multipurposeFieldProps.activityOutputData}
-                title=${multipurposeFieldProps.title}
-                description=${multipurposeFieldProps.description}
-                placeholder=${multipurposeFieldProps.placeholder}
-                value=${multipurposeFieldProps.value}
-                type=${multipurposeFieldProps.type}
-                onChange=${multipurposeFieldProps.onChange}
-                isMappable=${multipurposeFieldProps.isMappable}
-                allowTagsInText=${multipurposeFieldProps.allowTagsInText}
-                isSearchable=${multipurposeFieldProps.isSearchable}
-                isEditable=${multipurposeFieldProps.isEditable}
-                fieldId=${multipurposeFieldProps.fieldId}
-                enableTagify=${multipurposeFieldProps.enableTagify}
-              />`}
-        </div>`,
-        target,
-      );
-    } else {
-      console.warn(
-        `Integry SDK render target with id ${containerId} was not found`,
-      );
-    }
-  };
-
-  public renderFunctionField = (
-    containerId: string,
-    functionFieldProps: FunctionFieldType,
-  ) => {
-    const target = document.getElementById(containerId);
-
-    if (target) {
-      const store = createSDKStore();
-      render(
-        html`<div>
-          <${AppContext.Provider}
-            value=${{
-              apiHandler: this.apiHandler,
-              eventEmitter: this.eventEmitter,
-              isPreviewMode: false,
-            }}
-          >
-            <${Provider} store=${store} key=${this.getRandomFlowId(10)}>
-              <${FunctionField}
-                field=${functionFieldProps.field}
-                name="${functionFieldProps.field.activity_field?.machine_name ||
-                'function_field'}"
-                description=${functionFieldProps.field.description || ''}
-                label="${functionFieldProps.field.title}"
-                value=${functionFieldProps.field.default_value || []}
-                apiHandler=${this.apiHandler}
-                isArray=${!!(functionFieldProps.field.data_type === 'OBJECT[]')}
-                onChange=${(val: string) => {
-                  if (functionFieldProps.onChange) {
-                    functionFieldProps.onChange(val);
-                  }
-                }}
-                tagsTree=${functionFieldProps.tagsTree
-                  ? functionFieldProps.tagsTree
-                  : null}
-                isReadOnly=${functionFieldProps.isReadOnly}
-              />
-            <//>
-          <//>
-        </div>`,
-        target,
-      );
-    } else {
-      console.warn(
-        `Integry SDK render target with id ${containerId} was not found`,
-      );
-    }
-  };
-
-  public renderFlowStep = (
-    options: RenderFlowStepOptions = {
-      containerId: 'integry-marketplace',
-      step: {},
-      connectedAccountId: '',
-      tagsComponent: null,
-      tagsTree: {},
-      onFieldChangeCallback: () => {
-        // Placeholder function for future implementation
-      },
-      showMappingMenu: false,
-      isReadOnly: false,
-      showMenuOnLeft: false,
-    },
-  ) => {
-    const target = document.getElementById(options.containerId);
-
-    if (target) {
-      const store = createSDKStore();
-      render(
-        html`<div>
-          <${AppContext.Provider}
-            value=${{
-              apiHandler: this.apiHandler,
-              eventEmitter: this.eventEmitter,
-              isPreviewMode: false,
-            }}
-          >
-            <${Provider} store=${store} key=${this.getRandomFlowId(10)}>
-              <${ActionForm}
-                step=${options.step}
-                stepType=${'CONFIGURE'}
-                showStepValidation=${false}
-                apiHandler=${this.apiHandler}
-                eventEmitter=${this.eventEmitter}
-                isReadOnly="${false}"
-                selectedAuthId="${options.connectedAccountId}"
-                accountConnected=${true}
-                tagsComponent=${options.tagsComponent}
-                onFieldChangeCallback=${options.onFieldChangeCallback}
-                tagsTree=${options.tagsTree}
-                showMappingMenu=${options.showMappingMenu}
-                isReadOnly=${options.isReadOnly}
-                showMenuOnLeft=${options.showMenuOnLeft}
-                tagsTreeActivityOutput=${JSONToActivityOutputData(
-                  options.tagsTree || {},
-                )}
-              />
-            <//>
-          <//>
-        </div>`,
-        target,
-      );
-    } else {
-      console.warn(
-        `Integry SDK render target with id ${options.containerId} was not found`,
-      );
-    }
-  };
-
-  public renderMappingMenu = (
-    options: RenderMappingMenuOptions = {
-      containerId: '',
-      tagsTree: {},
-      onTagSelect: () => {
-        // Placeholder function for future implementation
-      },
-      renderValuesTab: false,
-      options: [],
-      onOptionClick: () => {
-        // Placeholder function for future implementation
-      },
-    },
-  ) => {
-    const target = document.getElementById(options.containerId);
-
-    if (target) {
-      const store = createSDKStore();
-      render(
-        html`<div>
-          <${AppContext.Provider}
-            value=${{
-              apiHandler: this.apiHandler,
-              eventEmitter: this.eventEmitter,
-              isPreviewMode: false,
-            }}
-          >
-            <${Provider} store=${store} key=${this.getRandomFlowId(10)}>
-              <${TagsMenu}
-                tagsTree=${options.tagsTree}
-                onSelect=${options.onTagSelect}
-                renderValuesTab=${options.renderValuesTab}
-                options=${options.options}
-                onOptionClick=${options.onOptionClick}
-              />
-            <//>
-          <//>
-        </div>`,
-        target,
-      );
-    } else {
-      console.warn(
-        `Integry SDK render target with id ${options.containerId} was not found`,
-      );
-    }
-  };
-
-  public verifyAuthConfig = () =>
-    this.apiHandler.verifyAuthConfig({
-      deploymentId: this.config.deploymentId,
-    });
-
-  private getUserVariables = async () => {
-    try {
-      const res = await this.apiHandler.getUserVariables();
-      return res ? res.results : [];
-    } catch (err) {
-      console.error(err);
-      return [];
-    }
-  };
-
-  /**
-   * Destroy SDK instance and cleanup store
-   */
-  public destroy = () => {
-    try {
-      this.eventEmitter.offAll();
-      const authIdElement = document.getElementById(this.authModalId);
-      if (authIdElement) {
-        authIdElement.remove();
-      }
-    } catch (error) {
-      console.error('There was an error unsubscribing from all events');
-    }
-  };
-
-  static setFieldValue = (fieldId: string, value: string) => {
-    const fieldElement = document
-      .getElementById(fieldId)
-      ?.querySelector('input') as HTMLInputElement | null;
-    if (fieldElement) {
-      if (fieldElement instanceof HTMLInputElement) {
-        fieldElement.value = value;
-        const keyupEvent = new KeyboardEvent('keyup', {
-          key: 'a', // Specify the key (optional)
-          bubbles: true, // Allow event to bubble up
-          cancelable: true, // Allow event to be cancelable
-        });
-        fieldElement.dispatchEvent(keyupEvent);
-      }
-    }
-    const tagifyFieldElement = document.getElementById(`tagify_${fieldId}`);
-    if (tagifyFieldElement) {
-      if (tagifyFieldElement instanceof HTMLInputElement) {
-        tagifyFieldElement.value = value;
-        const keyupEvent = new KeyboardEvent('keyup', {
-          key: 'a', // Specify the key (optional)
-          bubbles: true, // Allow event to bubble up
-          cancelable: true, // Allow event to be cancelable
-        });
-        tagifyFieldElement.dispatchEvent(keyupEvent);
-      }
-    }
-  };
-
-  private getMethod = () => 'POST';
-
-  private getBaseAPIUrl = () => 'https://api.integry.io';
-
-  private getHeaders = () => ({
-    'Content-Type': 'application/json',
-  });
-}
-
-export { Helpers, html };