feat(cookie notification): added the we use cookies banner (#180)

* feat(we use cookies): added the we use cookies banner

BTCOM-2547

* feat(requested updates): used more global styles and put the javascript in it's own module

BTCOM-2547

* fix(snippet placement): adjusted snippet placement

* chore(requested changes): made the requested changes and added the learn more link

* chore(console): got rid of console

src/assets/scripts/layout/app.js

@@ -6,6 +6,7 @@ import randomImages from '../util/random-images';
 import accesibleNav from '../util/accessible-nav';
 import truncator from '../util/truncator';
 import responsiveVideos from '../util/responsive-videos';
+import cookieNotification from '../util/cookie-notification';
 
 import '../../styles/app.scss';
 
@@ -35,6 +36,7 @@ var page = {
         page.el.$document.trigger('bt:ready');
         page.el.$body.addClass('ready');
         page.mobileNavToggle();
+        cookieNotification.init();
     },
     cacheSelectors: () => {
         page.el.$window = $(window);

src/assets/scripts/util/cookie-notification.js

@@ -0,0 +1,33 @@
+import $ from 'jquery';
+
+var cookieNotification = {
+    el: {},
+    init: () => {
+        if (!$.cookie('acceptCookies')) {
+            cookieNotification.cacheSelectors();
+            cookieNotification.showCookieBanner();
+            cookieNotification.el.$cookieButton.on('click', cookieNotification.hideCookieBanner);
+        }
+    },
+    cacheSelectors: () => {
+        cookieNotification.el.$cookieWrapper = $('.cookie-wrapper');
+        cookieNotification.el.$cookieButton = $('.cookie-button');
+    },
+    showCookieBanner: () => {
+        cookieNotification.el.$cookieWrapper.show();
+          cookieNotification.el.$cookieWrapper.animate({
+            bottom: '0px',
+          }, 500, () => {});
+    },
+    hideCookieBanner: () => {
+      cookieNotification.el.$cookieWrapper.animate({
+        bottom: '-200px',
+      }, 100, () => {
+        cookieNotification.el.$cookieWrapper.hide();
+        $.cookie("acceptCookies", 1, {expires: 14});
+      });
+    }
+};
+
+
+export default cookieNotification;

src/assets/styles/app.scss

@@ -63,6 +63,7 @@
 @import './sections/review-carousel';
 @import './sections/story-grid';
 @import './sections/testimonials';
+@import './sections/cookie-notification';
 
 // Templates TODO - product entry point 
 @import './templates/password-page';

src/assets/styles/sections/cookie-notification.scss

@@ -0,0 +1,21 @@
+.cookie-wrapper {
+    position: fixed;
+    bottom: -200px;
+    display: none;
+    z-index: 100;
+    background-color: $colorHeaderBackground;
+    width: 100%;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 30px;
+    color: $colorBtnPrimaryText;
+}
+
+.cookie-text {
+    padding-right: 20px;
+}
+
+.cookie-inner-wrapper {
+    max-width: $siteWidth;
+    margin: auto;
+}

src/config/settings_schema.json

@@ -1520,6 +1520,18 @@
       }
     ]
   },
+  {
+    "name": "Privacy Page",
+    "settings": [
+      {
+        "type": "text",
+        "id": "privacy_page_link",
+        "label": "Privacy Page",
+        "info": "The page for privacy policy",
+        "default": "/page/privacy-policy"
+      }
+    ]
+  },
   {
     "name": "Social media",
     "settings": [

src/layout/theme.liquid

@@ -59,5 +59,6 @@
         {% if settings.show_multiple_currencies %}
           {% include 'currencies' %}
         {% endif %}
+    {% include 'cookie-notification' %}
     </body>
 </html>

src/locales/en.default.json

@@ -8,6 +8,11 @@
       "tags": "Tagged \"{{ tags }}\"",
       "page": "Page {{ page }}"
     },
+    "cookies": {
+      "cookie_message": "We use cookies to ensure that we give you the best experience on our website. If you continue we'll assume that you understand this.",
+      "accept": "Accept",
+      "learn_more": "Learn More"
+    },
     "404": {
       "title": "Page Not Found",
       "subtext_html": "The page you requested does not exist. Click <a href=\"\/collections\/all\">here<\/a> to continue shopping."

src/snippets/cookie-notification.liquid

@@ -0,0 +1,6 @@
+<div class="cookie-wrapper">
+	<div class="cookie-inner-wrapper">
+		<span class="cookie-text"><span>{{ 'general.cookies.cookie_message' | t }}</span> <a href="{{ settings.privacy_page_link }}">{{ 'general.cookies.learn_more' | t }}</a></span>
+		<button class="btn cookie-button">{{ 'general.cookies.accept' | t }}</button>
+	</div>
+</div>