🎨 [Frontend] Connect Anatomical modes to Licensed items

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

@@ -1239,6 +1239,23 @@ qx.Class.define("osparc.data.Resources", {
             url: statics.API + "/tags/{tagId}"
           }
         }
+      },
+
+      /*
+       * MARKET
+       */
+      "market": {
+        useCache: false,
+        endpoints: {
+          get: {
+            method: "GET",
+            url: statics.API + "/catalog/licensed-items"
+          },
+          purchase: {
+            method: "POST",
+            url: statics.API + "/catalog/licensed-items/{licensedItemId}:purchase"
+          },
+        }
       }
     };
   },

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/pricing/UnitsList.js

@@ -81,7 +81,7 @@ qx.Class.define("osparc.pricing.UnitsList", {
 
       pricingUnits.forEach(pricingUnit => {
         const pUnit = new osparc.study.PricingUnit(pricingUnit).set({
-          showSpecificInfo: true,
+          showAwsSpecificInfo: true,
           showEditButton: true,
           allowGrowY: false
         });

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

@@ -31,7 +31,8 @@ qx.Class.define("osparc.study.PricingUnit", {
   },
 
   events: {
-    "editPricingUnit": "qx.event.type.Event"
+    "editPricingUnit": "qx.event.type.Event",
+    "rentPricingUnit": "qx.event.type.Event",
   },
 
   properties: {
@@ -42,19 +43,33 @@ qx.Class.define("osparc.study.PricingUnit", {
       apply: "__buildLayout"
     },
 
-    showSpecificInfo: {
+    showAwsSpecificInfo: {
       check: "Boolean",
       init: null,
       nullable: true,
-      event: "changeShowSpecificInfo"
+      event: "changeShowAwsSpecificInfo"
+    },
+
+    showUnitExtraInfo: {
+      check: "Boolean",
+      init: true,
+      nullable: true,
+      event: "changeShowUnitExtraInfo"
     },
 
     showEditButton: {
       check: "Boolean",
-      init: null,
+      init: false,
       nullable: true,
       event: "changeShowEditButton"
     },
+
+    showRentButton: {
+      check: "Boolean",
+      init: false,
+      nullable: true,
+      event: "changeShowRentButton"
+    },
   },
 
   members: {
@@ -79,10 +94,24 @@ qx.Class.define("osparc.study.PricingUnit", {
           });
           this._add(control);
           break;
+        case "unitExtraInfo":
+          control = new qx.ui.basic.Label().set({
+            font: "text-13",
+            rich: true,
+          });
+          this._add(control);
+          break;
         case "edit-button":
           control = new qx.ui.form.Button(qx.locale.Manager.tr("Edit"));
           this._add(control);
           break;
+        case "rent-button":
+          control = new qx.ui.form.Button(qx.locale.Manager.tr("Rent")).set({
+            appearance: "strong-button",
+            center: true,
+          });
+          this._add(control);
+          break;
       }
       return control || this.base(arguments, id);
     },
@@ -106,17 +135,20 @@ qx.Class.define("osparc.study.PricingUnit", {
         pricingUnit.bind("awsSpecificInfo", specificInfo, "value", {
           converter: v => qx.locale.Manager.tr("EC2") + ": " + v,
         });
-        this.bind("showSpecificInfo", specificInfo, "visibility", {
+        this.bind("showAwsSpecificInfo", specificInfo, "visibility", {
           converter: show => show ? "visible" : "excluded"
         })
       }
 
       // add pricing unit extra info
+      const unitExtraInfo = this.getChildControl("unitExtraInfo");
+      let text = "";
       Object.entries(pricingUnit.getUnitExtraInfo()).forEach(([key, value]) => {
-        this._add(new qx.ui.basic.Label().set({
-          value: key + ": " + value,
-          font: "text-13"
-        }));
+        text += `${key}: ${value}<br>`;
+      });
+      unitExtraInfo.setValue(text);
+      this.bind("showUnitExtraInfo", unitExtraInfo, "visibility", {
+        converter: show => show ? "visible" : "excluded"
       });
 
       // add edit button
@@ -125,6 +157,13 @@ qx.Class.define("osparc.study.PricingUnit", {
         converter: show => show ? "visible" : "excluded"
       })
       editButton.addListener("execute", () => this.fireEvent("editPricingUnit"));
+
+      // add rent button
+      const rentButton = this.getChildControl("rent-button");
+      this.bind("showRentButton", rentButton, "visibility", {
+        converter: show => show ? "visible" : "excluded"
+      })
+      rentButton.addListener("execute", () => this.fireEvent("rentPricingUnit"));
     }
   }
 });

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

@@ -21,7 +21,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
   construct: function() {
     this.base(arguments);
 
-    const layout = new qx.ui.layout.Grow();
+    const layout = new qx.ui.layout.VBox(20);
     this._setLayout(layout);
 
     this.__poplulateLayout();
@@ -46,8 +46,10 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
 
       const anatomicalModelsData = this.getAnatomicalModelsData();
       if (anatomicalModelsData) {
-        const card = this.__createcCard(anatomicalModelsData);
-        this._add(card);
+        const modelInfo = this.__createModelInfo(anatomicalModelsData);
+        this._add(modelInfo);
+        const pricingUnits = this.__createPricingUnits(anatomicalModelsData);
+        this._add(pricingUnits);
       } else {
         const selectModelLabel = new qx.ui.basic.Label().set({
           value: this.tr("Select a model for more details"),
@@ -61,13 +63,11 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
       }
     },
 
-    __createcCard: function(anatomicalModelsData) {
-      console.log(anatomicalModelsData);
-
+    __createModelInfo: function(anatomicalModelsData) {
       const cardGrid = new qx.ui.layout.Grid(16, 16);
       const cardLayout = new qx.ui.container.Composite(cardGrid);
 
-      const description = anatomicalModelsData["Description"];
+      const description = anatomicalModelsData["description"];
       description.split(" - ").forEach((desc, idx) => {
         const titleLabel = new qx.ui.basic.Label().set({
           value: desc,
@@ -85,7 +85,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
       });
 
       const thumbnail = new qx.ui.basic.Image().set({
-        source: anatomicalModelsData["Thumbnail"],
+        source: anatomicalModelsData["thumbnail"],
         alignY: "middle",
         scale: true,
         allowGrowX: true,
@@ -100,7 +100,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
         row: 2,
       });
 
-      const features = anatomicalModelsData["Features"];
+      const features = anatomicalModelsData["features"];
       const featuresGrid = new qx.ui.layout.Grid(8, 8);
       const featuresLayout = new qx.ui.container.Composite(featuresGrid);
       let idx = 0;
@@ -125,7 +125,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
             column: 0,
             row: idx,
           });
-  
+
           const nameLabel = new qx.ui.basic.Label().set({
             value: features[key.toLowerCase()],
             font: "text-14",
@@ -135,7 +135,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
             column: 1,
             row: idx,
           });
-  
+
           idx++;
         }
       });
@@ -167,40 +167,42 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
         row: 2,
       });
 
-      const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
-      if (anatomicalModelsData["leased"]) {
-        const leaseModelButton = new qx.ui.form.Button().set({
-          label: this.tr("3 seats Leased (27 days left)"),
-          appearance: "strong-button",
-          center: true,
-          enabled: false,
-        });
-        buttonsLayout.add(leaseModelButton, {
-          flex: 1
-        });
-      }
-      const leaseModelButton = new osparc.ui.form.FetchButton().set({
-        label: this.tr("Lease model (2 for months)"),
-        appearance: "strong-button",
-        center: true,
-      });
-      leaseModelButton.addListener("execute", () => {
-        leaseModelButton.setFetching(true);
-        setTimeout(() => {
-          leaseModelButton.setFetching(false);
-          this.fireDataEvent("modelLeased", this.getAnatomicalModelsData()["ID"]);
-        }, 2000);
-      });
-      buttonsLayout.add(leaseModelButton, {
-        flex: 1
-      });
-      cardLayout.add(buttonsLayout, {
-        column: 0,
-        row: 3,
-        colSpan: 2,
-      });
-
       return cardLayout;
     },
+
+    __createPricingUnits: function(anatomicalModelsData) {
+      console.log(anatomicalModelsData);
+      const pricingUnitsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
+        alignX: "center"
+      }));
+
+      const params = {
+        url: {
+          pricingPlanId: anatomicalModelsData["pricingPlanId"]
+        }
+      };
+      osparc.data.Resources.fetch("pricingPlans", "getOne", params)
+        .then(data => {
+          const pricingUnits = data["pricingUnits"];
+          pricingUnits.forEach(pricingUnit => {
+            const pUnit = new osparc.study.PricingUnit(pricingUnit).set({
+              showAwsSpecificInfo: false,
+              showUnitExtraInfo: false,
+              showEditButton: false,
+              showRentButton: true,
+              allowGrowY: false
+            });
+            pUnit.addListener("rentPricingUnit", () => this.__rentAnatomicalModel(anatomicalModelsData, pricingUnit));
+            pricingUnitsLayout.add(pUnit);
+          });
+        })
+        .catch(err => console.error(err));
+
+      return pricingUnitsLayout;
+    },
+
+    __rentAnatomicalModel: function(anatomicalModelsData, pricingUnit) {
+      console.log(":purchase", anatomicalModelsData["licensedItemId"], pricingUnit["pricingUnitId"]);
+    },
   }
 });

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

@@ -57,7 +57,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelListItem", {
       check: "Number",
       init: null,
       nullable: false,
-      event: "changemodelId",
+      event: "changeModelId",
     },
 
     thumbnail: {
@@ -83,6 +83,20 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelListItem", {
       event: "changeDate",
     },
 
+    licensedItemId: {
+      check: "String",
+      init: null,
+      nullable: false,
+      event: "changeLicensedItemId",
+    },
+
+    pricingPlanId: {
+      check: "Number",
+      init: null,
+      nullable: false,
+      event: "changePricingPlanId",
+    },
+
     leased: {
       check: "Boolean",
       init: false,

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

@@ -37,10 +37,13 @@ qx.Class.define("osparc.vipMarket.MarketWindow", {
 
   statics: {
     openWindow: function() {
-      const storeWindow = new osparc.vipMarket.MarketWindow();
-      storeWindow.center();
-      storeWindow.open();
-      return storeWindow;
+      if (osparc.product.Utils.showS4LStore()) {
+        const storeWindow = new osparc.vipMarket.MarketWindow();
+        storeWindow.center();
+        storeWindow.open();
+        return storeWindow;
+      }
+      return null;
     }
   },