Feb 23 : [ADD] Initial Commit 'website_product_reservation'

website_product_reservation/README.rst

@@ -0,0 +1,46 @@
+.. image:: https://img.shields.io/badge/license-AGPL--3-blue.svg
+    :target: https://www.gnu.org/licenses/agpl-3.0-standalone.html
+    :alt: License: AGPL-3
+
+Website Product Reservation
+===========================
+This module helps you to reserve products from the website.
+
+Configuration
+=============
+* No additional configurations needed
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+License
+-------
+Gnu Affero General Public License, Version 3 (AGPL v3).
+(https://www.gnu.org/licenses/agpl-3.0-standalone.html)
+
+Credits
+-------
+* Developer : (V16) Muhsina V, Contact : odoo@cybrosys.com
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+* Website : https://cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported.
+
+Maintainer
+==========
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com
+
+This module is maintained by Cybrosys Technologies.
+
+For support and more information, please visit `Our Website <https://cybrosys.com/>`__
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__

website_product_reservation/__init__.py

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

website_product_reservation/__manifest__.py

@@ -0,0 +1,50 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Muhsina V (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+{
+    'name': 'Website Product Reservation',
+    'version': '16.0.1.0.0',
+    'category': 'Website',
+    'summary': 'Enable product reservation functionality on your website',
+    'description': "This module extends the website functionality by enabling "
+                   "product reservation. Allow your customers to reserve "
+                   "products directly from your website, and manage these "
+                   "reservations seamlessly within the Odoo environment. "
+                   "Enhance the shopping experience by providing a reservation"
+                   " feature for in-demand products.",
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': 'https://www.cybrosys.com',
+    'depends': ['website_sale', 'stock'],
+    'data': [
+        'data/website_menu.xml',
+        'views/product_template_views.xml',
+        'views/res_cofig_settings_views.xml',
+        'views/sale_order_views.xml',
+        'views/website_templates.xml',
+    ],
+    'images': ['static/description/banner.png'],
+    'license': 'AGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

website_product_reservation/controllers/__init__.py

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

website_product_reservation/controllers/website_product_reservation.py

@@ -0,0 +1,114 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Muhsina V (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+import json
+from odoo import http
+from odoo.http import request
+from odoo.addons.website_sale.controllers.main import WebsiteSale
+
+
+class WebsiteSaleReservation(WebsiteSale):
+    """Custom controller for handling reservation-related functionality on
+    the website."""
+
+    @http.route(
+        ["/reservation", "/reservation/page/<int:page>"],
+        type="http",
+        auth="public",
+        website=True,
+    )
+    def reservation(self, page=1, **kw):
+        """Display a page with products available for reservation.
+        :param page: Page number for pagination.
+        :param kw: Additional keyword arguments.
+        :return: HTTP response rendering the reservation page."""
+        domain = [("reserve_products", "=", True), ("website_published", "=", True)]
+        product_obj = request.env["product.template"]
+        product_count = product_obj.search_count(domain)
+        pager = request.website.pager(
+            url="/reservation", total=product_count, page=page, step=12
+        )
+        products = product_obj.search(domain, limit=12, offset=pager["offset"])
+        values = {
+            "products": products,
+            "page_name": "Reserve Products",
+            "pager": pager,
+            "default_url": "/reservation",
+        }
+        self.clear_cart()
+        return request.render("website_product_reservation.reservation_page", values)
+
+    @http.route(
+        ["/reservation/reserve"],
+        type="http",
+        auth="public",
+        methods=["POST"],
+        website=True,
+        csrf=False,
+    )
+    def reservation_update(self, product_id, add_qty=1, set_qty=0, **kw):
+        """Update the reservation order based on user input.
+        :param product_id: ID of the product being reserved.
+        :param add_qty: Quantity to add to the reservation.
+        :param set_qty: Quantity to set for the reservation.
+        :param kw: Additional keyword arguments.
+        :return: HTTP response redirecting to the shopping cart."""
+        product_custom_attribute_values = None
+        if kw.get("product_custom_attribute_values"):
+            product_custom_attribute_values = json.loads(
+                kw.get("product_custom_attribute_values")
+            )
+        request.website.sale_get_order(force_create=1)._cart_update(
+            product_id=int(product_id),
+            add_qty=float(add_qty),
+            set_qty=float(set_qty),
+            product_custom_attribute_values=product_custom_attribute_values,
+        )
+        if kw.get("type_name") == "Reservation":
+            request.website.sale_get_order().is_reservation_order = True
+        return request.redirect("/shop/cart")
+
+    @http.route(
+        ["/reservation/confirm_reserve_order"], type="http", auth="public", website=True
+    )
+    def confirm_reserve_order(self, **post):
+        """Confirm and finalize the reservation order.
+        :param post: POST data from the request.
+        :return: HTTP response rendering the confirmation or error page."""
+        order = request.website.sale_get_order()
+        is_reservation = all(
+            order.website_order_line.mapped("product_id").mapped("reserve_products")
+        )
+        if is_reservation:
+            order.state = "reserve"
+            request.website.sale_reset()
+            for line in order.order_line.filtered(
+                lambda line: line.product_id.type == "product"
+            ):
+                line.sudo().create_reservation_stock()
+            self.clear_cart()
+            return request.render(
+                "website_product_reservation.reservation_thankyou", {"order": order}
+            )
+        else:
+            return request.render(
+                "website_product_reservation.not_allowed_to_reserve_page", {}
+            )

website_product_reservation/data/website_menu.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Define a menu item for the "Reservation" section on the website -->
+    <record id="menu_reservation" model="website.menu">
+        <field name="name">Reservation</field>
+        <field name="url">/reservation</field>
+        <field name="parent_id" ref="website.main_menu"/>
+        <field name="sequence">55</field>
+    </record>
+</odoo>

website_product_reservation/doc/RELEASE_NOTES.md

@@ -0,0 +1,6 @@
+## Module <website_product_reservation>
+
+#### 08.02.2024
+#### Version 16.0.1.0.0
+##### ADD
+- Initial Commit for Website Product Reservation

website_product_reservation/models/__init__.py

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

website_product_reservation/models/product_template.py

@@ -0,0 +1,29 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Muhsina V (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from odoo import fields, models
+
+
+class ProductTemplate(models.Model):
+    _inherit = "product.template"
+
+    reserve_products = fields.Boolean(string='Reserve Products',
+                                      help="enable to reserve this product")

website_product_reservation/models/sale_order.py

@@ -0,0 +1,83 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Muhsina V (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from odoo import fields, models
+
+
+class SaleOrder(models.Model):
+    """ This class extends the 'sale.order' model in Odoo.
+    It adds a new state ('reserve') and introduces a boolean field
+    ('is_reservation_order') to identify reservation orders.
+    Methods:
+        - action_make_draft: Sets the order state to 'draft' and cancels
+        reservation stock for product lines.
+        - action_cancel_reservation: Cancels reservation stock for product
+        lines and sets the order state to 'cancel'."""
+    _inherit = 'sale.order'
+
+    state = fields.Selection(selection_add=[('reserve', 'Reserve')],
+                             string='Order State',
+                             help='The state of the sale order')
+    is_reservation_order = fields.Boolean(string='Reservation Order',
+                                          help='Check if the order is a '
+                                               'reservation order')
+
+    def action_make_draft(self):
+        """ Action method to set the order state to 'draft' and cancel
+        reservation stock for product lines."""
+        self.state = 'draft'
+        for line in self.order_line.filtered(
+                lambda line: line.product_id.type == 'product'):
+            line.cancel_reservation_stock(line.picking_id)
+
+    def action_cancel_reservation(self):
+        """ Action method to cancel reservation stock for product lines and set
+        the order state to 'cancel'."""
+        for line in self.order_line.filtered(
+                lambda line: line.product_id.type == 'product'):
+            line.cancel_reservation_stock(line.picking_id)
+        self.state = 'cancel'
+
+
+class Company(models.Model):
+    """ This class extends the 'res.company' model in Odoo.
+    It adds a new field ('destination_location_id') to store the destination
+    location."""
+    _inherit = 'res.company'
+
+    destination_location_id = fields.Many2one(
+        'stock.location',
+        string='Destination Location',
+        help='The destination location for products.')
+
+
+class AccountConfig(models.TransientModel):
+    """ This class extends the 'res.config.settings' model in Odoo.
+    It adds a related field ('destination_location_id') to configure the
+    destination location."""
+    _inherit = "res.config.settings"
+
+    destination_location_id = fields.Many2one(
+        'stock.location',
+        string='Destination Location',
+        related='company_id.destination_location_id',
+        readonly=False,
+        help='The destination location for products.')

website_product_reservation/models/sale_order_line.py

@@ -0,0 +1,146 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Muhsina V (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from datetime import datetime
+from odoo import fields, models
+from odoo.tools import float_round
+
+
+class SaleOrderLine(models.Model):
+    """ This class extends the 'sale.order.line' model in Odoo.
+    It adds functionality related to reservation stock for sale order lines."""
+    _inherit = 'sale.order.line'
+
+    picking_id = fields.Many2one('stock.picking', string='Picking',
+                                 help='The associated picking for the order '
+                                      'line')
+
+    def create_reservation_stock(self):
+        """ Create reservation stock for the product line."""
+        picking_obj = self.env['stock.picking']
+        destination_location_id = self.env.user.company_id.destination_location_id
+        if not destination_location_id:
+            destination_location_id = self.env['stock.location'].search(
+                [('usage', '=', 'internal'),
+                 ('company_id', '=', self.env.user.company_id.id)], limit=1)
+        warehouse_id = self.order_id.warehouse_id
+        location_id = warehouse_id.lot_stock_id
+        if self._context.get('product_id'):
+            product_id = self._context.get('product_id')
+            product_uom = product_id.uom_id
+        else:
+            product_id = self.product_id
+            product_uom = self.product_uom
+        if self._context.get('new_qty'):
+            product_uom_qty = self._context.get('new_qty')
+        else:
+            product_uom_qty = self.product_uom_qty
+        move_lines = []
+        move_lines.append((0, 0, {
+            'name': product_id.name,
+            'product_id': product_id.id,
+            'product_uom_qty': product_uom_qty,
+            'quantity_done': product_uom_qty,
+            'product_uom': product_uom.id,
+            'location_id': location_id and location_id.id,
+            'location_dest_id': destination_location_id and destination_location_id.id,
+        }))
+        values = {
+            'partner_id': self.order_id.partner_id.id,
+            'location_id': location_id and location_id.id,
+            'location_dest_id': destination_location_id and destination_location_id.id,
+            'scheduled_date': datetime.now(),
+            'date_done': datetime.now(),
+            'origin': self.order_id.name,
+            'owner_id': self.order_id.partner_id.id,
+            'picking_type_id': self.env.ref('stock.picking_type_out').id,
+            'move_ids_without_package': move_lines,
+        }
+        picking = picking_obj.sudo().create(values)
+        picking.sudo().action_confirm()
+        picking.sudo().action_assign()
+        picking.sudo().button_validate()
+        self.write({
+            'picking_id': picking.id
+        })
+
+    def cancel_reservation_stock(self, picking_ids):
+        """ Cancel reservation stock for the given picking IDs."""
+        product_return_moves = []
+        for picking in picking_ids:
+            if picking.products_availability_state == "late":
+                return picking.action_cancel()
+            else:
+                for move in picking.move_ids:
+                    if move.move_dest_ids:
+                        quantity = move.product_qty - sum(
+                            move.sudo().filtered(
+                                lambda m: m.state in ['partially_available',
+                                                      'assigned', 'done']). \
+                                mapped('move_line_ids').mapped('qty_done'))
+                    else:
+                        quantity = move.product_qty
+                    quantity = float_round(quantity,
+                                           precision_rounding=move.product_uom.rounding)
+                    product_return_moves.append((0, 0, {
+                        'product_id': move.product_id.id,
+                        'quantity': quantity,
+                        'move_id': move.id,
+                        'uom_id': move.product_id.uom_id.id,
+                        'to_refund': True,
+                    }))
+
+                location_id = picking.location_id.id
+                if picking.picking_type_id.return_picking_type_id.default_location_dest_id.return_location:
+                    location_id = picking.picking_type_id.return_picking_type_id.default_location_dest_id.id
+                stock_return = self.env['stock.return.picking'].sudo().create({
+                    'product_return_moves': product_return_moves,
+                    'picking_id': picking.id,
+                    'original_location_id': picking.location_id.id,
+                    'parent_location_id': picking.picking_type_id.warehouse_id and picking.picking_type_id.warehouse_id.view_location_id.id or picking.location_id.location_id.id,
+                    'location_id': location_id
+                })
+                if stock_return:
+                    new_picking_id, pick_type_id = stock_return.sudo()._create_returns()
+                    new_picking = self.env['stock.picking'].sudo().browse(
+                        new_picking_id)
+                    if new_picking.mapped('move_line_ids').filtered(
+                            lambda move: move.state in ['confirmed',
+                                                        'waiting']):
+                        new_picking.sudo().action_confirm()
+                        new_picking.sudo().action_assign()
+                        new_picking.sudo().action_set_quantities_to_reservation()
+                        new_picking.sudo().button_validate()
+                    else:
+                        new_picking.sudo().action_confirm()
+                        new_picking.sudo().action_assign()
+                        new_picking.sudo().action_set_quantities_to_reservation()
+                        new_picking.sudo().button_validate()
+
+    def unlink(self):
+        """ Override unlink method to cancel reservation stock when deleting
+        product lines in draft reservation orders."""
+        for line in self:
+            order_id = line.order_id
+            if order_id.state == 'draft' and order_id.type_name == 'Reservation':
+                if line.picking_id:
+                    line.sudo().cancel_reservation_stock(line.picking_id)
+        return super(SaleOrderLine, self).unlink()

website_product_reservation/static/description/index.html

@@ -0,0 +1,649 @@
+<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: #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>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;">
+                    Website Product Reservation
+                </h1>
+                <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;">
+                    Reserve The Products From the Website
+                </p>
+                <!-- END OF APP HERO -->
+                <img src="assets/screenshots/hero.gif" class="img-responsive"
+                     style="width: 100%; margin-left: auto; margin-right: auto;"/>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- NAVIGATION SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px; margin-top: 300px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/compass.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Explore This
+        Module</h2>
+</div>
+<div class="row my-4" style="font-family: 'Montserrat', sans-serif;">
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#overview">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Overview</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">Learn
+            more about this
+            module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#features">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Features</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+            features of this
+            module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#screenshots">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Screenshots</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+            screenshots for this
+            module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+</div>
+<!-- END OF NAVIGATION SECTION -->
+
+<!-- OVERVIEW SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;"
+     id="overview">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/pie-chart.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Overview
+    </h2>
+</div>
+<div class="row"
+     style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 py-4">
+        This module facilitates product reservation directly from the website.
+        Upon reserving the product, a corresponding reservation order is created.
+        You have the option to either cancel the reservation or proceed to create a sales order.
+    </div>
+</div>
+<!-- END OF OVERVIEW SECTION -->
+
+<!-- FEATURES SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;"
+     id="features">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/features.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Features
+    </h2>
+</div>
+<div class="row"
+     style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 col-md-6">
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Users can reserve the product directly from the website.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">A corresponding reservation order is created.
+        </span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;"> By enabling the 'Reserve Products' checkbox
+                inside the product, the item can be reserved.</span>
+        </div>
+    </div>
+</div>
+<!-- END OF FEATURES SECTION -->
+
+<!-- SCREENSHOTS SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;"
+     id="screenshots">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/pictures.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Screenshots
+    </h2>
+</div>
+<div class="row">
+    <div class="col-sm-12">
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Enable Reserve Products.
+            </h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                Go to product page and enable 'Reserve Products'.
+                </p>
+            <img src="assets/screenshots/1.png"
+                 class="img-responsive img-thumbnail border" width="100%"
+                 height="auto">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Reserve Products
+            </h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                In the Reservation menu on the website, products can be reserved
+                by simply clicking the 'Reserve' button.</p>
+            <img src="assets/screenshots/2.png"
+                 class="img-responsive img-thumbnail border" width="100%"
+                 height="auto">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Create Reservation Order.
+            </h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+               When you click the 'Reserve' button, you will be redirected to
+                the cart. From there, you can create the reservation order by
+                clicking the 'Reserve' button again.
+            </p>
+            <img src="assets/screenshots/3.png"
+                 class="img-responsive img-thumbnail border" width="100%"
+                 height="auto">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+               Here, the order is created.</p>
+            <img src="assets/screenshots/4.png"
+                 class="img-responsive img-thumbnail border" width="100%"
+                 height="auto">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                You can view these reservation orders under the 'eCommerce' menu on the website.
+            </p>
+            <img src="assets/screenshots/5.png"
+                 class="img-responsive img-thumbnail border" width="100%"
+                 height="auto">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                The created order is in the 'reserve' state. You can either
+                cancel it or generate a quotation from the reservation order. </p>
+            <img src="assets/screenshots/6.png"
+                 class="img-responsive img-thumbnail border" width="100%"
+                 height="auto">
+        </div>
+    </div>
+</div>
+<!-- END OF SCREENSHOTS SECTION -->
+
+<!-- RELATED PRODUCTS -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/categories.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Related
+        Products
+    </h2>
+</div>
+<div class="row">
+    <div class="col-sm-12">
+        <div id="demo1" class="row carousel slide" data-ride="carousel">
+            <!-- The slideshow -->
+            <div class="carousel-inner" style="padding: 30px;">
+                <div class="carousel-item" style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/customer_geolocation/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/1.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/odoo_website_helpdesk/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/2.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/website_hide_variants/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/3.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <div class="carousel-item active"
+                     style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/website_portal_events/"
+                           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/16.0/website_product_attachments/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/5.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/website_signup_approval/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/6.jpg">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <!-- Left and right controls -->
+            <a class="carousel-control-prev" href="#demo1" data-slide="prev"
+               style="width:35px; color:#000"> <span
+                    class="carousel-control-prev-icon"><i
+                    class="fa fa-chevron-left"
+                    style="font-size:24px"></i></span>
+            </a> <a class="carousel-control-next" href="#demo1"
+                    data-slide="next" style="width:35px; color:#000">
+            <span class="carousel-control-next-icon"><i
+                    class="fa fa-chevron-right"
+                    style="font-size:24px"></i></span>
+        </a>
+        </div>
+    </div>
+</div>
+<!-- END OF RELATED PRODUCTS -->
+
+<!-- OUR SERVICES -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/star.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Our Services
+    </h2>
+</div>
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/cogs.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Customization</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/wrench.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Implementation</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/lifebuoy.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Support</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/user.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Hire
+                Odoo
+                Developer</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/puzzle.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Integration</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/update.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Migration</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/consultation.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Consultancy</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/training.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Implementation</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/license.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Licensing Consultancy</h6>
+        </div>
+    </div>
+</div>
+<!-- END OF OUR SERVICES -->
+
+<!-- OUR INDUSTRIES -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/corporate.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Our
+        Industries
+    </h2>
+</div>
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/trading-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Trading
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easily procure
+                    and
+                    sell your products</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/pos-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    POS
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easy
+                    configuration
+                    and convivial experience</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/education-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Education
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    A platform for
+                    educational management</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/manufacturing-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Manufacturing
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Plan, track and
+                    schedule your operations</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/ecom-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    E-commerce &amp; Website
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Mobile
+                    friendly,
+                    awe-inspiring product pages</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/service-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Service Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Keep track of
+                    services and invoice</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/restaurant-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Restaurant
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Run your bar or
+                    restaurant methodically</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/hotel-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Hotel Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    An
+                    all-inclusive
+                    hotel management application</p>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- END OF OUR INDUSTRIES -->
+
+<!-- SUPPORT -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/customer-support.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Support
+    </h2>
+</div>
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4 d-flex justify-content-center align-items-center"
+                     style="background-color: #714B67; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="assets/misc/support.png" height="48" width="48"
+                         style="width: 42px; height: 42px;"/>
+                </div>
+                <div>
+                    <h4>Need Help?</h4>
+                    <p style="line-height: 100%;">Got questions or need help?
+                        Get in touch.</p>
+                    <a href="mailto:odoo@cybrosys.com">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">
+                            odoo@cybrosys.com</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4 d-flex justify-content-center align-items-center"
+                     style="background-color: #2AC44D; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="assets/misc/whatsapp.png" height="52" width="52"
+                         style="width: 52px; height: 52px;"/>
+                </div>
+                <div>
+                    <h4>WhatsApp</h4>
+                    <p style="line-height: 100%;">Say hi to us on WhatsApp!</p>
+                    <a href="https://api.whatsapp.com/send?phone=918606827707">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">
+                            +91 86068
+                            27707</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-12 my-5 d-flex justify-content-center align-items-center">
+            <img src="assets/misc/logo.png" width="144" height="31"
+                 style="width:144px; height: 31px; margin-top: 40px;"/>
+        </div>
+    </div>
+</div>
+<!-- END OF SUPPORT -->

website_product_reservation/views/product_template_views.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+	<!-- Product Form View Inherited -->
+	<record id="product_template_form_view" model="ir.ui.view">
+		<field name="name">
+            product.template.view.form.inherit.website.product.reservation
+        </field>
+		<field name="model">product.template</field>
+		<field name="inherit_id"
+               ref="product.product_template_form_view"/>
+		<field name="arch" type="xml">
+			<xpath expr="//sheet/div[@name='options']"
+                   position="inside">
+				<span class="d-inline-block">
+					<field name="reserve_products"/>
+					<label for="reserve_products"/>
+				</span>
+			</xpath>
+		</field>
+	</record>
+</odoo>

website_product_reservation/views/res_cofig_settings_views.xml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+	<!-- Override the res_config_settings_view_form view to add a new field -->
+	<record id="res_config_settings_view_form" model="ir.ui.view">
+		<field name="name">
+            res.config.settings.inherit.website.product.reservation
+        </field>
+		<field name="model">res.config.settings</field>
+		<field name="inherit_id" ref="stock.res_config_settings_view_form"/>
+		<field name="arch" type="xml">
+			<xpath expr="//div[@id='warning_info']" position="after">
+				<div class="col-12 col-lg-6 o_setting_box" id="warning_info">
+					<div class="o_setting_left_pane"/>
+					<div class="o_setting_right_pane">
+						<label for="destination_location_id"
+                               string="Desination Location"/>
+						<div class="text-muted">
+                            select destination location to reserve stock.
+                        </div>
+						<div class="content-group">
+							<div class="mt16">
+								<!-- Field widget for the new field -->
+								<field name="destination_location_id"
+                                       class="o_light_label"
+                                       widget="selection"/>
+							</div>
+						</div>
+					</div>
+				</div>
+			</xpath>
+		</field>
+	</record>
+</odoo>

website_product_reservation/views/sale_order_views.xml

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+	<!-- Customization of the sale.order form view -->
+	<record id="view_order_form" model="ir.ui.view">
+		<field name="name">sale.order.view.form.inherit.website.product.reservation</field>
+		<field name="inherit_id" ref="sale.view_order_form"/>
+		<field name="model">sale.order</field>
+		<field name="arch" type="xml">
+			<!-- Adding buttons for custom actions inside the form header -->
+			<xpath expr="//form/header" position="inside">
+				<!-- Button to create a quotation -->
+				<button name="action_make_draft" string="Create Quotation" type="object" class="oe_highlight" attrs="{'invisible':[('state', '!=', 'reserve')]}"/>
+				<!-- Button to cancel reservation -->
+				<button name="action_cancel_reservation" string="Cancel Reservation" type="object" attrs="{'invisible':[('state', '!=', 'reserve')]}"/>
+			</xpath>
+		</field>
+	</record>
+	<!-- Action for viewing reservation orders -->
+	<record id="action_view_reservation_orders" model="ir.actions.act_window">
+		<field name="name">Reservation Orders</field>
+		<field name="res_model">sale.order</field>
+		<field name="view_mode">tree,kanban,form,activity</field>
+		<field name="domain">[('state', '=', 'reserve'), ('website_id', '!=', False)]</field>
+		<field name="context" eval="{'show_sale': True, 'create': False}"/>
+		<field name="help" type="html">
+			<p class="o_view_nocontent_empty_folder">
+                There is no reservation order from the website yet
+            </p>
+		</field>
+	</record>
+	<!-- Menu item for the Reservation Orders -->
+	<menuitem id="menu_orders_reservation_orders" name="Reservation Orders"
+        action="action_view_reservation_orders"
+        parent="website_sale.menu_orders"/>
+</odoo>

website_product_reservation/views/website_templates.xml

@@ -0,0 +1,176 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+	<!-- Template for Reservation -->
+	<template id="reservation_page" name="Reservation">
+		<t t-call="website.layout">
+			<!-- Main structure for the reservation page -->
+			<div id="wrap" class="js_sale o_wsale_products_page">
+				<div class="oe_structure oe_empty oe_structure_not_nearest"
+                     id="oe_structure_website_sale_products_1"/>
+				<div class="container oe_website_sale pt-2">
+					<h3 style="text-align: center;">
+                        Reserve Products
+                    </h3>
+					<!-- Product display section -->
+					<div class="row">
+						<t t-foreach="products" t-as="product">
+							<div class="col-md-3"
+                                 style="border: 1px solid rgba(100, 100, 100, 0.2);padding: 0 15px 10px 32px;">
+								<div class="card-body p-1 oe_product_image">
+									<input type="hidden" name="csrf_token"
+                                           t-att-value="request.csrf_token()"/>
+									<a t-att-href="product_href"
+                                       class="d-block h-100"
+                                       itemprop="url">
+										<t t-set="image_holder"
+                                           t-value="product._get_image_holder()"/>
+										<span t-field="image_holder.image_1920"
+                                              t-options="{'widget': 'image', 'preview_image': 'image_1920'}"
+                                              class="d-flex h-100 justify-content-center align-items-center"/>
+									</a>
+								</div>
+								<!-- Product details section -->
+								<div class="product details product-item-details">
+									<h6 class="o_wsale_products_item_title mb-2">
+										<a class="product-item-link"
+                                           t-attf-href="/shop/product/#{slug(product)}">
+											<span t-field="product.name"/>
+										</a>
+									</h6>
+									<!-- Reservation button -->
+									<div class="actions-primary"
+                                         style="text-align: center;">
+										<form t-attf-action="/reservation/reserve?type_name=Reservation"
+                                              method="post">
+											<input name="product_id"
+                                                   t-att-value="product.product_variant_ids[0].id"
+                                                   type="hidden"/>
+											<input type="hidden"
+                                                   name="csrf_token"
+                                                   t-att-value="request.csrf_token()"/>
+											<!-- Reservation button -->
+											<button type="submit"
+                                                    title="Add to Reserve Cart"
+                                                    class="btn btn-primary"
+                                                    onclick="submit();"
+                                                    style="background-color: #337ab7 !important; border: 1px solid white !important;">
+												<span>Reserve</span>
+											</button>
+										</form>
+									</div>
+									<a href="#"
+                                       class="action actions-secondary"
+                                       title="Compare"
+                                       aria-label="Compare"
+                                       role="button"
+                                       style="visibility: visible;
+														position: static;
+														opacity: 1;
+														height: 40px;
+														line-height: 40px;
+														top: 0;
+														width: 40px;
+														border: 0;
+														background-color: #e6e6e6;
+														color: #000; display: none;">
+										<i class="fa fa-signal"
+                                           aria-hidden="true"/>
+										<span>Compare</span>
+									</a>
+								</div>
+							</div>
+
+						</t>
+						<t t-if="not products">
+							<div class="text-center text-muted oe_product">
+								<h3 class="css_editable_display">No reserve product
+									defined.
+								</h3>
+								<p groups="sales_team.group_sale_manager">Click
+									<i>
+									'New'
+								</i> in the top-right corner to create your first
+									product.
+
+								</p>
+							</div>
+		</t>
+					</div>
+				</div>
+			</div>
+			<div class="products_pager o_portal_pager d-flex justify-content-center pt-5 pb-3">
+				<t t-call="website.pager"/>
+			</div>
+		</t>
+	</template>
+	<!-- Inherited Template to Add Reservation Link -->
+	<template id="inherit_product_reservation"
+              inherit_id="website_sale.product">
+		<xpath expr="//form" position="inside">
+			<t t-if="product.reserve_products and product.website_published">
+				<a href="/reservation" id="reservation_page" role="button">
+                    RESERVE THIS PRODUCT
+                </a>
+			</t>
+		</xpath>
+	</template>
+	<!-- Template for Reserve From Cart -->
+	<template id="reserve_from_cart" inherit_id="website_sale.cart">
+		<xpath expr="//t[@t-call='payment.express_checkout']"
+               position="before">
+			<br/>
+			<div t-if="website_sale_order and website_sale_order.is_reservation_order">
+				<a class="btn btn-primary float-end" role="button"
+                   href="/reservation/confirm_reserve_order">
+					<span>Reserve</span>
+					<span class="fa fa-chevron-right"/>
+				</a>
+			</div>
+		</xpath>
+	</template>
+	<!-- Template for Reserve Thankyou -->
+	<template id="reservation_thankyou" name="Reservation Thank You">
+		<t t-call="website.layout">
+			<div id="wrap">
+				<div class="oe_structure"/>
+				<div class="container">
+					<h1>Thank you!
+						<span>Order
+							<em t-field="order.name"/>
+                            Reserved
+						</span>
+					</h1>
+					<div class="row">
+						<div class="col-md-12">
+							<div class="alert alert-success">
+                                    Thanks for your reservation request. Your
+                                    reservation has been confirmed.
+
+                                </div>
+						</div>
+					</div>
+				</div>
+				<div class="oe_structure"/></div>
+		</t>
+	</template>
+	<!-- Template for Not Allowed Page-->
+	<template id="not_allowed_to_reserve_page" name="not_allowed_popup">
+		<t t-call="website.layout">
+			<div id="wrap">
+				<div class="oe_structure"/>
+				<div class="container">
+					<h1 class="modal-title">Reservation Not
+                        Allowed
+                    </h1>
+					<div class="row">
+						<div class="col-md-12">
+							<p>You cannot reserve this Order
+                            </p>
+						</div>
+						<a href="/shop/cart">Back to Cart</a>
+					</div>
+				</div>
+			</div>
+		</t>
+	</template>
+</odoo>