bosonprotocol · levalleux-ludo · Aug 16, 2023 · Aug 15, 2023 · Aug 15, 2023 · Aug 15, 2023
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.19.0",
+    "@bosonprotocol/react-kit": "^0.19.1-alpha.1",
     "@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
@@ -5,7 +5,16 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="./styles.css">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;800&display=swap"
+      rel="stylesheet"
+    />
     <script async type="text/javascript" src="./scripts/boson-widgets.js"></script>
+    <style>
+      div {
+        margin: 1rem;
+      }
+    </style>
   </head>
   <body>
     <div>
@@ -14,11 +23,17 @@
     <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>
+      <button type="button" id="boson-redeem-80" class="bosonButton" data-exchange-id="80">Show Redeem (ExchangeId:80)</button>
+    </div>
+    <div>
+      <button type="button" id="boson-redeem-redeem-80" class="bosonButton" data-exchange-id="80" data-bypass-mode="REDEEM">Redeem Exchange 80</button>
+    </div>
+    <div>
+      <button type="button" id="boson-redeem-cancel-80" class="bosonButton" data-exchange-id="80" data-bypass-mode="CANCEL">Cancel Exchange 80</button>
+    </div>
+    <div>
+      <button type="button" id="boson-redeem" class="bosonButton" data-redeem-callback-url="http%3A%2F%2Flocalhost%3A3666" data-redeem-callback-headers='%7B%0A%20%20"authorization"%3A%20"Bearer%20eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"%2C%0A%20%20"another-header"%3A%20"%2A%2F%2A"%0A%7D'>Show Redeem (3rd-party backend)</button>
     </div>
   </body>
 </html>
diff --git a/public/scripts/boson-widgets.js b/public/scripts/boson-widgets.js
@@ -4,21 +4,20 @@ const constants = {
     modalClass: "bosonModal",
     loadingClass: "bosonLoading"
   },
-  loadingDurationMSec: 2000,
+  loadingDurationMSec: 200,
   iFrameId: "bosonModal",
+  loadingId: "bosonLoading",
   showRedeemId: "boson-redeem",
   showFinanceId: "boson-finance",
   exchangeIdTag: "data-exchange-id",
   bypassModeTag: "data-bypass-mode",
+  redeemCallbackUrl: "data-redeem-callback-url",
+  redeemCallbackHeaders: "data-redeem-callback-headers",
   sellerIdTag: "data-seller-id",
   hideModalId: "boson-hide-modal",
   hideModalMessage: "boson-close-iframe",
-  financeUrl: (widgetsHost, sellerId) =>
-    `${widgetsHost}/#/finance?sellerId=${sellerId}`,
-  redeemUrl: (widgetsHost, exchangeId, bypassMode) =>
-    `${widgetsHost}/#/redeem?exchangeId=${exchangeId || ""}&bypassMode=${
-      bypassMode || ""
-    }`
+  financeUrl: (widgetsHost) => `${widgetsHost}/#/finance`,
+  redeemUrl: (widgetsHost) => `${widgetsHost}/#/redeem`
 };
 var scripts = document.getElementsByTagName("script");
 var widgetsHost = null;
@@ -52,19 +51,24 @@ 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) => {
+const showLoading = () => {
   var loading = document.createElement("div");
+  loading.id = constants.loadingId;
   loading.className = constants.css.loadingClass;
   document.body.appendChild(loading);
-  setTimeout(() => {
-    loading.remove();
-  }, delayMsec);
 };
-const createIFrame = (src) => {
+const hideLoading = () => {
+  let el = document.getElementById(constants.loadingId);
+  if (el) {
+    el.remove();
+  }
+};
+const createIFrame = (src, onLoad) => {
   var bosonModal = document.createElement("iframe");
   bosonModal.id = constants.iFrameId;
   bosonModal.src = src;
   bosonModal.className = constants.css.modalClass;
+  bosonModal.onload = onLoad;
   document.body.appendChild(bosonModal);
 };
 const hideIFrame = () => {
@@ -73,6 +77,11 @@ const hideIFrame = () => {
     el.remove();
   }
 };
+const buildParams = (paramsTable) =>
+  paramsTable
+    .map((param) => (param.value ? `${param.tag}=${param.value}` : undefined))
+    .filter((p) => !!p)
+    .join("&");
 window.addEventListener("message", (event) => {
   if (event.data === constants.hideModalMessage) {
     hideIFrame();
@@ -82,10 +91,10 @@ 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));
+      bosonWidgetShowFinance({
+        sellerId
+      });
     };
   }
   const showRedeemEls = document.querySelectorAll(
@@ -98,11 +107,18 @@ function bosonWidgetReload() {
       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));
+      var redeemCallbackUrl =
+        showRedeemId.attributes[constants.redeemCallbackUrl]?.value;
+      var redeemCallbackHeaders =
+        showRedeemId.attributes[constants.redeemCallbackHeaders]?.value;
+      bosonWidgetShowRedeem({
+        exchangeId,
+        bypassMode,
+        redeemCallbackUrl,
+        redeemCallbackHeaders
+      });
     };
   }
   const hideModalId = document.getElementById(constants.hideModalId);
@@ -113,3 +129,28 @@ function bosonWidgetReload() {
   }
 }
 bosonWidgetReload();
+
+function bosonWidgetShowRedeem(args) {
+  const params = buildParams([
+    { tag: "exchangeId", value: args.exchangeId },
+    { tag: "bypassMode", value: args.bypassMode },
+    { tag: "redeemCallbackUrl", value: args.redeemCallbackUrl },
+    { tag: "redeemCallbackHeaders", value: args.redeemCallbackHeaders }
+  ]);
+  showLoading();
+  hideIFrame();
+  createIFrame(
+    `${constants.redeemUrl(widgetsHost)}${params ? "?" + params : ""}`,
+    () => hideLoading()
+  );
+}
+
+function bosonWidgetShowFinance(args) {
+  const params = buildParams([{ tag: "sellerId", value: args.sellerId }]);
+  showLoading(constants.loadingDurationMSec);
+  hideIFrame();
+  createIFrame(
+    `${constants.financeUrl(widgetsHost)}${params ? "?" + params : ""}`,
+    () => hideLoading()
+  );
+}
diff --git a/src/components/widgets/redeem/Redeem.tsx b/src/components/widgets/redeem/Redeem.tsx
@@ -13,6 +13,20 @@ export function Redeem() {
   const bypassMode: RedemptionBypassMode = checkBypassMode(
     searchParams.get("bypassMode") || undefined
   );
+  const redeemCallbackUrl = searchParams.get("redeemCallbackUrl") || undefined;
+  const redeemCallbackHeaders =
+    searchParams.get("redeemCallbackHeaders") || undefined;
+  let redeemCallbackHeadersDecoded = undefined;
+  if (redeemCallbackHeaders) {
+    try {
+      redeemCallbackHeadersDecoded = JSON.parse(redeemCallbackHeaders);
+      console.log("redeemCallbackHeadersDecoded", redeemCallbackHeadersDecoded);
+    } catch (e) {
+      console.error(
+        `Unable to parse JSON from redeemCallbackHeaders='${redeemCallbackHeaders}': ${e}`
+      );
+    }
+  }
 
   return (
     <RedemptionWidget
@@ -52,6 +66,8 @@ export function Redeem() {
       }}
       modalMargin="2%"
       bypassMode={bypassMode}
+      redeemCallbackUrl={redeemCallbackUrl}
+      redeemCallbackHeaders={redeemCallbackHeadersDecoded}
     ></RedemptionWidget>
   );
 }

diff --git a/tests/redemptionBackend/.gitignore b/tests/redemptionBackend/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+build
diff --git a/tests/redemptionBackend/index.ts b/tests/redemptionBackend/index.ts
@@ -0,0 +1,11 @@
+import { startApp } from "./src/app";
+
+(async () => {
+  try {
+    console.log("Hello World!");
+    startApp();
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+})();