From 22e9197c851ac108861be6a088babfac91978ce3 Mon Sep 17 00:00:00 2001 From: Ludovic Levalleux Date: Mon, 14 Aug 2023 11:35:14 +0100 Subject: [PATCH] feat: allow to bypass redemption steps for Redeem or Cancel + fix issues in js script --- package-lock.json | 14 ++--- package.json | 2 +- public/scripts/boson-widgets.js | 70 +++++++++++++++--------- src/components/widgets/redeem/Redeem.tsx | 25 ++++++++- 4 files changed, 76 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index f0eb104..477cb71 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "widgets", "version": "0.1.0", "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", @@ -2224,9 +2224,9 @@ } }, "node_modules/@bosonprotocol/react-kit": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.18.0.tgz", - "integrity": "sha512-8AOqGBewRdvXJC0ngYfIv8+Ha7swtwv4H1mAfcgRg+ljp9xJRjMBOVKra3J8ARq2ctXaCxfgsLJZppctnVs6DA==", + "version": "0.19.0-alpha.0", + "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.19.0-alpha.0.tgz", + "integrity": "sha512-fvuSZ317WaxjEZWkwYfVdVNL6gZwvR12DPC4UKpBu5as1dU/NFBusZWLmHVTRzuZavD3DoR+htNZ9QsTWiRXvw==", "dependencies": { "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", "@bosonprotocol/core-sdk": "^1.29.0", @@ -30691,9 +30691,9 @@ } }, "@bosonprotocol/react-kit": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.18.0.tgz", - "integrity": "sha512-8AOqGBewRdvXJC0ngYfIv8+Ha7swtwv4H1mAfcgRg+ljp9xJRjMBOVKra3J8ARq2ctXaCxfgsLJZppctnVs6DA==", + "version": "0.19.0-alpha.0", + "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.19.0-alpha.0.tgz", + "integrity": "sha512-fvuSZ317WaxjEZWkwYfVdVNL6gZwvR12DPC4UKpBu5as1dU/NFBusZWLmHVTRzuZavD3DoR+htNZ9QsTWiRXvw==", "requires": { "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", "@bosonprotocol/core-sdk": "^1.29.0", diff --git a/package.json b/package.json index 4c19e92..e05415f 100644 --- a/package.json +++ b/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", diff --git a/public/scripts/boson-widgets.js b/public/scripts/boson-widgets.js index 6405e02..5fdf009 100644 --- a/public/scripts/boson-widgets.js +++ b/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 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(); diff --git a/src/components/widgets/redeem/Redeem.tsx b/src/components/widgets/redeem/Redeem.tsx index cc4c762..5b06416 100644 --- a/src/components/widgets/redeem/Redeem.tsx +++ b/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 ( ); } + +function checkBypassMode( + bypassModeStr: string | undefined +): RedemptionBypassMode { + switch (bypassModeStr) { + case RedemptionBypassMode.REDEEM: { + return RedemptionBypassMode.REDEEM; + } + case RedemptionBypassMode.CANCEL: { + return RedemptionBypassMode.CANCEL; + } + default: { + return RedemptionBypassMode.NORMAL; + } + } +}