From 64a49f8d8eb394254594eccfff4febb4712dc8ea Mon Sep 17 00:00:00 2001
From: George <31376482+george-gca@users.noreply.github.com>
Date: Thu, 26 Dec 2024 16:49:45 -0300
Subject: [PATCH] Added missing newsletter components (#2913)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: George Araújo <george.gcac@gmail.com>
---
 _includes/distill_scripts.liquid |   4 ++
 _includes/footer.liquid          |   2 +-
 _includes/newsletter.liquid      |  68 ++++++++++++++++++++
 _includes/related_posts.liquid   |   2 +-
 _includes/scripts.liquid         |   4 ++
 assets/js/newsletter.js          | 105 +++++++++++++++++++++++++++++++
 6 files changed, 183 insertions(+), 2 deletions(-)
 create mode 100644 _includes/newsletter.liquid
 create mode 100644 assets/js/newsletter.js

diff --git a/_includes/distill_scripts.liquid b/_includes/distill_scripts.liquid
index df4104c33bf6..82bf5936337a 100644
--- a/_includes/distill_scripts.liquid
+++ b/_includes/distill_scripts.liquid
@@ -278,3 +278,7 @@
   <script src="{{ '/assets/js/search-data.js' | relative_url }}"></script>
   <script src="{{ '/assets/js/shortcut-key.js' | relative_url | bust_file_cache }}"></script>
 {% endif %}
+
+{% if site.newsletter.enabled %}
+  <script defer src="{{ '/assets/js/newsletter.js' | relative_url | bust_file_cache }}"></script>
+{% endif %}
diff --git a/_includes/footer.liquid b/_includes/footer.liquid
index feecc1bb0f7b..102af14c568d 100644
--- a/_includes/footer.liquid
+++ b/_includes/footer.liquid
@@ -16,7 +16,7 @@
 {% else %}
   <footer class="sticky-bottom mt-5" role="contentinfo">
     {% if site.newsletter.enabled %}
-      {% include scripts/newsletter.liquid %}
+      {% include newsletter.liquid %}
     {% endif %}
 
     <div class="container">
diff --git a/_includes/newsletter.liquid b/_includes/newsletter.liquid
new file mode 100644
index 000000000000..ebceefcbc10f
--- /dev/null
+++ b/_includes/newsletter.liquid
@@ -0,0 +1,68 @@
+<div
+  class="newsletter-form-container"
+  {% if include.center %}
+    style="margin: 20px"
+  {% endif %}
+>
+  <form
+    class="newsletter-form"
+    action="https://app.loops.so/api/newsletter-form/{{ site.newsletter.endpoint }}"
+    method="POST"
+    style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
+  >
+    <input
+      class="newsletter-form-input"
+      name="newsletter-form-input"
+      type="email"
+      placeholder="user@example.com"
+      required=""
+    >
+
+    <button
+      type="submit"
+      class="newsletter-form-button"
+      style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
+    >
+      subscribe
+    </button>
+
+    <button
+      type="button"
+      class="newsletter-loading-button"
+      style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
+    >
+      Please wait...
+    </button>
+  </form>
+
+  <div
+    class="newsletter-success"
+    style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
+  >
+    <p class="newsletter-success-message">You're subscribed!</p>
+  </div>
+
+  <div
+    class="newsletter-error"
+    style="justify-content: {% if include.left %}flex-start{% elsif include.right %}flex-end{% else %}center{% endif %}"
+  >
+    <p class="newsletter-error-message">Oops! Something went wrong, please try again</p>
+  </div>
+
+  <button
+    class="newsletter-back-button"
+    type="button"
+    onmouseout='this.style.textDecoration="none"'
+    onmouseover='this.style.textDecoration="underline"'
+  >
+    &larr; Back
+  </button>
+</div>
+
+<noscript>
+  <style>
+    .newsletter-form-container {
+      display: none;
+    }
+  </style>
+</noscript>
diff --git a/_includes/related_posts.liquid b/_includes/related_posts.liquid
index 08d1b8851d39..f6952015a56e 100644
--- a/_includes/related_posts.liquid
+++ b/_includes/related_posts.liquid
@@ -18,5 +18,5 @@
 {% endfor %}
 {% if site.newsletter.enabled and site.footer_fixed %}
   <p class="mb-2" style="margin-top: 1.5rem !important">Subscribe to be notified of future articles:</p>
-  {% include scripts/newsletter.liquid left=true %}
+  {% include newsletter.liquid left=true %}
 {% endif %}
diff --git a/_includes/scripts.liquid b/_includes/scripts.liquid
index e1a2a8a842e2..7bbd07166933 100644
--- a/_includes/scripts.liquid
+++ b/_includes/scripts.liquid
@@ -310,3 +310,7 @@
   <script src="{{ '/assets/js/search-data.js' | relative_url }}"></script>
   <script src="{{ '/assets/js/shortcut-key.js' | relative_url | bust_file_cache }}"></script>
 {% endif %}
+
+{% if site.newsletter.enabled %}
+  <script defer src="{{ '/assets/js/newsletter.js' | relative_url | bust_file_cache }}"></script>
+{% endif %}
diff --git a/assets/js/newsletter.js b/assets/js/newsletter.js
new file mode 100644
index 000000000000..679e42bda90e
--- /dev/null
+++ b/assets/js/newsletter.js
@@ -0,0 +1,105 @@
+function submitHandler(event) {
+  event.preventDefault();
+  var container = event.target.parentNode;
+  var form = container.querySelector(".newsletter-form");
+  var formInput = container.querySelector(".newsletter-form-input");
+  var success = container.querySelector(".newsletter-success");
+  var errorContainer = container.querySelector(".newsletter-error");
+  var errorMessage = container.querySelector(".newsletter-error-message");
+  var backButton = container.querySelector(".newsletter-back-button");
+  var submitButton = container.querySelector(".newsletter-form-button");
+  var loadingButton = container.querySelector(".newsletter-loading-button");
+
+  const rateLimit = () => {
+    errorContainer.style.display = "flex";
+    errorMessage.innerText = "Too many signups, please try again in a little while";
+    submitButton.style.display = "none";
+    formInput.style.display = "none";
+    backButton.style.display = "block";
+  };
+
+  // Compare current time with time of previous sign up
+  var time = new Date();
+  var timestamp = time.valueOf();
+  var previousTimestamp = localStorage.getItem("loops-form-timestamp");
+
+  // If last sign up was less than a minute ago
+  // display error
+  if (previousTimestamp && Number(previousTimestamp) + 60000 > timestamp) {
+    rateLimit();
+    return;
+  }
+  localStorage.setItem("loops-form-timestamp", timestamp);
+
+  submitButton.style.display = "none";
+  loadingButton.style.display = "flex";
+
+  var formBody = "userGroup=&email=" + encodeURIComponent(formInput.value);
+  fetch(event.target.action, {
+    method: "POST",
+    body: formBody,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+  })
+    .then((res) => [res.ok, res.json(), res])
+    .then(([ok, dataPromise, res]) => {
+      if (ok) {
+        // If response successful
+        // display success
+        success.style.display = "flex";
+        form.reset();
+      } else {
+        // If response unsuccessful
+        // display error message or response status
+        dataPromise.then((data) => {
+          errorContainer.style.display = "flex";
+          errorMessage.innerText = data.message ? data.message : res.statusText;
+        });
+      }
+    })
+    .catch((error) => {
+      // check for cloudflare error
+      if (error.message === "Failed to fetch") {
+        rateLimit();
+        return;
+      }
+      // If error caught
+      // display error message if available
+      errorContainer.style.display = "flex";
+      if (error.message) errorMessage.innerText = error.message;
+      localStorage.setItem("loops-form-timestamp", "");
+    })
+    .finally(() => {
+      formInput.style.display = "none";
+      loadingButton.style.display = "none";
+      backButton.style.display = "block";
+    });
+}
+function resetFormHandler(event) {
+  var container = event.target.parentNode;
+  var formInput = container.querySelector(".newsletter-form-input");
+  var success = container.querySelector(".newsletter-success");
+  var errorContainer = container.querySelector(".newsletter-error");
+  var errorMessage = container.querySelector(".newsletter-error-message");
+  var backButton = container.querySelector(".newsletter-back-button");
+  var submitButton = container.querySelector(".newsletter-form-button");
+
+  success.style.display = "none";
+  errorContainer.style.display = "none";
+  errorMessage.innerText = "Oops! Something went wrong, please try again";
+  backButton.style.display = "none";
+  formInput.style.display = "flex";
+  submitButton.style.display = "flex";
+}
+
+var formContainers = document.getElementsByClassName("newsletter-form-container");
+
+for (var i = 0; i < formContainers.length; i++) {
+  var formContainer = formContainers[i];
+  var handlersAdded = formContainer.classList.contains("newsletter-handlers-added");
+  if (handlersAdded) continue;
+  formContainer.querySelector(".newsletter-form").addEventListener("submit", submitHandler);
+  formContainer.querySelector(".newsletter-back-button").addEventListener("click", resetFormHandler);
+  formContainer.classList.add("newsletter-handlers-added");
+}