[ADD] odoo_self_order_details: new module to improve ux during self order

This commit introduces a ux change and more information in the
Self-Order functionality.
It changes its default functionality of directly adding product into order
when clicking to opening a view to show large image and detailed product
description so that users can see more details about product
whole view page will be scroll-able allowing to configure product depending on
their options available
Addition of cancel button in footer for better mobile experience

Author: paay-odoo

odoo_self_order_details/__init__.py

@@ -0,0 +1 @@
+from . import models

odoo_self_order_details/__manifest__.py

@@ -0,0 +1,20 @@
+{
+    "name": "Self Order Details",
+    "description": """
+        Self order details for products in POS
+    """,
+    "author": "Ayush Patel",
+    "version": "0.1",
+    "application": True,
+    "installable": True,
+    "depends": ["pos_self_order"],
+    "license": "LGPL-3",
+    "assets": {
+        "pos_self_order.assets": [
+            "odoo_self_order_details/static/src/**/*",
+        ],
+    },
+    "data": [
+        "views/product_template_view.xml",
+    ],
+}

odoo_self_order_details/models/__init__.py

@@ -0,0 +1 @@
+from . import product_template

odoo_self_order_details/models/product_template.py

@@ -0,0 +1,7 @@
+from odoo import fields, models
+
+
+class ProductTemplate(models.Model):
+    _inherit = "product.template"
+
+    self_order_description = fields.Html(string="Self-Order Description")

odoo_self_order_details/static/src/product_card/product_card.js

@@ -0,0 +1,39 @@
+import { patch } from "@web/core/utils/patch";
+import { ProductCard } from "@pos_self_order/app/components/product_card/product_card";
+import { ProductPage } from "@pos_self_order/app/pages/product_page/product_page";
+import { markup } from "@odoo/owl";
+
+patch(ProductCard.prototype, {
+    async selectProduct(qty = 1) {
+        const product = this.props.product;
+
+        if (!product.self_order_available || !this.isAvailable) {
+            return;
+        }
+
+        if (product.isCombo()) {
+            return super.selectProduct(qty);
+        }
+        
+        this.router.navigate("product", { id: product.id });
+    }
+});
+
+patch(ProductPage.prototype, {
+    async setup() {
+        super.setup();
+
+        const product = this.props.product;
+        if (product && !product.self_order_description) {
+            try {
+                const orm = this.env.services.orm;
+                const [record] = await orm.read("product.product",[product.id],["self_order_description"]);
+                if (record && record.self_order_description) {
+                    product.self_order_description = markup(record.self_order_description);
+                }
+            } catch (err) {
+                console.error("Failed to fetch self_order_description via ORM:", err);
+            }
+        }
+    },
+});

odoo_self_order_details/static/src/product_card/product_card.xml

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates xml:space="preserve">
+    <!--Inheriting ProductPage and defining our changes-->
+    <t t-inherit="pos_self_order.ProductPage" t-inherit-mode="extension">
+        <!--'options' string after product name only when Product is Configurable -->
+        <xpath expr="//h1[@class='mb-0 text-nowrap']" position="replace">
+            <h1 class="mb-0 text-nowrap"><strong t-out="product.name"/> <span t-if="product.isConfigurable()">options</span></h1>
+        </xpath>
+        <!-- changes in product details section to have a new layout with a large image and description -->
+        <xpath expr="//div[hasclass('o-so-product-details')]" position="replace">
+            <div class="o-so-product-details d-flex flex-column align-items-center p-3 gap-3">
+                <!-- Large Product Image -->
+                <div class="o-so-product-details-image text-center mb-3" style="max-width: 300px;">
+                    <img
+                        class="img-fluid rounded shadow-sm"
+                        t-attf-src="/web/image/product.product/{{ product.id }}/image_512"
+                        alt="Product image"
+                        loading="lazy"/>
+                </div>
+                
+                <!-- Product related Information -->
+                <div class="o-so-product-details-description text-center w-100">
+                    <h2 t-out="product.name"/>
+                    <span class="fs-3 d-block my-3" t-out="selfOrder.formatMonetary(selfOrder.getProductDisplayPrice(product))"/>
+                </div>
+
+                <!-- Product Description -->
+                <div class="o-so-product-details-description text-center w-100">
+                    <t t-if="product.self_order_description">
+                        <div t-out="product.self_order_description"/>
+                    </t>
+                </div>
+            </div>
+        </xpath>
+
+        <!--Cancel button next to the Add to cart button -->
+        <xpath expr="//div[hasclass('page-buttons')]/button[hasclass('btn-primary')]" position="before">
+            <button class="btn btn-secondary btn-lg" t-on-click="() => router.back()">
+                Cancel
+            </button>
+        </xpath>
+    </t>
+</templates>

odoo_self_order_details/views/product_template_view.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+    <record id="product_template_form_view_inherit_self_order" model="ir.ui.view">
+        <field name="name">product.template.form.inherit.self.order</field>
+        <field name="model">product.template</field>
+        <field name="inherit_id" ref="product.product_template_form_view"/>
+        <field name="arch" type="xml">
+            <!-- This XPath targets the 'Point of Sale' page and the 'Point of Sale' group inside it -->
+            <xpath expr="//page[@name='pos']//group[@name='pos']" position="inside">
+                <field name="self_order_description"/>
+            </xpath>
+        </field>
+    </record>
+</odoo>