✨ [Frontend] Support: Book a call (#8297)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/conversation/AddMessage.js

@@ -175,7 +175,7 @@ qx.Class.define("osparc.conversation.AddMessage", {
     addComment: function() {
       const conversationId = this.getConversationId();
       if (conversationId) {
-        this.__postMessage();
+        return this.__postMessage();
       } else {
         const studyData = this.getStudyData();
         let promise = null;
@@ -191,10 +191,10 @@ qx.Class.define("osparc.conversation.AddMessage", {
           }
           promise = osparc.store.ConversationsSupport.getInstance().postConversation(extraContext);
         }
-        promise
+        return promise
           .then(data => {
             this.setConversationId(data["conversationId"]);
-            this.__postMessage();
+            return this.__postMessage();
           });
       }
     },
@@ -211,12 +211,14 @@ qx.Class.define("osparc.conversation.AddMessage", {
         } else {
           promise = osparc.store.ConversationsSupport.getInstance().postMessage(conversationId, content);
         }
-        promise
+        return promise
           .then(data => {
             this.fireDataEvent("messageAdded", data);
             commentField.getChildControl("text-area").setValue("");
+            return data;
           });
       }
+      return Promise.reject();
     },
 
     __editComment: function() {

services/static-webserver/client/source/class/osparc/data/Resources.js

@@ -1515,7 +1515,7 @@ qx.Class.define("osparc.data.Resources", {
             method: "GET",
             url: statics.API + "/conversations/{conversationId}"
           },
-          renameConversation: {
+          patchConversation: {
             method: "PATCH",
             url: statics.API + "/conversations/{conversationId}"
           },

services/static-webserver/client/source/class/osparc/data/model/Conversation.js

@@ -246,6 +246,13 @@ qx.Class.define("osparc.data.model.Conversation", {
         });
     },
 
+    patchExtraContext: function(extraContext) {
+      osparc.store.ConversationsSupport.getInstance().patchExtraContext(this.getConversationId(), extraContext)
+        .then(() => {
+          this.setExtraContext(extraContext);
+        });
+    },
+
     addMessage: function(message) {
       if (message) {
         const found = this.__messages.find(msg => msg["messageId"] === message["messageId"]);
@@ -284,6 +291,27 @@ qx.Class.define("osparc.data.model.Conversation", {
         return this.getExtraContext()["projectId"];
       }
       return null;
-    }
+    },
+
+    getAppointment: function() {
+      if (this.getExtraContext() && "appointment" in this.getExtraContext()) {
+        return this.getExtraContext()["appointment"];
+      }
+      return null;
+    },
+
+    setAppointment: function(appointment) {
+      const extraContext = this.getExtraContext() || {};
+      extraContext["appointment"] = appointment ? appointment.toISOString() : null;
+      // OM: Supporters are not allowed to patch the conversation metadata yet
+      const backendAllowsPatch = osparc.store.Products.getInstance().amIASupportUser() ? false : true;
+      if (backendAllowsPatch) {
+        return osparc.store.ConversationsSupport.getInstance().patchExtraContext(this.getConversationId(), extraContext)
+          .then(() => {
+            this.setExtraContext(Object.assign({}, extraContext));
+        });
+      }
+      return Promise.resolve(this.setExtraContext(Object.assign({}, extraContext)));
+    },
   },
 });

services/static-webserver/client/source/class/osparc/store/ConversationsSupport.js

@@ -124,7 +124,19 @@ qx.Class.define("osparc.store.ConversationsSupport", {
           name,
         }
       };
-      return osparc.data.Resources.fetch("conversationsSupport", "renameConversation", params);
+      return osparc.data.Resources.fetch("conversationsSupport", "patchConversation", params);
+    },
+
+    patchExtraContext: function(conversationId, extraContext) {
+      const params = {
+        url: {
+          conversationId,
+        },
+        data: {
+          extraContext,
+        }
+      };
+      return osparc.data.Resources.fetch("conversationsSupport", "patchConversation", params);
     },
 
     fetchLastMessage: function(conversationId) {

services/static-webserver/client/source/class/osparc/support/ConversationPage.js

@@ -84,14 +84,8 @@ qx.Class.define("osparc.support.ConversationPage", {
             });
           this.getChildControl("conversation-header-center-layout").addAt(control, 0);
           break;
-        case "conversation-extra-content":
-          control = new qx.ui.basic.Label().set({
-            font: "text-12",
-            textColor: "text-disabled",
-            rich: true,
-            allowGrowX: true,
-            selectable: true,
-          });
+        case "conversation-extra-layout":
+          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(2));
           this.getChildControl("conversation-header-center-layout").addAt(control, 1);
           break;
         case "open-project-button":
@@ -105,6 +99,19 @@ qx.Class.define("osparc.support.ConversationPage", {
           control.addListener("execute", () => this.__openProjectDetails());
           this.getChildControl("conversation-header-layout").addAt(control, 2);
           break;
+        case "set-appointment-button": {
+          control = new qx.ui.form.Button().set({
+            maxWidth: 26,
+            maxHeight: 24,
+            padding: [0, 6],
+            alignX: "center",
+            alignY: "middle",
+            icon: "@FontAwesome5Solid/clock/12",
+          });
+          control.addListener("execute", () => this.__openAppointmentDetails());
+          this.getChildControl("conversation-header-layout").addAt(control, 3);
+          break;
+        }
         case "conversation-options": {
           control = new qx.ui.form.MenuButton().set({
             maxWidth: 24,
@@ -123,7 +130,7 @@ qx.Class.define("osparc.support.ConversationPage", {
           });
           renameButton.addListener("execute", () => this.__renameConversation());
           menu.add(renameButton);
-          this.getChildControl("conversation-header-layout").addAt(control, 3);
+          this.getChildControl("conversation-header-layout").addAt(control, 4);
           break;
         }
         case "conversation-content":
@@ -146,28 +153,65 @@ qx.Class.define("osparc.support.ConversationPage", {
         title.setValue(this.tr("Ask a Question"));
       }
 
-      const extraContextLabel = this.getChildControl("conversation-extra-content");
+      const extraContextLayout = this.getChildControl("conversation-extra-layout");
       const amISupporter = osparc.store.Products.getInstance().amIASupportUser();
-      if (conversation && amISupporter) {
-        const extraContext = conversation.getExtraContext();
-        if (extraContext && Object.keys(extraContext).length) {
-          let extraContextText = `Ticket ID: ${conversation.getConversationId()}`;
-          const contextProjectId = conversation.getContextProjectId();
-          if (contextProjectId) {
-            extraContextText += `<br>Project ID: ${contextProjectId}`;
+      if (conversation) {
+        const createExtraContextLabel = text => {
+          return new qx.ui.basic.Label(text).set({
+            font: "text-12",
+            textColor: "text-disabled",
+            rich: true,
+            allowGrowX: true,
+            selectable: true,
+          });
+        };
+        const updateExtraContext = () => {
+          extraContextLayout.removeAll();
+          const extraContext = conversation.getExtraContext();
+          if (extraContext && Object.keys(extraContext).length) {
+            const ticketIdLabel = createExtraContextLabel(`Ticket ID: ${conversation.getConversationId()}`);
+            extraContextLayout.add(ticketIdLabel);
+            const contextProjectId = conversation.getContextProjectId();
+            if (contextProjectId && amISupporter) {
+              const projectIdLabel = createExtraContextLabel(`Project ID: ${contextProjectId}`);
+              extraContextLayout.add(projectIdLabel);
+            }
+            const appointment = conversation.getAppointment();
+            if (appointment) {
+              const appointmentLabel = createExtraContextLabel();
+              let appointmentText = "Appointment: ";
+              if (appointment === "requested") {
+                // still pending
+                appointmentText += appointment;
+              } else {
+                // already set
+                appointmentText += osparc.utils.Utils.formatDateAndTime(new Date(appointment));
+                appointmentLabel.set({
+                  cursor: "pointer",
+                  toolTipText: osparc.utils.Utils.formatDateWithCityAndTZ(new Date(appointment)),
+                });
+              }
+              appointmentLabel.setValue(appointmentText);
+              extraContextLayout.add(appointmentLabel);
+            }
           }
-          extraContextLabel.setValue(extraContextText);
-        }
-        extraContextLabel.show();
-      } else {
-        extraContextLabel.exclude();
+        };
+        updateExtraContext();
+        conversation.addListener("changeExtraContext", () => updateExtraContext(), this);
       }
 
-      const openButton = this.getChildControl("open-project-button");
+      const openProjectButton = this.getChildControl("open-project-button");
       if (conversation && conversation.getContextProjectId()) {
-        openButton.show();
+        openProjectButton.show();
       } else {
-        openButton.exclude();
+        openProjectButton.exclude();
+      }
+
+      const setAppointmentButton = this.getChildControl("set-appointment-button");
+      if (conversation && conversation.getAppointment() && amISupporter) {
+        setAppointmentButton.show();
+      } else {
+        setAppointmentButton.exclude();
       }
 
       const options = this.getChildControl("conversation-options");
@@ -193,6 +237,17 @@ qx.Class.define("osparc.support.ConversationPage", {
       }
     },
 
+    __openAppointmentDetails: function() {
+      const win = new osparc.widget.DateTimeChooser();
+      win.addListener("dateChanged", e => {
+        const newValue = e.getData()["newValue"];
+        this.getConversation().setAppointment(newValue)
+          .catch(err => console.error(err));
+        win.close();
+      }, this);
+      win.open();
+    },
+
     __renameConversation: function() {
       let oldName = this.getConversation().getName();
       if (oldName === "null") {
@@ -207,5 +262,19 @@ qx.Class.define("osparc.support.ConversationPage", {
       renamer.center();
       renamer.open();
     },
+
+    __getAddMessageField: function() {
+      return this.getChildControl("conversation-content") &&
+        this.getChildControl("conversation-content").getChildControl("add-message");
+    },
+
+    postMessage: function(message) {
+      const addMessage = this.__getAddMessageField();
+      if (addMessage && addMessage.getChildControl("comment-field")) {
+        addMessage.getChildControl("comment-field").setText(message);
+        return addMessage.addComment();
+      }
+      return Promise.reject();
+    },
   }
 });

services/static-webserver/client/source/class/osparc/support/SupportCenter.js

@@ -38,10 +38,12 @@ qx.Class.define("osparc.support.SupportCenter", {
     this.getChildControl("conversations-intro-text");
     this.getChildControl("conversations-list");
     this.getChildControl("ask-a-question-button");
+    this.getChildControl("book-a-call-button");
   },
 
   statics: {
     WINDOW_WIDTH: 430,
+    REQUEST_CALL_MESSAGE: "Dear Support,\nI would like to make an appointment for a support call.",
 
     getMaxHeight: function() {
       // height: max 80% of screen, or 600px
@@ -112,15 +114,29 @@ qx.Class.define("osparc.support.SupportCenter", {
           });
           break;
         }
+        case "buttons-layout":
+          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({
+            alignX: "center",
+          }));
+          this.getChildControl("conversations-layout").add(control);
+          break;
         case "ask-a-question-button":
           control = new osparc.ui.form.FetchButton(this.tr("Ask a Question")).set({
             appearance: "strong-button",
             allowGrowX: false,
             center: true,
-            alignX: "center",
           });
           control.addListener("execute", () => this.openConversation(null), this);
-          this.getChildControl("conversations-layout").add(control);
+          this.getChildControl("buttons-layout").add(control);
+          break;
+        case "book-a-call-button":
+          control = new osparc.ui.form.FetchButton(this.tr("Book a Call")).set({
+            appearance: "strong-button",
+            allowGrowX: false,
+            center: true,
+          });
+          control.addListener("execute", () => this.createConversationBookCall(null), this);
+          this.getChildControl("buttons-layout").add(control);
           break;
         case "conversation-page":
           control = new osparc.support.ConversationPage();
@@ -152,5 +168,30 @@ qx.Class.define("osparc.support.SupportCenter", {
         this.__showConversation();
       }
     },
+
+    createConversationBookCall: function() {
+      const conversationPage = this.getChildControl("conversation-page");
+      conversationPage.setConversation(null);
+      this.__showConversation();
+      conversationPage.postMessage(osparc.support.SupportCenter.REQUEST_CALL_MESSAGE)
+        .then(data => {
+          const conversationId = data["conversationId"];
+          osparc.store.ConversationsSupport.getInstance().getConversation(conversationId)
+            .then(conversation => {
+              // update conversation name and patch extra_context
+              conversation.renameConversation("Book a call");
+              conversation.patchExtraContext({
+                ...conversation.getExtraContext(),
+                "appointment": "requested"
+              });
+              // This should be an automatic response in the chat
+              const msg = this.tr("Your request has been sent.<br>Our support team will get back to you.");
+              osparc.FlashMessenger.logAs(msg, "INFO");
+            });
+        })
+        .catch(err => {
+          console.error("Error sending request call message", err);
+        });
+    },
   }
 });