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..59f0bef60bd0 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", @@ -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 index 27ab543ecb6b..109534f488e1 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,6 +177,8 @@ 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")); @@ -174,6 +186,12 @@ qx.Class.define("osparc.support.ConversationPage", { 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": 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..fc9fa7511525 --- /dev/null +++ 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 + }, + } +});