Mar 04 : [ADD] Initial Commit 'customer_screen_pos'

customer_screen_pos/README.rst

@@ -0,0 +1,41 @@
+.. image:: https://img.shields.io/badge/license-AGPL--3-blue.svg
+    :target: https://www.gnu.org/licenses/agpl-3.0-standalone.html
+    :alt: License: AGPL-3
+
+Customer Screen POS
+===================
+This module allow the customer ensure their order and add review about service.
+
+Configuration
+=============
+Enable Customer Screen field in POS settings and also enable options to form screen type.
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+Credits
+-------
+Developer:(V16) Ansil P V, Contact: odoo@cybrosys.com
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+* Website : https://cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported.
+
+Maintainer
+==========
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com
+
+This module is maintained by Cybrosys Technologies.
+
+For support and more information, please visit `Our Website <https://cybrosys.com/>`__
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__

customer_screen_pos/__init__.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Ansil pv (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from . import controllers
+from . import models

customer_screen_pos/__manifest__.py

@@ -0,0 +1,57 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Ansil pv (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+{
+    'name': "Customer Screen POS",
+    'version': '16.0.1.0.0',
+    'category': 'Point of Sale',
+    'summary': 'POS Customer Screen. '
+               'This helps customers finalize their order and may add rating '
+               'and review.',
+    'description': "A separate POS screen for customers to know their ordered "
+                   "products and add their review and rating about services",
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': 'https://www.cybrosys.com',
+    'depends': ['point_of_sale'],
+    'data': [
+        'security/ir.model.access.csv',
+        'views/res_config_settings_views.xml',
+        'views/pos_order_views.xml',
+        'views/pos_orderlines_templates.xml',
+    ],
+    'assets': {
+        'point_of_sale.assets': [
+            '/customer_screen_pos/static/src/js/pos_systray_icon.js',
+            '/customer_screen_pos/static/src/js/product_click.js',
+            '/customer_screen_pos/static/src/xml/pos_systray_icon.xml',
+        ],
+        'web.assets_frontend': [
+            'customer_screen_pos/static/src/css/customer_screen_pos.css'
+        ]
+    },
+    'images': ['static/description/banner.jpg'],
+    'license': 'AGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

customer_screen_pos/controllers/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Ansil pv (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from . import customer_screen_pos

customer_screen_pos/controllers/customer_screen_pos.py

@@ -0,0 +1,86 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Ansil pv (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+import json
+from odoo import http
+from odoo.http import request
+
+
+class AddMyProductReview(http.Controller):
+    """ AddMyProductReview class provides the functionality of creating
+        templates and model records about customer screen and customer reviews
+        Methods:
+            add_my_review(self, orderlinelist, total):
+                This get the order lines from pos and create a screen template
+                and return into pos js fil
+            customer_screen_pos(self):
+                For create default template for merge customer screen template
+            customer_review(self, review):
+                For create new records in model "pos.order.review" based on
+                customer review that we got from customer screen """
+    @http.route('/add/my/review', type='json', auth='public')
+    def add_my_review(self, orderlinelist, total):
+        """For pass records into order-lines template and return template body
+            to js file for generate new page"""
+        response = http.Response(
+            template='customer_screen_pos.customer_pos_screen',
+            qcontext={'orderlinelist': orderlinelist, 'total': total})
+        return response.render()
+
+    @http.route(['/customer/screen/'], type='http', auth="user",
+                website=True)
+    def customer_screen_pos(self):
+        """Default customer screen for merge orders list and review template"""
+        return (request.render
+                ("customer_screen_pos.customer_screen_pos_main_page"))
+
+    @http.route(['/customer/review/<review>'], type='json', auth="none",
+                website=False, csrf=False)
+    def customer_review(self, review):
+        """Get review and rating from customer screen and store into a new
+            model based on pos order reference"""
+        data = json.loads(review)
+        review_text = data[0]["review_text"]
+        review_star = data[0]["review_star"]
+        pos_order_review = request.env['pos.order.review'].sudo().search([])
+        reviews_refer = [review_ref.pos_order_ref for review_ref in
+                         pos_order_review]
+        if data[0]["order_name"] not in reviews_refer:
+            request.env['pos.order.review'].sudo().create({
+                'review_text': review_text if review_text else None,
+                'review_star': review_star if review_star else None,
+                'pos_session': data[0]["session"] if data[0][
+                    "session"] else None,
+                'partner': data[0]["partner_id"] if data[0][
+                    "partner_id"] else None,
+                'pos_order_ref': data[0]["order_name"] if data[0][
+                    "order_name"] else None,
+            })
+        else:
+            request.env['pos.order.review'].search(
+                [('pos_order_ref', '=', data[0]['order_name'])]).sudo().write({
+                    'review_text': review_text if review_text else None,
+                    'review_star': review_star if review_star else None,
+                    'pos_session': data[0]["session"] if data[0][
+                        "session"] else None,
+                    'partner': data[0]["partner_id"] if data[0][
+                        "partner_id"] else None,
+                })

customer_screen_pos/doc/RELEASE_NOTES.md

@@ -0,0 +1,6 @@
+## Module <customer_screen_pos>
+
+#### 04.03.2024
+#### Version 16.0.1.0.0
+#### ADD
+- Initial commit for Customer Screen POS

customer_screen_pos/models/__init__.py

@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Ansil pv (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from . import pos_config
+from . import pos_order
+from . import pos_order_review
+from . import res_config_settings

customer_screen_pos/models/pos_config.py

@@ -0,0 +1,37 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Ansil pv (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from odoo import fields, models
+
+
+class PosConfig(models.Model):
+    """Extend functionality of Point of Sale Configuration"""
+    _inherit = 'pos.config'
+
+    allow_customer_screen = fields.Boolean(string="Customer Screen",
+                                           help='Allows the screen share with'
+                                                'the customers')
+    allow_systray_icon = fields.Boolean(string="Allow Systray Button",
+                                        help='Allows the customer to set '
+                                             'screen open button in systray')
+    allow_product_click = fields.Boolean(string="Allow Product Click",
+                                         help='Allows the customer to set '
+                                              'screen open when click product')

customer_screen_pos/models/pos_order.py

@@ -0,0 +1,77 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Ansil pv (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from functools import partial
+from odoo import api, fields, models
+
+
+class PosOrder(models.Model):
+    """Extend functionality of Point of Sale Order"""
+    _inherit = 'pos.order'
+
+    rating = fields.Selection([
+        ('0', '0'),
+        ('1', '1'),
+        ('2', '2'),
+        ('3', '3'),
+        ('4', '4'),
+        ('5', '5'),
+    ], default='5', string="Rating", help="Rating Stars")
+    rating_text = fields.Text(string="Feedback", help='Feedback of customers')
+
+    @api.model
+    def _order_fields(self, ui_order):
+        """Function to fetch order details from POS and return to POS order"""
+        process_line = partial(self.env['pos.order.line']._order_line_fields,
+                               session_id=ui_order['pos_session_id'])
+        pos_order_review = self.env['pos.order.review'].search(
+            [('pos_order_ref', '=', ui_order['name'])])
+        return {
+            'user_id': ui_order['user_id'] or False,
+            'session_id': ui_order['pos_session_id'],
+            'lines': [process_line(lines) for lines in ui_order['lines']] if
+            ui_order[
+                'lines'] else False,
+            'pos_reference': ui_order['name'],
+            'sequence_number': ui_order['sequence_number'],
+            'partner_id': ui_order['partner_id'] or False,
+            'date_order': ui_order['creation_date'].replace('T', ' ')[:19],
+            'fiscal_position_id': ui_order['fiscal_position_id'],
+            'pricelist_id': ui_order['pricelist_id'],
+            'amount_paid': ui_order['amount_paid'],
+            'amount_total': ui_order['amount_total'],
+            'amount_tax': ui_order['amount_tax'],
+            'amount_return': ui_order['amount_return'],
+            'company_id': self.env['pos.session'].browse(
+                ui_order['pos_session_id']).company_id.id,
+            'to_invoice': ui_order[
+                'to_invoice'] if "to_invoice" in ui_order else False,
+            'to_ship': ui_order['to_ship'] if "to_ship" in ui_order else False,
+            'is_tipped': ui_order.get('is_tipped', False),
+            'tip_amount': ui_order.get('tip_amount', 0),
+            'access_token': ui_order.get('access_token', ''),
+            'rating': ("1" if pos_order_review.review_star == "star1" else
+                       "2" if pos_order_review.review_star == "star2" else
+                       "3" if pos_order_review.review_star == "star3" else
+                       "4" if pos_order_review.review_star == "star4" else
+                       "5"),
+            'rating_text': pos_order_review.review_text
+        }

customer_screen_pos/models/pos_order_review.py

@@ -0,0 +1,41 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Ansil pv (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from odoo import fields, models
+
+
+class PoSOrderReview(models.Model):
+    """PoSOrderReview provides option to store customers reviews for their
+        POS orders in database"""
+    _name = 'pos.order.review'
+    _description = "POS Order Reviews"
+
+    review_text = fields.Char(string="Review text",
+                              help='To store review of customer'
+                                   'from customer screen')
+    review_star = fields.Char(string="Review Star",
+                              help='To store rating of customer'
+                                   'from customer screen')
+    pos_session = fields.Integer(string="POS Session",
+                                 help='To store session id of pos')
+    partner = fields.Integer(string="Partner Id", help='for partner')
+    pos_order_ref = fields.Char(string="POS Order Reference",
+                                help='To store each order reference')

customer_screen_pos/models/res_config_settings.py

@@ -0,0 +1,44 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Ansil pv (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+###############################################################################
+from odoo import fields, models
+
+
+class ResConfigSettings(models.TransientModel):
+    """This model extends the base configuration settings for Point of Sale
+     configurations."""
+    _inherit = 'res.config.settings'
+
+    allow_customer_screen = fields.Boolean(string="Customer Screen",
+                                           related="pos_config_id.allow_customer_screen",
+                                           readonly=False,
+                                           help='Allows the screen share with '
+                                                'the customers')
+    allow_systray_icon = fields.Boolean(string="Allow Systray Button",
+                                        related="pos_config_id.allow_systray_icon",
+                                        readonly=False,
+                                        help='Allows the customer to set '
+                                             'screen open button in systray')
+    allow_product_click = fields.Boolean(string="Allow Product Click",
+                                         related="pos_config_id.allow_product_click",
+                                         readonly=False,
+                                         help='Allows the customer to set '
+                                              'screen open when click product')

customer_screen_pos/security/ir.model.access.csv

@@ -0,0 +1,2 @@
+id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink
+access_pos_order_review,access.pos.order.review,model_pos_order_review,base.group_user,1,1,1,1

customer_screen_pos/static/description/index.html

@@ -0,0 +1,564 @@
+<div style="background-color: #714B67; height: 810px; width: 100%; padding: 15px; position: relative;">
+  <!-- TITLE BAR -->
+  <div class="d-flex align-items-center justify-content-between" style="border-bottom: 1px solid #875A7B; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
+      <img src="assets/misc/cybrosys-logo.png" width="42" height="42" style="width: 42px; height: 42px;" />
+      <div>
+           <div
+                    style="color: #7C7BAD; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                    class="mr-2">
+                <i class="fa fa-check mr-1"></i>Community
+            </div>
+            <div
+                    style="color: #875A7B; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                    class="mr-2">
+                <i class="fa fa-check mr-1"></i>Enterprise
+            </div>
+            <div style="color: #017E84; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Odoo.sh
+            </div>
+      </div>
+  </div>
+  <!-- END OF TITLE BAR -->
+  <div class="container">
+      <div class="row">
+          <div class="col-sm-12 col-md-12 col-lg-12">
+              <!-- APP HERO -->
+              <h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;">
+                Customer Screen POS
+            </h1>
+              <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;">Screen for Customers to Ensure their Order and Remark their Opinions</p>
+              <!-- END OF APP HERO -->
+              <img src="assets/screenshots/hero.gif" class="img-responsive" style="width: 100%; margin-left: auto; margin-right: auto;" />
+          </div>
+      </div>
+  </div>
+</div>
+
+<!-- NAVIGATION SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px; margin-top: 300px;">
+  <div class="d-flex justify-content-center align-items-center mr-2" style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+      <img src="assets/misc/compass.png" />
+  </div>
+  <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Explore This
+      Module</h2>
+</div>
+<div class="row my-4" style="font-family: 'Montserrat', sans-serif;">
+  <div class="col-sm-12 col-md-6 my-3">
+      <a href="#overview">
+          <div class="d-flex justify-content-between align-items-center" style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+              <div>
+                  <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Overview</span>
+                  <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">Learn
+                      more about this
+                      module</span>
+              </div>
+              <img src="assets/misc/right-arrow.png" width="36" height="36" />
+          </div>
+      </a>
+  </div>
+  <div class="col-sm-12 col-md-6 my-3">
+      <a href="#features">
+          <div class="d-flex justify-content-between align-items-center" style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+              <div>
+                  <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Features</span>
+                  <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+                      features of this
+                      module</span>
+              </div>
+              <img src="assets/misc/right-arrow.png" width="36" height="36" />
+          </div>
+      </a>
+  </div>
+  <div class="col-sm-12 col-md-6 my-3">
+      <a href="#screenshots">
+          <div class="d-flex justify-content-between align-items-center" style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+              <div>
+                  <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Screenshots</span>
+                  <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+                      screenshots for this
+                      module</span>
+              </div>
+              <img src="assets/misc/right-arrow.png" width="36" height="36" />
+          </div>
+      </a>
+  </div>
+</div>
+<!-- END OF NAVIGATION SECTION -->
+
+<!-- OVERVIEW SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="overview">
+  <div class="d-flex justify-content-center align-items-center mr-2" style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+      <img src="assets/misc/pie-chart.png" />
+  </div>
+  <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Overview
+  </h2>
+</div>
+<div class="row" style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+  <div class="col-sm-12 py-4">
+      The Customer Screen feature enables a dual-screen setup in your retail
+      store. You have the primary screen where the cashier operates the POS, and
+      the secondary customer-facing screen, often positioned to display
+      information to the customer.
+      <br/>
+      The primary purpose of the Customer Screen is to engage customers during
+      the checkout process. It provides real-time information about the products
+      being scanned or added to the cart, including names, quantities, prices.
+  </div>
+
+</div>
+<!-- END OF OVERVIEW SECTION -->
+
+<!-- FEATURES SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="features">
+  <div class="d-flex justify-content-center align-items-center mr-2" style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+      <img src="assets/misc/features.png" />
+  </div>
+  <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Features
+  </h2>
+</div>
+<div class="row" style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+  <div class="col-sm-12 col-md-6">
+      <div class="d-flex align-items-center" style="margin-top: 30px; margin-bottom: 30px">
+          <img src="assets/misc/check-box.png" class="mr-2" />
+          <span style="font-family: 'Montserrat', sans-serif; font-size:  18px; font-weight: bold;">Display of the items being scanned or added to the cart</span>
+      </div>
+      <div class="d-flex align-items-center" style="margin-top: 30px; margin-bottom: 30px">
+          <img src="assets/misc/check-box.png" class="mr-2" />
+          <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Real-time updates as items are added, removed, or modified in the order.</span>
+      </div>
+  </div>
+  <div class="col-sm-12 col-md-6">
+    <div class="d-flex align-items-center" style="margin-top: 30px; margin-bottom: 30px">
+        <img src="assets/misc/check-box.png" class="mr-2" />
+        <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Running total of the order amount.</span>
+      </div>
+      <div class="d-flex align-items-center" style="margin-top: 30px; margin-bottom: 30px">
+        <img src="assets/misc/check-box.png" class="mr-2" />
+        <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Option to collect customer feedback or ratings for their shopping experience.</span>
+      </div>
+  </div>
+</div>
+<!-- END OF FEATURES SECTION -->
+
+<!-- SCREENSHOTS SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="screenshots">
+  <div class="d-flex justify-content-center align-items-center mr-2" style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+      <img src="assets/misc/pictures.png" />
+  </div>
+  <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Screenshots
+  </h2>
+</div>
+<div class="row">
+  <div class="col-sm-12">
+      <div style="display: block; margin: 30px auto;">
+        <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Enable Customer Screen Allow option from Settings, also enable methods to show customer screen</h3>
+        <img src="assets/screenshots/0.png" class="img-thumbnail">
+      </div>
+
+      <div style="display: block; margin: 30px auto;">
+        <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">A systray icon to open the customer screen at any time with updated order lines</h3>
+         <img src="assets/screenshots/1.png" class="img-thumbnail">
+      </div>
+
+      <div style="display: block; margin: 30px auto;">
+        <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Each time we click on the product the  customer screen will be updated</h3>
+        <img src="assets/screenshots/2.png" class="img-thumbnail">
+      </div>
+
+      <div style="display: block; margin: 30px auto;">
+        <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">The View of Customer Screen with Order lines and a button to open the Modal of Review Section</h3>
+        <img src="assets/screenshots/3.png" class="img-thumbnail">
+      </div>
+
+      <div style="display: block; margin: 30px auto;">
+       <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Section for adding Rating and Feedback Fields for Customers</h3>
+        <img src="assets/screenshots/4.png" class="img-thumbnail">
+      </div>
+
+      <div style="display: block; margin: 30px auto;">
+         <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">View of Customer added Review and Feedback's</h3>
+        <img src="assets/screenshots/5.png" class="img-thumbnail">
+      </div>
+
+      <div style="display: block; margin: 30px auto;">
+         <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">The Review and Feedback Automatically Store in Order View in Backend when Payment Confirm</h3>
+        <img src="assets/screenshots/6.png" class="img-thumbnail">
+      </div>
+  </div>
+</div>
+<!-- END OF SCREENSHOTS SECTION -->
+
+<!-- RELATED PRODUCTS -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/categories.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Related
+        Products
+    </h2>
+</div>
+<div class="row">
+    <div class="col-sm-12">
+        <div id="demo1" class="row carousel slide" data-ride="carousel">
+            <!-- The slideshow -->
+            <div class="carousel-inner" style="padding: 30px;">
+                <div class="carousel-item" style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/point_of_sale_logo/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/1.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/custom_receipts_for_pos/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/2.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/pos_report_generator/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/3.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <div class="carousel-item active"
+                     style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/pos_product_creation/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/4.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/multi_barcodes_pos/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/5.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/pos_sync_orders/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/6.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <!-- Left and right controls -->
+            <a class="carousel-control-prev" href="#demo1" data-slide="prev"
+               style="width:35px; color:#000"> <span
+                    class="carousel-control-prev-icon"><i
+                    class="fa fa-chevron-left"
+                    style="font-size:24px"></i></span>
+            </a> <a class="carousel-control-next" href="#demo1"
+                    data-slide="next" style="width:35px; color:#000">
+            <span class="carousel-control-next-icon"><i
+                    class="fa fa-chevron-right"
+                    style="font-size:24px"></i></span>
+        </a>
+        </div>
+    </div>
+</div>
+<!-- END OF RELATED PRODUCTS -->
+
+<!-- OUR SERVICES -->
+
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+  <div class="d-flex justify-content-center align-items-center mr-2" style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+      <img src="assets/misc/star.png" />
+  </div>
+  <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Our Services
+  </h2>
+</div>
+
+<div class="container my-5">
+  <div class="row">
+      <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+          <div class="d-flex justify-content-center align-items-center mx-3 my-3" style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+              <img src="assets/icons/cogs.png" class="img-responsive" height="48px" width="48px">
+          </div>
+          <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+              Odoo
+              Customization</h6>
+      </div>
+
+      <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+          <div class="d-flex justify-content-center align-items-center mx-3 my-3" style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+              <img src="assets/icons/wrench.png" class="img-responsive" height="48px" width="48px">
+          </div>
+          <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+              Odoo
+              Implementation</h6>
+      </div>
+
+      <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+          <div class="d-flex justify-content-center align-items-center mx-3 my-3" style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+              <img src="assets/icons/lifebuoy.png" class="img-responsive" height="48px" width="48px">
+          </div>
+          <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+              Odoo
+              Support</h6>
+      </div>
+
+
+      <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+          <div class="d-flex justify-content-center align-items-center mx-3 my-3" style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+              <img src="assets/icons/user.png" class="img-responsive" height="48px" width="48px">
+          </div>
+          <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+              Hire
+              Odoo
+              Developer</h6>
+      </div>
+
+      <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+          <div class="d-flex justify-content-center align-items-center mx-3 my-3" style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+              <img src="assets/icons/puzzle.png" class="img-responsive" height="48px" width="48px">
+          </div>
+          <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+              Odoo
+              Integration</h6>
+      </div>
+
+      <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+          <div class="d-flex justify-content-center align-items-center mx-3 my-3" style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+              <img src="assets/icons/update.png" class="img-responsive" height="48px" width="48px">
+          </div>
+          <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+              Odoo
+              Migration</h6>
+      </div>
+
+
+      <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+          <div class="d-flex justify-content-center align-items-center mx-3 my-3" style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+              <img src="assets/icons/consultation.png" class="img-responsive" height="48px" width="48px">
+          </div>
+          <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+              Odoo
+              Consultancy</h6>
+      </div>
+
+      <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+          <div class="d-flex justify-content-center align-items-center mx-3 my-3" style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+              <img src="assets/icons/training.png" class="img-responsive" height="48px" width="48px">
+          </div>
+          <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+              Odoo
+              Implementation</h6>
+      </div>
+
+      <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+          <div class="d-flex justify-content-center align-items-center mx-3 my-3" style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+              <img src="assets/icons/license.png" class="img-responsive" height="48px" width="48px">
+          </div>
+          <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+              Odoo
+              Licensing Consultancy</h6>
+      </div>
+  </div>
+
+</div>
+
+<!-- END OF OUR SERVICES -->
+
+<!-- OUR INDUSTRIES -->
+
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+  <div class="d-flex justify-content-center align-items-center mr-2" style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+      <img src="assets/misc/corporate.png" />
+  </div>
+  <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Our
+      Industries
+  </h2>
+</div>
+
+<div class="container my-5">
+  <div class="row">
+      <div class="col-lg-3">
+          <div class="my-4 d-flex flex-column justify-content-center" style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+              <img src="assets/icons/trading-black.png" class="img-responsive mb-3" height="48px" width="48px">
+              <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                  Trading
+              </h5>
+              <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                  Easily procure
+                  and
+                  sell your products</p>
+          </div>
+      </div>
+
+      <div class="col-lg-3">
+          <div class="my-4 d-flex flex-column justify-content-center" style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+              <img src="assets/icons/pos-black.png" class="img-responsive mb-3" height="48px" width="48px">
+              <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                  POS
+              </h5>
+              <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                  Easy
+                  configuration
+                  and convivial experience</p>
+          </div>
+      </div>
+
+      <div class="col-lg-3">
+          <div class="my-4 d-flex flex-column justify-content-center" style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+              <img src="assets/icons/education-black.png" class="img-responsive mb-3" height="48px" width="48px">
+              <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                  Education
+              </h5>
+              <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                  A platform for
+                  educational management</p>
+          </div>
+      </div>
+
+      <div class="col-lg-3">
+          <div class="my-4 d-flex flex-column justify-content-center" style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+              <img src="assets/icons/manufacturing-black.png" class="img-responsive mb-3" height="48px" width="48px">
+              <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                  Manufacturing
+              </h5>
+              <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                  Plan, track and
+                  schedule your operations</p>
+          </div>
+      </div>
+
+      <div class="col-lg-3">
+          <div class="my-4 d-flex flex-column justify-content-center" style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+              <img src="assets/icons/ecom-black.png" class="img-responsive mb-3" height="48px" width="48px">
+              <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                  E-commerce &amp; Website
+              </h5>
+              <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                  Mobile
+                  friendly,
+                  awe-inspiring product pages</p>
+          </div>
+      </div>
+
+      <div class="col-lg-3">
+          <div class="my-4 d-flex flex-column justify-content-center" style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+              <img src="assets/icons/service-black.png" class="img-responsive mb-3" height="48px" width="48px">
+              <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                  Service Management
+              </h5>
+              <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                  Keep track of
+                  services and invoice</p>
+          </div>
+      </div>
+
+      <div class="col-lg-3">
+          <div class="my-4 d-flex flex-column justify-content-center" style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+              <img src="assets/icons/restaurant-black.png" class="img-responsive mb-3" height="48px" width="48px">
+              <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                  Restaurant
+              </h5>
+              <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                  Run your bar or
+                  restaurant methodically</p>
+          </div>
+      </div>
+
+      <div class="col-lg-3">
+          <div class="my-4 d-flex flex-column justify-content-center" style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+              <img src="assets/icons/hotel-black.png" class="img-responsive mb-3" height="48px" width="48px">
+              <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                  Hotel Management
+              </h5>
+              <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                  An
+                  all-inclusive
+                  hotel management application</p>
+          </div>
+      </div>
+  </div>
+</div>
+
+<!-- END OF OUR INDUSTRIES -->
+
+<!-- SUPPORT -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+  <div class="d-flex justify-content-center align-items-center mr-2" style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+      <img src="assets/misc/customer-support.png" />
+  </div>
+  <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Support
+  </h2>
+</div>
+<div class="container mt-5">
+  <div class="row">
+      <div class="col-sm-12 col-md-6">
+          <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+              <div class="mr-4 d-flex justify-content-center align-items-center" style="background-color: #714B67; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                  <img src="assets/misc/support.png" height="48" width="48" style="width: 42px; height: 42px;" />
+              </div>
+              <div>
+                  <h4>Need Help?</h4>
+                  <p style="line-height: 100%;">Got questions or need help? Get in touch.</p>
+                  <a href="mailto:odoo@cybrosys.com">
+                      <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">
+                          odoo@cybrosys.com</p>
+                  </a>
+              </div>
+          </div>
+      </div>
+      <div class="col-sm-12 col-md-6">
+          <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+              <div class="mr-4 d-flex justify-content-center align-items-center" style="background-color: #2AC44D; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                  <img src="assets/misc/whatsapp.png" height="52" width="52" style="width: 52px; height: 52px;" />
+              </div>
+              <div>
+                  <h4>WhatsApp</h4>
+                  <p style="line-height: 100%;">Say hi to us on WhatsApp!</p>
+                  <a href="https://api.whatsapp.com/send?phone=918606827707">
+                      <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">+91 86068
+                          27707</p>
+                  </a>
+              </div>
+          </div>
+      </div>
+  </div>
+  <div class="row">
+      <div class="col-sm-12 my-5 d-flex justify-content-center align-items-center">
+          <img src="assets/misc/logo.png" width="144" height="31" style="width:144px; height: 31px; margin-top: 40px;" />
+      </div>
+  </div>
+</div>
+<!-- END OF SUPPORT -->

customer_screen_pos/static/src/css/customer_screen_pos.css

@@ -0,0 +1,100 @@
+.pos_orderlines_list {
+    box-shadow: 0 0.1vh 0.1vh #aaaaaa;
+    color: #3E3E3E;
+    background-color: white;
+     height: 100%;
+    overflow-y: scroll;
+}
+.pos_orderlines {
+    padding-right: 1.5vw;
+    position: relative;
+    height: 100%;
+    overflow-y: scroll;
+
+}
+table.pos_orderlines_items.pos_orderlines_header {
+    margin-left: auto;
+}
+
+/* star */
+*{
+    margin: 0;
+    padding: 0;
+}
+.rate {
+    float: left;
+    height: 46px;
+    padding: 0 10px;
+}
+.rate:not(:checked) > input {
+    position: absolute;
+    top: -9999px;
+}
+.rate:not(:checked) > label {
+    float: right;
+    width: 1em;
+    overflow: hidden;
+    white-space: nowrap;
+    cursor: pointer;
+    font-size: 30px;
+    color: #ccc;
+}
+.rate:not(:checked) > label:before {
+    content: '★ ';
+}
+.rate > input:checked ~ label {
+    color: #ffc700;
+}
+.rate:not(:checked) > label:hover,
+.rate:not(:checked) > label:hover ~ label {
+    color: #deb217;
+}
+.rate > input:checked + label:hover,
+.rate > input:checked + label:hover ~ label,
+.rate > input:checked ~ label:hover,
+.rate > input:checked ~ label:hover ~ label,
+.rate > label:hover ~ input:checked ~ label {
+    color: #c59b08;
+}
+/* star */
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* Black background with
+    opacity */
+}
+
+/* Modal Content */
+.modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 30%;
+}
+
+/* Close Button */
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.cust_scrn #wrapwrap {
+    display: none;
+ }

customer_screen_pos/static/src/js/pos_systray_icon.js

@@ -0,0 +1,78 @@
+odoo.define('customer_screen_pos.SystrayButtonScreen', function(require) {
+'use strict';
+    /**
+    Function to set systray button for open Customer Screen
+    */
+    const PosComponent = require('point_of_sale.PosComponent');
+    const ProductScreen = require('point_of_sale.ProductScreen');
+    const { useListener } = require("@web/core/utils/hooks");
+    const Registries = require('point_of_sale.Registries');
+    const ControlButtonsMixin = require('point_of_sale.ControlButtonsMixin');
+    var ajax = require('web.ajax');
+    var encodedResult
+    class SystrayButtonScreen extends ControlButtonsMixin(PosComponent) {
+        /**
+        In here we get order-line records from pos and pass to controller for
+        creating template for customer screen using records,
+        In ajax then function we get customer screen template body then we merge
+        it with a demo template
+        */
+        setup() {
+          super.setup();
+          useListener('click', this.onClick);
+        }
+        get currentOrder() {
+            var self = this;
+            var total = 0
+            var totalvalues = this.env.pos.selectedOrder.orderlines
+            totalvalues.forEach(function (totalvalues) {
+                total = total + (totalvalues.price * totalvalues.quantity)
+            })
+            var orderlines = this.env.pos.get_order().orderlines;
+            var orderlinelist = [];
+            orderlines.forEach(function(orderline) {
+                // Perform operations with each orderline here
+                if (!orderlinelist.includes(orderline.product.display_name)) {
+                    orderlinelist.push({
+                        'id' : orderline.product.id,
+                        'name' : orderline.product.display_name,
+                        'price' : (orderline.price * orderline.quantity),
+                        'qty' : orderline.quantity,
+                        'session': self.env.pos.get_order().pos.pos_session.id,
+                        'partner_id': self.env.pos.get_order().partner ? self.env.pos.get_order().partner.id : null,
+                        'order_name': self.env.pos.get_order().name,
+                        'total': total
+                    });
+                }
+            });
+            ajax.jsonRpc('/add/my/review', 'call', {'orderlinelist': orderlinelist, 'total': total})
+            .then(function (result) {
+                encodedResult = result
+                var url = "/customer/screen/";
+                fetch(url)
+                    .then(function (response) {
+                        return response.text();
+                    })
+                .then(function (data) {
+                    var modifiedData = data.replace('<body>', '<body>' + encodedResult);
+                    var newWindow = window.open("", 'Customer Display Screen', 'height=500,width=900');
+                    newWindow.document.open();
+                    newWindow.document.write(modifiedData);
+                    newWindow.document.close();
+                })
+                .catch(function (error) {
+                    console.log('Error:', error);
+                });
+            })
+            return this.env.pos.get_order();
+        }
+        async onClick() {
+           if (this.env.pos.config.allow_systray_icon) {
+               const currentOrderLines = this.currentOrder;
+           }
+        }
+    }
+    SystrayButtonScreen.template = 'SystrayButtonScreen';
+    Registries.Component.add(SystrayButtonScreen);
+    return SystrayButtonScreen;
+});

customer_screen_pos/static/src/js/product_click.js

@@ -0,0 +1,70 @@
+odoo.define('customer_screen_pos.ProductItemClick', function (require) {
+    "use strict";
+    /**
+    Function for generating customer screen when selecting a product to order
+    lines
+    */
+    const ProductScreen = require('point_of_sale.ProductScreen');
+    const Registries = require('point_of_sale.Registries');
+    var ajax = require('web.ajax');
+    var encodedResult
+    const ProductItemClick = (ProductScreen) => class ProductItemClick
+        extends ProductScreen {
+        /**
+        In here we get order-line records from pos and pass to controller for
+        creating template for customer screen using records,
+        In ajax then function we get customer screen template body then we merge
+        it with a demo template
+        */
+        async _clickProduct(event) {
+            await super._clickProduct(event)
+            if (this.env.pos.config.allow_product_click) {
+                var self = this
+                var total = 0
+                var totalvalues = this.env.pos.selectedOrder.orderlines
+                totalvalues.forEach(function (totalvalues) {
+                    total = total + (totalvalues.price * totalvalues.quantity)
+                })
+                var orderlines = this.env.pos.get_order().orderlines;
+                var orderlinelist = [];
+                orderlines.forEach(function(orderline) {
+                    // Perform operations with each orderline here
+                    if (!orderlinelist.includes(orderline.product.display_name)) {
+                        orderlinelist.push({
+                            'id' : orderline.product.id,
+                            'name' : orderline.product.display_name,
+                            'price' : (orderline.price * orderline.quantity),
+                            'qty' : orderline.quantity,
+                            'session': self.env.pos.get_order().pos.pos_session.id,
+                            'partner_id': self.env.pos.get_order().partner ? self.env.pos.get_order().partner.id : null,
+                            'order_name': self.env.pos.get_order().name,
+                            'total': total
+                        });
+                    }
+                });
+                ajax.jsonRpc('/add/my/review', 'call', {'orderlinelist': orderlinelist, 'total': total})
+                .then(function (result) {
+                    encodedResult = result
+                    var url = "/customer/screen/";
+                    fetch(url)
+                        .then(function (response) {
+                            return response.text();
+                        })
+                        .then(function (data) {
+                            var modifiedData = data.replace('<body>', '<body>' + encodedResult + '</body>');
+                            var newWindow = window.open("", 'Customer Display Screen', 'height=500,width=900');
+                            newWindow.document.open();
+                            newWindow.document.write(modifiedData);
+                            newWindow.document.close();
+                        })
+                        .catch(function (error) {
+                            console.log('Error:', error);
+                        });
+                })
+                return this.env.pos.get_order();
+            }
+        }
+    }
+    ProductItemClick.template = 'ShowProductImages';
+    Registries.Component.extend(ProductScreen, ProductItemClick);
+});

customer_screen_pos/static/src/xml/pos_systray_icon.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <!-- Template for PoS Systray icon -->
+    <t t-name="SystrayButtonScreen" owl="1">
+        <div class="ticket-button" style="color:red">
+            <div class="with-badge" t-att-badge="count">
+                 <i class="fa fa-desktop" aria-hidden="true"/>
+             </div>
+        </div>
+    </t>
+    <t t-inherit="point_of_sale.Chrome" t-inherit-mode="extension" owl="1">
+        <xpath expr="//CashMoveButton" position="after">
+            <t t-if="this.env.pos.config">
+                <t t-if="this.env.pos.config.allow_systray_icon">
+                    <SystrayButtonScreen/>
+                </t>
+            </t>
+        </xpath>
+    </t>
+</templates>

customer_screen_pos/views/pos_order_views.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+    <!-- Inheriting POS order view for add custom fields -->
+    <record id="view_pos_pos_form" model="ir.ui.view">
+        <field name="name">pos.order.view.form.inherit.customer.screen.pos</field>
+        <field name="model">pos.order</field>
+        <field name="inherit_id" ref="point_of_sale.view_pos_pos_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='pos_reference']" position="after">
+                <field name="rating" widget="priority"/>
+                <field name="rating_text"/>
+            </xpath>
+        </field>
+    </record>
+</odoo>

customer_screen_pos/views/pos_orderlines_templates.xml

@@ -0,0 +1,193 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="customer_pos_screen" name="POS Customer Screen">
+        <!-- Template of Customer Screen -->
+        <div style='background-color:lightblue'>
+            <h3>
+                <center>POS Order Lines</center>
+            </h3>
+        </div>
+        <div class="container row" id="customer_facing_display"
+             style="width: 100%; display: contents; align-items: center; justify-content: center;">
+            <center style="width:100%">
+                <div class="pos_orderlines col-md-10">
+                    <table class="table table-striped table-light">
+                        <thead>
+                            <tr>
+                                <th scope="col" colspan="2">Name</th>
+                                <th scope="col">Quantity</th>
+                                <th scope="col">Price</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <t t-foreach="orderlinelist"
+                               t-as="orderline">
+                                <tr>
+                                    <th colspan="2">
+                                        <t t-esc="orderline['name']"/>
+                                        <input type="hidden" name="session"
+                                               class="session_id"
+                                               t-att-value="orderline['session']"/>
+                                        <input type="hidden" name="partner"
+                                               class="partner_id"
+                                               t-att-value="orderline['partner_id']"/>
+                                        <input type="hidden"
+                                               name="order_name"
+                                               class="order_name"
+                                               t-att-value="orderline['order_name']"/>
+                                    </th>
+                                    <td>
+                                        <t t-esc="orderline['qty']"/>
+                                    </td>
+                                    <td>
+                                        <t t-esc="orderline['price']"/>
+                                    </td>
+                                </tr>
+                            </t>
+                            <tr>
+                                <td colspan="2"/>
+                                <td/>
+                                <th>
+                                    <t t-esc="total"/>
+                                </th>
+                            </tr>
+
+                        </tbody>
+                    </table>
+                    <div class="row" t-if="orderlinelist">
+                        <div class="col"
+                             style="align-items: flex-start; display: flex;">
+                            <button id="openModalBtn" class="btn btn-secondary">
+                                Add Review
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </center>
+        </div>
+        <!-- Review Modal -->
+        <div id="myModal" class="modal">
+            <div class="modal-content">
+                <span class="close" id="closeModal">&#215;</span>
+                <div id="review-form-container">
+                    <h2 id="add-review-header">Add Review</h2>
+                    <form id="review-form">
+                        <div class="popup five-star-rating-popup">
+                            <header class="title">Rate Our Service</header>
+                            <main class="body content">
+                                <div class="rate_this_prod mars_hide"
+                                     style="align-items: center;text-align: center; margin-top:40px; margin-bottom:40px;">
+                                    <div class="rate stars">
+                                        <input type="radio" id="star5"
+                                               name="rate" value="star5"
+                                               onclick="getStar()"/>
+                                        <label for="star5" title="text">5
+                                            stars
+                                        </label>
+                                        <input type="radio" id="star4"
+                                               name="rate" value="star4"
+                                               onclick="getStar()"/>
+                                        <label for="star4" title="text">4
+                                            stars
+                                        </label>
+                                        <input type="radio" id="star3"
+                                               name="rate" value="star3"
+                                               onclick="getStar()"/>
+                                        <label for="star3" title="text">3
+                                            stars
+                                        </label>
+                                        <input type="radio" id="star2"
+                                               name="rate" value="star2"
+                                               onclick="getStar()"/>
+                                        <label for="star2" title="text">2
+                                            stars
+                                        </label>
+                                        <input type="radio" id="star1"
+                                               name="rate" value="star1"
+                                               onclick="getStar()"/>
+                                        <label for="star1" title="text">1 star
+                                        </label>
+                                    </div>
+                                </div>
+                                <textarea
+                                        name="textarea"
+                                        t-on-change="review_text"
+                                        class="review_text"
+                                        id="productRating"
+                                        rows="4"
+                                        placeholder="'Write a message...'"/>
+                            </main>
+                            <footer class="footer">
+                                <button type="button" onclick="myFunction()">
+                                    Submit
+                                </button>
+                            </footer>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <script type="text/javascript"
+                src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"/>
+        <script>
+            <!--  Function for modal  -->
+            var modal = document.getElementById("myModal");
+            var openModalBtn = document.getElementById("openModalBtn");
+            var closeModal = document.getElementById("closeModal");
+            openModalBtn.addEventListener("click", function() {
+            modal.style.display = "block";
+            });
+            closeModal.addEventListener("click", function() {
+            modal.style.display = "none";
+            });
+            window.addEventListener("click", function(event) {
+            if (event.target == modal) {
+            modal.style.display = "none";
+            }
+            });
+        </script>
+        <script>
+            <!--  For pass review and star rating to backend  -->
+            var review_star;
+            function myFunction() {
+            var pos_order = []
+            var review_text = document.getElementById("productRating").value;
+            pos_order.push({
+            'review_text': review_text,
+            'review_star': review_star,
+            'session': document.querySelector('.session_id').value,
+            'partner_id': document.querySelector('.partner_id').value,
+            'order_name': document.querySelector('.order_name').value
+            })
+            var review = JSON.stringify(pos_order)
+            $.ajax({
+            url: '/customer/review/' + review,
+            type: 'post',
+            contentType: 'Application/json',
+            dataType: 'Application/json',
+            data:JSON.stringify({main:review}),
+            success: function(data) {
+            }, error: function(data){
+            }
+            })
+            modal.style.display = "none";
+            }
+            function getStar() {
+            const starInputs = document.querySelectorAll('.stars input[type="radio"]');
+            let selectedValue;
+            starInputs.forEach((input) => {
+            if (input.checked) {
+            selectedValue = input.value;
+            }
+            });
+            review_star = selectedValue
+            }
+        </script>
+    </template>
+    <template id="customer_screen_pos_main_page" name="Customer Screen">
+        <!-- Parent Template for merge Customer Screen -->
+        <div class="cust_scrn">
+            <t t-call="web.frontend_layout" aria-hidden="true"/>
+        </div>
+    </template>
+</odoo>

customer_screen_pos/views/res_config_settings_views.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Inheriting res config settings view for add custom fields -->
+    <record id="res_config_settings_view_form" model="ir.ui.view">
+        <field name="name">res.config.settings.view.form.inherit.customer.screen.pos
+        </field>
+        <field name="model">res.config.settings</field>
+        <field name="inherit_id"
+               ref="point_of_sale.res_config_settings_view_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//div[@id='pos_connected_devices_section']"
+                   position="after">
+                <h2>Customer Screen POS</h2>
+                <div class="row mt16 o_settings_container"
+                     id="pos_customer_screen_allow_section">
+                    <div class="col-12 col-lg-6 o_setting_box"
+                         id="cust_screen">
+                        <div class="o_setting_left_pane">
+                            <field name="allow_customer_screen"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label for="allow_customer_screen"/>
+                            <div class="content-group"
+                                 attrs="{'invisible': [('allow_customer_screen', '=', False)]}">
+                                <div class="mt16 o_light_label">
+                                    <field name="allow_systray_icon"
+                                           colspan="4" nolabel="1"/>
+                                    <label for="allow_systray_icon"/>
+                                </div>
+                                <div class="mt16 o_light_label">
+                                    <field name="allow_product_click"
+                                           colspan="4" nolabel="1"/>
+                                    <label for="allow_product_click"/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </xpath>
+        </field>
+    </record>
+</odoo>