From 229c51def41048a1c06a6d962892d6f8703fad61 Mon Sep 17 00:00:00 2001
From: Uku Taht <Uku.taht@gmail.com>
Date: Thu, 7 Jan 2021 15:22:51 +0200
Subject: [PATCH] In app release notes (#554)

* Remove warning

* Add in-app release notes

* Update changelog url
---
 assets/js/app.js                              | 42 +++++++++++++++++++
 .../templates/layout/app.html.eex             |  3 ++
 2 files changed, 45 insertions(+)

diff --git a/assets/js/app.js b/assets/js/app.js
index ea7e58f3c..4232f5968 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -52,3 +52,45 @@ if (registerForm) {
     plausible('Signup', {callback: submitForm});
   })
 }
+
+const changelogNotification = document.getElementById('changelog-notification')
+
+if (changelogNotification) {
+  showChangelogNotification(changelogNotification)
+
+  fetch('https://plausible.io/changes.txt', {headers: {'Content-Type': 'text/plain'}})
+    .then((res) => res.text())
+    .then((res) => {
+      localStorage.lastChangelogUpdate = new Date(res).getTime()
+      showChangelogNotification(changelogNotification)
+  })
+}
+
+function showChangelogNotification(el) {
+  const lastUpdated = Number(localStorage.lastChangelogUpdate)
+  const lastChecked = Number(localStorage.lastChangelogClick)
+
+  if (lastChecked) {
+    const hasNewUpdateSinceLastClicked = lastUpdated > lastChecked
+    const notOlderThanThreeDays = Date.now() - lastUpdated <  1000 * 60 * 60 * 72
+    if (hasNewUpdateSinceLastClicked && notOlderThanThreeDays) {
+      el.innerHTML = `
+        <a href="https://plausible.io/changelog" target="_blank">
+          <svg class="w-5 h-5 text-gray-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path>
+          </svg>
+          <svg class="w-4 h-4 text-pink-500 absolute" style="left: 14px; top: 2px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="8" cy="8" r="4" fill="currentColor" />
+          </svg>
+        </a>
+        `
+      const link = el.getElementsByTagName('a')[0]
+      link.addEventListener('click', function() {
+        localStorage.lastChangelogClick = Date.now()
+        setTimeout(() => { link.remove() }, 100)
+      })
+    }
+  } else {
+    localStorage.lastChangelogClick = Date.now()
+  }
+}
diff --git a/lib/plausible_web/templates/layout/app.html.eex b/lib/plausible_web/templates/layout/app.html.eex
index 1ac1acb7c..760b171a3 100644
--- a/lib/plausible_web/templates/layout/app.html.eex
+++ b/lib/plausible_web/templates/layout/app.html.eex
@@ -50,6 +50,9 @@
                       </div>
                     </div>
                   </li>
+                  <%= if @conn.assigns[:current_user].email in ["me@markosaric.com", "uku@plausible.io"] do  %>
+                    <li id="changelog-notification" class="relative py-2"></li>
+                  <% end %>
                 </ul>
                 <%  Keyword.fetch!(Application.get_env(:plausible, :selfhost), :disable_authentication) -> %>
                   <ul class="flex" x-show="!document.cookie.includes('logged_in=true')">