🎨 [Frontend] Connect Anatomical modes to Licensed items

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

@@ -631,7 +631,7 @@ qx.Class.define("osparc.data.Resources", {
        * PRICING PLANS
        */
       "pricingPlans": {
-        useCache: true,
+        useCache: false, // handled in osparc.store.Pricing
         endpoints: {
           get: {
             method: "GET",
@@ -656,7 +656,7 @@ qx.Class.define("osparc.data.Resources", {
        * PRICING UNITS
        */
       "pricingUnits": {
-        useCache: true,
+        useCache: false, // handled in osparc.store.Pricing
         endpoints: {
           getOne: {
             method: "GET",
@@ -918,7 +918,11 @@ qx.Class.define("osparc.data.Resources", {
           putAutoRecharge: {
             method: "PUT",
             url: statics.API + "/wallets/{walletId}/auto-recharge"
-          }
+          },
+          purchases: {
+            method: "GET",
+            url: statics.API + "/wallets/{walletId}/licensed-items-purchases"
+          },
         }
       },
       /*
@@ -1247,6 +1251,27 @@ qx.Class.define("osparc.data.Resources", {
             url: statics.API + "/tags/{tagId}"
           }
         }
+      },
+
+      /*
+       * LICENSED ITEMS
+       */
+      "licensedItems": {
+        useCache: true,
+        endpoints: {
+          get: {
+            method: "GET",
+            url: statics.API + "/catalog/licensed-items"
+          },
+          getPage: {
+            method: "GET",
+            url: statics.API + "/catalog/licensed-items?offset={offset}&limit={limit}"
+          },
+          purchase: {
+            method: "POST",
+            url: statics.API + "/catalog/licensed-items/{licensedItemId}:purchase"
+          },
+        }
       }
     };
   },

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

@@ -0,0 +1,99 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2024 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+/**
+ * Class that stores PricingPlan data.
+ */
+
+qx.Class.define("osparc.data.model.PricingPlan", {
+  extend: qx.core.Object,
+
+  /**
+   * @param pricingPlanData {Object} Object containing the serialized PricingPlan Data
+   */
+  construct: function(pricingPlanData) {
+    this.base(arguments);
+
+    this.set({
+      pricingPlanId: pricingPlanData.pricingPlanId,
+      pricingPlanKey: pricingPlanData.pricingPlanKey,
+      classification: pricingPlanData.classification,
+      name: pricingPlanData.displayName,
+      description: pricingPlanData.description,
+      isActive: pricingPlanData.isActive,
+      pricingUnits: [],
+    });
+
+    if (pricingPlanData.pricingUnits) {
+      pricingPlanData.pricingUnits.forEach(pricingUnitData => {
+        const pricingUnit = new osparc.data.model.PricingUnit(pricingUnitData);
+        this.getPricingUnits().push(pricingUnit);
+      });
+    }
+  },
+
+  properties: {
+    pricingPlanId: {
+      check: "Number",
+      nullable: false,
+      init: null,
+      event: "changePricingPlanId"
+    },
+
+    pricingPlanKey: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changePricingPlanKey"
+    },
+
+    pricingUnits: {
+      check: "Array",
+      nullable: true,
+      init: [],
+      event: "changePricingunits"
+    },
+
+    classification: {
+      check: ["TIER", "LICENSE"],
+      nullable: false,
+      init: null,
+      event: "changeClassification"
+    },
+
+    name: {
+      check: "String",
+      nullable: false,
+      init: null,
+      event: "changeName"
+    },
+
+    description: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeDescription"
+    },
+
+    isActive: {
+      check: "Boolean",
+      nullable: false,
+      init: false,
+      event: "changeIsActive"
+    },
+  },
+});

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

@@ -0,0 +1,91 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2024 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+/**
+ * Class that stores PricingUnit data.
+ */
+
+qx.Class.define("osparc.data.model.PricingUnit", {
+  extend: qx.core.Object,
+
+  /**
+   * @param pricingUnitData {Object} Object containing the serialized PricingUnit Data
+   */
+  construct: function(pricingUnitData) {
+    this.base(arguments);
+
+    this.set({
+      pricingUnitId: pricingUnitData.pricingUnitId,
+      name: pricingUnitData.unitName,
+      cost: parseFloat(pricingUnitData.currentCostPerUnit),
+      isDefault: pricingUnitData.default,
+      extraInfo: pricingUnitData.unitExtraInfo,
+      specificInfo: pricingUnitData.specificInfo || null,
+    });
+  },
+
+  properties: {
+    pricingUnitId: {
+      check: "Number",
+      nullable: true,
+      init: null,
+      event: "changePricingUnitId"
+    },
+
+    classification: {
+      check: ["TIER", "LICENSE"],
+      nullable: false,
+      init: null,
+      event: "changeClassification"
+    },
+
+    name: {
+      check: "String",
+      nullable: false,
+      init: null,
+      event: "changeName"
+    },
+
+    cost: {
+      check: "Number",
+      nullable: false,
+      init: null,
+      event: "changeCost"
+    },
+
+    isDefault: {
+      check: "Boolean",
+      nullable: false,
+      init: false,
+      event: "changeIsDefault",
+    },
+
+    extraInfo: {
+      check: "Object",
+      nullable: false,
+      init: null,
+      event: "changeExtraInfo",
+    },
+
+    specificInfo: {
+      check: "Object",
+      nullable: true,
+      init: null,
+      event: "changeSpecificInfo",
+    },
+  },
+});

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

@@ -752,7 +752,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
     __iFrameChanged: function(node) {
       this.__iframePage.removeAll();
 
-      if (node) {
+      if (node && node.getIFrame()) {
         const loadingPage = node.getLoadingPage();
         const iFrame = node.getIFrame();
         const src = iFrame.getSource();

services/static-webserver/client/source/class/osparc/navigation/UserMenu.js

@@ -112,13 +112,14 @@ qx.Class.define("osparc.navigation.UserMenu", {
           this.add(control);
           break;
         }
-        case "license":
+        case "license": {
           control = new qx.ui.menu.Button(this.tr("License"));
           osparc.utils.Utils.setIdToWidget(control, "userMenuLicenseBtn");
           const licenseURL = osparc.store.Support.getLicenseURL();
           control.addListener("execute", () => window.open(licenseURL));
           this.add(control);
           break;
+        }
         case "tip-lite-button":
           control = new qx.ui.menu.Button(this.tr("Access Full TIP"));
           osparc.utils.Utils.setIdToWidget(control, "userMenuAccessTIPBtn");
@@ -237,7 +238,7 @@ qx.Class.define("osparc.navigation.UserMenu", {
       this.addSeparator();
 
       this.__addAnnouncements();
-      
+
       if (osparc.product.Utils.showS4LStore()) {
         this.getChildControl("market");
       }

services/static-webserver/client/source/class/osparc/node/TierSelectionView.js

@@ -46,22 +46,20 @@ qx.Class.define("osparc.node.TierSelectionView", {
       tiersLayout.add(tierBox);
 
       const node = this.getNode();
-      const plansParams = {
-        url: osparc.data.Resources.getServiceUrl(
-          node.getKey(),
-          node.getVersion()
-        )
-      };
-      const studyId = node.getStudy().getUuid();
-      const nodeId = node.getNodeId();
-      osparc.data.Resources.fetch("services", "pricingPlans", plansParams)
+      const pricingStore = osparc.store.Pricing.getInstance();
+      pricingStore.fetchPricingPlansService(node.getKey(), node.getVersion())
         .then(pricingPlans => {
           if (pricingPlans && "pricingUnits" in pricingPlans && pricingPlans["pricingUnits"].length) {
-            const pUnits = pricingPlans["pricingUnits"];
-            pUnits.forEach(pUnit => {
-              const tItem = new qx.ui.form.ListItem(pUnit.unitName, null, pUnit.pricingUnitId);
+            const pricingUnits = pricingPlans["pricingUnits"].map(princingUnitData => {
+              const pricingUnit = new osparc.data.model.PricingUnit(princingUnitData);
+              return pricingUnit;
+            });
+            pricingUnits.forEach(pricingUnit => {
+              const tItem = new qx.ui.form.ListItem(pricingUnit.getName(), null, pricingUnit.getPricingUnitId());
               tierBox.add(tItem);
             });
+            const studyId = node.getStudy().getUuid();
+            const nodeId = node.getNodeId();
             const unitParams = {
               url: {
                 studyId,
@@ -81,9 +79,9 @@ qx.Class.define("osparc.node.TierSelectionView", {
               })
               .finally(() => {
                 const pUnitUIs = [];
-                pUnits.forEach(pUnit => {
-                  const pUnitUI = new osparc.study.PricingUnit(pUnit).set({
-                    allowGrowX: false
+                pricingUnits.forEach(pricingUnit => {
+                  const pUnitUI = new osparc.study.PricingUnitTier(pricingUnit).set({
+                    showEditButton: false,
                   });
                   pUnitUI.getChildControl("name").exclude();
                   pUnitUI.exclude();

services/static-webserver/client/source/class/osparc/node/slideshow/NodeView.js

@@ -143,7 +143,7 @@ qx.Class.define("osparc.node.slideshow.NodeView", {
       this._iFrameLayout.removeAll();
 
       const node = this.getNode();
-      if (node) {
+      if (node && node.getIFrame()) {
         const loadingPage = node.getLoadingPage();
         const iFrame = node.getIFrame();
         const src = iFrame.getSource();