Merge pull request #39 from bosonprotocol/click-close-modal

feat: allow to hide the modal + finalize js script
bosonprotocol · Aug 10, 2023 · 2574ebb · 2574ebb
2 parents b2ccc54 + 9ef2333
commit 2574ebb
Show file tree

Hide file tree

Showing 7 changed files with 215 additions and 116 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@bosonprotocol/react-kit": "^0.18.0-alpha.11",
+    "@bosonprotocol/react-kit": "^0.18.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

diff --git a/public/example.html b/public/example.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html PUBLIC>
+<html>
+  <head>
+    <title>Widget Integration Example</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./styles.css">
+    <script async type="text/javascript" src="./scripts/boson-widgets.js"></script>
+  </head>
+  <body>
+    <div>
+      <button type="button" id="boson-finance" class="bosonButton" data-seller-id="25">Show Finance</button>
+    </div>
+    <div>
+      <button type="button" id="boson-redeem" class="bosonButton">Show Redeem</button>
+    </div>
+    <!-- <div>
+      <button type="button" id="boson-redeem" class="bosonButton" data-exchange-id="80">Show Redeem (ExchangeId:80)</button>
+    </div> -->
+    <div>
+      <button type="button" id="boson-hide-modal" class="bosonButton">Hide</button>
+    </div>
+  </body>
+</html>
diff --git a/public/scripts/boson-widgets.js b/public/scripts/boson-widgets.js
@@ -0,0 +1,97 @@
+const constants = {
+  scriptName: "boson-widgets.js", // the name of the current file
+  css: {
+    modalClass: "bosonModal",
+    loadingClass: "bosonLoading"
+  },
+  loadingDurationMSec: 2000,
+  iFrameId: "bosonModal",
+  showRedeemId: "boson-redeem",
+  showFinanceId: "boson-finance",
+  exchangeIdTag: "data-exchange-id",
+  sellerIdTag: "data-seller-id",
+  hideModalId: "boson-hide-modal",
+  hideModalMessage: "boson-close-iframe",
+  financeUrl: (widgetsHost, sellerId) =>
+    `${widgetsHost}/#/finance?sellerId=${sellerId}`,
+  redeemUrl: (widgetsHost, exchangeId) =>
+    `${widgetsHost}/#/redeem?exchangeId=${exchangeId}`
+};
+var scripts = document.getElementsByTagName("script");
+var widgetsHost = null;
+if (scripts) {
+  for (var i = 0; i < scripts.length; i++) {
+    if (
+      scripts[i].attributes["src"].value.endsWith(`/${constants.scriptName}`)
+    ) {
+      widgetsHost = scripts[i].attributes["src"].value.replace(
+        `/${constants.scriptName}`,
+        ""
+      );
+      break;
+    }
+  }
+} else {
+  console.error("Unable to find <scripts> tag");
+}
+const injectCSS = (css) => {
+  let el = document.createElement("style");
+  el.type = "text/css";
+  el.innerText = css;
+  document.head.appendChild(el);
+  return el;
+};
+injectCSS(
+  `.${constants.css.modalClass} { position: fixed; z-index: 1; width: 100%; left: 0; height: 100%; top: 0; border-style: none; }` +
+    `.${constants.css.loadingClass} { position: fixed; z-index: 1; width: 100%; left: 0; height: 100%; top: 0; border-style: none; opacity: 50%; background: black; cursor: wait; }`
+);
+const showLoading = (delayMsec) => {
+  var loading = document.createElement("div");
+  loading.className = constants.css.loadingClass;
+  document.body.appendChild(loading);
+  setTimeout(() => {
+    loading.remove();
+  }, delayMsec);
+};
+const createIFrame = (src) => {
+  var bosonModal = document.createElement("iframe");
+  bosonModal.id = constants.iFrameId;
+  bosonModal.src = src;
+  bosonModal.className = constants.css.modalClass;
+  document.body.appendChild(bosonModal);
+};
+const hideIFrame = () => {
+  let el = document.getElementById(constants.iFrameId);
+  if (el) {
+    el.remove();
+  }
+};
+const showFinanceId = document.getElementById(constants.showFinanceId);
+if (showFinanceId) {
+  showFinanceId.onclick = function () {
+    showLoading(constants.loadingDurationMSec);
+    hideIFrame();
+    var sellerId = showFinanceId.attributes[constants.sellerIdTag]?.value;
+    createIFrame(constants.financeUrl(widgetsHost, sellerId));
+  };
+}
+const showRedeemId = document.getElementById(constants.showRedeemId);
+if (showRedeemId) {
+  showRedeemId.onclick = function () {
+    showLoading(constants.loadingDurationMSec);
+    hideIFrame();
+    var exchangeId = showRedeemId.attributes[constants.exchangeIdTag]?.value;
+    createIFrame(constants.redeemUrl(widgetsHost, exchangeId));
+  };
+}
+const hideModalId = document.getElementById(constants.hideModalId);
+if (hideModalId) {
+  hideModalId.onclick = function () {
+    hideIFrame();
+  };
+}
+window.addEventListener("message", (event) => {
+  if (event.data === constants.hideModalMessage) {
+    hideIFrame();
+  }
+});