diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/BillingCenter.js b/services/static-webserver/client/source/class/osparc/desktop/credits/BillingCenter.js index dfc446f0d24..fb223e28443 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/BillingCenter.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/BillingCenter.js @@ -91,7 +91,6 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", { __activityPage: null, __transactionsPage: null, __usagePage: null, - __buyCredits: null, __transactionsTable: null, __getOverviewPage: function() { @@ -103,17 +102,7 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", { overview.set({ margin: 10 }); - overview.addListener("buyCredits", e => { - this.__openBuyCredits(); - const { - walletId - } = e.getData(); - const store = osparc.store.Store.getInstance(); - const found = store.getWallets().find(wallet => wallet.getWalletId() === parseInt(walletId)); - if (found) { - this.__buyCredits.setWallet(found); - } - }); + overview.addListener("buyCredits", () => this.__openBuyCredits()); overview.addListener("toWallets", () => this.openWallets()); overview.addListener("toActivity", () => this.__openActivity()); overview.addListener("toTransactions", () => this.__openTransactions()); @@ -136,17 +125,7 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", { walletsView.set({ margin: 10 }); - walletsView.addListener("buyCredits", e => { - this.__openBuyCredits(); - const { - walletId - } = e.getData(); - const store = osparc.store.Store.getInstance(); - const found = store.getWallets().find(wallet => wallet.getWalletId() === parseInt(walletId)); - if (found) { - this.__buyCredits.setWallet(found); - } - }); + walletsView.addListener("buyCredits", () => this.__openBuyCredits()); page.add(walletsView); return page; }, diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/OneTimePayment.js b/services/static-webserver/client/source/class/osparc/desktop/credits/OneTimePayment.js index f8ffd04d4d9..791755beae8 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/OneTimePayment.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/OneTimePayment.js @@ -234,26 +234,6 @@ qx.Class.define("osparc.desktop.credits.OneTimePayment", { }); row++; - const walletTitle = new qx.ui.basic.Label().set({ - value: "Credit Account", - font: "text-14" - }); - layout.add(walletTitle, { - row, - column: 0 - }); - const walletLabel = new qx.ui.basic.Label().set({ - font: "text-14" - }); - this.bind("wallet", walletLabel, "value", { - converter: wallet => wallet ? wallet.getName() : this.tr("Select Credit Account") - }); - layout.add(walletLabel, { - row, - column: 1 - }); - row++; - return layout; }, @@ -265,113 +245,141 @@ qx.Class.define("osparc.desktop.credits.OneTimePayment", { maxWidth: 150, center: true }); + buyBtn.addListener("execute", () => this.__startPayment()); + return buyBtn; + }, - const buyingBtn = () => { - buyBtn.set({ - fetching: true, - label: this.tr("Buying...") - }); + __buyingCredits: function(isBuying) { + const buyBtn = this.getChildControl("buy-button"); + buyBtn.set({ + fetching: isBuying, + label: isBuying ? this.tr("Buying...") : this.tr("Buy Credits") + }); + }, + + __paymentCompleted: function(paymentData) { + this.__buyingCredits(false); + + if (paymentData["completedStatus"]) { + const msg = this.tr("Payment ") + osparc.utils.Utils.onlyFirstsUp(paymentData["completedStatus"]); + switch (paymentData["completedStatus"]) { + case "SUCCESS": + osparc.FlashMessenger.getInstance().logAs(msg, "INFO"); + break; + case "PENDING": + osparc.FlashMessenger.getInstance().logAs(msg, "WARNING"); + break; + case "CANCELED": + case "FAILED": + osparc.FlashMessenger.getInstance().logAs(msg, "ERROR"); + break; + default: + console.error("completedStatus unknown"); + break; + } + } + this.fireEvent("transactionCompleted"); + }, + + __cancelPayment: function(paymentId) { + this.__buyingCredits(false); + + const wallet = this.getWallet(); + // inform backend + const params = { + url: { + walletId: wallet.getWalletId(), + paymentId + } }; - const buyCreditsBtn = () => { - buyBtn.set({ - fetching: false, - label: this.tr("Buy Credits") - }); + osparc.data.Resources.fetch("payments", "cancelPayment", params); + }, + + __windowClosed: function(paymentId) { + const msg = this.tr("The window was closed. Try again and follow the instructions inside the opened window."); + osparc.FlashMessenger.getInstance().logAs(msg, "WARNING"); + this.__cancelPayment(paymentId); + }, + + __startPayment: function() { + this.__buyingCredits(true); + + const wallet = this.getWallet(); + const nCredits = this.getNCredits(); + const totalPrice = this.getTotalPrice(); + const params = { + url: { + walletId: wallet.getWalletId() + }, + data: { + priceDollars: totalPrice, + osparcCredits: nCredits + } }; - buyBtn.addListener("execute", () => { - const nCredits = this.getNCredits(); - const totalPrice = this.getTotalPrice(); - const wallet = this.getWallet(); - buyingBtn(); - - const params = { - url: { - walletId: wallet.getWalletId() - }, - data: { - priceDollars: totalPrice, - osparcCredits: nCredits - } - }; - osparc.data.Resources.fetch("payments", "startPayment", params) - .then(data => { - const paymentId = data["paymentId"]; - const url = data["paymentFormUrl"]; - const options = { - width: 400, - height: 400, - top: 200, - left: 100, - scrollbars: false - }; - const modal = true; - const useNativeModalDialog = false; // this allow using the Blocker - - const pgWindow = osparc.desktop.credits.PaymentGatewayWindow.popUp( - url, - "pgWindow", - options, - modal, - useNativeModalDialog - ); - - // Listen to socket event - const socket = osparc.wrapper.WebSocket.getInstance(); - const slotName = "paymentCompleted"; - socket.on(slotName, jsonString => { - const paymentData = JSON.parse(jsonString); - if (paymentData["completedStatus"]) { - const msg = this.tr("Payment ") + osparc.utils.Utils.onlyFirstsUp(paymentData["completedStatus"]); - switch (paymentData["completedStatus"]) { - case "SUCCESS": - osparc.FlashMessenger.getInstance().logAs(msg, "INFO"); - // demo purposes - wallet.setCreditsAvailable(wallet.getCreditsAvailable() + nCredits); - break; - case "PENDING": - osparc.FlashMessenger.getInstance().logAs(msg, "WARNING"); - break; - case "CANCELED": - case "FAILED": - osparc.FlashMessenger.getInstance().logAs(msg, "ERROR"); - break; - default: - console.error("completedStatus unknown"); - break; - } - } - socket.removeSlot(slotName); - buyCreditsBtn(); - pgWindow.close(); - this.fireEvent("transactionCompleted"); - }); - - const cancelPayment = () => { - socket.removeSlot(slotName); - buyCreditsBtn(); - // inform backend - const params2 = { - url: { - walletId: wallet.getWalletId(), - paymentId - } - }; - osparc.data.Resources.fetch("payments", "cancelPayment", params2); - }; - // Listen to close window event (Bug: it doesn't work) - pgWindow.onbeforeunload = () => { - const msg = this.tr("The window was close. Try again and follow the instructions inside the opened window."); - osparc.FlashMessenger.getInstance().logAs(msg, "WARNING"); - cancelPayment(); - }; - }) - .catch(err => { - console.error(err); - osparc.FlashMessenger.logAs(err.message, "ERROR"); - buyCreditsBtn(); + osparc.data.Resources.fetch("payments", "startPayment", params) + .then(data => { + const paymentId = data["paymentId"]; + const url = data["paymentFormUrl"]; + const stayWithinApp = true; + const pgWindow = stayWithinApp ? this.__popUpPaymentGateway(paymentId, url) : this.__popUpPaymentGatewayOld(paymentId, url); + + // Listen to socket event + const socket = osparc.wrapper.WebSocket.getInstance(); + const slotName = "paymentCompleted"; + socket.on(slotName, jsonString => { + const paymentData = JSON.parse(jsonString); + this.__paymentCompleted(paymentData); + socket.removeSlot(slotName); + pgWindow.close(); }); - }); - return buyBtn; + }) + .catch(err => { + console.error(err); + osparc.FlashMessenger.logAs(err.message, "ERROR"); + this.__buyingCredits(false); + }); + }, + + __popUpPaymentGateway: function(paymentId, url) { + const options = { + width: 400, + height: 600 + }; + + const pgWindow = osparc.desktop.credits.PaymentGatewayWindow.popUp( + url, + "Buy Credits", + options + ); + // listen to "tap" instead of "execute": the "execute" is not propagated + pgWindow.getChildControl("close-button").addListener("tap", () => this.__windowClosed(paymentId)); + + return pgWindow; + }, + + __popUpPaymentGatewayOld: function(paymentId, url) { + const options = { + width: 400, + height: 600, + top: 100, + left: 200, + scrollbars: false + }; + const modal = true; + const useNativeModalDialog = false; // this allow using the Blocker + + const pgWindow = osparc.desktop.credits.PaymentGatewayWindow.popUpOld( + url, + "pgWindow", + options, + modal, + useNativeModalDialog + ); + + // Listen to close window event (Bug: it doesn't work) + pgWindow.onbeforeunload = () => this.__windowClosed(paymentId); + + return pgWindow; } } }); diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/PaymentGatewayWindow.js b/services/static-webserver/client/source/class/osparc/desktop/credits/PaymentGatewayWindow.js index b57f4e5536c..4b0c12b1bf8 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/credits/PaymentGatewayWindow.js +++ b/services/static-webserver/client/source/class/osparc/desktop/credits/PaymentGatewayWindow.js @@ -19,7 +19,14 @@ qx.Class.define("osparc.desktop.credits.PaymentGatewayWindow", { type: "static", statics: { - popUp: function(url, id, options, modal, useNativeModalDialog) { + popUp: function(url, title, options) { + const iframe = new qx.ui.embed.Iframe(url); + return osparc.ui.window.Window.popUpInWindow(iframe, title, options.width, options.height).set({ + clickAwayClose: false + }); + }, + + popUpOld: function(url, id, options, modal, useNativeModalDialog) { const blocker = qx.bom.Window.getBlocker(); blocker.setBlockerColor("#FFF"); blocker.setBlockerOpacity(0.6); diff --git a/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethods.js b/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethods.js index 9a69ffb9bc4..3426d3556a2 100644 --- a/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethods.js +++ b/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethods.js @@ -100,10 +100,48 @@ qx.Class.define("osparc.desktop.paymentMethods.PaymentMethods", { } }; osparc.data.Resources.fetch("paymentMethods", "init", params) - .then(() => this.__fetchPaymentMethods()); + .then(data => { + this.__popUpPaymentGateway(data["paymentMethodId"], data["paymentMethodFormUrl"]); + this.__fetchPaymentMethods(); + }); } }, + __cancelPaymentMethod: function(paymentMethodId) { + const wallet = this.getWallet(); + // inform backend + const params = { + url: { + walletId: wallet.getWalletId(), + paymentMethodId + } + }; + osparc.data.Resources.fetch("paymentMethods", "cancel", params); + }, + + __windowClosed: function(paymentMethodId) { + const msg = this.tr("The window was closed. Try again and follow the instructions inside the opened window."); + osparc.FlashMessenger.getInstance().logAs(msg, "WARNING"); + this.__cancelPaymentMethod(paymentMethodId); + }, + + __popUpPaymentGateway: function(paymentMethodId, url) { + const options = { + width: 400, + height: 600 + }; + + const pgWindow = osparc.desktop.credits.PaymentGatewayWindow.popUp( + url, + "Add payment method", + options + ); + // listen to "tap" instead of "execute": the "execute" is not propagated + pgWindow.getChildControl("close-button").addListener("tap", () => this.__windowClosed(paymentMethodId)); + + return pgWindow; + }, + __fetchPaymentMethods: function() { const listLayout = this.getChildControl("payment-methods-list-layout"); listLayout.removeAll();