Dec 12: [ADD] Initial Commit 'service_charges_pos'

service_charges_pos/README.rst

@@ -0,0 +1,46 @@
+.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg
+    :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
+    :alt: License: AGPL-3
+
+POS Service Charges
+=======================
+This module allows to set service charges for orders in POS by globally and session wise.
+
+Configuration
+=============
+* No additional configurations needed
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+License
+-------
+Affero General Public License v3.0 (AGPL v3)
+(https://www.gnu.org/licenses/agpl-3.0-standalone.html)
+
+Credits
+-------
+* Developer: Aysha Shalin, 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>`__

service_charges_pos/__init__.py

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

service_charges_pos/__manifest__.py

@@ -0,0 +1,51 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Aysha Shalin (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': 'POS Service Charges',
+    'version': '15.0.1.0.0',
+    'category': 'Point Of Sale',
+    'summary': 'Add service charges to the Orders from POS.',
+    'description': """This module enables to set service charges for orders in 
+    POS globally and session wise.""",
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': 'https://www.cybrosys.com',
+    'depends': ['base', 'point_of_sale'],
+    'data': [
+        'views/res_config_settings_views.xml',
+        'views/pos_config_views.xml',
+    ],
+    'assets': {
+        'point_of_sale.assets': [
+            'service_charges_pos/static/src/js/service_charge_button.js',
+        ],
+        'web.assets_qweb': [
+            'service_charges_pos/static/src/xml/ServiceChargeButton.xml',
+        ],
+    },
+    'images': ['static/description/banner.png'],
+    'license': 'AGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

service_charges_pos/doc/RELEASE_NOTES.md

@@ -0,0 +1,7 @@
+## Module <service_charges_pos>
+
+#### 20.07.2024
+#### Version 15.0.1.0.0
+##### ADD
+
+- Initial commit for POS Service Charges

service_charges_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: Aysha Shalin (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_session
+from . import res_config_settings

service_charges_pos/models/pos_config.py

@@ -0,0 +1,149 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Aysha Shalin (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 api, fields, models
+
+
+class PosConfig(models.Model):
+    """ Inherits POS Configuration """
+    _inherit = 'pos.config'
+
+    is_session = fields.Boolean(string="Session",
+                                compute='_compute_is_session',
+                                help="Check it is for sessions", )
+    is_service_charges = fields.Boolean(string="Service Charges",
+                                        help="Enable to add service charge")
+    charge_type = fields.Selection(
+        [('amount', 'Amount'),
+         ('percentage', 'Percentage')],
+        string='Type', default='amount',
+        help="Can choose charge percentage or amount")
+    service_charge = fields.Float(string='Service Charge',
+                                  help="Charge need to apply")
+    service_product_id = fields.Many2one(
+        'product.product',
+        string='Service Product',
+        domain="[('available_in_pos', '=', "
+               "True),"
+               "('sale_ok', '=', True), "
+               "('type', '=', 'service')]",
+        help="Service product")
+
+    has_service_charge = fields.Boolean(string='Service charge',
+                                        compute="_compute_has_service_charge")
+    config_visibility = fields.Selection([
+        ('global', 'Global'),
+        ('session', 'Session')],
+        string="Visibility", compute="_compute_config_visibility",
+        help='Setup the Service charge globally or per session')
+    config_selection = fields.Selection([
+        ('amount', 'Amount'),
+        ('percentage', 'Percentage')],
+        string='Selection type', compute="_compute_config_selection",
+        help='Set the service charge as a amount or percentage')
+    config_charge = fields.Float(string='Charge',
+                                 compute="_compute_config_charge",
+                                 help='Set a default service charge globally')
+    config_product_id = fields.Many2one('product.product',
+                                        string='Service Product',
+                                        domain="[('available_in_pos', '=', "
+                                               "True),"
+                                               "('sale_ok', '=', True), "
+                                               "('type', '=', 'service')]",
+                                        compute="_compute_config_product",
+                                        help='Set a service product globally')
+
+    def _compute_is_session(self):
+        """ To check the service charge is set for session wise or globally """
+        check_session = self.env['ir.config_parameter'].sudo().get_param(
+            'service_charges_pos.visibility')
+        if check_session == 'session':
+            self.is_session = True
+        else:
+            self.is_session = False
+
+    @api.onchange('is_service_charges')
+    def onchange_is_service_charges(self):
+        """ When the service charge is enabled set the service product and
+        amount by default per session. """
+        if self.is_service_charges:
+            if not self.service_product_id:
+                domain = [('available_in_pos', '=', True),
+                          ('sale_ok', '=', True), ('type', '=', 'service')]
+                self.service_product_id = self.env['product.product'].search(
+                    domain, limit=1)
+                self.service_charge = 10.0
+        else:
+            self.service_product_id = False
+            self.service_charge = 0.0
+
+    def _compute_has_service_charge(self):
+        """ To check if service charge is enabled from settings """
+        if self.env['ir.config_parameter'].sudo().get_param(
+                'service_charges_pos.enable_service_charge'):
+            self.has_service_charge = True
+        else:
+            self.has_service_charge = False
+
+    def _compute_config_visibility(self):
+        """ To obtain service charge type from res.config.settings """
+        res = self.env['ir.config_parameter'].sudo()
+        if res.get_param(
+                'service_charges_pos.enable_service_charge'):
+            settings_visibility = res.get_param(
+                'service_charges_pos.visibility')
+            self.config_visibility = settings_visibility
+        else:
+            self.config_visibility = ''
+
+    def _compute_config_charge(self):
+        """ To obtain service charge from res.config.settings """
+        res = self.env['ir.config_parameter'].sudo()
+        if res.get_param(
+                'service_charges_pos.enable_service_charge'):
+            charge = res.get_param(
+                'service_charges_pos.global_charge')
+            self.config_charge = charge
+        else:
+            self.config_charge = 0
+
+    def _compute_config_selection(self):
+        """ To obtain service charge mode from res.config.settings """
+        res = self.env['ir.config_parameter'].sudo()
+        if res.get_param(
+                'service_charges_pos.enable_service_charge'):
+            selection = res.get_param(
+                'service_charges_pos.global_selection')
+            self.config_selection = selection
+        else:
+            self.config_selection = ''
+
+    def _compute_config_product(self):
+        """ To obtain service charge product from res.config.settings """
+        res = self.env['ir.config_parameter'].sudo()
+        if res.get_param(
+                'service_charges_pos.enable_service_charge'):
+            product_id = res.get_param(
+                'service_charges_pos.global_product_id')
+            product = self.env['product.template'].browse(int(product_id))
+            self.config_product_id = product.id
+        else:
+            self.config_product_id = ''

service_charges_pos/models/pos_session.py

@@ -0,0 +1,48 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Aysha Shalin (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 models
+
+
+class PosSession(models.Model):
+    """ Inherits POS Session """
+    _inherit = 'pos.session'
+
+    def _pos_ui_models_to_load(self):
+        """ Supering the function for loading res.config.settings to pos
+        session"""
+        result = super()._pos_ui_models_to_load()
+        result.append('res.config.settings')
+        return result
+
+    def _loader_params_res_config_settings(self):
+        """ Returning the field required """
+        return {
+            'search_params': {
+                'fields': ['enable_service_charge', 'visibility',
+                           'global_selection', 'global_charge',
+                           'global_product_id'],
+            },
+        }
+
+    def _get_pos_ui_res_config_settings(self, params):
+        """ Returns the model """
+        return self.env['res.config.settings'].sudo().search_read(**params['search_params'])

service_charges_pos/models/res_config_settings.py

@@ -0,0 +1,71 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Aysha Shalin (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 api, fields, models
+
+
+class ResConfigSettings(models.TransientModel):
+    """ Inherits configuration Settings """
+    _inherit = "res.config.settings"
+
+    enable_service_charge = fields.Boolean(
+        string="Service Charges",
+        config_parameter="service_charges_pos.enable_service_charge",
+        help="Enable to add service charge")
+    visibility = fields.Selection([
+        ('global', 'Global'),
+        ('session', 'Session')],
+        default='global', string="Visibility",
+        config_parameter="service_charges_pos.visibility",
+        help='Setup the Service charge globally or per session')
+    global_selection = fields.Selection([
+        ('amount', 'Amount'),
+        ('percentage', 'Percentage')],
+        string='Type', default='amount',
+        config_parameter="service_charges_pos.global_selection",
+        help='Set the service charge as a amount or percentage')
+    global_charge = fields.Float(
+        string='Service Charge',
+        default=10,
+        config_parameter="service_charges_pos.global_charge",
+        help='Set a default service charge globally')
+    global_product_id = fields.Many2one(
+        'product.product',
+        string='Service Product',
+        domain="[('available_in_pos', '=', True),"
+               " ('sale_ok', '=', True),('type', '=', 'service')]",
+        config_parameter="service_charges_pos.global_product_id",
+        help='Set a service product globally')
+
+    @api.onchange('enable_service_charge')
+    def onchange_enable_service_charge(self):
+        """ When the service charge is enabled, set service product and amount
+        by default globally """
+        if self.enable_service_charge:
+            if not self.global_product_id:
+                domain = [('available_in_pos', '=', True),
+                          ('sale_ok', '=', True), ('type', '=', 'service')]
+                self.global_product_id = self.env[
+                    'product.product'].search(
+                    domain, limit=1)
+        else:
+            self.global_product_id = False
+            self.global_charge = 0.0

service_charges_pos/static/description/index.html

@@ -0,0 +1,545 @@
+<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 class="my-3 d-flex align-items-center">
+                <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>
+        </div>
+    </div>
+</div>
+
+<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;">
+                POS Service Charges
+            </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;">
+                This module allows you to set service charges for an order by globally and session wise.
+            </p>
+            <img src="./assets/screenshots/hero.gif" class="img-responsive" width="100%" height="auto" />
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-12" style="border-bottom: 1px solid #d5d5d5 !important; margin-bottom: 2rem !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-compass mr-2"></i>Explore this module
+            </h2>
+        </div>
+        <div class="col-md-6">
+            <a href="#overview" style="text-decoration: none !important;">
+                <div class="row" style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;">
+                    <div class="col-8">
+                        <h3 style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;">Overview</h3>
+                        <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;">
+                            Learn more about this module
+                        </p>
+                    </div>
+                    <div class="col-4 text-right d-flex justify-content-end align-items-center">
+                        <i class="fa fa-chevron-right" style="color: #714B67 !important;"></i>
+                    </div>
+                </div>
+            </a>
+        </div>
+        <div class="col-md-6">
+            <a href="#configuration" style="text-decoration: none !important;">
+                <div class="row" style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;">
+                    <div class="col-8">
+                        <h3 style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;">
+                            Configuration</h3>
+                        <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;">
+                            View configurations for this module
+                        </p>
+                    </div>
+                    <div class="col-4 text-right d-flex justify-content-end align-items-center">
+                        <i class="fa fa-chevron-right" style="color: #714B67 !important;"></i>
+                    </div>
+                </div>
+            </a>
+        </div>
+        <div class="col-md-6">
+            <a href="#features" style="text-decoration: none !important;">
+                <div class="row" style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;">
+                    <div class="col-8">
+                        <h3 style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;">
+                            Features</h3>
+                        <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;">
+                            View features of this module
+                        </p>
+                    </div>
+                    <div class="col-4 text-right d-flex justify-content-end align-items-center">
+                        <i class="fa fa-chevron-right" style="color: #714B67 !important;"></i>
+                    </div>
+                </div>
+            </a>
+        </div>
+        <div class="col-md-6">
+            <a href="#screenshots" style="text-decoration: none !important;">
+                <div class="row" style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;">
+                    <div class="col-8">
+                        <h3 style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;">Screenshots</h3>
+                        <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;">
+                            See key screenshots of this module
+                        </p>
+                    </div>
+                    <div class="col-4 text-right d-flex justify-content-end align-items-center">
+                        <i class="fa fa-chevron-right" style="color: #714B67 !important;"></i>
+                    </div>
+                </div>
+            </a>
+        </div>
+    </div>
+
+    <div class="row" id="overview">
+        <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-pie-chart mr-2"></i>Overview
+            </h2>
+        </div>
+
+        <div class="col-mg-12 pl-3">
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important; line-height: 30px !important;">
+                This module crafted by Cybrosys Technologies provides an option to set the Service charge in every order of POS.
+                The main feature of the module is possible to set the Service charge for every session or globally.
+            </p>
+        </div>
+    </div>
+    <div class="row" id="features">
+        <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-star mr-2"></i>Features
+            </h2>
+        </div>
+        <div class="col-md-6 pl-3 py-3 d-flex">
+            <div>
+                <img src="assets/icons/check.png">
+            </div>
+            <div>
+                <h4 style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+                    Global or session</h4>
+                <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                    When enable the service charge in configuration settings of POS you can choose either Global or session.
+                </p>
+            </div>
+        </div>
+        <div class="col-md-6 pl-3 py-3 d-flex">
+            <div>
+                <img src="assets/icons/check.png">
+            </div>
+            <div>
+                <h4 style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+                    Default Service charge</h4>
+                <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                    You can set a default service charge.
+                </p>
+            </div>
+        </div>
+        <div class="col-md-6 pl-3 py-3 d-flex">
+            <div>
+                <img src="assets/icons/check.png">
+            </div>
+            <div>
+                <h4 style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+                    Percentage or amount</h4>
+                <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                  We can set the service charge as percentage or amount.
+                </p>
+            </div>
+        </div>
+        <div class="col-md-6 pl-3 py-3 d-flex">
+            <div>
+                <img src="assets/icons/check.png">
+            </div>
+            <div>
+                <h4 style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+                    Dynamical service charge</h4>
+                <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                    Possible to set the service charge dynamically for a order.
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <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 class="col-lg-12 my-2">
+            <h4 class="mt-2" style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">Configuration Settings for Service charge(Globally)</h4>
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                In the general settings of POS, you can see the option Service charge.Enable the option and under that you can see the option 'Global' and 'Session'.</br>
+                Service Product: You can choose a service product there.The Latest service product will be there by default(should be service and can be sold)</br>
+                Type: The service charge can be added on the order as amount or percentage of the total amount.
+            </p>
+            <img src="assets/screenshots/1.png" class="img-responsive img-thumbnail border" width="100%" height="auto" />
+        </div>
+        <div class="col-lg-12 my-2">
+            <h4 class="mt-2" style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">Service charge Button</h4>
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                You can see the Service charge button.Clicking the button will lead to a NumberPopup with the default service charge that we set before.
+            </p>
+            <img src="assets/screenshots/2.png" class="img-responsive img-thumbnail border" width="100%" height="auto" />
+        </div>
+        <div class="col-lg-12 my-2">
+            <img src="assets/screenshots/3.png" class="img-responsive img-thumbnail border" width="100%" height="auto" />
+        </div>
+        <div class="col-lg-12 my-2">
+            <h4 class="mt-2" style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">Percentage</h4>
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                You can also add the percentage of total amount as service charge by enabling the field percentage in settings.
+            </p>
+            <img src="assets/screenshots/4.png" class="img-responsive img-thumbnail border" width="100%" height="auto" />
+        </div>
+        <div class="col-lg-12 my-2">
+            <img src="assets/screenshots/5.png" class="img-responsive img-thumbnail border" width="100%" height="auto" />
+        </div>
+        <div class="col-lg-12 my-2">
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                15% of the total amount is added as service charge on order.
+            </p>
+            <img src="assets/screenshots/6.png" class="img-responsive img-thumbnail border" width="100%" height="auto" />
+        </div>
+        <div class="col-lg-12 my-2">
+            <h4 class="mt-2" style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">Configuration Settings for Service charge(Session)</h4>
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                Enable the selection field 'session'.If enable it the service charge will appear on every session.
+            </p>
+            <img src="assets/screenshots/7.png" class="img-responsive img-thumbnail border" width="100%" height="auto" />
+        </div>
+        <div class="col-lg-12 my-2">
+            <p style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;">
+                In every session you can see the option.Then you can set service charge percentage or amount as like global.
+            </p>
+            <img src="assets/screenshots/8.png" class="img-responsive img-thumbnail border" width="100%" height="auto" />
+        </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/point_of_sale_logo/" 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/point_of_sale_logo.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/pos_magnify_image/" 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/pos_magnify_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/pos_product_creation/" 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/pos_product_creation.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/pos_mrp_order/" 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/pos_mrp_order.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/pos_order_line_image/" 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/pos_order_line_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_exchange_pos_sys/" 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/product_exchange_pos_sys.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>

service_charges_pos/static/src/js/service_charge_button.js

@@ -0,0 +1,108 @@
+odoo.define('service_charges_pos.ServiceChargeButton', function(require) {
+    'use strict';
+
+    const PosComponent = require('point_of_sale.PosComponent');
+    const ProductScreen = require('point_of_sale.ProductScreen');
+    const Registries = require('point_of_sale.Registries');
+    const {useListener} = require("@web/core/utils/hooks");
+
+    class ServiceChargeButton extends PosComponent {
+        setup() {
+            super.setup();
+            useListener('click', this._onClick);
+        }
+        // Click event for button service charge
+        async _onClick() {
+            if (this.env.pos.config.has_service_charge){
+                var global_selection = this.env.pos.config.config_selection
+                var global_charge = this.env.pos.config.config_charge
+                var visibility = this.env.pos.config.config_visibility
+                var global_product = this.env.pos.config.config_product_id[0]
+
+                var order = this.env.pos.get_order();
+                var lines = order.get_orderlines();
+                if (visibility == 'global') {
+                    var product = this.env.pos.db.get_product_by_id(global_product)
+                    if (product === undefined) {
+                        await this.showPopup('ErrorPopup', {
+                            title: this.env._t("No service product found"),
+                            body: this.env._t("The service product seems misconfigured. Make sure it is flagged as 'Can be Sold' and 'Available in Point of Sale'."),
+                        });
+                        return;
+                    }
+                    // Remove existing discounts
+                    lines.filter(line => line.get_product() === product)
+                        .forEach(line => order.remove_orderline(line));
+                    const {
+                        confirmed,
+                        payload
+                    } = await this.showPopup('NumberPopup', {
+                        title: this.env._t('Service Charge'),
+                        startingValue: parseInt(global_charge),
+                        isInputSelected: true
+                    });
+                    if (confirmed)
+                        if (payload > 0) {
+                            if (global_selection == 'amount') {
+                                order.add_product(product, {
+                                    price: payload
+                                });
+                            } else {
+                                var total_amount = order.get_total_with_tax()
+                                var per_amount = payload / 100 * total_amount
+                                order.add_product(product, {
+                                    price: per_amount
+                                });
+                            }
+                        }
+
+                } else {
+                    var type = this.env.pos.config.charge_type
+                    var product = this.env.pos.db.get_product_by_id(this.env.pos.config.service_product_id[0]);
+                    if (product === undefined) {
+                        await this.showPopup('ErrorPopup', {
+                            title: this.env._t("No service product found"),
+                            body: this.env._t("The service product seems misconfigured. Make sure it is flagged as 'Can be Sold' and 'Available in Point of Sale'."),
+                        });
+                        return;
+                    }
+                    // Remove existing discounts
+                    lines.filter(line => line.get_product() === product)
+                        .forEach(line => order.remove_orderline(line));
+                    const {
+                        confirmed,
+                        payload
+                    } = await this.showPopup('NumberPopup', {
+                        title: this.env._t('Service Charge'),
+                        startingValue: this.env.pos.config.service_charge,
+                        isInputSelected: true
+                    });
+                    if (confirmed){
+                        if (payload > 0) {
+                            if (type == 'amount') {
+                                order.add_product(product, {
+                                    price: payload
+                                });
+                            } else {
+                                var total_amount = order.get_total_with_tax()
+                                var per_amount = payload / 100 * total_amount
+                                order.add_product(product, {
+                                    price: per_amount
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    ServiceChargeButton.template = 'service_charges_pos.ServiceChargeButton';
+    ProductScreen.addControlButton({
+        component: ServiceChargeButton,
+        condition: function() {
+            return true
+        },
+    });
+    Registries.Component.add(ServiceChargeButton);
+    return ServiceChargeButton;
+});

service_charges_pos/static/src/xml/ServiceChargeButton.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <!-- Template for service charge button in product screen -->
+    <t t-name="service_charges_pos.ServiceChargeButton" owl="1">
+        <t t-if="env.pos.config.has_service_charge">
+            <div class="control-button">
+                <i class="fa fa-calculator" role="img" aria-label="Service Charge" title="Service Charge"/>
+                Service Charge
+            </div>
+        </t>
+    </t>
+</templates>

service_charges_pos/views/pos_config_views.xml

@@ -0,0 +1,48 @@
+<?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.service.charges.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='other_devices']" position="after">
+                <div class="col-xs-12 col-lg-6 o_setting_box" attrs="{'invisible':[('is_session','=',False)]}">
+                    <div class="o_setting_left_pane">
+                        <field name="is_session" invisible="1"/>
+                    </div>
+                    <div class="o_setting_left_pane">
+                        <field name="is_service_charges"/>
+                    </div>
+                    <div class="o_setting_right_pane">
+                        <label for="is_service_charges"/>
+                        <div class="text-muted">Allow service charges on
+                            orders
+                        </div>
+                        <div class="content-group "
+                             attrs="{'invisible':[('is_service_charges','=',False)]}">
+                            <div class="row">
+                                <label for="charge_type"
+                                       class="col-lg-3 o_light_label"/>
+                                <field name="charge_type" widget="radio"
+                                       options="{'horizontal': true}"
+                                       class="o_light_label"
+                                       attrs="{'required':[('is_service_charges','=',True)]}"/>
+                            </div>
+                            <div class="row mt16">
+                                <label for="service_product_id"
+                                       class="col-lg-3 o_light_label"/>
+                                <field name="service_product_id"
+                                       attrs="{'required':[('is_service_charges','=',True)]}"/>
+                            </div>
+                            <div class="row">
+                                <label for="service_charge"
+                                       class="col-lg-3 o_light_label"/>
+                                <field name="service_charge"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </xpath>
+        </field>
+    </record>
+</odoo>

service_charges_pos/views/res_config_settings_views.xml

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <record id="res_config_settings_view_form" model="ir.ui.view">
+        <field name="name">res.config.settings.view.form.inherit.service.charges.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='multiple_prices_setting']" position="after">
+                <div class="col-xs-12 col-lg-6 o_setting_box">
+                    <div class="o_setting_left_pane">
+                        <field name="enable_service_charge"/>
+                    </div>
+                    <div class="o_setting_right_pane">
+                        <label for="enable_service_charge"/>
+                        <div class="text-muted">Allow service charges on
+                            orders
+                        </div>
+                        <div class="row" attrs="{'invisible':[('enable_service_charge','=',False)]}">
+                                <label for="visibility"
+                                       class="col-lg-3 o_light_label"/>
+                                <field name="visibility" widget="radio"
+                                       options="{'horizontal': true}"
+                                       class="o_light_label"
+                                       attrs="{'required':[('enable_service_charge','=',True)]}"/>
+                            </div>
+                        <div class="content-group "
+                             attrs="{'invisible':['|',('enable_service_charge','=',False),('visibility','=','session')]}">
+                            <div class="row">
+                                <label for="global_selection"
+                                       class="col-lg-3 o_light_label"/>
+                                <field name="global_selection" widget="radio"
+                                       options="{'horizontal': true}"
+                                       class="o_light_label"
+                                       attrs="{'required':[('enable_service_charge','=',True)]}"/>
+                            </div>
+                            <div class="row mt16">
+                                <label for="global_product_id"
+                                       class="col-lg-3 o_light_label"/>
+                                <field name="global_product_id"
+                                       attrs="{'required':[('enable_service_charge','=',True)]}"/>
+                            </div>
+                            <div class="row">
+                                <label for="global_charge"
+                                       class="col-lg-3 o_light_label"/>
+                                <field name="global_charge"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </xpath>
+        </field>
+    </record>
+</odoo>