Assuming the payment selected in POS is Bank, I want a pop-up to appear when it is clicked or selected, as shown in the image below. The pop-up should display recent transactions from the last 10 minutes, and once a transaction is selected from the pop-up, the payment and the payment validation can proceed.

/* global MpesaTerminal */
odoo.define('pos_pop.popups', function (require) {
    "use strict";

    const Gui = require('point_of_sale.Gui');
    const screens = require('point_of_sale.screens');
    const core = require('web.core');
    const _t = core._t;

    const RecentTransactionsPopup = screens.PopupWidget.extend({
        template: 'RecentTransactionsPopup',

        show: function (options) {
            this._super(options);
            this.options = options;
            this.fetch_and_render_transactions();
        },

        fetch_and_render_transactions: async function () {
            this.$('.popup-content').empty();
            const transactions = this.options.transactions || [];

            if (transactions.length) {
                this.render_transactions(transactions);
            } else {
                this.$('.popup-content').append('
No recent transactions found.
');
            }
        },

        render_transactions: function (transactions) {
            this.$('.transaction-list').empty();

            transactions.forEach(txn => {
                this.$('.transaction-list').append(`
                    

                        
Customer Name: ${txn.customer_name}

                        
Amount: ${txn.amount}

                        
Phone: ${txn.phone}

                        
Amount Due: ${txn.amount_due}

                    

                `);
            });

            this.$('.confirm').click(() => {
                const selectedTxn = this.$('.transaction.selected');
                if (selectedTxn.length) {
                    const paid_amount = parseFloat(selectedTxn.data('amount') || 0);
                    const due_amount = parseFloat(selectedTxn.data('amount_due') || 0);

                    if (paid_amount >= due_amount) {
                        this.options.on_payment_done(true);
                    } else {
                        this.options.on_payment_done(false);
                    }
                    this.destroy();
                } else {
                    Gui.showPopup('ErrorPopup', {
                        title: _t('No Transaction Selected'),
                        body: _t('Please select a transaction to proceed.'),
                    });
                }
            });

            this.$('.cancel').click(() => {
                this.destroy();
            });

            this.$('.transaction').click(function () {
                self.$('.transaction').removeClass('selected');
                $(this).addClass('selected');
            });
        },
    });

    Gui.define_popup({name: 'RecentTransactionsPopup', widget: RecentTransactionsPopup});
});