From 570281164f4c53265ca967a8397e1d0c0c5176fd Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Thu, 18 Sep 2025 13:58:48 +0200 Subject: [PATCH 1/6] BookACallIframe --- .../class/osparc/support/ConversationPage.js | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/support/ConversationPage.js b/services/static-webserver/client/source/class/osparc/support/ConversationPage.js index 27ab543ecb6b..d7790269bddb 100644 --- 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,12 +177,16 @@ 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")); + 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")); From 2670478a9e650054381a2a867db02650c255675c Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Thu, 18 Sep 2025 14:44:29 +0200 Subject: [PATCH 2/6] set background color --- .../class/osparc/wrapper/BookACallIframe.js | 70 +++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 services/static-webserver/client/source/class/osparc/wrapper/BookACallIframe.js diff --git a/services/static-webserver/client/source/class/osparc/wrapper/BookACallIframe.js b/services/static-webserver/client/source/class/osparc/wrapper/BookACallIframe.js new file mode 100644 index 000000000000..446560a6395b --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/wrapper/BookACallIframe.js @@ -0,0 +1,70 @@ +/* ************************************************************************ + + 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.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-primary': '"red"', + '--osparc-secondary': '"green"', + '--osparc-text': '"black"' + }; + iframe.contentWindow.postMessage({ + type: 'osparc-theme', + theme + }, "http://localhost:8000"); // targetOrigin = iframe origin + }, + } +}); From bb07919741b6ab3a5f9c3909678349f5ffb7abfd Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Thu, 18 Sep 2025 17:26:42 +0200 Subject: [PATCH 3/6] Finish BookACallIframe --- .../client/source/class/osparc/wrapper/BookACallIframe.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/wrapper/BookACallIframe.js b/services/static-webserver/client/source/class/osparc/wrapper/BookACallIframe.js index 446560a6395b..b090e095aa06 100644 --- a/services/static-webserver/client/source/class/osparc/wrapper/BookACallIframe.js +++ b/services/static-webserver/client/source/class/osparc/wrapper/BookACallIframe.js @@ -44,6 +44,9 @@ qx.Class.define("osparc.wrapper.BookACallIframe", { // 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); }, @@ -57,9 +60,8 @@ qx.Class.define("osparc.wrapper.BookACallIframe", { const iframe = this.getContentElement().getDomElement(); const theme = { '--bs-body-bg': colorManager.resolve("background-main-1"), - '--osparc-primary': '"red"', - '--osparc-secondary': '"green"', - '--osparc-text': '"black"' + '--osparc-text-color': colorManager.resolve("text"), + '--osparc-primary': colorManager.resolve("product-color"), }; iframe.contentWindow.postMessage({ type: 'osparc-theme', From ac741b685be09d64d029eec520c07564ef185af8 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Thu, 18 Sep 2025 17:36:25 +0200 Subject: [PATCH 4/6] minor --- .../client/source/class/osparc/wrapper/BookACallIframe.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/services/static-webserver/client/source/class/osparc/wrapper/BookACallIframe.js b/services/static-webserver/client/source/class/osparc/wrapper/BookACallIframe.js index b090e095aa06..fc9fa7511525 100644 --- a/services/static-webserver/client/source/class/osparc/wrapper/BookACallIframe.js +++ b/services/static-webserver/client/source/class/osparc/wrapper/BookACallIframe.js @@ -63,10 +63,11 @@ qx.Class.define("osparc.wrapper.BookACallIframe", { '--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 - }, "http://localhost:8000"); // targetOrigin = iframe origin + }, url.origin); // targetOrigin = iframe origin }, } }); From c16522853e443a463a49ac155c7235c22d05ec94 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Thu, 18 Sep 2025 18:00:33 +0200 Subject: [PATCH 5/6] 3rd button --- .../source/class/osparc/support/Conversation.js | 3 ++- .../class/osparc/support/ConversationPage.js | 4 ++++ .../class/osparc/support/ConversationsPage.js | 16 ++++++++++++++-- .../source/class/osparc/support/HomePage.js | 17 +++++++++++++++-- 4 files changed, 35 insertions(+), 5 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/support/Conversation.js b/services/static-webserver/client/source/class/osparc/support/Conversation.js index 1ead21b4e1b5..2bcb5035ceeb 100644 --- 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", @@ -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 index d7790269bddb..109534f488e1 100644 --- a/services/static-webserver/client/source/class/osparc/support/ConversationPage.js +++ b/services/static-webserver/client/source/class/osparc/support/ConversationPage.js @@ -185,9 +185,13 @@ qx.Class.define("osparc.support.ConversationPage", { 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 index e838b636f83e..80c4336db338 100644 --- 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 index 5a6dcc6440aa..258d4159eaf8 100644 --- 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": From 596e938bc29e973f9758263e88bcaeb8a098fb63 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Thu, 18 Sep 2025 18:01:24 +0200 Subject: [PATCH 6/6] minor --- .../client/source/class/osparc/support/Conversation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/static-webserver/client/source/class/osparc/support/Conversation.js b/services/static-webserver/client/source/class/osparc/support/Conversation.js index 2bcb5035ceeb..59f0bef60bd0 100644 --- a/services/static-webserver/client/source/class/osparc/support/Conversation.js +++ b/services/static-webserver/client/source/class/osparc/support/Conversation.js @@ -288,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 = {