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 @@ 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 @@ +