🎨 [Frontend] Purchase items for one year

services/static-webserver/client/source/class/osparc/auth/LoginPageSplit.js

@@ -71,6 +71,10 @@ qx.Class.define("osparc.auth.LoginPageSplit", {
       loginPage.addListener("done", e => this.fireDataEvent("done", e.getData()));
       const container = new qx.ui.container.Scroll();
       container.add(loginPage);
+      const spacers = [
+        loginPage.getChildControl("top-spacer"),
+        loginPage.getChildControl("bottom-spacer"),
+      ];
       const hideableItems = loginPage.getChildControl("login-view").getHideableItems();
       if (this.isCompactVersion()) {
         // no split-image
@@ -79,6 +83,7 @@ qx.Class.define("osparc.auth.LoginPageSplit", {
         this._add(container, {
           flex: 1
         });
+        spacers.forEach(spacer => spacer.setMinHeight(0));
         hideableItems.forEach(hideableItem => hideableItem.exclude());
       } else {
         // split-image on the left
@@ -90,6 +95,7 @@ qx.Class.define("osparc.auth.LoginPageSplit", {
         this._add(container, {
           width: "50%"
         });
+        spacers.forEach(spacer => spacer.setMinHeight(50));
         hideableItems.forEach(hideableItem => hideableItem.show());
       }
     },

services/static-webserver/client/source/class/osparc/auth/LoginWithDecorators.js

@@ -63,7 +63,9 @@ qx.Class.define("osparc.auth.LoginWithDecorators", {
       let control;
       switch (id) {
         case "top-spacer":
-          control = new qx.ui.core.Spacer();
+          control = new qx.ui.core.Spacer().set({
+            minHeight: 50,
+          });
           this._add(control, {
             flex: 1
           });
@@ -109,7 +111,9 @@ qx.Class.define("osparc.auth.LoginWithDecorators", {
           });
           break;
         case "bottom-spacer":
-          control = new qx.ui.core.Spacer();
+          control = new qx.ui.core.Spacer().set({
+            minHeight: 50,
+          });
           this._add(control, {
             flex: 1
           });
@@ -342,6 +346,6 @@ qx.Class.define("osparc.auth.LoginWithDecorators", {
       });
 
       return versionLinkLayout;
-    }
+    },
   }
 });

services/static-webserver/client/source/class/osparc/auth/ui/LoginView.js

@@ -186,7 +186,7 @@ qx.Class.define("osparc.auth.ui.LoginView", {
     },
 
     __openTipItisPhaseOutDialog: function() {
-      const createAccountWindow = new osparc.ui.window.Dialog("Request Account").set({
+      const createAccountWindow = new osparc.ui.window.Dialog(this.tr("Request Account")).set({
         maxWidth: 380
       });
       let message = "This version of the planning tool will be phased out soon and no longer accepts new users.";

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

@@ -261,7 +261,7 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
     __applyTrashedBy: function(gid) {
       if (gid) {
         const dateBy = this.getChildControl("date-by");
-        dateBy.setGroupid(gid);
+        dateBy.setGroupId(gid);
       }
     },
 

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

@@ -68,13 +68,8 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
             column: osparc.dashboard.ListButtonBase.POS.SHARED
           });
           break;
-        case "date-text":
-          control = new qx.ui.basic.Label().set({
-            font: "text-13",
-            allowGrowY: false,
-            minWidth: 120,
-            alignY: "middle"
-          });
+        case "date-by":
+          control = new osparc.ui.basic.DateAndBy();
           this._add(control, {
             row: 0,
             column: osparc.dashboard.ListButtonBase.POS.LAST_CHANGE

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

@@ -31,19 +31,34 @@ qx.Class.define("osparc.study.PricingUnitLicense", {
     },
   },
 
+  statics: {
+    getExpirationDate: function() {
+      const expirationDate = new Date();
+      expirationDate.setFullYear(expirationDate.getFullYear() + 1); // hardcoded for now: rented for one year from now
+      return expirationDate;
+    },
+  },
+
   members: {
     _createChildControlImpl: function(id) {
       let control;
       switch (id) {
+        case "rental-period":
+          control = new qx.ui.basic.Label().set({
+            value: this.tr("Duration: 1 year"), // hardcoded for now
+            font: "text-14",
+          });
+          this._add(control);
+          break;
         case "rent-button":
-          control = new qx.ui.form.Button(qx.locale.Manager.tr("Rent")).set({
+          control = new qx.ui.form.Button(this.tr("Rent")).set({
             appearance: "strong-button",
             center: true,
           });
           this.bind("showRentButton", control, "visibility", {
             converter: show => show ? "visible" : "excluded"
           });
-          control.addListener("execute", () => this.fireEvent("rentPricingUnit"));
+          control.addListener("execute", () => this.__rentUnit());
           this._add(control);
           break;
       }
@@ -54,17 +69,34 @@ qx.Class.define("osparc.study.PricingUnitLicense", {
     _buildLayout: function(pricingUnit) {
       this.base(arguments, pricingUnit);
 
+      this.getChildControl("rental-period");
+
       // add price info
       const price = this.getChildControl("price");
       pricingUnit.bind("cost", price, "value", {
-        converter: v => qx.locale.Manager.tr("Credits") + ": " + v
+        converter: v => this.tr("Credits") + ": " + v
       });
 
       // add edit button
       this.getChildControl("edit-button");
 
       // add rent button
       this.getChildControl("rent-button");
-    }
+    },
+
+    __rentUnit: function() {
+      const expirationDate = osparc.study.PricingUnitLicense.getExpirationDate();
+      const msg = this.getUnitData().getName() + this.tr(" will be available until ") + osparc.utils.Utils.formatDate(expirationDate);
+      const confirmationWin = new osparc.ui.window.Confirmation(msg).set({
+        caption: this.tr("Rent"),
+        confirmText: this.tr("Rent"),
+      });
+      confirmationWin.open();
+      confirmationWin.addListener("close", () => {
+        if (confirmationWin.getConfirmed()) {
+          this.fireEvent("rentPricingUnit");
+        }
+      }, this);
+    },
   }
 });

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

@@ -229,8 +229,7 @@ qx.Class.define("osparc.vipMarket.VipMarket", {
                 }
                 licensedItemsStore.purchaseLicensedItem(licensedItemId, walletId, pricingPlanId, pricingUnitId, numberOfSeats)
                   .then(() => {
-                    const expirationDate = new Date();
-                    expirationDate.setMonth(expirationDate.getMonth() + 1); // rented for one month
+                    const expirationDate = osparc.study.PricingUnitLicense.getExpirationDate();
                     const purchaseData = {
                       expiresAt: expirationDate, // get this info from the response
                       numberOfSeats, // get this info from the response