🎨 [Frontend] ViP Market: force accept Terms and Conditions (#7239)

Author: odeimaiz

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

@@ -29,6 +29,13 @@ qx.Class.define("osparc.study.PricingUnitLicense", {
       nullable: true,
       event: "changeShowRentButton"
     },
+
+    licenseUrl: {
+      check: "String",
+      init: false,
+      nullable: true,
+      event: "changeLicenseUrl"
+    },
   },
 
   statics: {
@@ -94,12 +101,38 @@ qx.Class.define("osparc.study.PricingUnitLicense", {
         caption: this.tr("Rent"),
         confirmText: this.tr("Rent"),
       });
+
+      if (this.getLicenseUrl()) {
+        const useCacheCB = new qx.ui.form.CheckBox().set({
+          value: false,
+          label: this.tr("Accept <u>Terms and Conditions</u>"),
+          rich: true,
+        });
+        useCacheCB.getChildControl("label").set({
+          anonymous: false,
+          cursor: "pointer",
+        });
+        useCacheCB.getChildControl("label").addListener("tap", () => this.__openLicense());
+        confirmationWin.addWidget(useCacheCB);
+        confirmationWin.getExtraWidgetsLayout().setPaddingTop(0); // reset paddingTop
+        useCacheCB.bind("value", confirmationWin.getConfirmButton(), "enabled");
+      }
+
       confirmationWin.open();
       confirmationWin.addListener("close", () => {
         if (confirmationWin.getConfirmed()) {
           this.fireEvent("rentPricingUnit");
         }
       }, this);
     },
+
+    __openLicense: function() {
+      const mdWindow = new osparc.ui.markdown.MarkdownWindow(this.getLicenseUrl()).set({
+        caption: this.tr("Terms and Conditions"),
+        width: 800,
+        height: 600,
+      });
+      mdWindow.open();
+    },
   }
 });

services/static-webserver/client/source/class/osparc/ui/markdown/MarkdownWindow.js

@@ -0,0 +1,39 @@
+/*
+ * oSPARC - The SIMCORE frontend - https://osparc.io
+ * Copyright: 2025 IT'IS Foundation - https://itis.swiss
+ * License: MIT - https://opensource.org/licenses/MIT
+ * Authors: Odei Maiz (odeimaiz)
+ */
+
+qx.Class.define("osparc.ui.markdown.MarkdownWindow", {
+  extend: osparc.ui.window.Window,
+
+  construct: function(markdownUrl) {
+    this.base(arguments);
+
+    this.set({
+      layout: new qx.ui.layout.VBox(),
+      resizable: true,
+      showMaximize: false,
+      showMinimize: false,
+      centerOnAppear: true,
+      clickAwayClose: true,
+      modal: true
+    });
+
+    const markdown = new osparc.ui.markdown.Markdown().set({
+      padding: 15,
+    });
+    const scrollContainer = new qx.ui.container.Scroll();
+    scrollContainer.add(markdown);
+    this._add(scrollContainer, {
+      flex: 1,
+    });
+
+    if (markdownUrl) {
+      fetch(markdownUrl)
+        .then(res => res.text())
+        .then(text => markdown.setValue(text));
+    }
+  },
+});

services/static-webserver/client/source/class/osparc/ui/window/Dialog.js

@@ -100,6 +100,10 @@ qx.Class.define("osparc.ui.window.Dialog", {
       this.__extraWidgetsLayout.add(widget);
     },
 
+    getExtraWidgetsLayout: function() {
+      return this.__extraWidgetsLayout;
+    },
+
     /**
      * Adds a button to the dialog.
      * @param {qx.ui.form.Button} button Button that will be added to the bottom bar of the dialog.

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

@@ -341,6 +341,7 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
             });
             const pUnit = new osparc.study.PricingUnitLicense(pricingUnit).set({
               showRentButton: true,
+              licenseUrl: licensedItemData["termsOfUseUrl"],
             });
             pUnit.addListener("rentPricingUnit", () => {
               this.fireDataEvent("modelPurchaseRequested", {