[IMP] im_livechat, *: show livechat button after closing chat

Before this commit, the livechat button was not shown anymore after
closing the chat window. Since the livechat button is always present
from now on, the button is now draggable.

task-3358161

closes odoo/odoo#134513

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/im_livechat/static/src/embed/chat_window/chat_window_patch.js

@@ -30,6 +30,7 @@ patch(ChatWindow.prototype, {
             this.livechatState.hasFeedbackPanel = true;
             this.chatWindowService.show(this.props.chatWindow);
         } else {
+            this.thread?.delete();
             super.close();
         }
         this.livechatService.leaveSession();

addons/im_livechat/static/src/embed/chatbot/chatbot_service.js

@@ -107,11 +107,16 @@ export class ChatBotService {
     }
 
     /**
-     * Stop the chatbot script.
+     * Stop the chatbot script and reset its state.
      */
     stop() {
         this.clear();
         clearTimeout(this.nextStepTimeout);
+        this.currentStep = null;
+        this.isTyping = false;
+        if (this.livechatService.rule?.chatbot) {
+            this.chatbot = new Chatbot(this.livechatService.rule.chatbot);
+        }
     }
 
     /**
@@ -168,6 +173,9 @@ export class ChatBotService {
         this.isTyping = true;
         this.nextStepTimeout = browser.setTimeout(async () => {
             const { step, stepMessage } = await this._getNextStep();
+            if (!this.active) {
+                return;
+            }
             this.isTyping = false;
             if (!step && this.currentStep) {
                 this.currentStep.isLast = true;
@@ -369,11 +377,7 @@ export class ChatBotService {
     }
 
     get canRestart() {
-        return (
-            this.livechatService.state !== SESSION_STATE.CLOSED &&
-            this.completed &&
-            !this.currentStep?.operatorFound
-        );
+        return this.completed && !this.currentStep?.operatorFound;
     }
 
     get inputEnabled() {

addons/im_livechat/static/src/embed/core/livechat_service.js

@@ -24,7 +24,6 @@ export const SESSION_STATE = Object.freeze({
     NONE: "NONE",
     CREATED: "CREATED",
     PERSISTED: "PERSISTED",
-    CLOSED: "CLOSED",
 });
 
 export class LivechatService {
@@ -134,7 +133,7 @@ export class LivechatService {
     async leaveSession({ notifyServer = true } = {}) {
         const session = JSON.parse(this.cookie.current[this.SESSION_COOKIE] ?? "{}");
         this.cookie.deleteCookie(this.SESSION_COOKIE);
-        this.state = SESSION_STATE.CLOSED;
+        this.state = SESSION_STATE.NONE;
         if (!session?.uuid || !notifyServer) {
             return;
         }

addons/im_livechat/static/src/embed/core/thread_model_patch.js

@@ -33,7 +33,7 @@ patch(Thread, {
                 });
             }
             onChange(thread, ["state", "seen_message_id", "message_unread_counter"], () => {
-                if (![SESSION_STATE.CLOSED, SESSION_STATE.NONE].includes(livechatService.state)) {
+                if (livechatService.state !== SESSION_STATE.NONE) {
                     livechatService.updateSession({
                         state: thread.state,
                         seen_message_id: thread.seen_message_id,

addons/im_livechat/static/src/embed/core_ui/livechat_button.js

@@ -1,12 +1,34 @@
 /* @odoo-module */
 
-import { SESSION_STATE } from "@im_livechat/embed/core/livechat_service";
-
-import { Component, useState } from "@odoo/owl";
+import { Component, useRef, useState } from "@odoo/owl";
+import { makeDraggableHook } from "@web/core/utils/draggable_hook_builder";
 
 import { useService } from "@web/core/utils/hooks";
 import { debounce } from "@web/core/utils/timing";
 
+const LIVECHAT_BUTTON_SIZE = 56;
+
+const useMovable = makeDraggableHook({
+    name: "useMovable",
+    onWillStartDrag({ ctx, addCleanup, addStyle, getRect }) {
+        const { height } = getRect(ctx.current.element);
+        ctx.current.container = document.createElement("div");
+        addStyle(ctx.current.container, {
+            position: "fixed",
+            top: 0,
+            bottom: `${height}px`,
+            left: 0,
+            right: 0,
+        });
+        ctx.current.element.after(ctx.current.container);
+        addCleanup(() => ctx.current.container.remove());
+    },
+    onDrop({ ctx, getRect }) {
+        const { top, left } = getRect(ctx.current.element);
+        return { top, left };
+    },
+});
+
 export class LivechatButton extends Component {
     static template = "im_livechat.LivechatButton";
     static DEBOUNCE_DELAY = 500;
@@ -20,6 +42,21 @@ export class LivechatButton extends Component {
         this.onClick = debounce(this.onClick.bind(this), LivechatButton.DEBOUNCE_DELAY, {
             leading: true,
         });
+        this.ref = useRef("button");
+        this.size = LIVECHAT_BUTTON_SIZE;
+        this.position = useState({
+            left: `calc(97% - ${LIVECHAT_BUTTON_SIZE}px)`,
+            top: `calc(97% - ${LIVECHAT_BUTTON_SIZE}px)`,
+        });
+        useMovable({
+            cursor: "grabbing",
+            ref: this.ref,
+            elements: ".o-livechat-LivechatButton",
+            onDrop: ({ top, left }) => {
+                this.position.left = `${left}px`;
+                this.position.top = `${top}px`;
+            },
+        });
     }
 
     onClick() {
@@ -31,12 +68,7 @@ export class LivechatButton extends Component {
             this.livechatService.initialized &&
             this.livechatService.available &&
             !this.livechatService.shouldRestoreSession &&
-            this.livechatService.state !== SESSION_STATE.CLOSED &&
             this.store.ChatWindow.records.length === 0
         );
     }
-
-    get text() {
-        return this.livechatService.options.button_text;
-    }
 }

addons/im_livechat/static/src/embed/core_ui/livechat_button.xml

@@ -5,10 +5,11 @@
     <button
         part="openChatButton"
         t-if="isShown"
-        class="btn o-livechat-LivechatButton d-print-none position-fixed bottom-0 end-0 me-5 py-2 px-3 fw-bold rounded-top-2 rounded-bottom-0"
-        t-attf-style="color: {{livechatService.options.button_text_color}}; background-color: {{livechatService.options.button_background_color}};"
-        t-esc="text"
+        class="btn o-livechat-LivechatButton d-print-none position-fixed p-3 d-flex justify-content-center align-items-center shadow rounded-circle fa fa-commenting"
+        t-attf-style="color: {{livechatService.options.button_text_color}}; background-color: {{livechatService.options.button_background_color}}; font-size: 24px; width: {{size}}px; height: {{size}}px; min-width: 56px; top: {{ position.top }}; left: {{ position.left }};"
+        t-ref="button"
         t-on-click="onClick"
+        title="Drag to Move"
     />
 </t>
 

addons/im_livechat/static/tests/embed/livechat_button_tests.js

@@ -17,7 +17,7 @@ QUnit.test("open/close temporary channel", async () => {
     await contains(".o-livechat-LivechatButton", { count: 0 });
     await click("[title='Close Chat Window']");
     await contains(".o-mail-ChatWindow", { count: 0 });
-    await contains(".o-livechat-LivechatButton", { count: 0 });
+    await contains(".o-livechat-LivechatButton", { count: 1 });
 });
 
 QUnit.test("open/close persisted channel", async () => {
@@ -34,7 +34,7 @@ QUnit.test("open/close persisted channel", async () => {
     });
     await click("[title='Close Chat Window']");
     await contains(".o-mail-ChatWindow", { count: 0 });
-    await contains(".o-livechat-LivechatButton", { count: 0 });
+    await contains(".o-livechat-LivechatButton", { count: 1 });
 });
 
 QUnit.test("livechat not available", async () => {

addons/im_livechat/views/im_livechat_channel_views.xml

@@ -134,7 +134,6 @@
                             <page string="Options" name="options">
                                 <group>
                                     <group string="Livechat Button">
-                                        <field name="button_text"/>
                                         <label for="button_background_color" string="Livechat Button Color" />
                                         <div class="o_livechat_layout_colors d-flex align-items-center align-middle">
                                             <field name="button_background_color" widget="color" class="mb-4 w-auto o_im_livechat_field_widget_color"/>

addons/website_livechat/static/src/embed/livechat_button_patch.js

@@ -1,11 +0,0 @@
-/* @odoo-module */
-
-import { LivechatButton } from "@im_livechat/embed/core_ui/livechat_button";
-
-import { patch } from "@web/core/utils/patch";
-
-patch(LivechatButton.prototype, {
-    get text() {
-        return "";
-    },
-});

addons/website_livechat/static/src/embed/livechat_button_patch.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates xml:space="preserve">
-    <t t-inherit="im_livechat.LivechatButton" t-inherit-mode="extension">
-        <xpath expr="//button[hasclass('o-livechat-LivechatButton')]" position="attributes">
-            <attribute name="class" remove="rounded-top-2 rounded-bottom-0 pt-3 pb-2 px-3" add="d-flex justify-content-center align-items-center shadow rounded-circle mb-5 fa fa-commenting" separator=" "/>
-            <attribute name="t-attf-style" add="font-size: 24px; width: 56px; height: 56px; min-width: 56px;"  separator=" "/>
-        </xpath>
-    </t>
-</templates>