Merge pull request #46 from bosonprotocol/bypass-step-on-redeem-cancel

feat: allow to bypass redemption steps for Redeem or Cancel + fix iss…

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@bosonprotocol/react-kit": "^0.18.0",
+    "@bosonprotocol/react-kit": "^0.19.0-alpha.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

public/scripts/boson-widgets.js

@@ -9,19 +9,23 @@ const constants = {
   showRedeemId: "boson-redeem",
   showFinanceId: "boson-finance",
   exchangeIdTag: "data-exchange-id",
+  bypassModeTag: "data-bypass-mode",
   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}`
+  redeemUrl: (widgetsHost, exchangeId, bypassMode) =>
+    `${widgetsHost}/#/redeem?exchangeId=${exchangeId || ""}&bypassMode=${
+      bypassMode || ""
+    }`
 };
 var scripts = document.getElementsByTagName("script");
 var widgetsHost = null;
 if (scripts) {
   for (var i = 0; i < scripts.length; i++) {
     if (
+      scripts[i].attributes["src"]?.value &&
       scripts[i].attributes["src"].value.endsWith(`/${constants.scriptName}`)
     ) {
       widgetsHost = scripts[i].attributes["src"].value.replace(
@@ -31,6 +35,9 @@ if (scripts) {
       break;
     }
   }
+  if (!widgetsHost) {
+    console.error("Unable to find widgetsHost from script tags");
+  }
 } else {
   console.error("Unable to find <scripts> tag");
 }
@@ -66,32 +73,43 @@ const hideIFrame = () => {
     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();
   }
 });
+function bosonWidgetReload() {
+  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 showRedeemEls = document.querySelectorAll(
+    `[id^="${constants.showRedeemId}"]`
+  );
+  for (let i = 0; i < showRedeemEls.length; i++) {
+    const showRedeemId = showRedeemEls[i];
+    console.log(
+      "Boson Widget - add onClick handle on element",
+      showRedeemId.id
+    );
+    showRedeemId.onclick = function () {
+      showLoading(constants.loadingDurationMSec);
+      hideIFrame();
+      var exchangeId = showRedeemId.attributes[constants.exchangeIdTag]?.value;
+      var bypassMode = showRedeemId.attributes[constants.bypassModeTag]?.value;
+      createIFrame(constants.redeemUrl(widgetsHost, exchangeId, bypassMode));
+    };
+  }
+  const hideModalId = document.getElementById(constants.hideModalId);
+  if (hideModalId) {
+    hideModalId.onclick = function () {
+      hideIFrame();
+    };
+  }
+}
+bosonWidgetReload();

src/components/widgets/redeem/Redeem.tsx

@@ -1,4 +1,7 @@
-import { RedemptionWidget } from "@bosonprotocol/react-kit";
+import {
+  RedemptionBypassMode,
+  RedemptionWidget
+} from "@bosonprotocol/react-kit";
 import { useSearchParams } from "react-router-dom";
 
 import { CONFIG } from "../../../config";
@@ -7,6 +10,9 @@ export const redeemPath = "/redeem";
 export function Redeem() {
   const [searchParams] = useSearchParams();
   const exchangeId = searchParams.get("exchangeId") || undefined;
+  const bypassMode: RedemptionBypassMode = checkBypassMode(
+    searchParams.get("bypassMode") || undefined
+  );
 
   return (
     <RedemptionWidget
@@ -45,6 +51,23 @@ export function Redeem() {
         }
       }}
       modalMargin="2%"
+      bypassMode={bypassMode}
     ></RedemptionWidget>
   );
 }
+
+function checkBypassMode(
+  bypassModeStr: string | undefined
+): RedemptionBypassMode {
+  switch (bypassModeStr) {
+    case RedemptionBypassMode.REDEEM: {
+      return RedemptionBypassMode.REDEEM;
+    }
+    case RedemptionBypassMode.CANCEL: {
+      return RedemptionBypassMode.CANCEL;
+    }
+    default: {
+      return RedemptionBypassMode.NORMAL;
+    }
+  }
+}