pipeDriveWhatsappExtension.js

"use strict";

class pipeDriveWhatsappExtension {
  constructor() {}

  init() {
    this.whtpipeButtonElement = null;
    this.queue = [];
    this.icon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>`;
    this.currentNumber = null;

    this.mutationObserver = new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        if (mutation.target.tagName === "TABLE") {
          this.queue.push("UPDATE_PHONES");
        }
      });
      this.phonesSetEvents();
    });

    this.mutationObserver.observe(document.documentElement, {
      attributes: true,
      characterData: true,
      childList: true,
      subtree: true,
      attributeOldValue: true,
      characterDataOldValue: true
    });
    window.addEventListener("unload", () => {
      this.mutationObserver.disconnect();
    });
    this.createButton();
  }

  destroy() {
    if (document.querySelector(".whatsappPipeline"))
      document.querySelector(".whatsappPipeline").remove();
  }

  getPhones() {
    return document.querySelectorAll(
      "td[data-field='phone'] .gridCell__label.gridCell__label--interactive"
    );
  }

  changeMessage(message) {
    this.whatsappMessage = message;
  }

  phoneSanitize(phone) {
    let cleanNumber = phone.innerText.match(/[0-9|\+]/g).join("");
    return cleanNumber.indexOf("+55") === 0
      ? cleanNumber.replace("+", "")
      : `55${cleanNumber}`;
  }

  phoneMouseEvent(cell, phone) {
    let { x, y } = cell.getClientRects()[0];
    this.whtpipeButtonElement.style.display = "block";
    this.whtpipeButtonElement.style.left = `${Math.round(x)}px`;
    this.whtpipeButtonElement.style.top = `${Math.round(y)}px`;
    this.currentNumber = this.phoneSanitize(phone);
    this.user = jQuery(cell.parentElement.parentElement.parentElement)
      .find("td[data-field='name'] a")
      .text();
    if (this.user) this.user = this.user.split(" ")[0];
  }

  phonesSetEvents() {
    if (this.queue.length > 1) {
      this.queue.shift();
      this.phonesSetEvents();
      return false;
    }
    this.getPhones().forEach(phone => {
      const cell = phone.parentElement.parentElement;
      cell.removeEventListener("mouseenter", () =>
        this.phoneMouseEvent(cell, phone)
      );
      cell.addEventListener("mouseenter", () =>
        this.phoneMouseEvent(cell, phone)
      );
    });
    this.queue.shift();
  }

  createButton() {
    if (document.querySelector(".whatsappPipeline"))
      document.querySelector(".whatsappPipeline").remove();
    let whtpipeButton = document.createElement("div");
    whtpipeButton.id = "whtpipeButton";
    whtpipeButton.innerHTML = this.icon;
    whtpipeButton.classList.add("whatsappPipeline");
    document.body.prepend(whtpipeButton);
    this.whtpipeButtonElement = document.querySelector("#whtpipeButton");
    this.whtpipeButtonElement.addEventListener("click", () => {
      let text = "";
      text = "Olá {usuario}, tudo bem?".replace("{usuario}", this.user);
      window.open(
        `//api.whatsapp.com/send?phone=${this.currentNumber}&text=${text}`
      );
    });
  }
}