[FIX] im_livechat: restore live chat button notification

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>

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();
     }
 

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);
+    }
+}

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>

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]
  */

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");
+});

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"/>