[IMP] website_sale: display warning in notifications

When adding items to the cart, the server returns warnings that are never displayed to the customer. This commit makes use of the new notification system of website_sale to display it. task-3502911 Part-of: odoo/odoo#139332
2023-11-14 13:49:16 +00:00
parent ce5fc3a1f2
commit bfe857db1d
11 changed files with 118 additions and 46 deletions
@@ -81,8 +81,12 @@
            'website_sale/static/src/js/website_sale_reorder.js',
            'website_sale/static/src/js/website_sale_delivery.js',
            'website_sale/static/src/scss/product_configurator.scss',
+            'website_sale/static/src/js/notification/add_to_cart_notification/add_to_cart_notification.js',
+            'website_sale/static/src/js/notification/add_to_cart_notification/add_to_cart_notification.xml',
            'website_sale/static/src/js/notification/cart_notification/cart_notification.js',
            'website_sale/static/src/js/notification/cart_notification/cart_notification.xml',
+            'website_sale/static/src/js/notification/warning_notification/warning_notification.js',
+            'website_sale/static/src/js/notification/warning_notification/warning_notification.xml',
            'website_sale/static/src/js/notification/notification_service.js',
        ],
        'web._assets_primary_variables': [
@@ -870,6 +870,7 @@ class WebsiteSale(payment_portal.PaymentPortal):
        )

        values['notification_info'] = self._get_cart_notification_information(order, [values['line_id']])
+        values['notification_info']['warning'] = values.pop('warning', '')
        request.session['website_sale_cart_quantity'] = order.cart_quantity

        if not order.cart_quantity:
@@ -0,0 +1,48 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+import { formatCurrency } from "@web/core/currency";
+
+export class AddToCartNotification extends Component {
+    static template = "website_sale.addToCartNotification";
+    static props = {
+        lines: {
+            type: Array,
+            element: {
+                type: Object,
+                shape: {
+                    id: Number,
+                    image_url: String,
+                    quantity: Number,
+                    name: String,
+                    description: { type: String, optional: true },
+                    line_price_total: Number,
+                },
+            },
+        },
+        currency_id: Number,
+    }
+
+    /**
+     * Return the price, in the format of the sale order currency.
+     *
+     * @param {Object} line - The line element for which to return the formatted price.
+     * @return {String} - The price, in the format of the sale order currency.
+     */
+    getFormattedPrice(line) {
+        return formatCurrency(line.line_price_total, this.props.currency_id);
+    }
+
+    /**
+     * Return the product summary based on the line information.
+     *
+     * The product summary is computed based on the line quantity and name, separated by the symbol
+     * 'x' (e.g.: 1 x Chair Floor Protection).
+     *
+     * @param {Object} line - The line element for which to return the product summary.
+     * @return {String} - The product summary.
+     */
+    getProductSummary(line) {
+        return line.quantity + " x " + line.name;
+    }
+}
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="website_sale.addToCartNotification">
+        <div class="row g-2 mb-2" t-foreach="props.lines" t-as="line" t-key="line.id">
+            <div class="col-3">
+                <img class="img o_image_64_max rounded mb-2 img-fluid"
+                    t-att-src="line.image_url"
+                    t-att-alt="line.name"/>
+            </div>
+            <div class="col-6 d-flex flex-column align-items-start">
+                <span t-out="getProductSummary(line)"/>
+                <span class="text-muted small"
+                    t-if="line.description"
+                    t-out="line.description"/>
+            </div>
+            <div class="col-3 d-flex flex-column align-items-end gap-1"
+                t-out="getFormattedPrice(line)"/>
+        </div>
+        <a role="button" class="w-100 btn btn-primary" href="/shop/cart">
+            View cart
+        </a>
+    </t>
+
+</templates>
@@ -1,12 +1,15 @@
 /** @odoo-module **/

 import { Component } from "@odoo/owl";
-import { formatCurrency } from "@web/core/currency";
+import { AddToCartNotification } from "../add_to_cart_notification/add_to_cart_notification";
+import { WarningNotification } from "../warning_notification/warning_notification";

 export class CartNotification extends Component {
+    static components = { AddToCartNotification, WarningNotification };
    static template = "website_sale.cartNotification";
    static props = {
        message: [String, { toString: Function }],
+        warning: [String, { toString: Function }],
        lines: {
            type: Array,
            element: {
@@ -34,27 +37,4 @@ export class CartNotification extends Component {
    get positionOffset() {
        return (document.querySelector('header.o_top_fixed_element')?.offsetHeight || 0) + 'px';
    }
-
-    /**
-     * Return the price, in the format of the sale order currency.
-     *
-     * @param {Object} line - The line element for which to return the formatted price.
-     * @return {String} - The price, in the format of the sale order currency.
-     */
-    getFormattedPrice(line) {
-        return formatCurrency(line.line_price_total, this.props.currency_id);
-    }
-
-    /**
-     * Return the product summary based on the line information.
-     *
-     * The product summary is computed based on the line quantity and name, separated by the symbol
-     * 'x' (e.g.: 1 x Chair Floor Protection).
-     *
-     * @param {Object} line - The line element for which to return the product summary.
-     * @return {String} - The product summary.
-     */
-    getProductSummary(line) {
-        return line.quantity + " x " + line.name;
-    }
 }
@@ -15,24 +15,11 @@
                        aria-label="Close"/>
            </div>
            <div class="toast-body">
-                <div class="row g-2 mb-2" t-foreach="props.lines" t-as="line" t-key="line.id">
-                    <div class="col-3">
-                        <img class="img o_image_64_max rounded mb-2 img-fluid"
-                             t-att-src="line.image_url"
-                             t-att-alt="line.name"/>
-                    </div>
-                    <div class="col-6 d-flex flex-column align-items-start">
-                        <span t-out="getProductSummary(line)"/>
-                        <span class="text-muted small"
-                              t-if="line.description"
-                              t-out="line.description"/>
-                    </div>
-                    <div class="col-3 d-flex flex-column align-items-end gap-1"
-                         t-out="getFormattedPrice(line)"/>
-                </div>
-                <a role="button" class="w-100 btn btn-primary" href="/shop/cart">
-                    View cart
-                </a>
+                <WarningNotification t-if="this.props.warning" warning="this.props.warning"/>
+                <AddToCartNotification
+                    t-elif="this.props.lines.length"
+                    lines="this.props.lines"
+                    currency_id="this.props.currency_id"/>
            </div>
        </div>
    </t>
@@ -0,0 +1,10 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+
+export class WarningNotification extends Component {
+    static template = "website_sale.warningNotification";
+    static props = {
+        warning: [String, { toString: Function }],
+    }
+}
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="website_sale.warningNotification">
+        <div class="alert alert-warning" role="alert">
+            <i class="fa fa-warning"/>
+            <t t-out="this.props.warning"/>
+        </div>
+    </t>
+
+</templates>
@@ -225,7 +225,7 @@ export const WebsiteSale = publicWidget.Widget.extend(VariantMixin, cartHandlerM
            $('.js_quantity[data-line-id='+line_id+']').val(data.quantity).text(data.quantity);

            wSaleUtils.updateCartNavBar(data);
-            wSaleUtils.showWarning(data.warning);
+            wSaleUtils.showWarning(data.notification_info.warning);
            // Propagating the change to the express checkout forms
            Component.env.bus.trigger('cart_amount_changed', [data.amount, data.minor_amount]);
        });
@@ -35,8 +35,8 @@ export const cartHandlerMixin = {
        });
        if (data.cart_quantity && (data.cart_quantity !== parseInt($(".my_cart_quantity").text()))) {
            updateCartNavBar(data);
-            showCartNotification(this.call.bind(this), data.notification_info);
        };
+        showCartNotification(this.call.bind(this), data.notification_info);
        return data;
    },
 };
@@ -119,7 +119,14 @@ function showCartNotification(callService, props, options = {}) {
    // Show the notification about the cart
    if (props.lines) {
        callService("cartNotificationService", "add", "Item(s) added to your cart", {
-            ...props,
+            lines: props.lines,
+            currency_id: props.currency_id,
+            ...options,
+        });
+    }
+    if (props.warning) {
+        callService("cartNotificationService", "add", "Warning", {
+            warning: props.warning,
            ...options,
        });
    }
@@ -198,7 +198,6 @@ publicWidget.registry.ProductWishlist = publicWidget.Widget.extend(VariantMixin,
        }).then(function (data) {
            wSaleUtils.updateCartNavBar(data);
            wSaleUtils.showCartNotification(callService, data.notification_info);
-            wSaleUtils.showWarning(data.warning);
        });
    },
    /**