From f803491fa304d57cdcc4769ab6b0dbb6e2ced342 Mon Sep 17 00:00:00 2001
From: Nathan Chapman <contact@nathanjchapman.com>
Date: Tue, 5 Apr 2022 11:23:35 -0600
Subject: [PATCH] Add modal menu for newsletter

---
 src/static/scripts/cookie.js |  4 +--
 src/static/scripts/index.js  | 37 ++++++++++++++++++++++++
 src/static/styles/main.css   | 54 ++++++++++++++++++++++++++++++++++++
 src/templates/base.html      | 15 +++++++++-
 4 files changed, 107 insertions(+), 3 deletions(-)
 create mode 100644 src/static/scripts/index.js

diff --git a/src/static/scripts/cookie.js b/src/static/scripts/cookie.js
index fcc94bc..8e2378d 100644
--- a/src/static/scripts/cookie.js
+++ b/src/static/scripts/cookie.js
@@ -16,9 +16,9 @@ export function getCookie(name) {
 
 const twentyYears = 20 * 365 * 24 * 60 * 60 * 1000
 
-export function setCookie(name, value) {
+export function setCookie(name, value, expiration=twentyYears) {
   const body = [ name, value ].map(encodeURIComponent).join("=")
-  const expires = new Date(Date.now() + twentyYears).toUTCString()
+  const expires = new Date(Date.now() + expiration).toUTCString()
   const cookie = `${body}; domain=; path=/; SameSite=Lax; expires=${expires}`
   document.cookie = cookie
 }
diff --git a/src/static/scripts/index.js b/src/static/scripts/index.js
new file mode 100644
index 0000000..e7820e6
--- /dev/null
+++ b/src/static/scripts/index.js
@@ -0,0 +1,37 @@
+import { getCookie, setCookie } from "./cookie.js"
+
+// Get the modal
+const modal = document.querySelector(".modal-menu");
+
+// Get the <span> element that closes the modal
+const closeBtn = document.querySelector(".close-modal");
+
+const oneDay = 1 * 24 * 60 * 60 * 1000
+
+// When the user clicks on <span> (x), close the modal
+closeBtn.addEventListener("click", event => {
+    modal.style.display = "none";
+    setCookie('newsletter-modal', 'true', oneDay)
+})
+
+const scrollFunction = () => {
+    let modalDismissed = getCookie('newsletter-modal')
+    console.log(modalDismissed)
+    if (modalDismissed != 'true') {
+        if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
+            modal.style.display = "block";
+        }
+    }
+}
+
+window.onscroll = () => {
+    scrollFunction();
+};
+
+// When the user clicks anywhere outside of the modal, close it
+window.addEventListener("click", event => {
+    if (event.target == modal) {
+        modal.style.display = "none";
+    }
+    setCookie('newsletter-modal', 'true', oneDay)
+});
diff --git a/src/static/styles/main.css b/src/static/styles/main.css
index 3dffd95..ab1aea1 100644
--- a/src/static/styles/main.css
+++ b/src/static/styles/main.css
@@ -202,6 +202,60 @@ img {
     max-width: 100%;
 }
 
+
+
+
+
+/* MODAL MENU */
+.modal-menu {
+    display: none;
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content/Box */
+.modal-menu__content {
+    background-color: #fefefe;
+    margin: 25vh auto;
+    padding: 20px;
+    border: 1px solid #888;
+    max-width: 40rem;
+}
+
+.modal-menu__form {
+
+}
+
+.modal-menu__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+}
+
+/* The Close Button */
+.close-modal {
+    color: #aaa;
+    font-size: 2rem;
+    line-height: 0;
+    font-weight: bold;
+}
+
+.close-modal:hover,
+.close-modal:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+
+
 .fair_trade--small {
     max-width: 4rem;
     vertical-align: middle;
diff --git a/src/templates/base.html b/src/templates/base.html
index 70d3d32..74d7dab 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -18,11 +18,24 @@
     {% endcompress %}
 
     <script type="module" defer src="{% static 'scripts/initializers/timezone.js' %}"></script>
+    <script type="module" defer src="{% static 'scripts/index.js' %}"></script>
 
     {% block head %}
     {% endblock %}
 </head>
 <body>
+<div class="modal-menu">
+    <div class="modal-menu__content">
+        <div class="modal-menu__header">
+            <h4>Sign up for our newsletter</h4>
+            <span class="close-modal">&times;</span>
+        </div>
+        <div class="modal-menu__form">
+            <div class="_form_1"></div>
+        </div>
+    </div>
+</div>
+
 <header class="site__header">
     <div>
         <a href="{% url 'storefront:product-list' %}"><img class="site-logo" src="{% static 'images/site_logo.svg' %}" alt=""></a>
@@ -69,7 +82,7 @@
         <div>
             <h4>Problem with your order?<br>Have a question?</h4>
             <p>Please contact us, we’re happy to help you over the phone at <a href="tel:+13603855856">(360) 385-5856</a> between 8:00 am and 10:00 pm Pacific Time.</p>
-            <div class="_form_1"></div><script src="https://bltc999.activehosted.com/f/embed.php?id=1" type="text/javascript" charset="utf-8"></script>
+            <div class="_form_1"></div><script src="https://ptcoffee.activehosted.com/f/embed.php?id=1" type="text/javascript" charset="utf-8"></script>
         </div>
     </div>
     <div class="site__copyright">