Jun 14: [ADD] Initial Commit 'purchase_product_configurator'

purchase_product_configurator/README.rst

@@ -0,0 +1,39 @@
+.. 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
+
+Purchase Product Configurator
+=============================
+The module adds the product configurator feature to the purchase module,
+which is only present in sale module by default.
+
+Configuration
+=============
+* No additional configurations are required
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+Credits
+-------
+* Developers: (V17) Unnimaya C O , 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>`__

purchase_product_configurator/__init__.py

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

purchase_product_configurator/__manifest__.py

@@ -0,0 +1,59 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Unnimaya C O (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': 'Purchase Product Configurator',
+    'version': '17.0.1.0.0',
+    'category': 'Purchases',
+    'summary': """Helps to configure the product in purchase order line""",
+    'description': """The module helps you to override purchase_order_line to add 
+     the product configurate in  an RFQ """,
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': 'https://www.cybrosys.com',
+    'images': ['static/description/banner.jpg'],
+    'license': 'AGPL-3',
+    'depends': ['purchase_product_matrix'],
+    'data': [
+        'views/optional_product_template.xml',
+        'views/purchase_order_views.xml',
+        'views/product_template_views.xml'
+    ],
+    'assets': {
+        'web.assets_backend': [
+            'purchase_product_configurator/static/src/js/purchase_product_field.js',
+            'purchase_product_configurator/static/src/js/product_configurator_dialog/product_configurator_dialog.js',
+            'purchase_product_configurator/static/src/js/product_configurator_dialog/product_configurator_dialog.xml',
+            'purchase_product_configurator/static/src/js/product_list/product_list.js',
+            'purchase_product_configurator/static/src/js/product_list/product_list.xml',
+            'purchase_product_configurator/static/src/js/product/product.js',
+            'purchase_product_configurator/static/src/js/product/product_template.xml',
+            'purchase_product_configurator/static/src/js/product_template_attribute_line/product_template_attribute_line.js',
+            'purchase_product_configurator/static/src/js/product_template_attribute_line/product_template_attribute_line.xml',
+            'purchase_product_configurator/static/src/js/product/product.scss',
+            'purchase_product_configurator/static/src/js/product_template_attribute_line/product_template_attribute_line.scss'
+        ],
+    },
+    'installable': True,
+    'auto_install': False,
+    'application': False
+}

purchase_product_configurator/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: Unnimaya C O (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 purchase_product_configurator

purchase_product_configurator/controllers/purchase_product_configurator.py

@@ -0,0 +1,220 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Unnimaya C O (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.http import Controller, request, route
+
+
+class ProductConfiguratorController(Controller):
+
+    @route('/purchase_product_configurator/get_values', type='json', auth='user')
+    def get_product_configurator_values(
+            self,
+            product_template_id,
+            quantity,
+            currency_id,
+            product_uom_id=None,
+            company_id=None,
+            ptav_ids=None,
+            only_main_product=False,
+    ):
+        """ Return all product information needed for the product configurator.
+        """
+        if company_id:
+            request.update_context(allowed_company_ids=[company_id])
+        product_template = request.env['product.template'].browse(product_template_id)
+        combination = request.env['product.template.attribute.value']
+        if ptav_ids:
+            combination = request.env['product.template.attribute.value'].browse(ptav_ids).filtered(
+                lambda ptav: ptav.product_tmpl_id.id == product_template_id
+            )
+            # Set missing attributes (unsaved no_variant attributes, or new attribute on existing product)
+            unconfigured_ptals = (
+                    product_template.attribute_line_ids - combination.attribute_line_id).filtered(
+                lambda ptal: ptal.attribute_id.display_type != 'multi')
+            combination += unconfigured_ptals.mapped(
+                lambda ptal: ptal.product_template_value_ids._only_active()[:1]
+            )
+        if not combination:
+            combination = product_template._get_first_possible_combination()
+        return dict(
+            products=[
+                dict(
+                    **self._get_product_information(
+                        product_template,
+                        combination,
+                        currency_id,
+                        quantity=quantity,
+                        product_uom_id=product_uom_id
+                    ),
+                    parent_product_tmpl_ids=[],
+                )
+            ],
+            optional_products=[
+                dict(
+                    **self._get_product_information(
+                        optional_product_template,
+                        optional_product_template._get_first_possible_combination(
+                            parent_combination=combination
+                        ),
+                        currency_id,
+                        # giving all the ptav of the parent product to get all the exclusions
+                        parent_combination=product_template.attribute_line_ids. \
+                            product_template_value_ids,
+                    ),
+                    parent_product_tmpl_ids=[product_template.id],
+                ) for optional_product_template in product_template.optional_product_ids
+            ] if not only_main_product else []
+        )
+
+    @route('/purchase_product_configurator/create_product', type='json', auth='user')
+    def purchase_product_configurator_create_product(self, product_template_id, combination):
+        """ Create the product when there is a dynamic attribute in the combination.
+        """
+        product_template = request.env['product.template'].browse(product_template_id)
+        combination = request.env['product.template.attribute.value'].browse(combination)
+        product = product_template._create_product_variant(combination)
+        return product.id
+
+    @route('/purchase_product_configurator/update_combination', type='json', auth='user')
+    def purchase_product_configurator_update_combination(
+            self,
+            product_template_id,
+            combination,
+            currency_id,
+            quantity,
+            product_uom_id=None,
+            company_id=None,
+    ):
+        """ Return the updated combination information.
+        """
+        if company_id:
+            request.update_context(allowed_company_ids=[company_id])
+        product_template = request.env['product.template'].browse(product_template_id)
+        product_uom = request.env['uom.uom'].browse(product_uom_id)
+        currency = request.env['res.currency'].browse(currency_id)
+        combination = request.env['product.template.attribute.value'].browse(combination)
+        product = product_template._get_variant_for_combination(combination)
+        return self._get_basic_product_information(
+            product or product_template,
+            combination,
+            quantity=quantity or 0.0,
+            uom=product_uom,
+            currency=currency,
+        )
+
+    @route('/purchase_product_configurator/get_optional_products', type='json', auth='user')
+    def purchase_product_configurator_get_optional_products(
+            self,
+            product_template_id,
+            combination,
+            parent_combination,
+            currency_id,
+            company_id=None,
+    ):
+        """ Return information about optional products for the given `product.template`.
+        """
+        if company_id:
+            request.update_context(allowed_company_ids=[company_id])
+        product_template = request.env['product.template'].browse(product_template_id)
+        parent_combination = request.env['product.template.attribute.value'].browse(
+            parent_combination + combination
+        )
+        return [
+            dict(
+                **self._get_product_information(
+                    optional_product_template,
+                    optional_product_template._get_first_possible_combination(
+                        parent_combination=parent_combination
+                    ),
+                    currency_id,
+                    parent_combination=parent_combination
+                ),
+                parent_product_tmpl_ids=[product_template.id],
+            ) for optional_product_template in product_template.optional_product_ids
+        ]
+
+    def _get_product_information(
+            self,
+            product_template,
+            combination,
+            currency_id,
+            quantity=1,
+            product_uom_id=None,
+            parent_combination=None,
+    ):
+        """ Return complete information about a product.
+        """
+        product_uom = request.env['uom.uom'].browse(product_uom_id)
+        currency = request.env['res.currency'].browse(currency_id)
+        product = product_template._get_variant_for_combination(combination)
+        attribute_exclusions = product_template._get_attribute_exclusions(
+            parent_combination=parent_combination,
+            combination_ids=combination.ids,
+        )
+        return dict(
+            product_tmpl_id=product_template.id,
+            **self._get_basic_product_information(
+                product or product_template,
+                combination,
+                quantity=quantity,
+                uom=product_uom,
+                currency=currency
+            ),
+            quantity=quantity,
+            attribute_lines=[dict(
+                id=ptal.id,
+                attribute=dict(**ptal.attribute_id.read(['id', 'name', 'display_type'])[0]),
+                attribute_values=[
+                    dict(
+                        **ptav.read(['name', 'html_color', 'image', 'is_custom'])[0],
+                    ) for ptav in ptal.product_template_value_ids
+                    if ptav.ptav_active or combination and ptav.id in combination.ids
+                ],
+                selected_attribute_value_ids=combination.filtered(
+                    lambda c: ptal in c.attribute_line_id
+                ).ids,
+                create_variant=ptal.attribute_id.create_variant,
+            ) for ptal in product_template.attribute_line_ids],
+            exclusions=attribute_exclusions['exclusions'],
+            archived_combinations=attribute_exclusions['archived_combinations'],
+            parent_exclusions=attribute_exclusions['parent_exclusions'],
+        )
+
+    def _get_basic_product_information(self, product_or_template, combination, **kwargs):
+        """ Return basic information about a product
+        """
+        basic_information = dict(
+            **product_or_template.read(['description_sale', 'display_name'])[0]
+        )
+        # If the product is a template, check the combination to compute the name to take dynamic
+        # and no_variant attributes into account. Also, drop the id which was auto-included by the
+        # search but isn't relevant since it is supposed to be the id of a `product.product` record.
+        if not product_or_template.is_product_variant:
+            basic_information['id'] = False
+            combination_name = combination._get_combination_name()
+            if combination_name:
+                basic_information.update(
+                    display_name=f"{basic_information['display_name']} ({combination_name})"
+                )
+        return dict(
+            **basic_information,
+            price=product_or_template.standard_price
+        )

purchase_product_configurator/doc/RELEASE_NOTES.md

@@ -0,0 +1,8 @@
+## Module <purchase_product_configurator>
+
+#### 24.05.2024
+#### Version 17.0.1.0.0
+#### ADD
+- Initial Commit for Purchase Product Configurator.
+
+

purchase_product_configurator/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: Unnimaya C O (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_attribute_custom_value
+from . import product_template
+from . import purchase_order_line

purchase_product_configurator/models/product_attribute_custom_value.py

@@ -0,0 +1,35 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Unnimaya C O (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 ProductAttributeCustomValue(models.Model):
+    """
+    Model for representing custom attribute values for a purchase order line.
+    Inherits from 'product.attribute.custom.value' model.
+    """
+    _inherit = "product.attribute.custom.value"
+
+    purchase_order_line_id = fields.Many2one('purchase.order.line',
+                                             string="Purchase Order Line",
+                                             required=True, ondelete='cascade',
+                                             help="purchase order lines")

purchase_product_configurator/models/product_template.py

@@ -0,0 +1,84 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Unnimaya C O (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+################################################################################
+from odoo import api, fields, models
+
+
+class ProductTemplate(models.Model):
+    _inherit = 'product.template'
+    _check_company_auto = True
+
+    product_config_mode = fields.Selection(selection=[('configurator',
+                                                       "Product Configurator"),
+                                                      ('matrix',
+                                                       "Order Grid Entry")],
+                                           string="Product Mode",
+                                           default='configurator',
+                                           help="Configurator: choose "
+                                                "attribute values to add "
+                                                "the matching product variant"
+                                                " to the order. "
+                                                "\nGrid: add several variants"
+                                                " at once from the grid "
+                                                "of attribute values")
+    optional_product_ids = fields.Many2many(
+        comodel_name='product.template',
+        relation='product_optional_rel',
+        column1='src_id',
+        column2='dest_id',
+        string="Optional Products",
+        help="Optional Products are suggested "
+             "whenever the customer hits *Add to Cart* (cross-sell strategy, "
+             "e.g. for computers: warranty, software, etc.).",
+        check_company=True)
+
+    @api.depends('attribute_line_ids.value_ids.is_custom', 'attribute_line_ids.attribute_id.create_variant')
+    def _compute_has_configurable_attributes(self):
+        """ A product is considered configurable if:
+        - It has dynamic attributes
+        - It has any attribute line with at least 2 attribute values configured
+        - It has at least one custom attribute value """
+        for product in self:
+            product.has_configurable_attributes = (
+                any(attribute.create_variant == 'dynamic' for attribute in product.attribute_line_ids.attribute_id)
+                or any(len(attribute_line_id.value_ids) >= 2 for attribute_line_id in product.attribute_line_ids)
+                or any(attribute_value.is_custom for attribute_value in product.attribute_line_ids.value_ids)
+            )
+
+    def get_single_product_variant(self):
+        """ Method used by the product configurator to check if the product is configurable or not.
+
+        We need to open the product configurator if the product:
+        - is configurable (see has_configurable_attributes)
+        - has optional products """
+        res = super().get_single_product_variant()
+        if res.get('product_id', False):
+            has_optional_products = False
+            for optional_product in self.product_variant_id.optional_product_ids:
+                if optional_product.has_dynamic_attributes() or optional_product._get_possible_variants(
+                    self.product_variant_id.product_template_attribute_value_ids
+                ):
+                    has_optional_products = True
+                    break
+            res.update({
+                'has_optional_products': has_optional_products,
+            })
+        return res

purchase_product_configurator/models/purchase_order_line.py

@@ -0,0 +1,64 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Unnimaya C O (odoo@cybrosys.com)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+################################################################################
+from odoo import api, fields, models
+
+
+class PurchaseOrderLine(models.Model):
+    """
+    Model for representing purchase order lines with additional fields and
+    methods.
+    Inherits from 'purchase.order.line' model.
+    """
+    _inherit = 'purchase.order.line'
+
+    product_config_mode = fields.Selection(
+        related='product_template_id.product_config_mode',
+        depends=['product_template_id'],
+        help="product configuration mode")
+    product_custom_attribute_value_ids = fields.One2many(
+        comodel_name='product.attribute.custom.value',
+        inverse_name='purchase_order_line_id',
+        string="Custom Values",
+        compute='_compute_custom_attribute_values',
+        help="product custom attribute values",
+        store=True, readonly=False, precompute=True, copy=True)
+
+    @api.depends('product_id')
+    def _compute_custom_attribute_values(self):
+        """
+        Checks if the product has custom attribute values associated with it,
+        and if those values belong to the valid values of the product template.
+        """
+        for line in self:
+            if not line.product_id:
+                line.product_custom_attribute_value_ids = False
+                continue
+            if not line.product_custom_attribute_value_ids:
+                continue
+            valid_values = line.product_id.product_tmpl_id. \
+                valid_product_template_attribute_line_ids. \
+                product_template_value_ids
+            # remove the is_custom values that don't belong to this template
+            for attribute in line.product_custom_attribute_value_ids:
+                if attribute.custom_product_template_attribute_value_id not in \
+                        valid_values:
+                    line.product_custom_attribute_value_ids -= attribute

purchase_product_configurator/static/description/assets/misc/email.svg

@@ -0,0 +1,33 @@
+<svg width="80" height="81" viewBox="0 0 80 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="3116889_design_email_material_communication_mail_icon 1" clip-path="url(#clip0_81_366)">
+<g id="layer1">
+<path id="rect3851" d="M74.6067 0.730957H5.5424C2.75742 0.730957 0.499756 3.01685 0.499756 5.83664V75.7642C0.499756 78.584 2.75742 80.8699 5.5424 80.8699H74.6067C77.3916 80.8699 79.6493 78.584 79.6493 75.7642V5.83664C79.6493 3.01685 77.3916 0.730957 74.6067 0.730957Z" fill="#DB534B"/>
+<g id="Clip path group">
+<mask id="mask0_81_366" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="1" y="5" width="78" height="76">
+<g id="clipPath4206">
+<path id="rect4208" d="M73.6244 5.2915H6.62595C3.92428 5.2915 1.73413 7.4473 1.73413 10.1066V76.0546C1.73413 78.7139 3.92428 80.8697 6.62595 80.8697H73.6244C76.3261 80.8697 78.5162 78.7139 78.5162 76.0546V10.1066C78.5162 7.4473 76.3261 5.2915 73.6244 5.2915Z" fill="white"/>
+</g>
+</mask>
+<g mask="url(#mask0_81_366)">
+<g id="g4145" opacity="0.489612">
+<g id="g4147">
+<path id="path4149" d="M65.8115 41.5171C65.8115 54.9863 54.4292 65.9053 40.3884 65.9053L198.828 221.861C212.869 221.861 224.251 210.942 224.251 197.472L65.8115 41.5171Z" fill="black" fill-opacity="0.0588235"/>
+<path id="path4151" d="M40.3884 65.9051C33.2495 65.9051 26.7979 63.0825 22.1802 58.5371L180.62 214.492C185.237 219.038 191.689 221.86 198.828 221.86L40.3884 65.9051Z" fill="black" fill-opacity="0.0588235"/>
+<path id="path4153" d="M22.1802 58.5373C17.7157 54.1428 14.9653 48.1381 14.9653 41.5171L173.405 197.472C173.405 204.093 176.155 210.098 180.62 214.493L22.1802 58.5373Z" fill="black" fill-opacity="0.0588235"/>
+<path id="path4155" d="M14.9653 41.5171C14.9653 28.0479 26.3476 17.1289 40.3884 17.1289L198.828 173.084C184.787 173.084 173.405 184.003 173.405 197.472L14.9653 41.5171Z" fill="black" fill-opacity="0.0588235"/>
+<path id="path4157" d="M40.3884 17.1289C47.5273 17.1289 53.9789 19.9516 58.5966 24.4969L217.036 180.452C212.418 175.907 205.967 173.084 198.828 173.084L40.3884 17.1289Z" fill="black" fill-opacity="0.0588235"/>
+<path id="path4159" d="M58.5964 24.4971C63.0609 28.8916 65.8113 34.8963 65.8113 41.5173L224.251 197.473C224.251 190.852 221.5 184.847 217.036 180.452L58.5964 24.4971Z" fill="black" fill-opacity="0.0588235"/>
+</g>
+<path id="path4111" d="M65.8114 41.5171C65.8114 54.9863 54.4291 65.9053 40.3884 65.9053C26.3476 65.9053 14.9653 54.9863 14.9653 41.5171C14.9653 28.0479 26.3476 17.1289 40.3884 17.1289C54.4291 17.1289 65.8114 28.0479 65.8114 41.5171Z" fill="black" fill-opacity="0.0588235"/>
+</g>
+</g>
+</g>
+<path id="path3864" d="M17.506 17.5386H62.9018C64.4068 17.5386 65.8501 18.1439 66.9143 19.2214C67.9784 20.2988 68.5763 21.7602 68.5763 23.284V57.7564C68.5763 58.5109 68.4295 59.258 68.1443 59.9551C67.8592 60.6521 67.4412 61.2855 66.9143 61.819C66.3873 62.3525 65.7618 62.7757 65.0733 63.0645C64.3849 63.3532 63.647 63.5018 62.9018 63.5018H17.506C14.3567 63.5018 11.8315 60.9164 11.8315 57.7564V23.284C11.8315 20.0953 14.3567 17.5386 17.506 17.5386ZM40.2039 37.6475L62.9018 23.284H17.506L40.2039 37.6475ZM17.506 57.7564H62.9018V30.0923L40.2039 44.4271L17.506 30.0923V57.7564Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_81_366">
+<rect width="80" height="81" fill="white"/>
+</clipPath>
+</defs>
+</svg>

purchase_product_configurator/static/description/assets/misc/phone.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="44" viewBox="0 0 36 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M7.25 19.3903C10.13 26.0689 14.76 31.5322 20.43 34.9305L24.83 29.7268C25.38 29.0778 26.17 28.889 26.86 29.1486C29.1 30.0218 31.51 30.4938 34 30.4938C35.11 30.4938 36 31.544 36 32.8537V41.1135C36 42.4233 35.11 43.4734 34 43.4734C15.22 43.4734 0 25.5143 0 3.35456C0 2.0448 0.9 0.994629 2 0.994629H9C10.11 0.994629 11 2.0448 11 3.35456C11 6.29268 11.4 9.1364 12.14 11.7795C12.36 12.5937 12.2 13.5259 11.65 14.1749L7.25 19.3903Z" fill="white"/>
+</svg>

purchase_product_configurator/static/description/assets/misc/support-email.svg

@@ -0,0 +1,6 @@
+<svg width="49" height="37" viewBox="0 0 49 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M2.23798 3.59132C3.53363 4.39742 21.5313 15.9748 22.2027 16.3917C22.8741 16.8087 23.5573 17.0032 24.6173 17.0032C25.6774 17.0032 26.3606 16.8087 27.0319 16.3917C27.7033 15.9748 45.701 4.39742 46.9967 3.59132C47.4796 3.29945 48.2923 2.77131 48.469 2.17368C48.7753 1.11741 48.4455 0.714355 47.138 0.714355H24.6173H2.09664C0.789214 0.714355 0.459412 1.13131 0.765656 2.17368C0.942335 2.78521 1.75506 3.29945 2.23798 3.59132Z" fill="white"/>
+<path id="Vector_2" d="M48.0214 4.21664C47.0555 4.80037 38.3865 12.0831 32.6503 16.4611L42.3323 29.3171C42.5679 29.5951 42.6739 29.9286 42.5443 30.0954C42.403 30.2483 42.0967 30.1649 41.8494 29.9008L30.2357 18.3374C28.4807 19.6716 27.2439 20.5889 27.0319 20.7279C26.1249 21.2699 25.4889 21.3394 24.6173 21.3394C23.7457 21.3394 23.1096 21.2699 22.2027 20.7279C21.9789 20.5889 20.7539 19.6716 18.9989 18.3374L7.38519 29.9008C7.14961 30.1788 6.83159 30.2622 6.69025 30.0954C6.54891 29.9425 6.65491 29.5951 6.89048 29.3171L16.5607 16.4611C10.8245 12.0831 2.06126 4.80037 1.09541 4.21664C0.0588929 3.59121 0 4.32783 0 4.89766C0 5.46749 0 33.3893 0 33.3893C0 34.6819 1.61367 36.2941 2.76797 36.2941H24.6173H46.4666C47.6209 36.2941 48.999 34.668 48.999 33.3893C48.999 33.3893 48.999 5.4536 48.999 4.89766C48.999 4.31393 49.0697 3.59121 48.0214 4.21664Z" fill="white"/>
+</g>
+</svg>

purchase_product_configurator/static/description/assets/misc/tick-mark.svg

@@ -0,0 +1,17 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="52" height="52" fill="#F5F5F5"/>
+<g clip-path="url(#clip0_0_1)">
+<rect width="1440" height="7504" transform="translate(-107 -1660)" fill="white"/>
+<rect x="-45" y="-203" width="1305" height="937" rx="19" fill="#FFF5FC"/>
+<rect width="52" height="52" fill="url(#pattern0)"/>
+</g>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_0_1" transform="scale(0.00387597)"/>
+</pattern>
+<clipPath id="clip0_0_1">
+<rect width="1440" height="7504" fill="white" transform="translate(-107 -1660)"/>
+</clipPath>
+<image id="image0_0_1" width="258" height="258" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQIAAAECCAYAAAAVT9lQAAAACXBIWXMAAAsTAAALEwEAmpwYAAAJJ0lEQVR4nO3dYZXjNhQGUDEohEAohEAohEAYCIawEAxhIQRCIQTCQmhX202bTWcmcWzpSda953y/J9JYL5EsyykBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD1/f49f37PXwXztVprgMXeUtkCkDNXaw2wyOF7zql8EXir1SBgmTw4v6XyReBUq0HA835L/8zVSxeAXGSOldoELPBHqvMrIP+N3yu1CXhS/hXwJZUvAIoANKrGbcFr8t/5rU6zgGfVWhBUBKBBtRYEFQFoVJ4KXJIiAMOqsUNQEYBG1Z4K/PXz7ykC0IjaU4GcuUrLgKecUt0CoAhAQ/JP8jwgFQEY1CHV2yCkCECDaj0rcJ8/azQOeGxK9QvAtQi4OwDBIm4NKgLQkJoPDCkC0KCo9QBFABpRe6uwIgANidofcM23pAhAqDwAo9YDrkXAyUIQKA/AqPUARQAacEqxRSBHEYBAkYuC15yKtxL40JwUARhWXhQ8p/gi4DVkEOSQYu8MXDOXbijwvug7A4oABIvcLnwbuwYhyCnFFwBFAALVet/go+RfI4fCbQXekefi0QXgWgRsGILKWrk9eM0fZZsL3It+cOg+p7LNBe5Fnib0XuayzQXutbJHQBGAIK0VAbcJobI8B2+pCDhhCCrLRSB64N8XAbcJoaLWikCO24RQ0ZTiB/19PFIMFc0pftDfZy7aYuAXLRYBLyeFilosApfkDgFU02IRcIcAKmnt4aHbuEMAFbT28NBtpoLtBn5quQh8Ldhu4KeWi4BnCKCClouAo8aggpaLQM6xXNOBrPUiYPswFNZ6EZjLNR3IWi8CFgehsNaLgMVBKKz1IpBj5yAU1EMRmIq1HuiiCNg5CAX1UAQuyeIgFNNDEfBYMRTUQxHIOZXqAKDd8wRuMxdrPdDkyUL3ceYgFNRDEbBpCArqoQjk2DQEhfRSBKZSHQCj+5LiB/gzOZfqABjdKcUP8GfibcVQSC9FIOdYqA9gaD0VgalQH8DQ8rdr9OB+NudCfQBDy/vy83w7eoA/E+sCUEBPRSDnWKYbYFz5m7WnIjCV6QYYVy9PEl5zLtMNMK7eioB1ASggf7tGD+4lOZbpBhjXnOIH9pJ8KdMNMK5enh+4xvkCsLFTih/YS+J8AdhYb0Ugx/kCsKG8YSh6UC/NXKQnaFb+h+d5oJ+AZfS2azDHy0oHk4vA9Z+fL9ZT7MfZnTyYLil+YC+N9xEM5LYI3Ca/osq3wXq9bRi65q1EZ9Cmj4rANflb7Bj26fYhF9ToQb003lM4kEdF4DZT0Gfs3ZI+biW2EA/klQvUQuIy+ad19KB+JccSnUF71nxLWUh8Tu6j6AH9SmwhHsSaInAbC4kf6/E2YY4txIPYqghcc0l+Rt47pD6LgFeXD2LrInCbqWI7WtbrbcIctwoHULIIXGMhsb9zBa5xq3AANYrANSMvJNbs563/Z9Z6di7q4hxtITEXv+gB/Wo8Vbhz0d9QlzTGQmJuY/RgfjVuFe5cdBG4zVS4rZF6vU2Yc0lj/WobTktF4Jo9LiT2fIcgx63CnWv14tzbQuI5xffpq5kK9AeNaf3n6h4WEucU34+vxu7BgZxS/AX3WS6p34XE1vv2sziAdEA9PAM/FWt9Gbl4RffZmtg9OKBejsbqZSExf8aWp1yPct6+S+hFLyfmtr6Q2PsdArsH6epwjFYXEucU3zdrYvcgP/SwXnDNJbW1kNhTIX0vHijiX72sF9xmKtITy+SCFN0Pa2JKwP/0eFFHLiTmv9vz4mDOcfNeYRemFH9xLk3EQmLvi4M5HijiU+cUf5G+kpoLiXOlNpXKJZkS8EC+QHr9yZsv8OP2XfKL3hcHc0r3ETuRL5Toi3VNpu275Ife+yXHlIBF8gUTfdGuydYLiT3/UrrtE1MCFut9QWzLhcTe+yLHGQO85JD6/xbMWbuQ2Puvo5xpRfvhx/bT6It4i1zSa4tke2i/MwbYxJziL+atMi1o9yHt4xeRKQGb2MMGmts8s5C4lzZPD9oJi/TyyPKzebSQODfwGdfGlIAi9rCZ5j7vLSTuYV0gx5SAYnp6ZPnZXNJ/C4mHtI91gend/x5sZA8baz4bPHtYFzAloIpjir/Y5eOYElDNlOIvePl/ps/+aVDCHn5G7ymmBIQ4pP2uF/QYUwLCnFL8ABBTAhowp/iBMHIuyePFNKDHU5D3lOPjfxHUsbctyL3EiUM0Z0rxA2OkXJIpAY06p/gBMkqOT/5PoLpDckuxRkwJaN5ent5rNV5VRjf2cM5fq/H2YrqxlxN+Wou3F9MdtxS3jSkB3drjqUZROS3se2jKOcUPot5zXtzr0JhDcktxTb6lbV/fBmHcUnw90wv9Dc2aU/yg6i0OG2F3PKW4PA4bYZfcUnw+04t9DF3IF3j0IGs9l2TPAAOw6/DzHF/vWujHIbml+FHmFf0K3Tml+EHXWmwjZkh7fJfimpzWdSf0ac/vUlya88q+hK4dU/wgjI5txJAcZDKt70Lo38gHmdhGDDdG3XV43KLzYE/yT+TogVkzTiOGD5xT/ACtEXsG4BOHNMYtRacRwwN7P+vwvF1Xwb7tedfhYcN+gl3b667DactOghHs7azDy7bdA+OYU/wA3irHjfsGhrGXsw7nrTsGRpO/SaMH8prYMwAb6fnBpLcC/QFD6nWK4KEi2FiPDyZ5NwEUMKX4wf1sPFQEBfVwdoEFQiishynCqVjrgX+1PEU4F2w3cKfVKcKhZKOBX7U4RZiKthh4V0tThEuyQAhhWpkiOHUIArUwRTgXbyXwUPQU4VC+icAzoqYIU43GAc+JmCJckgVCaE7tKYIFQmhUrSnCuVaDgOVqTREOtRoEvKb0FGGq1xRgjVJTBAuE0JFSU4RTzUYA6209RbBACB3a+tBTZxBCp45pmyLgDELo3Nr3IjiDEHZg7RTBAiHsxKtvV/aSEtiZr2l5ITiGfFKgmDxFyPP9Z4vAHPMxgdLyS0mfXSA8BH1GoIK8MehRIZjCPh1QxaPtx5e4jwbUlL/xPyoEDhyBQXy0t+Ac+aGA+t7bW+B5AhjQ7d4CzxPAoPItwm/J8wQwvLxw+Bb9IQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4DV/A/Mf3+pWEmbtAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>

purchase_product_configurator/static/description/assets/misc/whatsapp.svg

@@ -0,0 +1,33 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="3116884_whatsapp_square_chat_design_message_icon 1" clip-path="url(#clip0_81_382)">
+<g id="layer1">
+<path id="rect3851" d="M74.6066 0.72168H5.5424C2.75742 0.72168 0.499756 2.97935 0.499756 5.76433V74.8286C0.499756 77.6135 2.75742 79.8712 5.5424 79.8712H74.6066C77.3916 79.8712 79.6492 77.6135 79.6492 74.8286V5.76433C79.6492 2.97935 77.3916 0.72168 74.6066 0.72168Z" fill="#39BB59"/>
+<g id="Clip path group">
+<mask id="mask0_81_382" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="6" y="9" width="75" height="72">
+<g id="clipPath4206">
+<path id="rect4208" d="M75.7716 9.01709H11.1629C8.55758 9.01709 6.44556 11.0471 6.44556 13.5512V75.6502C6.44556 78.1543 8.55758 80.1843 11.1629 80.1843H75.7716C78.3769 80.1843 80.4889 78.1543 80.4889 75.6502V13.5512C80.4889 11.0471 78.3769 9.01709 75.7716 9.01709Z" fill="white"/>
+</g>
+</mask>
+<g mask="url(#mask0_81_382)">
+<g id="g4145" opacity="0.489612">
+<g id="g4147">
+<path id="path4149" d="M68.2374 43.1284C68.2374 55.8115 57.2611 66.0932 43.7212 66.0932L196.51 212.946C210.049 212.946 221.026 202.665 221.026 189.982L68.2374 43.1284Z" fill="black" fill-opacity="0.0588235"/>
+<path id="path4151" d="M43.7211 66.0932C36.8369 66.0932 30.6154 63.4353 26.1624 59.1553L178.951 206.008C183.404 210.289 189.625 212.946 196.51 212.946L43.7211 66.0932Z" fill="black" fill-opacity="0.0588235"/>
+<path id="path4153" d="M26.1623 59.1553C21.8571 55.0173 19.2048 49.363 19.2048 43.1284L171.993 189.982C171.993 196.216 174.645 201.87 178.951 206.008L26.1623 59.1553Z" fill="black" fill-opacity="0.0588235"/>
+<path id="path4155" d="M19.2048 43.1284C19.2048 30.4453 30.1811 20.1636 43.7211 20.1636L196.509 167.017C182.969 167.017 171.993 177.299 171.993 189.982L19.2048 43.1284Z" fill="black" fill-opacity="0.0588235"/>
+<path id="path4157" d="M43.7212 20.1636C50.6054 20.1636 56.8269 22.8215 61.2799 27.1015L214.068 173.955C209.615 169.675 203.394 167.017 196.51 167.017L43.7212 20.1636Z" fill="black" fill-opacity="0.0588235"/>
+<path id="path4159" d="M61.2798 27.1016C65.585 31.2396 68.2373 36.8939 68.2373 43.1284L221.026 189.982C221.026 183.747 218.373 178.093 214.068 173.955L61.2798 27.1016Z" fill="black" fill-opacity="0.0588235"/>
+</g>
+<path id="path4111" d="M68.2373 43.1284C68.2373 55.8115 57.261 66.0932 43.7211 66.0932C30.1811 66.0932 19.2048 55.8115 19.2048 43.1284C19.2048 30.4453 30.1811 20.1636 43.7211 20.1636C57.261 20.1636 68.2373 30.4453 68.2373 43.1284Z" fill="black" fill-opacity="0.0588235"/>
+</g>
+</g>
+</g>
+<path id="path4074" d="M51.3896 43.6875C51.9673 43.9879 52.337 44.1497 52.4526 44.3808C52.5912 44.635 52.545 45.7904 51.9673 47.1076C51.5051 48.4017 49.1018 49.6496 48.0388 49.6958C46.9758 49.7421 46.9527 50.5277 41.1985 48.0089C35.4444 45.49 31.9781 39.3431 31.7008 38.9502C31.4235 38.5574 29.4823 35.7612 29.5748 32.9188C29.6903 30.0995 31.1693 28.7592 31.7701 28.2046C32.3247 27.6037 32.9487 27.5344 33.3415 27.6037H34.4276C34.7743 27.6037 35.2596 27.4651 35.6986 28.6437L37.2931 32.965C37.4318 33.2654 37.5242 33.6121 37.3163 33.9818L36.6923 34.9293L35.7911 35.8998C35.5138 36.1771 35.1902 36.4776 35.5138 37.0553C35.7911 37.6561 36.9465 39.5741 38.5641 41.1687C40.667 43.2022 42.5158 43.8724 43.0704 44.1728C43.625 44.4963 43.9716 44.4501 44.3182 44.0804L46.1901 41.9081C46.6291 41.3304 46.9989 41.4691 47.5304 41.6539L51.3896 43.6875ZM40.4128 16.0493C46.5417 16.0493 52.4195 18.484 56.7533 22.8178C61.0871 27.1515 63.5217 33.0293 63.5217 39.1582C63.5217 45.287 61.0871 51.1649 56.7533 55.4986C52.4195 59.8324 46.5417 62.2671 40.4128 62.2671C35.8604 62.2671 31.6315 60.9498 28.0496 58.6852L17.304 62.2671L20.8858 51.5214C18.6212 47.9396 17.304 43.7106 17.304 39.1582C17.304 33.0293 19.7386 27.1515 24.0724 22.8178C28.4061 18.484 34.284 16.0493 40.4128 16.0493ZM40.4128 20.6711C35.5098 20.6711 30.8075 22.6188 27.3405 26.0858C23.8735 29.5528 21.9257 34.2551 21.9257 39.1582C21.9257 43.1329 23.1736 46.8072 25.2996 49.8114L23.0812 56.4898L29.7596 54.2714C32.7638 56.3974 36.4381 57.6453 40.4128 57.6453C45.3159 57.6453 50.0182 55.6975 53.4852 52.2305C56.9522 48.7635 58.9 44.0613 58.9 39.1582C58.9 34.2551 56.9522 29.5528 53.4852 26.0858C50.0182 22.6188 45.3159 20.6711 40.4128 20.6711Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_81_382">
+<rect width="80" height="80" fill="white"/>
+</clipPath>
+</defs>
+</svg>

purchase_product_configurator/static/description/index.html

@@ -0,0 +1,702 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Odoo App 3 Index</title>
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+          crossorigin="anonymous">
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+          rel="stylesheet">
+</head>
+<body>
+<section>
+    <div class="container"
+         style="font-family: 'Inter', sans-serif !important;background-color: #fff !important;">
+        <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12 d-flex justify-content-between flex-wrap align-items-sm-center"
+                 style="border-bottom:1px solid rgba(0, 0, 0, 0.22)">
+                <div class="my-3">
+                    <img src="assets/misc/Cybrosys R.png"
+                         style="width:auto !important; height:40px !important">
+                </div>
+                <div class="my-3 d-flex align-items-center">
+                    <div class="text-center"
+                         style="background-color:#010A7B !important; color:#fff !important;font-size: 0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important;min-width: 120px !important;">
+                        Community
+                    </div>
+                    <div class="text-center"
+                         style="background-color:#875A7B !important; color:#fff !important;font-size: 0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important;min-width: 120px !important;">
+                        Enterprise
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12 text-center d-flex align-items-center flex-column"
+                 style="margin: 80px 0px !important;">
+                <h1 style="font-size: 2.8rem;font-weight: 700; color:
+                    #1A202C;">
+                    Purchase Product Configurator</h1>
+                <p class="my-3 mb-4"
+                   style="max-width: 80%; font-weight: 400 !important; line-height: 32px; color: #718096;">
+                    Configure the Product in Purchase Order Line
+                </p>
+                <div style="width: 80%; margin-top: 3rem;">
+                    <img src="assets/screenshots/hero.gif"
+                         class="img-responsive" width="100%" height="auto">
+                </div>
+            </div>
+        </div>
+        <div class="container mt-5 mb-5">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-4">
+                <p class="m-0"
+                   style="font-weight: 600; font-size: 24px; color:#714b67 !important">
+                    Key Highlights
+                </p>
+            </div>
+            <div class="row py-4">
+                <div class="col-md-6 col-sm-12 p-3">
+                    <div class="d-flex   h-100" style="padding: 30px;border-radius: 12px;
+                                    background: #FFF;
+                                    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25); ">
+                        <div style="width: 36px; height: 36px; border-radius: 50%; background: #714B67;
+                                    display: flex; justify-content: center; align-items: center;
+                                    margin-right: 10px; flex-shrink: 0;">
+                            <i class="fa-solid fa-star  "
+                               style="color: #fff;font-size:14px;"></i>
+                        </div>
+                        <div>
+                            <p style="color: #1A202C;font-weight: 600;
+                                      font-size: 1.2rem; margin-bottom: 2px;">
+                                Add products using product configurator</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 col-sm-12 p-3">
+                    <div class="d-flex   h-100" style="padding: 30px;border-radius: 12px;
+                                    background: #FFF;
+                                    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25); ">
+                        <div style="width: 36px; height: 36px; border-radius: 50%; background: #714B67;
+                                    display: flex; justify-content: center; align-items: center;
+                                    margin-right: 10px; flex-shrink: 0;">
+                            <i class="fa-solid fa-star  "
+                               style="color: #fff;font-size:14px;"></i>
+                        </div>
+                        <div>
+                            <p style="color: #1A202C;font-weight: 600;
+                                      font-size: 1.2rem; margin-bottom: 2px;">
+                                Switch between product configurator and grid view</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 col-sm-12 p-3">
+                    <div class="d-flex   h-100" style="padding: 30px;border-radius: 12px;
+                                    background: #FFF;
+                                    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25); ">
+                        <div style="width: 36px; height: 36px; border-radius: 50%; background: #714B67;
+                                    display: flex; justify-content: center; align-items: center;
+                                    margin-right: 10px; flex-shrink: 0;">
+                            <i class="fa-solid fa-star  "
+                               style="color: #fff;font-size:14px;"></i>
+                        </div>
+                        <div>
+                            <p style="color: #1A202C;font-weight: 600;
+                                      font-size: 1.2rem; margin-bottom: 2px;">
+                                Choose variants, custom attributes and optional products</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container rounded">
+            <ul class="nav nav-tabs d-flex"
+                style="width: fit-content;margin: 0 auto;gap: 1rem;">
+                <li class="col text-center py-2 text-nowrap "
+                    style="color: #fff; background-color: #714B67;border-radius: 6px 6px 0px 0px;">
+                    <a
+                            class="active show" data-toggle="tab" href="#tab1"
+                            style="color: #fff;font-weight: 500; background-color: #714B67; text-decoration: none;">
+                        <i class="fa-regular fa-image  pr-2"
+                           style="color: #fff;"></i>
+                        Screenshots</a></li>
+                <li class="col text-center py-2 text-nowrap "
+                    style="color: #fff; background-color: #714B67;border-radius: 6px 6px 0px 0px;">
+                    <a
+                            data-toggle="tab" href="#tab2"
+                            style="color: #fff;font-weight: 500;  text-decoration: none;"><i
+                            class="fa-solid fa-star  pr-2"
+                            style="color: #fff;"></i>Features</a></li>
+                <li class="col text-center py-2 text-nowrap "
+                    style="color: #fff; background-color: #714B67;border-radius: 6px 6px 0px 0px;">
+                    <a
+                            data-toggle="tab" href="#tab3"
+                            style="color: #fff;font-weight: 500; text-decoration: none; background-color: #714B67;"><i
+                            class="fa-solid fa-book-open  pr-2"
+                            style="color: #fff;"></i>Released Notes</a></li>
+            </ul>
+            <div class="tab-content"
+                 style="background-color: rgba(121, 113, 119, 0.04);">
+                <div id="tab1" class="tab-pane fade in active show">
+                    <div class="col-lg-12 py-2"
+                         style="padding: 1rem 4rem !important;">
+                        <div
+                                style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                            <div class="row justify-content-center p-3 w-100 m-0">
+                                <img src="assets/screenshots/0.png"
+                                     class="img-thumbnail" width="100%"
+                                     height="auto">
+                            </div>
+                            <div class="px-3">
+                                <h4 class="mt-2"
+                                    style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
+                                    Navigate to the Attributes & Variants tab of any configurable product and choose the
+                                    PURCHASE VARIANT SELECTION as Order Grid Entry.</h4>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-12 py-2"
+                         style="padding: 1rem 4rem !important;">
+                        <div
+                                style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                            <div class="row justify-content-center p-3 w-100 m-0">
+                                <img src="assets/screenshots/1.png"
+                                     class="img-thumbnail" width="100%"
+                                     height="auto">
+                            </div>
+                            <div class="px-3">
+                                <h4 class="mt-2"
+                                    style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
+                                    When selecting the product in the purchase order line, the Order Grid Entry window
+                                    opens.
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-12 py-2"
+                         style="padding: 1rem 4rem !important;">
+                        <div
+                                style="border: 1px solid #d8d6d6; border-radius: 4px;  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                            <div class="row justify-content-center p-3 w-100 m-0">
+                                <img src="assets/screenshots/2.png"
+                                     class="img-thumbnail" width="100%"
+                                     height="auto">
+                            </div>
+                            <div class="px-3">
+                                <h4 class="mt-2"
+                                    style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
+                                    Navigate to the Attributes & Variants tab of any configurable product and choose the
+                                    PURCHASE VARIANT SELECTION as Product Configurator.</h4>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-12 py-2"
+                         style="padding: 1rem 4rem !important;">
+                        <div
+                                style="border: 1px solid #d8d6d6; border-radius: 4px;  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                            <div class="row justify-content-center p-3 w-100 m-0">
+                                <img src="assets/screenshots/3.png"
+                                     class="img-thumbnail" width="100%"
+                                     height="auto">
+                            </div>
+                            <div class="px-3">
+                                <h4 class="mt-2"
+                                    style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
+                                    When selecting the product in the purchase order line, the Open Product Configurator
+                                    window
+                                    opens.
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="tab2" class="tab-pane fade">
+                    <div class="col-mg-12" style="padding: 1rem 4rem;">
+                        <ul style="list-style: none; padding: 1rem 0;font-weight: 500;">
+                            <li class="py-3"
+                                style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                                    <span style="margin-right: 12px;"><img
+                                            src="assets/misc/star (1) 2.svg"
+                                            alt=""
+                                            width="16px"></span>Add products using the product configurator, a tool that
+                                allows you to customize and select specific product variant.
+                            </li>
+                            <li class="py-3"
+                                style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                                    <span style="margin-right: 12px;"><img
+                                            src="assets/misc/star (1) 2.svg"
+                                            alt=""
+                                            width="16px"></span>Easily switch between the product configurator for
+                                customized product selection and the grid view for quick, tabular product entry to
+                                efficiently add products according to your need.
+                            </li>
+                            <li class="py-3"
+                                style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                                    <span style="margin-right: 12px;"><img
+                                            src="assets/misc/star (1) 2.svg"
+                                            alt=""
+                                            width="16px"></span>Select variants, customize attributes, and add optional
+                                products to tailor your order precisely to your needs.
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div id="tab3" class="tab-pane fade">
+                    <div class="col-mg-12 active" style="padding: 1rem 4rem;">
+                        <div class="py-3"
+                             style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                            <div class="d-flex mb-3"
+                                 style="font-size: 0.8rem; font-weight: 500;"><span>Version
+                                        17.0.1.0.0</span><span
+                                    class="px-2">|</span><span
+                                    style="color: #714B67;font-weight: 600;">Released on:22nd May 2024</span>
+                            </div>
+                            <p class="m-0"
+                               style=" color:#718096!important; font-size:1rem !important;line-height: 28px;">
+                                Initial Commit for Purchase Product Configurator.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container mt-5">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-5">
+                <p class="m-0"
+                   style="font-weight: 600; font-size: 24px; color:#000 !important">
+                    Related Products</p>
+            </div>
+        </div>
+        <div id="myCarousel" class="carousel slide py-3" data-ride="carousel">
+            <div class="carousel-inner">
+                <div class="carousel-item active">
+                    <div class="row p-4">
+                        <div class="col">
+                            <div class="p-3">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/vendor_portal_odoo/"
+                                   style="color: #000; text-decoration: none;">
+                                    <div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
+                                        <div style="width: 300px; ">
+                                            <img src="assets/modules/1.png"
+                                                 alt="" width="100%"
+                                                 height="auto">
+                                        </div>
+                                        <p class="text-center pt-2 text-black font-weight-bold">
+                                            Odoo Vendor Portal</p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="p-3">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/purchase_dashboard_advanced/"
+                                   style="color: #000; text-decoration: none;">
+                                    <div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
+                                        <div style="width: 300px; ">
+                                            <img src="assets/modules/2.png"
+                                                 alt="" width="100%"
+                                                 height="auto">
+                                        </div>
+                                        <p class="text-center pt-2 text-black font-weight-bold">
+                                            Advanced Purchase Dashboard</p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="p-3">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/import_template_download/"
+                                   style="color: #000; text-decoration: none;">
+                                    <div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
+                                        <div style="width: 300px; ">
+                                            <img src="assets/modules/3.png"
+                                                 alt="" width="100%"
+                                                 height="auto">
+                                        </div>
+                                        <p class="text-center pt-2 text-black font-weight-bold">
+                                            Import Template For Sales / Purchase / Invoice</p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <div class="row p-4">
+                        <div class="col">
+                            <div class="p-3">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/employee_purchase_requisition/"
+                                   style="color: #000; text-decoration: none;">
+                                    <div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
+                                        <div style="width: 300px; ">
+                                            <img src="assets/modules/4.png"
+                                                 alt="" width="100%"
+                                                 height="auto">
+                                        </div>
+                                        <p class="text-center pt-2 text-black font-weight-bold">
+                                            Employee Purchase Requisition</p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="p-3">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/section_wise_subtotal/"
+                                   style="color: #000; text-decoration: none;">
+                                    <div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
+                                        <div style="width: 300px;">
+                                            <img src="assets/modules/5.png"
+                                                 alt="" width="100%"
+                                                 height="auto">
+                                        </div>
+                                        <p class="text-center pt-2 text-black font-weight-bold">
+                                            Section Wise Subtotal</p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="p-3">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/sale_purchase_previous_product_cost/"
+                                   style="color: #000; text-decoration: none;">
+                                    <div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
+                                        <div style="width: 300px;">
+                                            <img src="assets/modules/6.png"
+                                                 alt="" width="100%"
+                                                 height="auto">
+                                        </div>
+                                        <p class="text-center pt-2 text-black font-weight-bold">
+                                            Previous Sale/Purchase Product Rates</p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <a class="carousel-control-prev" href="#myCarousel"
+               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="#myCarousel"
+               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 class="container mt-5">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-4">
+                <p class="m-0"
+                   style="font-weight: 600; font-size: 24px; color:#000 !important">
+                    Our Services</p>
+            </div>
+        </div>
+        <div class="container my-5">
+            <div class="row py-3">
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center;  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#13EA36 ; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/cogs.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Customization</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#DBC711; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/wrench.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Implementation</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center;  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative; border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#FF6B6B ; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/lifebuoy.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Support</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative; border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#FFA801 ; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/user.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Hire
+                            Odoo Developer</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center;  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative; border-radius: 4px;">
+
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#54A0FF; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/puzzle.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Integration</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center;  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#6D7680 ; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/update.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Migration</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center;  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#786FA6 ; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/consultation.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Consultancy</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;position: relative;border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#F8A5C2 ; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/training.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Implementation</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center;  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#E6BE26; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/license.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Licensing Consultancy</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container mt-5">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-4">
+                <p class="m-0"
+                   style="font-weight: 600; font-size: 24px; color:#000 !important">
+                    Our Industries</p>
+            </div>
+        </div>
+        <div class="container">
+            <div class="row my-5 py-4">
+                <div class="col-md-3 col-sm-6 p-0">
+                    <div class="d-flex flex-column h-100 "
+                         style="border-right: 1px solid rgb(209, 209, 209); border-bottom: 1px solid  rgb(209, 209, 209); padding: 30px; box-shadow: 6px 0 10px rgba(228, 227, 227, 0.373);">
+                        <img src="assets/icons/trading-black.png" width="42px"
+                             height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                           font-size: 1.2rem; margin-bottom: 2px;">Trading</p>
+                        <p>Easily procure and sell your products</p>
+                    </div>
+                </div>
+                <div class="col-md-3 col-sm-6  p-0">
+                    <div class="d-flex flex-column h-100"
+                         style="border-right: 1px solid rgb(209, 209, 209);border-bottom: 1px solid  rgb(209, 209, 209); padding: 30px;">
+                        <img src="assets/icons/pos-black.png" width="42px"
+                             height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                            font-size: 1.2rem; margin-bottom: 2px;">POS</p>
+                        <p>Easy configuration and convivial experience</p>
+                    </div>
+                </div>
+                <div class="col-md-3 col-sm-6  p-0">
+                    <div class="d-flex flex-column h-100"
+                         style="border-right: 1px solid  rgb(209, 209, 209);border-bottom: 1px solid   rgba(0, 0, 0, 0.2); padding: 30px; box-shadow: 0 5px 10px  rgba(228, 227, 227, 0.373)">
+                        <img src="assets/icons/education-black.png" width="42px"
+                             height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                            font-size: 1.2rem; margin-bottom: 2px;">
+                            Education</p>
+                        <p>A platform for educational management</p>
+                    </div>
+                </div>
+                <div class="col-md-3 col-sm-6  p-0">
+                    <div class="d-flex flex-column h-100"
+                         style="border-bottom: 1px solid  rgb(209, 209, 209); padding: 30px; ">
+                        <img src="assets/icons/manufacturing-black.png"
+                             width="42px" height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                            font-size: 1.2rem; margin-bottom: 2px;">
+                            Manufacturing</p>
+                        <p>Plan, track and schedule your operations</p>
+                    </div>
+                </div>
+                <div class="col-md-3 col-sm-6 p-0">
+                    <div class="d-flex flex-column h-100"
+                         style="border-right: 1px solid  rgb(209, 209, 209); padding: 30px;">
+                        <img src="assets/icons/ecom-black.png" width="42px"
+                             height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                            font-size: 1.2rem; margin-bottom: 2px;">E-commerce &
+                            Website</p>
+                        <p>Mobile friendly, awe-inspiring product pages</p>
+                    </div>
+                </div>
+                <div class="col-md-3 col-sm-6   p-0">
+                    <div class="d-flex flex-column h-100"
+                         style="border-right: 1px solid  rgb(209, 209, 209); padding: 30px;box-shadow: 0 -5px 10px  rgba(228, 227, 227, 0.373);">
+                        <img src="assets/icons/service-black.png" width="42px"
+                             height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                            font-size: 1.2rem; margin-bottom: 2px;">Service
+                            Management</p>
+                        <p>Keep track of services and invoice</p>
+                    </div>
+                </div>
+                <div class="col-md-3 col-sm-6    p-0">
+                    <div class="d-flex flex-column h-100"
+                         style="border-right: 1px solid  rgb(209, 209, 209); padding: 30px; ">
+                        <img src="assets/icons/restaurant-black.png"
+                             width="42px" height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                            font-size: 1.2rem; margin-bottom: 2px;">
+                            Restaurant</p>
+                        <p>Run your bar or restaurant methodically</p>
+                    </div>
+                </div>
+                <div class="col-md-3 col-sm-6   p-0">
+                    <div class="d-flex flex-column h-100"
+                         style=" padding: 30px;box-shadow: -5px 0 10px  rgba(228, 227, 227, 0.373);">
+                        <img src="assets/icons/hotel-black.png" width="42px"
+                             height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                            font-size: 1.2rem; margin-bottom: 2px;">Hotel
+                            Management</p>
+                        <p>An all-inclusive hotel management application</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container mt-5">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-5">
+                <p class="m-0"
+                   style="font-weight: 600; font-size: 24px; color:#000 !important">
+                    Support</p>
+            </div>
+        </div>
+        <div class="container my-5">
+            <div class="row" style="background-color: #FFFAFE;">
+                <div class="col-md-6 pb-4  d-flex align-items-center justify-content-center"
+                     style="border-right: 1px solid #D9D9D9;">
+                    <div style="padding: 30px;">
+                        <div class="d-flex align-items-center">
+                            <img src="assets/misc/support (1) 1.svg" alt=""
+                                 width="60px" style="margin-right: 12px;">
+                            <div style="padding: 0px 8px;">
+                                    <span
+                                            style="color: #714B67;font-size: 24px;font-weight: 600;padding-bottom: 1rem;">Need
+                                        Help?</span>
+                                <p class="m-0" style="color:#718096;">Got
+                                    questions or need help? Get in touch.</p>
+                                <div style="font-weight: 400;"><span><img
+                                        src="assets/misc/support-email.svg"
+                                        alt=""
+                                        width="18px"
+                                        style="filter: invert(1);margin-right: 0.8rem;"></span>odoo@cybrosys.com
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 pb-4 d-flex align-items-center justify-content-center">
+                    <div style="padding: 30px;">
+                        <div class="d-flex align-items-center">
+                            <img src="assets/misc/whatsapp 1.svg" alt=""
+                                 width="60px" style="margin-right: 12px;">
+                            <div>
+                                <span style="color: #714B67;font-size: 24px;font-weight: 600;">WhatsApp</span>
+                                <p class="m-0" style="color:#718096;">Say hi to
+                                    us on WhatsApp!</p>
+                                <div style="font-weight: 400; font-size: 16px;"><span><img
+                                        src="assets/misc/phone.svg"
+                                        alt="" width="14px"
+                                        style="filter: invert(1); margin-right: 0.8rem;"></span>+91
+                                    99456767686
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<!-- Optional JavaScript -->
+<!-- jQuery first, then Popper.js, then Bootstrap JS -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>

purchase_product_configurator/static/src/js/product/product.js

@@ -0,0 +1,68 @@
+/** @odoo-module */
+
+import { Component } from "@odoo/owl";
+import { formatCurrency } from "@web/core/currency";
+import {
+    ProductTemplateAttributeLine as PTAL
+} from "../product_template_attribute_line/product_template_attribute_line";
+
+export class Product extends Component {
+    static components = { PTAL };
+    static template = "purchase_product_configurator.product";
+    static props = {
+        id: { type: [Number, {value: false}], optional: true },
+        product_tmpl_id: Number,
+        display_name: String,
+        description_sale: [Boolean, String], // backend sends 'false' when there is no description
+        price: { type: [Number, {value: false}], optional: true },
+        quantity: Number,
+        attribute_lines: Object,
+        optional: Boolean,
+        imageURL: { type: String, optional: true },
+        archived_combinations: Array,
+        exclusions: Object,
+        parent_exclusions: Object,
+        parent_product_tmpl_ids: { type: Array, element: Number, optional: true },
+    };
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Increase the quantity of the product in the state.
+     */
+    increaseQuantity() {
+        this.env.setQuantity(this.props.product_tmpl_id, this.props.quantity+1);
+    }
+
+    /**
+     * Set the quantity of the product in the state.
+     *
+     * @param {Event} event
+     */
+    setQuantity(event) {
+        console.log('parseFloat(event.target.value)',parseFloat(event.target.value))
+        this.env.setQuantity(this.props.product_tmpl_id, parseFloat(event.target.value));
+    }
+
+    /**
+     * Decrease the quantity of the product in the state.
+     */
+    decreaseQuantity() {
+        this.env.setQuantity(this.props.product_tmpl_id, this.props.quantity-1);
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Return the price, in the format of the given currency.
+     *
+     * @return {String} - The price, in the format of the given currency.
+     */
+    getFormattedPrice() {
+        return formatCurrency(this.props.price, this.env.currencyId);
+    }
+}

purchase_product_configurator/static/src/js/product/product.scss

@@ -0,0 +1,36 @@
+.table.o_purchase_product_configurator_table {
+    & tr:first-child > td {
+        padding-top: 0 !important;
+    }
+
+    &.o_purchase_product_configurator_table_optional > :not(caption) > *:last-child > * {
+        border-bottom: 0;
+    }
+}
+
+.o_purchase_product_configurator_img {
+    width: 120px;
+    max-height: 240px;
+}
+
+.o_purchase_product_configurator_qty {
+    width: 160px;
+
+    input {
+        max-width: 4rem;
+        //removing input field=number arrows as their size might
+        //change depending on browser default styling and shift input's position
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+        &[type=number] {
+            -moz-appearance: textfield;
+        }
+    }
+}
+
+.o_purchase_product_configurator_price {
+    width: 160px;
+}

purchase_product_configurator/static/src/js/product/product_template.xml

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!--Template for Product-->
+<templates xml:space="preserve">
+    <t t-name="purchase_product_configurator.product">
+        <td class="o_purchase_product_configurator_img py-3 px-0">
+            <img
+                t-if="this.props.id"
+                class="w-100"
+                t-att-src="'/web/image/product.product/'+this.props.id+'/image_128'"
+                alt="Product Image"/>
+            <img
+                t-else=""
+                class="w-100"
+                t-att-src="'/web/image/product.template/'+this.props.product_tmpl_id+'/image_128'"
+                alt="Product Image"/>
+        </td>
+        <td class="p-3" t-att-colspan="this.props.optional ? 2:false">
+            <div class="mb-4 text-break" name="o_purchase_product_configurator_name">
+                <h5 t-out="this.props.display_name"/>
+                <div
+                    t-if="this.props.description_sale"
+                    t-out="this.props.description_sale"
+                    class="text-muted small"/>
+                <div t-if="!this.env.isPossibleCombination(this.props)" class="alert alert-warning mt-3">
+                    <span>This option or combination of options is not available</span>
+                </div>
+            </div>
+            <t t-foreach="this.props.attribute_lines" t-as="ptal" t-key="ptal.id">
+                <PTAL t-props="ptal" productTmplId="this.props.product_tmpl_id"/>
+            </t>
+        </td>
+        <td class="o_purchase_product_configurator_qty py-3 px-0 text-end">
+            <div t-if="!this.props.optional" class="input-group justify-content-end">
+                <button
+                    class="btn btn-secondary d-none d-md-inline-block"
+                    aria-label="Remove one"
+                    t-on-click="decreaseQuantity">
+                    <i class="fa fa-minus"/>
+                </button>
+                <input
+                    class="form-control quantity border-bottom border-top text-center"
+                    name="product_quantity"
+                    type="number"
+                    t-att-value="this.props.quantity"
+                    t-on-change="setQuantity"/>
+                <button
+                    class="btn btn-secondary d-none d-md-inline-block"
+                    aria-label="Add one"
+                    t-on-click="increaseQuantity">
+                    <i class="fa fa-plus"/>
+                </button>
+            </div>
+            <div t-else="">
+                <h5 class="text-nowrap" t-out="getFormattedPrice()"/>
+            </div>
+            <a
+                class="d-block mt-2"
+                role="button"
+                t-if="!this.props.optional &amp;&amp; this.env.mainProductTmplId !== this.props.product_tmpl_id"
+                t-on-click="() => this.env.removeProduct(this.props.product_tmpl_id)">
+                Remove product
+            </a>
+        </td>
+        <td class="o_purchase_product_configurator_price py-3 px-0 text-end" name="price">
+            <div t-if="!this.props.optional" class="input-group justify-content-end">
+                <h5 class="text-nowrap" t-out="getFormattedPrice()"/>
+            </div>
+            <div t-else="">
+                <button
+                    t-if="this.props.optional"
+                    class="btn btn-secondary"
+                    t-att-class="{'disabled': !this.env.isPossibleCombination(this.props)}"
+                    t-on-click="() => this.env.addProduct(this.props.product_tmpl_id)">
+                    <i class="fa fa-plus"/> Add
+                </button>
+            </div>
+        </td>
+    </t>
+</templates>

purchase_product_configurator/static/src/js/product_configurator_dialog/product_configurator_dialog.js

@@ -0,0 +1,376 @@
+/** @odoo-module **/
+
+import { _t } from "@web/core/l10n/translation";
+import { Component, onWillStart, useState, useSubEnv } from "@odoo/owl";
+import { Dialog } from '@web/core/dialog/dialog';
+import { PurchaseProductList } from "../product_list/product_list";
+import { useService } from "@web/core/utils/hooks";
+
+export class PurchaseProductConfiguratorDialog extends Component {
+    static components = { Dialog, PurchaseProductList};
+    static template = 'purchase_product_configurator.dialog';
+    static props = {
+        productTemplateId: Number,
+        ptavIds: { type: Array, element: Number },
+        customAttributeValues: {
+            type: Array,
+            element: Object,
+            shape: {
+                ptavId: Number,
+                value: String,
+            }
+        },
+        quantity: Number,
+        productUOMId: { type: Number, optional: true },
+        companyId: { type: Number, optional: true },
+        currencyId: Number,
+        edit: { type: Boolean, optional: true },
+        save: Function,
+        discard: Function,
+        close: Function, // This is the close from the env of the Dialog Component
+    };
+    static defaultProps = {
+        edit: false,
+    }
+    setup() {
+        this.title = _t("Configure your product");
+        this.rpc = useService("rpc");
+        this.state = useState({
+            products: [],
+            optionalProducts: [],
+
+        });
+        /**
+         * Initializes sub-environment for product customization.
+         */
+        useSubEnv({
+            mainProductTmplId: this.props.productTemplateId,
+            currencyId: this.props.currencyId,
+            addProduct: this._addProduct.bind(this),
+            removeProduct: this._removeProduct.bind(this),
+            setQuantity: this._setQuantity.bind(this),
+            updateProductTemplateSelectedPTAV: this._updateProductTemplateSelectedPTAV.bind(this),
+            updatePTAVCustomValue: this._updatePTAVCustomValue.bind(this),
+            isPossibleCombination: this._isPossibleCombination,
+        });
+        /**
+         * Initializes data and performs setup actions before starting.
+         * Loads data, sets state, updates custom values, and checks exclusions.
+        */
+        onWillStart(async () => {
+            const { products, optional_products } = await this._loadData(this.props.edit);
+            this.state.products = products;
+            this.state.optionalProducts = optional_products;
+            for (const customValue of this.props.customAttributeValues) {
+                this._updatePTAVCustomValue(
+                    this.env.mainProductTmplId,
+                    customValue.ptavId,
+                    customValue.value
+                );
+            }
+            this._checkExclusions(this.state.products[0]);
+        });
+    }
+    /**
+         * Loads data for the product configurator.
+    */
+    async _loadData(onlyMainProduct) {
+        return this.rpc('/purchase_product_configurator/get_values', {
+            product_template_id: this.props.productTemplateId,
+            currency_id: this.props.currencyId,
+            quantity: this.props.quantity,
+            product_uom_id: this.props.productUOMId,
+            company_id: this.props.companyId,
+            ptav_ids: this.props.ptavIds,
+            only_main_product: onlyMainProduct,
+        });
+    }
+    /**
+     * Creates a product using the provided data.
+     */
+    async _createProduct(product) {
+        return this.rpc('/purchase_product_configurator/create_product', {
+            product_template_id: product.product_tmpl_id,
+            combination: this._getCombination(product),
+        });
+    }
+    /**
+     * Updates a product combination with the provided quantity.
+     */
+    async _updateCombination(product, quantity) {
+        return this.rpc('/purchase_product_configurator/update_combination', {
+            product_template_id: product.product_tmpl_id,
+            combination: this._getCombination(product),
+            currency_id: this.props.currencyId,
+            so_date: this.props.soDate,
+            quantity: quantity,
+            product_uom_id: this.props.productUOMId,
+            company_id: this.props.companyId,
+            pricelist_id: this.props.pricelistId,
+        });
+    }
+    /**
+     * Retrieves optional products available for the given product.
+     */
+    async _getOptionalProducts(product) {
+        return this.rpc('/purchase_product_configurator/get_optional_products', {
+            product_template_id: product.product_tmpl_id,
+            combination: this._getCombination(product),
+            parent_combination: this._getParentsCombination(product),
+            currency_id: this.props.currencyId,
+            so_date: this.props.soDate,
+            company_id: this.props.companyId,
+            pricelist_id: this.props.pricelistId,
+        });
+    }
+    /**
+     * Add the product to the list of products and fetch his optional products.
+     */
+    async _addProduct(productTmplId) {
+        const index = this.state.optionalProducts.findIndex(
+            p => p.product_tmpl_id === productTmplId
+        );
+        if (index >= 0) {
+            this.state.products.push(...this.state.optionalProducts.splice(index, 1));
+            // Fetch optional product from the server with the parent combination.
+            const product = this._findProduct(productTmplId);
+            let newOptionalProducts = await this._getOptionalProducts(product);
+            for(const newOptionalProductDict of newOptionalProducts) {
+                // If the optional product is already in the list, add the id of the parent product
+                // template in his list of `parent_product_tmpl_ids` instead of adding a second time
+                // the product.
+                const newProduct = this ._findProduct(newOptionalProductDict.product_tmpl_id);
+                if (newProduct) {
+                    newOptionalProducts = newOptionalProducts.filter(
+                        (p) => p.product_tmpl_id != newOptionalProductDict.product_tmpl_id
+                    );
+                    newProduct.parent_product_tmpl_ids.push(productTmplId);
+                }
+            }
+            if (newOptionalProducts) this.state.optionalProducts.push(...newOptionalProducts);
+        }
+    }
+    /**
+     * Remove the product and his optional products from the list of products.
+     */
+    _removeProduct(productTmplId) {
+        const index = this.state.products.findIndex(p => p.product_tmpl_id === productTmplId);
+        if (index >= 0) {
+            this.state.optionalProducts.push(...this.state.products.splice(index, 1));
+            for (const childProduct of this._getChildProducts(productTmplId)) {
+                // Optional products might have multiple parents so we don't want to remove them if
+                // any of their parents are still on the list of products.
+                childProduct.parent_product_tmpl_ids = childProduct.parent_product_tmpl_ids.filter(
+                    id => id !== productTmplId
+                );
+                if (!childProduct.parent_product_tmpl_ids.length) {
+                    this._removeProduct(childProduct.product_tmpl_id);
+                    this.state.optionalProducts.splice(
+                        this.state.optionalProducts.findIndex(
+                            p => p.product_tmpl_id === childProduct.product_tmpl_id
+                        ), 1
+                    );
+                }
+            }
+        }
+    }
+    /**
+     * Set the quantity of the product to a given value.
+     */
+    async _setQuantity(productTmplId, quantity) {
+        if (quantity <= 0) {
+            if (productTmplId === this.env.mainProductTmplId) {
+                const product = this._findProduct(productTmplId);
+                const { price } = await this._updateCombination(product, 1);
+                product.quantity = 1;
+                product.price = parseFloat(price);
+                return;
+            };
+            this._removeProduct(productTmplId);
+        } else {
+            const product = this._findProduct(productTmplId);
+            const { price } = await this._updateCombination(product, quantity);
+            product.quantity = quantity;
+            product.price = parseFloat(price);
+        }
+    }
+    /**
+     * Change the value of `selected_attribute_value_ids` on the given PTAL in the product.
+     */
+    async _updateProductTemplateSelectedPTAV(productTmplId, ptalId, ptavId, multiIdsAllowed) {
+        const product = this._findProduct(productTmplId);
+        let selectedIds = product.attribute_lines.find(ptal => ptal.id === ptalId).selected_attribute_value_ids;
+        if (multiIdsAllowed) {
+            const ptavID = parseInt(ptavId);
+            if (!selectedIds.includes(ptavID)){
+                selectedIds.push(ptavID);
+            } else {
+                selectedIds = selectedIds.filter(ptav => ptav !== ptavID);
+            }
+
+        } else {
+            selectedIds = [parseInt(ptavId)];
+        }
+        product.attribute_lines.find(ptal => ptal.id === ptalId).selected_attribute_value_ids = selectedIds;
+        this._checkExclusions(product);
+        if (this._isPossibleCombination(product)) {
+            const updatedValues = await this._updateCombination(product, product.quantity);
+            Object.assign(product, updatedValues);
+            // When a combination should exist but was deleted from the database, it should not be
+            // selectable and considered as an exclusion.
+            if (!product.id && product.attribute_lines.every(ptal => ptal.create_variant === "always")) {
+                const combination = this._getCombination(product);
+                product.archived_combinations = product.archived_combinations.concat([combination]);
+                this._checkExclusions(product);
+            }
+        }
+    }
+    /**
+     * Set the custom value for a given custom PTAV.
+     */
+    _updatePTAVCustomValue(productTmplId, ptavId, customValue) {
+        const product = this._findProduct(productTmplId);
+        product.attribute_lines.find(
+            ptal => ptal.selected_attribute_value_ids.includes(ptavId)
+        ).customValue = customValue;
+    }
+    /**
+     * Check the exclusions of a given product and his child.
+     */
+    _checkExclusions(product, checked=undefined) {
+        const combination = this._getCombination(product);
+        const exclusions = product.exclusions;
+        const parentExclusions = product.parent_exclusions;
+        const archivedCombinations = product.archived_combinations;
+        const parentCombination = this._getParentsCombination(product);
+        const childProducts = this._getChildProducts(product.product_tmpl_id)
+        const ptavList = product.attribute_lines.flat().flatMap(ptal => ptal.attribute_values)
+        ptavList.map(ptav => ptav.excluded = false); // Reset all the values
+        if (exclusions) {
+            for(const ptavId of combination) {
+                for(const excludedPtavId of exclusions[ptavId]) {
+                    ptavList.find(ptav => ptav.id === excludedPtavId).excluded = true;
+                }
+            }
+        }
+        if (parentCombination) {
+            for(const ptavId of parentCombination) {
+                for(const excludedPtavId of (parentExclusions[ptavId]||[])) {
+                    ptavList.find(ptav => ptav.id === excludedPtavId).excluded = true;
+                }
+            }
+        }
+        if (archivedCombinations) {
+            for(const excludedCombination of archivedCombinations) {
+                const ptavCommon = excludedCombination.filter((ptav) => combination.includes(ptav));
+                if (ptavCommon.length === combination.length) {
+                    for(const excludedPtavId of ptavCommon) {
+                        ptavList.find(ptav => ptav.id === excludedPtavId).excluded = true;
+                    }
+                } else if (ptavCommon.length === (combination.length - 1)) {
+                    // In this case we only need to disable the remaining ptav
+                    const disabledPtavId = excludedCombination.find(
+                        (ptav) => !combination.includes(ptav)
+                    );
+                    const excludedPtav = ptavList.find(ptav => ptav.id === disabledPtavId)
+                    if (excludedPtav) {
+                        excludedPtav.excluded = true;
+                    }
+                }
+            }
+        }
+        const checkedProducts = checked || [];
+        for(const optionalProductTmpl of childProducts) {
+             // if the product is not checked for exclusions
+            if (!checkedProducts.includes(optionalProductTmpl)) {
+                checkedProducts.push(optionalProductTmpl); // remember that this product is checked
+                this._checkExclusions(optionalProductTmpl, checkedProducts);
+            }
+        }
+    }
+    /**
+     * Return the product given his template id.
+     */
+    _findProduct(productTmplId) {
+        // The product might be in either of the two lists `products` or `optional_products`.
+        return  this.state.products.find(p => p.product_tmpl_id === productTmplId) ||
+                this.state.optionalProducts.find(p => p.product_tmpl_id === productTmplId);
+    }
+    /**
+     * Return the list of dependents products for a given product.
+     */
+    _getChildProducts(productTmplId) {
+        return [
+            ...this.state.products.filter(p => p.parent_product_tmpl_ids?.includes(productTmplId)),
+            ...this.state.optionalProducts.filter(p => p.parent_product_tmpl_ids?.includes(productTmplId))
+        ]
+    }
+    /**
+     * Return the selected PTAV of the product, as a list of `product.template.attribute.value` id.
+     */
+    _getCombination(product) {
+        return product.attribute_lines.flatMap(ptal => ptal.selected_attribute_value_ids);
+    }
+    /**
+     * Return the selected PTAV of all the product parents, as a list of
+     * `product.template.attribute.value` id.
+     */
+    _getParentsCombination(product) {
+        let parentsCombination = [];
+        for(const parentProductTmplId of product.parent_product_tmpl_ids || []) {
+            parentsCombination.push(this._getCombination(this._findProduct(parentProductTmplId)));
+        }
+        return parentsCombination.flat();
+    }
+    /**
+     * Check if a product has a valid combination.
+     */
+    _isPossibleCombination(product) {
+        return product.attribute_lines.every(ptal => !ptal.attribute_values.find(
+            ptav => ptal.selected_attribute_value_ids.includes(ptav.id)
+        )?.excluded);
+    }
+
+    /**
+     * Check if all the products selected have a valid combination.
+     */
+    isPossibleConfiguration() {
+        return [...this.state.products].every(
+            p => this._isPossibleCombination(p)
+        );
+    }
+    /**
+     * Confirm the current combination(s).
+     */
+    async onConfirm() {
+        if (!this.isPossibleConfiguration()) return;
+        // Create the products with dynamic attributes
+        for (const product of this.state.products) {
+            if (
+                !product.id &&
+                product.attribute_lines.some(ptal => ptal.create_variant === "dynamic")
+            ) {
+                const productId = await this._createProduct(product);
+                product.id = parseInt(productId);
+            }
+        }
+        await this.props.save(
+            this.state.products.find(
+                p => p.product_tmpl_id === this.env.mainProductTmplId
+            ),
+            this.state.products.filter(
+                p => p.product_tmpl_id !== this.env.mainProductTmplId
+            ),
+        );
+        this.props.close();
+    }
+    /**
+     * Discard the modal.
+     */
+    onDiscard() {
+        if (!this.props.edit) {
+            this.props.discard(); // clear the line
+        }
+        this.props.close();
+    }
+}

purchase_product_configurator/static/src/js/product_configurator_dialog/product_configurator_dialog.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!--Product configurator dialog template-->
+<templates xml:space="preserve">
+    <t t-name="purchase_product_configurator.dialog">
+        <Dialog size="size" title="title" contentClass="this.state.optionalProducts.length ? 'h-75' : ''">
+            <PurchaseProductList t-if="this.state.products.length" products="this.state.products"/>
+            <PurchaseProductList
+                    t-if="this.state.optionalProducts.length"
+                    products="this.state.optionalProducts"
+                    areProductsOptional="true"/>
+            <t t-set-slot="footer">
+                <button
+                        class="btn btn-primary"
+                        t-on-click="onConfirm"
+                        t-att-disabled="!isPossibleConfiguration()">
+                    Confirm
+                </button>
+                <button class="btn btn-secondary" t-on-click="onDiscard">
+                    Cancel
+                </button>
+            </t>
+        </Dialog>
+    </t>
+</templates>

purchase_product_configurator/static/src/js/product_list/product_list.js

@@ -0,0 +1,31 @@
+/** @odoo-module */
+
+import { Component } from "@odoo/owl";
+import { formatCurrency } from "@web/core/currency";
+import { Product } from "../product/product";
+
+export class PurchaseProductList extends Component {
+    static components = { Product };
+    static template = "purchaseProductConfigurator.PurchaseProductList";
+    static props = {
+        products: Array,
+        areProductsOptional: { type: Boolean, optional: true },
+    };
+    static defaultProps = {
+        areProductsOptional: false,
+    };
+
+    /**
+     * Return the total of the product in the list, in the currency of the `sale.order`.
+     *
+     * @return {String} - The sum of all items in the list, in the currency of the `sale.order`.
+     */
+    getFormattedTotal() {
+        return formatCurrency(
+            this.props.products.reduce(
+                (totalPrice, product) => totalPrice + product.price * product.quantity, 0
+            ),
+            this.env.currencyId,
+        )
+    }
+}

purchase_product_configurator/static/src/js/product_list/product_list.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!--PurchaseProductList template-->
+<templates xml:space="preserve">
+    <t t-name="purchaseProductConfigurator.PurchaseProductList">
+        <h4 class="mt-4 mb-3" t-if="this.props.areProductsOptional">Add optional products</h4>
+        <table class="o_purchase_product_configurator_table table table-sm position-relative mb-0" t-att-class="{'o_purchase_product_configurator_table_optional': this.props.areProductsOptional}">
+            <thead t-if="!this.props.areProductsOptional">
+                <tr>
+                    <th class="px-0 border-bottom-0" colspan="2">Product</th>
+                    <th class="px-0 text-end border-bottom-0">Quantity</th>
+                    <th class="px-0 text-end border-bottom-0">Price</th>
+                </tr>
+            </thead>
+            <tbody class="border-top-0">
+                <tr t-foreach="this.props.products" t-as="product" t-key="product.product_tmpl_id">
+                    <Product t-props="product" optional="this.props.areProductsOptional"/>
+                </tr>
+                <tr t-if="!this.props.areProductsOptional">
+                    <td colspan="4" class="border-bottom-0 text-end">
+                        <h4>Total: <span t-out="getFormattedTotal()"/></h4>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </t>
+</templates>

purchase_product_configurator/static/src/js/product_template_attribute_line/product_template_attribute_line.js

@@ -0,0 +1,102 @@
+/** @odoo-module */
+
+import { Component } from "@odoo/owl";
+import { formatCurrency } from "@web/core/currency";
+
+export class ProductTemplateAttributeLine extends Component {
+    static template = "purchaseProductConfigurator.ptal";
+    static props = {
+        productTmplId: Number,
+        id: Number,
+        attribute: {
+            type: Object,
+            shape: {
+                id: Number,
+                name: String,
+                display_type: {
+                    type: String,
+                    validate: type => ["color", "multi", "pills", "radio", "select"].includes(type),
+                },
+            },
+        },
+        attribute_values: {
+            type: Array,
+            element: {
+                type: Object,
+                shape: {
+                    id: Number,
+                    name: String,
+                    html_color: [Boolean, String], // backend sends 'false' when there is no color
+                    image: [Boolean, String], // backend sends 'false' when there is no image set
+                    is_custom: Boolean,
+                    excluded: { type: Boolean, optional: true },
+                },
+            },
+        },
+        selected_attribute_value_ids: { type: Array, element: Number },
+        create_variant: {
+            type: String,
+            validate: type => ["always", "dynamic", "no_variant"].includes(type),
+        },
+        customValue: {type: [{value: false}, String], optional: true},
+    };
+    /**
+     * Update the selected PTAV in the state.
+     */
+    updateSelectedPTAV(event) {
+        this.env.updateProductTemplateSelectedPTAV(
+            this.props.productTmplId, this.props.id, event.target.value, this.props.attribute.display_type == 'multi'
+        );
+    }
+
+    /**
+     * Update in the state the custom value of the selected PTAV.
+     */
+    updateCustomValue(event) {
+        this.env.updatePTAVCustomValue(
+            this.props.productTmplId, this.props.selected_attribute_value_ids[0], event.target.value
+        );
+    }
+    /**
+     * Return template name to use by checking the display type in the props.
+     */
+    getPTAVTemplate() {
+        switch(this.props.attribute.display_type) {
+            case 'color':
+                return 'purchaseProductConfigurator.ptav-color';
+            case 'multi':
+                return 'purchaseProductConfigurator.ptav-multi';
+            case 'pills':
+                return 'purchaseProductConfigurator.ptav-pills';
+            case 'radio':
+                return 'purchaseProductConfigurator.ptav-radio';
+            case 'select':
+                return 'purchaseProductConfigurator.ptav-select';
+        }
+    }
+
+    /**
+     * Return the name of the PTAV
+     */
+    getPTAVSelectName(ptav) {
+       return ptav.name;
+    }
+
+    /**
+     * Check if the selected ptav is custom or not.
+     */
+    isSelectedPTAVCustom() {
+        return this.props.attribute_values.find(
+            ptav => this.props.selected_attribute_value_ids.includes(ptav.id)
+        )?.is_custom;
+    }
+    
+    /**
+     * Check if the line has a custom ptav or not.
+     */
+    hasPTAVCustom() {
+        return this.props.attribute_values.some(
+            ptav => ptav.is_custom
+        );
+    }
+ }

purchase_product_configurator/static/src/js/product_template_attribute_line/product_template_attribute_line.scss

@@ -0,0 +1,65 @@
+.o_purchase_product_configurator_ptav_color {
+    border: 5px solid $border-color;
+    transition: $input-transition;
+
+    @include o-field-pointer();
+
+    &:before {
+        content: "";
+        display: block;
+        @include o-position-absolute(-3px, -3px, -3px, -3px);
+        border: 4px solid $o-view-background-color;
+        border-radius: 50%;
+        box-shadow: inset 0 0 3px rgba(black, 0.3);
+    }
+
+    input {
+        margin: 8px;
+        height: 13px;
+        width: 13px;
+        opacity: 0;
+    }
+
+    &.active {
+        border: 5px solid map-get($theme-colors, 'primary');
+    }
+
+    &.custom_value {
+        background-image: linear-gradient(to bottom right, #FF0000, #FFF200, #1E9600);
+    }
+
+    &.transparent {
+        background-image: url(/web/static/img/transparent.png);
+    }
+
+    &.css_not_available {
+        opacity: 1;
+
+        &:after {
+            content: "";
+            @include o-position-absolute(-5px, -5px, -5px, -5px);
+            border: 2px solid map-get($theme-colors, 'danger');
+            border-radius: 50%;
+            background: str-replace(url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='39' height='39'><line y2='0' x2='39' y1='39' x1='0' style='stroke:#{map-get($theme-colors, 'danger')};stroke-width:2'/><line y2='1' x2='40' y1='40' x1='1' style='stroke:rgb(255,255,255);stroke-width:1'/></svg>"), "#", "%23") ;
+            background-position: center;
+            background-repeat: no-repeat;
+        }
+    }
+}
+
+.o_purchase_product_configurator_ptav_pills.active label {
+    $-btn-secondary-design: map-get($o-btns-bs-override, "secondary");
+    
+    background-color: map-get($-btn-secondary-design, active-background);
+    border-color: map-get($-btn-secondary-design, active-border);
+    color: map-get($-btn-secondary-design, active-color);
+}
+
+.css_not_available {
+    opacity: 0.6;
+}
+
+option.css_not_available {
+    opacity: 1;
+    color: #ccc;
+}

purchase_product_configurator/static/src/js/product_template_attribute_line/product_template_attribute_line.xml

@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <!-- Product attributes line template -->
+    <t t-name="purchaseProductConfigurator.ptal">
+        <div name="ptal" t-attf-class="#{this.props.attribute_values.length === 1 &amp;&amp; hasPTAVCustom() ? 'd-flex' : ''}">
+        <!-- If the attribute line contains only one attribute value, we don't show the attribute
+             value template or the attribute line title unless the single attribute value is custom,
+             whereas in this case, only the title of the attribute line and the custom value
+             template are rendered. -->
+            <div class="d-flex flex-column flex-lg-row gap-2 mb-2">
+                <label
+                    t-if="this.props.attribute_values.length === 1 &amp;&amp; isSelectedPTAVCustom() || this.props.attribute_values.length &gt; 1"
+                    t-out="this.props.attribute.name"
+                    t-attf-class="fw-bold text-break #{this.props.attribute_values.length === 1 &amp;&amp; hasPTAVCustom() ? '' : 'w-lg-25'}"/>
+                <t t-if="this.props.attribute_values.length > 1" t-call="{{getPTAVTemplate()}}"/>
+            </div>
+            <input
+                class="o_input w-75 mb-4 ms-lg-auto"
+                type="text"
+                placeholder="Enter a customized value"
+                t-if="hasPTAVCustom &amp;&amp; isSelectedPTAVCustom()"
+                t-att-value="this.props.customValue"
+                t-on-change="updateCustomValue"
+            />
+        </div>
+    </t>
+    <!-- Attributes value templates -->
+    <t t-name="purchaseProductConfigurator.ptav-select">
+        <select class="o_input w-50 flex-grow-1"
+            t-on-change="updateSelectedPTAV"
+            t-att-name="'ptal-' + this.props.id">
+            <option
+                t-foreach="this.props.attribute_values"
+                t-as="ptav"
+                t-key="ptav.id"
+                t-att-value="ptav.id"
+                t-att-selected="this.props.selected_attribute_value_ids.includes(ptav.id)"
+                t-out="getPTAVSelectName(ptav)"
+                t-att-class="{ 'css_not_available': ptav.excluded }"/>
+        </select>
+    </t>
+    <t t-name="purchaseProductConfigurator.ptav-radio">
+        <ul class="list-unstyled flex-grow-1 m-0">
+            <li t-foreach="this.props.attribute_values" t-as="ptav" t-key="ptav.id"
+                class="mb-2">
+                <div class="form-check">
+                    <label
+                        class="form-check-label d-inline-flex align-items-center"
+                        t-att-class="{ 'css_not_available': ptav.excluded }"
+                        t-att-for="ptav.id">
+                        <span t-out="ptav.name"/>
+                    </label>
+                    <input
+                        type="radio"
+                        class="form-check-input"
+                        t-att-id="ptav.id"
+                        t-att-value="ptav.id"
+                        t-att-checked="this.props.selected_attribute_value_ids.includes(ptav.id)"
+                        t-att-name="'ptal-' + this.props.id"
+                        t-on-change="updateSelectedPTAV"/>
+                </div>
+            </li>
+        </ul>
+    </t>
+    <t t-name="purchaseProductConfigurator.ptav-pills">
+         <ul class="list-inline list-unstyled flex-grow-1 mb-0">
+            <li t-foreach="this.props.attribute_values" t-as="ptav" t-key="ptav.id"
+                t-att-class="{'active': this.props.selected_attribute_value_ids.includes(ptav.id)}"
+                class="o_purchase_product_configurator_ptav_pills list-inline-item">
+                <label
+                    class="btn btn-outline-secondary"
+                    t-att-class="{ 'css_not_available': ptav.excluded }"
+                    t-att-for="ptav.id">
+                    <span t-out="ptav.name"/>
+                </label>
+                <input
+                    class="btn-check"
+                    type="radio"
+                    t-att-id="ptav.id"
+                    t-att-value="ptav.id"
+                    t-att-name="'ptal-' + this.props.id"
+                    t-att-checked="this.props.selected_attribute_value_ids.includes(ptav.id)"
+                    t-on-change="updateSelectedPTAV"/>
+            </li>
+        </ul>
+    </t>
+    <t t-name="purchaseProductConfigurator.ptav-color">
+        <ul class="list-inline flex-grow-1 mb-0">
+            <li t-foreach="this.props.attribute_values" t-as="ptav" t-key="ptav.id"
+                class="list-inline-item me-2">
+                <t t-set="img_style" t-value="ptav.image ? 'background:url(/web/image/product.template.attribute.value/'+ptav.id+'/image); background-size:cover;' : ''"/>
+                <t t-set="color_style" t-value="ptav.is_custom ? '' : 'background-color:' + ptav.html_color"/>
+                <label
+                    class="position-relative d-inline-block rounded-pill text-center"
+                    t-att-title="ptav.name"
+                    t-attf-style="#{img_style or color_style}"
+                    t-att-class="{'o_purchase_product_configurator_ptav_color': true,
+                                  'active': this.props.selected_attribute_value_ids.includes(ptav.id),
+                                  'custom_value': ptav.is_custom,
+                                  'transparent': !ptav.is_custom and !ptav.html_color,
+                                  'css_not_available': ptav.excluded }">
+                    <input
+                        type="radio"
+                        t-att-id="ptav.id"
+                        t-att-value="ptav.id"
+                        t-att-name="'ptal-' + this.props.id"
+                        t-att-checked="this.props.selected_attribute_value_ids.includes(ptav.id)"
+                        t-on-change="updateSelectedPTAV"/>
+                </label>
+            </li>
+        </ul>
+    </t>
+    <t t-name="purchaseProductConfigurator.ptav-multi">
+         <ul class="list-unstyled flex-grow-1 m-0">
+            <li t-foreach="this.props.attribute_values" t-as="ptav" t-key="ptav.id"
+                class="mb-2">
+                <div class="form-check">
+                    <input
+                        type="checkbox"
+                        class="form-check-input"
+                        t-att-id="ptav.id"
+                        t-att-value="ptav.id"
+                        t-att-name="'ptal-' + this.props.id"
+                        t-att-checked="this.props.selected_attribute_value_ids.includes(ptav.id)"
+                        t-on-change="updateSelectedPTAV"/>
+                    <label
+                        class="form-check-label"
+                        t-att-for="ptav.id">
+                        <span t-out="ptav.name"/>
+                    </label>
+                </div>
+            </li>
+        </ul>
+    </t>
+</templates>

purchase_product_configurator/static/src/js/purchase_product_field.js

@@ -0,0 +1,149 @@
+/** @odoo-module */
+
+import { PurchaseOrderLineProductField } from '@purchase_product_matrix/js/purchase_product_field';
+import { serializeDateTime } from "@web/core/l10n/dates";
+import { x2ManyCommands } from "@web/core/orm_service";
+import { useService } from "@web/core/utils/hooks";
+import { patch } from "@web/core/utils/patch";
+import { PurchaseProductConfiguratorDialog } from "./product_configurator_dialog/product_configurator_dialog";
+import { ormService } from "@web/core/orm_service";
+import { jsonrpc } from "@web/core/network/rpc_service";
+
+async function applyProduct(record, product) {
+    // handle custom values & no variants
+    const customAttributesCommands = [
+        x2ManyCommands.set([]),  // Command.clear isn't supported in static_list/_applyCommands
+    ];
+    for (const ptal of product.attribute_lines) {
+        const selectedCustomPTAV = ptal.attribute_values.find(
+            ptav => ptav.is_custom && ptal.selected_attribute_value_ids.includes(ptav.id)
+        );
+        if (selectedCustomPTAV) {
+            customAttributesCommands.push(
+                x2ManyCommands.create(undefined, {
+                    custom_product_template_attribute_value_id: [selectedCustomPTAV.id, "we don't care"],
+                    custom_value: ptal.customValue,
+                })
+            );
+        };
+    }
+    const noVariantPTAVIds = product.attribute_lines.filter(
+        ptal => ptal.create_variant === "no_variant" && ptal.attribute_values.length > 1
+    ).flatMap(ptal => ptal.selected_attribute_value_ids);
+    await record.update({
+        product_id: [product.id, product.display_name],
+        product_no_variant_attribute_value_ids: [x2ManyCommands.set(noVariantPTAVIds)],
+        product_custom_attribute_value_ids: customAttributesCommands,
+    });
+    await record.update({
+        product_qty: product.quantity,
+    });
+    };
+
+patch(PurchaseOrderLineProductField.prototype, {
+    setup() {
+        super.setup(...arguments);
+        this.dialog = useService("dialog");
+        this.orm = useService("orm");
+    },
+    async _onProductTemplateUpdate() {
+        const result = await this.orm.call(
+            'product.template',
+            'get_single_product_variant',
+            [this.props.record.data.product_template_id[0]],
+        );
+         const product_config_mode = await this.orm.read(
+            'product.template',
+                [this.props.record.data.product_template_id[0]],
+            ["product_config_mode"]
+        );
+        if(result && result.product_id) {
+            if (this.props.record.data.product_id != result.product_id.id) {
+                this.props.record.update({
+                    // TODO right name get (same problem as configurator)
+                    product_id: [result.product_id, 'whatever'],
+                });
+            }
+        }
+        else {
+        if (!product_config_mode[0].product_config_mode || product_config_mode[0].product_config_mode === 'configurator') {
+                this._openProductConfigurator();
+            } else {
+                // only triggered when purchase_product_matrix is installed.
+                this._openGridConfigurator(false);
+            }
+        }
+    },
+
+    /**
+     * Checks if the template is configurable.
+     */
+    get isConfigurableTemplate() {
+        return super.isConfigurableTemplate || this.props.record.data.is_configurable_product;
+    },
+    /**
+     * Opens the product configurator.
+     */
+    async _openProductConfigurator(jsonInfo, productTemplateId, editedCellAttributes,edit=false) {
+        const purchaseOrderRecord = this.props.record.model.root;
+        let ptavIds = this.props.record.data.product_template_attribute_value_ids.records.map(
+            record => record.resId
+        );
+        let customAttributeValues = [];
+        if (edit) {
+            /**
+             * no_variant and custom attribute don't need to be given to the configurator for new
+             * products.
+             */
+            ptavIds = ptavIds.concat(this.props.record.data.product_no_variant_attribute_value_ids.records.map(
+                record => record.resId
+            ));
+            /**
+             *  `product_custom_attribute_value_ids` records are not loaded in the view bc sub templates
+             *  are not loaded in list views. Therefore, we fetch them from the server if the record is
+             *  saved. Else we use the value stored on the line.
+             */
+            customAttributeValues =
+                this.props.record.data.product_custom_attribute_value_ids.records[0]?.isNew ?
+                this.props.record.data.product_custom_attribute_value_ids.records.map(
+                    record => record.data
+                ) :
+                await this.orm.read(
+                    'product.attribute.custom.value',
+                    this.props.record.data.product_custom_attribute_value_ids.currentIds,
+                    ["custom_product_template_attribute_value_id", "custom_value"]
+                )
+        }
+        this.dialog.add(PurchaseProductConfiguratorDialog, {
+            productTemplateId: this.props.record.data.product_template_id[0],
+            ptavIds: ptavIds,
+            customAttributeValues: customAttributeValues.map(
+                data => {
+                    return {
+                        ptavId: data.custom_product_template_attribute_value_id[0],
+                        value: data.custom_value,
+                    }
+                }
+            ),
+            quantity:1.0,
+            productUOMId: this.props.record.data.product_uom[0],
+            companyId: purchaseOrderRecord.data.company_id[0],
+            currencyId: this.props.record.data.currency_id[0],
+            edit: edit,
+            save: async (mainProduct, optionalProducts) => {
+                await applyProduct(this.props.record, mainProduct);
+                purchaseOrderRecord.data.order_line.leaveEditMode();
+                for (const optionalProduct of optionalProducts) {
+                    const line = await purchaseOrderRecord.data.order_line.addNewRecord({
+                        position: 'bottom',
+                        mode: "readonly",
+                    });
+                    await applyProduct(line, optionalProduct);
+                }
+            },
+            discard: () => {
+                purchaseOrderRecord.data.order_line.delete(this.props.record);
+            },
+        });
+    },
+});

purchase_product_configurator/views/optional_product_template.xml

@@ -0,0 +1,254 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!--Template code for displaying the optional products modal in the purchase order form view.-->
+    <template id="purchase_optional_products_modal" name="Optional Products">
+        <main class="modal-body">
+            <t t-call="purchase_product_configurator.configure_optional_products"/>
+        </main>
+    </template>
+    <!--Template code for displaying a quantity configuration input with add and remove buttons.-->
+    <template id="product_quantity_config">
+        <div class="css_quantity input-group">
+            <button t-attf-href="#" class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block"
+                    aria-label="Remove one" title="Remove one">
+                <i class="fa fa-minus"/>
+            </button>
+            <input type="text"
+                   class="js_quantity form-control quantity text-center"
+                   style="max-width: 4rem"
+                   data-min="1"
+                   name="add_qty"
+                   t-att-value="add_qty or 1"/>
+            <button t-attf-href="#" class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block"
+                    aria-label="Add one" title="Add one">
+                <i class="fa fa-plus"/>
+            </button>
+        </div>
+    </template>
+    <!-- Template code for configuring a product variant with price, quantity configuration, and product image display. -->
+    <template id="configure" name="Configure">
+        <div class="js_product main_product">
+            <t t-set="combination"
+               t-value="product_combination if product_combination else product._get_first_possible_combination()"/>
+            <t t-set="combination_info"
+               t-value="product._get_combination_info(combination, add_qty=add_qty or 1, pricelist=pricelist)"/>
+            <t t-set="product_variant" t-value="product.env['product.product'].browse(combination_info['product_id'])"/>
+            <input type="hidden" class="product_template_id" t-att-value="product.id"/>
+            <input type="hidden" class="product_id" t-attf-name="product_id" t-att-value="product_variant.id"/>
+            <input type="hidden" class="has_optional_products" t-attf-name="has_optional_products"
+                   t-att-value="product_variant.optional_product_ids.filtered(lambda p: p._is_add_to_cart_possible(combination))"/>
+            <div class="col-lg-12 text-center mt-5">
+                <t t-if="product._is_add_to_cart_possible()">
+                    <div class="col-lg-5 d-inline-block text-start">
+                        <t t-if="combination" t-call="sale.variants">
+                            <t t-set="parent_combination" t-value="None"/>
+                        </t>
+                        <h2>
+                            <span t-attf-class="text-danger oe_default_price oe_striked_price {{'' if combination_info['has_discounted_price'] else 'd-none'}}"
+                                  t-out="combination_info['list_price']"
+                                  t-options='{
+                                    "widget": "monetary",
+                                    "display_currency": (pricelist or product).currency_id
+                                }'/>
+                            <span class="oe_price product_id mt-3" style="white-space: nowrap;"
+                                  t-att-data-product-id="product.id"
+                                  t-out="combination_info['price']"
+                                  t-options='{
+                                    "widget": "monetary",
+                                    "display_currency": (pricelist or product).currency_id
+                                }'/>
+                        </h2>
+                        <t t-if="product.visible_qty_configurator">
+                            <t t-call="purchase_product_configurator.product_quantity_config"/>
+                        </t>
+                        <p class="css_not_available_msg alert alert-warning">This combination does not exist.</p>
+                    </div>
+                    <div class="col-lg-1 d-inline-block"/>
+                    <div class="col-lg-5 d-inline-block align-top text-start">
+                        <img t-if="product_variant"
+                             t-att-src="'/web/image/product.product/%s/image_1024' % product_variant.id"
+                             class="d-block product_detail_img" alt="Product Image"/>
+                        <img t-else="" t-att-src="'/web/image/product.template/%s/image_1024' % product.id"
+                             class="d-block product_detail_img" alt="Product Image"/>
+                    </div>
+                </t>
+                <t t-else="">
+                    <div class="col-lg-5 d-inline-block text-start">
+                        <p class="alert alert-warning">This product has no valid combination.</p>
+                    </div>
+                </t>
+            </div>
+        </div>
+    </template>
+    <!-- modal: full table, currently selected products at top -->
+    <template id="configure_optional_products">
+        <table class="table table-striped table-sm">
+            <thead>
+                <tr>
+                    <th class="td-img">
+                        <span class='label'>Product</span>
+                    </th>
+                    <th>
+                        <span class='label'/>
+                    </th>
+                    <th class="text-center td-qty">
+                        <span class='label'>Quantity</span>
+                    </th>
+                    <th class="text-center td-price">
+                        <span class='label'>Price</span>
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="js_product in_cart main_product">
+
+                    <t t-set="combination_info"
+                       t-value="product.product_tmpl_id._get_combination_info(combination, product.id, add_qty or 1, pricelist)"/>
+                    <t t-set="product_variant"
+                       t-value="product.env['product.product'].browse(combination_info['product_id'])"/>
+
+                    <input type="hidden" class="product_template_id" t-att-value="product.product_tmpl_id.id"/>
+                    <input type="hidden" class="product_id" t-att-value="product_variant.id"/>
+                    <td class='td-img'>
+                        <img class="product_detail_img" t-if="product_variant"
+                             t-att-src="'/web/image/product.product/%s/image_128' % product_variant.id"
+                             alt="Product Image"/>
+                        <img class="product_detail_img" t-else=""
+                             t-att-src="'/web/image/product.template/%s/image_128' % product.id" alt="Product Image"/>
+                    </td>
+                    <td class='td-product_name'>
+                        <strong class="product-name product_display_name" t-out="combination_info['display_name']"/>
+                        <div class="text-muted small">
+                            <div t-field="product.description_sale"/>
+                            <div class="js_attributes"/>
+                        </div>
+                        <div>
+                            <t t-if="product.product_tmpl_id and not combination">
+                                <t t-set="combination"
+                                   t-value="product.product_tmpl_id._get_first_possible_combination()"/>
+                            </t>
+                            <t t-if="combination and not already_configured" t-call="sale.variants">
+                                <t t-set="ul_class" t-valuef="flex-column"/>
+                                <t t-set="product" t-value="product.product_tmpl_id"/>
+                            </t>
+                            <t t-else="">
+                                <ul class="d-none js_add_cart_variants mb-0"
+                                    t-att-data-attribute_exclusions="{'exclusions: []'}"/>
+                                <div class="d-none oe_unchanged_value_ids"
+                                     t-att-data-unchanged_value_ids="variant_values"/>
+                            </t>
+                        </div>
+                    </td>
+                    <td class="text-center td-qty">
+                        <t t-call='purchase_product_configurator.product_quantity_config'/>
+                    </td>
+                    <td class="text-center td-price" name="price">
+                        <div t-attf-class="text-danger oe_default_price oe_striked_price {{'' if combination_info['has_discounted_price'] else 'd-none'}}"
+                             t-out="combination_info['list_price']"
+                             t-options='{
+                            "widget": "monetary",
+                            "display_currency": (pricelist or product).currency_id
+                        }'
+                        />
+                        <span class="oe_price product_id" style="white-space: nowrap;"
+                              t-att-data-product-id="product.id"
+                              t-out="combination_info['price']"
+                              t-options='{
+                            "widget": "monetary",
+                            "display_currency": (pricelist or product).currency_id
+                        }'/>
+                        <span class="js_raw_price d-none" t-out="product._get_contextual_price()"/>
+                        <p class="css_not_available_msg alert alert-warning">Option not available</p>
+                    </td>
+                </tr>
+                <tr class="o_total_row">
+                    <td colspan="4" class="text-end">
+                        <strong>Total:</strong>
+                        <span class="js_price_total fw-bold" style="white-space: nowrap;"
+                              t-att-data-product-id="product.id"
+                              t-out="combination_info['price'] * (add_qty or 1)"
+                              t-options='{
+                            "widget": "monetary",
+                            "display_currency": (pricelist or product).currency_id
+                        }'/>
+                    </td>
+                </tr>
+                <t t-if="product.optional_product_ids and mode != 'edit'">
+                    <tr class="o_select_options">
+                        <td colspan="4">
+                            <h4>Available Options:</h4>
+                        </td>
+                    </tr>
+                    <t t-call="purchase_product_configurator.optional_product_items">
+                        <t t-set="parent_combination" t-value="combination"/>
+                    </t>
+                </t>
+            </tbody>
+        </table>
+    </template>
+    <!-- modal: optional products -->
+    <template id="optional_product_items">
+        <t t-foreach="product.optional_product_ids" t-as="product">
+            <t t-set="combination" t-value="product._get_first_possible_combination(parent_combination)"/>
+            <t t-if="product._is_add_to_cart_possible(parent_combination)">
+
+                <t t-set="combination_info"
+                   t-value="product._get_combination_info(combination, add_qty=add_qty or 1, pricelist=pricelist)"/>
+                <t t-set="product_variant"
+                   t-value="product.env['product.product'].browse(combination_info['product_id'])"/>
+
+                <tr class="js_product">
+                    <td class="td-img">
+                        <input type="hidden" class="product_template_id" t-att-value="product.id"/>
+                        <input type="hidden" class="product_id" t-attf-name="optional-product-#{product.id}"
+                               t-att-value="product_variant.id"/>
+                        <img t-if="product_variant"
+                             t-att-src="'/web/image/product.product/%s/image_128' % product_variant.id"
+                             class="variant_image" alt="Product Image"/>
+                        <img t-else="" t-att-src="'/web/image/product.template/%s/image_128' % product.id"
+                             class="variant_image" alt="Product Image"/>
+                    </td>
+                    <td class='td-product_name' colspan="2">
+                        <div class="mb-3">
+                            <strong class="product-name product_display_name" t-out="combination_info['display_name']"/>
+                            <div class="text-muted small" t-field="product.description_sale"/>
+                        </div>
+                        <t t-call="sale.variants">
+                            <t t-set="combination"
+                               t-value="product._get_first_possible_combination(parent_combination)"/>
+                        </t>
+                    </td>
+                    <td class="text-center td-qty d-none">
+                        <t t-call='purchase_product_configurator.product_quantity_config'/>
+                    </td>
+                    <td class="text-center td-price">
+                        <div t-attf-class="text-danger oe_default_price oe_optional oe_striked_price {{'' if combination_info['has_discounted_price'] else 'd-none'}}"
+                             t-out="combination_info['list_price']"
+                             t-options='{
+                                "widget": "monetary",
+                                "display_currency": (pricelist or product).currency_id
+                            }'/>
+                        <div class="oe_price" style="white-space: nowrap;"
+                             t-out="combination_info['price']"
+                             t-options='{
+                                "widget": "monetary",
+                                "display_currency": (pricelist or product).currency_id
+                            }'/>
+                        <span class="js_raw_price d-none" t-out="combination_info['price']"/>
+                        <p class="css_not_available_msg alert alert-warning">Option not available</p>
+
+                        <a role="button" href="#" class="js_add btn btn-primary btn-sm">
+                            <i class="fa fa-shopping-cart add-optionnal-item"/>
+                            Add to cart
+                        </a>
+                        <span class="js_remove d-none">
+                            <a role="button" href="#" class="js_remove">
+                                <i class="fa fa-trash-o remove-optionnal-item"/>
+                            </a>
+                        </span>
+                    </td>
+                </tr>
+            </t>
+        </t>
+    </template>
+</odoo>

purchase_product_configurator/views/product_template_views.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!--Adding a group in the purchase configurator section of the
+    product template form view with the fields 'has_configurable_attributes'
+    and 'product_config_mode'.-->
+    <record id="product_template_only_form_view" model="ir.ui.view">
+        <field name="name">product.template.view.form.inherit.purchase.product.configurator</field>
+        <field name="model">product.template</field>
+        <field name="inherit_id" ref="product.product_template_only_form_view"/>
+        <field name="arch" type="xml">
+            <xpath expr="//page[@name='variants']" position="inside">
+                <group name="product_mode_config" invisible="purchase_ok==False">
+                    <group string="Purchase Variant Selection" invisible="has_configurable_attributes == False">
+                        <field name="has_configurable_attributes" invisible="1"/>
+                        <field name="product_config_mode" invisible="has_configurable_attributes == False"
+                               widget="radio" nolabel="1" colspan="2"/>
+                    </group>
+                </group>
+            </xpath>
+        </field>
+    </record>
+</odoo>

purchase_product_configurator/views/purchase_order_views.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+    <!--Adding invisible fields (product_config_mode and
+    product_custom_attribute_value_ids) after the product_template_id field in
+    the purchase order form view.-->
+    <record id="purchase_order_form" model="ir.ui.view">
+        <field name="name">purchase.order.view.form.inherit.purchase.product.configurator</field>
+        <field name="model">purchase.order</field>
+        <field name="inherit_id" ref="purchase.purchase_order_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//tree/field[@name='product_template_id']"
+                   position="after">
+                <field name="product_config_mode" invisible="1"/>
+                <field name="product_custom_attribute_value_ids" invisible="1" />
+            </xpath>
+        </field>
+    </record>
+</odoo>