[IMP] point_of_sale: simple toast notification

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',
 }

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

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

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

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;

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>

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>

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