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