🎨 Beautify Buy credits

services/static-webserver/client/source/class/osparc/data/Resources.js

@@ -739,6 +739,10 @@ qx.Class.define("osparc.data.Resources", {
           cancelPayment: {
             method: "POST",
             url: statics.API + "/wallets/{walletId}/payments/{paymentId}:cancel"
+          },
+          payWithPaymentMethod: {
+            method: "POST",
+            url: statics.API + "/wallets/{walletId}/payments-methods/{paymentMethodId}:pay"
           }
         }
       },

services/static-webserver/client/source/class/osparc/desktop/credits/AutoRecharge.js

@@ -36,8 +36,14 @@ qx.Class.define("osparc.desktop.credits.AutoRecharge", {
     }
   },
 
+  events: {
+    "addNewPaymentMethod": "qx.event.type.Event"
+  },
+
   members: {
-    __form: null,
+    __rechargeField: null,
+    __limitField: null,
+    __paymentMethodField: null,
 
     _createChildControlImpl: function(id) {
       let control;
@@ -104,21 +110,10 @@ qx.Class.define("osparc.desktop.credits.AutoRecharge", {
       this.setEnabled(Boolean(myAccessRights && myAccessRights["write"]));
     },
 
-    __requestData: function() {
+    __requestData: async function() {
       const wallet = this.getWallet();
-      // populate the payment methods
-      osparc.desktop.credits.Utils.getPaymentMethods(wallet.getWalletId())
-        .then(paymentMethods => {
-          const paymentMethodSB = this.__form.getItem("paymentMethod");
-          paymentMethodSB.removeAll();
-          paymentMethods.forEach(paymentMethod => {
-            let label = paymentMethod.cardHolderName;
-            label += " ";
-            label += paymentMethod.cardNumberMasked.substr(paymentMethod.cardNumberMasked.length - 9);
-            const lItem = new qx.ui.form.ListItem(label, null, paymentMethod.idr);
-            paymentMethodSB.add(lItem);
-          });
-        });
+      const paymentMethodSB = this.__paymentMethodField;
+      await osparc.desktop.credits.Utils.populatePaymentMethodSelector(wallet, paymentMethodSB);
 
       // populate the form
       const params = {
@@ -132,10 +127,9 @@ qx.Class.define("osparc.desktop.credits.AutoRecharge", {
     },
 
     __populateForm: function(arData) {
-      this.__form.getItem("minBalanceInUsd").setValue(arData["minBalanceInUsd"]);
-      this.__form.getItem("topUpAmountInUsd").setValue(arData["topUpAmountInUsd"]);
-      this.__form.getItem("topUpCountdown").setValue(arData["topUpCountdown"] ? arData["topUpCountdown"] : -1);
-      const paymentMethodSB = this.__form.getItem("paymentMethod");
+      this.__rechargeField.setValue(arData["topUpAmountInUsd"]);
+      this.__limitField.setValue(arData["topUpCountdown"] > 0 ? arData["topUpCountdown"]*arData["topUpAmountInUsd"] : 0);
+      const paymentMethodSB = this.__paymentMethodField;
       const paymentMethodFound = paymentMethodSB.getSelectables().find(selectable => selectable.getModel() === arData["paymentMethodId"]);
       if (paymentMethodFound) {
         paymentMethodSB.setSelection([paymentMethodFound]);
@@ -153,73 +147,79 @@ qx.Class.define("osparc.desktop.credits.AutoRecharge", {
     },
 
     __getAutoRechargeForm: function() {
-      const form = this.__form = new qx.ui.form.Form();
-
-      const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
+      const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(15));
 
-      const lowerThresholdLabel = new qx.ui.basic.Label().set({
-        value: this.tr("When balance goes below (US$):"),
+      const rechargeLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
+      const rechargeTitle = new qx.ui.basic.Label().set({
+        value: this.tr("RECHARGING AMOUNT (US$)"),
         font: "text-14"
       });
-      layout.add(lowerThresholdLabel);
-
-      const lowerThresholdField = new qx.ui.form.Spinner().set({
-        minimum: 0,
+      rechargeLayout.add(rechargeTitle);
+      const rechargeField = this.__rechargeField = new qx.ui.form.Spinner().set({
+        minimum: 10,
         maximum: 10000,
         maxWidth: 200
       });
-      form.add(lowerThresholdField, null, null, "minBalanceInUsd");
-      layout.add(lowerThresholdField);
-
-      const balanceBackLabel = new qx.ui.basic.Label().set({
-        value: this.tr("Top up with (US$):"),
-        font: "text-14"
+      rechargeLayout.add(rechargeField);
+      const rechargeHelper = new qx.ui.basic.Label().set({
+        value: this.tr("When your account reaches 25, it gets recharged by this amount"),
+        font: "text-12",
+        rich: true,
+        wrap: true
       });
-      layout.add(balanceBackLabel);
+      rechargeLayout.add(rechargeHelper);
+      layout.add(rechargeLayout);
 
-      const paymentAmountField = new qx.ui.form.Spinner().set({
-        minimum: 0,
-        maximum: 10000,
-        maxWidth: 200
-      });
-      form.add(paymentAmountField, null, null, "topUpAmountInUsd");
-      layout.add(paymentAmountField);
-
-      const nTopUpsLabel = new qx.ui.basic.Label().set({
-        value: this.tr("Number of Top ups left (-1 unlimited):"),
+      const limitLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
+      const limitTitle = new qx.ui.basic.Label().set({
+        value: this.tr("MONTHLY LIMIT (US$)"),
         font: "text-14"
       });
-      layout.add(nTopUpsLabel);
-
-      const nTopUpsField = new qx.ui.form.Spinner().set({
-        minimum: -1,
-        maximum: 100,
+      limitLayout.add(limitTitle);
+      const limitField = this.__limitField = new qx.ui.form.Spinner().set({
+        minimum: 100,
+        maximum: 100000,
         maxWidth: 200
       });
-      form.add(nTopUpsField, null, null, "topUpCountdown");
-      layout.add(nTopUpsField);
+      limitLayout.add(limitField);
+      const limitHelper = new qx.ui.basic.Label().set({
+        value: this.tr("To disable spending limit, clear input field"),
+        font: "text-12",
+        rich: true,
+        wrap: true
+      });
+      limitLayout.add(limitHelper);
+      layout.add(limitLayout);
 
-      const label = new qx.ui.basic.Label().set({
-        value: this.tr("Payment Method:"),
+      const paymentMethodLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
+      const paymentMethodTitle = new qx.ui.basic.Label().set({
+        value: this.tr("PAY WITH"),
         font: "text-14"
       });
-      layout.add(label);
-
-      const paymentMethods = new qx.ui.form.SelectBox().set({
+      paymentMethodLayout.add(paymentMethodTitle);
+      const paymentMethodField = this.__paymentMethodField = new qx.ui.form.SelectBox().set({
+        minWidth: 200,
         maxWidth: 200
       });
-      form.add(paymentMethods, null, null, "paymentMethod");
-      layout.add(paymentMethods);
+      paymentMethodLayout.add(paymentMethodField);
+      const addNewPaymentMethod = new qx.ui.basic.Label(this.tr("Add Payment Method")).set({
+        padding: 0,
+        cursor: "pointer",
+        font: "link-label-12"
+      });
+      addNewPaymentMethod.addListener("tap", () => this.fireEvent("addNewPaymentMethod"));
+      paymentMethodLayout.add(addNewPaymentMethod);
+      layout.add(paymentMethodLayout);
 
       return layout;
     },
 
     __getFieldsData: function() {
       return {
-        minBalanceInUsd: this.__form.getItem("minBalanceInUsd").getValue(),
-        topUpAmountInUsd: this.__form.getItem("topUpAmountInUsd").getValue(),
-        topUpCountdown: this.__form.getItem("topUpCountdown").getValue(),
-        paymentMethodId: this.__form.getItem("paymentMethod").getSelection()[0].getModel()
+        minBalanceInUsd: 0,
+        topUpAmountInUsd: this.__rechargeField.getValue(),
+        topUpCountdown: 30,
+        paymentMethodId: this.__paymentMethodField.getSelection()[0].getModel()
       };
     },
 

services/static-webserver/client/source/class/osparc/desktop/credits/BillingCenter.js

@@ -152,6 +152,7 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", {
       buyCredits.set({
         margin: 10
       });
+      buyCredits.addListener("addNewPaymentMethod", () => this.__openPaymentMethods(true), this);
       buyCredits.addListener("transactionCompleted", () => this.__openTransactions(true), this);
       page.add(buyCredits);
       return page;
@@ -226,6 +227,10 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", {
       this.__openPage(this.__activityPage);
     },
 
+    __openPaymentMethods: function() {
+      this.__openPage(this.__paymentMethodsPage);
+    },
+
     __openTransactions: function(fetchTransactions = false) {
       if (fetchTransactions) {
         this.__transactionsTable.refetchData();

services/static-webserver/client/source/class/osparc/desktop/credits/BuyCredits.js

@@ -38,6 +38,7 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", {
   },
 
   events: {
+    "addNewPaymentMethod": "qx.event.type.Event",
     "transactionCompleted": "qx.event.type.Event"
   },
 
@@ -74,16 +75,20 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", {
         }
         case "one-time-payment":
           control = new osparc.desktop.credits.OneTimePayment().set({
+            margin: 10,
             maxWidth: 400
           });
           this.bind("contextWallet", control, "wallet");
+          control.addListener("addNewPaymentMethod", () => this.fireEvent("addNewPaymentMethod"));
           control.addListener("transactionCompleted", () => this.fireEvent("transactionCompleted"));
           this._add(control);
           break;
         case "auto-recharge":
           control = new osparc.desktop.credits.AutoRecharge().set({
+            margin: 10,
             maxWidth: 400
           });
+          control.addListener("addNewPaymentMethod", () => this.fireEvent("addNewPaymentMethod"));
           this.bind("contextWallet", control, "wallet");
           this._add(control);
           break;