July 20: [ADD] Initial commit 'customer_screen_pos'

customer_screen_pos/README.rst

@@ -0,0 +1,44 @@
+.. 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,
+            (V15) Gayathri 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: Gayathri V (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,58 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Gayathri V (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': '15.0.1.0.0',
+    'category': 'Point of Sale',
+    'summary': '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/pos_config_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',
+        ],
+        'web.assets_qweb': [
+            '/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: Gayathri V (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: Gayathri V (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>
+
+#### 18.07.2024
+#### Version 15.0.1.0.0
+#### ADD
+- Initial commit for Customer Screen POS

customer_screen_pos/models/__init__.py

@@ -0,0 +1,24 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Gayathri V (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

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: Gayathri V (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,76 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Gayathri V (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),
+            '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: Gayathri V (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/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,638 @@
+<div class="container"
+     style="padding: 1rem !important; margin-bottom: 1rem !important;">
+    <div class="row">
+        <div class="col-sm-12 col-md-12 col-lg-12 d-flex justify-content-between"
+             style="border-bottom: 1px solid #d5d5d5;">
+            <div class="my-3">
+                <img src="./assets/icons/logo.png"
+                     style="width: auto !important; height: 40px !important;">
+            </div>
+                <div
+                        style="background-color: #7C7BAD !important; color: #fff !important; font-weight: 600 !important; padding: 5px 15px 8px !important; margin: 0 5px !important;">
+                    <i class="fa fa-check mr-1"></i>Community
+                </div>
+                <div
+                        style="background-color: #875A7B !important; color: #fff !important; font-weight: 600 !important; padding: 5px 15px 8px !important; margin: 0 5px !important;">
+                    <i class="fa fa-check mr-1"></i>Enterprise
+                </div>
+                <div
+                        style="background-color: #017E84 !important; color: #fff !important; font-weight: 600 !important; padding: 5px 15px 8px !important; margin: 0 5px !important;">
+                    <i class="fa fa-check mr-1"></i>Odoo.sh
+                </div>
+        </div>
+    </div>
+</div>
+<!-- END OF TITLE BAR -->
+<div class="container" style="padding: 0rem 1.5rem 4rem !important">
+    <div class="row" style="height: 900px !important;">
+        <div class="col-sm-12 col-md-12 col-lg-12"
+             style="padding: 4rem 1rem !important; background-color: #714B67 !important; height: 600px !important; border-radius: 20px !important;">
+            <h1
+                    style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #FFFFFF !important;  font-size: 3.5rem !important; text-align: center !important;">
+                Customer Screen POS
+            </h1>
+            <p
+                    style="font-family: 'Montserrat', sans-serif !important; font-weight: 300 !important; color: #FFFFFF !important;  font-size: 1.4rem !important; text-align: center !important;">
+                Screen for Customers to Ensure their Order and Remark their
+                Opinions. </p>
+            <img src="./assets/screenshots/hero.gif" class="img-responsive"
+                 width="100%" height="auto"/>
+        </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>
+<!-- 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.
+        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: 40px; margin-bottom: 40px">
+            <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 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 class="col-sm-12 col-md-6">
+    </div>
+</div>
+<!-- END OF FEATURES SECTION -->
+
+<div class="row" id="screenshots">
+    <div class="col-md-12"
+         style="border-bottom: 1px solid #d5d5d5 !important; margin: 2rem 0 !important">
+        <h2
+                style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;">
+            <i class="fa fa-image mr-2"></i>Screenshots
+        </h2>
+    </div>
+    <div style="display: block; margin: 30px auto;">
+        <h4 class="mt-2"
+            style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+            Go to POS Settings
+        </h4>
+        <img src="./assets/screenshots/1.png" class="img-thumbnail">
+    </div>
+    <div style="display: block; margin: 30px auto;">
+        <h4 class="mt-3"
+            style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+            Enable Customer Screen Allow option from POS Settings, also enable methods to show customer screen
+        </h4>
+        <img src="./assets/screenshots/2.png" class="img-thumbnail">
+    </div>
+
+    <div style="display: block; margin: 30px auto;">
+        <h4 class="mt-3"
+            style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+            A systray icon to open the customer screen at any time with updated order lines
+        </h4>
+        <img src="./assets/screenshots/3.png" class="img-thumbnail">
+    </div>
+
+    <div style="display: block; margin: 30px auto;">
+        <h4 class="mt-3"
+            style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+            Each time we click on the product the customer screen will be updated.
+        </h4>
+        <img src="./assets/screenshots/4.png" class="img-thumbnail">
+    </div>
+
+    <div style="display: block; margin: 30px auto;">
+        <h4 class="mt-3"
+            style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+            The View of Customer Screen with Order lines and a button to open the Modal of Review Section.
+        </h4>
+        <img src="./assets/screenshots/5.png" class="img-thumbnail">
+    </div>
+
+    <div style="display: block; margin: 30px auto;">
+        <h4 class="mt-3"
+            style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+
+            Section for adding Rating and Feedback Fields for Customers.
+        </h4>
+        <img src="./assets/screenshots/7.png" class="img-thumbnail">
+    </div>
+
+    <div style="display: block; margin: 30px auto;">
+        <h4 class="mt-3"
+            style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+            The Review and Feedback Automatically Store in Order View in Backend when Payment Confirm
+        </h4>
+        <img src="./assets/screenshots/8.png" class="img-thumbnail">
+    </div>
+</div>
+
+<!-- SUGGESTED PRODUCTS -->
+<div class="row">
+    <div class="col-lg-12 d-flex flex-column justify-content-center"
+         style="text-align: center; padding: 2.5rem 1rem !important;">
+        <h2 style="color: #212529 !important;">Suggested Products</h2>
+        <hr
+                style="border: 3px solid #714B67 !important; background-color: #714B67 !important; width: 80px !important; margin-bottom: 2rem !important;"/>
+        <div id="demo1" class="row carousel slide" data-ride="carousel">
+            <!-- The slideshow -->
+            <div class="carousel-inner">
+                <div class="carousel-item active" style="min-height:0px">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/export_stockinfo_xls/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                     src="./assets/modules/export_image.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/15.0/custom_gantt_view/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                     src="./assets/modules/gantt_image.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/15.0/sales_credit_limit/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                     src="./assets/modules/credit_image.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <div class="carousel-item" style="min-height:0px">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/base_account_budget/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                     src="./assets/modules/budget_image.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/15.0/product_to_quotation/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                     src="./assets/modules/quotation_image.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/15.0/employee_documents_expiry/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                     src="./assets/modules/employee_image.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <!-- Left and right controls -->
+            <a class="carousel-control-prev" href="#demo1" data-slide="prev"
+               style="left:-25px;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="right:-25px;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 SUGGESTED PRODUCTS -->
+
+<!-- OUR SERVICES -->
+<section class="container" style="margin-top: 6rem !important;">
+    <div class="row">
+        <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+            <h2 style="color: #212529 !important;">Our Services</h2>
+            <hr
+                    style="border: 3px solid #714B67 !important; background-color: #714B67 !important; width: 80px !important; margin-bottom: 2rem !important;"/>
+        </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: #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>
+</section>
+<!-- END OF END OF OUR SERVICES -->
+
+<!-- OUR INDUSTRIES -->
+<section class="container" style="margin-top: 6rem !important;">
+    <div class="row">
+        <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+            <h2 style="color: #212529 !important;">Our Industries</h2>
+            <hr
+                    style="border: 3px solid #714B67 !important; background-color: #714B67 !important; width: 80px !important; margin-bottom: 2rem !important;"/>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 10px; 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: 10px; 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: 10px; 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: 10px; 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: 10px; 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: 10px; 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: 10px; 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: 10px; 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>
+</section>
+
+<!-- END OF END OF OUR INDUSTRIES -->
+
+<!-- FOOTER -->
+<!-- Footer Section -->
+<section class="container" style="margin: 5rem auto 2rem;">
+    <div class="row" style="max-width:1540px;">
+        <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+            <h2 style="color: #212529 !important;">Need Help?</h2>
+            <hr
+                    style="border: 3px solid #714B67 !important; background-color: #714B67 !important; width: 80px !important; margin-bottom: 2rem !important;"/>
+        </div>
+    </div>
+
+    <!-- Contact Cards -->
+    <div class="row d-flex justify-content-center align-items-center"
+         style="max-width:1540px; margin: 0 auto 2rem auto;">
+
+        <div class="col-lg-12"
+             style="padding: 0rem 3rem 2rem; border-radius: 10px; margin-right: 3rem; ">
+
+            <div class="row mt-4">
+                <div class="col-lg-6">
+                    <a href="mailto:odoo@cybrosys.com" target="_blank"
+                       class="btn btn-block mb-2 deep_hover"
+                       style="text-decoration: none;  background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
+                            class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a>
+                </div>
+                <div class="col-lg-6">
+                    <a href="https://api.whatsapp.com/send?phone=918606827707"
+                       target="_blank"
+                       class="btn btn-block mb-2 deep_hover"
+                       style="text-decoration: none;  background-color: #25D366; color: #FFF;  border-radius: 4px;"><i
+                            class="fa fa-whatsapp mr-2"></i>WhatsApp</a>
+                </div>
+            </div>
+        </div>
+
+    </div>
+    <!-- End of Contact Cards -->
+</section>
+<!-- Footer -->
+<section class="oe_container" style="padding: 2rem 3rem 1rem;">
+    <div class="row"
+         style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
+        <!-- Logo -->
+        <div class="col-lg-12 d-flex justify-content-center align-items-center"
+             style="margin-top: 3rem;">
+            <img src="https://www.cybrosys.com/images/logo.png"
+                 width="200px" height="auto"/>
+        </div>
+        <!-- End of Logo -->
+        <div class="col-lg-12">
+            <hr
+                    style="margin-top: 3rem;background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(229,229,229,1) 33%, rgba(229,229,229,1) 58%, rgba(0,212,255,0) 100%); height: 2px; border-style: none;">
+            <!-- End of Footer Section -->
+        </div>
+    </div>
+</section>
+<!-- END OF FOOTER -->
+
+</div>

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.get_order().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.currentOrder.get_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,18 @@
+<?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-name="Chrome" t-inherit="point_of_sale.Chrome" t-inherit-mode="extension" owl="1">
+        <xpath expr="//SyncNotification" position="after">
+                <t t-if="env.pos.config.allow_systray_icon">
+                    <SystrayButtonScreen/>
+                </t>
+        </xpath>
+    </t>
+</templates>

customer_screen_pos/views/pos_config_views.xml

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <record id="pos_config_view_form" model="ir.ui.view">
+        <field name="name">pos.config.view.form.inherit.customer.screen.pos</field>
+        <field name="model">pos.config</field>
+        <field name="inherit_id" ref="point_of_sale.pos_config_view_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//div[@id='accounting_section']" position="after">
+                <h2>Customer Screen</h2>
+                <div class="row mt16 o_settings_container">
+                    <div class="col-12 col-lg-6 o_setting_box">
+                        <label for="allow_customer_screen" string="Customer Screen"/>
+                        <div class="o_setting_left_pane">
+                            <field name="allow_customer_screen"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <div class="text-muted">
+                                Allows the screen share with the customers
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-12 col-lg-6 o_setting_box">
+                        <label for="allow_customer_screen" string="Allow Systray Button"/>
+                        <div class="o_setting_left_pane">
+                            <field name="allow_systray_icon"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <div class="text-muted">
+                                Allows the customer to set
+                                             screen open button in systray
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-12 col-lg-6 o_setting_box">
+                        <label for="allow_customer_screen" string="Allow Product Click"/>
+                        <div class="o_setting_left_pane">
+                            <field name="allow_product_click"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <div class="text-muted">
+                                Allows the customer to set
+                                              screen open when click product
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </xpath>
+        </field>
+    </record>
+</odoo>

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>