🎨 [Frontend] ViP Market enhancements

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

@@ -36,7 +36,8 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", {
 
     if (osparc.product.Utils.showS4LStore()) {
       this.__addPurchasesPage();
-      this.__addCheckoutsPage();
+      // For now, do not add checkouts page
+      // this.__addCheckoutsPage();
     }
   },
 
@@ -102,7 +103,7 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", {
 
     __addPurchasesPage: function() {
       const title = this.tr("Purchases");
-      const iconSrc = "@FontAwesome5Solid/list/22";
+      const iconSrc = "@FontAwesome5Solid/shopping-bag/22";
       const purchases = new osparc.desktop.credits.Purchases();
       const page = this.addTab(title, iconSrc, purchases);
       return page;

services/static-webserver/client/source/class/osparc/desktop/preferences/pages/BasePage.js

@@ -30,7 +30,17 @@ qx.Class.define("osparc.desktop.preferences.pages.BasePage", {
       paddingLeft: 15
     });
 
-    this.__showLabelOnTab(title)
+    this.__showLabelOnTab(title);
+
+    const tabButton = this.getChildControl("button");
+    if (tabButton.getIcon() && tabButton.getIcon().includes(".svg")) {
+      tabButton.getChildControl("icon").set({
+        minWidth: 24,
+        minHeight: 24,
+        scale: true,
+      });
+      osparc.ui.basic.SVGImage.setColorToImage(tabButton.getChildControl("icon"), "text");
+    }
   },
 
   members: {

services/static-webserver/client/source/class/osparc/study/PricingUnitLicense.js

@@ -85,8 +85,11 @@ qx.Class.define("osparc.study.PricingUnitLicense", {
     },
 
     __rentUnit: function() {
+      const nCredits = this.getUnitData().getCost();
       const expirationDate = osparc.study.PricingUnitLicense.getExpirationDate();
-      const msg = this.getUnitData().getName() + this.tr(" will be available until ") + osparc.utils.Utils.formatDate(expirationDate);
+      let msg = this.getUnitData().getName() + this.tr(" will be available until ") + osparc.utils.Utils.formatDate(expirationDate);
+      msg += "<br>";
+      msg += `The rental will cost ${nCredits} credits: ${osparc.store.Store.getInstance().getCreditPrice()*nCredits}$`;
       const confirmationWin = new osparc.ui.window.Confirmation(msg).set({
         caption: this.tr("Rent"),
         confirmText: this.tr("Rent"),

services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js

@@ -127,6 +127,22 @@ qx.Class.define("osparc.ui.basic.SVGImage", {
       const brightnessValue = l3 => l3;
       const contrastValue = l4 => l4 > 50 ? 50 : l4;
       return `invert(${invertValue(l)}%) sepia(${sepiaValue(s)}%) saturate(${saturateValue(s)}%) hue-rotate(${h}deg) brightness(${brightnessValue(l)}%) contrast(${contrastValue(l)}%)`;
+    },
+
+    setColorToImage: function(image, keywordOrRgb) {
+      if (keywordOrRgb === null) {
+        keywordOrRgb = "text";
+      }
+      let filterValue = this.self().keywordToCSSFilter(keywordOrRgb);
+      if (filterValue === null) {
+        const hexColor = qx.theme.manager.Color.getInstance().resolve(keywordOrRgb);
+        const rgbColor = qx.util.ColorUtil.hexStringToRgb(hexColor);
+        filterValue = this.self().rgbToCSSFilter(rgbColor);
+      }
+      const myStyle = {
+        "filter": filterValue
+      };
+      image.getContentElement().setStyles(myStyle);
     }
   },
 
@@ -160,19 +176,7 @@ qx.Class.define("osparc.ui.basic.SVGImage", {
       * @param keywordOrRgb {string} predefined keyword or rgb in the following format "0,255,0"
       */
     __applyImageColor: function(keywordOrRgb) {
-      if (keywordOrRgb === null) {
-        keywordOrRgb = "text";
-      }
-      let filterValue = this.self().keywordToCSSFilter(keywordOrRgb);
-      if (filterValue === null) {
-        const hexColor = qx.theme.manager.Color.getInstance().resolve(keywordOrRgb);
-        const rgbColor = qx.util.ColorUtil.hexStringToRgb(hexColor);
-        filterValue = this.self().rgbToCSSFilter(rgbColor);
-      }
-      const myStyle = {
-        "filter": filterValue
-      };
-      this.getChildControl("image").getContentElement().setStyles(myStyle);
-    }
+      this.self().setColorToImage(this.getChildControl("image"), keywordOrRgb);
+    },
   }
 });

services/static-webserver/client/source/class/osparc/vipMarket/Market.js

@@ -41,16 +41,27 @@ qx.Class.define("osparc.vipMarket.Market", {
     ])
       .then(values => {
         const licensedItems = values[0];
+        const purchasedItems = values[1];
         const categories = [];
+        const rentedCategory = {
+          categoryId: "rentedModels",
+          label: this.tr("Rented"),
+          icon: "osparc/market/RentedModels.svg",
+          items: [],
+        };
+        categories.push(rentedCategory);
         licensedItems.forEach(licensedItem => {
+          if (purchasedItems.find(purchasedItem => purchasedItem["licensedItemId"] === licensedItem["licensedItemId"])) {
+            rentedCategory["items"].push(licensedItem);
+          }
           if (licensedItem["licensedResourceData"] && licensedItem["licensedResourceData"]["categoryId"]) {
             const categoryId = licensedItem["licensedResourceData"]["categoryId"];
             let category = categories.find(cat => cat["categoryId"] === categoryId);
             if (!category) {
               category = {
                 categoryId,
                 label: licensedItem["licensedResourceData"]["categoryDisplay"] || "Category",
-                icon: licensedItem["licensedResourceData"]["categoryIcon"] || "@FontAwesome5Solid/users/20",
+                icon: licensedItem["licensedResourceData"]["categoryIcon"] || `osparc/market/${categoryId}.svg`,
                 items: [],
               };
               categories.push(category);