feat: Update notification form to collect name and phone and submit data via webhook, replacing Firebase email submission.

index.html

@@ -92,16 +92,19 @@
         </center>
       </div>
     </div>
-    <div class="row mt-3 text-center">
+    <form class="text-center" id="notifs-form">
-      <div class="col-12">
+      <div class="row justify-content-center">
-        <form class="form-inline" style="display: inline" id="notifs-form">
+        <div class="col-md-4 col-10">
-          <input type="email" class="form-control" id="notifs-form-input" aria-describedby="emailHelp"
+          <input type="text" class="form-control mb-2 text-center" id="notifs-form-name" placeholder="Nombre">
-            placeholder="Déjanos tu número">
+          <input type="tel" class="form-control mb-2 text-center" id="notifs-form-phone" aria-describedby="phoneHelp"
-          <button type="button" class="btn btn-dark mt-2 mt-md-0" id="notifs-form-btn">¡Te avisamos!</button>
+            placeholder="Teléfono">
-          <label class="notified-label"></label>
+          <button type="button" class="btn btn-dark btn-block" id="notifs-form-btn">¡Te avisamos!</button>
-        </form>
+        </div>
       </div>
-    </div>
+      <label class="notified-label"></label>
+    </form>
+  </div>
+  </div>
   </div>
   <br>
   <br>
@@ -134,6 +137,7 @@
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
   <script src="js/require.js" type="text/javascript"></script>
   <script src="js/countdown.js" type="text/javascript"></script>
+  <script src="js/form_submission.js" type="text/javascript"></script>
 
 </body>
 

js/firebase_configuration.js

@@ -1,54 +0,0 @@
-// Initialize Firebase
-function validateEmail(email) {
-    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-    return re.test(String(email).toLowerCase());
-}
-
-var config = {
-    apiKey: "<YOUR FIREBASE API KEY>",
-    authDomain: "<FIREBASE AUTH DOMAIN>",
-    databaseURL: "<DB URL>",
-    projectId: "<PROJECT ID>",
-    storageBucket: "<STRORAGE BUKCET>",
-    messagingSenderId: "<MESSAGE SENDER ID>"
-};
-firebase.initializeApp(config);
-var db = firebase.firestore();
-db.settings({
-    timestampsInSnapshots: true
-});
-
-$(document).ready(function () {
-
-    $('#notifs-form-btn').click(function (e) {
-        var is_present = false;
-        email = $('#notifs-form-input').val();
-        if (validateEmail(email)) {
-            db.collection('Emails').get().then(function (qs) {
-                qs.forEach(function (element) {
-                    if (element.data()['ID'] == email) {
-                        is_present = true;
-                    }
-                });
-
-                if (is_present == false) {
-                    db.collection("Emails").add({
-                        'ID': email,
-                    })
-                        .then(function (docRef) {
-                            console.log("Document written with ID: ", docRef.id);
-                            $("#notifs-form-btn").text("Notified!");
-                        })
-                        .catch(function (error) {
-                            console.error("Error adding document: ", error);
-                        });
-                }
-            });
-
-        }
-        else {
-            alert('Invalid Email');
-        }
-    });
-
-});

js/form_submission.js

@@ -0,0 +1,40 @@
+$(document).ready(function () {
+
+    $('#notifs-form-btn').click(function (e) {
+        var name = $('#notifs-form-name').val();
+        var phone = $('#notifs-form-phone').val();
+
+        if (name && phone) {
+            var data = {
+                name: name,
+                phone: phone
+            };
+
+            $.ajax({
+                url: 'https://flows.soul23.cloud/webhook/Ul6upjlKqQQ79rDgd8XKOm',
+                type: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify(data),
+                success: function (response) {
+                    console.log("Webhook sent successfully", response);
+                    $("#notifs-form-btn").text("gracias :)");
+                    $("#notifs-form-btn").prop("disabled", true);
+                    alert("¡Gracias! Hemos recibido tus datos.");
+                },
+                error: function (xhr, status, error) {
+                    console.error("Error sending webhook", error);
+                    var errorMessage = "Hubo un error al enviar tus datos.";
+                    if (xhr.responseJSON && xhr.responseJSON.message) {
+                        errorMessage += "\n" + xhr.responseJSON.message;
+                    } else if (xhr.responseText) {
+                        errorMessage += "\n" + xhr.responseText;
+                    }
+                    alert(errorMessage);
+                }
+            });
+        } else {
+            alert('jejeje, lo haremos mas fácil en el futuro');
+        }
+    });
+
+});