woocommerce-paypal-payments/modules/ppcp-paylater-configurator/resources/js/paylater-configurator.js

document.addEventListener('DOMContentLoaded', () => {
    const form = document.querySelector('#mainform');
    const table = form.querySelector('.form-table');
    const headingRow = table.querySelector('#field-pay_later_messaging_heading');
    const saveChangesButton = form.querySelector('.woocommerce-save-button');
    const publishButtonClassName = PcpPayLaterConfigurator.publishButtonClassName;

    const tempContainer = document.createElement('div');
    tempContainer.innerHTML = `<div id='messaging-configurator'></div>`;

    // Get the new row element from the container
    const newRow = tempContainer.firstChild;

    // Insert the new row after the headingRow
    headingRow.parentNode.insertBefore(newRow, headingRow.nextSibling);

    let isSaving = false; // Flag variable to track whether saving is in progress

    saveChangesButton.addEventListener('click', () => {
        // Check if saving is not already in progress
        if (!isSaving) {
            isSaving = true; // Set flag to indicate saving is in progress

            // Trigger the click event on the publish button
            form.querySelector('.' + publishButtonClassName).click();
            saveChangesButton.click(); // Trigger click event on saveChangesButton
            isSaving = false; // Reset flag when saving is complete
        }
    });

    // Fetch the configuration settings
    fetch(PcpPayLaterConfigurator.ajax.get_config.endpoint, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            action: 'ppc-get-message-config',
            nonce: PcpPayLaterConfigurator.ajax.get_config.nonce
        }),
    })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                const config = data.data;

                merchantConfigurators.Messaging({
                    config: config,
                    merchantClientId: PcpPayLaterConfigurator.merchantClientId,
                    partnerClientId: PcpPayLaterConfigurator.partnerClientId,
                    partnerName: 'WooCommerce',
                    bnCode: 'Woo_PPCP',
                    placements: ['cart', 'checkout', 'product', 'shop', 'home', 'custom_placement'],
                    styleOverrides: {
                        button: publishButtonClassName,
                        header: PcpPayLaterConfigurator.headerClassName,
                        subheader: PcpPayLaterConfigurator.subheaderClassName
                    },
                    onSave: data => {
                        fetch(PcpPayLaterConfigurator.ajax.save_config.endpoint, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            credentials: 'same-origin',
                            body: JSON.stringify({
                                nonce: PcpPayLaterConfigurator.ajax.save_config.nonce,
                                config: data,
                            }),
                        });
                    }
                });
            } else {
                console.error('Failed to fetch configuration:', data);
            }
        })
        .catch(error => {
            console.error('Error fetching configuration:', error);
        });
});