✨ Context Wallet in Application (#4900)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/Preferences.js

@@ -117,9 +117,14 @@ qx.Class.define("osparc.Preferences", {
     requestChangePreferredWalletId: function(walletId) {
       this.self().patchPreference("preferredWalletId", walletId)
         .then(() => {
-          this.setPreferredWalletId(walletId);
-          const wallets = osparc.store.Store.getInstance().getWallets();
+          const store = osparc.store.Store.getInstance();
+          const wallets = store.getWallets();
+          const walletFound = wallets.find(wallet => wallet.getWalletId() === walletId);
+          if (walletFound) {
+            store.setPreferredWallet(walletFound);
+          }
           wallets.forEach(wallet => wallet.setPreferredWallet(wallet.getWalletId() === walletId));
+          this.setPreferredWalletId(walletId);
         })
         .catch(err => {
           console.error(err);

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

@@ -58,6 +58,7 @@ qx.Class.define("osparc.data.Roles", {
       }
     },
 
+    // study, templates, services
     RESOURCE: {
       1: {
         id: "read",

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

@@ -69,13 +69,6 @@ qx.Class.define("osparc.desktop.MainPage", {
           const creditsWindow = osparc.desktop.credits.UserCenterWindow.openWindow();
           creditsWindow.openOverview();
         }
-        const preferenceSettings = osparc.Preferences.getInstance();
-        const preferenceWalletId = preferenceSettings.getPreferredWalletId();
-        const wallets = store.getWallets();
-        if (wallets.length === 1 && (preferenceWalletId === null || osparc.desktop.credits.Utils.getWallet(preferenceWalletId) === null)) {
-          // If there is only one wallet available, make it default
-          preferenceSettings.requestChangePreferredWalletId(wallets[0].getWalletId());
-        }
 
         const mainStack = this.__createMainStack();
         this._add(mainStack, {

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

@@ -23,8 +23,8 @@ qx.Class.define("osparc.desktop.credits.Activity", {
 
     this._setLayout(new qx.ui.layout.VBox(15));
 
-    const wallet = osparc.desktop.credits.Utils.getContextWallet();
-    this.setContextWallet(wallet);
+    const store = osparc.store.Store.getInstance();
+    store.bind("contextWallet", this, "contextWallet");
   },
 
   properties: {
@@ -69,7 +69,7 @@ qx.Class.define("osparc.desktop.credits.Activity", {
           });
           this._add(control);
           break;
-        case "page-buttons":
+        case "page-buttons-layout":
           control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({
             allowGrowX: true,
             alignX: "center",
@@ -83,7 +83,7 @@ qx.Class.define("osparc.desktop.credits.Activity", {
             allowGrowX: false
           });
           control.addListener("execute", () => this.__fetchData(this.__getPrevRequest()));
-          const pageButtons = this.getChildControl("page-buttons");
+          const pageButtons = this.getChildControl("page-buttons-layout");
           pageButtons.add(control);
           break;
         }
@@ -93,7 +93,7 @@ qx.Class.define("osparc.desktop.credits.Activity", {
             textAlign: "center",
             alignY: "middle"
           });
-          const pageButtons = this.getChildControl("page-buttons");
+          const pageButtons = this.getChildControl("page-buttons-layout");
           pageButtons.add(control);
           break;
         }
@@ -103,7 +103,7 @@ qx.Class.define("osparc.desktop.credits.Activity", {
             allowGrowX: false
           });
           control.addListener("execute", () => this.__fetchData(this.__getNextUsageRequest()));
-          const pageButtons = this.getChildControl("page-buttons");
+          const pageButtons = this.getChildControl("page-buttons-layout");
           pageButtons.add(control);
           break;
         }

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

@@ -23,8 +23,8 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", {
 
     this._setLayout(new qx.ui.layout.VBox(15));
 
-    const wallet = osparc.desktop.credits.Utils.getContextWallet();
-    this.setContextWallet(wallet);
+    const store = osparc.store.Store.getInstance();
+    store.bind("contextWallet", this, "contextWallet");
   },
 
   properties: {
@@ -100,22 +100,15 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", {
     },
 
     __buildLayout: function() {
-      this.getChildControl("credits-intro");
-      this.getChildControl("credits-left-view");
+      this._removeAll();
+      this._createChildControlImpl("credits-intro");
+      this._createChildControlImpl("credits-left-view");
       const wallet = this.getContextWallet();
       if (wallet.getMyAccessRights()["write"]) {
-        this.__populateLayout();
-      } else {
-        this._add(osparc.desktop.credits.Utils.getNoWriteAccessLabel());
-      }
-    },
-
-    __populateLayout: function() {
-      const wallet = this.getContextWallet();
-      if (wallet) {
-        const paymentMode = this.getChildControl("payment-mode");
-        const autoRecharge = this.getChildControl("auto-recharge");
-        const oneTime = this.getChildControl("one-time-payment");
+        this._createChildControlImpl("wallet-billing-settings");
+        const paymentMode = this._createChildControlImpl("payment-mode");
+        const autoRecharge = this._createChildControlImpl("auto-recharge");
+        const oneTime = this._createChildControlImpl("one-time-payment");
         autoRecharge.show();
         oneTime.exclude();
         paymentMode.addListener("changeSelection", e => {
@@ -128,6 +121,8 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", {
             oneTime.exclude();
           }
         });
+      } else {
+        this._add(osparc.desktop.credits.Utils.getNoWriteAccessOperationsLabel());
       }
     },
 

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

@@ -23,8 +23,8 @@ qx.Class.define("osparc.desktop.credits.Summary", {
 
     this._setLayout(new qx.ui.layout.VBox(10));
 
-    const wallet = osparc.desktop.credits.Utils.getContextWallet();
-    this.setContextWallet(wallet);
+    const store = osparc.store.Store.getInstance();
+    store.bind("contextWallet", this, "contextWallet");
   },
 
   properties: {
@@ -75,9 +75,13 @@ qx.Class.define("osparc.desktop.credits.Summary", {
     },
 
     __buildLayout: function() {
-      this.getChildControl("wallets-card");
-      this.getChildControl("settings-card");
-      this.getChildControl("activity-card");
+      this._removeAll();
+      this._createChildControlImpl("wallets-card");
+      const wallet = this.getContextWallet();
+      if (wallet && wallet.getMyAccessRights()["write"]) {
+        this._createChildControlImpl("settings-card");
+      }
+      this._createChildControlImpl("activity-card");
     },
 
     __createOverviewCard: function(cardLabel, content, buttonLabel, signalName, signalData) {
@@ -246,7 +250,7 @@ qx.Class.define("osparc.desktop.credits.Summary", {
 
         return layout;
       }
-      return osparc.desktop.credits.Utils.getNoWriteAccessLabel();
+      return null;
     },
 
     __createActivityView: function() {

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

@@ -23,8 +23,8 @@ qx.Class.define("osparc.desktop.credits.Transactions", {
 
     this._setLayout(new qx.ui.layout.VBox(15));
 
-    const wallet = osparc.desktop.credits.Utils.getContextWallet();
-    this.setContextWallet(wallet);
+    const store = osparc.store.Store.getInstance();
+    store.bind("contextWallet", this, "contextWallet");
   },
 
   properties: {
@@ -49,9 +49,10 @@ qx.Class.define("osparc.desktop.credits.Transactions", {
     },
 
     __buildLayout: function() {
+      this._removeAll();
       const wallet = this.getContextWallet();
-      if (wallet.getMyAccessRights()["write"]) {
-        const transactionsTable = this.getChildControl("transactions-table");
+      if (wallet && wallet.getMyAccessRights()["write"]) {
+        const transactionsTable = this._createChildControlImpl("transactions-table");
         osparc.data.Resources.fetch("payments", "get")
           .then(transactions => {
             if ("data" in transactions) {
@@ -60,7 +61,7 @@ qx.Class.define("osparc.desktop.credits.Transactions", {
           })
           .catch(err => console.error(err));
       } else {
-        this._add(osparc.desktop.credits.Utils.getNoWriteAccessLabel());
+        this._add(osparc.desktop.credits.Utils.getNoWriteAccessInformationLabel());
       }
     },
 

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

@@ -23,8 +23,8 @@ qx.Class.define("osparc.desktop.credits.Usage", {
 
     this._setLayout(new qx.ui.layout.VBox(15));
 
-    const wallet = osparc.desktop.credits.Utils.getContextWallet();
-    this.setContextWallet(wallet);
+    const store = osparc.store.Store.getInstance();
+    store.bind("contextWallet", this, "contextWallet");
   },
 
   properties: {

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

@@ -19,12 +19,21 @@ qx.Class.define("osparc.desktop.credits.UserCenterWindow", {
   extend: osparc.ui.window.SingletonWindow,
 
   construct: function() {
-    this.base(arguments, "credits", this.tr("User Center"));
+    const caption = this.tr("User Center");
+    this.base(arguments, "credits", caption);
 
     const walletsEnabled = osparc.desktop.credits.Utils.areWalletsEnabled();
     const viewWidth = walletsEnabled ? 1000 : 800;
     const viewHeight = walletsEnabled ? 700 : 600;
 
+    if (walletsEnabled) {
+      const store = osparc.store.Store.getInstance();
+      // Concatenate context wallet's name
+      store.bind("contextWallet", this, "caption", {
+        converter: contextWallet => caption + (contextWallet ? (" - " + contextWallet.getName()) : "")
+      });
+    }
+
     this.set({
       layout: new qx.ui.layout.Grow(),
       modal: true,

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

@@ -24,22 +24,17 @@ qx.Class.define("osparc.desktop.credits.Utils", {
       return Boolean(statics && statics["isPaymentEnabled"]);
     },
 
-    getContextWallet: function() {
-      const activeWallet = osparc.store.Store.getInstance().getActiveWallet();
-      if (activeWallet) {
-        return activeWallet;
-      }
-      const preferredWallet = osparc.desktop.credits.Utils.getPreferredWallet();
-      if (preferredWallet) {
-        return preferredWallet;
-      }
-      // It should never reach here
-      return null;
+    getNoWriteAccessInformationLabel: function() {
+      return new qx.ui.basic.Label().set({
+        value: qx.locale.Manager.tr("You can't access this information"),
+        font: "text-14",
+        allowGrowX: true
+      });
     },
 
-    getNoWriteAccessLabel: function() {
+    getNoWriteAccessOperationsLabel: function() {
       return new qx.ui.basic.Label().set({
-        value: qx.locale.Manager.tr("You can't access this information"),
+        value: qx.locale.Manager.tr("You can't access this operations"),
         font: "text-14",
         allowGrowX: true
       });
@@ -135,16 +130,6 @@ qx.Class.define("osparc.desktop.credits.Utils", {
       return [];
     },
 
-    getPreferredWallet: function() {
-      const store = osparc.store.Store.getInstance();
-      const wallets = store.getWallets();
-      const favouriteWallet = wallets.find(wallet => wallet.isPreferredWallet());
-      if (favouriteWallet) {
-        return favouriteWallet;
-      }
-      return null;
-    },
-
     getPaymentMethods: function(walletId) {
       return new Promise(resolve => {
         const promises = [];