@finapi/web-form/src/loader.ts

Library for integrating the finAPI Web Form

import { WebFormHandlers, WebFormProps } from "./props.types";
import { removeSpinner, showSpinner } from "./spinner";
import { getApiServer } from "./utils/apiServer.util";
import {
  createWebFormElement,
  getWebFormElement,
  removeWebFormElement,
} from "./utils/dom.util";
import { getWebComponentServer } from "./utils/webComponentServer.util";
import { getWebComponentUrl } from "./utils/webComponentUrl.util";

/**
 * Injects Web Component into the target HTMLElement.  When this function is
 * called for the first time, it will also create a new script tag that will
 * fetch the Web Component source js file.  Before the new Web Component, any
 * previous instance will be first automatically unloaded.
 *
 * @param {HTMLElement} target - a target element into which the Web Form will
 * be appended as a child
 * @param {WebFormProps} properties - Web Form properties
 * @param {WebFormHandlers} handlers - Web Form event handlers
 * @param {Document} ownerDocument - a document into which body a script tag
 * that loads Web Component source is injected. If undefined, the
 * globally-scoped document is selected.
 */
export function load(
  target: HTMLElement,
  properties: WebFormProps,
  handlers?: WebFormHandlers,
  ownerDocument?: Document
): void {
  showSpinner(target);

  const targetDocument = ownerDocument ?? document;

  const webComponentServer = getWebComponentServer({
    sourceUrl: properties.sourceUrl,
    targetUrl: properties.targetUrl,
    targetEnvironment: properties.targetEnvironment,
  });

  const apiServer = getApiServer({
    targetUrl: properties.targetUrl,
    targetEnvironment: properties.targetEnvironment,
  });

  const webComponentUrl = getWebComponentUrl({
    webComponentServer,
  });

  const isEntryPointLoaded =
    targetDocument.querySelector("#web-form-source") != null;

  if (!isEntryPointLoaded) {
    const entryPoint = targetDocument.createElement("script");
    entryPoint.src = webComponentUrl;
    entryPoint.id = "web-form-source";
    entryPoint.async = false;
    entryPoint.onerror = handlers?.onLoadError;
    targetDocument.body.appendChild(entryPoint);
  }

  unload(targetDocument);

  const webForm = createWebFormElement(targetDocument);

  const propertyPort = webForm.properties || webForm;
  propertyPort.platform = properties.platform ?? "EMBEDDED";
  propertyPort.customerSupportUrl = properties.customerSupportUrl;
  propertyPort.backToAppUrl = properties.backToAppUrl;
  propertyPort.token = properties.token;
  propertyPort.layoutConfig = properties.layoutConfig;
  propertyPort.targetUrl = apiServer;
  propertyPort.noMargins = properties.noMargins;
  propertyPort.language = properties.language;
  propertyPort.redirectUrl = properties.redirectUrl;
  propertyPort.errorRedirectUrl = properties.errorRedirectUrl;
  propertyPort.abortRedirectUrl = properties.abortRedirectUrl;
  propertyPort.isInvalidUrl = properties.isInvalidUrl;
  propertyPort.infoParam = properties.infoParam;

  webForm.addEventListener("loaded", () => removeSpinner(targetDocument));
  if (handlers) {
    if (handlers.onComplete) {
      webForm.addEventListener("complete", handlers.onComplete);
    }
    if (handlers.onFail) {
      webForm.addEventListener("fail", handlers.onFail);
    }
    if (handlers.onAbort) {
      webForm.addEventListener("abort", handlers.onAbort);
    }
    if (handlers.onLoaded) {
      webForm.addEventListener("loaded", handlers.onLoaded);
    }
    if (handlers.onBlindRedirectCallback) {
      webForm.addEventListener(
        "blindRedirectCallback",
        handlers.onBlindRedirectCallback
      );
    }
  }

  target.appendChild(webForm);
}

/**
 * Removes Web Component from the document.
 *
 * @param {Document} ownerDocument - a document in which the web component was
 * injected
 */
export function unload(ownerDocument?: Document): void {
  const targetDocument = ownerDocument || document;
  const webForm = getWebFormElement(targetDocument);

  if (webForm) {
    removeWebFormElement(webForm);
  }
}