✨ [Frontend] ViP Rentals and ViP Checkouts in Billing Center

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

@@ -936,10 +936,6 @@ qx.Class.define("osparc.data.Resources", {
             method: "PUT",
             url: statics.API + "/wallets/{walletId}/auto-recharge"
           },
-          purchases: {
-            method: "GET",
-            url: statics.API + "/wallets/{walletId}/licensed-items-purchases"
-          },
         }
       },
       /*
@@ -1300,10 +1296,18 @@ qx.Class.define("osparc.data.Resources", {
             method: "GET",
             url: statics.API + "/catalog/licensed-items?offset={offset}&limit={limit}"
           },
+          purchases: {
+            method: "GET",
+            url: statics.API + "/wallets/{walletId}/licensed-items-purchases?offset={offset}&limit={limit}"
+          },
           purchase: {
             method: "POST",
             url: statics.API + "/catalog/licensed-items/{licensedItemId}:purchase"
           },
+          checkouts: {
+            method: "GET",
+            url: statics.API + "/wallets/{walletId}/licensed-items-checkouts?offset={offset}&limit={limit}"
+          },
         }
       }
     };
@@ -1353,11 +1357,10 @@ qx.Class.define("osparc.data.Resources", {
           res[endpoint](params.url || null, params.data || null);
         }
 
-        res.addListenerOnce(endpoint + "Success", e => {
+        const successCB = e => {
           const response = e.getRequest().getResponse();
           const endpointDef = resourceDefinition.endpoints[endpoint];
           const data = endpointDef.isJsonFile ? response : response.data;
-          const useCache = ("useCache" in endpointDef) ? endpointDef.useCache : resourceDefinition.useCache;
           // OM: Temporary solution until the quality object is better defined
           if (data && endpoint.includes("get") && ["studies", "templates"].includes(resource)) {
             if (Array.isArray(data)) {
@@ -1368,6 +1371,8 @@ qx.Class.define("osparc.data.Resources", {
               osparc.metadata.Quality.attachQualityToObject(data);
             }
           }
+
+          const useCache = ("useCache" in endpointDef) ? endpointDef.useCache : resourceDefinition.useCache;
           if (useCache) {
             if (endpoint.includes("delete") && resourceDefinition["deleteId"] && resourceDefinition["deleteId"] in params.url) {
               const deleteId = params.url[resourceDefinition["deleteId"]];
@@ -1382,16 +1387,18 @@ qx.Class.define("osparc.data.Resources", {
               }
             }
           }
+
           res.dispose();
+
           if ("resolveWResponse" in options && options.resolveWResponse) {
             response.params = params;
             resolve(response);
           } else {
             resolve(data);
           }
-        }, this);
+        };
 
-        res.addListener(endpoint + "Error", e => {
+        const errorCB = e => {
           if (e.getPhase() === "timeout") {
             if (options.timeout && options.timeoutRetries) {
               options.timeoutRetries--;
@@ -1445,8 +1452,12 @@ qx.Class.define("osparc.data.Resources", {
             err.status = status;
           }
           reject(err);
-        });
+        };
 
+        const successEndpoint = endpoint + "Success";
+        const errorEndpoint = endpoint + "Error";
+        res.addListenerOnce(successEndpoint, e => successCB(e), this);
+        res.addListener(errorEndpoint, e => errorCB(e), this);
         sendRequest();
       });
     },

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

@@ -33,6 +33,11 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", {
     if (osparc.data.Permissions.getInstance().canDo("usage.all.read")) {
       this.__usagePage = this.__addUsagePage();
     }
+
+    if (osparc.product.Utils.showS4LStore()) {
+      this.__addPurchasesPage();
+      this.__addCheckoutsPage();
+    }
   },
 
   statics: {
@@ -80,7 +85,7 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", {
     },
 
     __addTransactionsPage: function() {
-      const title = this.tr("Transactions");
+      const title = this.tr("Payments");
       const iconSrc = "@FontAwesome5Solid/exchange-alt/22";
       const transactions = this.__transactionsTable = new osparc.desktop.credits.Transactions();
       const page = this.addTab(title, iconSrc, transactions);
@@ -95,6 +100,22 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", {
       return page;
     },
 
+    __addPurchasesPage: function() {
+      const title = this.tr("Purchases");
+      const iconSrc = "@FontAwesome5Solid/list/22";
+      const purchases = new osparc.desktop.credits.Purchases();
+      const page = this.addTab(title, iconSrc, purchases);
+      return page;
+    },
+
+    __addCheckoutsPage: function() {
+      const title = this.tr("Checkouts");
+      const iconSrc = "@FontAwesome5Solid/list/22";
+      const purchases = new osparc.desktop.credits.Checkouts();
+      const page = this.addTab(title, iconSrc, purchases);
+      return page;
+    },
+
     openWallets: function() {
       if (this.__walletsPage) {
         return this._openPage(this.__walletsPage);

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

@@ -0,0 +1,48 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2025 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+
+qx.Class.define("osparc.desktop.credits.Checkouts", {
+  extend: osparc.desktop.credits.ResourceInTableViewer,
+
+  members: {
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "table": {
+          const dateFilters = this.getChildControl("date-filters");
+          control = new osparc.desktop.credits.CheckoutsTable(this._getSelectWalletId(), dateFilters.getValue()).set({
+            marginTop: 10
+          });
+          const fetchingImage = this.getChildControl("fetching-image");
+          control.getTableModel().bind("isFetching", fetchingImage, "visibility", {
+            converter: isFetching => isFetching ? "visible" : "excluded"
+          })
+          this._add(control, { flex: 1 })
+          break;
+        }
+      }
+      return control || this.base(arguments, id);
+    },
+
+    _buildLayout: function() {
+      this.base(arguments);
+
+      this.getChildControl("export-button").exclude();
+    },
+  }
+});

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

@@ -0,0 +1,87 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2025 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+
+qx.Class.define("osparc.desktop.credits.CheckoutsTable", {
+  extend: qx.ui.table.Table,
+
+  construct: function(walletId, filters) {
+    this.base(arguments);
+
+    const model = new osparc.desktop.credits.CheckoutsTableModel(walletId, filters);
+    this.setTableModel(model);
+
+    this.set({
+      statusBarVisible: false,
+      headerCellHeight: 26,
+      rowHeight: 26,
+    });
+
+    const columnModel = this.getTableColumnModel();
+    columnModel.setColumnVisible(this.self().COLS.CHECKOUT_ID.column, false);
+    columnModel.setColumnVisible(this.self().COLS.ITEM_ID.column, false);
+
+    Object.values(this.self().COLS).forEach(col => columnModel.setColumnWidth(col.column, col.width));
+  },
+
+  statics: {
+    COLS: {
+      CHECKOUT_ID: {
+        id: "checkoutId",
+        column: 0,
+        label: qx.locale.Manager.tr("CheckoutId"),
+        width: 150
+      },
+      ITEM_ID: {
+        id: "itemId",
+        column: 1,
+        label: qx.locale.Manager.tr("ItemId"),
+        width: 150
+      },
+      ITEM_LABEL: {
+        id: "itemLabel",
+        column: 2,
+        label: qx.locale.Manager.tr("Name"),
+        width: 150
+      },
+      START: {
+        id: "start",
+        column: 3,
+        label: qx.locale.Manager.tr("Start"),
+        width: 150
+      },
+      DURATION: {
+        id: "duration",
+        column: 4,
+        label: qx.locale.Manager.tr("Duration"),
+        width: 150
+      },
+      SEATS: {
+        id: "seats",
+        column: 5,
+        label: qx.locale.Manager.tr("Seats"),
+        width: 50
+      },
+      USER: {
+        id: "user",
+        column: 6,
+        label: qx.locale.Manager.tr("User"),
+        width: 100
+      },
+    }
+  }
+});