July 4: [ADD] Initial commit 'click_and_collect_pos'

click_and_collect_pos/README.rst

@@ -0,0 +1,47 @@
+.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg
+    :target: https://www.gnu.org/licenses/agpl-3.0-standalone.html
+    :alt: License: AGPL-3
+
+Click And Collect POS
+=======================
+This module enables customers to order products online and pick them up from the closest shop/bar.
+
+Configuration
+=============
+* No additional configuration required
+
+Company
+-------
+*`Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+License
+-------
+General Public License, version 3 (AGPL v3).
+(https://www.gnu.org/licenses/agpl-3.0-standalone.html)
+
+Credits
+-------
+Developer : (V15) Bhagyadev KP, 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 further information, please visit `Our Website <https://cybrosys.com/>`__
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__

click_and_collect_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: Bhagyadev KP (odoo@cybrosys.com)
+#
+#    This program is free software: you can modify
+#    it under the terms of the GNU Affero General Public License (AGPL) as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    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 for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+#
+################################################################################
+from . import models

click_and_collect_pos/__manifest__.py

@@ -0,0 +1,59 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Bhagyadev KP (odoo@cybrosys.com)
+#
+#    This program is free software: you can modify
+#    it under the terms of the GNU Affero General Public License (AGPL) as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    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 for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+#
+################################################################################
+{
+    'name': 'Click And Collect PoS',
+    'version': '15.0.1.0.0',
+    'category': 'Point of Sale',
+    'summary': 'With this module, customers may place product orders online '
+               'and pick them up from the closest shop.',
+    'description': 'This module enables customers to order products online '
+                   'and pick them up from the closest shop. ',
+    'author': "Cybrosys Techno Solutions",
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    'depends': ['website_sale', 'point_of_sale', 'sale_management', 'stock'],
+    'data': [
+        'views/click_and_collect_button.xml',
+        'views/pos_config_views.xml',
+        'views/sale_order_views.xml',
+        'views/stock_picking_views.xml'
+    ],
+    'assets': {
+        'web.assets_frontend': [
+            'click_and_collect_pos/static/src/js/website_sale_cart.js',
+        ],
+        'point_of_sale.assets': [
+            'click_and_collect_pos/static/src/js/sale_order_button.js',
+            'click_and_collect_pos/static/src/js/click_and_collect_screen.js',
+            'click_and_collect_pos/static/src/scss/sale_order.scss',
+        ],
+        'web.assets_qweb': [
+            'click_and_collect_pos/static/src/xml/**/*',
+        ],
+    },
+    'images': ['static/description/banner.png'],
+    'license': 'AGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

click_and_collect_pos/doc/RELEASE_NOTES.md

@@ -0,0 +1,7 @@
+## Module <click_and_collect_pos>
+
+#### 23.06.2024
+#### Version 15.0.1.0.0
+#### ADD
+
+- Initial commit for Click and Collect POS

click_and_collect_pos/models/__init__.py

@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Bhagyadev KP (odoo@cybrosys.com)
+#
+#    This program is free software: you can modify
+#    it under the terms of the GNU Affero General Public License (AGPL) as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    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 for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+#
+################################################################################
+from . import pos_config
+from . import sale_order
+from . import sale_order_line
+from . import stock_picking

click_and_collect_pos/models/pos_config.py

@@ -0,0 +1,38 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Bhagyadev KP (odoo@cybrosys.com)
+#
+#    This program is free software: you can modify
+#    it under the terms of the GNU Affero General Public License (AGPL) as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    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 for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+#
+################################################################################
+from odoo import fields, models
+
+
+class PosConfig(models.Model):
+    """inherited for adding address in pos session"""
+    _inherit = 'pos.config'
+
+    street = fields.Char('Street', required=True,
+                         help='Enter Address for your store')
+    street2 = fields.Char(string='Street2', help='Enter street for your store')
+    zip = fields.Char('Zip', help='Enter zip for your store')
+    city = fields.Char('City', required=True,
+                       help='Enter your store located city')
+    state_id = fields.Many2one("res.country.state", string='State',
+                               required=True, help='Enter state')
+    country_id = fields.Many2one('res.country', string='Country', required=True,
+                                 help='Enter country')

click_and_collect_pos/models/sale_order.py

@@ -0,0 +1,87 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Bhagyadev KP (odoo@cybrosys.com)
+#
+#    This program is free software: you can modify
+#    it under the terms of the GNU Affero General Public License (AGPL) as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    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 for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+#
+################################################################################
+from odoo import api, fields, models
+
+
+class SaleOrder(models.Model):
+    """to show the click and collect delivery order in smart button"""
+    _inherit = 'sale.order'
+
+    collect_count = fields.Integer(string='Click And Collect',
+                                   compute='_compute_collect_count',
+                                   help='collect count')
+
+    @api.depends('collect_count')
+    def _compute_collect_count(self):
+        """to see the click and collect orders count"""
+        count = self.env['stock.picking'].search_count(
+            [('is_click_and_collect_order', '=', True),
+             ('origin', '=', self.name)])
+        self.collect_count = count
+
+    def _action_confirm(self):
+        """this action is used for confirm delivery orders"""
+        self.action_split_delivery_order()
+        return super(SaleOrder, self)._action_confirm()
+
+    def action_split_delivery_order(self):
+        """to split delivery order and click and collect order separately"""
+        click_and_collect_list = []
+        for line in self.order_line.filtered(lambda l: l.is_click_and_collect):
+            click_and_collect_list.append(line)
+        for res in click_and_collect_list:
+            delivery_order = self.env['stock.picking'].create({
+                'partner_id': self.partner_id.id,
+                'location_id':
+                    self.env.ref('stock.stock_location_customers').id,
+                'location_dest_id':
+                    self.env.ref('stock.stock_location_customers').id,
+                'picking_type_id': self.env.ref('stock.picking_type_out').id,
+                'sale_id': self.id,
+                'origin': self.name,
+                'is_click_and_collect_order': True
+            })
+            move = self.env['stock.move'].create({
+                'name': res.name,
+                'product_id': res.product_id.id,
+                'product_uom_qty': res.product_uom_qty,
+                'product_uom': res.product_uom.id,
+                'picking_id': delivery_order.id,
+                'location_id': delivery_order.location_id.id,
+                'location_dest_id': delivery_order.location_dest_id.id,
+                'sale_line_id': res.id,
+            })
+            move._action_confirm()
+        return True
+
+    def action_view_click_and_collect(self):
+        """smart button for click and collect"""
+        self.ensure_one()
+        return {
+            'name': 'Click And Collect',
+            'view_mode': 'tree,form',
+            'res_model': 'stock.picking',
+            'type': 'ir.actions.act_window',
+            'domain': [('origin', '=', self.name),
+                       ('is_click_and_collect_order', '=', True)],
+            'context': "{'create':False}"
+        }

click_and_collect_pos/models/sale_order_line.py

@@ -0,0 +1,33 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Bhagyadev KP (odoo@cybrosys.com)
+#
+#    This program is free software: you can modify
+#    it under the terms of the GNU Affero General Public License (AGPL) as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    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 for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+#
+################################################################################
+from odoo import fields, models
+
+
+class SaleOrderLine(models.Model):
+    """here user can identify click and collect order"""
+    _inherit = 'sale.order.line'
+
+    is_click_and_collect = fields.Boolean(
+        string='Collect', help='if you want to enable click and collect for '
+                               'this product enable this field')
+    pos_config_id = fields.Many2one('pos.config', string='PoS Session',
+                                    help='Select pos session')

click_and_collect_pos/models/stock_picking.py

@@ -0,0 +1,64 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Bhagyadev KP (odoo@cybrosys.com)
+#
+#    This program is free software: you can modify
+#    it under the terms of the GNU Affero General Public License (AGPL) as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    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 for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+#
+################################################################################
+from odoo import api, fields, models
+
+
+class StockMove(models.Model):
+    """to identify the click and collect transfer"""
+    _inherit = 'stock.picking'
+
+    is_click_and_collect_order = fields.Boolean(default=False,
+                                                string="is click and collect"
+                                                       " order",
+                                                help="enable to change the"
+                                                     " order as click and "
+                                                     "collect order")
+
+    @api.model
+    def action_confirmation_click(self, order_id):
+        """validate click and collect from pos config"""
+        order_id = int(order_id)
+        stock = self.search([])
+        for rec in stock:
+            for lines in rec.move_ids_without_package:
+                if lines.sale_line_id.id == order_id:
+                    rec.action_set_quantities_to_reservation()
+                    rec._action_done()
+        return True
+
+    @api.model
+    def action_stock_picking(self, order_lines):
+        """display the sale order lines in pos session"""
+        record = []
+        stock = self.search([('state', '!=', 'done')])
+        for rec in stock:
+            for lines in rec.move_ids_without_package:
+                if lines.sale_line_id.id in order_lines:
+                    data = {
+                        'id': lines.sale_line_id.id,
+                        'order_id': rec.origin,
+                        'partner_id': rec.partner_id.name,
+                        'product_id': rec.product_id.name,
+                        'product_uom_quantity': lines.product_uom_qty,
+                    }
+                    record.append(data)
+        return record

click_and_collect_pos/static/description/index.html

@@ -0,0 +1,662 @@
+<div style="background-color: #714B67; height: 810px; width: 100%; padding: 15px; position: relative;">
+    <!-- TITLE BAR -->
+    <div class="d-flex align-items-center justify-content-between"
+         style="border-bottom: 1px solid #875A7B; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
+        <img src="assets/misc/cybrosys-logo.png" width="42" height="42"
+             style="width: 42px; height: 42px;"/>
+        <div>
+            <div style="color: #7C7BAD; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Community
+            </div>
+            <div style="color: #875A7B; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Enterprise
+            </div>
+            <div style="color: #017E84; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Odoo sh
+            </div>
+        </div>
+    </div>
+    <!-- END OF TITLE BAR -->
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+                <!-- APP HERO -->
+                <h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;">Click And Collect POS</h1>
+                <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;">This Module Enables Customers To Order Products Online And Pick Them Up At The Closest Shop.</p>
+                <!-- END OF APP HERO -->
+                <img src="./assets/screenshots/hero.gif" class="img-responsive"
+                     width="100%" height="auto"/>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- NAVIGATION SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px; margin-top: 300px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/compass.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Explore This
+        Module</h2>
+</div>
+<div class="row my-4" style="font-family: 'Montserrat', sans-serif;">
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#overview">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Overview</span>
+                    <span
+                            style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">Learn
+                        more about this
+                        module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#features">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Features</span>
+                    <span
+                            style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+                        features of this
+                        module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#screenshots">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Screenshots</span>
+                    <span
+                            style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+                        screenshots for this
+                        module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+</div>
+<!-- END OF NAVIGATION SECTION -->
+
+<!-- OVERVIEW SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="overview">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/pie-chart.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Overview
+    </h2>
+</div>
+<div class="row"
+     style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 py-4">This module enables customers to order products online and pick them up at the closest shop.
+    </div>
+</div>
+<!-- END OF OVERVIEW SECTION -->
+
+<!-- FEATURES SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="features">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/features.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Features
+    </h2>
+</div>
+<div class="row"
+     style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 col-md-6">
+        <div class="d-flex align-items-center"
+             style="margin-top: 40px; margin-bottom: 40px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">This module allows customers to place online orders and pick them up at a local retailer.</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" class="mr-2" alt=""/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Whatever product the consumer needs to pick up from the shop can be specified on the website.</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" class="mr-2" alt=""/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">In the POS session, the user may view all click and collect orders.</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" class="mr-2" alt/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">When the goods is delivered, the user may confirm delivery in the PoS by clicking a single button.</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;">
+                Create PoS Shop Address</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Go to PoS settings -> Enter your store address ->The online user may quickly find the closest store and pick up their order there.
+            </p>
+            <img src="assets/screenshots/1.png" class="img-thumbnail">
+        </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;">
+                Create Click and Collect Order.
+            </h4>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Choose the item and add it to your shopping cart. Then you can mention the click and collect product from in cart line and select the nearest store.
+            </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">
+            <h4 class="mt-2"
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+                Click and Collect Order Mentioned in Sale Order
+            </h4>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                All click and collect products and the customer's selected pos session are visible in the sale order lines. The user may view all the click and collect products by clicking on the click collect smart tab.
+            </p>
+            <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;">Click and Collect Order in PoS.
+            </h4>
+            <p>
+                After opening the session, go to the PoS module where the click and collect button is shown. After you click on it, a new screen will open where you can see all the click and collect products and validate the order.
+            </p>
+            <img src="assets/screenshots/4.png"
+                 class="img-responsive img-thumbnail border" width="100%"
+                 height="auto"/>
+            <img src="assets/screenshots/5.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;">
+                If the user confirms the delivery, it automatically affects inventory as well. In sale order and inventory, the user can see all the delivered orders.
+            </h4>
+            <img src="assets/screenshots/6.png"
+                 class="img-responsive img-thumbnail border" width="100%"
+                 height="auto"/>
+        </div>
+    </div>
+    <!-- END OF SCREENSHOTS SECTION -->
+
+    <!-- RELATED 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/pos_credit_limit/"
+                               target="_blank">
+                                <div style="border-radius:10px">
+                                    <img class="img img-responsive center-block"
+                                         style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                         src="./assets/modules/l1.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_report_generator/"
+                               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/l2.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/dashboard_pos/"
+                               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/l3.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/login_pos_direct/"
+                               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/l4.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_book_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/l5.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/multi_barcodes_pos/"
+                               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/l6.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 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>
+
+    <!-- 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>
+    <!-- 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 -->
+</div>

click_and_collect_pos/static/src/js/click_and_collect_screen.js

@@ -0,0 +1,46 @@
+odoo.define('click_and_collect_pos.SaleOrderScreen', function(require) {
+	'use strict';
+	const PosComponent = require('point_of_sale.PosComponent');
+	const Registries = require('point_of_sale.Registries');
+	var rpc = require('web.rpc');
+	// Define a new class that extends PosComponent
+	class SaleOrderScreen extends PosComponent {
+	     /**
+		 * Override the setup method to perform any additional setup logic.
+		 */
+		setup() {
+			super.setup();
+		}
+		back() {
+			this.showScreen('ProductScreen');
+		}
+
+		getSaleOrderListLine() {
+//		Function to get sale order list line
+			var order_line_id = [];
+			this.props.click_and_collect.forEach(function(object) {
+				if (object.is_click_and_collect == true) {
+					order_line_id.push(object)
+				}
+			})
+			return order_line_id
+		}
+
+		async onClick(ev) {
+//		    Confirming order
+			const order_line = await ev.target.dataset.id
+			await rpc.query({
+				'model': 'stock.picking',
+				'method': 'action_confirmation_click',
+				'args': [Number(order_line)],
+			}).then(function(result) {
+				if (result = true) {
+					ev.target.closest('.order-row').remove()
+				}
+			})
+		}
+	};
+	SaleOrderScreen.template = 'SaleOrderScreen';
+	Registries.Component.add(SaleOrderScreen);
+	return SaleOrderScreen;
+});

click_and_collect_pos/static/src/js/sale_order_button.js

@@ -0,0 +1,58 @@
+odoo.define('click_and_collect_pos.SaleOrderButton', function (require) {
+    'use strict';
+
+    const PosComponent = require('point_of_sale.PosComponent');
+    const Registries = require('point_of_sale.Registries');
+    var ajax = require('web.ajax');
+    const {useService} = require("@web/core/utils/hooks");
+
+    // Define a new class that extends PosComponent
+    class SaleOrderButton extends PosComponent {
+
+        /**
+         * Override the setup method to perform any additional setup logic.
+         */
+        setup() {
+            super.setup();
+        }
+
+        async onClick() {
+//            getting orders
+            var self = this;
+            var sale_order = [];
+            var session_id = self.env.pos.pos_session.id
+            var sale_order_line = await this.rpc({
+                model: 'sale.order.line',
+                method: 'search_read',
+                args: [],
+                kwargs: {},
+            });
+            var stock_picking = await this.rpc({
+                model: 'stock.move',
+                method: 'search_read',
+                fields: ['id', 'sale_line_id', 'state'],
+                args: [],
+                kwargs: {},
+            });
+            sale_order_line.forEach(function (object) {
+                if (object.state == 'sale' && object.is_click_and_collect) {
+                    if(self.env.pos.config_id == object.pos_config_id[0]){
+                        stock_picking.forEach(function (line) {
+                        if (line.sale_line_id[0] && line.state != 'done') {
+                            if (object.id == line.sale_line_id[0]) {
+                                sale_order.push(object);
+                            }
+                        }
+                    })
+                    }
+                }
+            });
+            self.showScreen('SaleOrderScreen', {
+                click_and_collect: sale_order,
+            });
+        }
+    }
+    SaleOrderButton.template = 'click_and_collect_pos.SaleOrderButton';
+    Registries.Component.add(SaleOrderButton);
+    return SaleOrderButton;
+});

click_and_collect_pos/static/src/js/website_sale_cart.js

@@ -0,0 +1,56 @@
+odoo.define('click_and_collect_pos.website_sale_cart', function(require) {
+	"use strict"
+
+	var rpc = require('web.rpc');
+	var { websiteSaleCart } = require('website_sale.website_sale');
+
+    // using include method and adding events
+	websiteSaleCart.include({
+		events: _.extend({}, websiteSaleCart.events, {
+			'click #is_click_and_collect': '_onClickClickAndCollect',
+			'click .session_values': '_onClickPosConfig',
+			'click .js_delete_product': '_onClickDeleteProduct',
+		}),
+		_onClickClickAndCollect: function(ev) {
+//		    Making order as collected
+			var order_id = $(ev.target).data('id')
+			var pos_conf = $(ev.currentTarget.parentElement.parentElement).find('.oe_session')
+			if ($(ev.target).is(':checked')) {
+				pos_conf.removeClass('d-none')
+			} else {
+				pos_conf.addClass('d-none')
+			}
+			rpc.query({
+				'model': 'sale.order.line',
+				'method': 'write',
+				'args': [
+					[order_id], {
+						'is_click_and_collect': ev.currentTarget.checked
+					}
+				],
+			});
+
+		},
+		_onClickDeleteProduct: function(ev) {
+//		    Deleting product
+			ev.preventDefault();
+			$(ev.currentTarget).closest('tr').find('.js_quantity').val(0).trigger('change');
+
+		},
+		_onClickPosConfig: function(ev) {
+//		    Adding pos_config_id to order
+			var closest_check = $(ev.currentTarget.parentElement.parentElement).find('.clickandecollect')
+			var order_id = closest_check.data('id')
+			var session_id = $(ev.target).val()
+			rpc.query({
+				'model': 'sale.order.line',
+				'method': 'write',
+				'args': [
+					[order_id], {
+						'pos_config_id': parseInt(session_id)
+					}
+				],
+			});
+		},
+	});
+})

click_and_collect_pos/static/src/scss/sale_order.scss

@@ -0,0 +1,38 @@
+.sale-order-button {
+    display: flex;
+    align-items: center;
+    font-size: medium;
+    color: white;
+}
+
+.sale-order-button:hover{
+    background: rgba(0, 0, 0, .08);
+    cursor: pointer;
+}
+.btn{
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857143;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-image: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    text-decoration: none;
+
+    color: #333;
+    background-color: #fff;
+    border-color: #ccc;
+    height: 21px;
+}

click_and_collect_pos/static/src/xml/chrome.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Added new button in pos session -->
+<templates id="template" xml:space="preserve">
+    <t t-name="Chrome" t-inherit="point_of_sale.Chrome"
+       t-inherit-mode="extension" owl="1">
+        <xpath expr="//CashMoveButton" position="after">
+            <SaleOrderButton/>
+        </xpath>
+    </t>
+</templates>

click_and_collect_pos/static/src/xml/click_and_collect_screen.xml

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Added new screen in pos-->
+<templates id="template" xml:space="preserve">
+   <t t-name="SaleOrderScreen" owl="1">
+       <div class="clientlist-screen screen">
+           <div class="screen-content">
+               <div class="top-content">
+                   <div class="button back" t-on-click="back">
+                       Back
+                   </div>
+               </div>
+               <section class="full-content">
+                   <div class="client-window">
+                       <section>
+                           <div class="orders">
+                               <div class="header-row">
+                                <div class="col wide">Sale Order</div>
+                                   <div class="col wide">Session</div>
+                                   <div class="col">Customer</div>
+                                   <div class="col">Product</div>
+                                   <div class="col end">Total</div>
+                                   <div class="col narrow">Status</div>
+                                   <div class="col very-narrow">Validate</div>
+                            </div>
+                               <t t-set="collect_order_line"
+                                  t-value="getSaleOrderListLine()"/>
+                               <t t-foreach="collect_order_line" t-as="lines"
+                                  t-key="lines.id">
+                                <div class="order-row">
+                                    <div class="col wide">
+                                        <div>
+                                            <t t-esc="lines.order_id[1]"/>
+                                        </div>
+                                    </div>
+                                    <div class="col wide">
+                                        <t t-esc="lines.pos_config_id[1]"/>
+                                    </div>
+                                    <div class="col">
+                                        <div>
+                                            <t t-esc="lines.order_partner_id[1]"/>
+                                        </div>
+                                    </div>
+                                    <div class="col">
+                                        <div>
+                                            <t t-esc="lines.product_id[1]"/>
+                                        </div>
+                                    </div>
+                                    <div class="col end">
+                                        <div>
+                                            <t t-esc="lines.product_uom_qty"/>
+                                        </div>
+                                    </div>
+                                    <div class="col narrow">
+                                        <div>
+                                            <t t-esc="lines.state"/>
+                                        </div>
+                                    </div>
+                                    <div class="col">
+                                        <div t-att-data-id="lines.id"
+                                             class="btn button confirm highlight"
+                                             t-on-click="onClick">
+                                        Confirm
+                                        </div>
+                                    </div>
+                                </div>
+                               </t>
+                           </div>
+                       </section>
+                   </div>
+               </section>
+           </div>
+       </div>
+   </t>
+</templates>

click_and_collect_pos/static/src/xml/sale_order_button.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Added click and collect button in pos -->
+<templates id="template" xml:space="preserve">
+    <t t-name="click_and_collect_pos.SaleOrderButton" owl="1">
+        <div class="sale-order-button" t-on-click="onClick">
+            <i class="fa fa-hand-pointer-o" aria-hidden="true"/>
+            <span style="padding-left: 10px;">Click And Collect</span>
+        </div>
+    </t>
+</templates>

click_and_collect_pos/views/click_and_collect_button.xml

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!-- Inherited Template and Added New TD -->
+    <template id="click_and_collect" name="Click And Collect"
+              inherit_id="website_sale.cart_lines">
+        <xpath expr="//th[hasclass('td-price')]" position="after">
+            <th>
+                <span>Collect</span>
+            </th>
+        </xpath>
+        <xpath expr="//td[hasclass('td-price')]" position="after">
+            <td class="text-center oe_inline click_and_collect_td">
+                <input type="checkbox" name="click_and_collect"
+                       id='is_click_and_collect'
+                       t-att-checked="line.is_click_and_collect"
+                       class="form-check-input clickandecollect"
+                       t-att-data-id="line.id" t-on-click="click_btn"/>
+
+            </td>
+            <td class="text-center click_and_collect_td oe_session d-none">
+                <t t-set="get_pos_session"
+                   t-value="request.env['pos.config'].sudo().search([])"/>
+                <select class="form-select session_values"
+                        name="pos_session">
+                    <option value="select">Select</option>
+                    <option t-foreach="get_pos_session" t-as="session"
+                            t-att-value="session.id" t-key="session"
+                            class="session_values">
+                        <t t-esc="session.name"/>,
+                        <t t-esc="session.street"/>,
+                        <t t-esc="session.city"/>,
+                        <t t-esc="session.state_id.name"/>
+                    </option>
+                </select>
+            </td>
+        </xpath>
+    </template>
+</odoo>

click_and_collect_pos/views/pos_config_views.xml

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Inherited View and Added New Field -->
+    <record id="pos_config_view_form" model="ir.ui.view">
+        <field name="name">pos.config.view.form.inherit.click.and.collect</field>
+        <field name="model">pos.config</field>
+        <field name="inherit_id" ref="point_of_sale.pos_config_view_form"/>
+        <field name="priority" eval="8"/>
+        <field name="arch" type="xml">
+            <xpath expr="//div[@id='title']"
+                   position="after">
+                <group>
+                    <label for="street" string="Address"/>
+                    <div class="o_address_format">
+                        <field name="street" placeholder="Street..."
+                               class="o_address_street"/>
+                        <field name="street2" placeholder="Street 2..."
+                               class="o_address_street"/>
+                        <field name="city" placeholder="City"
+                               class="o_address_city"/>
+                        <field name="state_id" class="o_address_state"
+                               placeholder="State"
+                               options="{'no_open': True, 'no_quick_create': True}"
+                               context="{'default_country_id': country_id}"/>
+                        <field name="zip" placeholder="ZIP"
+                               class="o_address_zip"/>
+                        <div name="partner_address_country"
+                             class="d-flex justify-content-between">
+                            <field name="country_id" placeholder="Country"
+                                   class="o_address_country"
+                                   options="{'no_create': True, 'no_open': True}"/>
+                        </div>
+                    </div>
+                </group>
+            </xpath>
+        </field>
+    </record>
+</odoo>

click_and_collect_pos/views/sale_order_views.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!-- Added a smart button in sale order-->
+    <record id="sale_order_view_form" model="ir.ui.view">
+        <field name="name">sale.order.view.form.inherited.click.and.collect</field>
+        <field name="model">sale.order</field>
+        <field name="inherit_id" ref="sale.view_order_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//button[@name='action_view_invoice']"
+                   position="before">
+                <button type="object"
+                        name="action_view_click_and_collect"
+                        class="oe_stat_button"
+                        icon="fa-hand-pointer-o"
+                        attrs="{'invisible': [('collect_count', '=', 0)]}">
+                    <field name="collect_count" widget="statinfo"
+                           string="Click Collect"/>
+
+                </button>
+            </xpath>
+            <xpath expr="//field[@name='product_template_id']" position="after">
+                <field name="is_click_and_collect"/>
+                <field name="pos_config_id"/>
+            </xpath>
+        </field>
+    </record>
+</odoo>

click_and_collect_pos/views/stock_picking_views.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!-- Inherited template and added new field to identify click and collect orders-->
+    <record id="stock_picking_view_form" model="ir.ui.view">
+        <field name="name">view.picking.view.form.inherit.click.and.collect</field>
+        <field name="model">stock.picking</field>
+        <field name="inherit_id" ref="stock.view_picking_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='origin']" position="after">
+                <field name="is_click_and_collect_order" invisible="1"/>
+            </xpath>
+        </field>
+    </record>
+</odoo>