alloy-frontend/src/index.js

Front End SDK of Alloy Automation

function Alloy() {
  let token = undefined;
  let region = "us";
  return {
    install: (params) => {
      install(token, params, region);
    },

    authenticate: (params) => {
      authenticate(token, params, region);
    },

    edit: (params) => {
      install(
        token,
        Object.assign(
          { alwaysShowAuthentication: true, operation: "edit" },
          params
        ),
        region
      );
    },

    update: (params) => {
      install(
        token,
        Object.assign(
          { alwaysShowAuthentication: true, operation: "update" },
          params
        ),
        region
      );
    },

    setToken: (tk) => {
      token = tk;
    },

    setRegion: (rg) => {
      region = rg;
    },

    getWorkflows: () => {
      if (!token) throw new Error("no token set");

      const { embedded } = getDomainsByRegion(region);
      const url = `${embedded}/2024-03/workflows`;

      return fetch(url, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          "x-alloy-user-token": token,
        },
      }).then((response) => response.json());
    },

    getIntegrations: () => {
      if (!token) throw new Error("no token set");

      const { embedded } = getDomainsByRegion(region);
      const url = `${embedded}/2024-03/integrations`;

      return fetch(url, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          "x-alloy-user-token": token,
        },
      }).then((response) => response.json());
    },

    deactivate: (data) => {
      if (!token) throw new Error("no token set");

      const { embedded } = getDomainsByRegion(region);
      const url = `${embedded}/2024-03/workflows/deactivate`;

      return fetch(url, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
          "x-alloy-user-token": token,
        },
        body: JSON.stringify(data),
      }).then((response) => response.json());
    },

    reactivate: (data) => {
      if (!token) throw new Error("no token set");

      const { embedded } = getDomainsByRegion(region);
      const url = `${embedded}/2024-03/workflows/activate`;

      return fetch(url, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
          "x-alloy-user-token": token,
        },
        body: JSON.stringify(data),
      }).then((response) => response.json());
    },
  };
}

function install(token, params, region) {
  let success = false;
  const {
    integrationId,
    workflowIds,
    callback,
    alwaysShowAuthentication,
    preFilledValues,
    outputOverride,
    hide,
    title,
    operation,
    versionIds,
  } = params;
  const body = document.querySelector("body");
  const modal = document.createElement("div");

  const modalMask = document.createElement("div");
  const closeModal = () => {
    body.removeChild(modal);
    if (callback) {
      callback({ success });
    }
  };
  modalMask.style.position = "fixed";
  modalMask.style.top = 0;
  modalMask.style.right = 0;
  modalMask.style.left = 0;
  modalMask.style.bottom = 0;
  modalMask.style.zIndex = 1000;
  modalMask.style.height = "100%";
  modalMask.style.backgroundColor = "rgba(0,0,0,0.45)";
  modalMask.addEventListener("click", closeModal);
  if (hide) modal.style.display = "none";
  modal.appendChild(modalMask);

  const modalContainer = document.createElement("div");
  modalContainer.style.position = "fixed";
  modalContainer.style.top = 0;
  modalContainer.style.right = 0;
  modalContainer.style.left = 0;
  modalContainer.style.bottom = 0;
  modalContainer.style.zIndex = 1000;
  modalContainer.style.height = "100%";
  modalContainer.addEventListener("click", closeModal);
  modal.appendChild(modalContainer);

  const modalBody = document.createElement("div");
  modalBody.style.width = "400px";
  modalBody.style.margin = "75px auto 75px auto";
  modalBody.style.height = "659px";
  modalBody.style.maxHeight = "659px";
  modalBody.style.backgroundColor = "#fff";
  modalBody.style.borderRadius = "16px";

  modalContainer.appendChild(modalBody);

  const domain = getDomainsByRegion(region).app;
  const path = "forge-install";
  let versionParameter = "";
  let preFilledValuesParameter = "";
  let outputOverrideParameter = "";
  let workflowParameter = "";
  if (integrationId) {
    workflowParameter = `integrationId=${integrationId}&`;
  } else if (Array.isArray(workflowIds)) {
    workflowIds.forEach((id) => {
      workflowParameter += `id=${id}&`;
    });
  } else {
    workflowParameter = `id=${workflowIds}&`;
  }

  if (!!versionIds && Array.isArray(versionIds) && versionIds.length) {
    versionIds.forEach((id) => {
      versionParameter += `versionId=${id}&`;
    });
  } else if (!!versionIds) {
    versionParameter = `versionId=${workflowIds}&`;
  }

  if (
    !!preFilledValues &&
    Array.isArray(preFilledValues) &&
    preFilledValues.length
  ) {
    preFilledValuesParameter += `preFilledValues=${JSON.stringify(
      preFilledValues
    )}&`;
  }

  if (
    !!outputOverride &&
    Array.isArray(outputOverride) &&
    outputOverride.length
  ) {
    outputOverrideParameter += `outputOverride=${JSON.stringify(
      outputOverride
    )}&`;
  }

  if (!token) throw new Error("no token set");

  let iFrameSrc = `${domain}/${path}?${workflowParameter}${versionParameter}${preFilledValuesParameter}${outputOverrideParameter}token=${token}&forgeMode=engaged`;

  if (hide) {
    iFrameSrc += "&hide=true";
  }
  if (alwaysShowAuthentication) {
    iFrameSrc += "&alwaysShowAuthentication=true";
  }
  if (operation) {
    iFrameSrc += `&operation=${operation}`;
  }

  if (title) {
    iFrameSrc += `&title=${title}`;
  }

  const iFrame = document.createElement("iframe");
  iFrame.src = iFrameSrc;

  iFrame.style.minWidth = "100%";
  iFrame.style.minHeight = "100%";
  iFrame.style.border = "none";
  iFrame.style.borderRadius = "16px";

  modalBody.appendChild(iFrame);

  body.appendChild(modal);

  const handleMessage = (event) => {
    if (!event || event.origin !== domain) {
      return;
    }

    if (event.data && event.data.showModal) {
      modal.style.display = "block";
    } else if (event.data && event.data.closeModal) {
      if (callback) {
        const response = { success };

        callback(response);
      }
      try {
        if (modal) {
          body.removeChild(modal);
        }
      } catch (err) {
        console.log(err);
      }
      window.removeEventListener("message", handleMessage);
    } else if (event.data && event.data.workflowCreated) {
      let closeTimeout = 200;
      success = true;
      if (callback) {
        if (event.data && event.data.workflowIds) {
          callback({ success });
          closeTimeout = 1000;
        } else {
          callback({ success });
        }
      }
      if (event.data.closeModal || event.data.closeModal === undefined) {
        setTimeout(() => {
          try {
            if (modal) {
              body.removeChild(modal);
            }
          } catch (err) {
            console.log(err);
          }
          window.removeEventListener("message", handleMessage);
        }, closeTimeout);
      }
    }
  };
  window.addEventListener("message", handleMessage);
}

function authenticate(token, params, region) {
  let success = false;

  const { app, category, callback, useUnifiedSettings, integrationId } = params;

  const body = document.querySelector("body");
  const modal = document.createElement("div");

  const modalMask = document.createElement("div");
  const closeModal = () => {
    body.removeChild(modal);
    if (callback) {
      callback({ success });
    }
  };
  modalMask.style.position = "fixed";
  modalMask.style.top = 0;
  modalMask.style.right = 0;
  modalMask.style.left = 0;
  modalMask.style.bottom = 0;
  modalMask.style.zIndex = 1000;
  modalMask.style.height = "100%";
  modalMask.style.backgroundColor = "rgba(0,0,0,0.45)";
  modalMask.addEventListener("click", closeModal);
  modal.appendChild(modalMask);

  const modalContainer = document.createElement("div");
  modalContainer.style.position = "fixed";
  modalContainer.style.top = 0;
  modalContainer.style.right = 0;
  modalContainer.style.left = 0;
  modalContainer.style.bottom = 0;
  modalContainer.style.zIndex = 1000;
  modalContainer.style.height = "100%";
  modalContainer.addEventListener("click", closeModal);
  modal.appendChild(modalContainer);

  const modalBody = document.createElement("div");
  modalBody.style.width = "400px";
  modalBody.style.margin = "75px auto 75px auto";
  modalBody.style.height = "659px";
  modalBody.style.maxHeight = "659px";
  modalBody.style.backgroundColor = "#fff";
  modalBody.style.borderRadius = "16px";

  modalContainer.appendChild(modalBody);

  const domain = getDomainsByRegion(region).app;
  const path = "authenticate-app";

  if (!token) throw new Error("no token set");

  let iFrameSrc = `${domain}/${path}?token=${token}&forgeMode=engaged`;

  if (integrationId) {
    iFrameSrc += `&integrationId=${integrationId}`;
  }

  if (app) {
    iFrameSrc += `&app=${app}`;
  }

  if (category) {
    iFrameSrc += `&category=${category}`;
  }

  if (useUnifiedSettings) {
    iFrameSrc += `&useUnified=${useUnifiedSettings}`;
  }

  if (callback) {
    iFrameSrc += `&callback=${callback}`;
  }

  const iFrame = document.createElement("iframe");
  iFrame.setAttribute("id", "embedded-modal");
  iFrame.src = iFrameSrc;

  iFrame.style.minWidth = "100%";
  iFrame.style.minHeight = "100%";
  iFrame.style.border = "none";
  iFrame.style.borderRadius = "16px";

  modalBody.appendChild(iFrame);

  body.appendChild(modal);

  const handleMessage = (event) => {
    if (!event || event.origin !== domain) {
      return;
    }

    if (event.data && event.data.showModal) {
      modal.style.display = "block";
    } else if (event.data && event.data.closeModal) {
      if (callback) {
        const response = { success };

        if (event.data.connectionStatus) {
          response.success = event.data.connectionStatus !== "failed";
        }

        if (event.data.connectionId) {
          response.connectionId = event.data.connectionId;
        }

        if (event.data.credentialId) {
          response.credentialId = event.data.credentialId;
        }

        callback(response);
      }
      try {
        if (modal) {
          body.removeChild(modal);
        }
      } catch (err) {
        console.log(err);
      }
      window.removeEventListener("message", handleMessage);
    } else if (event.data) {
      let closeTimeout = 200;
      success = true;

      if (callback) {
        const response = { success };

        if (event.data) {
          if (event.data.connectionId) {
            response.connectionId = event.data.connectionId;
            closeTimeout = 1000;
          }

          if (event.data.credentialId) {
            response.credentialId = event.data.credentialId;
            closeTimeout = 1000;
          }
        }

        callback(response);
      }

      if (event.data.closeModal || event.data.closeModal === undefined) {
        setTimeout(() => {
          try {
            if (modal) {
              body.removeChild(modal);
            }
          } catch (err) {
            console.log(err);
          }
          window.removeEventListener("message", handleMessage);
        }, closeTimeout);
      }
    }
  };
  window.addEventListener("message", handleMessage);
}

function getDomainsByRegion(region) {
  const DEFAULT_REGION = "us";
  const DOMAIN_MAP = {
    us: {
      app: "https://app.runalloy.com",
      embedded: "https://embedded.runalloy.com",
    },
    eu: {
      app: "https://eu-app.runalloy.com",
      embedded: "https://eu-embedded.runalloy.com",
    },
  };

  const key = region ? region.toLowerCase() : DEFAULT_REGION;

  return DOMAIN_MAP[key] || DOMAIN_MAP[DEFAULT_REGION];
}

module.exports = Alloy;