From 6c8c87aa94b10c3cd7bf9d70ac0942401ac6f97b Mon Sep 17 00:00:00 2001
From: Joseph Caburnay <jcb@odoo.com>
Date: Fri, 12 Jun 2020 09:05:57 +0000
Subject: [PATCH] [IMP] point_of_sale: simple toast notification

---
 addons/point_of_sale/__manifest__.py          |  1 +
 addons/point_of_sale/static/src/css/pos.css   | 19 +++++++++++++++
 addons/point_of_sale/static/src/js/Chrome.js  | 16 +++++++++++++
 .../static/src/js/Notification.js             | 24 +++++++++++++++++++
 .../static/src/js/PosComponent.js             |  6 +++++
 .../point_of_sale/static/src/xml/Chrome.xml   |  2 ++
 .../static/src/xml/Notification.xml           | 12 ++++++++++
 .../point_of_sale/views/pos_assets_common.xml |  1 +
 8 files changed, 81 insertions(+)
 create mode 100644 addons/point_of_sale/static/src/js/Notification.js
 create mode 100644 addons/point_of_sale/static/src/xml/Notification.xml

diff --git a/addons/point_of_sale/__manifest__.py b/addons/point_of_sale/__manifest__.py
index f2bec5b0b81..938ebae549b 100644
--- a/addons/point_of_sale/__manifest__.py
+++ b/addons/point_of_sale/__manifest__.py
@@ -119,6 +119,7 @@
         'static/src/xml/Screens/ProductScreen/ControlButtons/SetFiscalPositionButton.xml',
         'static/src/xml/ChromeWidgets/ClientScreenButton.xml',
         'static/src/xml/Misc/MobileOrderWidget.xml',
+        'static/src/xml/Notification.xml',
     ],
     'website': 'https://www.odoo.com/page/point-of-sale-shop',
 }
diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index a4162c890ba..cdec8fdb151 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -3574,3 +3574,22 @@ td {
     font-weight: 350;
     width: 95%;
 }
+
+/**
+ * Notification
+ */
+
+ .pos .notification {
+    min-width: 250px;
+    max-width: 500px;
+    background-color: #333333AA;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+    padding: 16px;
+    position: fixed;
+    z-index: 1;
+    left: 50%;
+    bottom: 5%;
+    font-size: 17px;
+}
diff --git a/addons/point_of_sale/static/src/js/Chrome.js b/addons/point_of_sale/static/src/js/Chrome.js
index ba72e33e00e..d400e9ba18c 100644
--- a/addons/point_of_sale/static/src/js/Chrome.js
+++ b/addons/point_of_sale/static/src/js/Chrome.js
@@ -34,6 +34,8 @@ odoo.define('point_of_sale.Chrome', function(require) {
             useListener('loading-skip-callback', () => this._loadingSkipCallback());
             useListener('play-sound', this._onPlaySound);
             useListener('set-sync-status', this._onSetSyncStatus);
+            useListener('show-notification', this._onShowNotification);
+            useListener('close-notification', this._onCloseNotification);
             NumberBuffer.activate();
 
             this.chromeContext = useContext(contexts.chrome);
@@ -43,6 +45,11 @@ odoo.define('point_of_sale.Chrome', function(require) {
                 debugWidgetIsShown: true,
                 hasBigScrollBars: false,
                 sound: { src: null },
+                notification: {
+                    isShown: false,
+                    message: '',
+                    duration: 2000,
+                }
             });
 
             this.loading = useState({
@@ -296,6 +303,15 @@ odoo.define('point_of_sale.Chrome', function(require) {
         _onSetSyncStatus({ detail: { status, pending }}) {
             this.env.pos.set('synch', { status, pending });
         }
+        _onShowNotification({ detail: { message, duration } }) {
+            this.state.notification.isShown = true;
+            this.state.notification.message = message;
+            this.state.notification.duration = duration;
+        }
+        _onCloseNotification() {
+            this.state.notification.isShown = false;
+            this.state.notification.message = '';
+        }
 
         // TO PASS AS PARAMETERS //
 
diff --git a/addons/point_of_sale/static/src/js/Notification.js b/addons/point_of_sale/static/src/js/Notification.js
new file mode 100644
index 00000000000..0c99e761df0
--- /dev/null
+++ b/addons/point_of_sale/static/src/js/Notification.js
@@ -0,0 +1,24 @@
+odoo.define('point_of_sale.Notification', function (require) {
+    'use strict';
+
+    const { useListener } = require('web.custom_hooks');
+    const PosComponent = require('point_of_sale.PosComponent');
+    const Registries = require('point_of_sale.Registries');
+
+    class Notification extends PosComponent {
+        constructor() {
+            super(...arguments)
+            useListener('click', this.closeNotification);
+        }
+        mounted() {
+            setTimeout(() => {
+                this.closeNotification();
+            }, this.props.duration)
+        }
+    }
+    Notification.template = 'Notification';
+
+    Registries.Component.add(Notification);
+
+    return Notification;
+});
diff --git a/addons/point_of_sale/static/src/js/PosComponent.js b/addons/point_of_sale/static/src/js/PosComponent.js
index ae2873ba828..1edd4f16396 100644
--- a/addons/point_of_sale/static/src/js/PosComponent.js
+++ b/addons/point_of_sale/static/src/js/PosComponent.js
@@ -53,6 +53,12 @@ odoo.define('point_of_sale.PosComponent', function (require) {
         setSyncStatus(status, pending) {
             this.trigger('set-sync-status', { status, pending });
         }
+        showNotification(message, duration = 2000) {
+            this.trigger('show-notification', { message, duration });
+        }
+        closeNotification() {
+            this.trigger('close-notification');
+        }
     }
 
     return PosComponent;
diff --git a/addons/point_of_sale/static/src/xml/Chrome.xml b/addons/point_of_sale/static/src/xml/Chrome.xml
index e9361bd38d3..910e3c76974 100644
--- a/addons/point_of_sale/static/src/xml/Chrome.xml
+++ b/addons/point_of_sale/static/src/xml/Chrome.xml
@@ -69,6 +69,8 @@
                    t-key="popup.name" />
             </div>
 
+            <Notification t-if="state.notification.isShown" message="state.notification.message" duration="state.notification.duration" t-transition="fade"/>
+
             <NotificationSound t-if="state.sound.src" sound="state.sound" />
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/xml/Notification.xml b/addons/point_of_sale/static/src/xml/Notification.xml
new file mode 100644
index 00000000000..77c2a7a9d17
--- /dev/null
+++ b/addons/point_of_sale/static/src/xml/Notification.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="Notification" owl="1">
+        <div class="notification">
+            <span>
+                <t t-esc="props.message" />
+            </span>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/point_of_sale/views/pos_assets_common.xml b/addons/point_of_sale/views/pos_assets_common.xml
index 19e5e7bdc17..f86d19640db 100644
--- a/addons/point_of_sale/views/pos_assets_common.xml
+++ b/addons/point_of_sale/views/pos_assets_common.xml
@@ -104,6 +104,7 @@
     <script type="text/javascript" src="/point_of_sale/static/src/js/ChromeWidgets/ClientScreenButton.js"></script>
     <script type="text/javascript" src="/point_of_sale/static/src/js/Misc/NumberBuffer.js"></script>
     <script type="text/javascript" src="/point_of_sale/static/src/js/Misc/MobileOrderWidget.js"></script>
+    <script type="text/javascript" src="/point_of_sale/static/src/js/Notification.js"></script>
 </template>
 
 <template id="point_of_sale.assets_backend" name="hr assets" inherit_id="web.assets_backend">