Override JS function Odoo 15

Question

how can I override this Odoo class, I want to change the content of get date function, but I restart the service, the POS, even tried in private windows to avoid cache problems but Odoo is not seeing my custom js class :

odoo.define('pos_sale.SaleOrderRow', function (require) {
'use strict';

const PosComponent = require('point_of_sale.PosComponent');
const Registries = require('point_of_sale.Registries');
const utils = require('web.utils');
/**
 * @props {models.Order} order
 * @props columns
 * @emits click-order
 */
class SaleOrderRow extends PosComponent {
    get order() {
        return this.props.order;
    }
    get highlighted() {
        const highlightedOrder = this.props.highlightedOrder;
        return !highlightedOrder ? false : highlightedOrder.backendId === this.props.order.backendId;
    }

    // Column getters //

    get name() {
        return this.order.name;
    }
    get date() {
        return moment(this.order.date_order).format('YYYY-MM-DD hh:mm A');
    }
    get customer() {
        const customer = this.order.partner_id;
        return customer ? customer[1] : null;
    }
    get total() {
        return this.env.pos.format_currency(this.order.amount_total);
    }
    /**
     * Returns true if the order has unpaid amount, but the unpaid amount
     * should not be the same as the total amount.
     * @returns {boolean}
     */
    get showAmountUnpaid() {
        const isFullAmountUnpaid = utils.float_is_zero(Math.abs(this.order.amount_total - this.order.amount_unpaid), this.env.pos.currency.decimal_places);
        return !isFullAmountUnpaid && !utils.float_is_zero(this.order.amount_unpaid, this.env.pos.currency.decimal_places);
    }
    get amountUnpaidRepr() {
        return this.env.pos.format_currency(this.order.amount_unpaid);
    }
    get state() {
        let state_mapping = {
          'draft': this.env._t('Quotation'),
          'sent': this.env._t('Quotation Sent'),
          'sale': this.env._t('Sales Order'),
          'done': this.env._t('Locked'),
          'cancel': this.env._t('Cancelled'),
        };

        return state_mapping[this.order.state];
    }
    get salesman() {
        const salesman = this.order.user_id;
        return salesman ? salesman[1] : null;
    }
}
SaleOrderRow.template = 'SaleOrderRow';

Registries.Component.add(SaleOrderRow);

return SaleOrderRow;

});

I want to change the content of this function

get date() {
        return moment(this.order.date_order).format('YYYY-MM-DD hh:mm A');
    }

I tried :

odoo.define('slnee_appointment_sale.CustomSaleOrderRow', function (require) {
'use strict';

console.log('innnnnnnnnn XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX')
var SaleOrderRow = require('pos_sale.SaleOrderRow');
const Registries = require('point_of_sale.Registries');
const moment = require('moment'); // Import the moment library if it's not already imported

const CustomSaleOrderRow = SaleOrderRow => class extends SaleOrderRow {
    // Override the date getter to return a custom date format
    get date() {
        // Get the order's date in UTC
        const utcDate = moment.utc(this.order.date_order);

        // Convert the UTC date to the browser's timezone
        const browserTimezoneDate = utcDate.clone().local();

        return browserTimezoneDate.format('YYYY-MM-DD hh:mm A');
    }
};

Registries.Component.extend(SaleOrderRow, CustomSaleOrderRow);

return SaleOrderRow;

});

but it's showing nothing in the web browser console, like it's not even seeing my js file even it's added in the manifest

'assets': {
    'point_of_sale.assets': [

        "slnee_appointment_sale/static/src/js/CustomSaleOrderRow.js",

    ],

},

Answer 1

You need to remove require('moment') and correct how you extend the SaleOrderRow component

Example:

odoo.define('slnee_appointment_sale.CustomSaleOrderRow', function (require) {
    'use strict';
    
    var SaleOrderRow = require('pos_sale.SaleOrderRow');
    const Registries = require('point_of_sale.Registries');
    
    
    const CustomSaleOrderRow = (SaleOrderRow) => {
        class CustomSaleOrderRow extends SaleOrderRow {
            get date() {
                const utcDate = moment.utc(this.order.date_order);
                const browserTimezoneDate = utcDate.clone().local();
                return browserTimezoneDate.format('YYYY-MM-DD hh:mm A');
            }
        }
        return CustomSaleOrderRow;
    };

    Registries.Component.extend(SaleOrderRow, CustomSaleOrderRow);
    
    return CustomSaleOrderRow;
    
});

You can find an example in pos_sale module