Dec 26 : [ADD] Initial Commit 'mail_push_notification'

mail_push_notification/README.rst

@@ -0,0 +1,48 @@
+.. image:: https://img.shields.io/badge/license-LGPL--3-green.svg
+    :target: https://www.gnu.org/licenses/lgpl-3.0-standalone.html
+    :alt: License: LGPL-3
+
+Push Notification From ChatBox
+==============================
+* Push Notification From ChatBox is valuable for teams looking to streamline communication and enhance productivity within the Odoo platform.
+
+Configuration
+=============
+* Install the pyfcm python package
+* Install our module and make sure that your instance served over https.Firebase is intent on being a highly secure solution, so they have chosen to require the use of a https for all communication and http is not working.
+* After installation of module its important that allow the notification access in the webpage
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+License
+-------
+General Public License, Version 3 (LGPL v3).
+(https://www.gnu.org/licenses/lgpl-3.0-standalone.html)
+
+Credits
+-------
+Developer: (V15) Gokul P I , 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>`__

mail_push_notification/__init__.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Gokul PI (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import controllers
+from . import models

mail_push_notification/__manifest__.py

@@ -0,0 +1,53 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Gokul PI (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+{
+    "name": "Push Notification From ChatBox",
+    'version': '15.0.1.0.0',
+    'category': 'Discuss,Extra Tools',
+    'summary': 'With Push Notification From ChatBox, users can respond promptly'
+               ' to important messages, improving communication efficiency.',
+    'description': 'Push Notification From ChatBox is valuable for teams '
+                   'looking to streamline communication and enhance '
+                   'productivity within the Odoo platform.',
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    "depends": ["web", "mail"],
+    "data": [
+        "security/ir.model.access.csv",
+        "views/res_config_settings_views.xml"
+    ],
+    'assets': {
+        'web.assets_backend': [
+            "https://www.gstatic.com/firebasejs/8.4.3/firebase-app.js",
+            "https://www.gstatic.com/firebasejs/8.4.3/firebase-messaging.js",
+            "mail_push_notification/static/src/js/firebase.js",
+        ],
+    },
+    "external_dependencies": {"python": ["pyfcm"]},
+    'images': ['static/description/banner.jpg'],
+    'license': 'LGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

mail_push_notification/controllers/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Gokul PI (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import mail_push_notification

mail_push_notification/controllers/mail_push_notification.py

@@ -0,0 +1,121 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Gokul PI (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL 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 MailPushNotification(http.Controller):
+    """Controller for handling push notifications using Firebase
+    Cloud Messaging"""
+    @http.route('/firebase-messaging-sw.js', type='http', auth="public")
+    def firebase_http(self):
+        """Returns the Firebase service worker script.
+        :return: The Firebase service worker script.
+        :rtype: str"""
+        if request.env.company and request.env.company.push_notification:
+            firebase_js = """
+            this.addEventListener('fetch', function(e) {
+              e.respondWith(
+                caches.match(e.request).then(function(response) {
+                  return response || fetch(e.request);
+                })
+              );
+            });
+            importScripts('https://www.gstatic.com/firebasejs/8.4.2/firebase-app.js');
+            importScripts('https://www.gstatic.com/firebasejs/8.4.2/firebase-messaging.js');
+            var firebaseConfig = {
+                apiKey: '%s',
+                authDomain: '%s',
+                projectId: '%s',
+                storageBucket: '%s',
+                messagingSenderId: '%s',
+                appId: '%s',
+                measurementId: '%s',
+            };
+            firebase.initializeApp(firebaseConfig);
+            const messaging = firebase.messaging();
+            messaging.setBackgroundMessageHandler(function(payload) {
+            const notificationTitle = "Background Message Title";
+            const notificationOptions = {
+                body: payload.notification.body,
+                icon:'/mail_push_notification/static/description/icon.png',
+            };
+            return self.registration.showNotification(
+                notificationTitle,
+                notificationOptions,
+            );
+            });
+            """ % (
+                request.env.company.api_key, request.env.company.auth_domain,
+                request.env.company.project_id_firebase,
+                request.env.company.storage_bucket,
+                request.env.company.messaging_sender_id_firebase,
+                request.env.company.app_id_firebase,
+                request.env.company.measurement_id_firebase)
+        else:
+            firebase_js = """
+                this.addEventListener('fetch', function(e) {
+                  e.respondWith(
+                    caches.match(e.request).then(function(response) {
+                      return response || fetch(e.request);
+                    })
+                  );
+                });
+            """
+        return http.request.make_response(firebase_js, [
+            ('Content-Type', 'text/javascript')])
+
+    @http.route('/push_notification', type='http', auth="public",
+                csrf=False)
+    def get_registration_tokens(self, **post):
+        """Handles registration tokens for push notifications.
+         Create a new registration token if it doesn't already exist
+        :param post: POST request data containing registration token.
+        :type post: dict
+       """
+        user_notification = request.env['push.notification'].sudo().search(
+            [('register_id', '=', post.get('name'))], limit=1)
+        if not user_notification:
+            request.env['push.notification'].sudo().create({
+                'register_id': post.get('name'),
+                'user_id': request.env.user.id
+            })
+
+    @http.route('/firebase_config_details', type='json', auth="public")
+    def send_datas(self):
+        """Sends Firebase configuration details.
+        :return: JSON containing Firebase configuration details.
+        :rtype: str"""
+        if request.env.company and request.env.company.push_notification:
+            return json.dumps({
+                'vapid': request.env.company.vapid,
+                'config': {
+                    'apiKey': request.env.company.api_key,
+                    'authDomain': request.env.company.auth_domain,
+                    'projectId': request.env.company.project_id_firebase,
+                    'storageBucket': request.env.company.storage_bucket,
+                    'messagingSenderId': request.env.company.messaging_sender_id_firebase,
+                    'appId': request.env.company.app_id_firebase,
+                    'measurementId': request.env.company.measurement_id_firebase
+                }
+            })

mail_push_notification/doc/RELEASE_NOTES.md

@@ -0,0 +1,6 @@
+## Module <mail_push_notification>
+
+#### 24.11.2023
+#### Version 15.0.1.0.0
+#### ADD
+- Initial commit for Push Notification From ChatBox

mail_push_notification/models/__init__.py

@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Gokul PI (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import mail_thread
+from . import push_notification
+from . import res_company
+from . import res_config_settings

mail_push_notification/models/mail_thread.py

@@ -0,0 +1,67 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Gokul PI (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from pyfcm import FCMNotification
+from odoo import models
+
+
+class MailThread(models.AbstractModel):
+    """Inherits MailThread to send notifications using chatterbox"""
+    _inherit = 'mail.thread'
+
+    def _notify_thread(self, message, msg_vals=False, notify_by_email=True,
+                       **kwargs):
+        """Supering the _notify_thread() function to fetch the details of the
+         chat message and push that message as a notification """
+        msg = message.read()
+        res = super(MailThread, self)._notify_thread(
+            message, msg_vals=msg_vals, notify_by_email=notify_by_email,
+            **kwargs)
+        if self.env.company.push_notification and self.env.user.has_group(
+                'base.group_user'):
+            try:
+                push_service = FCMNotification(
+                    api_key=self.env.company.server_key)
+                domain = []
+                receiver_id = False
+                if self.is_chat or self.channel_type == 'group':
+                    for channel_partners in self.channel_last_seen_partner_ids.filtered(
+                            'partner_id'):
+                        if channel_partners.partner_id.id != \
+                                msg[0]['author_id'][0]:
+                            receiver_id = self.env['res.users'].search([(
+                                'partner_id',
+                                '=',
+                                channel_partners.partner_id.id)])
+                if receiver_id:
+                    domain = [('user_id', '=', receiver_id.id)]
+                registration_ids = self.env['push.notification'].search(domain)
+                push_service.notify_multiple_devices(
+                    registration_ids=[registration_id.register_id for
+                                      registration_id in registration_ids],
+                    message_title='Send by ' + msg[0]['author_id'][1],
+                    message_body=msg[0]['description'],
+                    extra_notification_kwargs={
+                        'click_action': '/web'
+                    })
+            except Exception:
+                pass
+        return res

mail_push_notification/models/push_notification.py

@@ -0,0 +1,34 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Gokul PI (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from odoo import fields, models
+
+
+class PushNotification(models.Model):
+    """Using this class create the registration id for the user to send
+        push notifications"""
+    _name = 'push.notification'
+    _description = 'Web Push Notification'
+
+    user_id = fields.Many2one("res.users", string="Firebase User",
+                              help="Corresponding Firebase User")
+    register_id = fields.Char(string="Registration Id",
+                              help="Firebase Registration Token")

mail_push_notification/models/res_company.py

@@ -0,0 +1,56 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Gokul PI (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from odoo import fields, models
+
+
+class ResCompany(models.Model):
+    """Inheriting this class to add the firebase credential need in config
+            settings and use the multi company feature"""
+    _inherit = 'res.company'
+
+    push_notification = fields.Boolean(string='Enable Push Notification',
+                                       help="Enable Web Push Notification")
+    server_key = fields.Char(string="Server Key",
+                             help="Server Key of the firebase")
+    vapid = fields.Char(string="Vapid", help='VapId of the firebase',
+                        readonly=False)
+    api_key = fields.Char(string="Api Key",
+                          help='Corresponding apiKey of firebase config',
+                          readonly=False)
+    auth_domain = fields.Char(string="Auth Domain",
+                              help='Corresponding authDomain of firebase '
+                                   'config')
+    project_id_firebase = fields.Char(string="Project Id",
+                                      help='Corresponding projectId of '
+                                           'firebase config')
+    storage_bucket = fields.Char(string="Storage Bucket",
+                                 help='Corresponding storageBucket of '
+                                      'firebase config')
+    messaging_sender_id_firebase = fields.Char(string="Messaging Sender Id",
+                                               help='Corresponding '
+                                                    'messagingSenderId of '
+                                                    'firebase config')
+    app_id_firebase = fields.Char(string="App Id",
+                                  help='Corresponding appId of firebase config')
+    measurement_id_firebase = fields.Char(string="Measurement Id",
+                                          help='Corresponding measurementId '
+                                               'of firebase config')

mail_push_notification/models/res_config_settings.py

@@ -0,0 +1,116 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Gokul PI (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL 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 LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from pyfcm import FCMNotification
+from odoo import fields, models, _
+
+
+class ResConfigSettings(models.TransientModel):
+    """Inheriting the ResConfigSettings to add the firebase config details
+        to push notifications """
+    _inherit = 'res.config.settings'
+
+    push_notification = fields.Boolean(string='Enable Push Notification',
+                                       help="Enable Web Push Notification",
+                                       related='company_id.push_notification',
+                                       readonly=False)
+    server_key = fields.Char(string="Server Key",
+                             help="Server Key of the firebase",
+                             related='company_id.server_key', readonly=False)
+    vapid = fields.Char(string="Vapid", help='VapId of the firebase',
+                        related='company_id.vapid', readonly=False)
+    api_key = fields.Char(string="Api Key",
+                          help='Corresponding apiKey of firebase config',
+                          related='company_id.api_key', readonly=False)
+    auth_domain = fields.Char(string="Auth Domain",
+                              help='Corresponding authDomain of firebase '
+                                   'config',
+                              related='company_id.auth_domain', readonly=False)
+    project_id_firebase = fields.Char(string="Project Id",
+                                      help='Corresponding projectId of '
+                                           'firebase config',
+                                      related='company_id.project_id_firebase',
+                                      readonly=False)
+    storage_bucket = fields.Char(string="Storage Bucket",
+                                 help='Corresponding storageBucket of '
+                                      'firebase config',
+                                 related='company_id.storage_bucket',
+                                 readonly=False)
+    messaging_sender_id_firebase = fields.Char(string="Messaging Sender Id",
+                                               help='Corresponding '
+                                                    'messagingSenderId of '
+                                                    'firebase config',
+                                               related='company_id'
+                                                       '.messaging_sender_id_firebase',
+                                               readonly=False)
+    app_id_firebase = fields.Char(string="App Id",
+                                  help='Corresponding appId of firebase config',
+                                  related='company_id.app_id_firebase',
+                                  readonly=False)
+    measurement_id_firebase = fields.Char(string="Measurement Id",
+                                          help='Corresponding measurementId '
+                                               'of firebase config',
+                                          related='company_id'
+                                                  '.measurement_id_firebase',
+                                          readonly=False)
+
+    def test_connection(self):
+        """Test connection to firebase using the firebase credentials"""
+        if self.env.company.push_notification:
+            try:
+                push_service = FCMNotification(
+                    api_key=self.env.company.server_key)
+                registration_ids = self.env['push.notification'].sudo().search(
+                    [('user_id', '=', self.env.user.id)])
+                push_service.notify_multiple_devices(
+                    registration_ids=[registration_id.register_id for
+                                      registration_id in registration_ids],
+                    message_title='Test Connection',
+                    message_body='Successfully',
+                    extra_notification_kwargs={
+                        'click_action': '/web'
+                    })
+                return {
+                    'type': 'ir.actions.client',
+                    'tag': 'display_notification',
+                    'params': {
+                        'type': 'success',
+                        'message': _("Connection successfully established"),
+                        'next': {
+                            'type': 'ir.actions.client',
+                            'tag': 'reload_context',
+                        },
+                    }
+                }
+            except:
+                return {
+                    'type': 'ir.actions.client',
+                    'tag': 'display_notification',
+                    'params': {
+                        'type': 'danger',
+                        'message': _(
+                            "Failed to connect with firebase"),
+                        'next': {
+                            'type': 'ir.actions.client',
+                            'tag': 'reload_context',
+                        },
+                    }
+                }

mail_push_notification/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_push_notification_user,access.push.notification.user,model_push_notification,base.group_user,1,1,1,1

mail_push_notification/static/description/index.html

@@ -0,0 +1,792 @@
+<div style="background-color: #714B67; min-height: 600px; width: 100%; padding: 15px; position: relative;">
+    <!-- TITLE BAR -->
+    <div class="d-flex align-items-center justify-content-between"
+         style="border-bottom: 1px solid #875A7B; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
+        <img src="./assets/misc/cybrosys-logo.png" width="42" height="42"
+             style="width: 42px; height: 42px;"/>
+        <div>
+            <div style="color: #7C7BAD; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Community
+            </div>
+            <div style="color: #875A7B; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Enterprise
+            </div>
+            <div style="color: #017E84; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Odoo.sh
+            </div>
+        </div>
+    </div>
+    <!-- END OF TITLE BAR -->
+    <div class="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;">
+        <!-- APP HERO -->
+        <h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;">
+            Push Notification From ChatBox</h1>
+        <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;">
+            Push Notification From ChatBox Provide Alerts To Users When They
+            Receive
+            New Message From The Chatter</p>
+        <!-- END OF APP HERO -->
+        <img src="./assets/screenshots/hero.gif"
+             style="width: 75%; height: auto; position: absolute; margin-left: auto; margin-right: auto; top: 45%; left: 12%; right: auto;"/>
+    </div>
+
+</div>
+
+<!-- NAVIGATION SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px; margin-top: 300px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="./assets/misc/compass.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Explore This
+        Module</h2>
+</div>
+<div class="row my-4" style="font-family: 'Montserrat', sans-serif;">
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#overview">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Overview</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">Learn More About this module</span>
+                </div>
+                <img src="./assets/misc/right-arrow.png" width="36"
+                     height="36"/>
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#features">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Features</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+            features of this
+            module</span>
+                </div>
+                <img src="./assets/misc/right-arrow.png" width="36"
+                     height="36"/>
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#screenshots">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Screenshots</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+            screenshots for this
+            module</span>
+                </div>
+                <img src="./assets/misc/right-arrow.png" width="36"
+                     height="36"/>
+            </div>
+        </a>
+    </div>
+</div>
+<!-- END OF NAVIGATION SECTION -->
+
+<!-- OVERVIEW SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;"
+     id="overview">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="./assets/misc/pie-chart.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Overview
+    </h2>
+</div>
+<div class="row"
+     style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 py-4">
+        Push Notification From ChatBox in Odoo provide instant alerts to users
+        when
+        they receive new messages within the platform. These real-time. They
+        work seamlessly across devices and integrate with other Odoo
+        applications. With Push Notification From ChatBox, users can respond
+        promptly
+        to important messages,improving communication efficiency.
+    </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" style="margin-bottom: auto"
+                 class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Real-time Alerts: Users receive instant notifications on their devices (such as desktop or mobile) as soon as a new message arrives in their Odoo inbox.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 40px; margin-bottom: 40px">
+            <img src="assets/misc/check-box.png" style="margin-bottom: auto"
+                 class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Reduced Response Time: With instant notifications, users can respond promptly to important messages, improving communication efficiency and effectiveness.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 40px; margin-bottom: 40px">
+            <img src="assets/misc/check-box.png" style="margin-bottom: auto"
+                 class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Privacy and Security: The notifications are secure and respect user privacy, as they are confined within the Odoo environment.</span>
+        </div>
+    </div>
+    <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" style="margin-bottom: auto"
+                 class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Message Preview: Notifications typically include a preview of the message content, enabling users to quickly assess the urgency or relevance.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 40px; margin-bottom: 40px">
+            <img src="assets/misc/check-box.png" style="margin-bottom: auto"
+                 class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Compatible with both Odoo 15.0 Community and Enterprise Editions.</span>
+        </div>
+    </div>
+</div>
+<!-- END OF FEATURES SECTION -->
+
+<!-- SCREENSHOTS SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;"
+     id="screenshots">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="./assets/misc/pictures.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Screenshots
+    </h2>
+</div>
+<div class="row">
+    <div class="col-sm-12">
+
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Firebase View</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                First go to <a href="https://console.firebase.google.com/">Firebase
+                console</a>
+                Create a Project if you don't have any project.
+            </p>
+            <img src="./assets/screenshots/fire1.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Set the name for the project and Continue</p>
+            <img src="./assets/screenshots/fire2.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Make sure that enabled the Google Analytics for this project
+                and click the Continue and Create the project</p>
+            <img src="./assets/screenshots/fire3.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Then you need to create web app in that project for that click
+                the web app icon in the project like shown below</p>
+            <img src="./assets/screenshots/fire4.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Set the name for the app and register the app</p>
+            <img src="./assets/screenshots/fire5.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Here you can see all the details we need you can copy them and
+                after that select npm and click the Next Button </p>
+            <img src="./assets/screenshots/fire6.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                After that you can click Next Button for Install Firebase
+                CLI</p>
+            <img src="./assets/screenshots/fire7.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                After that click the Continue to console</p>
+            <img src="./assets/screenshots/fire8.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                After that you can see the app inside the project and click on
+                the setting icon of the app to see the details of that app</p>
+            <img src="./assets/screenshots/fire9.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                You can see the credentials(not server key and vapid) we need
+                in odoo in the General --> Your apps </p>
+            <img src="./assets/screenshots/fire10.png"
+                 class="img-thumbnail">
+            <br/>
+            <br/>
+            <img src="./assets/screenshots/fire11.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                You can create the server key we need in odoo.For that goto the
+                Cloud Messaging --> Cloud Messaging API (Legacy) --> 3 dots
+                -->Manage API in Google Cloud Console --> Enable the Cloud
+                Messaging</p>
+            <img src="./assets/screenshots/fire12.png"
+                 class="img-thumbnail">
+            <br/>
+            <br/>
+            <img src="./assets/screenshots/fire13.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                After that you can see the Server key in Cloud Messaging API
+                (Legacy)</p>
+            <img src="./assets/screenshots/fire14.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Now we need to create a Vapid goto the Cloud Messaging --> Web
+                configuration --> Generate Key pair</p>
+            <img src="./assets/screenshots/fire15.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                After that you can see the public key of the Vap id Cloud
+                Messaging --> Web configuration</p>
+            <img src="./assets/screenshots/fire16.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Configuration Settings
+            </h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Goto the Settings and enable the 'Enable Push Notification'
+                then you
+                can set the credential</p>
+            <img src="./assets/screenshots/fire17.png"
+                 class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                <b>Its very important that You must Allow the notification in
+                    the web browser </b></p>
+            <img src="./assets/screenshots/fire18.png"
+                 class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                After Allowing the notification access in the browser you can
+                click the "TEST CONNECTION" Button</p>
+            <img src="./assets/screenshots/fire19.png"
+                 class="img-thumbnail">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Then you can see a notification on the system, and you can see
+                a green popup</p>
+            <img src="./assets/screenshots/fire20.png"
+                 class="img-thumbnail">
+        </div>
+
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Notification View</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                After that you can send message from the chatbox module or in
+                the discuss module</p>
+            <img src="./assets/screenshots/fire21.png"
+                 class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Notification View</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Then you can see a popup notification in the other user and
+                when you click on that it will be redirected to the odoo
+                instance</p>
+            <img src="./assets/screenshots/fire22.png"
+                 class="img-thumbnail">
+        </div>
+    </div>
+</div>
+<!-- END OF SCREENSHOTS SECTION -->
+
+<!-- RELATED PRODUCTS -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="./assets/misc/categories.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Related
+        Products
+    </h2>
+</div>
+<div class="row">
+    <div class="col-sm-12">
+        <div id="demo1" class="row carousel slide" data-ride="carousel">
+            <!-- The slideshow -->
+            <div class="carousel-inner" style="padding: 30px;">
+                <div class="carousel-item" style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/email_id_validation/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="./assets/modules/1.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/autosuggestion_in_discuss/#"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="./assets/modules/2.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/auto_daily_weekly_report/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="./assets/modules/3.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="carousel-item active"
+                     style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/mail_to_child_contact/#"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="./assets/modules/4.jpg">
+                            </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/direct_send_email_template/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="./assets/modules/5.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/advanced_chatter_view/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="./assets/modules/6.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <!-- Left and right controls -->
+            <a class="carousel-control-prev" href="#demo1" data-slide="prev"
+               style="width:35px; color:#000"> <span
+                    class="carousel-control-prev-icon"><i
+                    class="fa fa-chevron-left"
+                    style="font-size:24px"></i></span>
+            </a> <a class="carousel-control-next" href="#demo1"
+                    data-slide="next" style="width:35px; color:#000">
+            <span class="carousel-control-next-icon"><i
+                    class="fa fa-chevron-right"
+                    style="font-size:24px"></i></span>
+        </a>
+        </div>
+    </div>
+</div>
+<!-- END OF RELATED PRODUCTS -->
+
+<!-- OUR SERVICES -->
+
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="./assets/misc/star.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Our Services
+    </h2>
+</div>
+
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="./assets/icons/cogs.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Customization</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="./assets/icons/wrench.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Implementation</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="./assets/icons/lifebuoy.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Support</h6>
+        </div>
+
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="./assets/icons/user.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Hire
+                Odoo
+                Developer</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="./assets/icons/puzzle.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Integration</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="./assets/icons/update.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Migration</h6>
+        </div>
+
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="./assets/icons/consultation.png"
+                     class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Consultancy</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="./assets/icons/training.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Implementation</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="./assets/icons/license.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Licensing Consultancy</h6>
+        </div>
+    </div>
+
+</div>
+
+<!-- END OF OUR SERVICES -->
+
+<!-- OUR INDUSTRIES -->
+
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="./assets/misc/corporate.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Our
+        Industries
+    </h2>
+</div>
+
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="./assets/icons/trading-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Trading
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easily procure
+                    and
+                    sell your products</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="./assets/icons/pos-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    POS
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easy
+                    configuration
+                    and convivial experience</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="./assets/icons/education-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Education
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    A platform for
+                    educational management</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="./assets/icons/manufacturing-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Manufacturing
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Plan, track and
+                    schedule your operations</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="./assets/icons/ecom-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    E-commerce &amp; Website
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Mobile
+                    friendly,
+                    awe-inspiring product pages</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="./assets/icons/service-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Service Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Keep track of
+                    services and invoice</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="./assets/icons/restaurant-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Restaurant
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Run your bar or
+                    restaurant methodically</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="./assets/icons/hotel-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Hotel Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    An
+                    all-inclusive
+                    hotel management application</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- END OF OUR INDUSTRIES -->
+
+<!-- SUPPORT -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="./assets/misc/customer-support.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Support
+    </h2>
+</div>
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4"
+                     style="background-color: #714B67; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="./assets/misc/support.png" height="48" width="48"
+                         style="width: 42px; height: 42px;"/>
+                </div>
+                <div>
+                    <h4>Need Help?</h4>
+                    <p style="line-height: 100%;">Got questions or need help?
+                        Get in touch.</p>
+                    <a href="mailto:odoo@cybrosys.com">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">
+                            odoo@cybrosys.com</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4"
+                     style="background-color: #2AC44D; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="./assets/misc/whatsapp.png" height="52"
+                         width="52"
+                         style="width: 52px; height: 52px;"/>
+                </div>
+                <div>
+                    <h4>WhatsApp</h4>
+                    <p style="line-height: 100%;">Say hi to us on WhatsApp!</p>
+                    <a href="https://api.whatsapp.com/send?phone=918606827707">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">
+                            +91 86068
+                            27707</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-12 my-5 d-flex justify-content-center align-items-center">
+            <img src="./assets/misc/logo.png" width="144" height="31"
+                 style="width:144px; height: 31px; margin-top: 40px;"/>
+        </div>
+    </div>
+</div>
+<!-- END OF SUPPORT -->

mail_push_notification/static/src/js/firebase.js

@@ -0,0 +1,100 @@
+/**
+ * Odoo module for handling Firebase push notifications.
+ *
+ * This module initializes Firebase messaging and handles push notifications
+ * for the current session's company. It also registers the service worker for
+ * handling notifications if the company has push notifications enabled.
+ *
+ * @module mail_push_notification
+ */
+odoo.define("mail_push_notification.Firebase", function (require) {
+    "use strict";
+    var ajax = require('web.ajax');
+    var rpc = require("web.rpc");
+    var session = require('web.session');
+    var vapid = '';
+    var firebaseConfig = {};
+    var push_notification = false;
+    /**
+     * Sends an RPC query to retrieve push notification settings for the current company.
+     *
+     * @function
+     * @returns {Promise} A promise that resolves with the push notification settings.
+     */
+    rpc.query({
+        model: 'res.company',
+        method: 'search_read',
+        fields: ['push_notification'],
+        domain: [['id', '=', session.company_id]]
+    }, { async: false }).then(function (data) {
+        if (data) {
+            _.each(data, function (company) {
+                if (company.push_notification) {
+                    push_notification = true;
+                    if ("serviceWorker" in navigator) {
+                        navigator.serviceWorker.register("/firebase-messaging-sw.js").then(function () {});
+                    }
+                }
+            });
+        }
+    });
+    ajax.jsonRpc("/firebase_config_details", 'call', {}).then(function (data) {
+        if (data) {
+            var json = JSON.parse(data);
+            vapid = json.vapid;
+            firebaseConfig = json.config;
+            /**
+             * Initializes Firebase messaging and sets up event listeners for incoming messages.
+             *
+             * @function
+             */
+            firebase.initializeApp(firebaseConfig);
+            const messaging = firebase.messaging();
+            /**
+             * Handles incoming push notification messages.
+             *
+             * @function
+             * @param {Object} payload - The notification payload.
+             */
+            messaging.onMessage((payload) => {
+                const notificationOptions = {
+                    body: payload.notification.body,
+                };
+                let notification = payload.notification;
+                navigator.serviceWorker.getRegistrations().then((registration) => {
+                    registration[0].showNotification(notification.title, notificationOptions);
+                });
+            });
+            /**
+             * Requests permission for receiving push notifications and retrieves the registration token.
+             *
+             * @function
+             */
+            messaging.requestPermission().then(function () {
+            /**
+             * Retrieves the registration token and sends it to the server for subscription.
+             *
+             * @function
+             * @param {string} vapidKey - The VAPID key for authentication.
+             */
+                messaging.getToken({ vapidKey: vapid }).then((currentToken) => {
+                    if (currentToken) {
+                        /**
+                         * Sends a POST request to the server with the registration token.
+                         *
+                         * @function
+                         * @param {string} token - The registration token.
+                         */
+                        $.post("/push_notification", {
+                            name: currentToken
+                        });
+                    } else {
+                        console.log('No registration token found');
+                    }
+                }).catch((err) => {
+                    console.log('There is an error has occurred while attempting to retrieve the token.', err);
+                });
+            });
+        }
+    });
+});

mail_push_notification/views/res_config_settings_views.xml

@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Inheriting the config setting and add the fields for connecting to
+        Firebase -->
+    <record id="res_config_settings_view_form" model="ir.ui.view">
+        <field name="name">
+            res.config.settings.view.form.inherit.mail.push.notification
+        </field>
+        <field name="model">res.config.settings</field>
+        <field name="inherit_id"
+               ref="base_setup.res_config_settings_view_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//div[hasclass('settings')]" position="inside">
+                <div class="app_settings_block"
+                     data-string="Firebase Push Notifications"
+                     string="Firebase Push Notifications"
+                     data-key="mail_push_notification">
+                    <h2>Firebase Push Notifications</h2>
+                    <div class="row mt16 o_settings_container">
+                        <div id="firebase_setting"
+                             class="col-xs-12 col-md-6 o_setting_box">
+                            <div class="o_setting_left_pane">
+                                <field name="push_notification"/>
+                            </div>
+                            <div class="o_setting_right_pane">
+                                <label for="push_notification"/>
+                            </div>
+                        </div>
+                        <div id="firebase_other_setting"
+                             class="col-xs-12 col-md-12 o_setting_box"
+                             attrs="{'invisible':[('push_notification','=',False)]}">
+                            <div class="o_setting_left_pane">
+                            </div>
+                            <div class="o_setting_right_pane">
+                                <label for="server_key"
+                                       class="col-2 col-lg-2 o_light_label"/>
+                                <field name="server_key"
+                                       attrs="{'required':[('push_notification','=',True)]}"
+                                       password="1"/>
+                            </div>
+                            <div class="o_setting_left_pane">
+                            </div>
+                            <div class="o_setting_right_pane">
+                                <label for="vapid"
+                                       class="col-2 col-lg-2 o_light_label"/>
+                                <field name="vapid"
+                                       attrs="{'required':[('push_notification','=',True)]}"
+                                       password="1"/>
+                            </div>
+                            <div class="o_setting_left_pane">
+                            </div>
+                            <div class="o_setting_right_pane">
+                                <label for="api_key"
+                                       class="col-2 col-lg-2 o_light_label"/>
+                                <field name="api_key"
+                                       attrs="{'required':[('push_notification','=',True)]}"
+                                       password="1"/>
+                            </div>
+                            <div class="o_setting_right_pane">
+                                <label for="auth_domain"
+                                       class="col-2 col-lg-2 o_light_label"/>
+                                <field name="auth_domain"
+                                       attrs="{'required':[('push_notification','=',True)]}"
+                                       password="1"/>
+                            </div>
+                            <div class="o_setting_right_pane">
+                                <label for="project_id_firebase"
+                                       class="col-2 col-lg-2 o_light_label"/>
+                                <field name="project_id_firebase"
+                                       attrs="{'required':[('push_notification','=',True)]}"
+                                       password="1"/>
+                            </div>
+                            <div class="o_setting_right_pane">
+                                <label for="storage_bucket"
+                                       class="col-2 col-lg-2 o_light_label"/>
+                                <field name="storage_bucket"
+                                       attrs="{'required':[('push_notification','=',True)]}"
+                                       password="1"/>
+                            </div>
+                            <div class="o_setting_right_pane">
+                                <label for="messaging_sender_id_firebase"
+                                       class="col-2 col-lg-2 o_light_label"/>
+                                <field name="messaging_sender_id_firebase"
+                                       attrs="{'required':[('push_notification','=',True)]}"
+                                       password="1"/>
+                            </div>
+                            <div class="o_setting_right_pane">
+                                <label for="app_id_firebase"
+                                       class="col-2 col-lg-2 o_light_label"/>
+                                <field name="app_id_firebase"
+                                       attrs="{'required':[('push_notification','=',True)]}"
+                                       password="1"/>
+                            </div>
+                            <div class="o_setting_right_pane">
+                                <label for="measurement_id_firebase"
+                                       class="col-2 col-lg-2 o_light_label"/>
+                                <field name="measurement_id_firebase"
+                                       attrs="{'required':[('push_notification','=',True)]}"
+                                       password="1"/>
+                            </div>
+                            <div class="col-lg-6 col-8 d-flex flex-row-reverse o_setting_box">
+                                <button name="test_connection"
+                                        string="Test Connection"
+                                        type="object" class="btn-primary"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </xpath>
+        </field>
+    </record>
+</odoo>