Newsletter Endpoint with service for wp:db and mailerlite:db and other small functions for supported this resolve

build/render.php

@@ -1,4 +1,6 @@
-<?php ?>
+<?php 
+
+?>
 
 <style>
     .tsu-newsletter-block-input-custom-class {
@@ -21,45 +23,113 @@
         font-size: small;
         color: grey;
     }
+
+    .newsletter-success {
+        font-size: 75%;
+        color: green;
+    }
+
+    .newsletter-error {
+        font-size: 75%;
+        color: red;
+    }
 </style>
 
 <script>
-    function saveEmail(event) {
-        console.log(event);
-    }
+    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 === 400) {
+                            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', 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 = 'Wprowadź poprawny adres e-mail.';
+                    newElement.textContent = '<?php _e('Wprowadź poprawny adres e-mail.', 'aiac'); ?>';
+                    parent.appendChild(newElement);
+                }
+            }
+        }
+    });
 </script>
 
 
-<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"
-    style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--70)">
-    <div
-        class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-layout-15 wp-block-columns-is-layout-flex">
-        <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
-            <p class="has-x-large-font-size" style="line-height:0">
-                Newsletter
-            </p>
-        </div>
-    </div>
+<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
+    <div id="messages">
 
-    <div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-layout-16 wp-block-columns-is-layout-flex"
-        style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)">
-        <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
-            <p>
-                Zapisz się do naszego newslettera i otrzymuj aktualności dotyczące realizowanych przez nas projektów.
-            </p>
-        </div>
-        <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
-            <form class="is-layout-flex tsu-newsletter-block-layout-right-wrapper">
-                <input type="text" class="tsu-newsletter-block-input-custom-class" placeholder="Adres e-mail..."
-                    style="flex-grow: 3">
-                <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 class="wp-block-button__link wp-element-button" style="border-radius:12px">
-                            → ZAPISUJĘ SIĘ
-                        </a>
-                    </div>
-                </div>
-            </form>
-        </div>
     </div>
+    <form id="newsletter-form" class="is-layout-flex tsu-newsletter-block-layout-right-wrapper">
+        <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>

src/render.php

@@ -1,4 +1,6 @@
-<?php ?>
+<?php 
+
+?>
 
 <style>
     .tsu-newsletter-block-input-custom-class {
@@ -21,45 +23,113 @@
         font-size: small;
         color: grey;
     }
+
+    .newsletter-success {
+        font-size: 75%;
+        color: green;
+    }
+
+    .newsletter-error {
+        font-size: 75%;
+        color: red;
+    }
 </style>
 
 <script>
-    function saveEmail(event) {
-        console.log(event);
-    }
+    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 === 400) {
+                            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', 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 = 'Wprowadź poprawny adres e-mail.';
+                    newElement.textContent = '<?php _e('Wprowadź poprawny adres e-mail.', 'aiac'); ?>';
+                    parent.appendChild(newElement);
+                }
+            }
+        }
+    });
 </script>
 
 
-<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"
-    style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--70)">
-    <div
-        class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-layout-15 wp-block-columns-is-layout-flex">
-        <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
-            <p class="has-x-large-font-size" style="line-height:0">
-                Newsletter
-            </p>
-        </div>
-    </div>
+<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
+    <div id="messages">
 
-    <div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-layout-16 wp-block-columns-is-layout-flex"
-        style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)">
-        <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
-            <p>
-                Zapisz się do naszego newslettera i otrzymuj aktualności dotyczące realizowanych przez nas projektów.
-            </p>
-        </div>
-        <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
-            <form class="is-layout-flex tsu-newsletter-block-layout-right-wrapper">
-                <input type="text" class="tsu-newsletter-block-input-custom-class" placeholder="Adres e-mail..."
-                    style="flex-grow: 3">
-                <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 class="wp-block-button__link wp-element-button" style="border-radius:12px">
-                            → ZAPISUJĘ SIĘ
-                        </a>
-                    </div>
-                </div>
-            </form>
-        </div>
     </div>
+    <form id="newsletter-form" class="is-layout-flex tsu-newsletter-block-layout-right-wrapper">
+        <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>

tsu_newsletter_block.php

@@ -3,6 +3,19 @@
 // Register Newsletter Custom Post Type
 require 'tsu_newsletter_custom_post.php';
 
+// Create Endpoint for Ajax Request with email data from Newsletter
+require 'tsu_newsletter_create_api_endpoint.php';
+
+// i18n strings
+function lang_strings() {
+    do_action('wpml_register_single_string', 'aiac', 'Wprowadź poprawny adres e-mail.', 'Wprowadź poprawny adres e-mail.', false, 'pl');
+    do_action('wpml_register_single_string', 'aiac', 'Adres e-mail...', 'Adres e-mail...', false, 'pl');
+    do_action('wpml_register_single_string', 'aiac', 'ZAPISUJĘ SIĘ', 'ZAPISUJĘ SIĘ', false, 'pl');
+    do_action('wpml_register_single_string', 'aiac', 'Nie udało się nawiązać połączenia.', 'Nie udało się nawiązać połączenia.', false, 'pl');
+}
+
+add_action('init', 'lang_strings');
+
 // Register Custom Block Category
 add_filter( 'block_categories_all',  function($categories) {
     

tsu_newsletter_create_api_endpoint.php

@@ -0,0 +1,110 @@
+<?php
+
+function aiac_tsu_register_string()
+{
+    do_action('wpml_register_single_string', 'aiac', 'Twój adres został zapisany poprawnie.', 'Twój adres został zapisany poprawnie.', false, 'pl');
+    do_action('wpml_register_single_string', 'aiac', 'Ten adres e-mail już istnieje.', 'Ten adres e-mail już istnieje.', false, 'pl');
+}
+
+add_action('init', 'aiac_tsu_register_string');
+
+function add_email_from_newsletter($data)
+{
+
+    $email = sanitize_email($data["email"]);
+
+    // $hasEmail = get_posts([
+    //     "post_type" => "email",
+    //     "post_status" => "publish"
+    // ]);
+
+    $isAlredy = get_page_by_title($email, OBJECT, 'email');
+
+    // są dwa miejsca zapisu danych, wystarczy że w jednym miejscu ktoś usunie coś i już dane są rozsynchronizowane
+    // czy zapisujemy w jednym miejscu czy robimy mechanizm do synchronizacji ?
+
+    if ($isAlredy > 0) {
+        wp_send_json([
+            "message" => __('Ten adres e-mail już istnieje.', 'aiac')
+        ], 400);
+    } else {
+        try {
+            $postarr = [
+                "post_content" => $data["email"],
+                "post_title" => $data["email"],
+                "post_type" => "email",
+                "post_status" => "publish"
+            ];
+
+            wp_insert_post($postarr, true);
+
+
+            // cURL do zapisu e-maila do mailerlite
+            $url = "https://connect.mailerlite.com/api/subscribers";
+            $token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiI0IiwianRpIjoiZTQ3OGVmNTY1OWJhYWUzYzlmNTE1YzIzYjFkMmJkMGNmNmI4M2QyNDdmN2Y2NzY1ZWNmOTQ4OTMwMWU5OWQyZGM5MjU5OTI4NGIyZjE3NWYiLCJpYXQiOjE3MDE3ODYyMDkuMTQ1MTQ2LCJuYmYiOjE3MDE3ODYyMDkuMTQ1MTQ4LCJleHAiOjQ4NTc0NTk4MDkuMTM1NzQ4LCJzdWIiOiI3NDEyMDMiLCJzY29wZXMiOltdfQ.IzhP03Vor3BwpRevuidF69b7DLo2hkBFzKL4-ZEBe45I92kZUEEEVq6BBZz7mi9bMUi3MuxA4yoE3KydjWnIo1c59-GEVyxieQWwNIFixWmGUnjRARKt9lcBcd0Yo5hIgoJmQefLTZ0TGj1K97tXA__bFZgVJD5r70jeZkIrUY9un3nXYJkj9t0JXfWJnkICo7D1aIcQnFRFbI0w4e4tasFLv6hHFiR-WO0jrHnjX7jNgtFIy0MwmMaV9LLbk_7z3_THPLVOg7EHgixOVD3b9xxcextaH-B_1e1qKWpDQhofm1GmZn3GNjwrw-mAT6qZ9WmccQuVsr1VuIubW1CvgcBphS8OCYgiT-lB3GVMmOKeGs2Knp7_hMUNx_Imsv-yBQlYaZYEP2y4f2-AhZRwT3g3XcLsmI9OjjbGUxf0zTn6atYXZcA2lcSzQWdFrhW63hxQz42EOzV1L7xLqLBUd6MTAgByPIQGwtFJD-evrsglqtByj8CIsGbE83O8C-F47l1hYQTXbB-mwi1Q4KQFmT0b617OQ_nRR74_54Y27U74bBXnnWF7wch7THWRYWBkJOk5RLwagDpOdafknKdiIYPzvBK2Uvh9FVrCE4e0QWUDTG16iqudtGksLv_NeaAcERBSe0AKuujIcqd5kXfriyyKL4rEye-r3OuSDIM7OaU";
+
+
+
+            // Dane do wysłania
+            $data = array(
+                "email" => $data["email"],
+                // Czy te dane są wymagane ?
+                // "fields" => array(
+                //     "name" => "Dummy",
+                //     "last_name" => "Testerson"
+                // ),
+                // "groups" => array(
+                //     "106731061900215448"
+                // )
+            );
+
+            // Inicjalizacja sesji cURL
+            $ch = curl_init();
+
+            // Ustawienia opcji cURL
+            curl_setopt($ch, CURLOPT_URL, $url);
+            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+            curl_setopt($ch, CURLOPT_POST, true);
+            curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
+            curl_setopt(
+                $ch,
+                CURLOPT_HTTPHEADER,
+                array(
+                    'Content-Type: application/json',
+                    'Accept: application/json',
+                    'Authorization: Bearer ' . $token
+                )
+            );
+
+            // Wykonanie żądania
+            $response = curl_exec($ch);
+
+            // // Sprawdzenie błędów
+            // if (curl_errno($ch)) {
+            //     echo 'Błąd cURL: ' . curl_error($ch);
+            // }
+
+            curl_close($ch);
+
+            wp_send_json([
+                "message" => __('Twój adres został zapisany poprawnie.', 'aiac'),
+                // "mailerliteResponse" => $response // only for test
+            ], 201);
+        } catch (Exception $e) {
+            wp_send_json_error($e->getMessage());
+        }
+    }
+
+    wp_die();
+}
+
+add_action("rest_api_init", function () {
+    register_rest_route(
+        "tsu/v1",
+        "/newsletter/add_email",
+        array(
+            "methods" => "POST",
+            "callback" => "add_email_from_newsletter"
+        )
+    );
+});

tsu_newsletter_custom_post.php

@@ -35,7 +35,7 @@ function register_custom_post_type() {
         'supports'           => array('title', 'editor'),
     );
 
-    register_post_type('project', $args);
+    register_post_type('email', $args);
 
     // Dodaj akcję, aby zarejestrować niestandardowe pola meta
     add_action('add_meta_boxes', 'add_email_meta_box');