[FIX] point_of_sale: restrict refund button until qty selected on tic…

…ket screen

Before this commit:
===================
When clicking the refund button without selecting the quantity for the selected
order lines, the ticket screen would redirect to the product screen, resulting
in empty order lines.

After this commit:
The refund button will not redirect the ticket screen to the product screen
until a quantity is selected for the selected order line.

Task ID: 3922007

addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.xml

@@ -9,7 +9,7 @@
             <SelectPartnerButton partner="props.partner"/>
             <button class="pay validation pay-order-button btn-primary"
                 t-attf-class="{{getMainButtonClasses()}}" 
-                t-att-class="{ 'with-more-button': props.onClickMore and ui.isSmall }" 
+                t-att-class="{'btn-secondary': !props.isActionButtonHighlighted, 'with-more-button': props.onClickMore and ui.isSmall}"
                 t-on-click="props.actionToTrigger ? this.props.actionToTrigger : () => pos.get_order().pay()">
                 <div class="pay-circle d-flex align-items-center justify-content-center py-2 mb-2">
                     <i class="oi oi-chevron-right" role="img" aria-label="Pay" title="Pay" />

addons/point_of_sale/static/src/app/screens/product_screen/product_screen.xml

@@ -12,7 +12,8 @@
                             partner="partner"
                             actionName="constructor.numpadActionName"
                             actionType="'payment'"
-                            onClickMore.bind="displayAllControlPopup" />
+                            onClickMore.bind="displayAllControlPopup"
+                            isActionButtonHighlighted="items"/>
                         <Numpad buttons="getNumpadButtons()" onClick.bind="onNumpadClick"/>
                     </div>
                 </div>

addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.js

@@ -258,19 +258,12 @@ export class TicketScreen extends Component {
             }
         }
 
-        if (!order) {
-            this._state.ui.highlightHeaderNote = !this._state.ui.highlightHeaderNote;
+        if (!order || !this.getHasItemsToRefund()){
             return;
         }
 
         const partner = order.get_partner();
 
-        const allToRefundDetails = this._getRefundableDetails(partner, order);
-
-        if (!allToRefundDetails) {
-            this._state.ui.highlightHeaderNote = !this._state.ui.highlightHeaderNote;
-            return;
-        }
         // The order that will contain the refund orderlines.
         // Use the destinationOrder from props if the order to refund has the same
         // partner as the destinationOrder.
@@ -287,7 +280,7 @@ export class TicketScreen extends Component {
                 : this._getEmptyOrder(partner);
 
         // Add orderline for each toRefundDetail to the destinationOrder.
-        for (const refundDetail of allToRefundDetails) {
+        for (const refundDetail of this._getRefundableDetails(partner, order)) {
             const product = this.pos.models["product.product"].get(
                 refundDetail.orderline.productId
             );

addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.xml

@@ -127,7 +127,7 @@
                     <t t-set="_selectedSyncedOrder" t-value="getSelectedOrder()" />
                     <t t-set="_selectedOrderlineId" t-value="getSelectedOrderlineId()" />
                     <t t-if="_selectedSyncedOrder?.get_orderlines()?.length" > 
-                        <div t-if="isOrderSynced" t-att-class="{ 'highlight text-danger': _state.ui.highlightHeaderNote }" class="text-bg-view py-2 px-3 border-bottom" >
+                        <div t-if="isOrderSynced" t-att-class="{ 'highlight text-danger': !getHasItemsToRefund() }" class="py-2 px-3 border-bottom" >
                             Select the product(s) to refund and set the quantity
                         </div>
                         <OrderWidget lines="_selectedSyncedOrder.orderlines" t-slot-scope="scope"

addons/point_of_sale/static/src/app/store/pos_store.js

@@ -148,7 +148,6 @@ export class PosStore extends Reactive {
                 filter: null,
                 // maps the order's backendId to it's selected orderline
                 selectedOrderlineIds: {},
-                highlightHeaderNote: false,
             },
         };