Payment gateway within App (#4933)

Author: odeimaiz

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;
     },

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;
     }
   }
 });

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);

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();