Hi,

You can solve this by passing your own visibility flag into the OWL component and then using it in the template.

Step 1 — Patch the OWL component in JS

Create a JS file and add this code:

** @odoo-module **/

import { patch } from "@web/core/utils/patch";

import { user } from "@web/core/user";

import { AccountPaymentPopOver } from "@account/components/payment_popover/payment_popover";

patch(AccountPaymentPopOver.prototype, "addon_hide_buttons", {

    setup() {

        super.setup();

        this.props.hideUnreconcile = user.hasGroup(

            "account_control_user.group_account_user_controlled"

        );

    },

});

Step 2 — Use the new flag inside the XML template

Override the button using t-if and your custom prop:

<templates id="template" xml:space="preserve">

    <t t-name="account.AccountPaymentPopOver"

       t-inherit="account.AccountPaymentPopOver"

       t-inherit-mode="extension"

       owl="1">

        <xpath expr="//button[contains(@class,'js_unreconcile_payment')]" position="attributes">

            <attribute name="t-if">!props.is_exchange or !props.hideUnreconcile</attribute>

        </xpath>

    </t>

</templates>

The reason I added !props.is_exchange is that it is already in the default code. Give it a try and adjust the code depending on the exact logic you want. 

I hope it helps

In case it helps anyone, this is what worked for me:
/** @odoo-module **/

import { user } from "@web/core/user";

(async () => {

    const hasRestrictedGroup = await user.hasGroup(

        "account_control_user.group_account_user_controlled"

    );

    if (hasRestrictedGroup) {

        document.body.classList.add("account-user-controlled");

        console.log("You have a restrict group, add body in the class");

    }

})();
css:

body.account-user-controlled .account_payment_popover button.js_unreconcile_payment {

    display: none !important;

}

body.account-user-controlled .account_payment_popover button.js_open_payment {

    display: none !important;

}