✨ [Frontend] Feature: Pay study's debt

services/static-webserver/client/source/class/osparc/dashboard/CardBase.js

@@ -320,7 +320,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
 
     trashedAt: {
       check: "Date",
-      apply: "_applyTrasehdAt",
+      apply: "_applyTrashedAt",
       nullable: true
     },
 
@@ -385,15 +385,15 @@ qx.Class.define("osparc.dashboard.CardBase", {
       apply: "__applyState"
     },
 
-    projectState: {
-      check: ["NOT_STARTED", "STARTED", "SUCCESS", "FAILED", "UNKNOWN"],
-      nullable: false,
-      init: "UNKNOWN",
-      apply: "_applyProjectState"
+    debt: {
+      check: "Number",
+      nullable: true,
+      init: 0,
+      apply: "__applyDebt"
     },
 
     blocked: {
-      check: [true, "UNKNOWN_SERVICES", "IN_USE", false],
+      check: [true, "UNKNOWN_SERVICES", "IN_USE", "IN_DEBT", false],
       init: false,
       nullable: false,
       apply: "__applyBlocked"
@@ -547,7 +547,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
       throw new Error("Abstract method called!");
     },
 
-    _applyTrasehdAt: function(value, old) {
+    _applyTrashedAt: function(value, old) {
       throw new Error("Abstract method called!");
     },
 
@@ -633,7 +633,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
       const unaccessibleServices = osparc.study.Utils.getInaccessibleServices(workbench)
       if (unaccessibleServices.length) {
         this.setBlocked("UNKNOWN_SERVICES");
-        const image = "@FontAwesome5Solid/ban/";
+        let image = "@FontAwesome5Solid/ban/";
         let toolTipText = this.tr("Service info missing");
         unaccessibleServices.forEach(unSrv => {
           toolTipText += "<br>" + unSrv.key + ":" + unSrv.version;
@@ -681,65 +681,75 @@ qx.Class.define("osparc.dashboard.CardBase", {
     },
 
     __applyState: function(state) {
-      const locked = ("locked" in state) ? state["locked"]["value"] : false;
-      this.setBlocked(locked ? "IN_USE" : false);
-      if (locked) {
-        this.__showBlockedCardFromStatus(state["locked"]);
+      let lockInUse = false;
+      if ("locked" in state && "value" in state["locked"]) {
+        lockInUse = state["locked"]["value"];
+      }
+      this.setBlocked(lockInUse ? "IN_USE" : false);
+      if (lockInUse) {
+        this.__showBlockedCardFromStatus("IN_USE", state["locked"]);
       }
 
-      const projectState = ("state" in state) ? state["state"]["value"] : undefined;
-      if (projectState) {
-        this._applyProjectState(state["state"]);
+      const pipelineState = ("state" in state) ? state["state"]["value"] : undefined;
+      if (pipelineState) {
+        this.__applyPipelineState(state["state"]["value"]);
       }
     },
 
-    _applyProjectState: function(projectStatus) {
-      const status = projectStatus["value"];
-      let icon;
-      let toolTip;
-      let border;
-      switch (status) {
+    __applyDebt: function(debt) {
+      this.setBlocked(debt ? "IN_DEBT" : false);
+      if (debt) {
+        this.__showBlockedCardFromStatus("IN_DEBT", debt);
+      }
+    },
+
+    // pipelineState: ["NOT_STARTED", "STARTED", "SUCCESS", "ABORTED", "FAILED", "UNKNOWN"]
+    __applyPipelineState: function(pipelineState) {
+      let iconSource;
+      let toolTipText;
+      let borderColor;
+      switch (pipelineState) {
         case "STARTED":
-          icon = "@FontAwesome5Solid/spinner/10";
-          toolTip = this.tr("Running");
-          border = "info";
+          iconSource = "@FontAwesome5Solid/spinner/10";
+          toolTipText = this.tr("Running");
+          borderColor = "info";
           break;
         case "SUCCESS":
-          icon = "@FontAwesome5Solid/check/10";
-          toolTip = this.tr("Ran successfully");
-          border = "success";
+          iconSource = "@FontAwesome5Solid/check/10";
+          toolTipText = this.tr("Ran successfully");
+          borderColor = "success";
           break;
         case "ABORTED":
-          icon = "@FontAwesome5Solid/exclamation/10";
-          toolTip = this.tr("Run aborted");
-          border = "warning";
+          iconSource = "@FontAwesome5Solid/exclamation/10";
+          toolTipText = this.tr("Run aborted");
+          borderColor = "warning";
           break;
         case "FAILED":
-          icon = "@FontAwesome5Solid/exclamation/10";
-          toolTip = this.tr("Ran with error");
-          border = "error";
+          iconSource = "@FontAwesome5Solid/exclamation/10";
+          toolTipText = this.tr("Ran with error");
+          borderColor = "error";
           break;
+        case "UNKNOWN":
+        case "NOT_STARTED":
         default:
-          icon = null;
-          toolTip = null;
-          border = null;
+          iconSource = null;
+          toolTipText = null;
+          borderColor = null;
           break;
       }
-      this.__applyProjectLabel(icon, toolTip, border);
-    },
 
-    __applyProjectLabel: function(icn, toolTipText, bdr) {
       const border = new qx.ui.decoration.Decorator().set({
         radius: 10,
         width: 1,
         style: "solid",
-        color: bdr,
-        backgroundColor: bdr ? bdr + "-bg" : null
+        color: borderColor,
+        backgroundColor: borderColor ? borderColor + "-bg" : null
       });
+
       const projectStatusLabel = this.getChildControl("project-status");
       projectStatusLabel.set({
         decorator: border,
-        textColor: bdr,
+        textColor: borderColor,
         alignX: "center",
         alignY: "middle",
         height: 17,
@@ -748,14 +758,25 @@ qx.Class.define("osparc.dashboard.CardBase", {
       });
 
       projectStatusLabel.set({
-        visibility: icn && toolTipText && bdr ? "visible" : "excluded",
-        source: icn,
-        toolTipIcon: icn,
+        visibility: iconSource && toolTipText && borderColor ? "visible" : "excluded",
+        source: iconSource,
+        toolTipIcon: iconSource,
         toolTipText
       });
     },
 
-    __showBlockedCardFromStatus: function(lockedStatus) {
+    __showBlockedCardFromStatus: function(reason, moreInfo) {
+      switch (reason) {
+        case "IN_USE":
+          this.__blockedInUse(moreInfo);
+          break;
+        case "IN_DEBT":
+          this.__blockedInDebt(moreInfo);
+          break;
+      }
+    },
+
+    __blockedInUse: function(lockedStatus) {
       const status = lockedStatus["status"];
       const owner = lockedStatus["owner"];
       let toolTip = osparc.utils.Utils.firstsUp(owner["first_name"] || this.tr("A user"), owner["last_name"] || ""); // it will be replaced by "userName"
@@ -788,14 +809,23 @@ qx.Class.define("osparc.dashboard.CardBase", {
       this.__showBlockedCard(image, toolTip);
     },
 
+    __blockedInDebt: function() {
+      const studyAlias = osparc.product.Utils.getStudyAlias({firstUpperCase: true});
+      const toolTip = studyAlias + " " + this.tr("Embargoed<br>Credits Required");
+      const image = "@FontAwesome5Solid/lock/";
+      this.__showBlockedCard(image, toolTip);
+    },
+
     __showBlockedCard: function(lockImageSrc, toolTipText) {
       this.getChildControl("lock-status").set({
         opacity: 1.0,
         visibility: "visible"
       });
+
       const lockImage = this.getChildControl("lock-status").getChildControl("image");
       lockImageSrc += this.classname.includes("Grid") ? "32" : "22";
       lockImage.setSource(lockImageSrc);
+
       if (toolTipText) {
         this.set({
           toolTipText

services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js

@@ -188,7 +188,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
     },
 
     // overridden
-    _applyTrasehdAt: function(value) {
+    _applyTrashedAt: function(value) {
       if (value && value.getTime() !== new Date(0).getTime()) {
         if (this.isResourceType("study") || this.isResourceType("template")) {
           const dateBy = this.getChildControl("date-by");

services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js

@@ -204,7 +204,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
     },
 
     // overridden
-    _applyTrasehdAt: function(value) {
+    _applyTrashedAt: function(value) {
       if (value && value.getTime() !== new Date(0).getTime()) {
         if (this.isResourceType("study") || this.isResourceType("template")) {
           const dateBy = this.getChildControl("date-by");

services/static-webserver/client/source/class/osparc/dashboard/ResourceDetails.js

@@ -67,6 +67,16 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         height: this.HEIGHT,
       });
       return win;
+    },
+
+    createToolbar: function() {
+      const toolbar = new qx.ui.container.Composite(new qx.ui.layout.HBox(20).set({
+        alignX: "right",
+        alignY: "top"
+      })).set({
+        maxHeight: 40
+      });
+      return toolbar;
     }
   },
 
@@ -90,32 +100,36 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
     __billingSettings: null,
     __classifiersPage: null,
     __qualityPage: null,
-    __openButton: null,
-
-    __createToolbar: function() {
-      const toolbar = new qx.ui.container.Composite(new qx.ui.layout.HBox(20).set({
-        alignX: "right",
-        alignY: "top"
-      })).set({
-        maxHeight: 40
-      });
-      return toolbar;
-    },
 
     __addOpenButton: function(page) {
       const resourceData = this.__resourceData;
 
-      const toolbar = this.__createToolbar();
+      const toolbar = this.self().createToolbar();
       page.addToHeader(toolbar);
 
+      if (this.__resourceData["resourceType"] === "study") {
+        const payDebtButton = new qx.ui.form.Button(this.tr("Credits required"));
+        page.payDebtButton = payDebtButton;
+        osparc.dashboard.resources.pages.BasePage.decorateHeaderButton(payDebtButton);
+        payDebtButton.addListener("execute", () => this.openBillingSettings());
+        if (this.__resourceData["resourceType"] === "study") {
+          const studyData = this.__resourceData;
+          payDebtButton.set({
+            visibility: osparc.study.Utils.isInDebt(studyData) ? "visible" : "excluded"
+          });
+        }
+        toolbar.add(payDebtButton);
+      }
+
       if (osparc.utils.Resources.isService(resourceData)) {
         const serviceVersionSelector = this.__createServiceVersionSelector();
         toolbar.add(serviceVersionSelector);
       }
 
-      const openButton = this.__openButton = new osparc.ui.form.FetchButton(this.tr("Open")).set({
+      const openButton = new osparc.ui.form.FetchButton(this.tr("Open")).set({
         enabled: true
       });
+      page.openButton = openButton;
       osparc.dashboard.resources.pages.BasePage.decorateHeaderButton(openButton);
       osparc.utils.Utils.setIdToWidget(openButton, "openResource");
       const store = osparc.store.Store.getInstance();
@@ -125,8 +139,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
       this.bind("showOpenButton", openButton, "visibility", {
         converter: show => (store.getCurrentStudy() === null && show) ? "visible" : "excluded"
       });
-
-      openButton.addListener("execute", () => this.__openTapped());
+      openButton.addListener("execute", () => this.__openTapped(openButton));
 
       if (this.__resourceData["resourceType"] === "study") {
         const studyData = this.__resourceData;
@@ -137,21 +150,21 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
       toolbar.add(openButton);
     },
 
-    __openTapped: function() {
+    __openTapped: function(openButton) {
       if (this.__resourceData["resourceType"] !== "study") {
         // Template or Service, nothing to pre-check
         this.__openResource();
         return;
       }
-      this.__openButton.setFetching(true);
+      openButton.setFetching(true);
       const params = {
         url: {
           "studyId": this.__resourceData["uuid"]
         }
       };
       osparc.data.Resources.getOne("studies", params)
         .then(updatedStudyData => {
-          this.__openButton.setFetching(false);
+          openButton.setFetching(false);
           const updatableServices = osparc.metadata.ServicesInStudyUpdate.updatableNodeIds(updatedStudyData.workbench);
           if (updatableServices.length && osparc.data.model.Study.canIWrite(updatedStudyData["accessRights"])) {
             this.__confirmUpdate();
@@ -162,7 +175,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         .catch(err => {
           console.error(err);
           osparc.FlashMessenger.logAs(err.message, "ERROR");
-          this.__openButton.setFetching(false);
+          openButton.setFetching(false);
         });
     },
 
@@ -365,19 +378,27 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
       const resourceData = this.__resourceData;
       if (osparc.utils.Resources.isStudy(resourceData)) {
         const id = "Billing";
-        const title = this.tr("Tier Settings");
+        const title = this.tr("Billing Settings");
         const iconSrc = "@FontAwesome5Solid/cogs/22";
         const page = this.__billingSettings = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);
         this.__addOpenButton(page);
 
-        if (this.__resourceData["resourceType"] === "study") {
-          const studyData = this.__resourceData;
-          const canBeOpened = osparc.study.Utils.canShowBillingOptions(studyData);
+        if (resourceData["resourceType"] === "study") {
+          const canBeOpened = osparc.study.Utils.canShowBillingOptions(resourceData);
           page.setEnabled(canBeOpened);
         }
 
         const lazyLoadContent = () => {
           const billingSettings = new osparc.study.BillingSettings(resourceData);
+          billingSettings.addListener("debtPayed", () => {
+            if (resourceData["resourceType"] === "study") {
+              page.payDebtButton.set({
+                visibility: osparc.study.Utils.isInDebt(resourceData) ? "visible" : "excluded"
+              });
+              const canBeOpened = osparc.study.Utils.canBeOpened(resourceData);
+              page.openButton.setEnabled(canBeOpened);
+            }
+          })
           const billingScroll = new qx.ui.container.Scroll(billingSettings);
           page.addToContent(billingScroll);
         }
@@ -751,7 +772,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
 
           const publishTemplateButton = saveAsTemplate.getPublishTemplateButton();
           osparc.dashboard.resources.pages.BasePage.decorateHeaderButton(publishTemplateButton);
-          const toolbar = this.__createToolbar();
+          const toolbar = this.self().createToolbar();
           toolbar.add(publishTemplateButton);
           page.addToHeader(toolbar);
           page.addToContent(saveAsTemplate);