Refactored the user callout class

Instead of the JS being in charge of the HTML, the HAML now handles it.
The HAML can then check the cookie & show it needed. It also allows the
HAML access to the paths so we don't have to pass that through.

Closes #29955

1 files changed, 6 insertions, 37 deletions

diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js
index b27d252a3ef..fa078b48bf8 100644
--- a/app/assets/javascripts/user_callout.js
+++ b/app/assets/javascripts/user_callout.js
@@ -1,57 +1,26 @@
 import Cookies from 'js-cookie';
 
-const userCalloutElementName = '.user-callout';
-const closeButton = '.close-user-callout';
-const userCalloutBtn = '.user-callout-btn';
-const userCalloutSvgAttrName = 'callout-svg';
-
 const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
 
-const USER_CALLOUT_TEMPLATE = `
-  <div class="bordered-box landing content-block">
-    <button class="btn btn-default close close-user-callout" type="button">
-      <i class="fa fa-times dismiss-icon"></i>
-    </button>
-    <div class="row">
-      <div class="col-sm-3 col-xs-12 svg-container">
-      </div>
-      <div class="col-sm-8 col-xs-12 inner-content">
-        <h4>
-          Customize your experience
-        </h4>
-        <p>
-          Change syntax themes, default project pages, and more in preferences.
-        </p>
-        <a class="btn user-callout-btn" href="/profile/preferences">Check it out</a>
-      </div>
-  </div>
-</div>`;
-
 export default class UserCallout {
   constructor() {
     this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE);
-    this.userCalloutBody = $(userCalloutElementName);
-    this.userCalloutSvg = $(userCalloutElementName).attr(userCalloutSvgAttrName);
-    $(userCalloutElementName).removeAttr(userCalloutSvgAttrName);
+    this.userCalloutBody = $('.user-callout');
     this.init();
   }
 
   init() {
-    const $template = $(USER_CALLOUT_TEMPLATE);
     if (!this.isCalloutDismissed || this.isCalloutDismissed === 'false') {
-      $template.find('.svg-container').append(this.userCalloutSvg);
-      this.userCalloutBody.append($template);
-      $template.find(closeButton).on('click', e => this.dismissCallout(e));
-      $template.find(userCalloutBtn).on('click', e => this.dismissCallout(e));
-    } else {
-      this.userCalloutBody.remove();
+      $('.js-close-callout').on('click', e => this.dismissCallout(e));
     }
   }
 
   dismissCallout(e) {
-    Cookies.set(USER_CALLOUT_COOKIE, 'true');
     const $currentTarget = $(e.currentTarget);
-    if ($currentTarget.hasClass('close-user-callout')) {
+
+    Cookies.set(USER_CALLOUT_COOKIE, 'true');
+
+    if ($currentTarget.hasClass('close')) {
       this.userCalloutBody.remove();
     }
   }