tsu_newsletter_block/build/render.php

<?php 

?>

<style>
    .tsu-newsletter-block-input-custom-class {
        border-color: rgba(177, 48, 65, 1);
        border-radius: 12px;
        padding: 12px;
        border-style: solid;
    }

    .tsu-newsletter-block-input-custom-class:focus {
        background-color: rgba(177, 48, 65, 0.1);
    }

    .tsu-newsletter-block-layout-right-wrapper {
        display: flex;
        justify-content: space-between;
    }

    .tsu-newsletter-privacy {
        font-size: small;
        color: grey;
    }

    .newsletter-success {
        font-size: 75%;
        color: green;
    }

    .newsletter-error {
        font-size: 75%;
        color: red;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var submitNewsletterForm = document.getElementById('submit-newsletter-form');

        if (submitNewsletterForm) {
            submitNewsletterForm.addEventListener('click', function (e) {
                e.preventDefault();

                submitForm();
            });

            function validateEmail(email) {
                var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

                return emailRegex.test(email);
            }

            function submitForm() {
                var email = document.getElementById('email').value;

                if (validateEmail(email)) {
                    // ok

                    var data = {
                        "email": email
                    };

                    var dataToSend = JSON.stringify(data);

                    var xhr = new XMLHttpRequest();

                    xhr.addEventListener('load', function () {
                        //tutaj możemy też sprawdzać inne statusy - np. 404, 500

                        var parent = document.getElementById('messages');
                        parent.innerHTML = '';
                        var newElement = document.createElement('span');

                        if (xhr.status === 201) {
                            newElement.id = 'newsletter-success';
                            newElement.className = 'newsletter-success';
                            var responseJson = JSON.parse(xhr.response);
                            newElement.textContent = responseJson.message;

                        }

                        if (xhr.status === 200) {
                            newElement.id = 'newsletter-error';
                            newElement.className = 'newsletter-error';
                            var responseJson = JSON.parse(xhr.response);
                            newElement.textContent = responseJson.message;
                        }

                        parent.appendChild(newElement);
                    });

                    xhr.addEventListener("error", () => {
                        console.log('<?php _e('Nie udało się nawiązać połączenia.', 'aiac'); ?>');
                    });

                    xhr.open('POST', 'https://tosieuda.org/wp-json/tsu/v1/newsletter/add_email?lang=<?php echo ICL_LANGUAGE_CODE ?>', true);
                    xhr.setRequestHeader("Content-Type", "application/json");
                    xhr.send(dataToSend);

                } else {
                    // stop - walidacja
                    var parent = document.getElementById('messages');
                    parent.innerHTML = '';
                    var newElement = document.createElement('span');
                    newElement.id = 'newsletter-error';
                    newElement.className = 'newsletter-error';
                    newElement.textContent = '<?php _e('Wprowadź poprawny adres e-mail.', 'aiac'); ?>';
                    parent.appendChild(newElement);
                }
            }
        }
    });
</script>


<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
    <div id="messages">

    </div>
    <form id="newsletter-form" class="is-layout-flex tsu-newsletter-block-layout-right-wrapper">
    <label for="email" style="display: none;">Adres e-mail</label>
        <input id="email" name="email" type="email" class="tsu-newsletter-block-input-custom-class"
            placeholder="<?php _e('Adres e-mail...', 'aiac'); ?>" style="flex-grow: 3" required>
        <div class="wp-block-buttons wp-block-buttons-is-layout-flex" style="flex-grow: 1">
            <div class="wp-block-button has-custom-font-size has-small-font-size">
                <a href="#" id="submit-newsletter-form" class="wp-block-button__link wp-element-button"
                    style="border-radius:12px">
                    → <?php _e('ZAPISUJĘ SIĘ', 'aiac'); ?>
                </a>
            </div>
        </div>
    </form>
</div>