Generated by XState Viz: https://xstate.js.org/viz

machine.js

let prod = false;

const getVizPromiseInput = () => {
  return document.getElementById("serviceInput").value;
};
const clearVizPromiseInput = () => {
  document.getElementById("serviceInput").value = "";
};
const disableViz = () => {
  document.getElementById("serviceCont").className = "disabled";
};
const enableViz = () => {
  document.getElementById("serviceCont").className = "";
};

const resolveWithTextInput = (resolve) => {
  resolve(getVizPromiseInput());
  clearVizPromiseInput();
};

const getVizPromise = () => {
  const doneBtn = document.getElementById("serviceDone");
  const errBtn = document.getElementById("serviceError");
  enableViz()
  return new Promise((resolve, reject) => {
    const doneClick = () => {
      resolveWithTextInput(resolve);
      doneBtn?.removeEventListener("click", doneClick);
      disableViz()
      clearVizPromiseInput()
    };
    const errClick = () => {
      reject();
      errBtn?.removeEventListener("click", errClick);
      disableViz()
      clearVizPromiseInput()
    };
    doneBtn?.addEventListener("click", doneClick);
    errBtn?.addEventListener("click", errClick);
  });
};

const setupVizPromiseInput = () => {
  // add the newly created element and its content into the DOM
  if (!document.getElementById("serviceCont")) {
    var header = document.getElementsByTagName("header")[0];
    header.insertAdjacentHTML(
      "afterbegin",
      `
  <div id="serviceCont" class="disabled" >
    <div id="serviceError" class="serviceButton" style="background-color: #cc6a7e;">err </div>&nbsp;
    <div id="serviceDone"  class="serviceButton" style="background-color: #4ac752;">done</div>&nbsp;
    <input id="serviceInput" />
  </div>`
    );

    const style = document.createElement("style");
    style.innerHTML = `
    #serviceCont {
        display: flex;
        flex-direction: row;
        height: 60px;
    }
    #serviceCont.disabled {
      opacity: .5
    }
    .serviceButton {
      cursor: pointer;
        padding: 20px; margin-right: 10px;
    }
    #serviceCont.disabled .serviceButton {
      cursor:  auto;
      background-color: gray
    }
    `;
    document.head.appendChild(style);
  }
};

!prod && setupVizPromiseInput();
getVizPromise()
  .then((val) => alert(`click ${val || 'empty'}`))
  .catch(() => alert("err"));