✨ Frontend: Payment methods (#4759)

odeimaiz · web-flow · commit 0bf85e1df26d · 2023-09-15T13:41:54.000Z
diff --git a/services/static-webserver/client/source/class/osparc/data/Resources.js b/services/static-webserver/client/source/class/osparc/data/Resources.js
@@ -671,6 +671,50 @@ qx.Class.define("osparc.data.Resources", {
           }
         }
       },
+      /*
+       * PAYMENTS METHODS
+       */
+      "payments-methods": {
+        useCache: false,
+        endpoints: {
+          init: {
+            method: "POST",
+            url: statics.API + "/wallets/{walletId}/payments-methods:init"
+          },
+          cancel: {
+            method: "POST",
+            url: statics.API + "/wallets/{walletId}/payments-methods/{paymentMethodId}:cancel"
+          },
+          get: {
+            method: "GET",
+            url: statics.API + "/wallets/{walletId}/payments-methods"
+          },
+          delete: {
+            method: "DELETE",
+            url: statics.API + "/wallets/{walletId}/payments-methods/{paymentMethodId}"
+          }
+        }
+      },
+      /*
+       * AUTO RECHARGE
+       */
+      "auto-recharge": {
+        useCache: false,
+        endpoints: {
+          get: {
+            method: "GET",
+            url: statics.API + "/wallets/{walletId}/auto-recharge"
+          },
+          start: {
+            method: "POST",
+            url: statics.API + "/wallets/{walletId}/auto-recharge"
+          },
+          stop: {
+            method: "DELETE",
+            url: statics.API + "/wallets/{walletId}/auto-recharge"
+          }
+        }
+      },
       /*
        * CLUSTERS
        */
diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/BuyCredits.js b/services/static-webserver/client/source/class/osparc/desktop/credits/BuyCredits.js
@@ -21,7 +21,10 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", {
   construct: function() {
     this.base(arguments);
 
-    this._setLayout(new qx.ui.layout.HBox(80));
+    const grid = new qx.ui.layout.Grid(80, 50);
+    grid.setColumnMaxWidth(0, 400);
+    grid.setColumnMaxWidth(1, 400);
+    this._setLayout(grid);
 
     this.__buildLayout();
 
@@ -81,14 +84,32 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", {
     _createChildControlImpl: function(id) {
       let control;
       switch (id) {
-        case "left-side":
-          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(20));
-          this._add(control);
+        case "wallet-layout":
+          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
+          this._add(control, {
+            row: 0,
+            column: 0
+          });
+          break;
+        case "explanation-layout":
+          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
+          this._add(control, {
+            row: 0,
+            column: 1
+          });
           break;
-        case "right-side":
-          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(20));
+        case "one-time-payment-layout":
+          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(15));
           this._add(control, {
-            flex: 1
+            row: 1,
+            column: 0
+          });
+          break;
+        case "auto-recharge-layout":
+          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(15));
+          this._add(control, {
+            row: 1,
+            column: 1
           });
           break;
         case "wallet-info": {
@@ -98,7 +119,7 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", {
             font: "text-14"
           });
           control.add(label);
-          this.getChildControl("left-side").add(control);
+          this.getChildControl("wallet-layout").add(control);
           break;
         }
         case "wallet-selector":
@@ -109,9 +130,21 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", {
           control = this.__getCreditsLeftView();
           this.getChildControl("wallet-info").add(control);
           break;
-        case "one-time-payment-layout":
-          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(15));
-          this.getChildControl("left-side").add(control);
+        case "one-time-payment-title":
+          control = new qx.ui.basic.Label().set({
+            value: this.tr("One time payment:"),
+            font: "text-16"
+          });
+          this.getChildControl("one-time-payment-layout").add(control);
+          break;
+        case "one-time-payment-description":
+          control = new qx.ui.basic.Label().set({
+            value: this.tr("A one-off, non-recurring payment."),
+            font: "text-14",
+            rich: true,
+            wrap: true
+          });
+          this.getChildControl("one-time-payment-layout").add(control);
           break;
         case "credit-selector":
           control = this.__getCreditSelector();
@@ -127,7 +160,31 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", {
           break;
         case "credits-explanation":
           control = this.__getCreditsExplanation();
-          this.getChildControl("right-side").add(control);
+          this.getChildControl("explanation-layout").add(control);
+          break;
+        case "auto-recharge-title":
+          control = new qx.ui.basic.Label().set({
+            value: this.tr("Auto recharge:"),
+            font: "text-16"
+          });
+          this.getChildControl("auto-recharge-layout").add(control);
+          break;
+        case "auto-recharge-description":
+          control = new qx.ui.basic.Label().set({
+            value: this.tr("Keep your balance running smoothly by automatically setting your credits to be recharged when it runs low."),
+            font: "text-14",
+            rich: true,
+            wrap: true
+          });
+          this.getChildControl("auto-recharge-layout").add(control);
+          break;
+        case "auto-recharge-options":
+          control = this.__getAutoRechargeOptions();
+          this.getChildControl("auto-recharge-layout").add(control);
+          break;
+        case "auto-recharge-button":
+          control = this.__getAutoRechargeButton();
+          this.getChildControl("auto-recharge-layout").add(control);
           break;
       }
       return control || this.base(arguments, id);
@@ -147,17 +204,27 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", {
     __buildLayout: function() {
       this.getChildControl("wallet-selector");
       this.getChildControl("credits-left-view");
-      this.__builyOneTimePayment();
+      this.__buildOneTimePayment();
 
       this.getChildControl("credits-explanation");
+      this.__buildAutoRecharge();
     },
 
-    __builyOneTimePayment: function() {
+    __buildOneTimePayment: function() {
+      this.getChildControl("one-time-payment-title");
+      this.getChildControl("one-time-payment-description");
       this.getChildControl("credit-selector");
       this.getChildControl("summary-view");
       this.getChildControl("buy-button");
     },
 
+    __buildAutoRecharge: function() {
+      this.getChildControl("auto-recharge-title");
+      this.getChildControl("auto-recharge-description");
+      this.getChildControl("auto-recharge-options");
+      this.getChildControl("auto-recharge-button");
+    },
+
     __applyTotalPrice: function(totalPrice) {
       let creditPrice = this.self().CREDIT_PRICES[0][1];
 
@@ -209,7 +276,7 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", {
       const vLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
 
       const label = new qx.ui.basic.Label().set({
-        value: this.tr("Payment amount:"),
+        value: this.tr("Payment amount ($):"),
         font: "text-14"
       });
       vLayout.add(label);
@@ -529,6 +596,60 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", {
       layout.add(label2);
 
       return layout;
+    },
+
+    __getAutoRechargeOptions: function() {
+      const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
+
+      const lowerThresholdLabel = new qx.ui.basic.Label().set({
+        value: this.tr("When balance goes below ($):"),
+        font: "text-14"
+      });
+      layout.add(lowerThresholdLabel);
+
+      const lowerThresholdField = new qx.ui.form.TextField().set({
+        maxWidth: 100,
+        textAlign: "center",
+        font: "text-14"
+      });
+      layout.add(lowerThresholdField);
+
+      const balanceBackLabel = new qx.ui.basic.Label().set({
+        value: this.tr("Top up with ($):"),
+        font: "text-14"
+      });
+      layout.add(balanceBackLabel);
+
+      const paymentAmountField = new qx.ui.form.TextField().set({
+        maxWidth: 100,
+        textAlign: "center",
+        font: "text-14"
+      });
+      layout.add(paymentAmountField);
+
+      const label = new qx.ui.basic.Label().set({
+        value: this.tr("Payment Method:"),
+        font: "text-14"
+      });
+      layout.add(label);
+
+      const paymentMethods = new qx.ui.form.SelectBox().set({
+        allowGrowX: false
+      });
+      layout.add(paymentMethods);
+
+      return layout;
+    },
+
+    __getAutoRechargeButton: function() {
+      const autoRechargeBtn = new osparc.ui.form.FetchButton().set({
+        label: this.tr("Enable Auto Recharge"),
+        font: "text-16",
+        appearance: "strong-button",
+        maxWidth: 200,
+        center: true
+      });
+      return autoRechargeBtn;
     }
   }
 });
diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/UserCenter.js b/services/static-webserver/client/source/class/osparc/desktop/credits/UserCenter.js
@@ -54,6 +54,11 @@ qx.Class.define("osparc.desktop.credits.UserCenter", {
       tabViews.add(buyCreditsPage);
     }
 
+    if (this.__walletsEnabled) {
+      const paymentMethodsPage = this.__paymentMethodsPage = this.__getPaymentMethodsPage();
+      tabViews.add(paymentMethodsPage);
+    }
+
     if (this.__walletsEnabled) {
       const transactionsPage = this.__transactionsPage = this.__getTransactionsPage();
       tabViews.add(transactionsPage);
@@ -83,6 +88,7 @@ qx.Class.define("osparc.desktop.credits.UserCenter", {
     __profilePage: null,
     __walletsPage: null,
     __buyCreditsPage: null,
+    __paymentMethodsPage: null,
     __transactionsPage: null,
     __usageOverviewPage: null,
     __buyCredits: null,
@@ -205,6 +211,19 @@ qx.Class.define("osparc.desktop.credits.UserCenter", {
       return page;
     },
 
+    __getPaymentMethodsPage: function() {
+      const title = this.tr("Payment Methods");
+      const iconSrc = "@FontAwesome5Solid/credit-card/22";
+      const page = new osparc.desktop.preferences.pages.BasePage(title, iconSrc);
+      page.showLabelOnTab();
+      const paymentPethods = new osparc.desktop.paymentMethods.PaymentMethods();
+      paymentPethods.set({
+        margin: 10
+      });
+      page.add(paymentPethods);
+      return page;
+    },
+
     __getTransactionsPage: function() {
       const title = this.tr("Transactions");
       const iconSrc = "@FontAwesome5Solid/exchange-alt/22";
diff --git a/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethodDetails.js b/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethodDetails.js
@@ -0,0 +1,73 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2023 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.desktop.paymentMethods.PaymentMethodDetails", {
+  extend: qx.ui.core.Widget,
+
+  construct: function(paymentMethodData) {
+    this.base(arguments);
+
+    const grid = new qx.ui.layout.Grid(20, 10);
+    grid.setColumnAlign(0, "right", "middle"); // resource limit value
+    this._setLayout(grid);
+
+    this.__buildLayout(paymentMethodData);
+  },
+
+  statics: {
+    popUpInWindow: function(paymentMethodData) {
+      const title = qx.locale.Manager.tr("Payment Method details");
+      const paymentMethodDetails = new osparc.desktop.paymentMethods.PaymentMethodDetails(paymentMethodData);
+      paymentMethodDetails.set({
+        padding: 10
+      });
+      const viewWidth = 300;
+      const viewHeight = 300;
+      const win = osparc.ui.window.Window.popUpInWindow(paymentMethodDetails, title, viewWidth, viewHeight);
+      win.center();
+      win.open();
+      return win;
+    }
+  },
+
+  members: {
+    __buildLayout: function(paymentMethodData) {
+      [
+        [this.tr("Holder name"), paymentMethodData["cardHolderName"]],
+        [this.tr("Type"), paymentMethodData["cardType"]],
+        [this.tr("Number"), paymentMethodData["cardNumberMasked"]],
+        [this.tr("Expiration date"), paymentMethodData["expirationMonth"] + "/" + paymentMethodData["expirationYear"]],
+        [this.tr("Address"), paymentMethodData["streetAddress"]],
+        [this.tr("ZIP code"), paymentMethodData["zipcode"]],
+        [this.tr("Country"), paymentMethodData["country"]]
+      ].forEach((pair, idx) => {
+        this._add(new qx.ui.basic.Label(pair[0]).set({
+          font: "text-14"
+        }), {
+          row: idx,
+          column: 0
+        });
+        this._add(new qx.ui.basic.Label(pair[1]).set({
+          font: "text-14"
+        }), {
+          row: idx,
+          column: 1
+        });
+      });
+    }
+  }
+});
diff --git a/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethodListItem.js b/services/static-webserver/client/source/class/osparc/desktop/paymentMethods/PaymentMethodListItem.js
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
