Thank you very much, it works perfectly

Hi,

The class you are using in the xpath belongs to the Dialog component. You can replace the entire dialog component and this involves redefining the dialog and adding your custom content inside a new <Dialog> tag.

<?xml version="1.0" encoding="UTF-8"?>

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

    <t t-name="point_of_sale.ClosePosPopup" t-inherit="point_of_sale.ClosePosPopup" t-inherit-mode="extension">

        <xpath expr="//Dialog" position="replace">

            <Dialog contentClass="'close-pos-popup'">

                <!-- Custom Header -->

                <t t-set-slot="header">

                    <div class="d-flex flex-grow-1 justify-content-between">

                        <h4 class="align-middle my-1">Closing Register</h4>

                        <div class="total-orders fw-bolder align-middle my-1">

                            <t t-esc="props.orders_details.quantity"/> orders:

                            <span class="amount" t-esc="env.utils.formatCurrency(props.orders_details.amount)"/>

                        </div>

                    </div>

                </t>

                <!-- Custom Body -->

                <div class="payment-methods-overview">

                    <!-- Add your modifications here -->

                </div>

                <!-- Custom Footer -->

                <t t-set-slot="footer">

                    <div class="w-100 d-flex flex-wrap justify-content-between gap-2">

                        <!-- Add your custom buttons or footer content -->

                    </div>

                </t>

            </Dialog>

        </xpath>

    </t>

</templates>

You can also modify specific parts of the Dialog instead of replacing the entire Dialog. For instance, you can target and update the header, body, or footer using specific xpath expressions.

//Modifying the Header

<xpath expr="//t[@t-set-slot='header']" position="replace">

    <t t-set-slot="header">

        <div class="d-flex flex-grow-1 justify-content-between">

            <h4 class="align-middle my-1">Custom Header Title</h4>

            <div class="custom-content">

                <!-- Add your custom header content -->

            </div>

        </div>

    </t>

</xpath>

//Adding Content to the Body

<xpath expr="//div[hasclass('payment-methods-overview')]" position="inside">

    <div class="custom-body-content">

        <!-- Add additional content here -->

    </div>

</xpath>

//Modifying the Footer

<xpath expr="//t[@t-set-slot='footer']" position="replace">

    <t t-set-slot="footer">

        <div class="w-100 d-flex flex-wrap justify-content-between gap-2">

            <button class="btn btn-primary">Custom Button</button>

            <!-- Add more custom footer elements here -->

        </div>

    </t>

</xpath>

Hope it helps