From 2b181aa97a29b0e3159b00fe0428b36cb9a8820f Mon Sep 17 00:00:00 2001
From: tsm-odoo <tsm@odoo.com>
Date: Tue, 17 Oct 2023 08:10:20 +0000
Subject: [PATCH] [FIX] im_livechat: restore live chat button notification
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since [1], the notification option for the live chat button does not
work. This commit restores it.

[1]: odoo#122834
task-3555864

closes odoo/odoo#138904

X-original-commit: 2f8683d22a781fce6cc5c1c39b0018f1b531fa8a
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../src/embed/common/livechat_button.js       |  6 ++++
 .../src/embed/common/livechat_button.scss     | 30 +++++++++++++++++++
 .../src/embed/common/livechat_button.xml      | 11 +++++--
 .../src/embed/common/livechat_service.js      |  2 +-
 .../tests/embed/livechat_button_tests.js      | 16 ++++++++++
 .../views/im_livechat_channel_views.xml       |  1 +
 6 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/addons/im_livechat/static/src/embed/common/livechat_button.js b/addons/im_livechat/static/src/embed/common/livechat_button.js
index dbe0a5c92ae..b3f7ef0f927 100644
--- a/addons/im_livechat/static/src/embed/common/livechat_button.js
+++ b/addons/im_livechat/static/src/embed/common/livechat_button.js
@@ -48,6 +48,11 @@ export class LivechatButton extends Component {
             left: `calc(97% - ${LIVECHAT_BUTTON_SIZE}px)`,
             top: `calc(97% - ${LIVECHAT_BUTTON_SIZE}px)`,
         });
+        this.state = useState({
+            animateNotification: !(
+                this.livechatService.thread || this.livechatService.shouldRestoreSession
+            ),
+        });
         useMovable({
             cursor: "grabbing",
             ref: this.ref,
@@ -60,6 +65,7 @@ export class LivechatButton extends Component {
     }
 
     onClick() {
+        this.state.animateNotification = false;
         this.threadService.openChat();
     }
 
diff --git a/addons/im_livechat/static/src/embed/common/livechat_button.scss b/addons/im_livechat/static/src/embed/common/livechat_button.scss
index c23fa37dfc0..17a8b6b9a24 100644
--- a/addons/im_livechat/static/src/embed/common/livechat_button.scss
+++ b/addons/im_livechat/static/src/embed/common/livechat_button.scss
@@ -8,3 +8,33 @@
         filter: brightness(90%);
     }
 }
+
+.o-livechat-LivechatButton-notification {
+    transform-origin: 100% 100%;
+    bottom: 2.5em;
+    right: 4.5em;
+}
+
+.o-livechat-LivechatButton-animate {
+    animation: o-livechat-LivechatButton-notification-animation 0.6s ease-in-out forwards;
+}
+
+@keyframes o-livechat-LivechatButton-notification-animation {
+    0% {
+        opacity: 0;
+        transform: scale(0);
+    }
+    20% {
+        opacity: 0;
+        transform: scale(0.5);
+    }
+    50% {
+        opacity: 1;
+    }
+    75% {
+        transform: scale(1.05);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
diff --git a/addons/im_livechat/static/src/embed/common/livechat_button.xml b/addons/im_livechat/static/src/embed/common/livechat_button.xml
index ba6e52c7c50..a19acdd59a0 100644
--- a/addons/im_livechat/static/src/embed/common/livechat_button.xml
+++ b/addons/im_livechat/static/src/embed/common/livechat_button.xml
@@ -5,12 +5,17 @@
     <button
         part="openChatButton"
         t-if="isShown"
-        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 }};"
+        class="btn o-livechat-LivechatButton d-print-none position-fixed p-3 d-flex justify-content-center align-items-center shadow rounded-circle "
+        t-attf-style="color: {{livechatService.options.button_text_color}}; background-color: {{livechatService.options.button_background_color}}; 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"
-    />
+    >
+        <i class="fa fa-commenting" style="font-size: 24px;"/>
+        <div t-if="livechatService.rule?.action === 'display_button_and_text'" class="o-livechat-LivechatButton-notification text-nowrap position-absolute bg-100 py-2 px-3 rounded" style="max-width: 75vw;" t-att-class="{'o-livechat-LivechatButton-animate': state.animateNotification}">
+            <p class="m-0 text-dark text-truncate" t-esc="livechatService.options.button_text"/>
+        </div>
+    </button>
 </t>
 
 </templates>
diff --git a/addons/im_livechat/static/src/embed/common/livechat_service.js b/addons/im_livechat/static/src/embed/common/livechat_service.js
index 7c8de6e86fa..d62abad9ae4 100644
--- a/addons/im_livechat/static/src/embed/common/livechat_service.js
+++ b/addons/im_livechat/static/src/embed/common/livechat_service.js
@@ -12,7 +12,7 @@ import { session } from "@web/session";
 
 /**
  * @typedef LivechatRule
- * @property {"auto_popup"|undefined} [action]
+ * @property {"auto_popup"|"display_button_and_text"|undefined} [action]
  * @property {number?} [auto_popup_timer]
  * @property {import("@im_livechat/embed/common/chatbot/chatbot_model").IChatbot} [chatbot]
  */
diff --git a/addons/im_livechat/static/tests/embed/livechat_button_tests.js b/addons/im_livechat/static/tests/embed/livechat_button_tests.js
index d8f8d360d38..aabd62b81e1 100644
--- a/addons/im_livechat/static/tests/embed/livechat_button_tests.js
+++ b/addons/im_livechat/static/tests/embed/livechat_button_tests.js
@@ -47,3 +47,19 @@ QUnit.test("livechat not available", async () => {
     await contains(".o-mail-ChatWindowContainer");
     await contains(".o-livechat-LivechatButton", { count: 0 });
 });
+
+QUnit.test("clicking on notification opens the chat", async () => {
+    await startServer();
+    await loadDefaultConfig();
+    await start({
+        mockRPC(route) {
+            if (route === "/im_livechat/init") {
+                return { rule: { action: "display_button_and_text" } };
+            }
+        },
+    });
+    await click(".o-livechat-LivechatButton-notification", {
+        text: "Have a Question? Chat with us.",
+    });
+    await contains(".o-mail-ChatWindow");
+});
diff --git a/addons/im_livechat/views/im_livechat_channel_views.xml b/addons/im_livechat/views/im_livechat_channel_views.xml
index bcf668f1448..a326ac1a283 100644
--- a/addons/im_livechat/views/im_livechat_channel_views.xml
+++ b/addons/im_livechat/views/im_livechat_channel_views.xml
@@ -134,6 +134,7 @@
                             <page string="Options" name="options">
                                 <group>
                                     <group string="Livechat Button">
+                                        <field name="button_text" string="Notification text" help="Text to display on the notification"/>
                                         <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"/>