⚗️ [Frontend] Integrate the 3rd party Appointment Booking tool (#8391)

odeimaiz · web-flow · commit 5164d4674353 · 2025-09-19T09:31:45.000+02:00
diff --git a/services/static-webserver/client/source/class/osparc/support/Conversation.js b/services/static-webserver/client/source/class/osparc/support/Conversation.js
@@ -58,6 +58,7 @@ qx.Class.define("osparc.support.Conversation", {
     SYSTEM_MESSAGE_TYPE: {
       ASK_A_QUESTION: "askAQuestion",
       BOOK_A_CALL: "bookACall",
+      BOOK_A_CALL_3RD: "bookACall3rd",
       ESCALATE_TO_SUPPORT: "escalateToSupport",
       REPORT_OEC: "reportOEC",
       FOLLOW_UP: "followUp",
@@ -287,7 +288,7 @@ qx.Class.define("osparc.support.Conversation", {
     },
 
     addSystemMessage: function(type) {
-      type = type || "askAQuestion";
+      type = type || osparc.support.Conversation.SYSTEM_MESSAGE_TYPE.ASK_A_QUESTION;
 
       const now = new Date();
       const systemMessage = {
@@ -317,8 +318,8 @@ qx.Class.define("osparc.support.Conversation", {
       if (msg) {
         systemMessage["content"] = msg;
         systemMessage["systemMessageType"] = type;
+        this.addMessage(systemMessage);
       }
-      this.addMessage(systemMessage);
     },
 
     addMessage: function(message) {
diff --git a/services/static-webserver/client/source/class/osparc/support/ConversationPage.js b/services/static-webserver/client/source/class/osparc/support/ConversationPage.js
@@ -148,13 +148,23 @@ qx.Class.define("osparc.support.ConversationPage", {
           this.getChildControl("buttons-layout").addAt(control, 4);
           break;
         }
+        case "main-stack":
+          control = new qx.ui.container.Stack();
+          this._add(control, {
+            flex: 1
+          });
+          break;
+        case "conversation-container":
+          control = new qx.ui.container.Scroll();
+          this.getChildControl("main-stack").add(control);
+          break;
         case "conversation-content":
           control = new osparc.support.Conversation();
-          const scroll = new qx.ui.container.Scroll();
-          scroll.add(control);
-          this._add(scroll, {
-            flex: 1,
-          });
+          this.getChildControl("conversation-container").add(control);
+          break;
+        case "book-a-call-iframe":
+          control = new osparc.wrapper.BookACallIframe();
+          this.getChildControl("main-stack").add(control);
           break;
       }
       return control || this.base(arguments, id);
@@ -167,13 +177,21 @@ qx.Class.define("osparc.support.ConversationPage", {
       const title = this.getChildControl("conversation-title");
       const conversationContent = this.getChildControl("conversation-content");
       conversationContent.clearAllMessages();
+      const conversationContainer = this.getChildControl("conversation-container");
+      this.getChildControl("main-stack").setSelection([conversationContainer]);
       switch (type) {
         case osparc.support.Conversation.SYSTEM_MESSAGE_TYPE.ASK_A_QUESTION:
           title.setValue(this.tr("Ask a Question"));
           break;
         case osparc.support.Conversation.SYSTEM_MESSAGE_TYPE.BOOK_A_CALL:
           title.setValue(this.tr("Book a Call"));
           break;
+        case osparc.support.Conversation.SYSTEM_MESSAGE_TYPE.BOOK_A_CALL_3RD: {
+          title.setValue(this.tr("Book a Call 3rd"));
+          const bookACallIframe = this.getChildControl("book-a-call-iframe");
+          this.getChildControl("main-stack").setSelection([bookACallIframe]);
+          break;
+        }
         case osparc.support.Conversation.SYSTEM_MESSAGE_TYPE.ESCALATE_TO_SUPPORT:
           title.setValue(this.tr("Ask a Question"));
           break;
diff --git a/services/static-webserver/client/source/class/osparc/support/ConversationsPage.js b/services/static-webserver/client/source/class/osparc/support/ConversationsPage.js
@@ -27,6 +27,9 @@ qx.Class.define("osparc.support.ConversationsPage", {
     this.getChildControl("conversations-list");
     this.getChildControl("ask-a-question-button");
     this.getChildControl("book-a-call-button");
+    if (osparc.utils.Utils.isDevelopmentPlatform()) {
+      this.getChildControl("book-a-call-button-3rd");
+    }
   },
 
   events: {
@@ -63,7 +66,7 @@ qx.Class.define("osparc.support.ConversationsPage", {
             allowGrowX: false,
             center: true,
           });
-          control.addListener("execute", () => this.fireDataEvent("createConversation", "askAQuestion"), this);
+          control.addListener("execute", () => this.fireDataEvent("createConversation", osparc.support.Conversation.SYSTEM_MESSAGE_TYPE.ASK_A_QUESTION), this);
           this.getChildControl("buttons-layout").add(control);
           break;
         case "book-a-call-button":
@@ -72,7 +75,16 @@ qx.Class.define("osparc.support.ConversationsPage", {
             allowGrowX: false,
             center: true,
           });
-          control.addListener("execute", () => this.fireDataEvent("createConversation", "bookACall"), this);
+          control.addListener("execute", () => this.fireDataEvent("createConversation", osparc.support.Conversation.SYSTEM_MESSAGE_TYPE.BOOK_A_CALL), this);
+          this.getChildControl("buttons-layout").add(control);
+          break;
+        case "book-a-call-button-3rd":
+          control = new qx.ui.form.Button(this.tr("Book a Call 3rd"), "@FontAwesome5Solid/phone/14").set({
+            appearance: "strong-button",
+            allowGrowX: false,
+            center: true,
+          });
+          control.addListener("execute", () => this.fireDataEvent("createConversation", osparc.support.Conversation.SYSTEM_MESSAGE_TYPE.BOOK_A_CALL_3RD), this);
           this.getChildControl("buttons-layout").add(control);
           break;
       }
diff --git a/services/static-webserver/client/source/class/osparc/support/HomePage.js b/services/static-webserver/client/source/class/osparc/support/HomePage.js
@@ -31,6 +31,9 @@ qx.Class.define("osparc.support.HomePage", {
     if (osparc.store.Groups.getInstance().isSupportEnabled()) {
       this.getChildControl("ask-a-question-button");
       this.getChildControl("book-a-call-button");
+      if (osparc.utils.Utils.isDevelopmentPlatform()) {
+        this.getChildControl("book-a-call-button-3rd");
+      }
     }
     this.__populateButtons();
   },
@@ -82,7 +85,7 @@ qx.Class.define("osparc.support.HomePage", {
             center: true,
             width: 183,
           });
-          control.addListener("execute", () => this.fireDataEvent("createConversation", "askAQuestion"));
+          control.addListener("execute", () => this.fireDataEvent("createConversation", osparc.support.Conversation.SYSTEM_MESSAGE_TYPE.ASK_A_QUESTION));
           this.getChildControl("conversation-buttons-layout").add(control, { flex: 1 });
           break;
         case "book-a-call-button":
@@ -92,7 +95,17 @@ qx.Class.define("osparc.support.HomePage", {
             center: true,
             width: 183,
           });
-          control.addListener("execute", () => this.fireDataEvent("createConversation", "bookACall"));
+          control.addListener("execute", () => this.fireDataEvent("createConversation", osparc.support.Conversation.SYSTEM_MESSAGE_TYPE.BOOK_A_CALL));
+          this.getChildControl("conversation-buttons-layout").add(control, { flex: 1 });
+          break;
+        case "book-a-call-button-3rd":
+          control = new qx.ui.form.Button(this.tr("Book a Call 3rd"), "@FontAwesome5Solid/phone/16").set({
+            gap: 8,
+            appearance: "strong-button",
+            center: true,
+            width: 183,
+          });
+          control.addListener("execute", () => this.fireDataEvent("createConversation", osparc.support.Conversation.SYSTEM_MESSAGE_TYPE.BOOK_A_CALL_3RD));
           this.getChildControl("conversation-buttons-layout").add(control, { flex: 1 });
           break;
         case "learning-box":
diff --git a/services/static-webserver/client/source/class/osparc/wrapper/BookACallIframe.js b/services/static-webserver/client/source/class/osparc/wrapper/BookACallIframe.js
@@ -0,0 +1,73 @@
+/* ************************************************************************
+
+   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.wrapper.BookACallIframe", {
+  extend: qx.ui.embed.Iframe,
+
+  construct: function() {
+    // Build base URL
+    let url = osparc.wrapper.BookACallIframe.SERVICE_URL;
+
+    const params = [];
+    const myAuthData = osparc.auth.Data.getInstance();
+    const firstName = myAuthData.getFirstName();
+    if (firstName) {
+      params.push("first_name=" + encodeURIComponent(firstName));
+    }
+    const lastName = myAuthData.getLastName();
+    if (lastName) {
+      params.push("last_name=" + encodeURIComponent(lastName));
+    }
+    const email = myAuthData.getEmail();
+    if (email) {
+      params.push("email=" + encodeURIComponent(email));
+    }
+
+    if (params.length > 0) {
+      url += "?" + params.join("&");
+    }
+
+    // Call parent constructor
+    this.base(arguments, url);
+
+    this.setAppearance("iframe-no-border");
+
+    // not only once, every time there is a load (e.g. when navigating in the iframe)
+    this.addListener("load", () => this.__updateStyles(), this);
+  },
+
+  statics: {
+    SERVICE_URL: "http://localhost:8000/booking",
+  },
+
+  members: {
+    __updateStyles: function() {
+      const colorManager = qx.theme.manager.Color.getInstance();
+      const iframe = this.getContentElement().getDomElement();
+      const theme = {
+        '--bs-body-bg': colorManager.resolve("background-main-1"),
+        '--osparc-text-color': colorManager.resolve("text"),
+        '--osparc-primary': colorManager.resolve("product-color"),
+      };
+      const url = new URL(this.self().SERVICE_URL);
+      iframe.contentWindow.postMessage({
+        type: 'osparc-theme',
+        theme
+      }, url.origin); // targetOrigin = iframe origin
+    },
+  }
+});
