Created unit tests, fixtures and integration tests

Also changed the user_callout haml to a partial and
added the corresponding SVG icon

1 files changed, 20 insertions, 5 deletions

diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js
index b91fc698629..5d10bfc8290 100644
--- a/app/assets/javascripts/user_callout.js
+++ b/app/assets/javascripts/user_callout.js
@@ -3,20 +3,35 @@
 
 ((global) => {
   const userCalloutElementName = '#user-callout';
+  const dismissIcon = '.dismiss-icon';
+  const userCalloutBtn = '.user-callout-btn';
+
+  const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
 
   class UserCallout {
     constructor() {
+      this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE);
       this.init();
     }
 
     init() {
       $(document)
-        .on('DOMContentLoaded', () => {
-          const element = $(userCalloutElementName);
-          console.log('element:', element);
-        });
+        .on('click', dismissIcon, () => this.closeAndDismissCallout())
+        .on('click', userCalloutBtn, () => this.closeAndDismissCallout())
+        .on('DOMContentLoaded', () => this.isUserCalloutDismissed());
+    }
+
+    closeAndDismissCallout() {
+      $(userCalloutElementName).hide();
+      Cookies.set(USER_CALLOUT_COOKIE, '1');
+    }
+
+    isUserCalloutDismissed() {
+      if (!this.isCalloutDismissed) {
+        $(userCalloutElementName).show();
+      }
     }
   }
 
   global.UserCallout = UserCallout;
-})(window.gl || (window.gl = {}));
\ No newline at end of file
+})(window.gl || (window.gl = {}));