How to Override a Component in the Odoo 17 POS

Odoo POS (Odoo Point Of Sale) is the best all-in-one solution for managing your retail stores, restaurants, accounting, and sales. You can find this simple, intuitive interface on iPods, tablets, and laptops.

We can see how to override a component in POS in this blog. Before we can proceed with programming, we must first understand what a component is. A widget is the most important part of a user interface, or as we can say, most of the components of Odoo's user interface are controlled by widgets. Stated differently, it is possible to link a template and a widget. Now, let's look at how it works. The widget renders the template and appends it to the user interface upon initialization.

In order to override a component first, we need to create a js file under static > src > overrides > folder name > file.js.Additionally, remember to include the js file in the manifest file.

'assets': {
   'point_of_sale._assets_pos': [
       'bg_pos_customer_maximum_discount/static/src/overrides/discount_button/discount_button.js'
   ],
},
/** @odoo-module */
import { DiscountButton } from '@pos_discount/overrides/components/discount_button/discount_button';
import { patch } from "@web/core/utils/patch";
import { _t } from "@web/core/l10n/translation";
import { AlertPopup } from"@bg_pos_customer_maximum_discount/overrides/utils/alert_popup/alert_popup";
patch(DiscountButton.prototype,
{
   if(self.pos.orders[0].partner.discount_type === 'fixed'){
       const discount_percentage = self.pos.orders[0].partner.discount;
       const total_amount = this.pos.orders[0].get_total_with_tax()
       const disc_value = ((val/100)*total_amount)
       if (disc_value > discount_percentage){
           this.env.services.popup.add(AlertPopup, {
                 title: _t("Exceed Discount Limit!"),
                 body: _t("Sorry, Discount is not allowed. Maximum discount for this customer is %s", discount_percentage),
           });
       }else{
           await self.apply_discount(val);
       }
  }
});

In order to add extra functionality to the discount button first we need to import the component. After that, we need to patch the component which is DiscountButton.Here a popup functionality is added. As we need to add popup functionality, we need to import popup path. Alert popup is our custom, which is shown below.

import { AlertPopup } from"@bg_pos_customer_maximum_discount/overrides/utils/alert_popup/alert_popup"

Then, we can add our functionality as above. This is how we override a component and add extra functionality.