@integry/sdk 4.5.2 → 4.5.4

package/src/index.ts

@@ -0,0 +1,2051 @@
+import { html, render } from 'htm/preact';
+import { Provider } from 'unistore/preact';
+
+import { IntegryAPI } from '@/modules/api';
+import {
+  InitConfig,
+  ConfigWithObject,
+  ConfigWithUrlParams,
+  APIConfig,
+  PreviewPayload,
+  MarketplaceConfig,
+  MultipurposeFieldType,
+  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,
+} 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 FunctionForm from '@/features/common/FunctionForm';
+import { openPopupWindow } from '@/utils/popup';
+import { Modal } from '@/components/Modal';
+import { ListBox } from '@/components/MultipurposeField/Dropdown';
+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,
+    params: {
+      [key: string]: any;
+    } = {},
+    vars: {
+      [key: string]: any;
+    } = {},
+    autoMapVars = false,
+    connectedAccountId?: string,
+  ): Promise<Record<any, any>> => {
+    const store = createSDKStore();
+
+    return new Promise((resolve, reject) => {
+      this.apiHandler
+        .getFunctionDetails(functionName, autoMapVars ? vars : {})
+        .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=${params}
+                      variables=${vars}
+                      autoMapVars=${autoMapVars}
+                      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,
+  ): 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,
+        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,
+  ) => {
+    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}
+              >
+              <//>
+            <//>
+          <//>
+        `,
+        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 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 };