I want to add button on pos product screen in pos when clicked on the button show number popup while enter number the number should be store on the button label .
created a char field in pos.order the entered number save on that char field.
i wrote i piece of code 
js file:

odoo.define('xy_pos_button.CreateCustomButton', function (require) {
    'use strict';

    console.log("JS File Loaded");

    const { Gui } = require('point_of_sale.Gui');
    const PosComponent = require('point_of_sale.PosComponent');
    const { posbus } = require('point_of_sale.utils');
    const ProductScreen = require('point_of_sale.ProductScreen');
    const { useListener } = require('web.custom_hooks');
    const Registries = require('point_of_sale.Registries');
    const PaymentScreen = require('point_of_sale.PaymentScreen');

    class CustomButton extends PosComponent {
        constructor() {
            super(...arguments);
            useListener('click', this.onClick);
        }

        get ref_order() {
            console.log(this.env.pos.get_order(), 'GET POS ORDER');
            return this.env.pos.get_order();
        }

        async onClick() {
            const { confirmed, payload: inputNumber } = await this.showPopup('NumberPopup', {
                startingValue: this.ref_order,
                cheap: true,
                isInputSelected: true
            });

            if (confirmed) {
                const delivery_ref_count = parseInt(inputNumber, 10);
                const max_capacity = 2 ** 31 - 1;
                if (delivery_ref_count > max_capacity) {
                    await this.showPopup('ErrorPopup', {
                        title: this.env._t('Blocked action'),
                        body: _.str.sprintf(
                            this.env._t('You cannot put a number that exceeds %s '),
                            max_capacity,
                        ),
                    });
                    return;
                }
                this.env.pos.get_order().set_pos_delivery_order(delivery_ref_count);
            }
        }
    }

    CustomButton.template = 'CustomButton';

    ProductScreen.addControlButton({
        component: CustomButton,
    });

    Registries.Component.add(CustomButton);

    return CustomButton;
});

an other js file

odoo.define('xy_pos_button.popup_note', function (require) {
    "use strict";
    console.log('POPUP Note Loaded');
    var models = require('point_of_sale.models');
    const { Gui } = require('point_of_sale.Gui');
    const { posbus } = require('point_of_sale.utils');
    var _super_order = models.Order.prototype;

    models.Order = models.Order.extend({
        initialize: function (attr, options) {
            _super_order.initialize.apply(this, arguments);
            this.pos_delivery_order = this.pos_delivery_order || 1;
            this.save_to_db();
        },
        init: function (parent, options) {
            this._super(parent, options);
            this.pos.bind('change:selectedOrder', this, this.renderElement);
        },
        export_as_JSON: function () {
            var json = _super_order.export_as_JSON.apply(this, arguments);
            json.pos_delivery_order = this.pos_delivery_order;
            return json;
        },
        init_from_JSON: function (json) {
            _super_order.init_from_JSON.apply(this, arguments);
            this.pos_delivery_order = json.pos_delivery_order || 1;
        },
        get_pos_delivery_order: function () {
            return this.pos_delivery_order;
        },
        set_pos_delivery_order: function (count) {
            this.pos_delivery_order = Math.max(count, 0);
            this.trigger('change');
        },
    });
});

but is does not work
xml

  
      

           
           
            
            CustomButton

      

  
    

Advance Thanks