🎨 [Frontend] TIP v3 Feedback from 10.07

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

@@ -147,41 +147,7 @@ qx.Class.define("osparc.dashboard.NewStudies", {
       const newPlanButton = new osparc.dashboard.GridButtonNew(title, desc);
       newPlanButton.setCardKey(templateInfo.idToWidget);
       osparc.utils.Utils.setIdToWidget(newPlanButton, templateInfo.idToWidget);
-      if (templateInfo.billable) {
-        // replace the plus button with the creditsImage
-        const creditsImage = new osparc.desktop.credits.CreditsImage();
-        creditsImage.getChildControl("image").set({
-          width: 60,
-          height: 60
-        })
-        newPlanButton.replaceIcon(creditsImage);
-
-        newPlanButton.addListener("execute", () => {
-          const store = osparc.store.Store.getInstance();
-          const credits = store.getContextWallet().getCreditsAvailable()
-          const preferencesSettings = osparc.Preferences.getInstance();
-          const warningThreshold = preferencesSettings.getCreditsWarningThreshold();
-          if (credits <= warningThreshold) {
-            const msg = this.tr("This Plan requires Credits to run Sim4Life powered simulations. You can top up in the Billing Center.");
-            const win = new osparc.ui.window.Confirmation(msg).set({
-              caption: this.tr("Credits required"),
-              confirmText: this.tr("Start, I'll get them later"),
-              confirmAction: "create"
-            });
-            win.center();
-            win.open();
-            win.addListener("close", () => {
-              if (win.getConfirmed()) {
-                this.fireDataEvent("newStudyClicked", templateInfo);
-              }
-            });
-          } else {
-            newStudyClicked();
-          }
-        });
-      } else {
-        newPlanButton.addListener("execute", () => newStudyClicked());
-      }
+      newPlanButton.addListener("execute", () => newStudyClicked());
       return newPlanButton;
     },
 

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

@@ -27,10 +27,14 @@ qx.Class.define("osparc.desktop.credits.CreditsImage", {
   },
 
   members: {
+    __forceNullColor: null,
+
     __updateWallet: function() {
       const store = osparc.store.Store.getInstance();
       const contextWallet = store.getContextWallet();
       if (contextWallet) {
+        this.__forceNullColor = osparc.product.Utils.forceNullCreditsColor(contextWallet);
+
         contextWallet.addListener("changeCreditsAvailable", this.__updateColor, this);
         this.__updateColor();
       }
@@ -40,9 +44,13 @@ qx.Class.define("osparc.desktop.credits.CreditsImage", {
       const store = osparc.store.Store.getInstance();
       const contextWallet = store.getContextWallet();
       if (contextWallet) {
-        const credits = contextWallet.getCreditsAvailable();
-        const creditsColorKeyword = osparc.desktop.credits.Utils.creditsToColor(credits, "strong-main");
-        this.setImageColor(creditsColorKeyword);
+        if (this.__forceNullColor) {
+          this.setImageColor(null);
+        } else {
+          const credits = contextWallet.getCreditsAvailable();
+          const creditsColorKeyword = osparc.desktop.credits.Utils.creditsToColor(credits, "strong-main");
+          this.setImageColor(creditsColorKeyword);
+        }
       }
     }
   }

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

@@ -49,7 +49,7 @@ qx.Class.define("osparc.navigation.UserMenuButton", {
     store.addListener("changeContextWallet", () => this.__bindWalletToHalo());
 
     const preferencesSettings = osparc.Preferences.getInstance();
-    preferencesSettings.addListener("changeCreditsWarningThreshold", () => this.__updateHalloCredits());
+    preferencesSettings.addListener("changeCreditsWarningThreshold", () => this.__updateHaloColor());
 
     const userEmail = authData.getEmail() || "[email protected]";
     const icon = this.getChildControl("icon");
@@ -77,25 +77,33 @@ qx.Class.define("osparc.navigation.UserMenuButton", {
   },
 
   members: {
+    __forceNullColor: null,
+
     __bindWalletToHalo: function() {
       const store = osparc.store.Store.getInstance();
       const contextWallet = store.getContextWallet();
       if (contextWallet) {
-        this.__updateHalloCredits();
-        contextWallet.addListener("changeCreditsAvailable", () => this.__updateHalloCredits());
+        this.__forceNullColor = osparc.product.Utils.forceNullCreditsColor(contextWallet);
+
+        this.__updateHaloColor();
+        contextWallet.addListener("changeCreditsAvailable", () => this.__updateHaloColor());
       }
     },
 
-    __updateHalloCredits: function() {
+    __updateHaloColor: function() {
       const store = osparc.store.Store.getInstance();
       const contextWallet = store.getContextWallet();
       if (contextWallet) {
         const credits = contextWallet.getCreditsAvailable();
         if (credits !== null) {
-          const progress = credits > 0 ? osparc.desktop.credits.Utils.normalizeCredits(credits) : 100; // make hallo red
-          const creditsColor = osparc.desktop.credits.Utils.creditsToColor(credits, "strong-main");
-          const color1 = qx.theme.manager.Color.getInstance().resolve(creditsColor);
-          osparc.service.StatusUI.getStatusHalo(this, color1, progress);
+          if (this.__forceNullColor) {
+            osparc.service.StatusUI.getStatusHalo(this, null, 100);
+          } else {
+            const progress = credits > 0 ? osparc.desktop.credits.Utils.normalizeCredits(credits) : 100; // make halo red
+            const creditsColor = osparc.desktop.credits.Utils.creditsToColor(credits, "strong-main");
+            const color = qx.theme.manager.Color.getInstance().resolve(creditsColor);
+            osparc.service.StatusUI.getStatusHalo(this, color, progress);
+          }
         }
       }
     },

services/static-webserver/client/source/class/osparc/product/AboutProduct.js

@@ -69,17 +69,16 @@ qx.Class.define("osparc.product.AboutProduct", {
     __buildS4LLayout: function() {
       osparc.store.Support.getLicenseURL()
         .then(licenseUrl => {
-          const color = qx.theme.manager.Color.getInstance().resolve("text");
           const text = this.tr(`
             sim4life.io is a native implementation of the most advanced simulation platform, Sim4Life, in the cloud. \
             The platform empowers users to simulate, analyze, and predict complex, multifaceted, and dynamic biological interactions within the full anatomical complexity of the human body. \
             It provides the ability to set up and run complex simulations directly within any browser, utilizing cloud technology.
             <br><br>
             sim4life.io makes use of technologies developed by our research partner for the o<sup>2</sup>S<sup>2</sup>PARC platform, the IT’IS Foundation, and co-funded by the U.S. National Institutes of Health’s SPARC initiative.\
             <br><br>
-            For more information about Sim4Life, please visit <a href='https://sim4life.swiss/' style='color: ${color}' target='_blank'>sim4life.swiss</a>.
+            For more information about Sim4Life, please visit ${osparc.utils.Utils.createHTMLLink("sim4life.swiss", "https://sim4life.swiss/")}.
             <br><br>
-            To review license agreements, click <a href=${licenseUrl} style='color: ${color}' target='_blank'>here</a>.
+            To review license agreements, click ${osparc.utils.Utils.createHTMLLink("here", licenseUrl)}.
           `);
 
           const label = osparc.product.quickStart.Utils.createLabel(text);
@@ -90,17 +89,16 @@ qx.Class.define("osparc.product.AboutProduct", {
     __buildS4LAcademicLayout: function() {
       osparc.store.Support.getLicenseURL()
         .then(licenseUrl => {
-          const color = qx.theme.manager.Color.getInstance().resolve("text");
           const text = this.tr(`
             sim4life.science is a native implementation of the most advanced simulation platform, Sim4Life, in the cloud. \
             The platform empowers users to simulate, analyze, and predict complex, multifaceted, and dynamic biological interactions within the full anatomical complexity of the human body. \
             It provides the ability to set up and run complex simulations directly within any browser, utilizing cloud technology.
             <br><br>
             sim4life.science makes use of technologies developed by our research partner for the o<sup>2</sup>S<sup>2</sup>PARC platform, the IT’IS Foundation, and co-funded by the U.S. National Institutes of Health’s SPARC initiative.\
             <br><br>
-            For more information about Sim4Life, please visit <a href='https://sim4life.swiss/' style='color: ${color}' target='_blank'>sim4life.swiss</a>.
+            For more information about Sim4Life, please visit ${osparc.utils.Utils.createHTMLLink("sim4life.swiss", "href='https://sim4life.swiss/")}.
             <br><br>
-            To review license agreements, click <a href=${licenseUrl} style='color: ${color}' target='_blank'>here</a>.
+            To review license agreements, click ${osparc.utils.Utils.createHTMLLink("here", licenseUrl)}.
           `);
 
           const label = osparc.product.quickStart.Utils.createLabel(text);
@@ -109,17 +107,15 @@ qx.Class.define("osparc.product.AboutProduct", {
     },
 
     __buildS4LLiteLayout: function() {
-      const color = qx.theme.manager.Color.getInstance().resolve("text");
-
       // https://zurichmedtech.github.io/s4l-lite-manual/#/docs/what_is_s4l_lite
       const introText = "<i>S4L<sup>lite</sup></i> is a powerful web-based simulation platform that allows you to model and analyze real-world phenomena and to design complex technical devices in a validated environment. With its intuitive interface and advanced tools, <i>S4L<sup>lite</sup></i> makes it easy to develop your simulation project, wherever you are.";
 
       const licenseUrl = "https://zurichmedtech.github.io/s4l-lite-manual/#/docs/licensing/copyright_Sim4Life";
-      const licenseText = `Click <a href=${licenseUrl} style='color: ${color}' target='_blank'>here</a> to read the license agreements.`;
+      const licenseText = `Click ${osparc.utils.Utils.createHTMLLink("here", licenseUrl)} to read the license agreements.`;
 
       // more info ZMT website
       const moreInfoUrl = "https://zmt.swiss/";
-      const moreInfoText = `For more information about <i>S4L<sup>lite</sup></i>, visit <a href=${moreInfoUrl} style='color: ${color}' target='_blank'>our website</a>.`;
+      const moreInfoText = `For more information about <i>S4L<sup>lite</sup></i>, visit ${osparc.utils.Utils.createHTMLLink("our website", moreInfoUrl)}.`;
 
       [
         introText,

services/static-webserver/client/source/class/osparc/product/Utils.js

@@ -184,6 +184,17 @@ qx.Class.define("osparc.product.Utils", {
       return logosPath;
     },
 
+    forceNullCreditsColor: function(wallet) {
+      // TIP is a product that can be used for free, so allow making 0 credits scenario more friendly.
+      if (osparc.product.Utils.isProduct("tis")) {
+        // Ideally, check if there was ever a transaction. If not, keep the indicator gray.
+        // Note: Since we can't fetch payments per wallet, for now rely on the available credits.
+        const credits = wallet.getCreditsAvailable();
+        return credits === 0;
+      }
+      return false;
+    },
+
     // All products except oSPARC
     hasIdlingTrackerEnabled: function() {
       const product = this.getProductName();

services/static-webserver/client/source/class/osparc/product/quickStart/SlidesBase.js

@@ -102,8 +102,13 @@ qx.Class.define("osparc.product.quickStart.SlidesBase", {
       if (idx > -1 && idx < selectables.length) {
         this.__currentIdx = idx;
         this.__stack.setSelection([selectables[idx]]);
-        this.__prevBtn.setEnabled(idx !== 0);
-        this.__nextBtn.setEnabled(idx !== selectables.length-1);
+        const firstSlide = (idx === 0);
+        const lastSlide = (idx === selectables.length-1);
+        this.__prevBtn.setEnabled(!firstSlide);
+        this.__nextBtn.setEnabled(!lastSlide);
+        this.set({
+          showClose: lastSlide
+        });
       }
       this.__slideCounter.removeAll();
       for (let i=0; i<selectables.length; i++) {

services/static-webserver/client/source/class/osparc/product/quickStart/s4l/Welcome.js

@@ -114,8 +114,8 @@ qx.Class.define("osparc.product.quickStart.s4l.Welcome", {
       });
       const manuals = osparc.store.Support.getManuals();
       if (manuals.length > 0) {
-        const color = qx.theme.manager.Color.getInstance().resolve("text");
-        docLink.setValue(`<a href=${manuals[0].url} style='color: ${color}' target='_blank'>Documentation</a>`);
+        const link = osparc.utils.Utils.createHTMLLink("Documentation", manuals[0].url);
+        docLink.setValue(link);
         docLink.show();
       }
       footerItems.push(docLink);
@@ -127,9 +127,8 @@ qx.Class.define("osparc.product.quickStart.s4l.Welcome", {
       });
       osparc.store.Support.getLicenseURL()
         .then(licenseUrl => {
-          const color = qx.theme.manager.Color.getInstance().resolve("text");
-          const textLink = `<a href=${licenseUrl} style='color: ${color}' target='_blank'>Licensing</a>`;
-          licenseLink.setValue(textLink);
+          const link = osparc.utils.Utils.createHTMLLink("Licensing", licenseUrl);
+          licenseLink.setValue(link);
           licenseLink.show();
         });
       footerItems.push(licenseLink);

services/static-webserver/client/source/class/osparc/product/quickStart/s4lacad/Welcome.js

@@ -114,8 +114,8 @@ qx.Class.define("osparc.product.quickStart.s4lacad.Welcome", {
       });
       const manuals = osparc.store.Support.getManuals();
       if (manuals.length > 0) {
-        const color = qx.theme.manager.Color.getInstance().resolve("text");
-        docLink.setValue(`<a href=${manuals[0].url} style='color: ${color}' target='_blank'>Documentation</a>`);
+        const link = osparc.utils.Utils.createHTMLLink("Documentation", manuals[0].url);
+        docLink.setValue(link);
         docLink.show();
       }
       footerItems.push(docLink);
@@ -127,9 +127,8 @@ qx.Class.define("osparc.product.quickStart.s4lacad.Welcome", {
       });
       osparc.store.Support.getLicenseURL()
         .then(licenseUrl => {
-          const color = qx.theme.manager.Color.getInstance().resolve("text");
-          const textLink = `<a href=${licenseUrl} style='color: ${color}' target='_blank'>Licensing</a>`;
-          licenseLink.setValue(textLink);
+          const link = osparc.utils.Utils.createHTMLLink("Licensing", licenseUrl);
+          licenseLink.setValue(link);
           licenseLink.show();
         });
       footerItems.push(licenseLink);

services/static-webserver/client/source/class/osparc/product/quickStart/s4llite/Slides.js

@@ -42,8 +42,8 @@ qx.Class.define("osparc.product.quickStart.s4llite.Slides", {
       });
       const manuals = osparc.store.Support.getManuals();
       if (manuals.length > 0) {
-        const color = qx.theme.manager.Color.getInstance().resolve("text");
-        docLink.setValue(`<a href=${manuals[0].url} style='color: ${color}' target='_blank'>Documentation</a>`);
+        const link = osparc.utils.Utils.createHTMLLink("Documentation", manuals[0].url);
+        docLink.setValue(link);
         docLink.show();
       }
       footerItems.push(docLink);
@@ -55,9 +55,8 @@ qx.Class.define("osparc.product.quickStart.s4llite.Slides", {
       });
       osparc.store.Support.getLicenseURL()
         .then(licenseUrl => {
-          const color = qx.theme.manager.Color.getInstance().resolve("text");
-          const textLink = `<a href=${licenseUrl} style='color: ${color}' target='_blank'>Licensing</a>`;
-          licenseLink.setValue(textLink);
+          const link = osparc.utils.Utils.createHTMLLink("Licensing", licenseUrl);
+          licenseLink.setValue(link);
           licenseLink.show();
         });
       footerItems.push(licenseLink);

services/static-webserver/client/source/class/osparc/product/quickStart/ti/MoreInformation.js

@@ -0,0 +1,33 @@
+/* ************************************************************************
+
+   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)
+
+************************************************************************ */
+
+qx.Class.define("osparc.product.quickStart.ti.MoreInformation", {
+  extend: osparc.product.quickStart.SlideBase,
+
+  construct: function() {
+    const title = this.tr("For more information:");
+    this.base(arguments, title);
+  },
+
+  members: {
+    _populateCard: function() {
+      osparc.product.quickStart.ti.Slides.footerLinks().forEach(footerItem => {
+        this._add(footerItem);
+      });
+    }
+  }
+});